@templatical/editor 0.21.2 → 0.23.0

package/README.md

@@ -12,7 +12,7 @@ The visual editor for [Templatical](https://github.com/templatical/sdk) — an o
 - 🎨 **27 design tokens** — full theming via `--tpl-user-*` CSS variables, dark mode, custom fonts
 - 🔌 **Framework-agnostic** — works in React, Vue, Svelte, Angular, vanilla
 - 📦 **JSON in, MJML out** — portable templates, render with any email provider
-- 🌍 **Multilingual** — English, German, Portuguese, Spanish & Catalan built in
+- 🌍 **Multilingual** — English, German, Portuguese, Spanish, Catalan, French & Dutch built in
 - 🔒 **TypeScript strict** — full type safety end to end
 
 ## Install

package/dist/{AiChatSidebar-K_AehWc-.js → AiChatSidebar-Bru6-ziQ.js}

@@ -12,7 +12,7 @@ import { t as me } from "./x-CkD6A1iB.js";
 import { t as b } from "./LoadingTrack-KIcREPlS.js";
 import { t as x } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as S } from "./useAliveFlag-C43EhZFY.js";
-import { a as C } from "./cloud-Du7mnkz2.js";
+import { o as C } from "./cloud-CeZPgo1V.js";
 var w = v("redo-2", [["path", {
 	d: "m15 14 5-5-5-5",
 	key: "12vg1m"

package/dist/{AiFeatureMenu-CcqQDHzJ.js → AiFeatureMenu-CcqjRMFW.js}

@@ -1,5 +1,5 @@
 import { A as e, Dt as t, N as n, O as r, Ot as i, _ as a, c as o, d as s, l as c, r as l, s as u } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
-import "./useEditorCore-CT1slufs.js";
+import "./useEditorCore-CuMMIfiS.js";
 import { B as d, t as f } from "./keys-CHPcp-Nz.js";
 import { t as p } from "./image-up-CQdtq8ge.js";
 import { t as m } from "./shield-check-B7x5OKt5.js";

package/dist/{SavedBlockPreviewCanvas-2-mzAnZE.js → BlockPreviewCanvas-MD9BGuXV.js}

@@ -1,9 +1,10 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 import { A as t, Dt as n, M as r, N as i, O as a, _ as o, c as s, d as c, l, nt as u, r as d, s as f, x as p } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
-import { a as m, b as h, d as g, f as _, g as v, h as y, i as b, l as x, m as S, n as C, p as w, r as T, v as E, y as D, z as O } from "./useEditorCore-CT1slufs.js";
-import { h as k, o as A } from "./keys-CHPcp-Nz.js";
+import { a as m, b as h, d as g, f as _, g as v, h as y, i as b, l as x, m as S, n as C, p as w, r as T, v as E, y as D, z as O } from "./useEditorCore-CuMMIfiS.js";
+import { d as k, h as A, o as j } from "./keys-CHPcp-Nz.js";
+import { n as M, t as N } from "./emailFrameWidth-BmFCN2dp.js";
 //#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
-var j = { class: "tpl:w-full" }, M = { class: "tpl:flex tpl:gap-0" }, N = /* @__PURE__ */ o({
+var P = { class: "tpl:w-full" }, F = { class: "tpl:flex tpl:gap-0" }, I = /* @__PURE__ */ o({
 	name: "PreviewSectionBlock",
 	__name: "PreviewSectionBlock",
 	props: {
@@ -24,7 +25,7 @@ var j = { class: "tpl:w-full" }, M = { class: "tpl:flex tpl:gap-0" }, N = /* @__
 			spacer: b,
 			html: E,
 			custom: h
-		}, _ = e, k = p(A, null), N = f(() => {
+		}, _ = e, k = p(j, null), A = f(() => {
 			switch (_.block.columns) {
 				case "2": return ["50%", "50%"];
 				case "3": return [
@@ -36,23 +37,23 @@ var j = { class: "tpl:w-full" }, M = { class: "tpl:flex tpl:gap-0" }, N = /* @__
 				case "2-1": return ["66.67%", "33.33%"];
 				default: return ["100%"];
 			}
-		}), P = f(() => {
-			let e = N.value.length, t = [..._.block.children];
+		}), M = f(() => {
+			let e = A.value.length, t = [..._.block.children];
 			for (; t.length < e;) t.push([]);
 			return t.slice(0, e);
 		});
-		function F(e) {
-			return P.value[e] || [];
+		function N(e) {
+			return M.value[e] || [];
 		}
 		function I(e) {
 			return w(e, k, o);
 		}
 		return (e, o) => {
 			let f = r("PreviewSectionBlock", !0);
-			return a(), c("div", j, [s("div", M, [(a(!0), c(d, null, t(P.value, (e, r) => (a(), c("div", {
+			return a(), c("div", P, [s("div", F, [(a(!0), c(d, null, t(M.value, (e, r) => (a(), c("div", {
 				key: r,
-				style: n({ width: N.value[r] })
-			}, [(a(!0), c(d, null, t(F(r), (e) => (a(), c("div", {
+				style: n({ width: A.value[r] })
+			}, [(a(!0), c(d, null, t(N(r), (e) => (a(), c("div", {
 				key: e.id,
 				style: n(u(g)(e))
 			}, [e.type === "section" ? (a(), l(f, {
@@ -66,12 +67,15 @@ var j = { class: "tpl:w-full" }, M = { class: "tpl:flex tpl:gap-0" }, N = /* @__
 			}, null, 8, ["block"]))], 4))), 128))], 4))), 128))])]);
 		};
 	}
-}), P = /*@__PURE__*/ o({
-	__name: "SavedBlockPreviewCanvas",
-	props: { blocks: {} },
+}), L = /*@__PURE__*/ o({
+	__name: "BlockPreviewCanvas",
+	props: {
+		blocks: {},
+		viewport: { default: "desktop" }
+	},
 	setup(e) {
-		let r = p(A), o = p(k, null), s = f(() => o ? _(o.content.value.settings) : {}), j = {
-			section: N,
+		let r = e, o = p(j), s = p(A, null), P = p(k, null), F = f(() => r.blocks.filter((e) => !P?.isHidden(e.id))), L = f(() => M(s?.content.value.settings, r.viewport)), R = f(() => s ? _(s.content.value.settings) : {}), z = {
+			section: I,
 			title: x,
 			paragraph: S,
 			image: v,
@@ -85,25 +89,27 @@ var j = { class: "tpl:w-full" }, M = { class: "tpl:flex tpl:gap-0" }, N = /* @__
 			html: E,
 			custom: h
 		};
-		function M(e) {
-			return w(e, r, j);
+		function B(e) {
+			return w(e, o, z);
 		}
 		return (r, o) => (a(), c("div", {
-			"data-testid": "saved-blocks-preview-canvas",
-			class: "tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg",
+			"data-testid": "block-preview-canvas",
+			class: "tpl:pointer-events-none tpl:mx-auto tpl:select-none tpl:rounded-lg",
 			style: n({
+				width: `${L.value}px`,
+				transition: u(N),
 				backgroundColor: "var(--tpl-canvas-bg)",
 				boxShadow: "var(--tpl-shadow-sm)",
-				...s.value
+				...R.value
 			})
-		}, [(a(!0), c(d, null, t(e.blocks, (e) => (a(), c("div", {
-			key: e.id,
-			style: n(u(g)(e))
-		}, [(a(), l(i(M(e)), {
-			block: e,
-			viewport: "desktop"
-		}, null, 8, ["block"]))], 4))), 128))], 4));
+		}, [(a(!0), c(d, null, t(F.value, (t) => (a(), c("div", {
+			key: t.id,
+			style: n(u(g)(t))
+		}, [(a(), l(i(B(t)), {
+			block: t,
+			viewport: e.viewport
+		}, null, 8, ["block", "viewport"]))], 4))), 128))], 4));
 	}
-}), F = /* @__PURE__ */ e({ default: () => I }), I = P;
+}), R = /* @__PURE__ */ e({ default: () => z }), z = L;
 //#endregion
-export { F as n, I as t };
+export { R as n, z as t };