@templatical/editor 0.26.3 → 0.27.1

package/README.md

@@ -85,7 +85,9 @@ See the [Shadow DOM guide](https://docs.templatical.com/guide/shadow-dom) for tr
 
 ## Cloud features
 
-For AI rewrite, real-time collaboration, comments, snapshots, and saved modules, use `initCloud()` instead. See the [Cloud guide](https://docs.templatical.com/cloud/getting-started).
+For AI features and real-time collaboration, use `initCloud()` instead. See the [Cloud guide](https://docs.templatical.com/cloud/getting-started).
+
+Comments, version history, saved blocks, test email and rendering are **not** cloud-only — configure each against your own backend with `init()`. See [Bring your own backend](https://docs.templatical.com/backend/).
 
 ## Documentation
 

package/dist/{AiChatSidebar-CMBz6Wix.js → AiChatSidebar-iVJDzqjr.js}

@@ -1,25 +1,25 @@
-import { A as e, Et as t, I as n, O as r, Ot as i, R as ee, Y as a, _ as o, c as s, d as c, h as l, l as u, m as d, nt as f, r as p, u as m, w as te, x as ne, z as re } from "./vue.runtime.esm-bundler-D1diBMsm.js";
-import { a as h, t as g } from "./runtime-dom.esm-bundler-CepEmvwF.js";
-import { m as ie, p as ae } from "./dist-BpKxrUi2.js";
-import { E as oe, G as _, g as se, i as ce, l as le } from "./keys-fwF3qZax.js";
-import { t as v } from "./createLucideIcon-C8WzBYCv.js";
-import { t as ue } from "./circle-alert-cilwzafX.js";
-import { t as de } from "./loader-circle-bO7o7_HD.js";
-import { t as fe } from "./send-CWsWN8PQ.js";
-import { t as y } from "./sparkles-DumaWRW-.js";
-import { t as pe } from "./trash-2-CklAFCmO.js";
-import { t as me } from "./x-Mby7KlhS.js";
-import { t as b } from "./LoadingTrack-BexpNuTV.js";
+import { B as e, Dt as t, L as n, S as r, T as ee, X as i, c as a, d as o, g as s, h as c, j as l, k as u, kt as d, l as f, r as p, rt as m, u as h, v as g, z as te } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { a as ne, t as re } from "./runtime-dom.esm-bundler-BgKXIPLV.js";
+import { m as ie, p as ae } from "./dist-CqcGTIiX.js";
+import { T as oe, W as _, h as se, i as v, l as ce } from "./keys-BxixS0TN.js";
+import { t as y } from "./createLucideIcon-L-wQXW_R.js";
+import { t as le } from "./circle-alert-CuuK6thq.js";
+import { t as ue } from "./loader-circle-DqTxB7Kr.js";
+import { t as de } from "./send-B-wasJJC.js";
+import { t as b } from "./sparkles-DYEMATWC.js";
+import { t as fe } from "./trash-2-C0shEPry.js";
+import { t as pe } from "./x-BjTlFqRv.js";
+import { t as me } from "./LoadingTrack-C2T8ixEL.js";
 import { t as x } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { t as S } from "./useAliveFlag-cvyBxHp7.js";
-import { o as C } from "./cloud-qINCmQbn.js";
-var w = v("redo-2", [["path", {
+import { t as S } from "./useAliveFlag-BGIAZii_.js";
+import { f as C } from "./cloud-BAefVBb_.js";
+var w = y("redo-2", [["path", {
 	d: "m15 14 5-5-5-5",
 	key: "12vg1m"
 }], ["path", {
 	d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13",
 	key: "6uklza"
-}]]), T = v("undo-2", [["path", {
+}]]), T = y("undo-2", [["path", {
 	d: "M9 14 4 9l5-5",
 	key: "102s5s"
 }], ["path", {
@@ -72,20 +72,20 @@ var w = v("redo-2", [["path", {
 		"background-color": "color-mix(\n              in srgb,\n              var(--tpl-bg) 50%,\n              transparent\n            )",
 		"backdrop-filter": "blur(2px)"
 	}
-}, _e = { class: "tpl:flex tpl:flex-col tpl:gap-1.5" }, ve = ["onClick"], ye = { class: "tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]" }, be = { class: "tpl-ai-input-wrapper tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, xe = ["placeholder", "disabled"], Se = ["disabled"], Ce = { class: "tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, B = /*#__PURE__*/ x(/* @__PURE__ */ o({
+}, _e = { class: "tpl:flex tpl:flex-col tpl:gap-1.5" }, ve = ["onClick"], ye = { class: "tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]" }, be = { class: "tpl-ai-input-wrapper tpl-focus-ring-host tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, xe = ["placeholder", "disabled"], Se = ["disabled"], Ce = { class: "tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, B = /*#__PURE__*/ x(/* @__PURE__ */ g({
 	__name: "AiChatSidebar",
 	props: {
 		visible: { type: Boolean },
 		onApply: { type: Function }
 	},
 	emits: ["close"],
-	setup(o, { emit: v }) {
-		let x = o, B = v, V = _(le, "AiChatSidebar"), H = _(se, "AiChatSidebar"), we = _(ce, "AiChatSidebar"), U = ne(oe, []), W = S(), G = C({
+	setup(g, { emit: y }) {
+		let x = g, B = y, V = _(ce, "AiChatSidebar"), H = _(se, "AiChatSidebar"), we = _(v, "AiChatSidebar"), U = r(oe, []), W = S(), G = C({
 			authManager: we,
 			getTemplateId: () => H.state.template?.id ?? null,
 			onApply: x.onApply,
 			onError: void 0
-		}), K = a(""), q = a(null), J = a(!1), Y = a(0), { pause: X, resume: Te } = ae(() => {
+		}), K = i(""), q = i(null), J = i(!1), Y = i(0), { pause: X, resume: Te } = ae(() => {
 			let e = G.suggestions.value?.length ?? 0;
 			Y.value < e ? Y.value++ : X();
 		}, 150, { immediate: !1 }), { start: Ee } = ie(() => Te(), 100, { immediate: !1 });
@@ -97,7 +97,7 @@ var w = v("redo-2", [["path", {
 			Y.value = 0, Ee();
 		});
 		function Z() {
-			te(() => {
+			ee(() => {
 				q.value && (q.value.scrollTop = q.value.scrollHeight);
 			});
 		}
@@ -120,7 +120,7 @@ var w = v("redo-2", [["path", {
 		function Oe(e) {
 			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Q());
 		}
-		return (n, a) => (r(), u(g, {
+		return (n, r) => (u(), f(re, {
 			"enter-active-class": "tpl-ai-slide-enter-active",
 			"enter-from-class": "tpl:translate-x-full",
 			"enter-to-class": "tpl:translate-x-0",
@@ -128,65 +128,65 @@ var w = v("redo-2", [["path", {
 			"leave-from-class": "tpl:translate-x-0",
 			"leave-to-class": "tpl:translate-x-full"
 		}, {
-			default: ee(() => [o.visible ? (r(), c("div", E, [
-				s("div", D, [s("div", O, [l(f(y), {
+			default: te(() => [g.visible ? (u(), o("div", E, [
+				a("div", D, [a("div", O, [s(m(b), {
 					size: 13,
 					"stroke-width": 2
-				}), s("span", null, i(f(V).aiChat.title), 1)]), s("div", k, [(f(G).messages.value?.length ?? 0) > 0 ? (r(), c("button", {
+				}), a("span", null, d(m(V).aiChat.title), 1)]), a("div", k, [(m(G).messages.value?.length ?? 0) > 0 ? (u(), o("button", {
 					key: 0,
-					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
-					title: f(V).aiChat.clear,
-					onClick: a[0] ||= (e) => f(G).clearChat()
-				}, [l(f(pe), {
+					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
+					title: m(V).aiChat.clear,
+					onClick: r[0] ||= (e) => m(G).clearChat()
+				}, [s(m(fe), {
 					size: 14,
 					"stroke-width": 2
-				})], 8, A)) : m("", !0), s("button", {
-					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
-					onClick: a[1] ||= (e) => B("close")
-				}, [l(f(me), {
+				})], 8, A)) : h("", !0), a("button", {
+					class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
+					onClick: r[1] ||= (e) => B("close")
+				}, [s(m(pe), {
 					size: 14,
 					"stroke-width": 2
 				})])])]),
-				s("div", j, [
-					s("div", {
+				a("div", j, [
+					a("div", {
 						ref_key: "messagesContainer",
 						ref: q,
 						class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4"
-					}, [f(G).isLoadingHistory.value ? (r(), c("div", M, [l(f(de), {
+					}, [m(G).isLoadingHistory.value ? (u(), o("div", M, [s(m(ue), {
 						class: "tpl-spinner tpl:text-[var(--tpl-text-muted)]",
 						size: 24,
 						"stroke-width": 2
-					}), s("p", N, i(f(V).aiChat.loadingHistory), 1)])) : (f(G).messages.value?.length ?? 0) === 0 ? (r(), c("div", P, [l(f(y), {
+					}), a("p", N, d(m(V).aiChat.loadingHistory), 1)])) : (m(G).messages.value?.length ?? 0) === 0 ? (u(), o("div", P, [s(m(b), {
 						size: 32,
 						"stroke-width": 1.5,
 						class: "tpl:text-[var(--tpl-text-dim)]"
-					}), s("p", F, i(f(V).aiChat.placeholder), 1)])) : (r(), c("div", I, [(r(!0), c(p, null, e(f(G).messages.value, (e, t) => (r(), c("div", {
+					}), a("p", F, d(m(V).aiChat.placeholder), 1)])) : (u(), o("div", I, [(u(!0), o(p, null, l(m(G).messages.value, (e, t) => (u(), o("div", {
 						key: e.id,
 						class: "tpl:flex tpl:flex-col tpl:gap-2"
-					}, [e.role === "user" ? (r(), c("div", L, i(e.content), 1)) : (r(), c("div", R, [!$(e.content) && f(G).isGenerating.value && t === (f(G).messages.value?.length ?? 0) - 1 ? (r(), u(b, { key: 0 })) : (r(), c("div", z, i($(e.content) || f(V).aiChat.applied), 1)), e.id === f(G).lastApplyMessageId.value && !f(G).isGenerating.value ? (r(), c("button", {
+					}, [e.role === "user" ? (u(), o("div", L, d(e.content), 1)) : (u(), o("div", R, [!$(e.content) && m(G).isGenerating.value && t === (m(G).messages.value?.length ?? 0) - 1 ? (u(), f(me, { key: 0 })) : (u(), o("div", z, d($(e.content) || m(V).aiChat.applied), 1)), e.id === m(G).lastApplyMessageId.value && !m(G).isGenerating.value ? (u(), o("button", {
 						key: 2,
-						class: "tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+						class: "tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all",
 						style: {
 							"border-color": "var(--tpl-border)",
 							color: "var(--tpl-text-muted)",
 							"background-color": "transparent"
 						},
-						onClick: a[2] ||= (e) => f(G).toggleLastRevert()
-					}, [f(G).isLastChangeReverted.value ? (r(), c(p, { key: 0 }, [l(f(w), {
+						onClick: r[2] ||= (e) => m(G).toggleLastRevert()
+					}, [m(G).isLastChangeReverted.value ? (u(), o(p, { key: 0 }, [s(m(w), {
 						size: 12,
 						"stroke-width": 2
-					}), d(" " + i(f(V).aiChat.reapply), 1)], 64)) : (r(), c(p, { key: 1 }, [l(f(T), {
+					}), c(" " + d(m(V).aiChat.reapply), 1)], 64)) : (u(), o(p, { key: 1 }, [s(m(T), {
 						size: 12,
 						"stroke-width": 2
-					}), d(" " + i(f(V).aiChat.revert), 1)], 64))])) : m("", !0)]))]))), 128))]))], 512),
-					f(G).error.value ? (r(), c("div", he, [l(f(ue), {
+					}), c(" " + d(m(V).aiChat.revert), 1)], 64))])) : h("", !0)]))]))), 128))]))], 512),
+					m(G).error.value ? (u(), o("div", he, [s(m(le), {
 						size: 14,
 						"stroke-width": 2,
 						class: "tpl:mt-0.5 tpl:shrink-0"
-					}), s("span", null, i(f(G).error.value === "ai_apply_failed" ? f(V).aiChat.applyFailed : f(V).aiChat.error), 1)])) : m("", !0),
-					(f(G).suggestions.value?.length ?? 0) > 0 ? (r(), c("div", ge, [s("div", _e, [(r(!0), c(p, null, e(f(G).suggestions.value ?? [], (e, n) => (r(), c("button", {
+					}), a("span", null, d(m(G).error.value === "ai_apply_failed" ? m(V).aiChat.applyFailed : m(V).aiChat.error), 1)])) : h("", !0),
+					(m(G).suggestions.value?.length ?? 0) > 0 ? (u(), o("div", ge, [a("div", _e, [(u(!0), o(p, null, l(m(G).suggestions.value ?? [], (e, n) => (u(), o("button", {
 						key: n,
-						class: t(["tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out", (f(G).suggestions.value?.length ?? 0) - 1 - n < Y.value ? "tpl:translate-y-0 tpl:opacity-100" : "tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0"]),
+						class: t(["tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out", (m(G).suggestions.value?.length ?? 0) - 1 - n < Y.value ? "tpl:translate-y-0 tpl:opacity-100" : "tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0"]),
 						style: {
 							"border-color": "var(--tpl-border)",
 							color: "var(--tpl-primary)",
@@ -194,27 +194,27 @@ var w = v("redo-2", [["path", {
 							"box-shadow": "var(--tpl-shadow)"
 						},
 						onClick: (t) => De(e)
-					}, i(e), 11, ve))), 128))])])) : m("", !0)
+					}, d(e), 11, ve))), 128))])])) : h("", !0)
 				]),
-				s("div", ye, [s("div", be, [re(s("textarea", {
-					"onUpdate:modelValue": a[3] ||= (e) => K.value = e,
+				a("div", ye, [a("div", be, [e(a("textarea", {
+					"onUpdate:modelValue": r[3] ||= (e) => K.value = e,
 					class: "tpl:max-h-32 tpl:min-h-[64px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-sm tpl:outline-none tpl:text-[var(--tpl-text)]",
-					placeholder: f(V).aiChat.inputPlaceholder,
-					disabled: f(G).isGenerating.value,
+					placeholder: m(V).aiChat.inputPlaceholder,
+					disabled: m(G).isGenerating.value,
 					rows: "3",
 					onKeydown: Oe
-				}, null, 40, xe), [[h, K.value]]), s("button", {
-					class: "tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
-					disabled: !K.value.trim() || f(G).isGenerating.value,
+				}, null, 40, xe), [[ne, K.value]]), a("button", {
+					class: "tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
+					disabled: !K.value.trim() || m(G).isGenerating.value,
 					onClick: Q
-				}, [l(f(fe), {
+				}, [s(m(de), {
 					size: 16,
 					"stroke-width": 2
-				})], 8, Se)]), s("p", Ce, i(f(V).aiMenu.disclaimer), 1)])
-			])) : m("", !0)]),
+				})], 8, Se)]), a("p", Ce, d(m(V).aiMenu.disclaimer), 1)])
+			])) : h("", !0)]),
 			_: 1
 		}));
 	}
-}), [["__scopeId", "data-v-a55e4bff"]]);
+}), [["__scopeId", "data-v-82649117"]]);
 //#endregion
 export { B as default };

package/dist/AiFeatureMenu-DrLGc2H2.js

@@ -0,0 +1,57 @@
+import { Ot as e, P as t, c as n, d as r, j as i, k as a, kt as o, l as s, r as c, s as l, v as u } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import "./useEditorCore-CFLzobo_.js";
+import { W as d, t as f } from "./keys-BxixS0TN.js";
+import { t as p } from "./image-up-DouZRGVt.js";
+import { t as m } from "./shield-check-DUIyRrTo.js";
+import { t as h } from "./sparkles-DYEMATWC.js";
+import { t as g } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { n as _ } from "./useCloudI18n-CAZTZ9_a.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",
+	props: { activeFeature: {} },
+	emits: ["select"],
+	setup(u, { emit: g }) {
+		let C = g, { t: w } = _(), T = d(f, "AiFeatureMenu"), E = {
+			"ai-chat": "chat",
+			"design-reference": "designToTemplate",
+			scoring: "scoring"
+		}, D = [
+			{
+				key: "ai-chat",
+				icon: h
+			},
+			{
+				key: "design-reference",
+				icon: p
+			},
+			{
+				key: "scoring",
+				icon: m
+			}
+		], O = l(() => D.filter((e) => T.isFeatureEnabled(E[e.key])));
+		function k(e) {
+			return e === "ai-chat" ? w.aiMenu.aiAssistant : e === "design-reference" ? w.aiMenu.designToTemplate : w.aiMenu.templateScore;
+		}
+		function A(e) {
+			return e === "ai-chat" ? w.aiMenu.aiAssistantDesc : e === "design-reference" ? w.aiMenu.designToTemplateDesc : w.aiMenu.templateScoreDesc;
+		}
+		return (l, d) => (a(), r("div", v, [(a(!0), r(c, null, i(O.value, (i) => (a(), r("button", {
+			key: i.key,
+			class: "tpl-ai-feature-menu-item tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-start tpl:gap-3 tpl:border-none tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors",
+			style: e({ backgroundColor: u.activeFeature === i.key ? "var(--tpl-primary-light)" : "transparent" }),
+			onClick: (e) => C("select", i.key)
+		}, [n("div", {
+			class: "tpl:mt-0.5 tpl:flex tpl:size-7 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)]",
+			style: e({
+				backgroundColor: u.activeFeature === i.key ? "var(--tpl-primary)" : "var(--tpl-bg-active)",
+				color: u.activeFeature === i.key ? "var(--tpl-bg)" : "var(--tpl-text-muted)"
+			})
+		}, [(a(), s(t(i.icon), {
+			size: 15,
+			"stroke-width": 2
+		}))], 4), n("div", b, [n("span", x, o(k(i.key)), 1), n("span", S, o(A(i.key)), 1)])], 12, y))), 128))]));
+	}
+}), [["__scopeId", "data-v-bf59b787"]]);
+//#endregion
+export { C as default };

package/dist/{BlockIssueBadge-Buk3_6QF.js → BlockIssueBadge-BHysq7XQ.js}

@@ -1,27 +1,27 @@
-import { Et as e, O as t, _ as n, d as r, l as i, nt as a, s as o, u as s, x as c } from "./vue.runtime.esm-bundler-D1diBMsm.js";
-import { B as l } from "./keys-fwF3qZax.js";
-import { t as u } from "./useI18n-DoVKdCTH.js";
-import { t as d } from "./circle-alert-cilwzafX.js";
-import { t as f } from "./triangle-alert-BBi4n93g.js";
+import { Dt as e, S as t, d as n, k as r, l as i, rt as a, s as o, u as s, v as c } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { z as l } from "./keys-BxixS0TN.js";
+import { t as u } from "./useI18n-BfXff_Sy.js";
+import { t as d } from "./circle-alert-CuuK6thq.js";
+import { t as f } from "./triangle-alert-Fw0ce8oQ.js";
 //#region src/components/canvas/BlockIssueBadge.vue?vue&type=script&setup=true&lang.ts
-var p = ["title", "aria-label"], m = /* @__PURE__ */ n({
+var p = ["title", "aria-label"], m = /* @__PURE__ */ c({
 	__name: "BlockIssueBadge",
 	props: { blockId: {} },
-	setup(n) {
-		let m = n, { t: h } = u(), g = c(l, null), _ = o(() => (g?.issues.value ?? []).filter((e) => e.blockId === m.blockId)), v = o(() => _.value.some((e) => e.severity === "error") ? "error" : _.value.some((e) => e.severity === "warning") ? "warning" : null), y = o(() => v.value === "error" ? h.issues.badgeError : h.issues.badgeWarning);
-		return (n, o) => v.value ? (t(), r("span", {
+	setup(c) {
+		let m = c, { t: h } = u(), g = t(l, null), _ = o(() => (g?.issues.value ?? []).filter((e) => e.blockId === m.blockId)), v = o(() => _.value.some((e) => e.severity === "error") ? "error" : _.value.some((e) => e.severity === "warning") ? "warning" : null), y = o(() => v.value === "error" ? h.issues.badgeError : h.issues.badgeWarning);
+		return (t, o) => v.value ? (r(), n("span", {
 			key: 0,
 			class: e(["tpl:absolute tpl:top-1 tpl:right-1 tpl:z-10 tpl:flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)] tpl:ring-1 tpl:ring-[var(--tpl-border)]", v.value === "error" ? "tpl:text-[var(--tpl-danger)]" : "tpl:text-[var(--tpl-warning)]"]),
 			title: y.value,
 			"aria-label": y.value,
 			role: "img"
-		}, [v.value === "error" ? (t(), i(a(d), {
+		}, [v.value === "error" ? (r(), i(a(d), {
 			key: 0,
 			size: 14,
 			"stroke-width": 2.25,
 			fill: "currentColor",
 			stroke: "var(--tpl-bg)"
-		})) : (t(), i(a(f), {
+		})) : (r(), i(a(f), {
 			key: 1,
 			size: 14,
 			"stroke-width": 2.25,

package/dist/BlockPreviewCanvas-2WASf5A4.js

@@ -0,0 +1,121 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { A as t, N as n, Ot as r, P as i, S as a, c as o, d as s, j as c, k as l, l as u, r as d, rt as f, s as p, v as m } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { R as h, a as g, b as _, d as v, f as y, g as b, h as x, i as S, l as C, m as w, n as T, p as E, r as D, v as O, y as k } from "./useEditorCore-CFLzobo_.js";
+import { O as A, U as j, d as M, h as N, s as P } from "./keys-BxixS0TN.js";
+import { n as F, t as I } from "./emailFrameWidth-BmFCN2dp.js";
+//#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
+var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__PURE__ */ m({
+	name: "PreviewSectionBlock",
+	__name: "PreviewSectionBlock",
+	props: {
+		block: {},
+		viewport: {}
+	},
+	setup(e) {
+		let t = {
+			title: C,
+			paragraph: w,
+			image: b,
+			video: T,
+			button: h,
+			divider: k,
+			social: g,
+			menu: x,
+			table: D,
+			spacer: S,
+			html: O,
+			custom: _
+		}, m = e, y = a(P, null), A = 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 = A.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, y, t);
+		}
+		return (e, t) => {
+			let a = n("PreviewSectionBlock", !0);
+			return l(), s("div", L, [o("div", R, [(l(!0), s(d, null, c(j.value, (e, t) => (l(), s("div", {
+				key: t,
+				style: r({ width: A.value[t] })
+			}, [(l(!0), s(d, null, c(M(t), (e) => (l(), s("div", {
+				key: e.id,
+				style: r(f(v)(e))
+			}, [e.type === "section" ? (l(), u(a, {
+				key: 0,
+				block: e,
+				viewport: "desktop"
+			}, null, 8, ["block"])) : (l(), u(i(N(e)), {
+				key: 1,
+				block: e,
+				viewport: "desktop"
+			}, null, 8, ["block"]))], 4))), 128))], 4))), 128))])]);
+		};
+	}
+}), B = /*@__PURE__*/ m({
+	__name: "BlockPreviewCanvas",
+	props: {
+		blocks: {},
+		viewport: { default: "desktop" },
+		applyConditionFilter: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let n = e, o = a(P), m = a(N, null), L = a(M, null), R = a(A, null);
+		t(j, p(() => R?.value ?? !1));
+		let B = p(() => n.applyConditionFilter ? n.blocks.filter((e) => !L?.isHidden(e.id)) : n.blocks), V = p(() => F(m?.content.value.settings, n.viewport)), H = p(() => m ? y(m.content.value.settings) : {}), U = {
+			section: z,
+			title: C,
+			paragraph: w,
+			image: b,
+			video: T,
+			button: h,
+			divider: k,
+			social: g,
+			menu: x,
+			table: D,
+			spacer: S,
+			html: O,
+			custom: _
+		};
+		function W(e) {
+			return E(e, o, U);
+		}
+		return (t, n) => (l(), s("div", {
+			"data-testid": "block-preview-canvas",
+			class: "tpl:pointer-events-none tpl:mx-auto tpl:select-none tpl:rounded-lg",
+			style: r({
+				width: `${V.value}px`,
+				transition: f(I),
+				backgroundColor: "var(--tpl-canvas-bg)",
+				boxShadow: "var(--tpl-shadow-sm)",
+				...H.value
+			})
+		}, [(l(!0), s(d, null, c(B.value, (t) => (l(), s("div", {
+			key: t.id,
+			style: r(f(v)(t))
+		}, [(l(), u(i(W(t)), {
+			block: t,
+			viewport: e.viewport
+		}, null, 8, ["block", "viewport"]))], 4))), 128))], 4));
+	}
+}), V = /* @__PURE__ */ e({ default: () => H }), H = B;
+//#endregion
+export { V as n, H as t };

package/dist/CloudHeaderExtras-DWApyc4P.js

@@ -0,0 +1,59 @@
+import { Dt as e, _ as t, c as n, d as r, g as i, h as a, k as o, kt as s, l as c, r as l, rt as u, u as d, v as f, z as p } from "./vue.runtime.esm-bundler-DzEsDRtY.js";
+import { c as m, t as h } from "./runtime-dom.esm-bundler-BgKXIPLV.js";
+import { t as g } from "./sparkles-DYEMATWC.js";
+import { n as _ } from "./useCloudI18n-CAZTZ9_a.js";
+//#region src/cloud/components/CloudHeaderExtras.vue?vue&type=script&setup=true&lang.ts
+var v = {
+	key: 0,
+	"data-testid": "cloud-template-usage",
+	class: "tpl:text-xs tpl:opacity-60 tpl:text-[var(--tpl-text-muted)]"
+}, y = ["aria-expanded"], b = {
+	key: 0,
+	class: "tpl:absolute tpl:right-0 tpl:top-full tpl:z-50 tpl:mt-1 tpl:origin-top-right"
+}, x = /* @__PURE__ */ f({
+	__name: "CloudHeaderExtras",
+	props: {
+		part: {},
+		cloud: {}
+	},
+	setup(f) {
+		let x = t(() => import("./CollaboratorBar-C6MC0UCk.js")), S = t(() => import("./AiFeatureMenu-DrLGc2H2.js")), { t: C, format: w } = _();
+		return (t, _) => f.part === "left" && f.cloud.featureFlags.templateLimit.value !== null ? (o(), r("span", v, s(u(w)(u(C).header.templatesUsed, {
+			used: f.cloud.featureFlags.templateCount.value,
+			max: f.cloud.featureFlags.templateLimit.value
+		})), 1)) : f.part === "center" && f.cloud.collaboration && f.cloud.isCollaborationEnabled.value ? (o(), c(u(x), {
+			key: 1,
+			collaborators: f.cloud.collaboration.collaborators.value,
+			"is-connected": f.cloud.websocket.isConnected.value
+		}, null, 8, ["collaborators", "is-connected"])) : f.part === "right" ? (o(), r(l, { key: 2 }, [f.cloud.featureFlags.canUseAiGeneration.value && f.cloud.featureFlags.hasTemplateSaved.value ? (o(), r("div", {
+			key: 0,
+			ref: (e) => f.cloud.panelState.aiMenuRef.value = e,
+			class: "tpl:relative"
+		}, [n("button", {
+			type: "button",
+			"data-testid": "ai-menu-trigger",
+			"aria-expanded": f.cloud.panelState.aiMenuOpen.value,
+			class: e(["tpl-ai-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-4 tpl:py-2 tpl:text-sm tpl:font-semibold tpl:whitespace-nowrap tpl:transition-all tpl:duration-200", f.cloud.panelState.aiButtonActive.value ? "tpl-ai-btn--active" : "tpl-ai-btn--idle"]),
+			onClick: _[0] ||= m((...e) => f.cloud.panelState.toggleAiMenu && f.cloud.panelState.toggleAiMenu(...e), ["stop"])
+		}, [i(u(g), {
+			size: 16,
+			"stroke-width": 2,
+			class: "tpl-ai-btn-icon"
+		}), a(" " + s(u(C).aiChat.button), 1)], 10, y), i(h, {
+			"enter-active-class": "tpl:transition-all tpl:ease-out",
+			"enter-from-class": "tpl:scale-95 tpl:opacity-0",
+			"enter-to-class": "tpl:scale-100 tpl:opacity-100",
+			"leave-active-class": "tpl:transition-all tpl:duration-100 tpl:ease-in",
+			"leave-from-class": "tpl:scale-100 tpl:opacity-100",
+			"leave-to-class": "tpl:scale-95 tpl:opacity-0"
+		}, {
+			default: p(() => [f.cloud.panelState.aiMenuOpen.value ? (o(), r("div", b, [i(u(S), {
+				"active-feature": f.cloud.panelState.activeAiFeature.value,
+				onSelect: f.cloud.panelState.handleAiFeatureSelect
+			}, null, 8, ["active-feature", "onSelect"])])) : d("", !0)]),
+			_: 1
+		})], 512)) : d("", !0)], 64)) : d("", !0);
+	}
+});
+//#endregion
+export { x as default };