@templatical/editor 0.39.3 → 0.40.0

package/dist/{useEditorRoot-BOxn5EfP.js → useEditorRoot-CkB_5d0h.js}

@@ -1,5 +1,5 @@
 import { S as e } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { _ as t } from "./keys-BdoSgsz9.js";
+import { _ as t } from "./keys-CDqfZIRt.js";
 //#region src/composables/useEditorRoot.ts
 function n() {
 	return e(t, document) ?? document;

package/dist/{useI18n-Ds_-druD.js → useI18n-B_CdcBwG.js}

@@ -1,5 +1,5 @@
 import { K as e, S as t } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { q as n } from "./keys-BdoSgsz9.js";
+import { Y as n } from "./keys-CDqfZIRt.js";
 //#region src/composables/useI18n.ts
 function r(r) {
 	let i = r ?? t(n, null);

package/dist/{useLogicTag-DoHfc08B.js → useLogicTag-D9pvgxQR.js}

@@ -1,9 +1,9 @@
 import { S as e, Z as t } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { o as n } from "./dist-tGkjkX-v.js";
-import { C as r, E as i, F as a, N as o, T as s, w as c } from "./keys-BdoSgsz9.js";
+import { o as n } from "./dist-DbUZvK04.js";
+import { D as r, E as i, I as a, P as o, T as s, w as c } from "./keys-CDqfZIRt.js";
 //#region src/composables/useLogicTag.ts
 function l() {
-	let l = e(c, []), u = e(r, []), d = e(o, n.liquid), f = e(a, null), p = e(s, null), m = e(i, null) ?? t(!1), h = !!f || l.length > 0 || u.length > 0, g = l.length > 0 || u.length > 0;
+	let l = e(s, []), u = e(c, []), d = e(o, n.liquid), f = e(a, null), p = e(i, null), m = e(r, null) ?? t(!1), h = !!f || l.length > 0 || u.length > 0, g = l.length > 0 || u.length > 0;
 	async function _() {
 		if (f) {
 			m.value = !0;

package/dist/{useMergeTag-DXyum3kG.js → useMergeTag-BaVFPdlq.js}

@@ -1,14 +1,14 @@
 import { S as e, Z as t, s as n } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { I as r, k as i, o as a } from "./dist-tGkjkX-v.js";
-import { A as o, D as s, L as c, M as l, N as u, O as d, P as f, k as p, q as m } from "./keys-BdoSgsz9.js";
+import { P as r, V as i, o as a } from "./dist-DbUZvK04.js";
+import { A as o, F as s, N as c, O as l, P as u, R as d, Y as f, j as p, k as m } from "./keys-CDqfZIRt.js";
 //#region src/composables/useMergeTag.ts
 function h() {
-	let h = e(s, f), g = e(u, a.liquid), _ = e(c, null), v = e(d, !0), y = e(p, null), b = e(l, !0), x = e(m, null)?.mergeTag.unknownLabel ?? "Merge tag", S = e(o, null) ?? t(!1);
+	let h = e(l, s), g = e(u, a.liquid), _ = e(d, null), v = e(m, !0), y = e(o, null), b = e(c, !0), x = e(f, null)?.mergeTag.unknownLabel ?? "Merge tag", S = e(p, null) ?? t(!1);
 	function C(e) {
-		return r(e, g);
+		return i(e, g);
 	}
 	function w(e) {
-		return i(e, h.value);
+		return r(e, h.value);
 	}
 	function T(e) {
 		return h.value.find((t) => t.value === e);

package/dist/{usePopoverPosition-Du-Ah8E9.js → usePopoverPosition-DH7z3Ghm.js}

@@ -1,5 +1,5 @@
 import { S as e, Z as t } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { z as n } from "./keys-BdoSgsz9.js";
+import { B as n } from "./keys-CDqfZIRt.js";
 //#region src/utils/resolveColorsConfig.ts
 var r = {
 	presets: [],

package/dist/{useScrollToBlock-DXQYPCnJ.js → useScrollToBlock-Dj4v3rxr.js}

@@ -1,6 +1,6 @@
 import { E as e } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { t } from "./createLucideIcon-BxY5yz5u.js";
-import { t as n } from "./useEditorRoot-BOxn5EfP.js";
+import { t as n } from "./useEditorRoot-CkB_5d0h.js";
 var r = t({
 	name: "list-checks",
 	size: 24,

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@templatical/editor",
   "description": "Vue 3 visual drag-and-drop email editor powered by Templatical",
-  "version": "0.39.3",
+  "version": "0.40.0",
   "bugs": "https://github.com/templatical/sdk/issues",
   "devDependencies": {
     "@lucide/vue": "^1.47.0",
-    "@templatical/core": "0.39.3",
-    "@templatical/media-library": "0.39.3",
-    "@templatical/quality": "0.39.3",
-    "@templatical/types": "0.39.3",
+    "@templatical/core": "0.40.0",
+    "@templatical/media-library": "0.40.0",
+    "@templatical/quality": "0.40.0",
+    "@templatical/types": "0.40.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-color": "^3.31.3",
     "@tiptap/extension-font-family": "^3.31.3",
@@ -64,8 +64,8 @@
   "license": "FSL-1.1-MIT",
   "module": "./dist/templatical-editor.js",
   "peerDependencies": {
-    "@templatical/quality": "0.39.3",
-    "@templatical/renderer": "0.39.3"
+    "@templatical/quality": "0.40.0",
+    "@templatical/renderer": "0.40.0"
   },
   "peerDependenciesMeta": {
     "@templatical/renderer": {

package/dist/BlockPreviewCanvas-BMC16_QU.js

@@ -1,131 +0,0 @@
-import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { A as t, At as n, F as r, M as i, P as a, S as o, at as s, c, d as l, j as u, l as d, r as f, s as p, v as m } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { R as h } from "./dist-tGkjkX-v.js";
-import { _ as g, a as _, c as v, d as y, f as b, g as x, h as S, i as C, k as w, m as T, n as E, p as D, r as O, u as k, v as A } from "./useEditorCore-BUVbQgwb.js";
-import { X as j, f as M, g as N, j as P, s as F } from "./keys-BdoSgsz9.js";
-import { n as I, t as L } from "./emailFrameWidth-BmFCN2dp.js";
-//#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
-var R = { class: "tpl:w-full" }, z = { class: "tpl:flex tpl:gap-0" }, B = /* @__PURE__ */ m({
-	name: "PreviewSectionBlock",
-	__name: "PreviewSectionBlock",
-	props: {
-		block: {},
-		viewport: {}
-	},
-	setup(e) {
-		let u = {
-			title: v,
-			paragraph: D,
-			image: S,
-			video: E,
-			button: w,
-			divider: g,
-			social: _,
-			menu: T,
-			table: O,
-			spacer: C,
-			html: x,
-			custom: A
-		}, m = e, h = o(F, null), y = p(() => {
-			switch (m.block.columns) {
-				case "2": return ["50%", "50%"];
-				case "3": return [
-					"33.33%",
-					"33.33%",
-					"33.33%"
-				];
-				case "1-2": return ["33.33%", "66.67%"];
-				case "2-1": return ["66.67%", "33.33%"];
-				default: return ["100%"];
-			}
-		}), j = p(() => {
-			let e = y.value.length, t = [...m.block.children];
-			for (; t.length < e;) t.push([]);
-			return t.slice(0, e);
-		});
-		function M(e) {
-			return j.value[e] || [];
-		}
-		function N(e) {
-			return b(e, h, u);
-		}
-		return (e, o) => {
-			let u = a("PreviewSectionBlock", !0);
-			return t(), l("div", R, [c("div", z, [(t(!0), l(f, null, i(j.value, (e, a) => (t(), l("div", {
-				key: a,
-				style: n({ width: y.value[a] })
-			}, [(t(!0), l(f, null, i(M(a), (e) => (t(), l("div", {
-				key: e.id,
-				style: n(s(k)(e))
-			}, [e.type === "section" ? (t(), d(u, {
-				key: 0,
-				block: e,
-				viewport: "desktop"
-			}, null, 8, ["block"])) : (t(), d(r(N(e)), {
-				key: 1,
-				block: e,
-				viewport: "desktop"
-			}, null, 8, ["block"]))], 4))), 128))], 4))), 128))])]);
-		};
-	}
-}), V = ["lang", "dir"], H = /*@__PURE__*/ m({
-	__name: "BlockPreviewCanvas",
-	props: {
-		blocks: {},
-		viewport: { default: "desktop" },
-		applyConditionFilter: {
-			type: Boolean,
-			default: !0
-		}
-	},
-	setup(e) {
-		let a = e, m = o(F), R = o(N, null), z = o(M, null), H = o(P, null);
-		u(j, p(() => H?.value ?? !1));
-		let U = p(() => a.applyConditionFilter ? a.blocks.filter((e) => !z?.isHidden(e.id)) : a.blocks), W = p(() => I(R?.content.value.settings, a.viewport)), G = p(() => R ? y(R.content.value.settings) : {}), K = p(() => R?.content.value.settings?.locale?.trim() || void 0), q = p(() => h(R?.content.value.settings ?? { locale: "en" })), J = p(() => R?.content.value.settings.backgroundColor || "var(--tpl-canvas-bg)"), Y = p(() => W.value + 192), X = {
-			section: B,
-			title: v,
-			paragraph: D,
-			image: S,
-			video: E,
-			button: w,
-			divider: g,
-			social: _,
-			menu: T,
-			table: O,
-			spacer: C,
-			html: x,
-			custom: A
-		};
-		function Z(e) {
-			return b(e, m, X);
-		}
-		return (a, o) => (t(), l("div", {
-			"data-testid": "block-preview-stage",
-			class: "tpl:pointer-events-none tpl:mx-auto tpl:flex tpl:select-none tpl:justify-center tpl:rounded-lg",
-			style: n({
-				width: `${Y.value}px`,
-				minWidth: `${W.value}px`,
-				maxWidth: "100%",
-				backgroundColor: J.value,
-				boxShadow: "var(--tpl-shadow-sm)"
-			})
-		}, [c("div", {
-			"data-testid": "block-preview-canvas",
-			lang: K.value,
-			dir: q.value,
-			style: n({
-				width: `${W.value}px`,
-				transition: s(L),
-				...G.value
-			})
-		}, [(t(!0), l(f, null, i(U.value, (i) => (t(), l("div", {
-			key: i.id,
-			style: n(s(k)(i))
-		}, [(t(), d(r(Z(i)), {
-			block: i,
-			viewport: e.viewport
-		}, null, 8, ["block", "viewport"]))], 4))), 128))], 12, V)], 4));
-	}
-}), U = /* @__PURE__ */ e({ default: () => W }), W = H;
-//#endregion
-export { U as n, W as t };

package/dist/cdn/chunks/BlockPreviewCanvas-DeS7Sa--.js

@@ -1,133 +0,0 @@
-import { n as e } from "./rolldown-runtime-B0aSnxlc.js";
-import { E as t, F as n, L as r, N as i, P as a, R as o, S as s, at as c, f as l, g as u, lt as d, m as f, p, u as m } from "./draggable-IB4x6w2O.js";
-import { R as h } from "./src-Dwgq7hf4.js";
-import { T as g, _, a as v, d as y, f as b, g as x, h as S, i as C, l as w, m as T, n as E, p as D, r as O, s as k, u as A } from "./useEditorCore-CXYI14ux.js";
-import { X as j, f as M, g as N, j as P, s as F } from "./keys-dJbD1QPs.js";
-import { n as I, t as L } from "./emailFrameWidth-BmFCN2dp.js";
-//#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
-var R = { class: "tpl:w-full" }, z = { class: "tpl:flex tpl:gap-0" }, B = /* @__PURE__ */ s({
-	name: "PreviewSectionBlock",
-	__name: "PreviewSectionBlock",
-	props: {
-		block: {},
-		viewport: {}
-	},
-	setup(e) {
-		let a = {
-			title: k,
-			paragraph: b,
-			image: T,
-			video: E,
-			button: g,
-			divider: x,
-			social: v,
-			menu: D,
-			table: O,
-			spacer: C,
-			html: S,
-			custom: _
-		}, s = e, h = t(F, null), A = l(() => {
-			switch (s.block.columns) {
-				case "2": return ["50%", "50%"];
-				case "3": return [
-					"33.33%",
-					"33.33%",
-					"33.33%"
-				];
-				case "1-2": return ["33.33%", "66.67%"];
-				case "2-1": return ["66.67%", "33.33%"];
-				default: return ["100%"];
-			}
-		}), j = l(() => {
-			let e = A.value.length, t = [...s.block.children];
-			for (; t.length < e;) t.push([]);
-			return t.slice(0, e);
-		});
-		function M(e) {
-			return j.value[e] || [];
-		}
-		function N(e) {
-			return y(e, h, a);
-		}
-		return (e, t) => {
-			let a = r("PreviewSectionBlock", !0);
-			return i(), u("div", R, [p("div", z, [(i(!0), u(m, null, n(j.value, (e, t) => (i(), u("div", {
-				key: t,
-				style: d({ width: A.value[t] })
-			}, [(i(!0), u(m, null, n(M(t), (e) => (i(), u("div", {
-				key: e.id,
-				style: d(c(w)(e))
-			}, [e.type === "section" ? (i(), f(a, {
-				key: 0,
-				block: e,
-				viewport: "desktop"
-			}, null, 8, ["block"])) : (i(), f(o(N(e)), {
-				key: 1,
-				block: e,
-				viewport: "desktop"
-			}, null, 8, ["block"]))], 4))), 128))], 4))), 128))])]);
-		};
-	}
-}), V = ["lang", "dir"], H = /*@__PURE__*/ s({
-	__name: "BlockPreviewCanvas",
-	props: {
-		blocks: {},
-		viewport: { default: "desktop" },
-		applyConditionFilter: {
-			type: Boolean,
-			default: !0
-		}
-	},
-	setup(e) {
-		let r = e, s = t(F), R = t(N, null), z = t(M, null), H = t(P, null);
-		a(j, l(() => H?.value ?? !1));
-		let U = l(() => r.applyConditionFilter ? r.blocks.filter((e) => !z?.isHidden(e.id)) : r.blocks), W = l(() => I(R?.content.value.settings, r.viewport)), G = l(() => R ? A(R.content.value.settings) : {}), K = l(() => R?.content.value.settings?.locale?.trim() || void 0), q = l(() => h(R?.content.value.settings ?? { locale: "en" })), J = l(() => R?.content.value.settings.backgroundColor || "var(--tpl-canvas-bg)"), Y = l(() => W.value + 192), X = {
-			section: B,
-			title: k,
-			paragraph: b,
-			image: T,
-			video: E,
-			button: g,
-			divider: x,
-			social: v,
-			menu: D,
-			table: O,
-			spacer: C,
-			html: S,
-			custom: _
-		};
-		function Z(e) {
-			return y(e, s, X);
-		}
-		return (t, r) => (i(), u("div", {
-			"data-testid": "block-preview-stage",
-			class: "tpl:pointer-events-none tpl:mx-auto tpl:flex tpl:select-none tpl:justify-center tpl:rounded-lg",
-			style: d({
-				width: `${Y.value}px`,
-				minWidth: `${W.value}px`,
-				maxWidth: "100%",
-				backgroundColor: J.value,
-				boxShadow: "var(--tpl-shadow-sm)"
-			})
-		}, [p("div", {
-			"data-testid": "block-preview-canvas",
-			lang: K.value,
-			dir: q.value,
-			style: d({
-				width: `${W.value}px`,
-				transition: c(L),
-				...G.value
-			})
-		}, [(i(!0), u(m, null, n(U.value, (t) => (i(), u("div", {
-			key: t.id,
-			style: d(c(w)(t))
-		}, [(i(), f(o(Z(t)), {
-			block: t,
-			viewport: e.viewport
-		}, null, 8, ["block", "viewport"]))], 4))), 128))], 12, V)], 4));
-	}
-}), U = /* @__PURE__ */ e({ default: () => W }), W = H;
-//#endregion
-export { U as n, W as t };
-
-//# sourceMappingURL=BlockPreviewCanvas-DeS7Sa--.js.map

package/dist/cdn/chunks/BlockPreviewCanvas-DeS7Sa--.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlockPreviewCanvas-DeS7Sa--.js","names":[],"sources":["../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/BlockPreviewCanvas.vue","../../../src/components/BlockPreviewCanvas.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n  Block,\n  SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nconst props = defineProps<{\n  block: SectionBlockType;\n  viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n  switch (props.block.columns) {\n    case \"2\":\n      return [\"50%\", \"50%\"];\n    case \"3\":\n      return [\"33.33%\", \"33.33%\", \"33.33%\"];\n    case \"1-2\":\n      return [\"33.33%\", \"66.67%\"];\n    case \"2-1\":\n      return [\"66.67%\", \"33.33%\"];\n    default:\n      return [\"100%\"];\n  }\n});\n\nconst columns = computed(() => {\n  const count = columnWidths.value.length;\n  const children = [...props.block.children];\n  while (children.length < count) {\n    children.push([]);\n  }\n  return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n  return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n  <div class=\"tpl:w-full\">\n    <div class=\"tpl:flex tpl:gap-0\">\n      <div\n        v-for=\"(_, colIndex) in columns\"\n        :key=\"colIndex\"\n        :style=\"{ width: columnWidths[colIndex] }\"\n      >\n        <div\n          v-for=\"childBlock in getColumnBlocks(colIndex)\"\n          :key=\"childBlock.id\"\n          :style=\"getBlockWrapperStyle(childBlock)\"\n        >\n          <!-- Recursive self-reference for nested sections -->\n          <PreviewSectionBlock\n            v-if=\"childBlock.type === 'section'\"\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n          <component\n            :is=\"getBlockComponent(childBlock)\"\n            v-else\n            :block=\"childBlock\"\n            viewport=\"desktop\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./blocks/ButtonBlock.vue\";\nimport CustomBlock from \"./blocks/CustomBlock.vue\";\nimport DividerBlock from \"./blocks/DividerBlock.vue\";\nimport HtmlBlock from \"./blocks/HtmlBlock.vue\";\nimport ImageBlock from \"./blocks/ImageBlock.vue\";\nimport MenuBlock from \"./blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"./blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"./blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"./blocks/SpacerBlock.vue\";\nimport TableBlock from \"./blocks/TableBlock.vue\";\nimport TitleBlock from \"./blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"./blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"./blocks/VideoBlock.vue\";\nimport {\n  BLOCK_REGISTRY_KEY,\n  CONDITION_PREVIEW_KEY,\n  EDITOR_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  USE_MERGE_TAG_SAMPLES_KEY,\n} from \"../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n  getDocumentStyle,\n} from \"../utils/blockComponentResolver\";\nimport {\n  EMAIL_FRAME_WIDTH_TRANSITION,\n  EMAIL_GUTTER,\n  getEmailFrameWidth,\n} from \"../utils/emailFrameWidth\";\nimport {\n  resolveContentDirection,\n  type Block,\n  type ViewportSize,\n} from \"@templatical/types\";\nimport { computed, inject, provide, type Component } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    blocks: Block[];\n    /**\n     * Which viewport to render. Defaults to `desktop`, so the saved-blocks\n     * surfaces — which have no viewport control — behave exactly as before.\n     * The test-email dialog passes the user's choice so responsive blocks show\n     * the variant a recipient on that device would receive.\n     */\n    viewport?: ViewportSize;\n    /**\n     * Whether the hand-toggled display-condition filter still applies here.\n     * `false` where a resolver owns the preview: it has already evaluated every\n     * condition against real data, so layering a manual hide on top would veto\n     * the answer that was asked for.\n     *\n     * A prop rather than an injected `PREVIEW_RESOLUTION_KEY` read, because the\n     * test-email dialog builds its *own* resolution instance (keyed to the\n     * selected recipient) — injecting would consult the shared canvas instance\n     * and get the wrong answer.\n     */\n    applyConditionFilter?: boolean;\n  }>(),\n  { viewport: \"desktop\", applyConditionFilter: true },\n);\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\nconst editor = inject(EDITOR_KEY, null);\nconst conditionPreview = inject(CONDITION_PREVIEW_KEY, null);\n\n/**\n * This canvas is only ever a preview — nothing here is editable — so it honours\n * the user's mode directly, with no `previewMode` gate of the kind `Canvas.vue`\n * needs. Re-provided rather than left to inherit, because a `BlockPreviewCanvas`\n * inside a dialog may sit under an editing `Canvas` that provides `false`.\n */\nconst mergeTagSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\nprovide(\n  USE_MERGE_TAG_SAMPLES_KEY,\n  computed(() => mergeTagSampleMode?.value ?? false),\n);\n\n/**\n * Blocks a display condition currently excludes, so a preview never shows\n * content the recipient won't get. The canvas does the same via\n * `v-show=\"!conditionPreview?.isHidden(block.id)\"`.\n *\n * A no-op for the saved-blocks browser: entries there carry their *stored* ids,\n * which aren't in the current template, so nothing is tracked as hidden. It\n * bites where it should — the save dialog and the test-email preview, both of\n * which show blocks that are live on the canvas.\n *\n * Skipped entirely when `applyConditionFilter` is false — see the prop.\n */\nconst visibleBlocks = computed(() =>\n  props.applyConditionFilter\n    ? props.blocks.filter((block) => !conditionPreview?.isHidden(block.id))\n    : props.blocks,\n);\n\n/**\n * Frame width, from the one helper the canvas and the scaled preview rows also\n * use — so all three agree by construction rather than by three constants that\n * happen to match. A template with a custom body width now previews at that\n * width instead of a flat 600.\n */\nconst frameWidth = computed(() =>\n  getEmailFrameWidth(editor?.content.value.settings, props.viewport),\n);\n\n/**\n * The same document-level style the canvas applies, so a previewed block\n * renders identically to the canvas one: without it the font falls back to the\n * editor UI's and the link rules hit their unset defaults, dropping the\n * underline and the link colour.\n *\n * Read from the *current* template even in the saved-blocks browser, where the\n * previewed content came from elsewhere — a saved block stores only `Block[]`,\n * and the current settings are what it will actually look like once inserted.\n */\nconst documentStyle = computed(() =>\n  editor ? getDocumentStyle(editor.content.value.settings) : {},\n);\n\n/**\n * The email's own language, for the browser's spellchecker and hyphenation —\n * the same binding the editing canvas carries, so a preview is checked by the\n * same rules as the block it mirrors.\n *\n * From `settings.locale`, never `config.locale`: the chrome's language says\n * nothing about the content's. Read from the *current* template for the same\n * reason `documentStyle` is — a saved block stores only `Block[]`. Undefined\n * rather than `\"\"`, which would declare \"unknown language\" and suppress\n * spellcheck instead of falling back.\n */\nconst contentLang = computed(\n  () => editor?.content.value.settings?.locale?.trim() || undefined,\n);\nconst contentDir = computed(() =>\n  resolveContentDirection(editor?.content.value.settings ?? { locale: \"en\" }),\n);\n\n/**\n * The email's body background — `mj-body background-color` when sent, and the\n * `.tpl-canvas-bg` layer on the editing canvas.\n *\n * Deliberately NOT part of `getDocumentStyle`: the canvas applies that helper\n * to `.tpl-canvas`, which must stay transparent so the invertible background\n * layer beneath it shows through. A background there would double-paint and\n * defeat the dark-mode preview.\n *\n * Truthiness, not `??`: the colour pickers clear to an empty string to mean\n * \"unset\", which as an inline style renders the frame transparent rather than\n * falling back to the neutral preview surface.\n */\nconst emailBackground = computed(\n  () =>\n    editor?.content.value.settings.backgroundColor || \"var(--tpl-canvas-bg)\",\n);\n\n/**\n * Width the stage asks for: the content column plus a full gutter on each side,\n * the same stage the canvas builds. It is an ask rather than a fixed size —\n * paired with `max-width: 100%` below, so a container with less room hands over\n * what it has and shows a narrower band instead of overflowing.\n *\n * It has to be a specified width, not `100%`: `TplModal`'s wrapper is\n * shrink-to-fit, so a percentage there resolves against a container whose size\n * the stage is itself supposed to influence, and the stage collapses to its\n * `min-width` — no gutters, on the one surface this exists for.\n */\nconst stageWidth = computed(() => frameWidth.value + EMAIL_GUTTER * 2);\n\nconst previewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewComponentMap);\n}\n</script>\n\n<template>\n  <!-- STAGE — the email body, holding the background and a gutter of it on\n       each side of the content column, the same shape `Canvas.vue` builds.\n       `max-width: 100%` is what makes it fit anywhere: a roomy surface shows\n       the full band, a dialog shows as much as it has, and a container sized to\n       the content column shows none. `min-width` keeps it from squeezing the\n       column, so a cramped surface clips exactly as it did when the frame\n       carried the width itself. -->\n  <div\n    data-testid=\"block-preview-stage\"\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:flex tpl:select-none tpl:justify-center tpl:rounded-lg\"\n    :style=\"{\n      width: `${stageWidth}px`,\n      minWidth: `${frameWidth}px`,\n      maxWidth: '100%',\n      backgroundColor: emailBackground,\n      boxShadow: 'var(--tpl-shadow-sm)',\n    }\"\n  >\n    <!-- CONTENT COLUMN — the blocks at their true email width. Keeps the\n         testid: this is the element whose width *is* the email width, which is\n         what every viewport assertion measures. -->\n    <div\n      data-testid=\"block-preview-canvas\"\n      :lang=\"contentLang\"\n      :dir=\"contentDir\"\n      :style=\"{\n        width: `${frameWidth}px`,\n        transition: EMAIL_FRAME_WIDTH_TRANSITION,\n        ...documentStyle,\n      }\"\n    >\n      <div\n        v-for=\"block in visibleBlocks\"\n        :key=\"block.id\"\n        :style=\"getBlockWrapperStyle(block)\"\n      >\n        <component\n          :is=\"getBlockComponent(block)\"\n          :block=\"block\"\n          :viewport=\"viewport\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./blocks/ButtonBlock.vue\";\nimport CustomBlock from \"./blocks/CustomBlock.vue\";\nimport DividerBlock from \"./blocks/DividerBlock.vue\";\nimport HtmlBlock from \"./blocks/HtmlBlock.vue\";\nimport ImageBlock from \"./blocks/ImageBlock.vue\";\nimport MenuBlock from \"./blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"./blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"./blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"./blocks/SpacerBlock.vue\";\nimport TableBlock from \"./blocks/TableBlock.vue\";\nimport TitleBlock from \"./blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"./blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"./blocks/VideoBlock.vue\";\nimport {\n  BLOCK_REGISTRY_KEY,\n  CONDITION_PREVIEW_KEY,\n  EDITOR_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  USE_MERGE_TAG_SAMPLES_KEY,\n} from \"../keys\";\nimport {\n  resolveBlockComponent,\n  getBlockWrapperStyle,\n  getDocumentStyle,\n} from \"../utils/blockComponentResolver\";\nimport {\n  EMAIL_FRAME_WIDTH_TRANSITION,\n  EMAIL_GUTTER,\n  getEmailFrameWidth,\n} from \"../utils/emailFrameWidth\";\nimport {\n  resolveContentDirection,\n  type Block,\n  type ViewportSize,\n} from \"@templatical/types\";\nimport { computed, inject, provide, type Component } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    blocks: Block[];\n    /**\n     * Which viewport to render. Defaults to `desktop`, so the saved-blocks\n     * surfaces — which have no viewport control — behave exactly as before.\n     * The test-email dialog passes the user's choice so responsive blocks show\n     * the variant a recipient on that device would receive.\n     */\n    viewport?: ViewportSize;\n    /**\n     * Whether the hand-toggled display-condition filter still applies here.\n     * `false` where a resolver owns the preview: it has already evaluated every\n     * condition against real data, so layering a manual hide on top would veto\n     * the answer that was asked for.\n     *\n     * A prop rather than an injected `PREVIEW_RESOLUTION_KEY` read, because the\n     * test-email dialog builds its *own* resolution instance (keyed to the\n     * selected recipient) — injecting would consult the shared canvas instance\n     * and get the wrong answer.\n     */\n    applyConditionFilter?: boolean;\n  }>(),\n  { viewport: \"desktop\", applyConditionFilter: true },\n);\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\nconst editor = inject(EDITOR_KEY, null);\nconst conditionPreview = inject(CONDITION_PREVIEW_KEY, null);\n\n/**\n * This canvas is only ever a preview — nothing here is editable — so it honours\n * the user's mode directly, with no `previewMode` gate of the kind `Canvas.vue`\n * needs. Re-provided rather than left to inherit, because a `BlockPreviewCanvas`\n * inside a dialog may sit under an editing `Canvas` that provides `false`.\n */\nconst mergeTagSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\nprovide(\n  USE_MERGE_TAG_SAMPLES_KEY,\n  computed(() => mergeTagSampleMode?.value ?? false),\n);\n\n/**\n * Blocks a display condition currently excludes, so a preview never shows\n * content the recipient won't get. The canvas does the same via\n * `v-show=\"!conditionPreview?.isHidden(block.id)\"`.\n *\n * A no-op for the saved-blocks browser: entries there carry their *stored* ids,\n * which aren't in the current template, so nothing is tracked as hidden. It\n * bites where it should — the save dialog and the test-email preview, both of\n * which show blocks that are live on the canvas.\n *\n * Skipped entirely when `applyConditionFilter` is false — see the prop.\n */\nconst visibleBlocks = computed(() =>\n  props.applyConditionFilter\n    ? props.blocks.filter((block) => !conditionPreview?.isHidden(block.id))\n    : props.blocks,\n);\n\n/**\n * Frame width, from the one helper the canvas and the scaled preview rows also\n * use — so all three agree by construction rather than by three constants that\n * happen to match. A template with a custom body width now previews at that\n * width instead of a flat 600.\n */\nconst frameWidth = computed(() =>\n  getEmailFrameWidth(editor?.content.value.settings, props.viewport),\n);\n\n/**\n * The same document-level style the canvas applies, so a previewed block\n * renders identically to the canvas one: without it the font falls back to the\n * editor UI's and the link rules hit their unset defaults, dropping the\n * underline and the link colour.\n *\n * Read from the *current* template even in the saved-blocks browser, where the\n * previewed content came from elsewhere — a saved block stores only `Block[]`,\n * and the current settings are what it will actually look like once inserted.\n */\nconst documentStyle = computed(() =>\n  editor ? getDocumentStyle(editor.content.value.settings) : {},\n);\n\n/**\n * The email's own language, for the browser's spellchecker and hyphenation —\n * the same binding the editing canvas carries, so a preview is checked by the\n * same rules as the block it mirrors.\n *\n * From `settings.locale`, never `config.locale`: the chrome's language says\n * nothing about the content's. Read from the *current* template for the same\n * reason `documentStyle` is — a saved block stores only `Block[]`. Undefined\n * rather than `\"\"`, which would declare \"unknown language\" and suppress\n * spellcheck instead of falling back.\n */\nconst contentLang = computed(\n  () => editor?.content.value.settings?.locale?.trim() || undefined,\n);\nconst contentDir = computed(() =>\n  resolveContentDirection(editor?.content.value.settings ?? { locale: \"en\" }),\n);\n\n/**\n * The email's body background — `mj-body background-color` when sent, and the\n * `.tpl-canvas-bg` layer on the editing canvas.\n *\n * Deliberately NOT part of `getDocumentStyle`: the canvas applies that helper\n * to `.tpl-canvas`, which must stay transparent so the invertible background\n * layer beneath it shows through. A background there would double-paint and\n * defeat the dark-mode preview.\n *\n * Truthiness, not `??`: the colour pickers clear to an empty string to mean\n * \"unset\", which as an inline style renders the frame transparent rather than\n * falling back to the neutral preview surface.\n */\nconst emailBackground = computed(\n  () =>\n    editor?.content.value.settings.backgroundColor || \"var(--tpl-canvas-bg)\",\n);\n\n/**\n * Width the stage asks for: the content column plus a full gutter on each side,\n * the same stage the canvas builds. It is an ask rather than a fixed size —\n * paired with `max-width: 100%` below, so a container with less room hands over\n * what it has and shows a narrower band instead of overflowing.\n *\n * It has to be a specified width, not `100%`: `TplModal`'s wrapper is\n * shrink-to-fit, so a percentage there resolves against a container whose size\n * the stage is itself supposed to influence, and the stage collapses to its\n * `min-width` — no gutters, on the one surface this exists for.\n */\nconst stageWidth = computed(() => frameWidth.value + EMAIL_GUTTER * 2);\n\nconst previewComponentMap: Record<string, Component> = {\n  section: PreviewSectionBlock,\n  title: TitleBlock,\n  paragraph: ParagraphBlock,\n  image: ImageBlock,\n  video: VideoBlock,\n  button: ButtonBlock,\n  divider: DividerBlock,\n  social: SocialIconsBlock,\n  menu: MenuBlock,\n  table: TableBlock,\n  spacer: SpacerBlock,\n  html: HtmlBlock,\n  custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n  return resolveBlockComponent(block, blockRegistry, previewComponentMap);\n}\n</script>\n\n<template>\n  <!-- STAGE — the email body, holding the background and a gutter of it on\n       each side of the content column, the same shape `Canvas.vue` builds.\n       `max-width: 100%` is what makes it fit anywhere: a roomy surface shows\n       the full band, a dialog shows as much as it has, and a container sized to\n       the content column shows none. `min-width` keeps it from squeezing the\n       column, so a cramped surface clips exactly as it did when the frame\n       carried the width itself. -->\n  <div\n    data-testid=\"block-preview-stage\"\n    class=\"tpl:pointer-events-none tpl:mx-auto tpl:flex tpl:select-none tpl:justify-center tpl:rounded-lg\"\n    :style=\"{\n      width: `${stageWidth}px`,\n      minWidth: `${frameWidth}px`,\n      maxWidth: '100%',\n      backgroundColor: emailBackground,\n      boxShadow: 'var(--tpl-shadow-sm)',\n    }\"\n  >\n    <!-- CONTENT COLUMN — the blocks at their true email width. Keeps the\n         testid: this is the element whose width *is* the email width, which is\n         what every viewport assertion measures. -->\n    <div\n      data-testid=\"block-preview-canvas\"\n      :lang=\"contentLang\"\n      :dir=\"contentDir\"\n      :style=\"{\n        width: `${frameWidth}px`,\n        transition: EMAIL_FRAME_WIDTH_TRANSITION,\n        ...documentStyle,\n      }\"\n    >\n      <div\n        v-for=\"block in visibleBlocks\"\n        :key=\"block.id\"\n        :style=\"getBlockWrapperStyle(block)\"\n      >\n        <component\n          :is=\"getBlockComponent(block)\"\n          :block=\"block\"\n          :viewport=\"viewport\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}