@templatical/editor 0.42.1 → 0.43.1

package/dist/{AiFeatureMenu-CfijAx4G.js → AiFeatureMenu-xCJeD07B.js}

@@ -1,5 +1,5 @@
 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-Dhit8Ygg.js";
+import "./useEditorCore-CAhRAya8.js";
 import { $ as d, t as f } from "./keys-CDqfZIRt.js";
 import { t as p } from "./image-up-BwdoReQt.js";
 import { t as m } from "./shield-check-BOoVWJtD.js";

package/dist/{BlockPreviewCanvas-DggfBaoJ.js → BlockPreviewCanvas-BQXfqhzu.js}

@@ -1,9 +1,9 @@
 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 { Y as h } from "./dist-iLUVPysa.js";
-import { A as g, D as _, E as v, O as y, a as b, c as x, d as S, f as C, h as w, i as T, m as E, n as D, p as O, r as k, u as A } from "./useEditorCore-Dhit8Ygg.js";
+import { A as g, D as _, E as v, O as y, a as b, c as x, d as S, f as C, h as w, i as T, m as E, n as D, p as O, r as k, u as A } from "./useEditorCore-CAhRAya8.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-CVQ4t1tY.js";
+import { n as I, r as L, t as R } from "./WrapperBlock-BumDudbj.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",

package/dist/{CloudHeaderExtras-dFbdqBr5.js → CloudHeaderExtras-TFmBJ0Ry.js}

@@ -17,7 +17,7 @@ var v = {
 		cloud: {}
 	},
 	setup(p) {
-		let x = n(() => import("./CollaboratorBar-XXk1tOC5.js")), S = n(() => import("./AiFeatureMenu-CfijAx4G.js")), { t: C, format: w } = _();
+		let x = n(() => import("./CollaboratorBar-7ry8EdUh.js")), S = n(() => import("./AiFeatureMenu-xCJeD07B.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-DmMxhzzZ.js → CloudPanels-BnSBbYnw.js}

@@ -5,7 +5,7 @@ import { t as _ } from "./circle-alert-pjvFFDrF.js";
 import { t as v } from "./triangle-alert-DJ0r2wmQ.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-BiAf7tWe.js";
+import { t as C } from "./TplModal-DHwQXySQ.js";
 //#region src/cloud/components/CloudErrorOverlay.vue?vue&type=script&setup=true&lang.ts
 var w = {
 	key: 0,

package/dist/{CollaboratorBar-XXk1tOC5.js → CollaboratorBar-7ry8EdUh.js}

@@ -1,5 +1,5 @@
 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-Dhit8Ygg.js";
+import "./useEditorCore-CAhRAya8.js";
 import { t as f } from "./createLucideIcon-C2YOVVWx.js";
 import { n as p } from "./useCloudI18n-DpEsiLeR.js";
 import { t as m } from "./readableTextColor-f8Kykfnh.js";

package/dist/{ParagraphEditor-BhhpXgoO.js → ParagraphEditor-DVGeU0Am.js}

@@ -2,7 +2,7 @@ import { A as e, At as t, F as n, K as r, M as i, S as a, Z as o, at as s, c, d
 import { c as b, s as x } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
 import { Y as S } from "./dist-iLUVPysa.js";
 import { t as C } from "./dist-BDuPwOyn.js";
-import { _ as w, b as T, v as E, x as D } from "./useEditorCore-Dhit8Ygg.js";
+import { _ as w, b as T, v as E, x as D } from "./useEditorCore-CAhRAya8.js";
 import { $ as O, A as k, E as A, J as j, Z as M, g as N, v as ee } from "./keys-CDqfZIRt.js";
 import { t as P } from "./useI18n-B_CdcBwG.js";
 import { n as F } from "./usePopoverPosition-BYmd-lhR.js";

package/dist/{RestoreVersionDialog-DE8aqmdi.js → RestoreVersionDialog-DOhgYkiA.js}

@@ -3,7 +3,7 @@ import { t as f } from "./useI18n-B_CdcBwG.js";
 import { t as p } from "./loader-circle-BVBgkRGz.js";
 import { t as m } from "./triangle-alert-DJ0r2wmQ.js";
 import { d as h, v as g, x as _ } from "./styleConstants-C_YAPdQS.js";
-import { t as v } from "./TplModal-BiAf7tWe.js";
+import { t as v } from "./TplModal-DHwQXySQ.js";
 //#region src/components/RestoreVersionDialog.vue?vue&type=script&setup=true&lang.ts
 var y = ["aria-busy"], b = { class: "tpl:flex tpl:items-center tpl:gap-2" }, x = {
 	id: "tpl-restore-version-title",

package/dist/{SaveBlockDialog-BJ-hEwLv.js → SaveBlockDialog-36MzPD2S.js}

@@ -1,16 +1,16 @@
 import { A as e, At as t, B as n, D as r, F as i, M as a, O as o, R as s, S as c, V as l, Z as u, at as d, c as f, d as p, g as m, h, jt as g, kt as _, l as v, r as y, s as b, u as x, v as S } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { a as C, c as w, s as T } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
 import { d as ee } from "./socialIcons-CzRJskEk.js";
-import { C as E, s as D } from "./useEditorCore-Dhit8Ygg.js";
+import { C as E, s as D } from "./useEditorCore-CAhRAya8.js";
 import { $ as O, U as k, g as A, p as te } from "./keys-CDqfZIRt.js";
 import { t as j } from "./useI18n-B_CdcBwG.js";
 import { t as M } from "./chevron-down-KZf5mh9_.js";
 import { t as N } from "./chevron-up-B9ynB8eU.js";
 import { t as P } from "./loader-circle-BVBgkRGz.js";
 import { v as F } from "./styleConstants-C_YAPdQS.js";
-import { r as I } from "./WrapperBlock-CVQ4t1tY.js";
-import { t as L } from "./TplModal-BiAf7tWe.js";
-import { t as R } from "./BlockPreviewCanvas-DggfBaoJ.js";
+import { r as I } from "./WrapperBlock-BumDudbj.js";
+import { t as L } from "./TplModal-DHwQXySQ.js";
+import { t as R } from "./BlockPreviewCanvas-BQXfqhzu.js";
 //#region src/components/SavedBlockPreviewRow.vue?vue&type=script&setup=true&lang.ts
 var z = ["data-block-id"], B = ["aria-label", "title"], V = { class: "tpl:relative tpl:min-w-0 tpl:flex-1" }, H = {
 	key: 0,

package/dist/{SavedBlocksBrowserModal-nLI8aAQ5.js → SavedBlocksBrowserModal-B5nFKszf.js}

@@ -1,6 +1,6 @@
 import { A as e, At as t, B as n, E as r, F as i, M as a, R as o, S as ee, V as s, Z as c, _ as te, at as l, c as u, d, g as f, jt as p, kt as m, l as h, r as g, s as _, u as v, v as y } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { a as b, c as x, i as S, s as C } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
-import "./useEditorCore-Dhit8Ygg.js";
+import "./useEditorCore-CAhRAya8.js";
 import { $ as w, U as ne, X as re, g as ie } from "./keys-CDqfZIRt.js";
 import { t as ae } from "./useI18n-B_CdcBwG.js";
 import { t as T } from "./blockTypeIcons-Sg8SY1NQ.js";
@@ -12,7 +12,7 @@ import { t as le } from "./x-BWrtpVl-.js";
 import { v as ue } from "./styleConstants-C_YAPdQS.js";
 import { t as de } from "./formatAbsoluteDateTime-DMmop3C-.js";
 import { t as fe } from "./formatRelativeTime-CtUU-QZ8.js";
-import { t as pe } from "./TplModal-BiAf7tWe.js";
+import { t as pe } from "./TplModal-DHwQXySQ.js";
 //#region src/components/SavedBlocksBrowserModal.vue?vue&type=script&setup=true&lang.ts
 var me = {
 	role: "dialog",
@@ -68,7 +68,7 @@ var me = {
 	props: { visible: { type: Boolean } },
 	emits: ["close", "insert"],
 	setup(y, { emit: k }) {
-		let at = y, A = k, ot = te(() => import("./BlockPreviewCanvas-DggfBaoJ.js").then((e) => e.n)), { t: j, format: M } = ae(), N = w(ne, "SavedBlocksBrowserModal"), P = w(ie, "SavedBlocksBrowserModal"), st = ee(re, void 0), F = c(""), I = c(""), L = c(null), R = c(null), z = c(null), B = c(""), V = c(""), H = c(null), U = c("end"), W = _(() => {
+		let at = y, A = k, ot = te(() => import("./BlockPreviewCanvas-BQXfqhzu.js").then((e) => e.n)), { t: j, format: M } = ae(), N = w(ne, "SavedBlocksBrowserModal"), P = w(ie, "SavedBlocksBrowserModal"), st = ee(re, void 0), F = c(""), I = c(""), L = c(null), R = c(null), z = c(null), B = c(""), V = c(""), H = c(null), U = c("end"), W = _(() => {
 			let e = F.value.trim().toLowerCase(), t = I.value;
 			return N.savedBlocks.value.filter((n) => !(e && !n.name.toLowerCase().includes(e) || t && n.category !== t));
 		}), G = _(() => N.isLoading.value && N.savedBlocks.value.length === 0), ct = _(() => F.value.trim().length > 0 || I.value !== ""), K = _(() => L.value ? N.savedBlocks.value.find((e) => e.id === L.value) ?? null : null), lt = _(() => {

package/dist/{SavedBlocksPanels-RnzUMUJI.js → SavedBlocksPanels-BZkbP7eB.js}

@@ -5,7 +5,7 @@ var c = /* @__PURE__ */ s({
 	__name: "SavedBlocksPanels",
 	props: { feature: {} },
 	setup(s) {
-		let c = s, l = t(() => import("./SavedBlocksPickBar-D3QA3Tgy.js")), u = t(() => import("./SaveBlockDialog-BJ-hEwLv.js")), d = t(() => import("./SavedBlocksBrowserModal-nLI8aAQ5.js"));
+		let c = s, l = t(() => import("./SavedBlocksPickBar-ChoCMdu7.js")), u = t(() => import("./SaveBlockDialog-36MzPD2S.js")), d = t(() => import("./SavedBlocksBrowserModal-B5nFKszf.js"));
 		function f(e, t) {
 			c.feature.insert(e, t);
 		}

package/dist/{SavedBlocksPickBar-D3QA3Tgy.js → SavedBlocksPickBar-ChoCMdu7.js}

@@ -1,5 +1,5 @@
 import { A as e, at as t, c as n, d as r, g as i, h as a, jt as o, kt as s, v as c } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { T as l } from "./useEditorCore-Dhit8Ygg.js";
+import { T as l } from "./useEditorCore-CAhRAya8.js";
 import { t as u } from "./useI18n-B_CdcBwG.js";
 import { t as d } from "./x-BWrtpVl-.js";
 import { v as f, x as p } from "./styleConstants-C_YAPdQS.js";

package/dist/{TestEmailModal-CnyxLhWJ.js → TestEmailModal-CKW-VArm.js}

@@ -1,15 +1,15 @@
 import { A as e, B as t, M as n, R as r, S as i, V as a, Z as o, at as s, c, d as l, g as u, h as d, 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 ee, i as te } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
 import { B as ne, u as re } from "./dist-iLUVPysa.js";
-import { R as ie } from "./useEditorCore-Dhit8Ygg.js";
+import { R as ie } from "./useEditorCore-CAhRAya8.js";
 import { C as ae, F as y, H as oe, M as b, O as se, g as ce } from "./keys-CDqfZIRt.js";
 import { t as le } from "./useI18n-B_CdcBwG.js";
 import { t as ue } from "./check-BMx_TLAS.js";
 import { t as de } from "./loader-circle-BVBgkRGz.js";
 import { n as fe, t as pe } from "./MergeTagModeToggle-B-8W1tK7.js";
 import { v as me } from "./styleConstants-C_YAPdQS.js";
-import { t as he } from "./TplModal-BiAf7tWe.js";
-import { t as ge } from "./BlockPreviewCanvas-DggfBaoJ.js";
+import { t as he } from "./TplModal-DHwQXySQ.js";
+import { t as ge } from "./BlockPreviewCanvas-BQXfqhzu.js";
 //#region src/utils/validateEmailShape.ts
 var x = /[,;<>()[\]\\"'`|/?#@!$%^&*+=~{}]/;
 function S(e) {

package/dist/{TestEmailPanel-BRisIL4G.js → TestEmailPanel-BylYzjyM.js}

@@ -5,7 +5,7 @@ var o = /* @__PURE__ */ a({
 	__name: "TestEmailPanel",
 	props: { feature: {} },
 	setup(a) {
-		let o = a, s = t(() => import("./TestEmailModal-CnyxLhWJ.js"));
+		let o = a, s = t(() => import("./TestEmailModal-CKW-VArm.js"));
 		function c(e) {
 			o.feature.send(e);
 		}

package/dist/{TitleEditor-lPITPzw6.js → TitleEditor-DoQ286_n.js}

@@ -1,5 +1,5 @@
 import { A as e, At as t, K as n, S as r, at as i, c as a, d as o, g as s, h as c, i as l, jt as u, kt as d, l as f, r as p, s as m, u as h, v as g } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { _ as ee, v as te } from "./useEditorCore-Dhit8Ygg.js";
+import { _ as ee, v as te } from "./useEditorCore-CAhRAya8.js";
 import { A as ne, E as re, J as _, Z as v } from "./keys-CDqfZIRt.js";
 import { t as y } from "./useI18n-B_CdcBwG.js";
 import { n as b } from "./usePopoverPosition-BYmd-lhR.js";

package/dist/{TplModal-BiAf7tWe.js → TplModal-DHwQXySQ.js}

@@ -1,6 +1,6 @@
 import { A as e, At as t, B as n, N as r, S as i, Z as a, at as o, c as s, d as c, g as l, i as u, l as d, s as f, u as p, v as m } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
 import { c as h, t as g } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
-import { x as _ } from "./useEditorCore-Dhit8Ygg.js";
+import { x as _ } from "./useEditorCore-CAhRAya8.js";
 import { J as v, Z as y } from "./keys-CDqfZIRt.js";
 import { n as b } from "./usePopoverPosition-BYmd-lhR.js";
 //#region src/components/TplModal.vue?vue&type=script&setup=true&lang.ts

package/dist/{VersionHistoryPanels-C589Jm_B.js → VersionHistoryPanels-C6QxmRUH.js}

@@ -5,7 +5,7 @@ var c = /* @__PURE__ */ s({
 	__name: "VersionHistoryPanels",
 	props: { feature: {} },
 	setup(s) {
-		let c = s, l = t(() => import("./VersionPreviewBanner-XUuLe36h.js")), u = t(() => import("./RestoreVersionDialog-DE8aqmdi.js"));
+		let c = s, l = t(() => import("./VersionPreviewBanner-XUuLe36h.js")), u = t(() => import("./RestoreVersionDialog-DOhgYkiA.js"));
 		async function d() {
 			try {
 				await c.feature.requestRestore();

package/dist/{WrapperBlock-CVQ4t1tY.js → WrapperBlock-BumDudbj.js}

@@ -1,5 +1,5 @@
 import { A as e, At as t, F as n, M as r, S as i, at as a, d as o, l as s, r as c, s as l, v as u } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { A as d, D as f, k as p } from "./useEditorCore-Dhit8Ygg.js";
+import { A as d, D as f, k as p } from "./useEditorCore-CAhRAya8.js";
 import { s as m } from "./keys-CDqfZIRt.js";
 function h(e, t = "desktop") {
 	return t === "mobile" ? 375 : e?.width ?? 600;

package/dist/bundle-stats.json

@@ -1,10 +1,10 @@
 {
-  "version": "0.42.1",
-  "initialGzipBytes": 176576,
-  "initialRawBytes": 587937,
+  "version": "0.43.1",
+  "initialGzipBytes": 176587,
+  "initialRawBytes": 588002,
   "initialFileCount": 48,
-  "lazyGzipBytes": 427758,
+  "lazyGzipBytes": 427769,
   "lazyRawBytes": 1510742,
   "lazyFileCount": 84,
-  "generatedAt": "2026-09-29T07:48:42.066Z"
+  "generatedAt": "2026-10-01T06:17:35.670Z"
 }

package/dist/cdn/chunks/{AiFeatureMenu-BXSPgOzA.js → AiFeatureMenu-4TgzmLb3.js}

@@ -1,5 +1,5 @@
 import { F as e, N as t, R as n, S as r, f as i, g as a, lt as o, m as s, p as c, u as l, ut as u } from "./draggable-IB4x6w2O.js";
-import "./useEditorCore-D4kzTMtQ.js";
+import "./useEditorCore-DoX2RgTl.js";
 import { $ as d, t as f } from "./keys-DCWeHkSF.js";
 import { A as p, D as m, mt as h } from "./icons-CQnjugjy.js";
 import { t as g } from "./_plugin-vue_export-helper-B3ysoDQm.js";
@@ -54,4 +54,4 @@ var v = { class: "tpl-ai-feature-menu tpl:w-[280px] tpl:overflow-hidden tpl:roun
 //#endregion
 export { C as default };
 
-//# sourceMappingURL=AiFeatureMenu-BXSPgOzA.js.map
+//# sourceMappingURL=AiFeatureMenu-4TgzmLb3.js.map

package/dist/cdn/chunks/{AiFeatureMenu-BXSPgOzA.js.map → AiFeatureMenu-4TgzmLb3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AiFeatureMenu-BXSPgOzA.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeStyle","_createElementVNode","_createBlock","_resolveDynamicComponent","_toDisplayString","_sfc_main","renderList","openBlock","resolveDynamicComponent","defineComponent","computed","createElementBlock","normalizeStyle","createBlock","createBaseVNode","Fragment","toDisplayString","requireInject","AI_CONFIG_KEY","ShieldCheck","Sparkles","ImageUp","_plugin_vue_export_helper_default","useCloudI18nStrict","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","AiFeatureMenu_default","__emit","emit","cloudT","aiConfig","configKeyMap","allFeatures","features","f","getTitle","key","getDescription","feature","__props"],"sources":["../../../src/cloud/components/AiFeatureMenu.vue","../../../src/cloud/components/AiFeatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { AI_CONFIG_KEY, requireInject } from \"../../keys\";\nimport type { AiConfig } from \"@templatical/types\";\nimport { ImageUp, ShieldCheck, Sparkles } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nexport type AiFeature = \"ai-chat\" | \"design-reference\" | \"scoring\";\n\ndefineProps<{\n  activeFeature: AiFeature | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"select\", feature: AiFeature): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst aiConfig = requireInject(AI_CONFIG_KEY, \"AiFeatureMenu\");\n\nconst configKeyMap: Record<AiFeature, keyof AiConfig> = {\n  \"ai-chat\": \"chat\",\n  \"design-reference\": \"designToTemplate\",\n  scoring: \"scoring\",\n};\n\nconst allFeatures: { key: AiFeature; icon: typeof Sparkles }[] = [\n  { key: \"ai-chat\", icon: Sparkles },\n  { key: \"design-reference\", icon: ImageUp },\n  { key: \"scoring\", icon: ShieldCheck },\n];\n\nconst features = computed(() =>\n  allFeatures.filter((f) => aiConfig.isFeatureEnabled(configKeyMap[f.key])),\n);\n\nfunction getTitle(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistant;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplate;\n  return cloudT.aiMenu.templateScore;\n}\n\nfunction getDescription(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistantDesc;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplateDesc;\n  return cloudT.aiMenu.templateScoreDesc;\n}\n</script>\n\n<template>\n  <div\n    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)]\"\n  >\n    <button\n      v-for=\"feature in features\"\n      :key=\"feature.key\"\n      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\"\n      :style=\"{\n        backgroundColor:\n          activeFeature === feature.key\n            ? 'var(--tpl-primary-light)'\n            : 'transparent',\n      }\"\n      @click=\"emit('select', feature.key)\"\n    >\n      <div\n        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)]\"\n        :style=\"{\n          backgroundColor:\n            activeFeature === feature.key\n              ? 'var(--tpl-primary)'\n              : 'var(--tpl-bg-active)',\n          color:\n            activeFeature === feature.key\n              ? 'var(--tpl-bg)'\n              : 'var(--tpl-text-muted)',\n        }\"\n      >\n        <component :is=\"feature.icon\" :size=\"15\" :stroke-width=\"2\" />\n      </div>\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5\">\n        <span class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\">\n          {{ getTitle(feature.key) }}\n        </span>\n        <span\n          class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ getDescription(feature.key) }}\n        </span>\n      </div>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.tpl-ai-feature-menu-item:hover {\n  background-color: var(--tpl-bg-hover) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { AI_CONFIG_KEY, requireInject } from \"../../keys\";\nimport type { AiConfig } from \"@templatical/types\";\nimport { ImageUp, ShieldCheck, Sparkles } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nexport type AiFeature = \"ai-chat\" | \"design-reference\" | \"scoring\";\n\ndefineProps<{\n  activeFeature: AiFeature | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"select\", feature: AiFeature): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst aiConfig = requireInject(AI_CONFIG_KEY, \"AiFeatureMenu\");\n\nconst configKeyMap: Record<AiFeature, keyof AiConfig> = {\n  \"ai-chat\": \"chat\",\n  \"design-reference\": \"designToTemplate\",\n  scoring: \"scoring\",\n};\n\nconst allFeatures: { key: AiFeature; icon: typeof Sparkles }[] = [\n  { key: \"ai-chat\", icon: Sparkles },\n  { key: \"design-reference\", icon: ImageUp },\n  { key: \"scoring\", icon: ShieldCheck },\n];\n\nconst features = computed(() =>\n  allFeatures.filter((f) => aiConfig.isFeatureEnabled(configKeyMap[f.key])),\n);\n\nfunction getTitle(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistant;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplate;\n  return cloudT.aiMenu.templateScore;\n}\n\nfunction getDescription(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistantDesc;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplateDesc;\n  return cloudT.aiMenu.templateScoreDesc;\n}\n</script>\n\n<template>\n  <div\n    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)]\"\n  >\n    <button\n      v-for=\"feature in features\"\n      :key=\"feature.key\"\n      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\"\n      :style=\"{\n        backgroundColor:\n          activeFeature === feature.key\n            ? 'var(--tpl-primary-light)'\n            : 'transparent',\n      }\"\n      @click=\"emit('select', feature.key)\"\n    >\n      <div\n        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)]\"\n        :style=\"{\n          backgroundColor:\n            activeFeature === feature.key\n              ? 'var(--tpl-primary)'\n              : 'var(--tpl-bg-active)',\n          color:\n            activeFeature === feature.key\n              ? 'var(--tpl-bg)'\n              : 'var(--tpl-text-muted)',\n        }\"\n      >\n        <component :is=\"feature.icon\" :size=\"15\" :stroke-width=\"2\" />\n      </div>\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5\">\n        <span class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\">\n          {{ getTitle(feature.key) }}\n        </span>\n        <span\n          class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ getDescription(feature.key) }}\n        </span>\n      </div>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.tpl-ai-feature-menu-item:hover {\n  background-color: var(--tpl-bg-hover) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EAaA,IAAMmC,IAAOD,GAIP,EAAE,GAAGE,MAAWT,EAAmB,GAEnCU,IAAWhB,EAAcC,GAAe,eAAe,GAEvDgB,IAAkD;GACtD,WAAW;GACX,oBAAoB;GACpB,SAAS;EACX,GAEMC,IAA2D;GAC/D;IAAE,KAAK;IAAW,MAAMf;GAAS;GACjC;IAAE,KAAK;IAAoB,MAAMC;GAAQ;GACzC;IAAE,KAAK;IAAW,MAAMF;GAAY;EACtC,GAEMiB,IAAW1B,QACfyB,EAAY,QAAQ,MAAMF,EAAS,iBAAiBC,EAAaG,EAAE,IAAI,CAAC,CAC1E;EAEA,SAASC,EAAS,GAAwB;GAGxC,OAFIC,MAAQ,YAAkBP,EAAO,OAAO,cACxCO,MAAQ,qBAA2BP,EAAO,OAAO,mBAC9CA,EAAO,OAAO;EACvB;EAEA,SAASQ,EAAe,GAAwB;GAG9C,OAFID,MAAQ,YAAkBP,EAAO,OAAO,kBACxCO,MAAQ,qBAA2BP,EAAO,OAAO,uBAC9CA,EAAO,OAAO;EACvB;oBAIEpC,EAAA,GAAAC,EAyCM,OAzCN2B,GAyCM,EAtCJ5B,EAAA,EAAA,GAAAC,EAqCSC,GAAA,MAAAC,EApCWqC,EAAA,QAAX,OADTxC,EAAA,GAAAC,EAqCS,UAAA;GAnCN,KAAK4C,EAAQ;GACd,OAAM;GACL,OAAKzC,EAAA,EAAA,iBAAuC0C,EAAA,kBAAkBD,EAAQ,MAAA,6BAAA,cAAA,CAAA;GAMtE,UAAK,MAAEV,EAAI,UAAWU,EAAQ,GAAG;EAElCxC,GAAAA,CAAAA,EAcM,OAAA;GAbJ,OAAM;GACL,OAAKD,EAAA;IAA2C,iBAAA0C,EAAA,kBAAkBD,EAAQ,MAAA,uBAAA;IAA8G,OAAAC,EAAA,kBAAkBD,EAAQ,MAAA,kBAAA;;EAWnN7C,GAAAA,EAAAA,EAAA,GAAAM,EAA6DC,EAA7CsC,EAAQ,IAAI,GAAA;GAAG,MAAM;GAAK,gBAAc;EAE1DxC,CAAAA,EAAAA,GAAAA,CAAAA,GAAAA,EASM,OATNyB,GASM,CARJzB,EAEO,QAFP0B,GAEOvB,EADFkC,EAASG,EAAQ,GAAG,CAAA,GAAA,CAAA,GAEzBxC,EAIO,QAJP2B,GAIOxB,EADFoC,EAAeC,EAAQ,GAAG,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAAhB,CAAA"}
+{"version":3,"file":"AiFeatureMenu-4TgzmLb3.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeStyle","_createElementVNode","_createBlock","_resolveDynamicComponent","_toDisplayString","_sfc_main","renderList","openBlock","resolveDynamicComponent","defineComponent","computed","createElementBlock","normalizeStyle","createBlock","createBaseVNode","Fragment","toDisplayString","requireInject","AI_CONFIG_KEY","ShieldCheck","Sparkles","ImageUp","_plugin_vue_export_helper_default","useCloudI18nStrict","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","AiFeatureMenu_default","__emit","emit","cloudT","aiConfig","configKeyMap","allFeatures","features","f","getTitle","key","getDescription","feature","__props"],"sources":["../../../src/cloud/components/AiFeatureMenu.vue","../../../src/cloud/components/AiFeatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { AI_CONFIG_KEY, requireInject } from \"../../keys\";\nimport type { AiConfig } from \"@templatical/types\";\nimport { ImageUp, ShieldCheck, Sparkles } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nexport type AiFeature = \"ai-chat\" | \"design-reference\" | \"scoring\";\n\ndefineProps<{\n  activeFeature: AiFeature | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"select\", feature: AiFeature): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst aiConfig = requireInject(AI_CONFIG_KEY, \"AiFeatureMenu\");\n\nconst configKeyMap: Record<AiFeature, keyof AiConfig> = {\n  \"ai-chat\": \"chat\",\n  \"design-reference\": \"designToTemplate\",\n  scoring: \"scoring\",\n};\n\nconst allFeatures: { key: AiFeature; icon: typeof Sparkles }[] = [\n  { key: \"ai-chat\", icon: Sparkles },\n  { key: \"design-reference\", icon: ImageUp },\n  { key: \"scoring\", icon: ShieldCheck },\n];\n\nconst features = computed(() =>\n  allFeatures.filter((f) => aiConfig.isFeatureEnabled(configKeyMap[f.key])),\n);\n\nfunction getTitle(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistant;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplate;\n  return cloudT.aiMenu.templateScore;\n}\n\nfunction getDescription(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistantDesc;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplateDesc;\n  return cloudT.aiMenu.templateScoreDesc;\n}\n</script>\n\n<template>\n  <div\n    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)]\"\n  >\n    <button\n      v-for=\"feature in features\"\n      :key=\"feature.key\"\n      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\"\n      :style=\"{\n        backgroundColor:\n          activeFeature === feature.key\n            ? 'var(--tpl-primary-light)'\n            : 'transparent',\n      }\"\n      @click=\"emit('select', feature.key)\"\n    >\n      <div\n        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)]\"\n        :style=\"{\n          backgroundColor:\n            activeFeature === feature.key\n              ? 'var(--tpl-primary)'\n              : 'var(--tpl-bg-active)',\n          color:\n            activeFeature === feature.key\n              ? 'var(--tpl-bg)'\n              : 'var(--tpl-text-muted)',\n        }\"\n      >\n        <component :is=\"feature.icon\" :size=\"15\" :stroke-width=\"2\" />\n      </div>\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5\">\n        <span class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\">\n          {{ getTitle(feature.key) }}\n        </span>\n        <span\n          class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ getDescription(feature.key) }}\n        </span>\n      </div>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.tpl-ai-feature-menu-item:hover {\n  background-color: var(--tpl-bg-hover) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { AI_CONFIG_KEY, requireInject } from \"../../keys\";\nimport type { AiConfig } from \"@templatical/types\";\nimport { ImageUp, ShieldCheck, Sparkles } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nexport type AiFeature = \"ai-chat\" | \"design-reference\" | \"scoring\";\n\ndefineProps<{\n  activeFeature: AiFeature | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"select\", feature: AiFeature): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst aiConfig = requireInject(AI_CONFIG_KEY, \"AiFeatureMenu\");\n\nconst configKeyMap: Record<AiFeature, keyof AiConfig> = {\n  \"ai-chat\": \"chat\",\n  \"design-reference\": \"designToTemplate\",\n  scoring: \"scoring\",\n};\n\nconst allFeatures: { key: AiFeature; icon: typeof Sparkles }[] = [\n  { key: \"ai-chat\", icon: Sparkles },\n  { key: \"design-reference\", icon: ImageUp },\n  { key: \"scoring\", icon: ShieldCheck },\n];\n\nconst features = computed(() =>\n  allFeatures.filter((f) => aiConfig.isFeatureEnabled(configKeyMap[f.key])),\n);\n\nfunction getTitle(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistant;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplate;\n  return cloudT.aiMenu.templateScore;\n}\n\nfunction getDescription(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistantDesc;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplateDesc;\n  return cloudT.aiMenu.templateScoreDesc;\n}\n</script>\n\n<template>\n  <div\n    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)]\"\n  >\n    <button\n      v-for=\"feature in features\"\n      :key=\"feature.key\"\n      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\"\n      :style=\"{\n        backgroundColor:\n          activeFeature === feature.key\n            ? 'var(--tpl-primary-light)'\n            : 'transparent',\n      }\"\n      @click=\"emit('select', feature.key)\"\n    >\n      <div\n        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)]\"\n        :style=\"{\n          backgroundColor:\n            activeFeature === feature.key\n              ? 'var(--tpl-primary)'\n              : 'var(--tpl-bg-active)',\n          color:\n            activeFeature === feature.key\n              ? 'var(--tpl-bg)'\n              : 'var(--tpl-text-muted)',\n        }\"\n      >\n        <component :is=\"feature.icon\" :size=\"15\" :stroke-width=\"2\" />\n      </div>\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5\">\n        <span class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\">\n          {{ getTitle(feature.key) }}\n        </span>\n        <span\n          class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ getDescription(feature.key) }}\n        </span>\n      </div>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.tpl-ai-feature-menu-item:hover {\n  background-color: var(--tpl-bg-hover) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EAaA,IAAMmC,IAAOD,GAIP,EAAE,GAAGE,MAAWT,EAAmB,GAEnCU,IAAWhB,EAAcC,GAAe,eAAe,GAEvDgB,IAAkD;GACtD,WAAW;GACX,oBAAoB;GACpB,SAAS;EACX,GAEMC,IAA2D;GAC/D;IAAE,KAAK;IAAW,MAAMf;GAAS;GACjC;IAAE,KAAK;IAAoB,MAAMC;GAAQ;GACzC;IAAE,KAAK;IAAW,MAAMF;GAAY;EACtC,GAEMiB,IAAW1B,QACfyB,EAAY,QAAQ,MAAMF,EAAS,iBAAiBC,EAAaG,EAAE,IAAI,CAAC,CAC1E;EAEA,SAASC,EAAS,GAAwB;GAGxC,OAFIC,MAAQ,YAAkBP,EAAO,OAAO,cACxCO,MAAQ,qBAA2BP,EAAO,OAAO,mBAC9CA,EAAO,OAAO;EACvB;EAEA,SAASQ,EAAe,GAAwB;GAG9C,OAFID,MAAQ,YAAkBP,EAAO,OAAO,kBACxCO,MAAQ,qBAA2BP,EAAO,OAAO,uBAC9CA,EAAO,OAAO;EACvB;oBAIEpC,EAAA,GAAAC,EAyCM,OAzCN2B,GAyCM,EAtCJ5B,EAAA,EAAA,GAAAC,EAqCSC,GAAA,MAAAC,EApCWqC,EAAA,QAAX,OADTxC,EAAA,GAAAC,EAqCS,UAAA;GAnCN,KAAK4C,EAAQ;GACd,OAAM;GACL,OAAKzC,EAAA,EAAA,iBAAuC0C,EAAA,kBAAkBD,EAAQ,MAAA,6BAAA,cAAA,CAAA;GAMtE,UAAK,MAAEV,EAAI,UAAWU,EAAQ,GAAG;EAElCxC,GAAAA,CAAAA,EAcM,OAAA;GAbJ,OAAM;GACL,OAAKD,EAAA;IAA2C,iBAAA0C,EAAA,kBAAkBD,EAAQ,MAAA,uBAAA;IAA8G,OAAAC,EAAA,kBAAkBD,EAAQ,MAAA,kBAAA;;EAWnN7C,GAAAA,EAAAA,EAAA,GAAAM,EAA6DC,EAA7CsC,EAAQ,IAAI,GAAA;GAAG,MAAM;GAAK,gBAAc;EAE1DxC,CAAAA,EAAAA,GAAAA,CAAAA,GAAAA,EASM,OATNyB,GASM,CARJzB,EAEO,QAFP0B,GAEOvB,EADFkC,EAASG,EAAQ,GAAG,CAAA,GAAA,CAAA,GAEzBxC,EAIO,QAJP2B,GAIOxB,EADFoC,EAAeC,EAAQ,GAAG,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAAhB,CAAA"}

package/dist/cdn/chunks/{BlockPreviewCanvas-CMmv1FTA.js → BlockPreviewCanvas-BpvK3Sh9.js}

@@ -1,9 +1,9 @@
 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 { G as h } from "./src-BR3I3gOW.js";
-import { C as g, E as _, S as v, a as y, d as b, f as x, i as S, l as C, m as w, n as T, p as E, r as D, s as O, u as k, w as A } from "./useEditorCore-D4kzTMtQ.js";
+import { C as g, E as _, S as v, a as y, d as b, f as x, i as S, l as C, m as w, n as T, p as E, r as D, s as O, u as k, w as A } from "./useEditorCore-DoX2RgTl.js";
 import { M as j, Q as M, f as N, g as P, s as F } from "./keys-DCWeHkSF.js";
-import { n as I, r as L, t as R } from "./WrapperBlock-DI8vSvTO.js";
+import { n as I, r as L, t as R } from "./WrapperBlock-CGg6rBnx.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__ */ s({
 	name: "PreviewSectionBlock",
@@ -132,4 +132,4 @@ var z = { class: "tpl:w-full" }, B = { class: "tpl:flex tpl:gap-0" }, V = /* @__
 //#endregion
 export { W as n, G as t };
 
-//# sourceMappingURL=BlockPreviewCanvas-CMmv1FTA.js.map
+//# sourceMappingURL=BlockPreviewCanvas-BpvK3Sh9.js.map

package/dist/cdn/chunks/{BlockPreviewCanvas-CMmv1FTA.js.map → BlockPreviewCanvas-BpvK3Sh9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"BlockPreviewCanvas-CMmv1FTA.js","names":["_hoisted_1","TitleBlock","ParagraphBlock","ImageBlock","VideoBlock","ButtonBlock","DividerBlock","SocialIconsBlock","MenuBlock","TableBlock","SpacerBlock","HtmlBlock","CustomBlock","_resolveComponent","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_normalizeStyle","_unref","_createBlock","_resolveDynamicComponent","_sfc_main","PreviewSectionBlock","TitleBlock","ParagraphBlock","ImageBlock","VideoBlock","ButtonBlock","DividerBlock","SocialIconsBlock","MenuBlock","TableBlock","SpacerBlock","HtmlBlock","CustomBlock","WrapperBlock","_openBlock","_createElementBlock","_normalizeStyle","_createElementVNode","_unref","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_sfc_main","__exportAll","inject","renderList","resolveComponent","openBlock","provide","resolveDynamicComponent","defineComponent","unref","computed","createElementBlock","normalizeStyle","createBlock","Fragment","resolveContentDirection","getBlockWrapperStyle","resolveBlockComponent","ButtonBlock_default","SocialIconsBlock_default","ImageBlock_default","HtmlBlock_default","SpacerBlock_default","ParagraphBlock_default","CustomBlock_default","VideoBlock_default","DividerBlock_default","TableBlock_default","TitleBlock_default","MenuBlock_default","getDocumentStyle","MERGE_TAG_SAMPLE_MODE_KEY","USE_MERGE_TAG_SAMPLES_KEY","CONDITION_PREVIEW_KEY","EDITOR_KEY","BLOCK_REGISTRY_KEY","EMAIL_FRAME_WIDTH_TRANSITION","getEmailFrameWidth","WrapperBlock_default","_hoisted_1$1","_hoisted_2","PreviewSectionBlock_default","previewBlockComponentMap","props","__props","blockRegistry","columnWidths","columns","count","children","getColumnBlocks","colIndex","getBlockComponent","block","_component_PreviewSectionBlock","createBaseVNode","childBlock","_hoisted_1","BlockPreviewCanvas_vue_vue_type_script_setup_true_lang_default","editor","conditionPreview","mergeTagSampleMode","visibleBlocks","previewSettings","frameWidth","documentStyle","contentLang","contentDir","emailBackground","stageWidth","previewComponentMap","BlockPreviewCanvas_exports","BlockPreviewCanvas_default"],"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 WrapperBlock from \"./blocks/WrapperBlock.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 TemplateSettings,\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     * Document settings for this surface. Test-email passes the composed\n     * document so the mat is layout `backgroundColor` (`mj-body`). Saved-block\n     * previews omit it and read the live editor template.\n     */\n    settings?: TemplateSettings;\n  }>(),\n  { viewport: \"desktop\", applyConditionFilter: true, settings: undefined },\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\nconst previewSettings = computed(\n  () => props.settings ?? editor?.content.value.settings,\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(previewSettings.value, 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  previewSettings.value ? getDocumentStyle(previewSettings.value) : {},\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  () => previewSettings.value?.locale?.trim() || undefined,\n);\nconst contentDir = computed(() =>\n  resolveContentDirection(previewSettings.value ?? { 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  () => previewSettings.value?.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  wrapper: WrapperBlock,\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 WrapperBlock from \"./blocks/WrapperBlock.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 TemplateSettings,\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     * Document settings for this surface. Test-email passes the composed\n     * document so the mat is layout `backgroundColor` (`mj-body`). Saved-block\n     * previews omit it and read the live editor template.\n     */\n    settings?: TemplateSettings;\n  }>(),\n  { viewport: \"desktop\", applyConditionFilter: true, settings: undefined },\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\nconst previewSettings = computed(\n  () => props.settings ?? editor?.content.value.settings,\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(previewSettings.value, 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  previewSettings.value ? getDocumentStyle(previewSettings.value) : {},\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  () => previewSettings.value?.locale?.trim() || undefined,\n);\nconst contentDir = computed(() =>\n  resolveContentDirection(previewSettings.value ?? { 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  () => previewSettings.value?.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  wrapper: WrapperBlock,\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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"}
+{"version":3,"file":"BlockPreviewCanvas-BpvK3Sh9.js","names":["_hoisted_1","TitleBlock","ParagraphBlock","ImageBlock","VideoBlock","ButtonBlock","DividerBlock","SocialIconsBlock","MenuBlock","TableBlock","SpacerBlock","HtmlBlock","CustomBlock","_resolveComponent","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_normalizeStyle","_unref","_createBlock","_resolveDynamicComponent","_sfc_main","PreviewSectionBlock","TitleBlock","ParagraphBlock","ImageBlock","VideoBlock","ButtonBlock","DividerBlock","SocialIconsBlock","MenuBlock","TableBlock","SpacerBlock","HtmlBlock","CustomBlock","WrapperBlock","_openBlock","_createElementBlock","_normalizeStyle","_createElementVNode","_unref","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_sfc_main","__exportAll","inject","renderList","resolveComponent","openBlock","provide","resolveDynamicComponent","defineComponent","unref","computed","createElementBlock","normalizeStyle","createBlock","Fragment","resolveContentDirection","getBlockWrapperStyle","resolveBlockComponent","ButtonBlock_default","SocialIconsBlock_default","ImageBlock_default","HtmlBlock_default","SpacerBlock_default","ParagraphBlock_default","CustomBlock_default","VideoBlock_default","DividerBlock_default","TableBlock_default","TitleBlock_default","MenuBlock_default","getDocumentStyle","MERGE_TAG_SAMPLE_MODE_KEY","USE_MERGE_TAG_SAMPLES_KEY","CONDITION_PREVIEW_KEY","EDITOR_KEY","BLOCK_REGISTRY_KEY","EMAIL_FRAME_WIDTH_TRANSITION","getEmailFrameWidth","WrapperBlock_default","_hoisted_1$1","_hoisted_2","PreviewSectionBlock_default","previewBlockComponentMap","props","__props","blockRegistry","columnWidths","columns","count","children","getColumnBlocks","colIndex","getBlockComponent","block","_component_PreviewSectionBlock","createBaseVNode","childBlock","_hoisted_1","BlockPreviewCanvas_vue_vue_type_script_setup_true_lang_default","editor","conditionPreview","mergeTagSampleMode","visibleBlocks","previewSettings","frameWidth","documentStyle","contentLang","contentDir","emailBackground","stageWidth","previewComponentMap","BlockPreviewCanvas_exports","BlockPreviewCanvas_default"],"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 WrapperBlock from \"./blocks/WrapperBlock.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 TemplateSettings,\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     * Document settings for this surface. Test-email passes the composed\n     * document so the mat is layout `backgroundColor` (`mj-body`). Saved-block\n     * previews omit it and read the live editor template.\n     */\n    settings?: TemplateSettings;\n  }>(),\n  { viewport: \"desktop\", applyConditionFilter: true, settings: undefined },\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\nconst previewSettings = computed(\n  () => props.settings ?? editor?.content.value.settings,\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(previewSettings.value, 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  previewSettings.value ? getDocumentStyle(previewSettings.value) : {},\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  () => previewSettings.value?.locale?.trim() || undefined,\n);\nconst contentDir = computed(() =>\n  resolveContentDirection(previewSettings.value ?? { 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  () => previewSettings.value?.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  wrapper: WrapperBlock,\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 WrapperBlock from \"./blocks/WrapperBlock.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 TemplateSettings,\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     * Document settings for this surface. Test-email passes the composed\n     * document so the mat is layout `backgroundColor` (`mj-body`). Saved-block\n     * previews omit it and read the live editor template.\n     */\n    settings?: TemplateSettings;\n  }>(),\n  { viewport: \"desktop\", applyConditionFilter: true, settings: undefined },\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\nconst previewSettings = computed(\n  () => props.settings ?? editor?.content.value.settings,\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(previewSettings.value, 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  previewSettings.value ? getDocumentStyle(previewSettings.value) : {},\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  () => previewSettings.value?.locale?.trim() || undefined,\n);\nconst contentDir = computed(() =>\n  resolveContentDirection(previewSettings.value ?? { 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  () => previewSettings.value?.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  wrapper: WrapperBlock,\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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"}

package/dist/cdn/chunks/{CloudHeaderExtras-yvFz2_e-.js → CloudHeaderExtras-DqgOaWym.js}

@@ -16,7 +16,7 @@ var v = {
 		cloud: {}
 	},
 	setup(n) {
-		let x = m(() => import("./CollaboratorBar-Clm1ZVXQ.js")), S = m(() => import("./AiFeatureMenu-BXSPgOzA.js")), { t: C, format: w } = _();
+		let x = m(() => import("./CollaboratorBar-CQ9EpYKQ.js")), S = m(() => import("./AiFeatureMenu-4TgzmLb3.js")), { t: C, format: w } = _();
 		return (m, _) => n.part === "left" ? (t(), o(f, { key: 0 }, [n.cloud.featureFlags.templateLimit.value === null ? s("", !0) : (t(), o("span", v, p(r(w)(r(C).header.templatesUsed, {
 			used: n.cloud.featureFlags.templateCount.value,
 			max: n.cloud.featureFlags.templateLimit.value
@@ -57,4 +57,4 @@ var v = {
 //#endregion
 export { x as default };
 
-//# sourceMappingURL=CloudHeaderExtras-yvFz2_e-.js.map
+//# sourceMappingURL=CloudHeaderExtras-DqgOaWym.js.map

package/dist/cdn/chunks/{CloudHeaderExtras-yvFz2_e-.js.map → CloudHeaderExtras-DqgOaWym.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CloudHeaderExtras-yvFz2_e-.js","names":["_openBlock","_createElementBlock","_Fragment","_toDisplayString","_unref","_createCommentVNode","_createBlock","_createElementVNode","_normalizeClass","_withModifiers","_createVNode","_createTextVNode","_Transition","_withCtx","_sfc_main","withCtx","openBlock","defineComponent","unref","createVNode","normalizeClass","createElementBlock","createCommentVNode","withModifiers","createBlock","Transition","createBaseVNode","Fragment","toDisplayString","defineAsyncComponent","createTextVNode","Sparkles","useCloudI18nStrict","_hoisted_1","_hoisted_2","_hoisted_3","CloudHeaderExtras_default","CollaboratorBar","AiFeatureMenu","cloudT","cloudFormat","__props","el","_cache","args"],"sources":["../../../src/cloud/components/CloudHeaderExtras.vue","../../../src/cloud/components/CloudHeaderExtras.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { defineAsyncComponent } from \"vue\";\nimport { Sparkles } from \"@lucide/vue\";\n\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { CloudAttachment } from \"../runtime\";\n\nconst CollaboratorBar = defineAsyncComponent(\n  () => import(\"./CollaboratorBar.vue\"),\n);\nconst AiFeatureMenu = defineAsyncComponent(() => import(\"./AiFeatureMenu.vue\"));\n\n/**\n * The Cloud-only header controls, filled into `EditorHeader`'s `left-extras`\n * and `right-extras` slots.\n *\n * One component with a `part` prop rather than two: both regions share this\n * file's lazy chunk, so a Cloud session pays one round-trip for all of them and\n * an OSS session pays none.\n *\n * There is no `center` part. The header's centre track must hold a constant\n * width, so only the anchored columns take conditional controls — see\n * `EditorHeader.vue`'s centre comment.\n *\n * The plan-usage readout and the AI button live here rather than in the shared\n * header because they render **cloud-chunk** strings; OSS translators never see\n * them. Comments are deliberately not here: that feature is shared and\n * provider-backed, so its trigger and its strings belong to the shared header and\n * the OSS chunk.\n */\ndefineProps<{\n  part: \"left\" | \"right\";\n  cloud: CloudAttachment;\n}>();\n\nconst { t: cloudT, format: cloudFormat } = useCloudI18nStrict();\n</script>\n\n<template>\n  <!-- Left: the plan's template usage, then who else is in the template right\n       now. Presence sits with the template's identity rather than in the\n       header's centre track: that track's width must stay constant, and a\n       collaborator bar changes width every time somebody joins or leaves — which\n       used to slide the Preview button sideways under the cursor (#574). This\n       column packs from the left, so it grows rightward and moves nothing. -->\n  <template v-if=\"part === 'left'\">\n    <!-- A plan *limit*, not a templates concern, which is why it sits here and\n         its string stays in the cloud chunk. -->\n    <span\n      v-if=\"cloud.featureFlags.templateLimit.value !== null\"\n      data-testid=\"cloud-template-usage\"\n      class=\"tpl:text-xs tpl:opacity-60 tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{\n        cloudFormat(cloudT.header.templatesUsed, {\n          used: cloud.featureFlags.templateCount.value,\n          max: cloud.featureFlags.templateLimit.value,\n        })\n      }}\n    </span>\n    <CollaboratorBar\n      v-if=\"cloud.collaboration && cloud.isCollaborationEnabled.value\"\n      :collaborators=\"cloud.collaboration.collaborators.value\"\n      :is-connected=\"cloud.websocket.isConnected.value\"\n    />\n  </template>\n\n  <!-- Right: AI — after the shared header's Comments button and before the\n       test-email button, so the shared header is a superset of the OSS one rather\n       than a rearrangement. -->\n  <template v-else-if=\"part === 'right'\">\n    <div\n      v-if=\"\n        cloud.featureFlags.canUseAiGeneration.value &&\n        cloud.featureFlags.hasTemplateSaved.value\n      \"\n      :ref=\"\n        (el) => (cloud.panelState.aiMenuRef.value = el as HTMLElement | null)\n      \"\n      class=\"tpl:relative\"\n    >\n      <button\n        type=\"button\"\n        data-testid=\"ai-menu-trigger\"\n        :aria-expanded=\"cloud.panelState.aiMenuOpen.value\"\n        class=\"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\"\n        :class=\"\n          cloud.panelState.aiButtonActive.value\n            ? 'tpl-ai-btn--active'\n            : 'tpl-ai-btn--idle'\n        \"\n        @click.stop=\"cloud.panelState.toggleAiMenu\"\n      >\n        <Sparkles :size=\"16\" :stroke-width=\"2\" class=\"tpl-ai-btn-icon\" />\n        {{ cloudT.aiChat.button }}\n      </button>\n      <Transition\n        enter-active-class=\"tpl:transition-all tpl:ease-out\"\n        enter-from-class=\"tpl:scale-95 tpl:opacity-0\"\n        enter-to-class=\"tpl:scale-100 tpl:opacity-100\"\n        leave-active-class=\"tpl:transition-all tpl:duration-100 tpl:ease-in\"\n        leave-from-class=\"tpl:scale-100 tpl:opacity-100\"\n        leave-to-class=\"tpl:scale-95 tpl:opacity-0\"\n      >\n        <div\n          v-if=\"cloud.panelState.aiMenuOpen.value\"\n          class=\"tpl:absolute tpl:right-0 tpl:top-full tpl:z-50 tpl:mt-1 tpl:origin-top-right\"\n        >\n          <AiFeatureMenu\n            :active-feature=\"cloud.panelState.activeAiFeature.value\"\n            @select=\"cloud.panelState.handleAiFeatureSelect\"\n          />\n        </div>\n      </Transition>\n    </div>\n  </template>\n</template>\n","<script setup lang=\"ts\">\nimport { defineAsyncComponent } from \"vue\";\nimport { Sparkles } from \"@lucide/vue\";\n\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { CloudAttachment } from \"../runtime\";\n\nconst CollaboratorBar = defineAsyncComponent(\n  () => import(\"./CollaboratorBar.vue\"),\n);\nconst AiFeatureMenu = defineAsyncComponent(() => import(\"./AiFeatureMenu.vue\"));\n\n/**\n * The Cloud-only header controls, filled into `EditorHeader`'s `left-extras`\n * and `right-extras` slots.\n *\n * One component with a `part` prop rather than two: both regions share this\n * file's lazy chunk, so a Cloud session pays one round-trip for all of them and\n * an OSS session pays none.\n *\n * There is no `center` part. The header's centre track must hold a constant\n * width, so only the anchored columns take conditional controls — see\n * `EditorHeader.vue`'s centre comment.\n *\n * The plan-usage readout and the AI button live here rather than in the shared\n * header because they render **cloud-chunk** strings; OSS translators never see\n * them. Comments are deliberately not here: that feature is shared and\n * provider-backed, so its trigger and its strings belong to the shared header and\n * the OSS chunk.\n */\ndefineProps<{\n  part: \"left\" | \"right\";\n  cloud: CloudAttachment;\n}>();\n\nconst { t: cloudT, format: cloudFormat } = useCloudI18nStrict();\n</script>\n\n<template>\n  <!-- Left: the plan's template usage, then who else is in the template right\n       now. Presence sits with the template's identity rather than in the\n       header's centre track: that track's width must stay constant, and a\n       collaborator bar changes width every time somebody joins or leaves — which\n       used to slide the Preview button sideways under the cursor (#574). This\n       column packs from the left, so it grows rightward and moves nothing. -->\n  <template v-if=\"part === 'left'\">\n    <!-- A plan *limit*, not a templates concern, which is why it sits here and\n         its string stays in the cloud chunk. -->\n    <span\n      v-if=\"cloud.featureFlags.templateLimit.value !== null\"\n      data-testid=\"cloud-template-usage\"\n      class=\"tpl:text-xs tpl:opacity-60 tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{\n        cloudFormat(cloudT.header.templatesUsed, {\n          used: cloud.featureFlags.templateCount.value,\n          max: cloud.featureFlags.templateLimit.value,\n        })\n      }}\n    </span>\n    <CollaboratorBar\n      v-if=\"cloud.collaboration && cloud.isCollaborationEnabled.value\"\n      :collaborators=\"cloud.collaboration.collaborators.value\"\n      :is-connected=\"cloud.websocket.isConnected.value\"\n    />\n  </template>\n\n  <!-- Right: AI — after the shared header's Comments button and before the\n       test-email button, so the shared header is a superset of the OSS one rather\n       than a rearrangement. -->\n  <template v-else-if=\"part === 'right'\">\n    <div\n      v-if=\"\n        cloud.featureFlags.canUseAiGeneration.value &&\n        cloud.featureFlags.hasTemplateSaved.value\n      \"\n      :ref=\"\n        (el) => (cloud.panelState.aiMenuRef.value = el as HTMLElement | null)\n      \"\n      class=\"tpl:relative\"\n    >\n      <button\n        type=\"button\"\n        data-testid=\"ai-menu-trigger\"\n        :aria-expanded=\"cloud.panelState.aiMenuOpen.value\"\n        class=\"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\"\n        :class=\"\n          cloud.panelState.aiButtonActive.value\n            ? 'tpl-ai-btn--active'\n            : 'tpl-ai-btn--idle'\n        \"\n        @click.stop=\"cloud.panelState.toggleAiMenu\"\n      >\n        <Sparkles :size=\"16\" :stroke-width=\"2\" class=\"tpl-ai-btn-icon\" />\n        {{ cloudT.aiChat.button }}\n      </button>\n      <Transition\n        enter-active-class=\"tpl:transition-all tpl:ease-out\"\n        enter-from-class=\"tpl:scale-95 tpl:opacity-0\"\n        enter-to-class=\"tpl:scale-100 tpl:opacity-100\"\n        leave-active-class=\"tpl:transition-all tpl:duration-100 tpl:ease-in\"\n        leave-from-class=\"tpl:scale-100 tpl:opacity-100\"\n        leave-to-class=\"tpl:scale-95 tpl:opacity-0\"\n      >\n        <div\n          v-if=\"cloud.panelState.aiMenuOpen.value\"\n          class=\"tpl:absolute tpl:right-0 tpl:top-full tpl:z-50 tpl:mt-1 tpl:origin-top-right\"\n        >\n          <AiFeatureMenu\n            :active-feature=\"cloud.panelState.activeAiFeature.value\"\n            @select=\"cloud.panelState.handleAiFeatureSelect\"\n          />\n        </div>\n      </Transition>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAOA,IAAMqC,IAAkBR,QAChB,OAAO,gCACf,GACMS,IAAgBT,QAA2B,OAAO,8BAAsB,GAyBxE,EAAE,GAAGU,GAAQ,QAAQC,MAAgBR,EAAmB;mBAU5CS,EAAA,SAAI,UAApBzC,EAAA,GAAAC,EAoBWC,GAAA,EAAA,KAAA,EAAA,GAAA,CAhBDuC,EAAA,MAAM,aAAa,cAAc,UAAK,OAYtCnB,EAAA,IAAA,EAAA,KAbRtB,EAAA,GAAAC,EAWO,QAXPgC,GAWO9B,EALHC,EAAAoC,CAAA,CAAW,CAACpC,EAAAmC,CAAA,CAAM,CAAC,OAAO,eAAa;GAAoB,MAAAE,EAAA,MAAM,aAAa,cAAc;GAAsB,KAAAA,EAAA,MAAM,aAAa,cAAc;EAO/I,CAAA,CAAA,GAAA,CAAA,IAAAA,EAAA,MAAM,iBAAiBA,EAAA,MAAM,uBAAuB,SAD5DzC,EAAA,GAAAM,EAIEF,EAAAiC,CAAA,GAAA;;GAFC,eAAeI,EAAA,MAAM,cAAc,cAAc;GACjD,gBAAcA,EAAA,MAAM,UAAU,YAAY;EAO1B,GAAA,MAAA,GAAA,CAAA,iBAAA,cAAA,CAAA,KAAAnB,EAAA,IAAA,EAAA,CAAA,GAAA,EAAA,KAAAmB,EAAA,SAAI,WAAzBzC,EAAA,GAAAC,EA6CWC,GAAA,EAAA,KAAA,EAAA,GAAA,CA3CQuC,EAAA,MAAM,aAAa,mBAAmB,SAAiBA,EAAA,MAAM,aAAa,iBAAiB,SAD5GzC,EAAA,GAAAC,EA2CM,OAAA;;GAtCH,MAAe,MAAQ,EAAA,MAAM,WAAW,UAAU,QAAQyC;GAG3D,OAAM;EAENnC,GAAAA,CAAAA,EAcS,UAAA;GAbP,MAAK;GACL,eAAY;GACX,iBAAekC,EAAA,MAAM,WAAW,WAAW;GAC5C,OAAKjC,EAAA,CAAC,wNACaiC,EAAA,MAAM,WAAW,eAAe,QAAA,uBAAA,kBAAA,CAAA;GAKlD,SAAK,AAAAE,EAAA,OAAAlC,GAAO,GAAAmC,MAAAH,EAAA,MAAM,WAAW,gBAAjBA,EAAA,MAAM,WAAW,aAAY,GAAAG,CAAA,GAAA,CAAA,MAAA,CAAA;EAE1ClC,GAAAA,CAAAA,EAAiEN,EAAA2B,CAAA,GAAA;GAAtD,MAAM;GAAK,gBAAc;GAAG,OAAM;EAAoBpB,CAAAA,GAAAA,EAAA,MACjER,EAAGC,EAAAmC,CAAA,CAAM,CAAC,OAAO,MAAM,GAAA,CAAA,CAAA,GAAA,IAAAL,CAAA,GAEzBxB,EAiBaE,GAAA;GAhBX,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;GACf,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;;GAEf,SAAAC,QAQM,CAPE4B,EAAA,MAAM,WAAW,WAAW,SADpCzC,EAAA,GAAAC,EAQM,OARNkC,GAQM,CAJJzB,EAGEN,EAAAkC,CAAA,GAAA;IAFC,kBAAgBG,EAAA,MAAM,WAAW,gBAAgB;IACjD,UAAQA,EAAA,MAAM,WAAW"}
+{"version":3,"file":"CloudHeaderExtras-DqgOaWym.js","names":["_openBlock","_createElementBlock","_Fragment","_toDisplayString","_unref","_createCommentVNode","_createBlock","_createElementVNode","_normalizeClass","_withModifiers","_createVNode","_createTextVNode","_Transition","_withCtx","_sfc_main","withCtx","openBlock","defineComponent","unref","createVNode","normalizeClass","createElementBlock","createCommentVNode","withModifiers","createBlock","Transition","createBaseVNode","Fragment","toDisplayString","defineAsyncComponent","createTextVNode","Sparkles","useCloudI18nStrict","_hoisted_1","_hoisted_2","_hoisted_3","CloudHeaderExtras_default","CollaboratorBar","AiFeatureMenu","cloudT","cloudFormat","__props","el","_cache","args"],"sources":["../../../src/cloud/components/CloudHeaderExtras.vue","../../../src/cloud/components/CloudHeaderExtras.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { defineAsyncComponent } from \"vue\";\nimport { Sparkles } from \"@lucide/vue\";\n\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { CloudAttachment } from \"../runtime\";\n\nconst CollaboratorBar = defineAsyncComponent(\n  () => import(\"./CollaboratorBar.vue\"),\n);\nconst AiFeatureMenu = defineAsyncComponent(() => import(\"./AiFeatureMenu.vue\"));\n\n/**\n * The Cloud-only header controls, filled into `EditorHeader`'s `left-extras`\n * and `right-extras` slots.\n *\n * One component with a `part` prop rather than two: both regions share this\n * file's lazy chunk, so a Cloud session pays one round-trip for all of them and\n * an OSS session pays none.\n *\n * There is no `center` part. The header's centre track must hold a constant\n * width, so only the anchored columns take conditional controls — see\n * `EditorHeader.vue`'s centre comment.\n *\n * The plan-usage readout and the AI button live here rather than in the shared\n * header because they render **cloud-chunk** strings; OSS translators never see\n * them. Comments are deliberately not here: that feature is shared and\n * provider-backed, so its trigger and its strings belong to the shared header and\n * the OSS chunk.\n */\ndefineProps<{\n  part: \"left\" | \"right\";\n  cloud: CloudAttachment;\n}>();\n\nconst { t: cloudT, format: cloudFormat } = useCloudI18nStrict();\n</script>\n\n<template>\n  <!-- Left: the plan's template usage, then who else is in the template right\n       now. Presence sits with the template's identity rather than in the\n       header's centre track: that track's width must stay constant, and a\n       collaborator bar changes width every time somebody joins or leaves — which\n       used to slide the Preview button sideways under the cursor (#574). This\n       column packs from the left, so it grows rightward and moves nothing. -->\n  <template v-if=\"part === 'left'\">\n    <!-- A plan *limit*, not a templates concern, which is why it sits here and\n         its string stays in the cloud chunk. -->\n    <span\n      v-if=\"cloud.featureFlags.templateLimit.value !== null\"\n      data-testid=\"cloud-template-usage\"\n      class=\"tpl:text-xs tpl:opacity-60 tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{\n        cloudFormat(cloudT.header.templatesUsed, {\n          used: cloud.featureFlags.templateCount.value,\n          max: cloud.featureFlags.templateLimit.value,\n        })\n      }}\n    </span>\n    <CollaboratorBar\n      v-if=\"cloud.collaboration && cloud.isCollaborationEnabled.value\"\n      :collaborators=\"cloud.collaboration.collaborators.value\"\n      :is-connected=\"cloud.websocket.isConnected.value\"\n    />\n  </template>\n\n  <!-- Right: AI — after the shared header's Comments button and before the\n       test-email button, so the shared header is a superset of the OSS one rather\n       than a rearrangement. -->\n  <template v-else-if=\"part === 'right'\">\n    <div\n      v-if=\"\n        cloud.featureFlags.canUseAiGeneration.value &&\n        cloud.featureFlags.hasTemplateSaved.value\n      \"\n      :ref=\"\n        (el) => (cloud.panelState.aiMenuRef.value = el as HTMLElement | null)\n      \"\n      class=\"tpl:relative\"\n    >\n      <button\n        type=\"button\"\n        data-testid=\"ai-menu-trigger\"\n        :aria-expanded=\"cloud.panelState.aiMenuOpen.value\"\n        class=\"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\"\n        :class=\"\n          cloud.panelState.aiButtonActive.value\n            ? 'tpl-ai-btn--active'\n            : 'tpl-ai-btn--idle'\n        \"\n        @click.stop=\"cloud.panelState.toggleAiMenu\"\n      >\n        <Sparkles :size=\"16\" :stroke-width=\"2\" class=\"tpl-ai-btn-icon\" />\n        {{ cloudT.aiChat.button }}\n      </button>\n      <Transition\n        enter-active-class=\"tpl:transition-all tpl:ease-out\"\n        enter-from-class=\"tpl:scale-95 tpl:opacity-0\"\n        enter-to-class=\"tpl:scale-100 tpl:opacity-100\"\n        leave-active-class=\"tpl:transition-all tpl:duration-100 tpl:ease-in\"\n        leave-from-class=\"tpl:scale-100 tpl:opacity-100\"\n        leave-to-class=\"tpl:scale-95 tpl:opacity-0\"\n      >\n        <div\n          v-if=\"cloud.panelState.aiMenuOpen.value\"\n          class=\"tpl:absolute tpl:right-0 tpl:top-full tpl:z-50 tpl:mt-1 tpl:origin-top-right\"\n        >\n          <AiFeatureMenu\n            :active-feature=\"cloud.panelState.activeAiFeature.value\"\n            @select=\"cloud.panelState.handleAiFeatureSelect\"\n          />\n        </div>\n      </Transition>\n    </div>\n  </template>\n</template>\n","<script setup lang=\"ts\">\nimport { defineAsyncComponent } from \"vue\";\nimport { Sparkles } from \"@lucide/vue\";\n\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { CloudAttachment } from \"../runtime\";\n\nconst CollaboratorBar = defineAsyncComponent(\n  () => import(\"./CollaboratorBar.vue\"),\n);\nconst AiFeatureMenu = defineAsyncComponent(() => import(\"./AiFeatureMenu.vue\"));\n\n/**\n * The Cloud-only header controls, filled into `EditorHeader`'s `left-extras`\n * and `right-extras` slots.\n *\n * One component with a `part` prop rather than two: both regions share this\n * file's lazy chunk, so a Cloud session pays one round-trip for all of them and\n * an OSS session pays none.\n *\n * There is no `center` part. The header's centre track must hold a constant\n * width, so only the anchored columns take conditional controls — see\n * `EditorHeader.vue`'s centre comment.\n *\n * The plan-usage readout and the AI button live here rather than in the shared\n * header because they render **cloud-chunk** strings; OSS translators never see\n * them. Comments are deliberately not here: that feature is shared and\n * provider-backed, so its trigger and its strings belong to the shared header and\n * the OSS chunk.\n */\ndefineProps<{\n  part: \"left\" | \"right\";\n  cloud: CloudAttachment;\n}>();\n\nconst { t: cloudT, format: cloudFormat } = useCloudI18nStrict();\n</script>\n\n<template>\n  <!-- Left: the plan's template usage, then who else is in the template right\n       now. Presence sits with the template's identity rather than in the\n       header's centre track: that track's width must stay constant, and a\n       collaborator bar changes width every time somebody joins or leaves — which\n       used to slide the Preview button sideways under the cursor (#574). This\n       column packs from the left, so it grows rightward and moves nothing. -->\n  <template v-if=\"part === 'left'\">\n    <!-- A plan *limit*, not a templates concern, which is why it sits here and\n         its string stays in the cloud chunk. -->\n    <span\n      v-if=\"cloud.featureFlags.templateLimit.value !== null\"\n      data-testid=\"cloud-template-usage\"\n      class=\"tpl:text-xs tpl:opacity-60 tpl:text-[var(--tpl-text-muted)]\"\n    >\n      {{\n        cloudFormat(cloudT.header.templatesUsed, {\n          used: cloud.featureFlags.templateCount.value,\n          max: cloud.featureFlags.templateLimit.value,\n        })\n      }}\n    </span>\n    <CollaboratorBar\n      v-if=\"cloud.collaboration && cloud.isCollaborationEnabled.value\"\n      :collaborators=\"cloud.collaboration.collaborators.value\"\n      :is-connected=\"cloud.websocket.isConnected.value\"\n    />\n  </template>\n\n  <!-- Right: AI — after the shared header's Comments button and before the\n       test-email button, so the shared header is a superset of the OSS one rather\n       than a rearrangement. -->\n  <template v-else-if=\"part === 'right'\">\n    <div\n      v-if=\"\n        cloud.featureFlags.canUseAiGeneration.value &&\n        cloud.featureFlags.hasTemplateSaved.value\n      \"\n      :ref=\"\n        (el) => (cloud.panelState.aiMenuRef.value = el as HTMLElement | null)\n      \"\n      class=\"tpl:relative\"\n    >\n      <button\n        type=\"button\"\n        data-testid=\"ai-menu-trigger\"\n        :aria-expanded=\"cloud.panelState.aiMenuOpen.value\"\n        class=\"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\"\n        :class=\"\n          cloud.panelState.aiButtonActive.value\n            ? 'tpl-ai-btn--active'\n            : 'tpl-ai-btn--idle'\n        \"\n        @click.stop=\"cloud.panelState.toggleAiMenu\"\n      >\n        <Sparkles :size=\"16\" :stroke-width=\"2\" class=\"tpl-ai-btn-icon\" />\n        {{ cloudT.aiChat.button }}\n      </button>\n      <Transition\n        enter-active-class=\"tpl:transition-all tpl:ease-out\"\n        enter-from-class=\"tpl:scale-95 tpl:opacity-0\"\n        enter-to-class=\"tpl:scale-100 tpl:opacity-100\"\n        leave-active-class=\"tpl:transition-all tpl:duration-100 tpl:ease-in\"\n        leave-from-class=\"tpl:scale-100 tpl:opacity-100\"\n        leave-to-class=\"tpl:scale-95 tpl:opacity-0\"\n      >\n        <div\n          v-if=\"cloud.panelState.aiMenuOpen.value\"\n          class=\"tpl:absolute tpl:right-0 tpl:top-full tpl:z-50 tpl:mt-1 tpl:origin-top-right\"\n        >\n          <AiFeatureMenu\n            :active-feature=\"cloud.panelState.activeAiFeature.value\"\n            @select=\"cloud.panelState.handleAiFeatureSelect\"\n          />\n        </div>\n      </Transition>\n    </div>\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAOA,IAAMqC,IAAkBR,QAChB,OAAO,gCACf,GACMS,IAAgBT,QAA2B,OAAO,8BAAsB,GAyBxE,EAAE,GAAGU,GAAQ,QAAQC,MAAgBR,EAAmB;mBAU5CS,EAAA,SAAI,UAApBzC,EAAA,GAAAC,EAoBWC,GAAA,EAAA,KAAA,EAAA,GAAA,CAhBDuC,EAAA,MAAM,aAAa,cAAc,UAAK,OAYtCnB,EAAA,IAAA,EAAA,KAbRtB,EAAA,GAAAC,EAWO,QAXPgC,GAWO9B,EALHC,EAAAoC,CAAA,CAAW,CAACpC,EAAAmC,CAAA,CAAM,CAAC,OAAO,eAAa;GAAoB,MAAAE,EAAA,MAAM,aAAa,cAAc;GAAsB,KAAAA,EAAA,MAAM,aAAa,cAAc;EAO/I,CAAA,CAAA,GAAA,CAAA,IAAAA,EAAA,MAAM,iBAAiBA,EAAA,MAAM,uBAAuB,SAD5DzC,EAAA,GAAAM,EAIEF,EAAAiC,CAAA,GAAA;;GAFC,eAAeI,EAAA,MAAM,cAAc,cAAc;GACjD,gBAAcA,EAAA,MAAM,UAAU,YAAY;EAO1B,GAAA,MAAA,GAAA,CAAA,iBAAA,cAAA,CAAA,KAAAnB,EAAA,IAAA,EAAA,CAAA,GAAA,EAAA,KAAAmB,EAAA,SAAI,WAAzBzC,EAAA,GAAAC,EA6CWC,GAAA,EAAA,KAAA,EAAA,GAAA,CA3CQuC,EAAA,MAAM,aAAa,mBAAmB,SAAiBA,EAAA,MAAM,aAAa,iBAAiB,SAD5GzC,EAAA,GAAAC,EA2CM,OAAA;;GAtCH,MAAe,MAAQ,EAAA,MAAM,WAAW,UAAU,QAAQyC;GAG3D,OAAM;EAENnC,GAAAA,CAAAA,EAcS,UAAA;GAbP,MAAK;GACL,eAAY;GACX,iBAAekC,EAAA,MAAM,WAAW,WAAW;GAC5C,OAAKjC,EAAA,CAAC,wNACaiC,EAAA,MAAM,WAAW,eAAe,QAAA,uBAAA,kBAAA,CAAA;GAKlD,SAAK,AAAAE,EAAA,OAAAlC,GAAO,GAAAmC,MAAAH,EAAA,MAAM,WAAW,gBAAjBA,EAAA,MAAM,WAAW,aAAY,GAAAG,CAAA,GAAA,CAAA,MAAA,CAAA;EAE1ClC,GAAAA,CAAAA,EAAiEN,EAAA2B,CAAA,GAAA;GAAtD,MAAM;GAAK,gBAAc;GAAG,OAAM;EAAoBpB,CAAAA,GAAAA,EAAA,MACjER,EAAGC,EAAAmC,CAAA,CAAM,CAAC,OAAO,MAAM,GAAA,CAAA,CAAA,GAAA,IAAAL,CAAA,GAEzBxB,EAiBaE,GAAA;GAhBX,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;GACf,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;;GAEf,SAAAC,QAQM,CAPE4B,EAAA,MAAM,WAAW,WAAW,SADpCzC,EAAA,GAAAC,EAQM,OARNkC,GAQM,CAJJzB,EAGEN,EAAAkC,CAAA,GAAA;IAFC,kBAAgBG,EAAA,MAAM,WAAW,gBAAgB;IACjD,UAAQA,EAAA,MAAM,WAAW"}

package/dist/cdn/chunks/{CloudPanels-DpKck9Na.js → CloudPanels-INOiwkET.js}

@@ -3,7 +3,7 @@ import { t as g } from "./useI18n-CyO_Nmca.js";
 import { Nt as _, d as v } from "./icons-CQnjugjy.js";
 import { n as y } from "./useCloudI18n-CrjWbpbu.js";
 import { d as b, v as x, x as S } from "./styleConstants-C_YAPdQS.js";
-import { t as C } from "./TplModal-mLMmolQp.js";
+import { t as C } from "./TplModal-BbHRUc1Y.js";
 //#region src/cloud/components/CloudErrorOverlay.vue?vue&type=script&setup=true&lang.ts
 var w = {
 	key: 0,
@@ -213,4 +213,4 @@ var w = {
 //#endregion
 export { G as default };
 
-//# sourceMappingURL=CloudPanels-DpKck9Na.js.map
+//# sourceMappingURL=CloudPanels-INOiwkET.js.map