@templatical/editor 0.21.0 → 0.21.2

package/dist/cdn/chunks/SnapshotHistory-Bf1uovti.js

@@ -0,0 +1,121 @@
+import { M as e, P as t, V as n, Z as r, ct as i, f as a, g as o, h as s, it as c, l, n as u, ot as d, p as f, u as p, x as m, y as h, z as g } from "./draggable-D840DIZB.js";
+import "./useEditorCore-BA6mspzD.js";
+import { t as _ } from "./dist-CxTt8FRE.js";
+import { t as v } from "./useI18n-8Wd7G-cq.js";
+import { Dt as y, Mt as b, Nt as x, Pt as S, rt as C } from "./icons-CYWw8Xfp.js";
+import { n as w } from "./useCloudI18n-BjNENqkM.js";
+import { t as T } from "./formatRelativeTime-CtUU-QZ8.js";
+//#region src/cloud/components/SnapshotHistory.vue?vue&type=script&setup=true&lang.ts
+var E = ["disabled", "title"], D = ["title"], O = {
+	key: 0,
+	class: "tpl-scale-in tpl:absolute tpl:top-full tpl:left-1/2 tpl:z-50 tpl:mt-2 tpl:w-72 tpl:-translate-x-1/2 tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg-elevated)] tpl:border tpl:border-[var(--tpl-border)] tpl:shadow-[var(--tpl-shadow-lg)]",
+	style: {
+		"backdrop-filter": "blur(8px)",
+		"-webkit-backdrop-filter": "blur(8px)"
+	}
+}, k = { class: "tpl:border-b tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)] tpl:border-[var(--tpl-border)]" }, A = {
+	key: 0,
+	class: "tpl:flex tpl:items-center tpl:justify-center tpl:py-8"
+}, j = {
+	key: 1,
+	class: "tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]"
+}, M = {
+	key: 2,
+	class: "tpl:max-h-64 tpl:overflow-y-auto"
+}, N = ["disabled", "onClick"], P = { class: "tpl:flex tpl:flex-col tpl:gap-0.5" }, F = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]" }, I = {
+	key: 0,
+	class: "tpl:rounded tpl:px-1 tpl:py-0.5 tpl:text-[10px] tpl:font-normal tpl:bg-[var(--tpl-bg-active)] tpl:text-[var(--tpl-text-muted)]"
+}, L = ["disabled", "title"], R = /* @__PURE__ */ m({
+	__name: "SnapshotHistory",
+	props: {
+		snapshots: {},
+		isLoading: { type: Boolean },
+		isRestoring: { type: Boolean }
+	},
+	emits: ["load", "navigate"],
+	setup(m, { emit: R }) {
+		let z = m, B = R, { format: V } = v(), { t: H } = w(), U = r(!1), W = r(null), G = r(-1);
+		g(() => z.snapshots.length, () => {
+			G.value = -1;
+		});
+		let K = a(() => G.value > 0 && z.snapshots.length > 0 && !z.isRestoring), q = a(() => G.value < z.snapshots.length - 1 && z.snapshots.length > 0 && !z.isRestoring);
+		function J() {
+			K.value && (G.value--, B("navigate", z.snapshots[G.value]));
+		}
+		function Y() {
+			q.value && (G.value++, B("navigate", z.snapshots[G.value]));
+		}
+		function X() {
+			U.value = !U.value, U.value && z.snapshots.length === 0 && B("load");
+		}
+		function Z(e) {
+			let t = z.snapshots.findIndex((t) => t.id === e);
+			t !== -1 && (G.value = t, B("navigate", z.snapshots[t])), U.value = !1;
+		}
+		function Q(e) {
+			let t = T(e, H.snapshotHistory, V, 7);
+			return t === null ? new Date(e).toLocaleDateString(void 0, {
+				month: "short",
+				day: "numeric",
+				hour: "2-digit",
+				minute: "2-digit"
+			}) : t;
+		}
+		return _(W, () => {
+			U.value = !1;
+		}), (r, a) => (e(), o("div", {
+			ref_key: "dropdownRef",
+			ref: W,
+			class: "tpl:relative tpl:flex tpl:items-center tpl:gap-0.5"
+		}, [
+			f("button", {
+				class: "tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] disabled:tpl:cursor-not-allowed disabled:tpl:opacity-30 disabled:hover:tpl:bg-transparent tpl:text-[var(--tpl-text-muted)]",
+				disabled: !q.value,
+				title: c(H).snapshotHistory.olderSnapshot,
+				onClick: l(Y, ["stop"])
+			}, [h(c(x), {
+				size: 14,
+				"stroke-width": 2
+			})], 8, E),
+			f("button", {
+				class: "tpl:flex tpl:h-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-0.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-1.5 tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]",
+				title: c(H).snapshotHistory.tooltip,
+				onClick: l(X, ["stop"])
+			}, [h(c(y), {
+				size: 16,
+				"stroke-width": 1.5
+			}), h(c(S), {
+				class: d(["tpl:transition-transform tpl:duration-150", { "tpl:rotate-180": U.value }]),
+				size: 10,
+				"stroke-width": 2
+			}, null, 8, ["class"])], 8, D),
+			h(u, { name: "tpl-dropdown" }, {
+				default: n(() => [U.value ? (e(), o("div", O, [f("div", k, i(c(H).snapshotHistory.dropdownTitle), 1), m.isLoading ? (e(), o("div", A, [h(c(C), {
+					class: "tpl:animate-spin tpl:text-[var(--tpl-primary)]",
+					size: 20,
+					"stroke-width": 2
+				})])) : m.snapshots.length === 0 ? (e(), o("div", j, i(c(H).snapshotHistory.noSnapshots), 1)) : (e(), o("div", M, [(e(!0), o(p, null, t(m.snapshots, (t) => (e(), o("button", {
+					key: t.id,
+					class: "tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:border-b tpl:border-b-[var(--tpl-border-light)] tpl:border-l-2 tpl:border-l-transparent tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-all tpl:duration-150 last:tpl:border-b-0 hover:tpl:border-l-[var(--tpl-primary)] hover:tpl:bg-[var(--tpl-bg-hover)]",
+					style: { "background-color": "transparent" },
+					disabled: m.isRestoring,
+					onClick: (e) => Z(t.id)
+				}, [f("div", P, [f("div", F, [f("span", null, i(Q(t.created_at)), 1), t.is_autosave ? (e(), o("span", I, i(c(H).snapshotHistory.auto), 1)) : s("", !0)])])], 8, N))), 128))]))])) : s("", !0)]),
+				_: 1
+			}),
+			f("button", {
+				class: "tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] disabled:tpl:cursor-not-allowed disabled:tpl:opacity-30 disabled:hover:tpl:bg-transparent tpl:text-[var(--tpl-text-muted)]",
+				disabled: !K.value,
+				title: c(H).snapshotHistory.newerSnapshot,
+				onClick: l(J, ["stop"])
+			}, [h(c(b), {
+				size: 14,
+				"stroke-width": 2
+			})], 8, L)
+		], 512));
+	}
+});
+//#endregion
+export { R as default };
+
+//# sourceMappingURL=SnapshotHistory-Bf1uovti.js.map

package/dist/cdn/chunks/SnapshotHistory-Bf1uovti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnapshotHistory-Bf1uovti.js","names":[],"sources":["../../../src/cloud/components/SnapshotHistory.vue","../../../src/cloud/components/SnapshotHistory.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { formatRelativeTime } from \"../../utils/formatRelativeTime\";\nimport type { TemplateSnapshot } from \"@templatical/types\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport {\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  Clock,\n  LoaderCircle,\n} from \"@lucide/vue\";\nimport { computed, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  snapshots: TemplateSnapshot[];\n  isLoading: boolean;\n  isRestoring: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"load\"): void;\n  (e: \"navigate\", snapshot: TemplateSnapshot): void;\n}>();\n\nconst { format } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst isOpen = ref(false);\nconst dropdownRef = ref<HTMLElement | null>(null);\n\n// Track current position in snapshot history (0 = most recent)\nconst currentIndex = ref(-1);\n\n// Reset index when snapshots change (e.g., after a save creates a new snapshot)\nwatch(\n  () => props.snapshots.length,\n  () => {\n    currentIndex.value = -1;\n  },\n);\n\nconst canGoNewer = computed(() => {\n  return (\n    currentIndex.value > 0 && props.snapshots.length > 0 && !props.isRestoring\n  );\n});\n\nconst canGoOlder = computed(() => {\n  return (\n    currentIndex.value < props.snapshots.length - 1 &&\n    props.snapshots.length > 0 &&\n    !props.isRestoring\n  );\n});\n\nfunction goNewer(): void {\n  if (!canGoNewer.value) return;\n  currentIndex.value--;\n  emit(\"navigate\", props.snapshots[currentIndex.value]);\n}\n\nfunction goOlder(): void {\n  if (!canGoOlder.value) return;\n  currentIndex.value++;\n  emit(\"navigate\", props.snapshots[currentIndex.value]);\n}\n\nfunction toggleDropdown(): void {\n  isOpen.value = !isOpen.value;\n  if (isOpen.value && props.snapshots.length === 0) {\n    emit(\"load\");\n  }\n}\n\nfunction handleRestore(snapshotId: string): void {\n  const index = props.snapshots.findIndex((s) => s.id === snapshotId);\n  if (index !== -1) {\n    currentIndex.value = index;\n    emit(\"navigate\", props.snapshots[index]);\n  }\n  isOpen.value = false;\n}\n\nfunction formatDate(dateString: string): string {\n  const result = formatRelativeTime(\n    dateString,\n    cloudT.snapshotHistory,\n    format,\n    7,\n  );\n  if (result !== null) return result;\n\n  return new Date(dateString).toLocaleDateString(undefined, {\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  });\n}\n\nonClickOutside(dropdownRef, () => {\n  isOpen.value = false;\n});\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    class=\"tpl:relative tpl:flex tpl:items-center tpl:gap-0.5\"\n  >\n    <!-- Go to older snapshot -->\n    <button\n      class=\"tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] disabled:tpl:cursor-not-allowed disabled:tpl:opacity-30 disabled:hover:tpl:bg-transparent tpl:text-[var(--tpl-text-muted)]\"\n      :disabled=\"!canGoOlder\"\n      :title=\"cloudT.snapshotHistory.olderSnapshot\"\n      @click.stop=\"goOlder\"\n    >\n      <ChevronLeft :size=\"14\" :stroke-width=\"2\" />\n    </button>\n\n    <!-- History dropdown toggle -->\n    <button\n      class=\"tpl:flex tpl:h-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-0.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-1.5 tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n      :title=\"cloudT.snapshotHistory.tooltip\"\n      @click.stop=\"toggleDropdown\"\n    >\n      <Clock :size=\"16\" :stroke-width=\"1.5\" />\n      <ChevronDown\n        class=\"tpl:transition-transform tpl:duration-150\"\n        :class=\"{ 'tpl:rotate-180': isOpen }\"\n        :size=\"10\"\n        :stroke-width=\"2\"\n      />\n    </button>\n\n    <Transition name=\"tpl-dropdown\">\n      <div\n        v-if=\"isOpen\"\n        class=\"tpl-scale-in tpl:absolute tpl:top-full tpl:left-1/2 tpl:z-50 tpl:mt-2 tpl:w-72 tpl:-translate-x-1/2 tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg-elevated)] tpl:border tpl:border-[var(--tpl-border)] tpl:shadow-[var(--tpl-shadow-lg)]\"\n        style=\"backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px)\"\n      >\n        <div\n          class=\"tpl:border-b tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)] tpl:border-[var(--tpl-border)]\"\n        >\n          {{ cloudT.snapshotHistory.dropdownTitle }}\n        </div>\n\n        <div\n          v-if=\"isLoading\"\n          class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8\"\n        >\n          <LoaderCircle\n            class=\"tpl:animate-spin tpl:text-[var(--tpl-primary)]\"\n            :size=\"20\"\n            :stroke-width=\"2\"\n          />\n        </div>\n\n        <div\n          v-else-if=\"snapshots.length === 0\"\n          class=\"tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.snapshotHistory.noSnapshots }}\n        </div>\n\n        <div v-else class=\"tpl:max-h-64 tpl:overflow-y-auto\">\n          <button\n            v-for=\"snapshot in snapshots\"\n            :key=\"snapshot.id\"\n            class=\"tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:border-b tpl:border-b-[var(--tpl-border-light)] tpl:border-l-2 tpl:border-l-transparent tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-all tpl:duration-150 last:tpl:border-b-0 hover:tpl:border-l-[var(--tpl-primary)] hover:tpl:bg-[var(--tpl-bg-hover)]\"\n            style=\"background-color: transparent\"\n            :disabled=\"isRestoring\"\n            @click=\"handleRestore(snapshot.id)\"\n          >\n            <div class=\"tpl:flex tpl:flex-col tpl:gap-0.5\">\n              <div\n                class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n              >\n                <span>{{ formatDate(snapshot.created_at) }}</span>\n                <span\n                  v-if=\"snapshot.is_autosave\"\n                  class=\"tpl:rounded tpl:px-1 tpl:py-0.5 tpl:text-[10px] tpl:font-normal tpl:bg-[var(--tpl-bg-active)] tpl:text-[var(--tpl-text-muted)]\"\n                >\n                  {{ cloudT.snapshotHistory.auto }}\n                </span>\n              </div>\n            </div>\n          </button>\n        </div>\n      </div>\n    </Transition>\n\n    <!-- Go to newer snapshot -->\n    <button\n      class=\"tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] disabled:tpl:cursor-not-allowed disabled:tpl:opacity-30 disabled:hover:tpl:bg-transparent tpl:text-[var(--tpl-text-muted)]\"\n      :disabled=\"!canGoNewer\"\n      :title=\"cloudT.snapshotHistory.newerSnapshot\"\n      @click.stop=\"goNewer\"\n    >\n      <ChevronRight :size=\"14\" :stroke-width=\"2\" />\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { formatRelativeTime } from \"../../utils/formatRelativeTime\";\nimport type { TemplateSnapshot } from \"@templatical/types\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport {\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  Clock,\n  LoaderCircle,\n} from \"@lucide/vue\";\nimport { computed, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  snapshots: TemplateSnapshot[];\n  isLoading: boolean;\n  isRestoring: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"load\"): void;\n  (e: \"navigate\", snapshot: TemplateSnapshot): void;\n}>();\n\nconst { format } = useI18n();\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst isOpen = ref(false);\nconst dropdownRef = ref<HTMLElement | null>(null);\n\n// Track current position in snapshot history (0 = most recent)\nconst currentIndex = ref(-1);\n\n// Reset index when snapshots change (e.g., after a save creates a new snapshot)\nwatch(\n  () => props.snapshots.length,\n  () => {\n    currentIndex.value = -1;\n  },\n);\n\nconst canGoNewer = computed(() => {\n  return (\n    currentIndex.value > 0 && props.snapshots.length > 0 && !props.isRestoring\n  );\n});\n\nconst canGoOlder = computed(() => {\n  return (\n    currentIndex.value < props.snapshots.length - 1 &&\n    props.snapshots.length > 0 &&\n    !props.isRestoring\n  );\n});\n\nfunction goNewer(): void {\n  if (!canGoNewer.value) return;\n  currentIndex.value--;\n  emit(\"navigate\", props.snapshots[currentIndex.value]);\n}\n\nfunction goOlder(): void {\n  if (!canGoOlder.value) return;\n  currentIndex.value++;\n  emit(\"navigate\", props.snapshots[currentIndex.value]);\n}\n\nfunction toggleDropdown(): void {\n  isOpen.value = !isOpen.value;\n  if (isOpen.value && props.snapshots.length === 0) {\n    emit(\"load\");\n  }\n}\n\nfunction handleRestore(snapshotId: string): void {\n  const index = props.snapshots.findIndex((s) => s.id === snapshotId);\n  if (index !== -1) {\n    currentIndex.value = index;\n    emit(\"navigate\", props.snapshots[index]);\n  }\n  isOpen.value = false;\n}\n\nfunction formatDate(dateString: string): string {\n  const result = formatRelativeTime(\n    dateString,\n    cloudT.snapshotHistory,\n    format,\n    7,\n  );\n  if (result !== null) return result;\n\n  return new Date(dateString).toLocaleDateString(undefined, {\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  });\n}\n\nonClickOutside(dropdownRef, () => {\n  isOpen.value = false;\n});\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    class=\"tpl:relative tpl:flex tpl:items-center tpl:gap-0.5\"\n  >\n    <!-- Go to older snapshot -->\n    <button\n      class=\"tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] disabled:tpl:cursor-not-allowed disabled:tpl:opacity-30 disabled:hover:tpl:bg-transparent tpl:text-[var(--tpl-text-muted)]\"\n      :disabled=\"!canGoOlder\"\n      :title=\"cloudT.snapshotHistory.olderSnapshot\"\n      @click.stop=\"goOlder\"\n    >\n      <ChevronLeft :size=\"14\" :stroke-width=\"2\" />\n    </button>\n\n    <!-- History dropdown toggle -->\n    <button\n      class=\"tpl:flex tpl:h-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:gap-0.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:px-1.5 tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n      :title=\"cloudT.snapshotHistory.tooltip\"\n      @click.stop=\"toggleDropdown\"\n    >\n      <Clock :size=\"16\" :stroke-width=\"1.5\" />\n      <ChevronDown\n        class=\"tpl:transition-transform tpl:duration-150\"\n        :class=\"{ 'tpl:rotate-180': isOpen }\"\n        :size=\"10\"\n        :stroke-width=\"2\"\n      />\n    </button>\n\n    <Transition name=\"tpl-dropdown\">\n      <div\n        v-if=\"isOpen\"\n        class=\"tpl-scale-in tpl:absolute tpl:top-full tpl:left-1/2 tpl:z-50 tpl:mt-2 tpl:w-72 tpl:-translate-x-1/2 tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:bg-[var(--tpl-bg-elevated)] tpl:border tpl:border-[var(--tpl-border)] tpl:shadow-[var(--tpl-shadow-lg)]\"\n        style=\"backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px)\"\n      >\n        <div\n          class=\"tpl:border-b tpl:px-3 tpl:py-2 tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)] tpl:border-[var(--tpl-border)]\"\n        >\n          {{ cloudT.snapshotHistory.dropdownTitle }}\n        </div>\n\n        <div\n          v-if=\"isLoading\"\n          class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8\"\n        >\n          <LoaderCircle\n            class=\"tpl:animate-spin tpl:text-[var(--tpl-primary)]\"\n            :size=\"20\"\n            :stroke-width=\"2\"\n          />\n        </div>\n\n        <div\n          v-else-if=\"snapshots.length === 0\"\n          class=\"tpl:px-3 tpl:py-6 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.snapshotHistory.noSnapshots }}\n        </div>\n\n        <div v-else class=\"tpl:max-h-64 tpl:overflow-y-auto\">\n          <button\n            v-for=\"snapshot in snapshots\"\n            :key=\"snapshot.id\"\n            class=\"tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-center tpl:border-b tpl:border-b-[var(--tpl-border-light)] tpl:border-l-2 tpl:border-l-transparent tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-all tpl:duration-150 last:tpl:border-b-0 hover:tpl:border-l-[var(--tpl-primary)] hover:tpl:bg-[var(--tpl-bg-hover)]\"\n            style=\"background-color: transparent\"\n            :disabled=\"isRestoring\"\n            @click=\"handleRestore(snapshot.id)\"\n          >\n            <div class=\"tpl:flex tpl:flex-col tpl:gap-0.5\">\n              <div\n                class=\"tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n              >\n                <span>{{ formatDate(snapshot.created_at) }}</span>\n                <span\n                  v-if=\"snapshot.is_autosave\"\n                  class=\"tpl:rounded tpl:px-1 tpl:py-0.5 tpl:text-[10px] tpl:font-normal tpl:bg-[var(--tpl-bg-active)] tpl:text-[var(--tpl-text-muted)]\"\n                >\n                  {{ cloudT.snapshotHistory.auto }}\n                </span>\n              </div>\n            </div>\n          </button>\n        </div>\n      </div>\n    </Transition>\n\n    <!-- Go to newer snapshot -->\n    <button\n      class=\"tpl:flex tpl:size-7 tpl:shrink-0 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:bg-transparent tpl:transition-colors tpl:duration-150 hover:tpl:bg-[var(--tpl-bg-hover)] disabled:tpl:cursor-not-allowed disabled:tpl:opacity-30 disabled:hover:tpl:bg-transparent tpl:text-[var(--tpl-text-muted)]\"\n      :disabled=\"!canGoNewer\"\n      :title=\"cloudT.snapshotHistory.newerSnapshot\"\n      @click.stop=\"goNewer\"\n    >\n      <ChevronRight :size=\"14\" :stroke-width=\"2\" />\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/TemplateScoringPanel-CTk8WwxU.js

@@ -0,0 +1,231 @@
+import { L as e, M as t, P as n, T as r, V as ee, Z as i, ct as a, g as o, h as s, it as c, m as l, n as u, ot as te, p as d, st as f, u as p, v as m, x as h, y as g, z as ne } from "./draggable-D840DIZB.js";
+import { B as _, F as v, T as y, h as b } from "./keys-D7kUmfpE.js";
+import { At as x, D as re, O as S, Pt as ie, R as C, St as ae, n as oe, rt as se, t as ce, u as le, ut as ue, w } from "./icons-CYWw8Xfp.js";
+import { t as T } from "./LoadingTrack-D-CW2tUa.js";
+import { t as E } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { n as D } from "./useCloudI18n-BjNENqkM.js";
+//#region src/cloud/utils/scoringStyles.ts
+function O(e) {
+	return e >= 80 ? "var(--tpl-success)" : e >= 60 ? "var(--tpl-warning)" : "var(--tpl-danger)";
+}
+function k(e) {
+	return e >= 80 ? "var(--tpl-success-light)" : e >= 60 ? "var(--tpl-warning-light)" : "var(--tpl-danger-light)";
+}
+function A(e) {
+	return e === "high" ? "var(--tpl-danger)" : e === "medium" ? "var(--tpl-warning)" : "var(--tpl-text-muted)";
+}
+function j(e) {
+	return e === "high" ? "var(--tpl-danger-light)" : e === "medium" ? "var(--tpl-warning-light)" : "var(--tpl-bg-hover)";
+}
+//#endregion
+//#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)]"
+}, 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"
+}, z = { class: "tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, B = {
+	key: 1,
+	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
+}, V = { class: "tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, H = {
+	key: 2,
+	class: "tpl:flex tpl:flex-col tpl:gap-4"
+}, U = { class: "tpl:text-xs tpl:font-medium tpl:uppercase tpl:tracking-wider tpl:text-[var(--tpl-text-muted)]" }, de = {
+	key: 0,
+	class: "tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
+}, fe = {
+	key: 0,
+	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)]"
+}, pe = ["onClick"], me = { class: "tpl:flex-1 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]" }, he = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]"
+}, ge = {
+	key: 0,
+	class: "tpl:border-t tpl:border-[var(--tpl-border)]"
+}, _e = {
+	key: 0,
+	class: "tpl:px-3 tpl:py-3 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]"
+}, ve = { class: "tpl:flex tpl:items-start tpl:gap-2" }, ye = { class: "tpl:flex-1 tpl:min-w-0" }, be = { class: "tpl:flex tpl:items-start tpl:gap-1.5" }, xe = { class: "tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]" }, Se = {
+	key: 0,
+	class: "tpl:mt-1 tpl:text-[11px] tpl:leading-snug tpl:text-[var(--tpl-text-dim)]"
+}, Ce = {
+	key: 1,
+	class: "tpl:mt-2 tpl:flex tpl:justify-center"
+}, we = ["disabled", "onClick"], Te = {
+	key: 0,
+	class: "tpl:mt-1.5 tpl:text-[11px] tpl:text-[var(--tpl-danger)]"
+}, Ee = {
+	key: 3,
+	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
+}, De = { class: "tpl:max-w-[240px] tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, Oe = { 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)]" }, W = /*#__PURE__*/ E(/* @__PURE__ */ h({
+	__name: "TemplateScoringPanel",
+	props: { visible: { type: Boolean } },
+	emits: ["close"],
+	setup(h, { emit: E }) {
+		let W = h, G = E, { t: K } = D(), q = _(b, "TemplateScoringPanel"), J = _(v, "TemplateScoringPanel"), Y = r(y, []), X = i({
+			spam: !0,
+			readability: !0,
+			accessibility: !0,
+			bestPractices: !0
+		});
+		function ke(e) {
+			X.value[e] = !X.value[e];
+		}
+		let Z = [
+			"spam",
+			"readability",
+			"accessibility",
+			"bestPractices"
+		], Ae = {
+			spam: re,
+			readability: ae,
+			accessibility: w,
+			bestPractices: ce
+		};
+		function Q() {
+			J.score(q.content.value, Y);
+		}
+		ne(() => W.visible, (e) => {
+			e && !J.scoringResult.value && !J.isScoring.value && Q();
+		});
+		async function je(e) {
+			if (!e.blockId) return;
+			let t = q.content.value.blocks.find((t) => t.id === e.blockId);
+			if (!t) return;
+			let n = t.content;
+			if (!n) return;
+			let r = await J.fixFinding(n, e, Y);
+			r && (q.updateBlock(e.blockId, { content: r }), J.removeFinding(e.category, e.id));
+		}
+		function $() {
+			return J.scoringResult.value ? Z.reduce((e, t) => e + (J.scoringResult.value?.categories[t]?.findings.length ?? 0), 0) : 0;
+		}
+		return (r, i) => (t(), l(u, {
+			"enter-active-class": "tpl-scoring-slide-enter-active",
+			"enter-from-class": "tpl:translate-x-full",
+			"enter-to-class": "tpl:translate-x-0",
+			"leave-active-class": "tpl-scoring-slide-leave-active",
+			"leave-from-class": "tpl:translate-x-0",
+			"leave-to-class": "tpl:translate-x-full"
+		}, {
+			default: ee(() => [h.visible ? (t(), o("div", M, [d("div", N, [d("div", P, [g(c(S), {
+				size: 13,
+				"stroke-width": 2
+			}), d("span", null, a(c(K).scoring.title), 1)]), d("div", F, [c(J).scoringResult.value && !c(J).isScoring.value ? (t(), o("button", {
+				key: 0,
+				class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
+				title: c(K).scoring.rescore,
+				onClick: i[0] ||= (e) => Q()
+			}, [g(c(C), {
+				size: 14,
+				"stroke-width": 2
+			})], 8, I)) : s("", !0), d("button", {
+				class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
+				onClick: i[1] ||= (e) => G("close")
+			}, [g(c(oe), {
+				size: 14,
+				"stroke-width": 2
+			})])])]), d("div", L, [c(J).isScoring.value ? (t(), o("div", R, [d("p", z, a(c(K).scoring.scoring), 1), g(T, { class: "tpl:w-3/4" })])) : c(J).error.value && !c(J).scoringResult.value ? (t(), o("div", B, [
+				g(c(x), {
+					size: 32,
+					"stroke-width": 1.5,
+					class: "tpl:text-[var(--tpl-danger)]"
+				}),
+				d("p", V, a(c(K).scoring.error), 1),
+				d("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:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text-muted)]",
+					onClick: i[2] ||= (e) => Q()
+				}, [g(c(C), {
+					size: 12,
+					"stroke-width": 2
+				}), m(" " + a(c(K).scoring.rescore), 1)])
+			])) : c(J).scoringResult.value ? (t(), o("div", H, [
+				d("div", {
+					class: "tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:p-5",
+					style: f({ backgroundColor: c(k)(c(J).scoringResult.value.score) })
+				}, [
+					d("span", {
+						class: "tpl:text-4xl tpl:font-bold tpl:tabular-nums",
+						style: f({ color: c(O)(c(J).scoringResult.value.score) })
+					}, a(c(J).scoringResult.value.score), 5),
+					d("span", U, a(c(K).scoring.overallScore), 1),
+					$() > 0 ? (t(), o("span", de, a($()) + " " + a(c(K).scoring.findings), 1)) : s("", !0)
+				], 4),
+				c(J).fixError.value ? (t(), o("div", fe, [g(c(x), {
+					size: 14,
+					"stroke-width": 2,
+					class: "tpl:mt-0.5 tpl:shrink-0"
+				}), d("span", null, a(c(K).scoring.fixError), 1)])) : s("", !0),
+				(t(), o(p, null, n(Z, (r) => d("div", {
+					key: r,
+					class: "tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)]"
+				}, [d("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:duration-100 tpl:bg-[var(--tpl-bg)]",
+					onClick: (e) => ke(r)
+				}, [
+					(t(), l(e(Ae[r]), {
+						size: 14,
+						"stroke-width": 2,
+						style: f({ color: c(O)(c(J).scoringResult.value.categories[r].score) })
+					}, null, 8, ["style"])),
+					d("span", me, a(c(K).scoring.categories[r]), 1),
+					d("span", {
+						class: "tpl:rounded-full tpl:px-2 tpl:py-0.5 tpl:text-xs tpl:font-semibold tpl:tabular-nums",
+						style: f({
+							color: c(O)(c(J).scoringResult.value.categories[r].score),
+							backgroundColor: c(k)(c(J).scoringResult.value.categories[r].score)
+						})
+					}, a(c(J).scoringResult.value.categories[r].score), 5),
+					c(J).scoringResult.value.categories[r].findings.length > 0 ? (t(), o("span", he, a(c(J).scoringResult.value.categories[r].findings.length), 1)) : s("", !0),
+					g(c(ie), {
+						size: 12,
+						"stroke-width": 2,
+						class: te(["tpl:transition-transform tpl:duration-200 tpl:text-[var(--tpl-text-dim)]", X.value[r] ? "tpl:rotate-0" : "tpl:-rotate-90"])
+					}, null, 8, ["class"])
+				], 8, pe), X.value[r] ? (t(), o("div", ge, [c(J).scoringResult.value.categories[r].findings.length === 0 ? (t(), o("div", _e, a(c(K).scoring.noFindings), 1)) : s("", !0), (t(!0), o(p, null, n(c(J).scoringResult.value.categories[r].findings, (n) => (t(), o("div", {
+					key: n.id,
+					class: "tpl:border-t tpl:px-3 tpl:py-2.5 first:tpl:border-t-0 tpl:border-[var(--tpl-border-light)]"
+				}, [d("div", ve, [(t(), l(e(c(n.severity === "high" ? x : n.severity === "medium" ? le : ue)), {
+					size: 13,
+					"stroke-width": 2,
+					class: "tpl:mt-0.5 tpl:shrink-0",
+					style: f({ color: c(A)(n.severity) })
+				}, null, 8, ["style"])), d("div", ye, [
+					d("div", be, [d("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: f({
+							color: c(A)(n.severity),
+							backgroundColor: c(j)(n.severity)
+						})
+					}, a(c(K).scoring.severity[n.severity]), 5), d("span", xe, a(n.message), 1)]),
+					n.suggestion ? (t(), o("p", Se, a(n.suggestion), 1)) : s("", !0),
+					n.blockId ? (t(), o("div", Ce, [d("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:duration-150 tpl:disabled:opacity-50 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-primary)]",
+						style: { "background-color": "transparent" },
+						disabled: c(J).fixingFindingId.value !== null,
+						onClick: (e) => je(n)
+					}, [c(J).fixingFindingId.value === n.id ? (t(), l(c(se), {
+						key: 0,
+						class: "tpl-spinner",
+						size: 11,
+						"stroke-width": 2
+					})) : (t(), l(c(w), {
+						key: 1,
+						size: 11,
+						"stroke-width": 2
+					})), m(" " + a(c(J).fixingFindingId.value === n.id ? c(K).scoring.fixing : c(K).scoring.fix), 1)], 8, we), c(J).fixError.value ? (t(), o("p", Te, a(c(J).fixError.value), 1)) : s("", !0)])) : s("", !0)
+				])])]))), 128))])) : s("", !0)])), 64))
+			])) : (t(), o("div", Ee, [g(c(S), {
+				size: 32,
+				"stroke-width": 1.5,
+				class: "tpl:text-[var(--tpl-text-dim)]"
+			}), d("p", De, a(c(K).scoring.emptyState), 1)])), d("p", Oe, a(c(K).aiMenu.disclaimer), 1)])])) : s("", !0)]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-c23c73d4"]]);
+//#endregion
+export { W as default };
+
+//# sourceMappingURL=TemplateScoringPanel-CTk8WwxU.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateScoringPanel-CTk8WwxU.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:z-panel 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:duration-150 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:duration-150 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:duration-150 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:duration-100 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 first:tpl: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:duration-150 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:z-panel 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:duration-150 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:duration-150 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:duration-150 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:duration-100 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 first:tpl: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:duration-150 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-BJTDxFHh.js

@@ -0,0 +1,96 @@
+import { H as e, M as t, P as n, V as r, Z as i, a, ct as o, g as s, h as c, it as l, m as u, ot as d, p as f, u as p, v as m, x as h, y as g, z as _ } from "./draggable-D840DIZB.js";
+import "./useEditorCore-BA6mspzD.js";
+import { rt as v } from "./icons-CYWw8Xfp.js";
+import { n as y } from "./useCloudI18n-BjNENqkM.js";
+import { t as b } from "./TplModal-CH9RzKF7.js";
+//#region src/cloud/components/TestEmailModal.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-busy"], S = {
+	id: "tpl-test-email-title",
+	class: "tpl:mb-4 tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
+}, C = { class: "tpl:mb-3" }, w = { class: "tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, T = ["value"], E = ["disabled"], D = ["value"], O = {
+	key: 0,
+	role: "alert",
+	class: "tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]"
+}, k = { class: "tpl:flex tpl:justify-end tpl:gap-2" }, A = ["disabled"], j = ["disabled"], M = {
+	key: 0,
+	class: "tpl:flex tpl:items-center tpl:gap-1.5"
+}, N = { key: 1 }, P = /* @__PURE__ */ h({
+	__name: "TestEmailModal",
+	props: {
+		visible: { type: Boolean },
+		allowedEmails: {},
+		isSending: { type: Boolean },
+		error: {}
+	},
+	emits: ["send", "close"],
+	setup(h, { emit: P }) {
+		let F = h, I = P, { t: L } = y(), R = i("");
+		_(() => F.visible, (e) => {
+			e && (R.value = F.allowedEmails[0] ?? "");
+		});
+		function z() {
+			!R.value || F.isSending || I("send", R.value);
+		}
+		function B() {
+			F.isSending || I("close");
+		}
+		function V(e) {
+			e.key === "Enter" && !e.shiftKey && (e.preventDefault(), z()), e.key === "Escape" && B();
+		}
+		return (i, _) => (t(), u(b, {
+			visible: h.visible,
+			onClose: B,
+			onKeydown: V
+		}, {
+			default: r(() => [f("div", {
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-busy": h.isSending,
+				"aria-labelledby": "tpl-test-email-title",
+				class: "tpl-scale-in tpl:mx-4 tpl:w-full tpl:max-w-sm tpl:rounded-[var(--tpl-radius-lg)] tpl:p-5",
+				style: {
+					"background-color": "var(--tpl-bg-elevated)",
+					"box-shadow": "var(--tpl-shadow-xl)"
+				}
+			}, [
+				f("h3", S, o(l(L).testEmail.title), 1),
+				f("div", C, [f("label", w, o(l(L).testEmail.recipientLabel), 1), h.allowedEmails.length === 1 ? (t(), s("input", {
+					key: 0,
+					type: "text",
+					value: R.value,
+					disabled: "",
+					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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"
+				}, null, 8, T)) : e((t(), s("select", {
+					key: 1,
+					"onUpdate:modelValue": _[0] ||= (e) => R.value = e,
+					class: "tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1 tpl:text-sm tpl:shadow-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]",
+					disabled: h.isSending
+				}, [(t(!0), s(p, null, n(h.allowedEmails, (e) => (t(), s("option", {
+					key: e,
+					value: e
+				}, o(e), 9, D))), 128))], 8, E)), [[a, R.value]])]),
+				h.error ? (t(), s("p", O, o(h.error), 1)) : c("", !0),
+				f("div", k, [f("button", {
+					type: "button",
+					class: d(["tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]", { "tpl:cursor-not-allowed tpl:opacity-50": h.isSending }]),
+					disabled: h.isSending,
+					onClick: B
+				}, o(l(L).testEmail.cancel), 11, A), f("button", {
+					type: "button",
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
+					disabled: !R.value || h.isSending,
+					onClick: z
+				}, [h.isSending ? (t(), s("span", M, [g(l(v), {
+					class: "tpl:animate-spin",
+					size: 12,
+					"stroke-width": 2
+				}), m(" " + o(l(L).testEmail.sending), 1)])) : (t(), s("span", N, o(l(L).testEmail.send), 1))], 8, j)])
+			], 8, x)]),
+			_: 1
+		}, 8, ["visible"]));
+	}
+});
+//#endregion
+export { P as default };
+
+//# sourceMappingURL=TestEmailModal-BJTDxFHh.js.map

package/dist/cdn/chunks/TestEmailModal-BJTDxFHh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestEmailModal-BJTDxFHh.js","names":[],"sources":["../../../src/cloud/components/TestEmailModal.vue","../../../src/cloud/components/TestEmailModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"../../components/TplModal.vue\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  allowedEmails: string[];\n  isSending: boolean;\n  error: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst recipient = ref(\"\");\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      recipient.value = props.allowedEmails[0] ?? \"\";\n    }\n  },\n);\n\nfunction handleSend(): void {\n  if (!recipient.value || props.isSending) {\n    return;\n  }\n\n  emit(\"send\", recipient.value);\n}\n\nfunction handleClose(): void {\n  if (!props.isSending) {\n    emit(\"close\");\n  }\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    <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:mx-4 tpl:w-full tpl:max-w-sm 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:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ cloudT.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.testEmail.recipientLabel }}\n        </label>\n        <input\n          v-if=\"allowedEmails.length === 1\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n        <select\n          v-else\n          v-model=\"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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSending\"\n        >\n          <option v-for=\"email in allowedEmails\" :key=\"email\" :value=\"email\">\n            {{ email }}\n          </option>\n        </select>\n      </div>\n\n      <!-- Error message -->\n      <p\n        v-if=\"error\"\n        role=\"alert\"\n        class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ error }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\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-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{\n            'tpl:cursor-not-allowed tpl:opacity-50': isSending,\n          }\"\n          @click=\"handleClose\"\n        >\n          {{ cloudT.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          :disabled=\"!recipient || isSending\"\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            {{ cloudT.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ cloudT.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n","<script setup lang=\"ts\">\nimport TplModal from \"../../components/TplModal.vue\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { LoaderCircle } from \"@lucide/vue\";\nimport { ref, watch } from \"vue\";\n\nconst props = defineProps<{\n  visible: boolean;\n  allowedEmails: string[];\n  isSending: boolean;\n  error: string | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"send\", recipient: string): void;\n  (e: \"close\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst recipient = ref(\"\");\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (visible) {\n      recipient.value = props.allowedEmails[0] ?? \"\";\n    }\n  },\n);\n\nfunction handleSend(): void {\n  if (!recipient.value || props.isSending) {\n    return;\n  }\n\n  emit(\"send\", recipient.value);\n}\n\nfunction handleClose(): void {\n  if (!props.isSending) {\n    emit(\"close\");\n  }\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    <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:mx-4 tpl:w-full tpl:max-w-sm 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:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n      >\n        {{ cloudT.testEmail.title }}\n      </h3>\n\n      <!-- Recipient -->\n      <div class=\"tpl:mb-3\">\n        <label\n          class=\"tpl:mb-1.5 tpl:block tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ cloudT.testEmail.recipientLabel }}\n        </label>\n        <input\n          v-if=\"allowedEmails.length === 1\"\n          type=\"text\"\n          :value=\"recipient\"\n          disabled\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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n        />\n        <select\n          v-else\n          v-model=\"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-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]\"\n          :disabled=\"isSending\"\n        >\n          <option v-for=\"email in allowedEmails\" :key=\"email\" :value=\"email\">\n            {{ email }}\n          </option>\n        </select>\n      </div>\n\n      <!-- Error message -->\n      <p\n        v-if=\"error\"\n        role=\"alert\"\n        class=\"tpl:mb-3 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n      >\n        {{ error }}\n      </p>\n\n      <!-- Actions -->\n      <div class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n        <button\n          type=\"button\"\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-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n          :disabled=\"isSending\"\n          :class=\"{\n            'tpl:cursor-not-allowed tpl:opacity-50': isSending,\n          }\"\n          @click=\"handleClose\"\n        >\n          {{ cloudT.testEmail.cancel }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n          :disabled=\"!recipient || isSending\"\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            {{ cloudT.testEmail.sending }}\n          </span>\n          <span v-else>\n            {{ cloudT.testEmail.send }}\n          </span>\n        </button>\n      </div>\n    </div>\n  </TplModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GAOR,IAAO,GAKP,EAAE,GAAG,MAAW,EAAmB,GAEnC,IAAY,EAAI,EAAE;EAExB,QACQ,EAAM,UACX,MAAY;GACX,AAAI,MACF,EAAU,QAAQ,EAAM,cAAc,MAAM;EAEhD,CACF;EAEA,SAAS,IAAmB;GACtB,CAAC,EAAU,SAAS,EAAM,aAI9B,EAAK,QAAQ,EAAU,KAAK;EAC9B;EAEA,SAAS,IAAoB;GAC3B,AAAK,EAAM,aACT,EAAK,OAAO;EAEhB;EAEA,SAAS,EAAc,GAA4B;GAKjD,AAJI,EAAM,QAAQ,WAAW,CAAC,EAAM,aAClC,EAAM,eAAe,GACrB,EAAW,IAET,EAAM,QAAQ,YAChB,EAAY;EAEhB;yBAIE,EAuFW,GAAA;GAvFA,SAAS,EAAA;GAAU,SAAO;GAAc,WAAS;;oBAsFpD,CArFN,EAqFM,OAAA;IApFJ,MAAK;IACL,cAAW;IACV,aAAW,EAAA;IACZ,mBAAgB;IAChB,OAAM;IACN,OAAA;KAAA,oBAAA;KAAA,cAAA;IAAA;;IAKA,EAKK,MALL,GAKK,EADA,EAAA,CAAA,CAAM,CAAC,UAAU,KAAK,GAAA,CAAA;IAI3B,EAuBM,OAvBN,GAuBM,CAtBJ,EAIQ,SAJR,GAIQ,EADH,EAAA,CAAA,CAAM,CAAC,UAAU,cAAc,GAAA,CAAA,GAG5B,EAAA,cAAc,WAAM,KAAA,EAAA,GAD5B,EAME,SAAA;;KAJA,MAAK;KACJ,OAAO,EAAA;KACR,UAAA;KACA,OAAM;8BAER,EASS,UAAA;;8CAPW,QAAA;KAClB,OAAM;KACL,UAAU,EAAA;gBAEX,EAES,GAAA,MAAA,EAFe,EAAA,gBAAT,YAAf,EAES,UAAA;KAF+B,KAAK;KAAQ,OAAO;SACvD,CAAK,GAAA,GAAA,CAAA,0BALD,EAAA,KAAS,CAAA,CAAA,CAAA,CAAA;IAYd,EAAA,SAAA,EAAA,GADR,EAMI,KANJ,GAMI,EADC,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAIV,EA8BM,OA9BN,GA8BM,CA7BJ,EAUS,UAAA;KATP,MAAK;KACL,OAAK,EAAA,CAAC,mOAAiO,EAAA,yCAExK,EAAA,UAAA,CAAA,CAAA;KAD9D,UAAU,EAAA;KAIV,SAAO;SAEL,EAAA,CAAA,CAAM,CAAC,UAAU,MAAM,GAAA,IAAA,CAAA,GAE5B,EAiBS,UAAA;KAhBP,MAAK;KACL,OAAM;KACL,UAAQ,CAAG,EAAA,SAAa,EAAA;KACxB,SAAO;QAEI,EAAA,aAAA,EAAA,GAAZ,EAOO,QAPP,GAOO,CANL,EAIE,EAAA,CAAA,GAAA;KAHA,OAAM;KACL,MAAM;KACN,gBAAc;UACf,MACF,EAAG,EAAA,CAAA,CAAM,CAAC,UAAU,OAAO,GAAA,CAAA,CAAA,CAAA,MAAA,EAAA,GAE7B,EAEO,QAAA,GAAA,EADF,EAAA,CAAA,CAAM,CAAC,UAAU,IAAI,GAAA,CAAA,EAAA,GAAA,GAAA,CAAA,CAAA,CAAA"}