@templatical/editor 0.39.4 → 0.41.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, French & Dutch built in
+- 🌍 **Multilingual** — English, German, Portuguese, Spanish, Catalan, French, Dutch & Japanese built in
 - 🔒 **TypeScript strict** — full type safety end to end
 
 ## Install

package/dist/{AiChatSidebar-5qqrS6uy.js → AiChatSidebar-a8TPBAl2.js}

@@ -1,7 +1,7 @@
 import { A as e, B as t, E as n, M as r, R as i, S as ee, V as te, Z as a, at as o, c as s, d as c, g as l, h as u, jt as d, kt as ne, l as f, r as p, u as m, v as h } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { a as re, t as ie } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
 import { _ as ae, g as oe } from "./dist-8VFzbeu9.js";
-import { D as se, P as g, Z as _, g as ce, i as le, u as ue } from "./keys-BdoSgsz9.js";
+import { $ as g, F as _, O as se, g as ce, i as le, u as ue } from "./keys-CDqfZIRt.js";
 import { t as v } from "./createLucideIcon-BxY5yz5u.js";
 import { t as de } from "./circle-alert-CYgTHKWr.js";
 import { t as fe } from "./loader-circle-z5eeqasv.js";
@@ -12,7 +12,7 @@ import { t as he } from "./x-3BHV3Q6K.js";
 import { t as b } from "./LoadingTrack-C1Epulqq.js";
 import { t as x } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as S } from "./useAliveFlag-BkKyhkwZ.js";
-import { p as C } from "./cloud-C9xWZXhg.js";
+import { p as C } from "./cloud-DsqqUfzh.js";
 var w = v({
 	name: "redo-2",
 	size: 24,
@@ -85,7 +85,7 @@ var w = v({
 	},
 	emits: ["close"],
 	setup(h, { emit: v }) {
-		let x = h, B = v, V = _(ue, "AiChatSidebar"), H = _(ce, "AiChatSidebar"), Ee = _(le, "AiChatSidebar"), U = ee(se, g), W = S(), G = C({
+		let x = h, B = v, V = g(ue, "AiChatSidebar"), H = g(ce, "AiChatSidebar"), Ee = g(le, "AiChatSidebar"), U = ee(se, _), W = S(), G = C({
 			authManager: Ee,
 			getTemplateId: () => H.state.template?.id ?? null,
 			onApply: x.onApply,

package/dist/{AiFeatureMenu-BBO_Ojlp.js → AiFeatureMenu-CroDMqRG.js}

@@ -1,11 +1,11 @@
 import { A as e, At as t, F as n, M as r, c as i, d as a, jt as o, l as s, r as c, s as l, v as u } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import "./useEditorCore-BUVbQgwb.js";
-import { Z as d, t as f } from "./keys-BdoSgsz9.js";
+import "./useEditorCore-dcdHB_7H.js";
+import { $ as d, t as f } from "./keys-CDqfZIRt.js";
 import { t as p } from "./image-up-Qi2BXD7T.js";
 import { t as m } from "./shield-check-COgBYFDF.js";
 import { t as h } from "./sparkles-Ds0RF8Iu.js";
 import { t as g } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { n as _ } from "./useCloudI18n-D1iedlP3.js";
+import { n as _ } from "./useCloudI18n-DpEsiLeR.js";
 //#region src/cloud/components/AiFeatureMenu.vue?vue&type=script&setup=true&lang.ts
 var v = { class: "tpl-ai-feature-menu tpl:w-[280px] tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:py-1 tpl:bg-[var(--tpl-bg)] tpl:border tpl:border-[var(--tpl-border)] tpl:shadow-[var(--tpl-shadow-lg)]" }, y = ["onClick"], b = { class: "tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5" }, x = { class: "tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]" }, S = { class: "tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]" }, C = /*#__PURE__*/ g(/* @__PURE__ */ u({
 	__name: "AiFeatureMenu",

package/dist/{BlockIssueBadge-D5oGxOQP.js → BlockIssueBadge-D8KsGWY6.js}

@@ -1,6 +1,6 @@
 import { A as e, S as t, at as n, d as r, kt as i, l as a, s as o, u as s, v as c } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { W as l } from "./keys-BdoSgsz9.js";
-import { t as u } from "./useI18n-Ds_-druD.js";
+import { K as l } from "./keys-CDqfZIRt.js";
+import { t as u } from "./useI18n-B_CdcBwG.js";
 import { t as d } from "./circle-alert-CYgTHKWr.js";
 import { t as f } from "./triangle-alert-DGLAyXnh.js";
 //#region src/components/canvas/BlockIssueBadge.vue?vue&type=script&setup=true&lang.ts

package/dist/BlockPreviewCanvas-Z9SZIgfA.js

@@ -0,0 +1,133 @@
+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 { q as h } from "./dist-DbUZvK04.js";
+import { A as g, _, a as v, c as y, d as b, g as x, h as S, i as C, m as w, n as T, p as E, r as D, u as O, v as k, y as A } from "./useEditorCore-dcdHB_7H.js";
+import { M as j, Q as M, f as N, g as P, s as F } from "./keys-CDqfZIRt.js";
+import { n as I, r as L, t as R } from "./WrapperBlock-BDjOn3fY.js";
+//#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
+var z = { class: "tpl:w-full" }, B = { class: "tpl:flex tpl:gap-0" }, V = /* @__PURE__ */ m({
+	name: "PreviewSectionBlock",
+	__name: "PreviewSectionBlock",
+	props: {
+		block: {},
+		viewport: {}
+	},
+	setup(e) {
+		let u = {
+			title: y,
+			paragraph: w,
+			image: x,
+			video: T,
+			button: g,
+			divider: k,
+			social: v,
+			menu: S,
+			table: D,
+			spacer: C,
+			html: _,
+			custom: A
+		}, m = e, h = o(F, null), b = 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 = b.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 E(e, h, u);
+		}
+		return (e, o) => {
+			let u = a("PreviewSectionBlock", !0);
+			return t(), l("div", z, [c("div", B, [(t(!0), l(f, null, i(j.value, (e, a) => (t(), l("div", {
+				key: a,
+				style: n({ width: b.value[a] })
+			}, [(t(!0), l(f, null, i(M(a), (e) => (t(), l("div", {
+				key: e.id,
+				style: n(s(O)(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))])]);
+		};
+	}
+}), H = ["lang", "dir"], U = /*@__PURE__*/ m({
+	__name: "BlockPreviewCanvas",
+	props: {
+		blocks: {},
+		viewport: { default: "desktop" },
+		applyConditionFilter: {
+			type: Boolean,
+			default: !0
+		},
+		settings: { default: void 0 }
+	},
+	setup(e) {
+		let a = e, m = o(F), z = o(P, null), B = o(N, null), U = o(j, null);
+		u(M, p(() => U?.value ?? !1));
+		let W = p(() => a.applyConditionFilter ? a.blocks.filter((e) => !B?.isHidden(e.id)) : a.blocks), G = p(() => a.settings ?? z?.content.value.settings), K = p(() => L(G.value, a.viewport)), q = p(() => G.value ? b(G.value) : {}), J = p(() => G.value?.locale?.trim() || void 0), Y = p(() => h(G.value ?? { locale: "en" })), X = p(() => G.value?.backgroundColor || "var(--tpl-canvas-bg)"), Z = p(() => K.value + 192), Q = {
+			section: V,
+			title: y,
+			paragraph: w,
+			image: x,
+			video: T,
+			button: g,
+			divider: k,
+			social: v,
+			menu: S,
+			table: D,
+			spacer: C,
+			html: _,
+			custom: A,
+			wrapper: R
+		};
+		function $(e) {
+			return E(e, m, Q);
+		}
+		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: `${Z.value}px`,
+				minWidth: `${K.value}px`,
+				maxWidth: "100%",
+				backgroundColor: X.value,
+				boxShadow: "var(--tpl-shadow-sm)"
+			})
+		}, [c("div", {
+			"data-testid": "block-preview-canvas",
+			lang: J.value,
+			dir: Y.value,
+			style: n({
+				width: `${K.value}px`,
+				transition: s(I),
+				...q.value
+			})
+		}, [(t(!0), l(f, null, i(W.value, (i) => (t(), l("div", {
+			key: i.id,
+			style: n(s(O)(i))
+		}, [(t(), d(r($(i)), {
+			block: i,
+			viewport: e.viewport
+		}, null, 8, ["block", "viewport"]))], 4))), 128))], 12, H)], 4));
+	}
+}), W = /* @__PURE__ */ e({ default: () => G }), G = U;
+//#endregion
+export { W as n, G as t };

package/dist/{CloudHeaderExtras-Cg6uF-yQ.js → CloudHeaderExtras-CVqHeqc6.js}

@@ -1,7 +1,7 @@
 import { A as e, B as t, _ as n, at as r, c as i, d as a, g as o, h as s, jt as c, kt as l, l as u, r as d, u as f, v as p } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { c as m, t as h } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
 import { t as g } from "./sparkles-Ds0RF8Iu.js";
-import { n as _ } from "./useCloudI18n-D1iedlP3.js";
+import { n as _ } from "./useCloudI18n-DpEsiLeR.js";
 //#region src/cloud/components/CloudHeaderExtras.vue?vue&type=script&setup=true&lang.ts
 var v = {
 	key: 0,
@@ -17,7 +17,7 @@ var v = {
 		cloud: {}
 	},
 	setup(p) {
-		let x = n(() => import("./CollaboratorBar-Cmn0LccS.js")), S = n(() => import("./AiFeatureMenu-BBO_Ojlp.js")), { t: C, format: w } = _();
+		let x = n(() => import("./CollaboratorBar-AIQC9fEF.js")), S = n(() => import("./AiFeatureMenu-CroDMqRG.js")), { t: C, format: w } = _();
 		return (n, _) => p.part === "left" ? (e(), a(d, { key: 0 }, [p.cloud.featureFlags.templateLimit.value === null ? f("", !0) : (e(), a("span", v, c(r(w)(r(C).header.templatesUsed, {
 			used: p.cloud.featureFlags.templateCount.value,
 			max: p.cloud.featureFlags.templateLimit.value

package/dist/{CloudPanels-D1Gg4qrG.js → CloudPanels-CmEpQUJB.js}

@@ -1,11 +1,11 @@
 import { A as e, B as t, M as n, _ as r, at as i, c as a, d as o, g as s, jt as c, kt as l, l as u, m as d, r as f, u as p, v as m } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { t as h } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
-import { t as g } from "./useI18n-Ds_-druD.js";
+import { t as g } from "./useI18n-B_CdcBwG.js";
 import { t as _ } from "./circle-alert-CYgTHKWr.js";
 import { t as v } from "./triangle-alert-DGLAyXnh.js";
-import { n as y } from "./useCloudI18n-D1iedlP3.js";
+import { n as y } from "./useCloudI18n-DpEsiLeR.js";
 import { d as b, v as x, x as S } from "./styleConstants-C_YAPdQS.js";
-import { t as C } from "./TplModal-DVMS_nAn.js";
+import { t as C } from "./TplModal-CVO-2KrU.js";
 //#region src/cloud/components/CloudErrorOverlay.vue?vue&type=script&setup=true&lang.ts
 var w = {
 	key: 0,
@@ -137,7 +137,7 @@ var w = {
 		ready: {}
 	},
 	setup(n) {
-		let a = r(() => import("./AiChatSidebar-5qqrS6uy.js")), c = r(() => import("./DesignReferenceSidebar-C8ohNhOd.js")), l = r(() => import("./TemplateScoringPanel-B1wcfE0w.js")), u = n;
+		let a = r(() => import("./AiChatSidebar-a8TPBAl2.js")), c = r(() => import("./DesignReferenceSidebar-OoiYJAKS.js")), l = r(() => import("./TemplateScoringPanel-Cs0TGtRF.js")), u = n;
 		function d(e) {
 			u.core.history.record(), u.editor.setContent(e), u.core.conditionPreview.reset();
 		}

package/dist/{CollaboratorBar-Cmn0LccS.js → CollaboratorBar-AIQC9fEF.js}

@@ -1,7 +1,7 @@
 import { A as e, At as t, M as n, at as r, c as i, d as a, jt as o, l as s, r as c, s as l, u, v as d } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import "./useEditorCore-BUVbQgwb.js";
+import "./useEditorCore-dcdHB_7H.js";
 import { t as f } from "./createLucideIcon-BxY5yz5u.js";
-import { n as p } from "./useCloudI18n-D1iedlP3.js";
+import { n as p } from "./useCloudI18n-DpEsiLeR.js";
 import { t as m } from "./readableTextColor-f8Kykfnh.js";
 var h = f({
 	name: "wifi-off",

package/dist/{CommentsPanel-twNhYUqZ.js → CommentsPanel-9k1q-79y.js}

@@ -5,7 +5,7 @@ var o = /* @__PURE__ */ a({
 	__name: "CommentsPanel",
 	props: { feature: {} },
 	setup(a) {
-		let o = t(() => import("./CommentsSidebar-DDO0Qx8U.js"));
+		let o = t(() => import("./CommentsSidebar-Bc7nORmD.js"));
 		return (t, s) => a.feature.isOpen.value ? (e(), r(n(o), {
 			key: 0,
 			visible: a.feature.isOpen.value,

package/dist/{CommentsSidebar-DDO0Qx8U.js → CommentsSidebar-Bc7nORmD.js}

@@ -1,7 +1,7 @@
 import { A as e, At as t, B as n, E as r, M as i, R as a, V as o, Z as s, at as c, c as l, d as u, g as d, h as ee, jt as f, kt as p, l as m, r as h, s as g, u as _, v } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { a as y, t as b } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
-import { Z as te, g as ne } from "./keys-BdoSgsz9.js";
-import { t as re } from "./useI18n-Ds_-druD.js";
+import { $ as te, g as ne } from "./keys-CDqfZIRt.js";
+import { t as re } from "./useI18n-B_CdcBwG.js";
 import { t as x } from "./createLucideIcon-BxY5yz5u.js";
 import { t as ie } from "./check-eqb2JhqU.js";
 import { t as ae } from "./chevron-down-Dkr-7Ywl.js";

package/dist/{CountdownBlock-DSvbf3qU.js → CountdownBlock-C6R-hn7D.js}

@@ -1,6 +1,6 @@
 import { A as e, At as t, M as n, Z as r, at as i, c as a, d as o, jt as s, r as c, s as l, u, v as d } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { g as f } from "./dist-8VFzbeu9.js";
-import { t as p } from "./useI18n-Ds_-druD.js";
+import { t as p } from "./useI18n-B_CdcBwG.js";
 //#region src/components/blocks/CountdownBlock.vue?vue&type=script&setup=true&lang.ts
 var m = {
 	key: 0,

package/dist/{CountdownToolbar-nvHxu8Gu.js → CountdownToolbar-DkC-qSgq.js}

@@ -1,9 +1,9 @@
 import { A as e, B as t, M as n, at as r, c as i, d as a, g as o, jt as s, kt as c, l, r as u, s as d, v as f } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { t as p } from "./useI18n-Ds_-druD.js";
-import { c as m } from "./LogicTagInsertButton-D8IwH-9Z.js";
+import { t as p } from "./useI18n-B_CdcBwG.js";
+import { c as m } from "./LogicTagInsertButton-BimKobaG.js";
 import { p as h } from "./styleConstants-C_YAPdQS.js";
-import { t as g } from "./ToggleSwitch-JvQ_CmI1.js";
-import { i as _, n as v, r as y } from "./Toolbar-B2kDLFhn.js";
+import { t as g } from "./ToggleSwitch-CJfQ8u57.js";
+import { i as _, n as v, r as y } from "./Toolbar-C7SjilzH.js";
 //#region src/components/toolbar/CountdownToolbar.vue?vue&type=script&setup=true&lang.ts
 var b = ["value"], x = ["value"], S = ["value"], C = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, w = ["value"], T = { value: "" }, E = ["value"], D = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, O = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, k = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, A = [
 	"value",

package/dist/{DesignReferenceSidebar-C8ohNhOd.js → DesignReferenceSidebar-OoiYJAKS.js}

@@ -1,6 +1,6 @@
 import { A as e, At as t, B as n, D as ee, R as r, V as te, Z as i, at as a, c as o, d as s, g as c, h as l, jt as u, kt as d, l as ne, s as re, u as f, v as p } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { a as ie, t as ae } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
-import { Z as m, g as oe, i as se } from "./keys-BdoSgsz9.js";
+import { $ as m, g as oe, i as se } from "./keys-CDqfZIRt.js";
 import "./timeouts-DHPZQ0G3.js";
 import { t as h } from "./createLucideIcon-BxY5yz5u.js";
 import { t as ce } from "./circle-alert-CYgTHKWr.js";
@@ -9,9 +9,9 @@ import { t as _ } from "./upload-BBDme2cy.js";
 import { t as v } from "./x-3BHV3Q6K.js";
 import { t as le } from "./LoadingTrack-C1Epulqq.js";
 import { t as y } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { n as ue } from "./useCloudI18n-D1iedlP3.js";
+import { n as ue } from "./useCloudI18n-DpEsiLeR.js";
 import { v as b } from "./styleConstants-C_YAPdQS.js";
-import { _ as de } from "./cloud-C9xWZXhg.js";
+import { _ as de } from "./cloud-DsqqUfzh.js";
 var fe = h({
 	name: "file-image",
 	size: 24,

package/dist/{IssuesPanel-Ck0EGoV5.js → IssuesPanel-Dnns3O9z.js}

@@ -1,10 +1,10 @@
 import { A as e, F as t, M as n, S as r, at as i, c as a, d as o, g as s, h as c, jt as l, kt as u, l as d, r as f, s as p, u as m, v as h } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { W as g, g as _ } from "./keys-BdoSgsz9.js";
-import { t as v } from "./useI18n-Ds_-druD.js";
+import { K as g, g as _ } from "./keys-CDqfZIRt.js";
+import { t as v } from "./useI18n-B_CdcBwG.js";
 import { t as y } from "./createLucideIcon-BxY5yz5u.js";
 import { t as b } from "./circle-alert-CYgTHKWr.js";
 import { t as x } from "./info-VSyAs02q.js";
-import { n as S, t as C } from "./useScrollToBlock-DXQYPCnJ.js";
+import { n as S, t as C } from "./useScrollToBlock-Dj4v3rxr.js";
 import { t as w } from "./triangle-alert-DGLAyXnh.js";
 var T = y({
 	name: "arrow-right",