@templatical/editor 0.33.0 → 0.34.0

package/dist/cdn/chunks/{TemplateScoringPanel-CDC-JC6C.js → TemplateScoringPanel-QVOxc9TZ.js}

@@ -1,9 +1,9 @@
-import { B as e, E as t, F as n, H as r, N as i, Q as ee, R as a, S as o, at as s, b as c, ct as te, g as l, h as u, lt as d, m as f, n as p, p as m, u as h, ut as g, y as _ } from "./draggable-kbOhCgnk.js";
-import { K as v, R as ne, T as y, h as b } from "./keys-O8clwJ41.js";
+import { B as e, E as t, F as n, H as r, N as i, Q as ee, R as a, S as o, at as s, b as c, ct as l, g as u, h as d, lt as f, m as p, n as m, p as h, u as g, ut as _, y as v } from "./draggable-kbOhCgnk.js";
+import { B as te, E as ne, J as y, h as b } from "./keys-DQp8x7Nx.js";
 import { E as x, It as S, Mt as C, O as re, dt as ie, it as ae, k as w, n as oe, t as se, u as ce, wt as le, z as T } from "./icons-SP5Itd-A.js";
 import { t as ue } from "./LoadingTrack-Cm3TDKb3.js";
 import { t as E } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { n as D } from "./useCloudI18n-ZBEJvkf4.js";
+import { n as D } from "./useCloudI18n-MxgHWrV6.js";
 //#region src/cloud/utils/scoringStyles.ts
 function O(e) {
 	return e >= 80 ? "var(--tpl-success)" : e >= 60 ? "var(--tpl-warning)" : "var(--tpl-danger)";
@@ -21,7 +21,7 @@ function j(e) {
 //#region src/cloud/components/TemplateScoringPanel.vue?vue&type=script&setup=true&lang.ts
 var M = {
 	key: 0,
-	class: "tpl-scoring-panel tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-panel tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]"
+	class: "tpl-scoring-panel tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]"
 }, N = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, P = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]" }, F = { class: "tpl:flex tpl:items-center tpl:gap-1" }, I = ["title"], L = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, R = {
 	key: 0,
 	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
@@ -63,7 +63,7 @@ var M = {
 	props: { visible: { type: Boolean } },
 	emits: ["close"],
 	setup(o, { emit: E }) {
-		let W = o, G = E, { t: K } = D(), q = v(b, "TemplateScoringPanel"), J = v(ne, "TemplateScoringPanel"), Y = t(y, []), X = ee({
+		let W = o, G = E, { t: K } = D(), q = y(b, "TemplateScoringPanel"), J = y(te, "TemplateScoringPanel"), Y = t(ne, []), X = ee({
 			spam: !0,
 			readability: !0,
 			accessibility: !0,
@@ -101,7 +101,7 @@ var M = {
 		function $() {
 			return J.scoringResult.value ? Z.reduce((e, t) => e + (J.scoringResult.value?.categories[t]?.findings.length ?? 0), 0) : 0;
 		}
-		return (e, t) => (i(), f(p, {
+		return (e, t) => (i(), p(m, {
 			"enter-active-class": "tpl-scoring-slide-enter-active",
 			"enter-from-class": "tpl:translate-x-full",
 			"enter-to-class": "tpl:translate-x-0",
@@ -109,10 +109,10 @@ var M = {
 			"leave-from-class": "tpl:translate-x-0",
 			"leave-to-class": "tpl:translate-x-full"
 		}, {
-			default: r(() => [o.visible ? (i(), l("div", M, [m("div", N, [m("div", P, [c(s(w), {
+			default: r(() => [o.visible ? (i(), u("div", M, [h("div", N, [h("div", P, [c(s(w), {
 				size: 13,
 				"stroke-width": 2
-			}), m("span", null, g(s(K).scoring.title), 1)]), m("div", F, [s(J).scoringResult.value && !s(J).isScoring.value ? (i(), l("button", {
+			}), h("span", null, _(s(K).scoring.title), 1)]), h("div", F, [s(J).scoringResult.value && !s(J).isScoring.value ? (i(), u("button", {
 				key: 0,
 				class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
 				title: s(K).scoring.rescore,
@@ -120,112 +120,112 @@ var M = {
 			}, [c(s(T), {
 				size: 14,
 				"stroke-width": 2
-			})], 8, I)) : u("", !0), m("button", {
+			})], 8, I)) : d("", !0), h("button", {
 				class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
 				onClick: t[1] ||= (e) => G("close")
 			}, [c(s(oe), {
 				size: 14,
 				"stroke-width": 2
-			})])])]), m("div", L, [s(J).isScoring.value ? (i(), l("div", R, [m("p", z, g(s(K).scoring.scoring), 1), c(ue, { class: "tpl:w-3/4" })])) : s(J).error.value && !s(J).scoringResult.value ? (i(), l("div", B, [
+			})])])]), h("div", L, [s(J).isScoring.value ? (i(), u("div", R, [h("p", z, _(s(K).scoring.scoring), 1), c(ue, { class: "tpl:w-3/4" })])) : s(J).error.value && !s(J).scoringResult.value ? (i(), u("div", B, [
 				c(s(C), {
 					size: 32,
 					"stroke-width": 1.5,
 					class: "tpl:text-[var(--tpl-danger)]"
 				}),
-				m("p", V, g(s(K).scoring.error), 1),
-				m("button", {
+				h("p", V, _(s(K).scoring.error), 1),
+				h("button", {
 					class: "tpl:mt-2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text-muted)]",
 					onClick: t[2] ||= (e) => Q()
 				}, [c(s(T), {
 					size: 12,
 					"stroke-width": 2
-				}), _(" " + g(s(K).scoring.rescore), 1)])
-			])) : s(J).scoringResult.value ? (i(), l("div", H, [
-				m("div", {
+				}), v(" " + _(s(K).scoring.rescore), 1)])
+			])) : s(J).scoringResult.value ? (i(), u("div", H, [
+				h("div", {
 					class: "tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:p-5",
-					style: d({ backgroundColor: s(k)(s(J).scoringResult.value.score) })
+					style: f({ backgroundColor: s(k)(s(J).scoringResult.value.score) })
 				}, [
-					m("span", {
+					h("span", {
 						class: "tpl:text-4xl tpl:font-bold tpl:tabular-nums",
-						style: d({ color: s(O)(s(J).scoringResult.value.score) })
-					}, g(s(J).scoringResult.value.score), 5),
-					m("span", U, g(s(K).scoring.overallScore), 1),
-					$() > 0 ? (i(), l("span", de, g($()) + " " + g(s(K).scoring.findings), 1)) : u("", !0)
+						style: f({ color: s(O)(s(J).scoringResult.value.score) })
+					}, _(s(J).scoringResult.value.score), 5),
+					h("span", U, _(s(K).scoring.overallScore), 1),
+					$() > 0 ? (i(), u("span", de, _($()) + " " + _(s(K).scoring.findings), 1)) : d("", !0)
 				], 4),
-				s(J).fixError.value ? (i(), l("div", fe, [c(s(C), {
+				s(J).fixError.value ? (i(), u("div", fe, [c(s(C), {
 					size: 14,
 					"stroke-width": 2,
 					class: "tpl:mt-0.5 tpl:shrink-0"
-				}), m("span", null, g(s(K).scoring.fixError), 1)])) : u("", !0),
-				(i(), l(h, null, n(Z, (e) => m("div", {
+				}), h("span", null, _(s(K).scoring.fixError), 1)])) : d("", !0),
+				(i(), u(g, null, n(Z, (e) => h("div", {
 					key: e,
 					class: "tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)]"
-				}, [m("button", {
+				}, [h("button", {
 					class: "tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-2.5 tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:bg-[var(--tpl-bg)]",
 					onClick: (t) => ke(e)
 				}, [
-					(i(), f(a(Ae[e]), {
+					(i(), p(a(Ae[e]), {
 						size: 14,
 						"stroke-width": 2,
-						style: d({ color: s(O)(s(J).scoringResult.value.categories[e].score) })
+						style: f({ color: s(O)(s(J).scoringResult.value.categories[e].score) })
 					}, null, 8, ["style"])),
-					m("span", me, g(s(K).scoring.categories[e]), 1),
-					m("span", {
+					h("span", me, _(s(K).scoring.categories[e]), 1),
+					h("span", {
 						class: "tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-semibold tpl:tabular-nums",
-						style: d({
+						style: f({
 							color: s(O)(s(J).scoringResult.value.categories[e].score),
 							backgroundColor: s(k)(s(J).scoringResult.value.categories[e].score)
 						})
-					}, g(s(J).scoringResult.value.categories[e].score), 5),
-					s(J).scoringResult.value.categories[e].findings.length > 0 ? (i(), l("span", he, g(s(J).scoringResult.value.categories[e].findings.length), 1)) : u("", !0),
+					}, _(s(J).scoringResult.value.categories[e].score), 5),
+					s(J).scoringResult.value.categories[e].findings.length > 0 ? (i(), u("span", he, _(s(J).scoringResult.value.categories[e].findings.length), 1)) : d("", !0),
 					c(s(S), {
 						size: 12,
 						"stroke-width": 2,
-						class: te(["tpl:transition-transform tpl:duration-200 tpl:text-[var(--tpl-text-dim)]", X.value[e] ? "tpl:rotate-0" : "tpl:-rotate-90"])
+						class: l(["tpl:transition-transform tpl:duration-200 tpl:text-[var(--tpl-text-dim)]", X.value[e] ? "tpl:rotate-0" : "tpl:-rotate-90"])
 					}, null, 8, ["class"])
-				], 8, pe), X.value[e] ? (i(), l("div", ge, [s(J).scoringResult.value.categories[e].findings.length === 0 ? (i(), l("div", _e, g(s(K).scoring.noFindings), 1)) : u("", !0), (i(!0), l(h, null, n(s(J).scoringResult.value.categories[e].findings, (e) => (i(), l("div", {
+				], 8, pe), X.value[e] ? (i(), u("div", ge, [s(J).scoringResult.value.categories[e].findings.length === 0 ? (i(), u("div", _e, _(s(K).scoring.noFindings), 1)) : d("", !0), (i(!0), u(g, null, n(s(J).scoringResult.value.categories[e].findings, (e) => (i(), u("div", {
 					key: e.id,
 					class: "tpl:border-t tpl:px-3 tpl:py-2.5 tpl:first:border-t-0 tpl:border-[var(--tpl-border-light)]"
-				}, [m("div", ve, [(i(), f(a(s(e.severity === "high" ? C : e.severity === "medium" ? ce : ie)), {
+				}, [h("div", ve, [(i(), p(a(s(e.severity === "high" ? C : e.severity === "medium" ? ce : ie)), {
 					size: 13,
 					"stroke-width": 2,
 					class: "tpl:mt-0.5 tpl:shrink-0",
-					style: d({ color: s(A)(e.severity) })
-				}, null, 8, ["style"])), m("div", ye, [
-					m("div", be, [m("span", {
+					style: f({ color: s(A)(e.severity) })
+				}, null, 8, ["style"])), h("div", ye, [
+					h("div", be, [h("span", {
 						class: "tpl:mt-0.5 tpl:shrink-0 tpl:rounded tpl:px-1 tpl:py-px tpl:text-[10px] tpl:font-medium tpl:leading-tight",
-						style: d({
+						style: f({
 							color: s(A)(e.severity),
 							backgroundColor: s(j)(e.severity)
 						})
-					}, g(s(K).scoring.severity[e.severity]), 5), m("span", xe, g(e.message), 1)]),
-					e.suggestion ? (i(), l("p", Se, g(e.suggestion), 1)) : u("", !0),
-					e.blockId ? (i(), l("div", Ce, [m("button", {
+					}, _(s(K).scoring.severity[e.severity]), 5), h("span", xe, _(e.message), 1)]),
+					e.suggestion ? (i(), u("p", Se, _(e.suggestion), 1)) : d("", !0),
+					e.blockId ? (i(), u("div", Ce, [h("button", {
 						class: "tpl-scoring-fix-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded tpl:border tpl:px-3 tpl:py-1.5 tpl:text-[11px] tpl:font-medium tpl:transition-all tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)]",
 						style: { "background-color": "transparent" },
 						disabled: s(J).fixingFindingId.value !== null,
 						onClick: (t) => je(e)
-					}, [s(J).fixingFindingId.value === e.id ? (i(), f(s(ae), {
+					}, [s(J).fixingFindingId.value === e.id ? (i(), p(s(ae), {
 						key: 0,
 						class: "tpl-spinner",
 						size: 11,
 						"stroke-width": 2
-					})) : (i(), f(s(x), {
+					})) : (i(), p(s(x), {
 						key: 1,
 						size: 11,
 						"stroke-width": 2
-					})), _(" " + g(s(J).fixingFindingId.value === e.id ? s(K).scoring.fixing : s(K).scoring.fix), 1)], 8, we), s(J).fixError.value ? (i(), l("p", Te, g(s(J).fixError.value), 1)) : u("", !0)])) : u("", !0)
-				])])]))), 128))])) : u("", !0)])), 64))
-			])) : (i(), l("div", Ee, [c(s(w), {
+					})), v(" " + _(s(J).fixingFindingId.value === e.id ? s(K).scoring.fixing : s(K).scoring.fix), 1)], 8, we), s(J).fixError.value ? (i(), u("p", Te, _(s(J).fixError.value), 1)) : d("", !0)])) : d("", !0)
+				])])]))), 128))])) : d("", !0)])), 64))
+			])) : (i(), u("div", Ee, [c(s(w), {
 				size: 32,
 				"stroke-width": 1.5,
 				class: "tpl:text-[var(--tpl-text-dim)]"
-			}), m("p", De, g(s(K).scoring.emptyState), 1)])), m("p", Oe, g(s(K).aiMenu.disclaimer), 1)])])) : u("", !0)]),
+			}), h("p", De, _(s(K).scoring.emptyState), 1)])), h("p", Oe, _(s(K).aiMenu.disclaimer), 1)])])) : d("", !0)]),
 			_: 1
 		}));
 	}
-}), [["__scopeId", "data-v-7da30b57"]]);
+}), [["__scopeId", "data-v-1b4ea13b"]]);
 //#endregion
 export { W as default };
 
-//# sourceMappingURL=TemplateScoringPanel-CDC-JC6C.js.map
+//# sourceMappingURL=TemplateScoringPanel-QVOxc9TZ.js.map

package/dist/cdn/chunks/TemplateScoringPanel-QVOxc9TZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateScoringPanel-QVOxc9TZ.js","names":[],"sources":["../../../src/cloud/utils/scoringStyles.ts","../../../src/cloud/components/TemplateScoringPanel.vue","../../../src/cloud/components/TemplateScoringPanel.vue"],"sourcesContent":["export type ScoringSeverity = \"high\" | \"medium\" | \"low\" | string;\n\nexport function scoreColor(score: number): string {\n  if (score >= 80) return \"var(--tpl-success)\";\n  if (score >= 60) return \"var(--tpl-warning)\";\n  return \"var(--tpl-danger)\";\n}\n\nexport function scoreBgColor(score: number): string {\n  if (score >= 80) return \"var(--tpl-success-light)\";\n  if (score >= 60) return \"var(--tpl-warning-light)\";\n  return \"var(--tpl-danger-light)\";\n}\n\nexport function severityColor(severity: ScoringSeverity): string {\n  if (severity === \"high\") return \"var(--tpl-danger)\";\n  if (severity === \"medium\") return \"var(--tpl-warning)\";\n  return \"var(--tpl-text-muted)\";\n}\n\nexport function severityBgColor(severity: ScoringSeverity): string {\n  if (severity === \"high\") return \"var(--tpl-danger-light)\";\n  if (severity === \"medium\") return \"var(--tpl-warning-light)\";\n  return \"var(--tpl-bg-hover)\";\n}\n","<script setup lang=\"ts\">\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport {\n  EDITOR_KEY,\n  SCORING_KEY,\n  MERGE_TAGS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport {\n  scoreColor,\n  scoreBgColor,\n  severityColor,\n  severityBgColor,\n} from \"../utils/scoringStyles\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { ScoringCategory, ScoringFinding } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  TriangleAlert,\n  ChevronDown,\n  Eye,\n  Info,\n  LoaderCircle,\n  RefreshCw,\n  ShieldCheck,\n  ShieldX,\n  Sparkles,\n  X,\n  Zap,\n} from \"@lucide/vue\";\nimport { inject, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"TemplateScoringPanel\");\nconst scoring = requireInject(SCORING_KEY, \"TemplateScoringPanel\");\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\n\nconst expandedCategories = ref<Record<string, boolean>>({\n  spam: true,\n  readability: true,\n  accessibility: true,\n  bestPractices: true,\n});\n\nfunction toggleCategory(category: string): void {\n  expandedCategories.value[category] = !expandedCategories.value[category];\n}\n\nconst categoryOrder: ScoringCategory[] = [\n  \"spam\",\n  \"readability\",\n  \"accessibility\",\n  \"bestPractices\",\n];\n\nconst categoryIcons: Record<ScoringCategory, typeof ShieldCheck> = {\n  spam: ShieldX,\n  readability: Eye,\n  accessibility: Sparkles,\n  bestPractices: Zap,\n};\n\nfunction triggerScore(): void {\n  scoring.score(editor.content.value, mergeTags);\n}\n\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (isVisible && !scoring.scoringResult.value && !scoring.isScoring.value) {\n      triggerScore();\n    }\n  },\n);\n\nasync function handleFix(finding: ScoringFinding): Promise<void> {\n  if (!finding.blockId) {\n    return;\n  }\n\n  // Get the block content from the editor\n  const block = editor.content.value.blocks.find(\n    (b) => b.id === finding.blockId,\n  );\n  if (!block) {\n    return;\n  }\n\n  // Extract HTML content from the block (text blocks have content property)\n  const blockContent = (block as unknown as Record<string, unknown>).content as\n    string | undefined;\n  if (!blockContent) {\n    return;\n  }\n\n  const fixedContent = await scoring.fixFinding(\n    blockContent,\n    finding,\n    mergeTags,\n  );\n\n  if (fixedContent) {\n    editor.updateBlock(finding.blockId, { content: fixedContent });\n    scoring.removeFinding(finding.category, finding.id);\n  }\n}\n\nfunction totalFindings(): number {\n  if (!scoring.scoringResult.value) {\n    return 0;\n  }\n  return categoryOrder.reduce((sum, cat) => {\n    return (\n      sum + (scoring.scoringResult.value?.categories[cat]?.findings.length ?? 0)\n    );\n  }, 0);\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-scoring-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-scoring-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-scoring-panel tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <ShieldCheck :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.scoring.title }}</span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"scoring.scoringResult.value && !scoring.isScoring.value\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            :title=\"cloudT.scoring.rescore\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"14\" :stroke-width=\"2\" />\n          </button>\n          <button\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"14\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"scoring.isScoring.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n            {{ cloudT.scoring.scoring }}\n          </p>\n          <LoadingTrack class=\"tpl:w-3/4\" />\n        </div>\n\n        <!-- Error state -->\n        <div\n          v-else-if=\"scoring.error.value && !scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <CircleAlert\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-danger)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.error }}\n          </p>\n          <button\n            class=\"tpl:mt-2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"12\" :stroke-width=\"2\" />\n            {{ cloudT.scoring.rescore }}\n          </button>\n        </div>\n\n        <!-- Results -->\n        <div\n          v-else-if=\"scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-4\"\n        >\n          <!-- Overall score -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:p-5\"\n            :style=\"{\n              backgroundColor: scoreBgColor(scoring.scoringResult.value.score),\n            }\"\n          >\n            <span\n              class=\"tpl:text-4xl tpl:font-bold tpl:tabular-nums\"\n              :style=\"{\n                color: scoreColor(scoring.scoringResult.value.score),\n              }\"\n            >\n              {{ scoring.scoringResult.value.score }}\n            </span>\n            <span\n              class=\"tpl:text-xs tpl:font-medium tpl:uppercase tpl:tracking-wider tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.scoring.overallScore }}\n            </span>\n            <span\n              v-if=\"totalFindings() > 0\"\n              class=\"tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ totalFindings() }}\n              {{ cloudT.scoring.findings }}\n            </span>\n          </div>\n\n          <!-- Fix error -->\n          <div\n            v-if=\"scoring.fixError.value\"\n            class=\"tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n          >\n            <CircleAlert\n              :size=\"14\"\n              :stroke-width=\"2\"\n              class=\"tpl:mt-0.5 tpl:shrink-0\"\n            />\n            <span>{{ cloudT.scoring.fixError }}</span>\n          </div>\n\n          <!-- Category cards -->\n          <div\n            v-for=\"category in categoryOrder\"\n            :key=\"category\"\n            class=\"tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)]\"\n          >\n            <!-- Category header -->\n            <button\n              class=\"tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-2.5 tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:bg-[var(--tpl-bg)]\"\n              @click=\"toggleCategory(category)\"\n            >\n              <component\n                :is=\"categoryIcons[category]\"\n                :size=\"14\"\n                :stroke-width=\"2\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              />\n              <span\n                class=\"tpl:flex-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n              >\n                {{ cloudT.scoring.categories[category] }}\n              </span>\n              <span\n                class=\"tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-semibold tpl:tabular-nums\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                  backgroundColor: scoreBgColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              >\n                {{ scoring.scoringResult.value.categories[category].score }}\n              </span>\n              <span\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length > 0\n                \"\n                class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  scoring.scoringResult.value.categories[category].findings\n                    .length\n                }}\n              </span>\n              <ChevronDown\n                :size=\"12\"\n                :stroke-width=\"2\"\n                class=\"tpl:transition-transform tpl:duration-200 tpl:text-[var(--tpl-text-dim)]\"\n                :class=\"\n                  expandedCategories[category]\n                    ? 'tpl:rotate-0'\n                    : 'tpl:-rotate-90'\n                \"\n              />\n            </button>\n\n            <!-- Findings list -->\n            <div\n              v-if=\"expandedCategories[category]\"\n              class=\"tpl:border-t tpl:border-[var(--tpl-border)]\"\n            >\n              <div\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length === 0\n                \"\n                class=\"tpl:px-3 tpl:py-3 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ cloudT.scoring.noFindings }}\n              </div>\n              <div\n                v-for=\"finding in scoring.scoringResult.value.categories[\n                  category\n                ].findings\"\n                :key=\"finding.id\"\n                class=\"tpl:border-t tpl:px-3 tpl:py-2.5 tpl:first:border-t-0 tpl:border-[var(--tpl-border-light)]\"\n              >\n                <div class=\"tpl:flex tpl:items-start tpl:gap-2\">\n                  <!-- Severity icon -->\n                  <component\n                    :is=\"\n                      finding.severity === 'high'\n                        ? CircleAlert\n                        : finding.severity === 'medium'\n                          ? TriangleAlert\n                          : Info\n                    \"\n                    :size=\"13\"\n                    :stroke-width=\"2\"\n                    class=\"tpl:mt-0.5 tpl:shrink-0\"\n                    :style=\"{\n                      color: severityColor(finding.severity),\n                    }\"\n                  />\n                  <div class=\"tpl:flex-1 tpl:min-w-0\">\n                    <!-- Severity badge + message -->\n                    <div class=\"tpl:flex tpl:items-start tpl:gap-1.5\">\n                      <span\n                        class=\"tpl:mt-0.5 tpl:shrink-0 tpl:rounded tpl:px-1 tpl:py-px tpl:text-[10px] tpl:font-medium tpl:leading-tight\"\n                        :style=\"{\n                          color: severityColor(finding.severity),\n                          backgroundColor: severityBgColor(finding.severity),\n                        }\"\n                      >\n                        {{ cloudT.scoring.severity[finding.severity] }}\n                      </span>\n                      <span\n                        class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\"\n                      >\n                        {{ finding.message }}\n                      </span>\n                    </div>\n                    <!-- Suggestion -->\n                    <p\n                      v-if=\"finding.suggestion\"\n                      class=\"tpl:mt-1 tpl:text-[11px] tpl:leading-snug tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      {{ finding.suggestion }}\n                    </p>\n                    <!-- Fix button -->\n                    <div\n                      v-if=\"finding.blockId\"\n                      class=\"tpl:mt-2 tpl:flex tpl:justify-center\"\n                    >\n                      <button\n                        class=\"tpl-scoring-fix-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded tpl:border tpl:px-3 tpl:py-1.5 tpl:text-[11px] tpl:font-medium tpl:transition-all tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)]\"\n                        style=\"background-color: transparent\"\n                        :disabled=\"scoring.fixingFindingId.value !== null\"\n                        @click=\"handleFix(finding)\"\n                      >\n                        <LoaderCircle\n                          v-if=\"scoring.fixingFindingId.value === finding.id\"\n                          class=\"tpl-spinner\"\n                          :size=\"11\"\n                          :stroke-width=\"2\"\n                        />\n                        <Sparkles v-else :size=\"11\" :stroke-width=\"2\" />\n                        {{\n                          scoring.fixingFindingId.value === finding.id\n                            ? cloudT.scoring.fixing\n                            : cloudT.scoring.fix\n                        }}\n                      </button>\n                      <p\n                        v-if=\"scoring.fixError.value\"\n                        class=\"tpl:mt-1.5 tpl:text-[11px] tpl:text-[var(--tpl-danger)]\"\n                      >\n                        {{ scoring.fixError.value }}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Empty state (no result, no loading, no error) -->\n        <div\n          v-else\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <ShieldCheck\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-text-dim)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.emptyState }}\n          </p>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-4 tpl:pb-2 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudT.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-scoring-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-fix-btn:not(:disabled):hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport {\n  EDITOR_KEY,\n  SCORING_KEY,\n  MERGE_TAGS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport {\n  scoreColor,\n  scoreBgColor,\n  severityColor,\n  severityBgColor,\n} from \"../utils/scoringStyles\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { ScoringCategory, ScoringFinding } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  TriangleAlert,\n  ChevronDown,\n  Eye,\n  Info,\n  LoaderCircle,\n  RefreshCw,\n  ShieldCheck,\n  ShieldX,\n  Sparkles,\n  X,\n  Zap,\n} from \"@lucide/vue\";\nimport { inject, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\nconst editor = requireInject(EDITOR_KEY, \"TemplateScoringPanel\");\nconst scoring = requireInject(SCORING_KEY, \"TemplateScoringPanel\");\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\n\nconst expandedCategories = ref<Record<string, boolean>>({\n  spam: true,\n  readability: true,\n  accessibility: true,\n  bestPractices: true,\n});\n\nfunction toggleCategory(category: string): void {\n  expandedCategories.value[category] = !expandedCategories.value[category];\n}\n\nconst categoryOrder: ScoringCategory[] = [\n  \"spam\",\n  \"readability\",\n  \"accessibility\",\n  \"bestPractices\",\n];\n\nconst categoryIcons: Record<ScoringCategory, typeof ShieldCheck> = {\n  spam: ShieldX,\n  readability: Eye,\n  accessibility: Sparkles,\n  bestPractices: Zap,\n};\n\nfunction triggerScore(): void {\n  scoring.score(editor.content.value, mergeTags);\n}\n\nwatch(\n  () => props.visible,\n  (isVisible) => {\n    if (isVisible && !scoring.scoringResult.value && !scoring.isScoring.value) {\n      triggerScore();\n    }\n  },\n);\n\nasync function handleFix(finding: ScoringFinding): Promise<void> {\n  if (!finding.blockId) {\n    return;\n  }\n\n  // Get the block content from the editor\n  const block = editor.content.value.blocks.find(\n    (b) => b.id === finding.blockId,\n  );\n  if (!block) {\n    return;\n  }\n\n  // Extract HTML content from the block (text blocks have content property)\n  const blockContent = (block as unknown as Record<string, unknown>).content as\n    string | undefined;\n  if (!blockContent) {\n    return;\n  }\n\n  const fixedContent = await scoring.fixFinding(\n    blockContent,\n    finding,\n    mergeTags,\n  );\n\n  if (fixedContent) {\n    editor.updateBlock(finding.blockId, { content: fixedContent });\n    scoring.removeFinding(finding.category, finding.id);\n  }\n}\n\nfunction totalFindings(): number {\n  if (!scoring.scoringResult.value) {\n    return 0;\n  }\n  return categoryOrder.reduce((sum, cat) => {\n    return (\n      sum + (scoring.scoringResult.value?.categories[cat]?.findings.length ?? 0)\n    );\n  }, 0);\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-scoring-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-scoring-slide-leave-active\"\n    leave-from-class=\"tpl:translate-x-0\"\n    leave-to-class=\"tpl:translate-x-full\"\n  >\n    <div\n      v-if=\"visible\"\n      class=\"tpl-scoring-panel tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]\"\n    >\n      <!-- Header -->\n      <div\n        class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3\"\n      >\n        <div\n          class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]\"\n        >\n          <ShieldCheck :size=\"13\" :stroke-width=\"2\" />\n          <span>{{ cloudT.scoring.title }}</span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"scoring.scoringResult.value && !scoring.isScoring.value\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            :title=\"cloudT.scoring.rescore\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"14\" :stroke-width=\"2\" />\n          </button>\n          <button\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"emit('close')\"\n          >\n            <X :size=\"14\" :stroke-width=\"2\" />\n          </button>\n        </div>\n      </div>\n\n      <!-- Content -->\n      <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n        <!-- Loading state -->\n        <div\n          v-if=\"scoring.isScoring.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n            {{ cloudT.scoring.scoring }}\n          </p>\n          <LoadingTrack class=\"tpl:w-3/4\" />\n        </div>\n\n        <!-- Error state -->\n        <div\n          v-else-if=\"scoring.error.value && !scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <CircleAlert\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-danger)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.error }}\n          </p>\n          <button\n            class=\"tpl:mt-2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text-muted)]\"\n            @click=\"triggerScore()\"\n          >\n            <RefreshCw :size=\"12\" :stroke-width=\"2\" />\n            {{ cloudT.scoring.rescore }}\n          </button>\n        </div>\n\n        <!-- Results -->\n        <div\n          v-else-if=\"scoring.scoringResult.value\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-4\"\n        >\n          <!-- Overall score -->\n          <div\n            class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:p-5\"\n            :style=\"{\n              backgroundColor: scoreBgColor(scoring.scoringResult.value.score),\n            }\"\n          >\n            <span\n              class=\"tpl:text-4xl tpl:font-bold tpl:tabular-nums\"\n              :style=\"{\n                color: scoreColor(scoring.scoringResult.value.score),\n              }\"\n            >\n              {{ scoring.scoringResult.value.score }}\n            </span>\n            <span\n              class=\"tpl:text-xs tpl:font-medium tpl:uppercase tpl:tracking-wider tpl:text-[var(--tpl-text-muted)]\"\n            >\n              {{ cloudT.scoring.overallScore }}\n            </span>\n            <span\n              v-if=\"totalFindings() > 0\"\n              class=\"tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ totalFindings() }}\n              {{ cloudT.scoring.findings }}\n            </span>\n          </div>\n\n          <!-- Fix error -->\n          <div\n            v-if=\"scoring.fixError.value\"\n            class=\"tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]\"\n          >\n            <CircleAlert\n              :size=\"14\"\n              :stroke-width=\"2\"\n              class=\"tpl:mt-0.5 tpl:shrink-0\"\n            />\n            <span>{{ cloudT.scoring.fixError }}</span>\n          </div>\n\n          <!-- Category cards -->\n          <div\n            v-for=\"category in categoryOrder\"\n            :key=\"category\"\n            class=\"tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)]\"\n          >\n            <!-- Category header -->\n            <button\n              class=\"tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:gap-2.5 tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:bg-[var(--tpl-bg)]\"\n              @click=\"toggleCategory(category)\"\n            >\n              <component\n                :is=\"categoryIcons[category]\"\n                :size=\"14\"\n                :stroke-width=\"2\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              />\n              <span\n                class=\"tpl:flex-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n              >\n                {{ cloudT.scoring.categories[category] }}\n              </span>\n              <span\n                class=\"tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-semibold tpl:tabular-nums\"\n                :style=\"{\n                  color: scoreColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                  backgroundColor: scoreBgColor(\n                    scoring.scoringResult.value.categories[category].score,\n                  ),\n                }\"\n              >\n                {{ scoring.scoringResult.value.categories[category].score }}\n              </span>\n              <span\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length > 0\n                \"\n                class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{\n                  scoring.scoringResult.value.categories[category].findings\n                    .length\n                }}\n              </span>\n              <ChevronDown\n                :size=\"12\"\n                :stroke-width=\"2\"\n                class=\"tpl:transition-transform tpl:duration-200 tpl:text-[var(--tpl-text-dim)]\"\n                :class=\"\n                  expandedCategories[category]\n                    ? 'tpl:rotate-0'\n                    : 'tpl:-rotate-90'\n                \"\n              />\n            </button>\n\n            <!-- Findings list -->\n            <div\n              v-if=\"expandedCategories[category]\"\n              class=\"tpl:border-t tpl:border-[var(--tpl-border)]\"\n            >\n              <div\n                v-if=\"\n                  scoring.scoringResult.value.categories[category].findings\n                    .length === 0\n                \"\n                class=\"tpl:px-3 tpl:py-3 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n              >\n                {{ cloudT.scoring.noFindings }}\n              </div>\n              <div\n                v-for=\"finding in scoring.scoringResult.value.categories[\n                  category\n                ].findings\"\n                :key=\"finding.id\"\n                class=\"tpl:border-t tpl:px-3 tpl:py-2.5 tpl:first:border-t-0 tpl:border-[var(--tpl-border-light)]\"\n              >\n                <div class=\"tpl:flex tpl:items-start tpl:gap-2\">\n                  <!-- Severity icon -->\n                  <component\n                    :is=\"\n                      finding.severity === 'high'\n                        ? CircleAlert\n                        : finding.severity === 'medium'\n                          ? TriangleAlert\n                          : Info\n                    \"\n                    :size=\"13\"\n                    :stroke-width=\"2\"\n                    class=\"tpl:mt-0.5 tpl:shrink-0\"\n                    :style=\"{\n                      color: severityColor(finding.severity),\n                    }\"\n                  />\n                  <div class=\"tpl:flex-1 tpl:min-w-0\">\n                    <!-- Severity badge + message -->\n                    <div class=\"tpl:flex tpl:items-start tpl:gap-1.5\">\n                      <span\n                        class=\"tpl:mt-0.5 tpl:shrink-0 tpl:rounded tpl:px-1 tpl:py-px tpl:text-[10px] tpl:font-medium tpl:leading-tight\"\n                        :style=\"{\n                          color: severityColor(finding.severity),\n                          backgroundColor: severityBgColor(finding.severity),\n                        }\"\n                      >\n                        {{ cloudT.scoring.severity[finding.severity] }}\n                      </span>\n                      <span\n                        class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]\"\n                      >\n                        {{ finding.message }}\n                      </span>\n                    </div>\n                    <!-- Suggestion -->\n                    <p\n                      v-if=\"finding.suggestion\"\n                      class=\"tpl:mt-1 tpl:text-[11px] tpl:leading-snug tpl:text-[var(--tpl-text-dim)]\"\n                    >\n                      {{ finding.suggestion }}\n                    </p>\n                    <!-- Fix button -->\n                    <div\n                      v-if=\"finding.blockId\"\n                      class=\"tpl:mt-2 tpl:flex tpl:justify-center\"\n                    >\n                      <button\n                        class=\"tpl-scoring-fix-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded tpl:border tpl:px-3 tpl:py-1.5 tpl:text-[11px] tpl:font-medium tpl:transition-all tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)]\"\n                        style=\"background-color: transparent\"\n                        :disabled=\"scoring.fixingFindingId.value !== null\"\n                        @click=\"handleFix(finding)\"\n                      >\n                        <LoaderCircle\n                          v-if=\"scoring.fixingFindingId.value === finding.id\"\n                          class=\"tpl-spinner\"\n                          :size=\"11\"\n                          :stroke-width=\"2\"\n                        />\n                        <Sparkles v-else :size=\"11\" :stroke-width=\"2\" />\n                        {{\n                          scoring.fixingFindingId.value === finding.id\n                            ? cloudT.scoring.fixing\n                            : cloudT.scoring.fix\n                        }}\n                      </button>\n                      <p\n                        v-if=\"scoring.fixError.value\"\n                        class=\"tpl:mt-1.5 tpl:text-[11px] tpl:text-[var(--tpl-danger)]\"\n                      >\n                        {{ scoring.fixError.value }}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Empty state (no result, no loading, no error) -->\n        <div\n          v-else\n          class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n        >\n          <ShieldCheck\n            :size=\"32\"\n            :stroke-width=\"1.5\"\n            class=\"tpl:text-[var(--tpl-text-dim)]\"\n          />\n          <p\n            class=\"tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ cloudT.scoring.emptyState }}\n          </p>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-4 tpl:pb-2 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudT.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-scoring-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-scoring-fix-btn:not(:disabled):hover {\n  border-color: var(--tpl-primary) !important;\n  background-color: var(--tpl-primary-light) !important;\n}\n</style>\n"],"mappings":"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"}

package/dist/cdn/chunks/{TestEmailModal-B2LcU11Y.js → TestEmailModal-_CZvaO58.js}

@@ -1,13 +1,13 @@
 import { B as e, E as t, F as n, H as r, N as i, Q as a, S as o, U as s, a as ee, at as c, b as l, ct as u, f as d, g as f, h as p, m, o as te, p as h, u as g, ut as _, y as v } from "./draggable-kbOhCgnk.js";
 import { u as ne } from "./src-CLoCCDfs.js";
-import { V as y } from "./useEditorCore-CZxGbZmY.js";
-import { I as re, O as ie, T as ae, h as oe } from "./keys-O8clwJ41.js";
-import { t as se } from "./useI18n-DCbvHv6W.js";
+import { V as y } from "./useEditorCore-ehUSEsbw.js";
+import { A as re, E as ie, R as ae, h as oe } from "./keys-DQp8x7Nx.js";
+import { t as se } from "./useI18n-Ct1VIFcf.js";
 import { Lt as ce, it as le } from "./icons-SP5Itd-A.js";
 import { v as ue } from "./styleConstants-C_YAPdQS.js";
-import { n as de, t as fe } from "./MergeTagModeToggle-Bg8eO5nc.js";
-import { t as pe } from "./TplModal-CxQDl-tN.js";
-import { t as me } from "./BlockPreviewCanvas-CYNs-Yn-.js";
+import { n as de, t as fe } from "./MergeTagModeToggle-B_mUYJo4.js";
+import { t as pe } from "./TplModal-CqY8R3hn.js";
+import { t as me } from "./BlockPreviewCanvas-DSiJFJa0.js";
 //#region src/utils/validateEmailShape.ts
 var b = /[,;<>()[\]\\"'`|/?#@!$%^&*+=~{}]/;
 function he(e) {
@@ -74,7 +74,7 @@ var x = ["aria-busy"], S = {
 	},
 	emits: ["send", "close"],
 	setup(o, { emit: b }) {
-		let z = o, B = b, { t: V } = se(), Ce = t(oe, null), H = a(""), U = a("desktop"), we = t(re, void 0), W = y({
+		let z = o, B = b, { t: V } = se(), Ce = t(oe, null), H = a(""), U = a("desktop"), we = t(ae, void 0), W = y({
 			resolvePreview: we ?? void 0,
 			getContent: () => Ce?.content.value ?? {
 				blocks: [],
@@ -82,7 +82,7 @@ var x = ["aria-busy"], S = {
 			},
 			isActive: () => z.visible,
 			getRecipient: () => H.value || void 0
-		}), G = t(ie, null), K = a(ne(t(ae, []))), q = d({
+		}), G = t(re, null), K = a(ne(t(ie, []))), q = d({
 			get: () => W.isConfigured ? !1 : G?.value ?? K.value,
 			set: (e) => {
 				G ? G.value = e : K.value = e;
@@ -203,4 +203,4 @@ var x = ["aria-busy"], S = {
 //#endregion
 export { z as default };
 
-//# sourceMappingURL=TestEmailModal-B2LcU11Y.js.map
+//# sourceMappingURL=TestEmailModal-_CZvaO58.js.map

package/dist/cdn/chunks/{TestEmailModal-B2LcU11Y.js.map → TestEmailModal-_CZvaO58.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TestEmailModal-B2LcU11Y.js","names":[],"sources":["../../../src/utils/validateEmailShape.ts","../../../src/components/TestEmailModal.vue","../../../src/components/TestEmailModal.vue"],"sourcesContent":["/**\n * Characters that cannot appear in a domain but routinely arrive attached to one.\n *\n * A **denylist**, not an allowlist, so unicode domains keep working — an\n * allowlist of `[a-z0-9.-]` would be the stricter, more obviously \"correct\"\n * choice and would reject them. What this actually targets is the punctuation\n * that comes from pasting out of a list or a mail client: `user@example.com,`\n * and `<user@example.com>`.\n */\nconst IMPOSSIBLE_DOMAIN_CHARS = /[,;<>()[\\]\\\\\"'`|/?#@!$%^&*+=~{}]/;\n\n/**\n * Does this string look like an email address?\n *\n * Deliberately loose: non-empty, no whitespace, exactly one `@`, a non-empty\n * local part, and a domain containing a dot with something either side and no\n * impossible characters. That is enough to catch the mistakes a typo actually\n * produces — a missing `@`, a trailing comma, a half-typed domain — before the\n * user pays for a round-trip.\n *\n * **Do not \"improve\" this into an RFC-ish regex.** Those reliably reject valid\n * addresses (plus-addressing, long new gTLDs, unicode domains) and the resulting\n * bug reports cost far more than the malformed addresses they catch. Only the\n * receiving mail server can really tell, and the sending backend has to validate\n * anyway — this is a fast-feedback affordance, not a gate. `validateEmailShape`\n * has its own test file pinning the addresses that must keep passing.\n */\nexport function looksLikeEmail(value: string): boolean {\n  const trimmed = value.trim();\n  if (trimmed.length === 0) return false;\n  if (/\\s/.test(trimmed)) return false;\n\n  const parts = trimmed.split(\"@\");\n  if (parts.length !== 2) return false;\n\n  const [local, domain] = parts;\n  if (local.length === 0) return false;\n  if (IMPOSSIBLE_DOMAIN_CHARS.test(domain)) return false;\n\n  // A dot with at least one character either side, so `a@b` and `a@b.` fail but\n  // `a@b.c` and `a@sub.example.museum` pass.\n  const dot = domain.indexOf(\".\");\n  return dot > 0 && dot < domain.length - 1;\n}\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n *   for BYO senders; Cloud never takes it, because its list comes from a signed\n *   JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n *   version; there is nothing to choose, so offering an editable field would\n *   imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport { hasMergeTagSamples, type ViewportSize } from \"@templatical/types\";\nimport {\n  EDITOR_KEY,\n  MERGE_TAGS_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /** Omitted / undefined means unrestricted, so the field accepts free text. */\n  allowedRecipients?: string[];\n  defaultRecipient?: string;\n  isSending: boolean;\n  justSent: boolean;\n  error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n  resolvePreview: resolvePreviewHook ?? undefined,\n  getContent: () =>\n    editor?.content.value ?? { blocks: [], settings: {} as never },\n  isActive: () => props.visible,\n  getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(hasMergeTagSamples(inject(MERGE_TAGS_KEY, [])));\nconst sampleMode = computed({\n  get: () =>\n    // Off entirely while a resolver is configured — same rule as the canvas.\n    previewResolution.isConfigured\n      ? false\n      : (sharedSampleMode?.value ?? localSampleMode.value),\n  set: (on: boolean) => {\n    if (sharedSampleMode) sharedSampleMode.value = on;\n    else localSampleMode.value = on;\n  },\n});\n\nconst previewBlocks = computed(\n  () => previewResolution.content.value.blocks ?? [],\n);\n\nconst hasAllowlist = computed(\n  () =>\n    props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible) return;\n    recipient.value =\n      props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n  },\n  { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n  hasAllowlist.value\n    ? recipient.value.length > 0\n    : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n  () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n  () =>\n    !hasAllowlist.value &&\n    recipient.value.trim().length > 0 &&\n    !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n  if (!props.error) return null;\n  return props.error.kind === \"provider\"\n    ? props.error.message\n    : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n  if (!canSend.value) return;\n  emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n  // Sending is the one state that blocks dismissal; the success state closes\n  // immediately rather than making the user wait out the timer.\n  if (props.isSending) return;\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Grows to `max-w-3xl` only while the preview is open. A 600px email has\n         to render at true size AND leave slack on both sides for the band of\n         body background the preview draws beside it: at `max-w-2xl` the\n         preview region's content box is exactly 600px, so the band would have\n         nowhere to go and `settings.backgroundColor` would look unset for any\n         template whose sections span the full width. Collapsed, it stays the\n         compact form it was. `w-full` keeps it shrinking on narrow screens.\n         `max-h-[90%]`\n         with a `min-h-0 overflow-y-auto` preview region is the pattern the\n         saved-blocks dialogs use: the cap bounds the panel to TplModal's\n         backdrop (never to `vh` — see the note there), and `min-h-0` is what\n         lets a flex child shrink below its content and actually scroll. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSending\"\n      aria-labelledby=\"tpl-test-email-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-full tpl:max-w-3xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-test-email-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-test-email-recipient\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.testEmail.recipientLabel }}\n        </label>\n\n        <!-- Exactly one allowed address: nothing to choose. -->\n        <input\n          v-if=\"isSingleRecipient\"\n          id=\"tpl-test-email-recipient\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <!-- Several allowed addresses: pick one. -->\n        <select\n          v-else-if=\"hasAllowlist\"\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        >\n          <option\n            v-for=\"email in allowedRecipients\"\n            :key=\"email\"\n            :value=\"email\"\n          >\n            {{ email }}\n          </option>\n        </select>\n\n        <!-- No allowlist: free text. -->\n        <input\n          v-else\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          type=\"email\"\n          autocomplete=\"email\"\n          spellcheck=\"false\"\n          :placeholder=\"t.testEmail.recipientPlaceholder\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <p\n          v-if=\"showShapeHint\"\n          class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ t.testEmail.invalidAddress }}\n        </p>\n      </div>\n\n      <!-- Preview header: a label plus the viewport switch. Always shown — the\n           preview is part of the dialog rather than something to opt into. -->\n      <div class=\"tpl:mb-2 tpl:shrink-0\">\n        <!-- Two segmented controls: `flex-wrap` so they drop to their own row\n             rather than crushing the label on a narrow viewport. -->\n        <div\n          class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n        >\n          <span\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ t.testEmail.preview }}\n          </span>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <MergeTagModeToggle\n              v-if=\"!previewResolution.supersedesSamples.value\"\n              :sample-mode=\"sampleMode\"\n              @change=\"sampleMode = $event\"\n            />\n\n            <!-- Without this the preview would silently show only the desktop\n                 variant of any responsive block. -->\n            <ViewportToggle\n              :viewport=\"previewViewport\"\n              @change=\"previewViewport = $event\"\n            />\n          </div>\n        </div>\n\n        <!-- The hint has to follow the mode: \"shown unresolved\" is simply false\n             once every tag renders a realistic value. -->\n        <p\n          data-testid=\"test-email-preview-hint\"\n          class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{\n            previewResolution.supersedesSamples.value\n              ? t.previewResolution.hint\n              : sampleMode\n                ? t.testEmail.previewHintSample\n                : t.testEmail.previewHint\n          }}\n        </p>\n      </div>\n\n      <!-- The one region allowed to grow: `flex-1 min-h-0` so it absorbs the\n           remaining height and scrolls, leaving the form and actions fixed. -->\n      <div\n        id=\"tpl-test-email-preview\"\n        data-testid=\"test-email-preview\"\n        class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <!-- Skeleton while a *first* resolve is outstanding, so the dialog never\n             flashes the unresolved template before the resolved one. Sized like\n             the frame it replaces to avoid a layout jump. A re-resolve (recipient\n             change) keeps the previous result instead — `isInitialResolve`. -->\n        <div\n          v-if=\"previewResolution.isInitialResolve.value\"\n          role=\"status\"\n          aria-busy=\"true\"\n          data-testid=\"preview-resolution-loading\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n        >\n          <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n          <div\n            v-for=\"n in 3\"\n            :key=\"n\"\n            aria-hidden=\"true\"\n            class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n          ></div>\n        </div>\n\n        <!-- Resolution failed: the unresolved template renders below, so the\n             dialog degrades rather than showing an empty frame. -->\n        <p\n          v-else-if=\"previewResolution.hasFailed.value\"\n          role=\"status\"\n          data-testid=\"preview-resolution-failed\"\n          class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n        >\n          {{ t.previewResolution.failed }}\n        </p>\n\n        <BlockPreviewCanvas\n          v-if=\"!previewResolution.isInitialResolve.value\"\n          :blocks=\"previewBlocks\"\n          :viewport=\"previewViewport\"\n          :apply-condition-filter=\"!previewResolution.isConfigured\"\n        />\n      </div>\n\n      <!-- Success. Announced politely; the dialog closes itself shortly after. -->\n      <p\n        v-if=\"justSent\"\n        role=\"status\"\n        data-testid=\"test-email-success\"\n        class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n      >\n        <Check :size=\"13\" :stroke-width=\"2.5\" />\n        {{ t.testEmail.success }}\n      </p>\n\n      <!-- Failure. Stays open so the user can retry. -->\n      <p\n        v-else-if=\"errorText\"\n        role=\"alert\"\n        data-testid=\"test-email-error\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ errorText }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"test-email-cancel\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n          @click=\"handleClose\"\n        >\n          {{ t.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"test-email-send\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"!canSend\"\n          @click=\"handleSend\"\n        >\n          <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ t.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ t.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n *   for BYO senders; Cloud never takes it, because its list comes from a signed\n *   JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n *   version; there is nothing to choose, so offering an editable field would\n *   imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport { hasMergeTagSamples, type ViewportSize } from \"@templatical/types\";\nimport {\n  EDITOR_KEY,\n  MERGE_TAGS_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /** Omitted / undefined means unrestricted, so the field accepts free text. */\n  allowedRecipients?: string[];\n  defaultRecipient?: string;\n  isSending: boolean;\n  justSent: boolean;\n  error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n  resolvePreview: resolvePreviewHook ?? undefined,\n  getContent: () =>\n    editor?.content.value ?? { blocks: [], settings: {} as never },\n  isActive: () => props.visible,\n  getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(hasMergeTagSamples(inject(MERGE_TAGS_KEY, [])));\nconst sampleMode = computed({\n  get: () =>\n    // Off entirely while a resolver is configured — same rule as the canvas.\n    previewResolution.isConfigured\n      ? false\n      : (sharedSampleMode?.value ?? localSampleMode.value),\n  set: (on: boolean) => {\n    if (sharedSampleMode) sharedSampleMode.value = on;\n    else localSampleMode.value = on;\n  },\n});\n\nconst previewBlocks = computed(\n  () => previewResolution.content.value.blocks ?? [],\n);\n\nconst hasAllowlist = computed(\n  () =>\n    props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible) return;\n    recipient.value =\n      props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n  },\n  { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n  hasAllowlist.value\n    ? recipient.value.length > 0\n    : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n  () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n  () =>\n    !hasAllowlist.value &&\n    recipient.value.trim().length > 0 &&\n    !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n  if (!props.error) return null;\n  return props.error.kind === \"provider\"\n    ? props.error.message\n    : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n  if (!canSend.value) return;\n  emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n  // Sending is the one state that blocks dismissal; the success state closes\n  // immediately rather than making the user wait out the timer.\n  if (props.isSending) return;\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Grows to `max-w-3xl` only while the preview is open. A 600px email has\n         to render at true size AND leave slack on both sides for the band of\n         body background the preview draws beside it: at `max-w-2xl` the\n         preview region's content box is exactly 600px, so the band would have\n         nowhere to go and `settings.backgroundColor` would look unset for any\n         template whose sections span the full width. Collapsed, it stays the\n         compact form it was. `w-full` keeps it shrinking on narrow screens.\n         `max-h-[90%]`\n         with a `min-h-0 overflow-y-auto` preview region is the pattern the\n         saved-blocks dialogs use: the cap bounds the panel to TplModal's\n         backdrop (never to `vh` — see the note there), and `min-h-0` is what\n         lets a flex child shrink below its content and actually scroll. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSending\"\n      aria-labelledby=\"tpl-test-email-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-full tpl:max-w-3xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-test-email-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-test-email-recipient\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.testEmail.recipientLabel }}\n        </label>\n\n        <!-- Exactly one allowed address: nothing to choose. -->\n        <input\n          v-if=\"isSingleRecipient\"\n          id=\"tpl-test-email-recipient\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <!-- Several allowed addresses: pick one. -->\n        <select\n          v-else-if=\"hasAllowlist\"\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        >\n          <option\n            v-for=\"email in allowedRecipients\"\n            :key=\"email\"\n            :value=\"email\"\n          >\n            {{ email }}\n          </option>\n        </select>\n\n        <!-- No allowlist: free text. -->\n        <input\n          v-else\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          type=\"email\"\n          autocomplete=\"email\"\n          spellcheck=\"false\"\n          :placeholder=\"t.testEmail.recipientPlaceholder\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <p\n          v-if=\"showShapeHint\"\n          class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ t.testEmail.invalidAddress }}\n        </p>\n      </div>\n\n      <!-- Preview header: a label plus the viewport switch. Always shown — the\n           preview is part of the dialog rather than something to opt into. -->\n      <div class=\"tpl:mb-2 tpl:shrink-0\">\n        <!-- Two segmented controls: `flex-wrap` so they drop to their own row\n             rather than crushing the label on a narrow viewport. -->\n        <div\n          class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n        >\n          <span\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ t.testEmail.preview }}\n          </span>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <MergeTagModeToggle\n              v-if=\"!previewResolution.supersedesSamples.value\"\n              :sample-mode=\"sampleMode\"\n              @change=\"sampleMode = $event\"\n            />\n\n            <!-- Without this the preview would silently show only the desktop\n                 variant of any responsive block. -->\n            <ViewportToggle\n              :viewport=\"previewViewport\"\n              @change=\"previewViewport = $event\"\n            />\n          </div>\n        </div>\n\n        <!-- The hint has to follow the mode: \"shown unresolved\" is simply false\n             once every tag renders a realistic value. -->\n        <p\n          data-testid=\"test-email-preview-hint\"\n          class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{\n            previewResolution.supersedesSamples.value\n              ? t.previewResolution.hint\n              : sampleMode\n                ? t.testEmail.previewHintSample\n                : t.testEmail.previewHint\n          }}\n        </p>\n      </div>\n\n      <!-- The one region allowed to grow: `flex-1 min-h-0` so it absorbs the\n           remaining height and scrolls, leaving the form and actions fixed. -->\n      <div\n        id=\"tpl-test-email-preview\"\n        data-testid=\"test-email-preview\"\n        class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <!-- Skeleton while a *first* resolve is outstanding, so the dialog never\n             flashes the unresolved template before the resolved one. Sized like\n             the frame it replaces to avoid a layout jump. A re-resolve (recipient\n             change) keeps the previous result instead — `isInitialResolve`. -->\n        <div\n          v-if=\"previewResolution.isInitialResolve.value\"\n          role=\"status\"\n          aria-busy=\"true\"\n          data-testid=\"preview-resolution-loading\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n        >\n          <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n          <div\n            v-for=\"n in 3\"\n            :key=\"n\"\n            aria-hidden=\"true\"\n            class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n          ></div>\n        </div>\n\n        <!-- Resolution failed: the unresolved template renders below, so the\n             dialog degrades rather than showing an empty frame. -->\n        <p\n          v-else-if=\"previewResolution.hasFailed.value\"\n          role=\"status\"\n          data-testid=\"preview-resolution-failed\"\n          class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n        >\n          {{ t.previewResolution.failed }}\n        </p>\n\n        <BlockPreviewCanvas\n          v-if=\"!previewResolution.isInitialResolve.value\"\n          :blocks=\"previewBlocks\"\n          :viewport=\"previewViewport\"\n          :apply-condition-filter=\"!previewResolution.isConfigured\"\n        />\n      </div>\n\n      <!-- Success. Announced politely; the dialog closes itself shortly after. -->\n      <p\n        v-if=\"justSent\"\n        role=\"status\"\n        data-testid=\"test-email-success\"\n        class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n      >\n        <Check :size=\"13\" :stroke-width=\"2.5\" />\n        {{ t.testEmail.success }}\n      </p>\n\n      <!-- Failure. Stays open so the user can retry. -->\n      <p\n        v-else-if=\"errorText\"\n        role=\"alert\"\n        data-testid=\"test-email-error\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ errorText }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"test-email-cancel\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n          @click=\"handleClose\"\n        >\n          {{ t.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"test-email-send\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"!canSend\"\n          @click=\"handleSend\"\n        >\n          <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ t.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ t.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"TestEmailModal-_CZvaO58.js","names":[],"sources":["../../../src/utils/validateEmailShape.ts","../../../src/components/TestEmailModal.vue","../../../src/components/TestEmailModal.vue"],"sourcesContent":["/**\n * Characters that cannot appear in a domain but routinely arrive attached to one.\n *\n * A **denylist**, not an allowlist, so unicode domains keep working — an\n * allowlist of `[a-z0-9.-]` would be the stricter, more obviously \"correct\"\n * choice and would reject them. What this actually targets is the punctuation\n * that comes from pasting out of a list or a mail client: `user@example.com,`\n * and `<user@example.com>`.\n */\nconst IMPOSSIBLE_DOMAIN_CHARS = /[,;<>()[\\]\\\\\"'`|/?#@!$%^&*+=~{}]/;\n\n/**\n * Does this string look like an email address?\n *\n * Deliberately loose: non-empty, no whitespace, exactly one `@`, a non-empty\n * local part, and a domain containing a dot with something either side and no\n * impossible characters. That is enough to catch the mistakes a typo actually\n * produces — a missing `@`, a trailing comma, a half-typed domain — before the\n * user pays for a round-trip.\n *\n * **Do not \"improve\" this into an RFC-ish regex.** Those reliably reject valid\n * addresses (plus-addressing, long new gTLDs, unicode domains) and the resulting\n * bug reports cost far more than the malformed addresses they catch. Only the\n * receiving mail server can really tell, and the sending backend has to validate\n * anyway — this is a fast-feedback affordance, not a gate. `validateEmailShape`\n * has its own test file pinning the addresses that must keep passing.\n */\nexport function looksLikeEmail(value: string): boolean {\n  const trimmed = value.trim();\n  if (trimmed.length === 0) return false;\n  if (/\\s/.test(trimmed)) return false;\n\n  const parts = trimmed.split(\"@\");\n  if (parts.length !== 2) return false;\n\n  const [local, domain] = parts;\n  if (local.length === 0) return false;\n  if (IMPOSSIBLE_DOMAIN_CHARS.test(domain)) return false;\n\n  // A dot with at least one character either side, so `a@b` and `a@b.` fail but\n  // `a@b.c` and `a@sub.example.museum` pass.\n  const dot = domain.indexOf(\".\");\n  return dot > 0 && dot < domain.length - 1;\n}\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n *   for BYO senders; Cloud never takes it, because its list comes from a signed\n *   JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n *   version; there is nothing to choose, so offering an editable field would\n *   imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport { hasMergeTagSamples, type ViewportSize } from \"@templatical/types\";\nimport {\n  EDITOR_KEY,\n  MERGE_TAGS_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /** Omitted / undefined means unrestricted, so the field accepts free text. */\n  allowedRecipients?: string[];\n  defaultRecipient?: string;\n  isSending: boolean;\n  justSent: boolean;\n  error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n  resolvePreview: resolvePreviewHook ?? undefined,\n  getContent: () =>\n    editor?.content.value ?? { blocks: [], settings: {} as never },\n  isActive: () => props.visible,\n  getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(hasMergeTagSamples(inject(MERGE_TAGS_KEY, [])));\nconst sampleMode = computed({\n  get: () =>\n    // Off entirely while a resolver is configured — same rule as the canvas.\n    previewResolution.isConfigured\n      ? false\n      : (sharedSampleMode?.value ?? localSampleMode.value),\n  set: (on: boolean) => {\n    if (sharedSampleMode) sharedSampleMode.value = on;\n    else localSampleMode.value = on;\n  },\n});\n\nconst previewBlocks = computed(\n  () => previewResolution.content.value.blocks ?? [],\n);\n\nconst hasAllowlist = computed(\n  () =>\n    props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible) return;\n    recipient.value =\n      props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n  },\n  { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n  hasAllowlist.value\n    ? recipient.value.length > 0\n    : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n  () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n  () =>\n    !hasAllowlist.value &&\n    recipient.value.trim().length > 0 &&\n    !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n  if (!props.error) return null;\n  return props.error.kind === \"provider\"\n    ? props.error.message\n    : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n  if (!canSend.value) return;\n  emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n  // Sending is the one state that blocks dismissal; the success state closes\n  // immediately rather than making the user wait out the timer.\n  if (props.isSending) return;\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Grows to `max-w-3xl` only while the preview is open. A 600px email has\n         to render at true size AND leave slack on both sides for the band of\n         body background the preview draws beside it: at `max-w-2xl` the\n         preview region's content box is exactly 600px, so the band would have\n         nowhere to go and `settings.backgroundColor` would look unset for any\n         template whose sections span the full width. Collapsed, it stays the\n         compact form it was. `w-full` keeps it shrinking on narrow screens.\n         `max-h-[90%]`\n         with a `min-h-0 overflow-y-auto` preview region is the pattern the\n         saved-blocks dialogs use: the cap bounds the panel to TplModal's\n         backdrop (never to `vh` — see the note there), and `min-h-0` is what\n         lets a flex child shrink below its content and actually scroll. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSending\"\n      aria-labelledby=\"tpl-test-email-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-full tpl:max-w-3xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-test-email-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-test-email-recipient\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.testEmail.recipientLabel }}\n        </label>\n\n        <!-- Exactly one allowed address: nothing to choose. -->\n        <input\n          v-if=\"isSingleRecipient\"\n          id=\"tpl-test-email-recipient\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <!-- Several allowed addresses: pick one. -->\n        <select\n          v-else-if=\"hasAllowlist\"\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        >\n          <option\n            v-for=\"email in allowedRecipients\"\n            :key=\"email\"\n            :value=\"email\"\n          >\n            {{ email }}\n          </option>\n        </select>\n\n        <!-- No allowlist: free text. -->\n        <input\n          v-else\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          type=\"email\"\n          autocomplete=\"email\"\n          spellcheck=\"false\"\n          :placeholder=\"t.testEmail.recipientPlaceholder\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <p\n          v-if=\"showShapeHint\"\n          class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ t.testEmail.invalidAddress }}\n        </p>\n      </div>\n\n      <!-- Preview header: a label plus the viewport switch. Always shown — the\n           preview is part of the dialog rather than something to opt into. -->\n      <div class=\"tpl:mb-2 tpl:shrink-0\">\n        <!-- Two segmented controls: `flex-wrap` so they drop to their own row\n             rather than crushing the label on a narrow viewport. -->\n        <div\n          class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n        >\n          <span\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ t.testEmail.preview }}\n          </span>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <MergeTagModeToggle\n              v-if=\"!previewResolution.supersedesSamples.value\"\n              :sample-mode=\"sampleMode\"\n              @change=\"sampleMode = $event\"\n            />\n\n            <!-- Without this the preview would silently show only the desktop\n                 variant of any responsive block. -->\n            <ViewportToggle\n              :viewport=\"previewViewport\"\n              @change=\"previewViewport = $event\"\n            />\n          </div>\n        </div>\n\n        <!-- The hint has to follow the mode: \"shown unresolved\" is simply false\n             once every tag renders a realistic value. -->\n        <p\n          data-testid=\"test-email-preview-hint\"\n          class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{\n            previewResolution.supersedesSamples.value\n              ? t.previewResolution.hint\n              : sampleMode\n                ? t.testEmail.previewHintSample\n                : t.testEmail.previewHint\n          }}\n        </p>\n      </div>\n\n      <!-- The one region allowed to grow: `flex-1 min-h-0` so it absorbs the\n           remaining height and scrolls, leaving the form and actions fixed. -->\n      <div\n        id=\"tpl-test-email-preview\"\n        data-testid=\"test-email-preview\"\n        class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <!-- Skeleton while a *first* resolve is outstanding, so the dialog never\n             flashes the unresolved template before the resolved one. Sized like\n             the frame it replaces to avoid a layout jump. A re-resolve (recipient\n             change) keeps the previous result instead — `isInitialResolve`. -->\n        <div\n          v-if=\"previewResolution.isInitialResolve.value\"\n          role=\"status\"\n          aria-busy=\"true\"\n          data-testid=\"preview-resolution-loading\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n        >\n          <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n          <div\n            v-for=\"n in 3\"\n            :key=\"n\"\n            aria-hidden=\"true\"\n            class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n          ></div>\n        </div>\n\n        <!-- Resolution failed: the unresolved template renders below, so the\n             dialog degrades rather than showing an empty frame. -->\n        <p\n          v-else-if=\"previewResolution.hasFailed.value\"\n          role=\"status\"\n          data-testid=\"preview-resolution-failed\"\n          class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n        >\n          {{ t.previewResolution.failed }}\n        </p>\n\n        <BlockPreviewCanvas\n          v-if=\"!previewResolution.isInitialResolve.value\"\n          :blocks=\"previewBlocks\"\n          :viewport=\"previewViewport\"\n          :apply-condition-filter=\"!previewResolution.isConfigured\"\n        />\n      </div>\n\n      <!-- Success. Announced politely; the dialog closes itself shortly after. -->\n      <p\n        v-if=\"justSent\"\n        role=\"status\"\n        data-testid=\"test-email-success\"\n        class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n      >\n        <Check :size=\"13\" :stroke-width=\"2.5\" />\n        {{ t.testEmail.success }}\n      </p>\n\n      <!-- Failure. Stays open so the user can retry. -->\n      <p\n        v-else-if=\"errorText\"\n        role=\"alert\"\n        data-testid=\"test-email-error\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ errorText }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"test-email-cancel\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n          @click=\"handleClose\"\n        >\n          {{ t.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"test-email-send\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"!canSend\"\n          @click=\"handleSend\"\n        >\n          <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ t.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ t.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport { primaryBtnClass } from \"../constants/styleConstants\";\n/**\n * Send-a-test dialog, shared by the OSS and Cloud editors.\n *\n * The recipient control has three shapes, driven entirely by whether the\n * provider configured an allowlist:\n *\n * - **no allowlist** — free text, validated for shape only. This branch exists\n *   for BYO senders; Cloud never takes it, because its list comes from a signed\n *   JWT.\n * - **exactly one** — a read-only field. Preserved verbatim from the Cloud-only\n *   version; there is nothing to choose, so offering an editable field would\n *   imply otherwise.\n * - **several** — a picker of exactly those addresses.\n *\n * An empty allowlist never reaches here: the feature reports itself unavailable,\n * so no trigger renders. (The Cloud-only version fell through to `v-else` and\n * rendered a select with no options and a permanently disabled Send.)\n */\nimport TplModal from \"./TplModal.vue\";\n// Statically imported: this modal is already lazy-loaded as a whole, so the\n// preview rides its chunk rather than costing a second round-trip and flashing\n// an empty frame. Still shared with the saved-blocks surfaces, which lazy-load\n// it themselves.\nimport BlockPreviewCanvas from \"./BlockPreviewCanvas.vue\";\n// The editor header's own control, reused verbatim so the two viewport switches\n// are the same component rather than two things that resemble each other.\nimport ViewportToggle from \"./ViewportToggle.vue\";\nimport MergeTagModeToggle from \"./MergeTagModeToggle.vue\";\nimport { useI18n } from \"../composables/useI18n\";\nimport { looksLikeEmail } from \"../utils/validateEmailShape\";\nimport { Check, LoaderCircle } from \"@lucide/vue\";\nimport { computed, inject, ref, watch } from \"vue\";\nimport { hasMergeTagSamples, type ViewportSize } from \"@templatical/types\";\nimport {\n  EDITOR_KEY,\n  MERGE_TAGS_KEY,\n  MERGE_TAG_SAMPLE_MODE_KEY,\n  RESOLVE_PREVIEW_KEY,\n} from \"../keys\";\nimport { usePreviewResolution } from \"../composables/usePreviewResolution\";\nimport type { TestEmailError } from \"../composables/useTestEmailFeature\";\n\nconst props = defineProps<{\n  visible: boolean;\n  /** Omitted / undefined means unrestricted, so the field accepts free text. */\n  allowedRecipients?: string[];\n  defaultRecipient?: string;\n  isSending: boolean;\n  justSent: boolean;\n  error: TestEmailError | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t } = useI18n();\nconst editor = inject(EDITOR_KEY, null);\n\nconst recipient = ref(\"\");\n\nconst previewViewport = ref<ViewportSize>(\"desktop\");\n\n/**\n * Its own resolution instance rather than the editor's, because this dialog has\n * a recipient and the editor's preview does not — resolving for \"whoever is\n * selected here\" is a different question from resolving for the canvas.\n * `isActive` is the dialog's own visibility.\n */\nconst resolvePreviewHook = inject(RESOLVE_PREVIEW_KEY, undefined);\nconst previewResolution = usePreviewResolution({\n  resolvePreview: resolvePreviewHook ?? undefined,\n  getContent: () =>\n    editor?.content.value ?? { blocks: [], settings: {} as never },\n  isActive: () => props.visible,\n  getRecipient: () => recipient.value || undefined,\n});\n\n/**\n * Shared with the editor's own preview, so switching here and switching there\n * are the same choice — it is a property of how the user wants to read a\n * preview, not of one dialog. Falls back to a local ref for headless mounts.\n */\nconst sharedSampleMode = inject(MERGE_TAG_SAMPLE_MODE_KEY, null);\n// Seeded from availability, matching how `useEditorCore` seeds the shared ref.\n// A blanket `true` would make the dialog claim tags \"show example values\" for a\n// consumer who configured none — false, and with no toggle rendered to correct\n// it, since the toggle hides itself when nothing has a sample.\nconst localSampleMode = ref(hasMergeTagSamples(inject(MERGE_TAGS_KEY, [])));\nconst sampleMode = computed({\n  get: () =>\n    // Off entirely while a resolver is configured — same rule as the canvas.\n    previewResolution.isConfigured\n      ? false\n      : (sharedSampleMode?.value ?? localSampleMode.value),\n  set: (on: boolean) => {\n    if (sharedSampleMode) sharedSampleMode.value = on;\n    else localSampleMode.value = on;\n  },\n});\n\nconst previewBlocks = computed(\n  () => previewResolution.content.value.blocks ?? [],\n);\n\nconst hasAllowlist = computed(\n  () =>\n    props.allowedRecipients !== undefined && props.allowedRecipients.length > 0,\n);\nconst isSingleRecipient = computed(() => props.allowedRecipients?.length === 1);\n\n// Mounted behind a `v-if` on the same state that drives `visible`, so it can\n// mount with `visible` already true — without `immediate` the field would never\n// be seeded.\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible) return;\n    recipient.value =\n      props.defaultRecipient ?? props.allowedRecipients?.[0] ?? \"\";\n  },\n  { immediate: true },\n);\n\n/** Shape-check free text only; a picker can't produce a malformed value. */\nconst isRecipientValid = computed(() =>\n  hasAllowlist.value\n    ? recipient.value.length > 0\n    : looksLikeEmail(recipient.value),\n);\n\nconst canSend = computed(\n  () => isRecipientValid.value && !props.isSending && !props.justSent,\n);\n\n/** Free text that's been typed into but isn't yet a plausible address. */\nconst showShapeHint = computed(\n  () =>\n    !hasAllowlist.value &&\n    recipient.value.trim().length > 0 &&\n    !isRecipientValid.value,\n);\n\nconst errorText = computed(() => {\n  if (!props.error) return null;\n  return props.error.kind === \"provider\"\n    ? props.error.message\n    : t.testEmail.recipientNotAllowed;\n});\n\nfunction handleSend(): void {\n  if (!canSend.value) return;\n  emit(\"send\", recipient.value.trim());\n}\n\nfunction handleClose(): void {\n  // Sending is the one state that blocks dismissal; the success state closes\n  // immediately rather than making the user wait out the timer.\n  if (props.isSending) return;\n  emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n  if (event.key === \"Escape\") {\n    handleClose();\n  }\n}\n</script>\n\n<template>\n  <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n    <!-- Grows to `max-w-3xl` only while the preview is open. A 600px email has\n         to render at true size AND leave slack on both sides for the band of\n         body background the preview draws beside it: at `max-w-2xl` the\n         preview region's content box is exactly 600px, so the band would have\n         nowhere to go and `settings.backgroundColor` would look unset for any\n         template whose sections span the full width. Collapsed, it stays the\n         compact form it was. `w-full` keeps it shrinking on narrow screens.\n         `max-h-[90%]`\n         with a `min-h-0 overflow-y-auto` preview region is the pattern the\n         saved-blocks dialogs use: the cap bounds the panel to TplModal's\n         backdrop (never to `vh` — see the note there), and `min-h-0` is what\n         lets a flex child shrink below its content and actually scroll. -->\n    <div\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-busy=\"isSending\"\n      aria-labelledby=\"tpl-test-email-title\"\n      class=\"tpl-scale-in tpl:flex tpl:max-h-[90%] tpl:w-full tpl:max-w-3xl tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5\"\n      style=\"\n        background-color: var(--tpl-bg-elevated);\n        box-shadow: var(--tpl-shadow-xl);\n      \"\n    >\n      <h3\n        id=\"tpl-test-email-title\"\n        class=\"tpl:mb-4 tpl:shrink-0 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ t.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3 tpl:shrink-0\">\n        <label\n          for=\"tpl-test-email-recipient\"\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ t.testEmail.recipientLabel }}\n        </label>\n\n        <!-- Exactly one allowed address: nothing to choose. -->\n        <input\n          v-if=\"isSingleRecipient\"\n          id=\"tpl-test-email-recipient\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:opacity-70 tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <!-- Several allowed addresses: pick one. -->\n        <select\n          v-else-if=\"hasAllowlist\"\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        >\n          <option\n            v-for=\"email in allowedRecipients\"\n            :key=\"email\"\n            :value=\"email\"\n          >\n            {{ email }}\n          </option>\n        </select>\n\n        <!-- No allowlist: free text. -->\n        <input\n          v-else\n          id=\"tpl-test-email-recipient\"\n          v-model=\"recipient\"\n          type=\"email\"\n          autocomplete=\"email\"\n          spellcheck=\"false\"\n          :placeholder=\"t.testEmail.recipientPlaceholder\"\n          :disabled=\"isSending || justSent\"\n          data-testid=\"test-email-recipient\"\n          class=\"tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-[var(--tpl-shadow-sm)] tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n\n        <p\n          v-if=\"showShapeHint\"\n          class=\"tpl:mt-1.5 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ t.testEmail.invalidAddress }}\n        </p>\n      </div>\n\n      <!-- Preview header: a label plus the viewport switch. Always shown — the\n           preview is part of the dialog rather than something to opt into. -->\n      <div class=\"tpl:mb-2 tpl:shrink-0\">\n        <!-- Two segmented controls: `flex-wrap` so they drop to their own row\n             rather than crushing the label on a narrow viewport. -->\n        <div\n          class=\"tpl:flex tpl:flex-wrap tpl:items-center tpl:justify-between tpl:gap-2\"\n        >\n          <span\n            class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n          >\n            {{ t.testEmail.preview }}\n          </span>\n\n          <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n            <MergeTagModeToggle\n              v-if=\"!previewResolution.supersedesSamples.value\"\n              :sample-mode=\"sampleMode\"\n              @change=\"sampleMode = $event\"\n            />\n\n            <!-- Without this the preview would silently show only the desktop\n                 variant of any responsive block. -->\n            <ViewportToggle\n              :viewport=\"previewViewport\"\n              @change=\"previewViewport = $event\"\n            />\n          </div>\n        </div>\n\n        <!-- The hint has to follow the mode: \"shown unresolved\" is simply false\n             once every tag renders a realistic value. -->\n        <p\n          data-testid=\"test-email-preview-hint\"\n          class=\"tpl:mt-1 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{\n            previewResolution.supersedesSamples.value\n              ? t.previewResolution.hint\n              : sampleMode\n                ? t.testEmail.previewHintSample\n                : t.testEmail.previewHint\n          }}\n        </p>\n      </div>\n\n      <!-- The one region allowed to grow: `flex-1 min-h-0` so it absorbs the\n           remaining height and scrolls, leaving the form and actions fixed. -->\n      <div\n        id=\"tpl-test-email-preview\"\n        data-testid=\"test-email-preview\"\n        class=\"tpl:mb-3 tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:rounded-[var(--tpl-radius-sm)] tpl:p-3 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <!-- Skeleton while a *first* resolve is outstanding, so the dialog never\n             flashes the unresolved template before the resolved one. Sized like\n             the frame it replaces to avoid a layout jump. A re-resolve (recipient\n             change) keeps the previous result instead — `isInitialResolve`. -->\n        <div\n          v-if=\"previewResolution.isInitialResolve.value\"\n          role=\"status\"\n          aria-busy=\"true\"\n          data-testid=\"preview-resolution-loading\"\n          class=\"tpl:flex tpl:flex-col tpl:gap-3\"\n        >\n          <span class=\"tpl:sr-only\">{{ t.previewResolution.resolving }}</span>\n          <div\n            v-for=\"n in 3\"\n            :key=\"n\"\n            aria-hidden=\"true\"\n            class=\"tpl-pulse tpl:h-16 tpl:rounded-md tpl:bg-[var(--tpl-bg-hover)]\"\n          ></div>\n        </div>\n\n        <!-- Resolution failed: the unresolved template renders below, so the\n             dialog degrades rather than showing an empty frame. -->\n        <p\n          v-else-if=\"previewResolution.hasFailed.value\"\n          role=\"status\"\n          data-testid=\"preview-resolution-failed\"\n          class=\"tpl:mb-2 tpl:rounded-md tpl:px-3 tpl:py-2 tpl:text-xs tpl:text-[var(--tpl-text-muted)] tpl:bg-[var(--tpl-bg-hover)]\"\n        >\n          {{ t.previewResolution.failed }}\n        </p>\n\n        <BlockPreviewCanvas\n          v-if=\"!previewResolution.isInitialResolve.value\"\n          :blocks=\"previewBlocks\"\n          :viewport=\"previewViewport\"\n          :apply-condition-filter=\"!previewResolution.isConfigured\"\n        />\n      </div>\n\n      <!-- Success. Announced politely; the dialog closes itself shortly after. -->\n      <p\n        v-if=\"justSent\"\n        role=\"status\"\n        data-testid=\"test-email-success\"\n        class=\"tpl:mb-3 tpl:flex tpl:shrink-0 tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success,var(--tpl-primary))]\"\n      >\n        <Check :size=\"13\" :stroke-width=\"2.5\" />\n        {{ t.testEmail.success }}\n      </p>\n\n      <!-- Failure. Stays open so the user can retry. -->\n      <p\n        v-else-if=\"errorText\"\n        role=\"alert\"\n        data-testid=\"test-email-error\"\n        class=\"tpl:mb-3 tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ errorText }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\n          data-testid=\"test-email-cancel\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{ 'tpl:cursor-not-allowed tpl:opacity-50': isSending }\"\n          @click=\"handleClose\"\n        >\n          {{ t.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          data-testid=\"test-email-send\"\n          :class=\"primaryBtnClass\"\n          :disabled=\"!canSend\"\n          @click=\"handleSend\"\n        >\n          <span v-if=\"isSending\" class=\"tpl:flex tpl:items-center tpl:gap-1.5\">\n            <LoaderCircle\n              class=\"tpl:animate-spin\"\n              :size=\"12\"\n              :stroke-width=\"2\"\n            />\n            {{ t.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ t.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":";;;;;;;;;;;AASA,IAAM,IAA0B;AAkBhC,SAAgB,GAAe,GAAwB;CACrD,IAAM,IAAU,EAAM,KAAK;CAE3B,IADI,EAAQ,WAAW,KACnB,KAAK,KAAK,CAAO,GAAG,OAAO;CAE/B,IAAM,IAAQ,EAAQ,MAAM,GAAG;CAC/B,IAAI,EAAM,WAAW,GAAG,OAAO;CAE/B,IAAM,CAAC,GAAO,KAAU;CAExB,IADI,EAAM,WAAW,KACjB,EAAwB,KAAK,CAAM,GAAG,OAAO;CAIjD,IAAM,IAAM,EAAO,QAAQ,GAAG;CAC9B,OAAO,IAAM,KAAK,IAAM,EAAO,SAAS;AAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECCA,IAAM,IAAQ,GAUR,IAAO,GAKP,EAAE,SAAM,GAAQ,GAChB,KAAS,EAAO,IAAY,IAAI,GAEhC,IAAY,EAAI,EAAE,GAElB,IAAkB,EAAkB,SAAS,GAQ7C,KAAqB,EAAO,IAAqB,KAAA,CAAS,GAC1D,IAAoB,EAAqB;GAC7C,gBAAgB,MAAsB,KAAA;GACtC,kBACE,IAAQ,QAAQ,SAAS;IAAE,QAAQ,CAAC;IAAG,UAAU,CAAC;GAAW;GAC/D,gBAAgB,EAAM;GACtB,oBAAoB,EAAU,SAAS,KAAA;EACzC,CAAC,GAOK,IAAmB,EAAO,IAA2B,IAAI,GAKzD,IAAkB,EAAI,GAAmB,EAAO,IAAgB,CAAC,CAAC,CAAC,CAAC,GACpE,IAAa,EAAS;GAC1B,WAEE,EAAkB,eACd,KACC,GAAkB,SAAS,EAAgB;GAClD,MAAM,MAAgB;IACpB,AAAI,IAAkB,EAAiB,QAAQ,IAC1C,EAAgB,QAAQ;GAC/B;EACF,CAAC,GAEK,KAAgB,QACd,EAAkB,QAAQ,MAAM,UAAU,CAAC,CACnD,GAEM,IAAe,QAEjB,EAAM,sBAAsB,KAAA,KAAa,EAAM,kBAAkB,SAAS,CAC9E,GACM,KAAoB,QAAe,EAAM,mBAAmB,WAAW,CAAC;EAK9E,QACQ,EAAM,UACX,MAAY;GACN,MACL,EAAU,QACR,EAAM,oBAAoB,EAAM,oBAAoB,MAAM;EAC9D,GACA,EAAE,WAAW,GAAK,CACpB;EAGA,IAAM,IAAmB,QACvB,EAAa,QACT,EAAU,MAAM,SAAS,IACzB,GAAe,EAAU,KAAK,CACpC,GAEM,IAAU,QACR,EAAiB,SAAS,CAAC,EAAM,aAAa,CAAC,EAAM,QAC7D,GAGM,KAAgB,QAElB,CAAC,EAAa,SACd,EAAU,MAAM,KAAK,CAAC,CAAC,SAAS,KAChC,CAAC,EAAiB,KACtB,GAEM,IAAY,QACX,EAAM,QACJ,EAAM,MAAM,SAAS,aACxB,EAAM,MAAM,UACZ,EAAE,UAAU,sBAHS,IAI1B;EAED,SAAS,IAAmB;GACrB,EAAQ,SACb,EAAK,QAAQ,EAAU,MAAM,KAAK,CAAC;EACrC;EAEA,SAAS,IAAoB;GAGvB,EAAM,aACV,EAAK,OAAO;EACd;EAEA,SAAS,GAAc,GAA4B;GAKjD,AAJI,EAAM,QAAQ,WAAW,CAAC,EAAM,aAClC,EAAM,eAAe,GACrB,EAAW,IAET,EAAM,QAAQ,YAChB,EAAY;EAEhB;oBAIE,EAAA,GAAA,EA6OW,IAAA;GA7OA,SAAS,EAAA;GAAU,SAAO;GAAc,WAAS;;GAa1D,SAAA,QA+NM,CA/NN,EA+NM,OAAA;IA9NJ,MAAK;IACL,cAAW;IACV,aAAW,EAAA;IACZ,mBAAgB;IAChB,OAAM;IACN,OAAA;KAAA,oBAAA;KAAA,cAAA;IAAA;;IAKA,EAKK,MALL,GAKK,EADA,EAAA,CAAA,CAAC,CAAC,UAAU,KAAK,GAAA,CAAA;IAItB,EAyDM,OAzDN,GAyDM;KAxDJ,EAKQ,SALR,GAKQ,EADH,EAAA,CAAA,CAAC,CAAC,UAAU,cAAc,GAAA,CAAA;KAKvB,GAAA,SADR,EAAA,GAAA,EAQE,SAAA;;MANA,IAAG;MACH,MAAK;MACJ,OAAO,EAAA;MACR,UAAA;MACA,eAAY;MACZ,OAAM;KAKK,GAAA,MAAA,GAAA,CAAA,KAAA,EAAA,QADb,GAAA,EAAA,GAAA,EAeS,UAAA;;MAbP,IAAG;MACM,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAS,QAAA;MACjB,UAAU,EAAA,aAAa,EAAA;MACxB,eAAY;MACZ,OAAM;KAEN,GAAA,EAAA,EAAA,EAAA,GAAA,EAMS,GAAA,MAAA,EALS,EAAA,oBAAT,OADT,EAAA,GAAA,EAMS,UAAA;MAJN,KAAK;MACL,OAAO;KAEL,GAAA,EAAA,CAAK,GAAA,GAAA,CAAA,EAVD,GAAA,GAAA,EAAA,GAAA,GAAA,CAAA,IAAA,CAAA,CAAA,IAAA,EAAA,KAAS,CAAA,CAAA,IAepB,GAAA,EAAA,GAAA,EAWE,SAAA;;MATA,IAAG;MACM,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAS,QAAA;MAClB,MAAK;MACL,cAAa;MACb,YAAW;MACV,aAAa,EAAA,CAAA,CAAC,CAAC,UAAU;MACzB,UAAU,EAAA,aAAa,EAAA;MACxB,eAAY;MACZ,OAAM;KAPG,GAAA,MAAA,GAAA,CAAA,IAAA,CAAA,CAAA,IAAA,EAAA,KAAS,CAAA,CAAA;KAWZ,GAAA,SADR,EAAA,GAAA,EAKI,KALJ,GAKI,EADC,EAAA,CAAA,CAAC,CAAC,UAAU,cAAc,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;IAMjC,EA0CM,OA1CN,GA0CM,CAvCJ,EAuBM,OAvBN,GAuBM,CApBJ,EAIO,QAJP,GAIO,EADF,EAAA,CAAA,CAAC,CAAC,UAAU,OAAO,GAAA,CAAA,GAGxB,EAaM,OAbN,GAaM,CAXK,EAAA,CAAA,CAAiB,CAAC,kBAAkB,QAO7C,EAAA,IAAA,EAAA,KARA,EAAA,GAAA,EAIE,IAAA;;KAFC,eAAa,EAAA;KACb,UAAM,AAAA,EAAA,QAAA,MAAE,EAAA,QAAa;IAKxB,GAAA,MAAA,GAAA,CAAA,aAAA,CAAA,IAAA,EAGE,IAAA;KAFC,UAAU,EAAA;KACV,UAAM,AAAA,EAAA,QAAA,MAAE,EAAA,QAAkB;IAOjC,GAAA,MAAA,GAAA,CAAA,UAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAWI,KAXJ,GAWI,EANA,EAAA,CAAA,CAAiB,CAAC,kBAAkB,QAAsB,EAAA,CAAA,CAAC,CAAC,kBAAkB,OAAqB,EAAA,QAA6B,EAAA,CAAA,CAAC,CAAC,UAAU,oBAAoC,EAAA,CAAA,CAAC,CAAC,UAAU,WAAW,GAAA,CAAA,CAAA,CAAA;IAW7M,EA0CM,OA1CN,GA0CM,CAhCI,EAAA,CAAA,CAAiB,CAAC,iBAAiB,SAD3C,EAAA,GAAA,EAcM,OAdN,GAcM,CAPJ,EAAoE,QAApE,GAAoE,EAAvC,EAAA,CAAA,CAAC,CAAC,kBAAkB,SAAS,GAAA,CAAA,IAC1D,EAAA,GAAA,EAKO,GAAA,MAAA,EAJO,IAAL,MADT,EAKO,OAAA;KAHJ,KAAK;KACN,eAAY;KACZ,OAAM;MAOG,GAAA,EAAA,EAAA,CAAA,KAAA,EAAA,CAAA,CAAiB,CAAC,UAAU,SADzC,EAAA,GAAA,EAOI,KAPJ,GAOI,EADC,EAAA,CAAA,CAAC,CAAC,kBAAkB,MAAM,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAItB,EAAA,CAAA,CAAiB,CAAC,iBAAiB,qBAD5C,EAAA,GAAA,EAKE,IAAA;;KAHC,QAAQ,GAAA;KACR,UAAU,EAAA;KACV,0BAAsB,CAAG,EAAA,CAAA,CAAiB,CAAC;;;;;;IAMxC,EAAA,YADR,EAAA,GAAA,EAQI,KARJ,IAQI,CAFF,EAAwC,EAAA,EAAA,GAAA;KAAhC,MAAM;KAAK,gBAAc;IAAO,CAAA,GAAA,EAAA,MACxC,EAAG,EAAA,CAAA,CAAC,CAAC,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA,KAKX,EAAA,SADb,EAAA,GAAA,EAOI,KAPJ,IAOI,EADC,EAAA,KAAS,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAId,EA8BM,OA9BN,IA8BM,CA7BJ,EASS,UAAA;KARP,MAAK;KACL,eAAY;KACZ,OAAK,EAAA,CAAC,sOAAoO,EAAA,yCAEvL,EAAA,UAAS,CAAA,CAAA;KAD3D,UAAU,EAAA;KAEV,SAAO;IAEL,GAAA,EAAA,EAAA,CAAA,CAAC,CAAC,UAAU,MAAM,GAAA,IAAA,EAAA,GAEvB,EAkBS,UAAA;KAjBP,MAAK;KACL,eAAY;KACX,OAAK,EAAE,EAAA,EAAA,CAAe;KACtB,UAAQ,CAAG,EAAA;KACX,SAAO;IAEI,GAAA,CAAA,EAAA,aAAZ,EAAA,GAAA,EAOO,QAPP,IAOO,CANL,EAIE,EAAA,EAAA,GAAA;KAHA,OAAM;KACL,MAAM;KACN,gBAAc;IACf,CAAA,GAAA,EAAA,MACF,EAAG,EAAA,CAAA,CAAC,CAAC,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA,MAExB,EAAA,GAAA,EAEO,QAAA,IAAA,EADF,EAAA,CAAA,CAAC,CAAC,UAAU,IAAI,GAAA,CAAA,EAAA,GAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/cdn/chunks/{TestEmailPanel-ByqDSx8B.js → TestEmailPanel-DXLxvyrD.js}

@@ -5,7 +5,7 @@ var o = /* @__PURE__ */ t({
 	__name: "TestEmailPanel",
 	props: { feature: {} },
 	setup(t) {
-		let o = t, s = a(() => import("./TestEmailModal-B2LcU11Y.js"));
+		let o = t, s = a(() => import("./TestEmailModal-_CZvaO58.js"));
 		function c(e) {
 			o.feature.send(e);
 		}
@@ -32,4 +32,4 @@ var o = /* @__PURE__ */ t({
 //#endregion
 export { o as default };
 
-//# sourceMappingURL=TestEmailPanel-ByqDSx8B.js.map
+//# sourceMappingURL=TestEmailPanel-DXLxvyrD.js.map