@templatical/editor 0.25.1 → 0.26.0

package/dist/cdn/chunks/{AiChatSidebar-D6jGwb4y.js → AiChatSidebar-BHqNxNcX.js}

@@ -1,11 +1,11 @@
-import { H as e, M as t, O as n, P as r, T as i, V as ee, Z as a, ct as o, g as s, h as c, it as l, m as u, n as d, o as te, ot as ne, p as f, u as p, v as m, x as h, y as g, z as _ } from "./draggable-BRF_Q_jB.js";
-import { _ as re, g as ie } from "./dist-Dp46rwVY.js";
-import { E as ae, G as v, g as oe, i as se, l as ce } from "./keys-CZOBuCQd.js";
-import { E as y, Mt as b, N as le, V as ue, at as de, c as fe, d as pe, n as me } from "./icons-DN008liP.js";
-import { t as x } from "./LoadingTrack-CiNg9s16.js";
+import { H as e, M as t, O as n, P as r, T as i, V as ee, Z as a, g as o, h as s, it as c, lt as l, m as u, n as d, o as te, p as f, st as ne, u as p, v as m, x as h, y as g, z as _ } from "./draggable-DCs9qL-b.js";
+import { _ as re, g as ie } from "./dist-C6z8AjBC.js";
+import { E as ae, G as v, g as oe, i as se, l as ce } from "./keys-Cmc2Yl3D.js";
+import { B as y, E as b, M as le, Mt as ue, c as de, d as fe, it as pe, n as me } from "./icons-CvYN6zrM.js";
+import { t as x } from "./LoadingTrack-C52ZGL5q.js";
 import { t as S } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { t as C } from "./useAliveFlag-Ctyt3GgH.js";
-import { _ as w } from "./cloud-CxNsW3hp.js";
+import { t as C } from "./useAliveFlag-Dxwgo6P4.js";
+import { _ as w } from "./cloud-CuItCnN_.js";
 //#region src/cloud/components/AiChatSidebar.vue?vue&type=script&setup=true&lang.ts
 var T = {
 	key: 0,
@@ -109,22 +109,22 @@ var T = {
 			"leave-from-class": "tpl:translate-x-0",
 			"leave-to-class": "tpl:translate-x-full"
 		}, {
-			default: ee(() => [h.visible ? (t(), s("div", T, [
-				f("div", E, [f("div", D, [g(l(y), {
+			default: ee(() => [h.visible ? (t(), o("div", T, [
+				f("div", E, [f("div", D, [g(c(b), {
 					size: 13,
 					"stroke-width": 2
-				}), f("span", null, o(l(V).aiChat.title), 1)]), f("div", O, [(l(G).messages.value?.length ?? 0) > 0 ? (t(), s("button", {
+				}), f("span", null, l(c(V).aiChat.title), 1)]), f("div", O, [(c(G).messages.value?.length ?? 0) > 0 ? (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: l(V).aiChat.clear,
-					onClick: i[0] ||= (e) => l(G).clearChat()
-				}, [g(l(pe), {
+					title: c(V).aiChat.clear,
+					onClick: i[0] ||= (e) => c(G).clearChat()
+				}, [g(c(fe), {
 					size: 14,
 					"stroke-width": 2
-				})], 8, k)) : c("", !0), f("button", {
+				})], 8, k)) : s("", !0), f("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) => Ce("close")
-				}, [g(l(me), {
+				}, [g(c(me), {
 					size: 14,
 					"stroke-width": 2
 				})])])]),
@@ -133,18 +133,18 @@ var T = {
 						ref_key: "messagesContainer",
 						ref: q,
 						class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4"
-					}, [l(G).isLoadingHistory.value ? (t(), s("div", j, [g(l(de), {
+					}, [c(G).isLoadingHistory.value ? (t(), o("div", j, [g(c(pe), {
 						class: "tpl-spinner tpl:text-[var(--tpl-text-muted)]",
 						size: 24,
 						"stroke-width": 2
-					}), f("p", M, o(l(V).aiChat.loadingHistory), 1)])) : (l(G).messages.value?.length ?? 0) === 0 ? (t(), s("div", N, [g(l(y), {
+					}), f("p", M, l(c(V).aiChat.loadingHistory), 1)])) : (c(G).messages.value?.length ?? 0) === 0 ? (t(), o("div", N, [g(c(b), {
 						size: 32,
 						"stroke-width": 1.5,
 						class: "tpl:text-[var(--tpl-text-dim)]"
-					}), f("p", P, o(l(V).aiChat.placeholder), 1)])) : (t(), s("div", F, [(t(!0), s(p, null, r(l(G).messages.value, (e, n) => (t(), s("div", {
+					}), f("p", P, l(c(V).aiChat.placeholder), 1)])) : (t(), o("div", F, [(t(!0), o(p, null, r(c(G).messages.value, (e, n) => (t(), o("div", {
 						key: e.id,
 						class: "tpl:flex tpl:flex-col tpl:gap-2"
-					}, [e.role === "user" ? (t(), s("div", I, o(e.content), 1)) : (t(), s("div", L, [!$(e.content) && l(G).isGenerating.value && n === (l(G).messages.value?.length ?? 0) - 1 ? (t(), u(x, { key: 0 })) : (t(), s("div", R, o($(e.content) || l(V).aiChat.applied), 1)), e.id === l(G).lastApplyMessageId.value && !l(G).isGenerating.value ? (t(), s("button", {
+					}, [e.role === "user" ? (t(), o("div", I, l(e.content), 1)) : (t(), o("div", L, [!$(e.content) && c(G).isGenerating.value && n === (c(G).messages.value?.length ?? 0) - 1 ? (t(), u(x, { key: 0 })) : (t(), o("div", R, l($(e.content) || c(V).aiChat.applied), 1)), e.id === c(G).lastApplyMessageId.value && !c(G).isGenerating.value ? (t(), o("button", {
 						key: 2,
 						class: "tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
 						style: {
@@ -152,22 +152,22 @@ var T = {
 							color: "var(--tpl-text-muted)",
 							"background-color": "transparent"
 						},
-						onClick: i[2] ||= (e) => l(G).toggleLastRevert()
-					}, [l(G).isLastChangeReverted.value ? (t(), s(p, { key: 0 }, [g(l(ue), {
+						onClick: i[2] ||= (e) => c(G).toggleLastRevert()
+					}, [c(G).isLastChangeReverted.value ? (t(), o(p, { key: 0 }, [g(c(y), {
 						size: 12,
 						"stroke-width": 2
-					}), m(" " + o(l(V).aiChat.reapply), 1)], 64)) : (t(), s(p, { key: 1 }, [g(l(fe), {
+					}), m(" " + l(c(V).aiChat.reapply), 1)], 64)) : (t(), o(p, { key: 1 }, [g(c(de), {
 						size: 12,
 						"stroke-width": 2
-					}), m(" " + o(l(V).aiChat.revert), 1)], 64))])) : c("", !0)]))]))), 128))]))], 512),
-					l(G).error.value ? (t(), s("div", z, [g(l(b), {
+					}), m(" " + l(c(V).aiChat.revert), 1)], 64))])) : s("", !0)]))]))), 128))]))], 512),
+					c(G).error.value ? (t(), o("div", z, [g(c(ue), {
 						size: 14,
 						"stroke-width": 2,
 						class: "tpl:mt-0.5 tpl:shrink-0"
-					}), f("span", null, o(l(G).error.value === "ai_apply_failed" ? l(V).aiChat.applyFailed : l(V).aiChat.error), 1)])) : c("", !0),
-					(l(G).suggestions.value?.length ?? 0) > 0 ? (t(), s("div", he, [f("div", ge, [(t(!0), s(p, null, r(l(G).suggestions.value ?? [], (e, n) => (t(), s("button", {
+					}), f("span", null, l(c(G).error.value === "ai_apply_failed" ? c(V).aiChat.applyFailed : c(V).aiChat.error), 1)])) : s("", !0),
+					(c(G).suggestions.value?.length ?? 0) > 0 ? (t(), o("div", he, [f("div", ge, [(t(!0), o(p, null, r(c(G).suggestions.value ?? [], (e, n) => (t(), o("button", {
 						key: n,
-						class: ne(["tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out", (l(G).suggestions.value?.length ?? 0) - 1 - n < Y.value ? "tpl:translate-y-0 tpl:opacity-100" : "tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0"]),
+						class: ne(["tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out", (c(G).suggestions.value?.length ?? 0) - 1 - n < Y.value ? "tpl:translate-y-0 tpl:opacity-100" : "tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0"]),
 						style: {
 							"border-color": "var(--tpl-border)",
 							color: "var(--tpl-primary)",
@@ -175,24 +175,24 @@ var T = {
 							"box-shadow": "var(--tpl-shadow)"
 						},
 						onClick: (t) => De(e)
-					}, o(e), 11, _e))), 128))])])) : c("", !0)
+					}, l(e), 11, _e))), 128))])])) : s("", !0)
 				]),
 				f("div", ve, [f("div", ye, [e(f("textarea", {
 					"onUpdate:modelValue": i[3] ||= (e) => K.value = e,
 					class: "tpl:max-h-32 tpl:min-h-[64px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-sm tpl:outline-none tpl:text-[var(--tpl-text)]",
-					placeholder: l(V).aiChat.inputPlaceholder,
-					disabled: l(G).isGenerating.value,
+					placeholder: c(V).aiChat.inputPlaceholder,
+					disabled: c(G).isGenerating.value,
 					rows: "3",
 					onKeydown: Oe
 				}, null, 40, be), [[te, K.value]]), f("button", {
 					class: "tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]",
-					disabled: !K.value.trim() || l(G).isGenerating.value,
+					disabled: !K.value.trim() || c(G).isGenerating.value,
 					onClick: Q
-				}, [g(l(le), {
+				}, [g(c(le), {
 					size: 16,
 					"stroke-width": 2
-				})], 8, xe)]), f("p", Se, o(l(V).aiMenu.disclaimer), 1)])
-			])) : c("", !0)]),
+				})], 8, xe)]), f("p", Se, l(c(V).aiMenu.disclaimer), 1)])
+			])) : s("", !0)]),
 			_: 1
 		}));
 	}
@@ -200,4 +200,4 @@ var T = {
 //#endregion
 export { B as default };
 
-//# sourceMappingURL=AiChatSidebar-D6jGwb4y.js.map
+//# sourceMappingURL=AiChatSidebar-BHqNxNcX.js.map

package/dist/cdn/chunks/{AiChatSidebar-D6jGwb4y.js.map → AiChatSidebar-BHqNxNcX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AiChatSidebar-D6jGwb4y.js","names":[],"sources":["../../../src/cloud/components/AiChatSidebar.vue","../../../src/cloud/components/AiChatSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport { useAiChat } from \"@templatical/core/cloud\";\nimport {\n  CLOUD_TRANSLATIONS_KEY,\n  EDITOR_KEY,\n  AUTH_MANAGER_KEY,\n  MERGE_TAGS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport { useAliveFlag } from \"../../composables/useAliveFlag\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  LoaderCircle,\n  Redo2,\n  Send,\n  Sparkles,\n  Trash2,\n  Undo2,\n  X,\n} from \"@lucide/vue\";\nimport { inject, nextTick, ref, watch } from \"vue\";\nimport { useIntervalFn, useTimeoutFn } from \"@vueuse/core\";\n\nconst props = defineProps<{\n  visible: boolean;\n  onApply?: (content: TemplateContent) => void;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst cloudTranslations = requireInject(\n  CLOUD_TRANSLATIONS_KEY,\n  \"AiChatSidebar\",\n);\nconst editor = requireInject(EDITOR_KEY, \"AiChatSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"AiChatSidebar\");\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst aliveFlag = useAliveFlag();\n\nconst aiChat = useAiChat({\n  authManager,\n  getTemplateId: () => editor.state.template?.id ?? null,\n  onApply: props.onApply,\n  onError: undefined,\n});\n\nconst promptInput = ref(\"\");\nconst messagesContainer = ref<HTMLElement | null>(null);\nconst historyLoaded = ref(false);\nconst visibleSuggestionCount = ref(0);\n\nconst { pause: pauseReveal, resume: resumeReveal } = useIntervalFn(\n  () => {\n    const count = aiChat.suggestions.value?.length ?? 0;\n    if (visibleSuggestionCount.value < count) {\n      visibleSuggestionCount.value++;\n    } else {\n      pauseReveal();\n    }\n  },\n  150,\n  { immediate: false },\n);\n\nconst { start: startRevealTimeout } = useTimeoutFn(() => resumeReveal(), 100, {\n  immediate: false,\n});\n\nwatch(\n  () => aiChat.suggestions.value?.length ?? 0,\n  (count) => {\n    pauseReveal();\n    if (count === 0) {\n      visibleSuggestionCount.value = 0;\n      return;\n    }\n\n    visibleSuggestionCount.value = 0;\n    startRevealTimeout();\n  },\n);\n\nfunction scrollToBottom(): void {\n  nextTick(() => {\n    if (messagesContainer.value) {\n      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;\n    }\n  });\n}\n\nwatch(\n  () => aiChat.messages.value?.length ?? 0,\n  () => scrollToBottom(),\n);\n\nwatch(\n  () => props.visible,\n  async (isVisible) => {\n    if (isVisible && !historyLoaded.value) {\n      historyLoaded.value = true;\n      await aiChat.loadConversation();\n      if (!aliveFlag.alive) return;\n\n      if (\n        (aiChat.messages.value?.length ?? 0) === 0 &&\n        editor.content.value.blocks.length === 0\n      ) {\n        aiChat.loadSuggestions(editor.content.value, mergeTags);\n      }\n    }\n  },\n);\n\nasync function handleSend(): Promise<void> {\n  const prompt = promptInput.value.trim();\n  if (!prompt || aiChat.isGenerating.value) {\n    return;\n  }\n\n  promptInput.value = \"\";\n  aiChat.error.value = null;\n  aiChat.failedPrompt.value = null;\n  scrollToBottom();\n\n  await aiChat.sendPrompt(prompt, editor.content.value, mergeTags);\n  if (!aliveFlag.alive) return;\n\n  if (aiChat.failedPrompt.value) {\n    promptInput.value = aiChat.failedPrompt.value;\n  }\n\n  scrollToBottom();\n}\n\nfunction stripJsonBlock(text: string): string {\n  return text\n    .replace(/```json[\\s\\S]*?```/g, \"\")\n    .replace(/```json[\\s\\S]*/g, \"\")\n    .trim();\n}\n\nfunction handleSuggestionClick(suggestion: string): void {\n  pauseReveal();\n  promptInput.value = suggestion;\n  handleSend();\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-ai-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-ai-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-ai-sidebar 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          <Sparkles :size=\"13\" :stroke-width=\"2\" />\n          <span>\n            {{ cloudTranslations.aiChat.title }}\n          </span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"(aiChat.messages.value?.length ?? 0) > 0\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n            :title=\"cloudTranslations.aiChat.clear\"\n            @click=\"aiChat.clearChat()\"\n          >\n            <Trash2 :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      <!-- Messages wrapper -->\n      <div class=\"tpl:relative tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col\">\n        <!-- Messages -->\n        <div\n          ref=\"messagesContainer\"\n          class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\"\n        >\n          <!-- Loading history state -->\n          <div\n            v-if=\"aiChat.isLoadingHistory.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            <LoaderCircle\n              class=\"tpl-spinner tpl:text-[var(--tpl-text-muted)]\"\n              :size=\"24\"\n              :stroke-width=\"2\"\n            />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudTranslations.aiChat.loadingHistory }}\n            </p>\n          </div>\n\n          <!-- Empty state -->\n          <div\n            v-else-if=\"(aiChat.messages.value?.length ?? 0) === 0\"\n            class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n          >\n            <Sparkles\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              {{ cloudTranslations.aiChat.placeholder }}\n            </p>\n          </div>\n\n          <!-- Message list -->\n          <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n            <div\n              v-for=\"(message, index) in aiChat.messages.value\"\n              :key=\"message.id\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-2\"\n            >\n              <!-- User message -->\n              <div\n                v-if=\"message.role === 'user'\"\n                class=\"tpl:self-end tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm\"\n                style=\"\n                  background-color: var(--tpl-primary-light);\n                  color: var(--tpl-text);\n                  max-width: 85%;\n                  box-shadow: var(--tpl-shadow);\n                \"\n              >\n                {{ message.content }}\n              </div>\n\n              <!-- Assistant message -->\n              <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n                <LoadingTrack\n                  v-if=\"\n                    !stripJsonBlock(message.content) &&\n                    aiChat.isGenerating.value &&\n                    index === (aiChat.messages.value?.length ?? 0) - 1\n                  \"\n                />\n                <div\n                  v-else\n                  class=\"tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm tpl:whitespace-pre-wrap\"\n                  style=\"\n                    max-width: 85%;\n                    background-color: var(--tpl-bg);\n                    color: var(--tpl-text);\n                    box-shadow: var(--tpl-shadow);\n                  \"\n                >\n                  {{\n                    stripJsonBlock(message.content) ||\n                    cloudTranslations.aiChat.applied\n                  }}\n                </div>\n                <button\n                  v-if=\"\n                    message.id === aiChat.lastApplyMessageId.value &&\n                    !aiChat.isGenerating.value\n                  \"\n                  class=\"tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n                  style=\"\n                    border-color: var(--tpl-border);\n                    color: var(--tpl-text-muted);\n                    background-color: transparent;\n                  \"\n                  @click=\"aiChat.toggleLastRevert()\"\n                >\n                  <template v-if=\"aiChat.isLastChangeReverted.value\">\n                    <Redo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.reapply }}\n                  </template>\n                  <template v-else>\n                    <Undo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.revert }}\n                  </template>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Error message -->\n        <div\n          v-if=\"aiChat.error.value\"\n          class=\"tpl:mx-3 tpl:mb-2 tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs\"\n          style=\"\n            background-color: var(--tpl-danger-light);\n            color: var(--tpl-danger);\n          \"\n        >\n          <CircleAlert\n            :size=\"14\"\n            :stroke-width=\"2\"\n            class=\"tpl:mt-0.5 tpl:shrink-0\"\n          />\n          <span>{{\n            aiChat.error.value === \"ai_apply_failed\"\n              ? cloudTranslations.aiChat.applyFailed\n              : cloudTranslations.aiChat.error\n          }}</span>\n        </div>\n\n        <!-- Suggestions (overlay) -->\n        <div\n          v-if=\"(aiChat.suggestions.value?.length ?? 0) > 0\"\n          class=\"tpl:absolute tpl:right-0 tpl:bottom-0 tpl:left-0 tpl:z-10 tpl:px-3 tpl:pb-3\"\n          style=\"\n            background-color: color-mix(\n              in srgb,\n              var(--tpl-bg) 50%,\n              transparent\n            );\n            backdrop-filter: blur(2px);\n          \"\n        >\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <button\n              v-for=\"(suggestion, index) in aiChat.suggestions.value ?? []\"\n              :key=\"index\"\n              class=\"tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out\"\n              :class=\"\n                (aiChat.suggestions.value?.length ?? 0) - 1 - index <\n                visibleSuggestionCount\n                  ? 'tpl:translate-y-0 tpl:opacity-100'\n                  : 'tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0'\n              \"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-primary);\n                background-color: var(--tpl-bg);\n                box-shadow: var(--tpl-shadow);\n              \"\n              @click=\"handleSuggestionClick(suggestion)\"\n            >\n              {{ suggestion }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Input area -->\n      <div class=\"tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]\">\n        <div\n          class=\"tpl-ai-input-wrapper tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n        >\n          <textarea\n            v-model=\"promptInput\"\n            class=\"tpl:max-h-32 tpl:min-h-[64px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-sm tpl:outline-none tpl:text-[var(--tpl-text)]\"\n            :placeholder=\"cloudTranslations.aiChat.inputPlaceholder\"\n            :disabled=\"aiChat.isGenerating.value\"\n            rows=\"3\"\n            @keydown=\"handleKeydown\"\n          />\n          <button\n            class=\"tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n            :disabled=\"!promptInput.trim() || aiChat.isGenerating.value\"\n            @click=\"handleSend\"\n          >\n            <Send :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudTranslations.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-ai-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-input-wrapper:focus-within {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-ai-send-btn:not(:disabled):hover {\n  transform: scale(1.05);\n}\n\n.tpl-suggestion-btn: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 { useAiChat } from \"@templatical/core/cloud\";\nimport {\n  CLOUD_TRANSLATIONS_KEY,\n  EDITOR_KEY,\n  AUTH_MANAGER_KEY,\n  MERGE_TAGS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport { useAliveFlag } from \"../../composables/useAliveFlag\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  LoaderCircle,\n  Redo2,\n  Send,\n  Sparkles,\n  Trash2,\n  Undo2,\n  X,\n} from \"@lucide/vue\";\nimport { inject, nextTick, ref, watch } from \"vue\";\nimport { useIntervalFn, useTimeoutFn } from \"@vueuse/core\";\n\nconst props = defineProps<{\n  visible: boolean;\n  onApply?: (content: TemplateContent) => void;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst cloudTranslations = requireInject(\n  CLOUD_TRANSLATIONS_KEY,\n  \"AiChatSidebar\",\n);\nconst editor = requireInject(EDITOR_KEY, \"AiChatSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"AiChatSidebar\");\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst aliveFlag = useAliveFlag();\n\nconst aiChat = useAiChat({\n  authManager,\n  getTemplateId: () => editor.state.template?.id ?? null,\n  onApply: props.onApply,\n  onError: undefined,\n});\n\nconst promptInput = ref(\"\");\nconst messagesContainer = ref<HTMLElement | null>(null);\nconst historyLoaded = ref(false);\nconst visibleSuggestionCount = ref(0);\n\nconst { pause: pauseReveal, resume: resumeReveal } = useIntervalFn(\n  () => {\n    const count = aiChat.suggestions.value?.length ?? 0;\n    if (visibleSuggestionCount.value < count) {\n      visibleSuggestionCount.value++;\n    } else {\n      pauseReveal();\n    }\n  },\n  150,\n  { immediate: false },\n);\n\nconst { start: startRevealTimeout } = useTimeoutFn(() => resumeReveal(), 100, {\n  immediate: false,\n});\n\nwatch(\n  () => aiChat.suggestions.value?.length ?? 0,\n  (count) => {\n    pauseReveal();\n    if (count === 0) {\n      visibleSuggestionCount.value = 0;\n      return;\n    }\n\n    visibleSuggestionCount.value = 0;\n    startRevealTimeout();\n  },\n);\n\nfunction scrollToBottom(): void {\n  nextTick(() => {\n    if (messagesContainer.value) {\n      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;\n    }\n  });\n}\n\nwatch(\n  () => aiChat.messages.value?.length ?? 0,\n  () => scrollToBottom(),\n);\n\nwatch(\n  () => props.visible,\n  async (isVisible) => {\n    if (isVisible && !historyLoaded.value) {\n      historyLoaded.value = true;\n      await aiChat.loadConversation();\n      if (!aliveFlag.alive) return;\n\n      if (\n        (aiChat.messages.value?.length ?? 0) === 0 &&\n        editor.content.value.blocks.length === 0\n      ) {\n        aiChat.loadSuggestions(editor.content.value, mergeTags);\n      }\n    }\n  },\n);\n\nasync function handleSend(): Promise<void> {\n  const prompt = promptInput.value.trim();\n  if (!prompt || aiChat.isGenerating.value) {\n    return;\n  }\n\n  promptInput.value = \"\";\n  aiChat.error.value = null;\n  aiChat.failedPrompt.value = null;\n  scrollToBottom();\n\n  await aiChat.sendPrompt(prompt, editor.content.value, mergeTags);\n  if (!aliveFlag.alive) return;\n\n  if (aiChat.failedPrompt.value) {\n    promptInput.value = aiChat.failedPrompt.value;\n  }\n\n  scrollToBottom();\n}\n\nfunction stripJsonBlock(text: string): string {\n  return text\n    .replace(/```json[\\s\\S]*?```/g, \"\")\n    .replace(/```json[\\s\\S]*/g, \"\")\n    .trim();\n}\n\nfunction handleSuggestionClick(suggestion: string): void {\n  pauseReveal();\n  promptInput.value = suggestion;\n  handleSend();\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-ai-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-ai-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-ai-sidebar 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          <Sparkles :size=\"13\" :stroke-width=\"2\" />\n          <span>\n            {{ cloudTranslations.aiChat.title }}\n          </span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"(aiChat.messages.value?.length ?? 0) > 0\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n            :title=\"cloudTranslations.aiChat.clear\"\n            @click=\"aiChat.clearChat()\"\n          >\n            <Trash2 :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      <!-- Messages wrapper -->\n      <div class=\"tpl:relative tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col\">\n        <!-- Messages -->\n        <div\n          ref=\"messagesContainer\"\n          class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\"\n        >\n          <!-- Loading history state -->\n          <div\n            v-if=\"aiChat.isLoadingHistory.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            <LoaderCircle\n              class=\"tpl-spinner tpl:text-[var(--tpl-text-muted)]\"\n              :size=\"24\"\n              :stroke-width=\"2\"\n            />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudTranslations.aiChat.loadingHistory }}\n            </p>\n          </div>\n\n          <!-- Empty state -->\n          <div\n            v-else-if=\"(aiChat.messages.value?.length ?? 0) === 0\"\n            class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n          >\n            <Sparkles\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              {{ cloudTranslations.aiChat.placeholder }}\n            </p>\n          </div>\n\n          <!-- Message list -->\n          <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n            <div\n              v-for=\"(message, index) in aiChat.messages.value\"\n              :key=\"message.id\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-2\"\n            >\n              <!-- User message -->\n              <div\n                v-if=\"message.role === 'user'\"\n                class=\"tpl:self-end tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm\"\n                style=\"\n                  background-color: var(--tpl-primary-light);\n                  color: var(--tpl-text);\n                  max-width: 85%;\n                  box-shadow: var(--tpl-shadow);\n                \"\n              >\n                {{ message.content }}\n              </div>\n\n              <!-- Assistant message -->\n              <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n                <LoadingTrack\n                  v-if=\"\n                    !stripJsonBlock(message.content) &&\n                    aiChat.isGenerating.value &&\n                    index === (aiChat.messages.value?.length ?? 0) - 1\n                  \"\n                />\n                <div\n                  v-else\n                  class=\"tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm tpl:whitespace-pre-wrap\"\n                  style=\"\n                    max-width: 85%;\n                    background-color: var(--tpl-bg);\n                    color: var(--tpl-text);\n                    box-shadow: var(--tpl-shadow);\n                  \"\n                >\n                  {{\n                    stripJsonBlock(message.content) ||\n                    cloudTranslations.aiChat.applied\n                  }}\n                </div>\n                <button\n                  v-if=\"\n                    message.id === aiChat.lastApplyMessageId.value &&\n                    !aiChat.isGenerating.value\n                  \"\n                  class=\"tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n                  style=\"\n                    border-color: var(--tpl-border);\n                    color: var(--tpl-text-muted);\n                    background-color: transparent;\n                  \"\n                  @click=\"aiChat.toggleLastRevert()\"\n                >\n                  <template v-if=\"aiChat.isLastChangeReverted.value\">\n                    <Redo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.reapply }}\n                  </template>\n                  <template v-else>\n                    <Undo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.revert }}\n                  </template>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Error message -->\n        <div\n          v-if=\"aiChat.error.value\"\n          class=\"tpl:mx-3 tpl:mb-2 tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs\"\n          style=\"\n            background-color: var(--tpl-danger-light);\n            color: var(--tpl-danger);\n          \"\n        >\n          <CircleAlert\n            :size=\"14\"\n            :stroke-width=\"2\"\n            class=\"tpl:mt-0.5 tpl:shrink-0\"\n          />\n          <span>{{\n            aiChat.error.value === \"ai_apply_failed\"\n              ? cloudTranslations.aiChat.applyFailed\n              : cloudTranslations.aiChat.error\n          }}</span>\n        </div>\n\n        <!-- Suggestions (overlay) -->\n        <div\n          v-if=\"(aiChat.suggestions.value?.length ?? 0) > 0\"\n          class=\"tpl:absolute tpl:right-0 tpl:bottom-0 tpl:left-0 tpl:z-10 tpl:px-3 tpl:pb-3\"\n          style=\"\n            background-color: color-mix(\n              in srgb,\n              var(--tpl-bg) 50%,\n              transparent\n            );\n            backdrop-filter: blur(2px);\n          \"\n        >\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <button\n              v-for=\"(suggestion, index) in aiChat.suggestions.value ?? []\"\n              :key=\"index\"\n              class=\"tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out\"\n              :class=\"\n                (aiChat.suggestions.value?.length ?? 0) - 1 - index <\n                visibleSuggestionCount\n                  ? 'tpl:translate-y-0 tpl:opacity-100'\n                  : 'tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0'\n              \"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-primary);\n                background-color: var(--tpl-bg);\n                box-shadow: var(--tpl-shadow);\n              \"\n              @click=\"handleSuggestionClick(suggestion)\"\n            >\n              {{ suggestion }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Input area -->\n      <div class=\"tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]\">\n        <div\n          class=\"tpl-ai-input-wrapper tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n        >\n          <textarea\n            v-model=\"promptInput\"\n            class=\"tpl:max-h-32 tpl:min-h-[64px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-sm tpl:outline-none tpl:text-[var(--tpl-text)]\"\n            :placeholder=\"cloudTranslations.aiChat.inputPlaceholder\"\n            :disabled=\"aiChat.isGenerating.value\"\n            rows=\"3\"\n            @keydown=\"handleKeydown\"\n          />\n          <button\n            class=\"tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n            :disabled=\"!promptInput.trim() || aiChat.isGenerating.value\"\n            @click=\"handleSend\"\n          >\n            <Send :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudTranslations.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-ai-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-input-wrapper:focus-within {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-ai-send-btn:not(:disabled):hover {\n  transform: scale(1.05);\n}\n\n.tpl-suggestion-btn: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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"}
+{"version":3,"file":"AiChatSidebar-BHqNxNcX.js","names":[],"sources":["../../../src/cloud/components/AiChatSidebar.vue","../../../src/cloud/components/AiChatSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport LoadingTrack from \"../../components/LoadingTrack.vue\";\nimport { useAiChat } from \"@templatical/core/cloud\";\nimport {\n  CLOUD_TRANSLATIONS_KEY,\n  EDITOR_KEY,\n  AUTH_MANAGER_KEY,\n  MERGE_TAGS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport { useAliveFlag } from \"../../composables/useAliveFlag\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  LoaderCircle,\n  Redo2,\n  Send,\n  Sparkles,\n  Trash2,\n  Undo2,\n  X,\n} from \"@lucide/vue\";\nimport { inject, nextTick, ref, watch } from \"vue\";\nimport { useIntervalFn, useTimeoutFn } from \"@vueuse/core\";\n\nconst props = defineProps<{\n  visible: boolean;\n  onApply?: (content: TemplateContent) => void;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst cloudTranslations = requireInject(\n  CLOUD_TRANSLATIONS_KEY,\n  \"AiChatSidebar\",\n);\nconst editor = requireInject(EDITOR_KEY, \"AiChatSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"AiChatSidebar\");\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst aliveFlag = useAliveFlag();\n\nconst aiChat = useAiChat({\n  authManager,\n  getTemplateId: () => editor.state.template?.id ?? null,\n  onApply: props.onApply,\n  onError: undefined,\n});\n\nconst promptInput = ref(\"\");\nconst messagesContainer = ref<HTMLElement | null>(null);\nconst historyLoaded = ref(false);\nconst visibleSuggestionCount = ref(0);\n\nconst { pause: pauseReveal, resume: resumeReveal } = useIntervalFn(\n  () => {\n    const count = aiChat.suggestions.value?.length ?? 0;\n    if (visibleSuggestionCount.value < count) {\n      visibleSuggestionCount.value++;\n    } else {\n      pauseReveal();\n    }\n  },\n  150,\n  { immediate: false },\n);\n\nconst { start: startRevealTimeout } = useTimeoutFn(() => resumeReveal(), 100, {\n  immediate: false,\n});\n\nwatch(\n  () => aiChat.suggestions.value?.length ?? 0,\n  (count) => {\n    pauseReveal();\n    if (count === 0) {\n      visibleSuggestionCount.value = 0;\n      return;\n    }\n\n    visibleSuggestionCount.value = 0;\n    startRevealTimeout();\n  },\n);\n\nfunction scrollToBottom(): void {\n  nextTick(() => {\n    if (messagesContainer.value) {\n      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;\n    }\n  });\n}\n\nwatch(\n  () => aiChat.messages.value?.length ?? 0,\n  () => scrollToBottom(),\n);\n\nwatch(\n  () => props.visible,\n  async (isVisible) => {\n    if (isVisible && !historyLoaded.value) {\n      historyLoaded.value = true;\n      await aiChat.loadConversation();\n      if (!aliveFlag.alive) return;\n\n      if (\n        (aiChat.messages.value?.length ?? 0) === 0 &&\n        editor.content.value.blocks.length === 0\n      ) {\n        aiChat.loadSuggestions(editor.content.value, mergeTags);\n      }\n    }\n  },\n);\n\nasync function handleSend(): Promise<void> {\n  const prompt = promptInput.value.trim();\n  if (!prompt || aiChat.isGenerating.value) {\n    return;\n  }\n\n  promptInput.value = \"\";\n  aiChat.error.value = null;\n  aiChat.failedPrompt.value = null;\n  scrollToBottom();\n\n  await aiChat.sendPrompt(prompt, editor.content.value, mergeTags);\n  if (!aliveFlag.alive) return;\n\n  if (aiChat.failedPrompt.value) {\n    promptInput.value = aiChat.failedPrompt.value;\n  }\n\n  scrollToBottom();\n}\n\nfunction stripJsonBlock(text: string): string {\n  return text\n    .replace(/```json[\\s\\S]*?```/g, \"\")\n    .replace(/```json[\\s\\S]*/g, \"\")\n    .trim();\n}\n\nfunction handleSuggestionClick(suggestion: string): void {\n  pauseReveal();\n  promptInput.value = suggestion;\n  handleSend();\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-ai-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-ai-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-ai-sidebar 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          <Sparkles :size=\"13\" :stroke-width=\"2\" />\n          <span>\n            {{ cloudTranslations.aiChat.title }}\n          </span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"(aiChat.messages.value?.length ?? 0) > 0\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n            :title=\"cloudTranslations.aiChat.clear\"\n            @click=\"aiChat.clearChat()\"\n          >\n            <Trash2 :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      <!-- Messages wrapper -->\n      <div class=\"tpl:relative tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col\">\n        <!-- Messages -->\n        <div\n          ref=\"messagesContainer\"\n          class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\"\n        >\n          <!-- Loading history state -->\n          <div\n            v-if=\"aiChat.isLoadingHistory.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            <LoaderCircle\n              class=\"tpl-spinner tpl:text-[var(--tpl-text-muted)]\"\n              :size=\"24\"\n              :stroke-width=\"2\"\n            />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudTranslations.aiChat.loadingHistory }}\n            </p>\n          </div>\n\n          <!-- Empty state -->\n          <div\n            v-else-if=\"(aiChat.messages.value?.length ?? 0) === 0\"\n            class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n          >\n            <Sparkles\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              {{ cloudTranslations.aiChat.placeholder }}\n            </p>\n          </div>\n\n          <!-- Message list -->\n          <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n            <div\n              v-for=\"(message, index) in aiChat.messages.value\"\n              :key=\"message.id\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-2\"\n            >\n              <!-- User message -->\n              <div\n                v-if=\"message.role === 'user'\"\n                class=\"tpl:self-end tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm\"\n                style=\"\n                  background-color: var(--tpl-primary-light);\n                  color: var(--tpl-text);\n                  max-width: 85%;\n                  box-shadow: var(--tpl-shadow);\n                \"\n              >\n                {{ message.content }}\n              </div>\n\n              <!-- Assistant message -->\n              <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n                <LoadingTrack\n                  v-if=\"\n                    !stripJsonBlock(message.content) &&\n                    aiChat.isGenerating.value &&\n                    index === (aiChat.messages.value?.length ?? 0) - 1\n                  \"\n                />\n                <div\n                  v-else\n                  class=\"tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm tpl:whitespace-pre-wrap\"\n                  style=\"\n                    max-width: 85%;\n                    background-color: var(--tpl-bg);\n                    color: var(--tpl-text);\n                    box-shadow: var(--tpl-shadow);\n                  \"\n                >\n                  {{\n                    stripJsonBlock(message.content) ||\n                    cloudTranslations.aiChat.applied\n                  }}\n                </div>\n                <button\n                  v-if=\"\n                    message.id === aiChat.lastApplyMessageId.value &&\n                    !aiChat.isGenerating.value\n                  \"\n                  class=\"tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n                  style=\"\n                    border-color: var(--tpl-border);\n                    color: var(--tpl-text-muted);\n                    background-color: transparent;\n                  \"\n                  @click=\"aiChat.toggleLastRevert()\"\n                >\n                  <template v-if=\"aiChat.isLastChangeReverted.value\">\n                    <Redo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.reapply }}\n                  </template>\n                  <template v-else>\n                    <Undo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.revert }}\n                  </template>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Error message -->\n        <div\n          v-if=\"aiChat.error.value\"\n          class=\"tpl:mx-3 tpl:mb-2 tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs\"\n          style=\"\n            background-color: var(--tpl-danger-light);\n            color: var(--tpl-danger);\n          \"\n        >\n          <CircleAlert\n            :size=\"14\"\n            :stroke-width=\"2\"\n            class=\"tpl:mt-0.5 tpl:shrink-0\"\n          />\n          <span>{{\n            aiChat.error.value === \"ai_apply_failed\"\n              ? cloudTranslations.aiChat.applyFailed\n              : cloudTranslations.aiChat.error\n          }}</span>\n        </div>\n\n        <!-- Suggestions (overlay) -->\n        <div\n          v-if=\"(aiChat.suggestions.value?.length ?? 0) > 0\"\n          class=\"tpl:absolute tpl:right-0 tpl:bottom-0 tpl:left-0 tpl:z-10 tpl:px-3 tpl:pb-3\"\n          style=\"\n            background-color: color-mix(\n              in srgb,\n              var(--tpl-bg) 50%,\n              transparent\n            );\n            backdrop-filter: blur(2px);\n          \"\n        >\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <button\n              v-for=\"(suggestion, index) in aiChat.suggestions.value ?? []\"\n              :key=\"index\"\n              class=\"tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out\"\n              :class=\"\n                (aiChat.suggestions.value?.length ?? 0) - 1 - index <\n                visibleSuggestionCount\n                  ? 'tpl:translate-y-0 tpl:opacity-100'\n                  : 'tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0'\n              \"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-primary);\n                background-color: var(--tpl-bg);\n                box-shadow: var(--tpl-shadow);\n              \"\n              @click=\"handleSuggestionClick(suggestion)\"\n            >\n              {{ suggestion }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Input area -->\n      <div class=\"tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]\">\n        <div\n          class=\"tpl-ai-input-wrapper tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n        >\n          <textarea\n            v-model=\"promptInput\"\n            class=\"tpl:max-h-32 tpl:min-h-[64px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-sm tpl:outline-none tpl:text-[var(--tpl-text)]\"\n            :placeholder=\"cloudTranslations.aiChat.inputPlaceholder\"\n            :disabled=\"aiChat.isGenerating.value\"\n            rows=\"3\"\n            @keydown=\"handleKeydown\"\n          />\n          <button\n            class=\"tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n            :disabled=\"!promptInput.trim() || aiChat.isGenerating.value\"\n            @click=\"handleSend\"\n          >\n            <Send :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudTranslations.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-ai-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-input-wrapper:focus-within {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-ai-send-btn:not(:disabled):hover {\n  transform: scale(1.05);\n}\n\n.tpl-suggestion-btn: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 { useAiChat } from \"@templatical/core/cloud\";\nimport {\n  CLOUD_TRANSLATIONS_KEY,\n  EDITOR_KEY,\n  AUTH_MANAGER_KEY,\n  MERGE_TAGS_KEY,\n  requireInject,\n} from \"../../keys\";\nimport { useAliveFlag } from \"../../composables/useAliveFlag\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport {\n  CircleAlert,\n  LoaderCircle,\n  Redo2,\n  Send,\n  Sparkles,\n  Trash2,\n  Undo2,\n  X,\n} from \"@lucide/vue\";\nimport { inject, nextTick, ref, watch } from \"vue\";\nimport { useIntervalFn, useTimeoutFn } from \"@vueuse/core\";\n\nconst props = defineProps<{\n  visible: boolean;\n  onApply?: (content: TemplateContent) => void;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"close\"): void;\n}>();\n\nconst cloudTranslations = requireInject(\n  CLOUD_TRANSLATIONS_KEY,\n  \"AiChatSidebar\",\n);\nconst editor = requireInject(EDITOR_KEY, \"AiChatSidebar\");\nconst authManager = requireInject(AUTH_MANAGER_KEY, \"AiChatSidebar\");\nconst mergeTags = inject(MERGE_TAGS_KEY, []);\nconst aliveFlag = useAliveFlag();\n\nconst aiChat = useAiChat({\n  authManager,\n  getTemplateId: () => editor.state.template?.id ?? null,\n  onApply: props.onApply,\n  onError: undefined,\n});\n\nconst promptInput = ref(\"\");\nconst messagesContainer = ref<HTMLElement | null>(null);\nconst historyLoaded = ref(false);\nconst visibleSuggestionCount = ref(0);\n\nconst { pause: pauseReveal, resume: resumeReveal } = useIntervalFn(\n  () => {\n    const count = aiChat.suggestions.value?.length ?? 0;\n    if (visibleSuggestionCount.value < count) {\n      visibleSuggestionCount.value++;\n    } else {\n      pauseReveal();\n    }\n  },\n  150,\n  { immediate: false },\n);\n\nconst { start: startRevealTimeout } = useTimeoutFn(() => resumeReveal(), 100, {\n  immediate: false,\n});\n\nwatch(\n  () => aiChat.suggestions.value?.length ?? 0,\n  (count) => {\n    pauseReveal();\n    if (count === 0) {\n      visibleSuggestionCount.value = 0;\n      return;\n    }\n\n    visibleSuggestionCount.value = 0;\n    startRevealTimeout();\n  },\n);\n\nfunction scrollToBottom(): void {\n  nextTick(() => {\n    if (messagesContainer.value) {\n      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;\n    }\n  });\n}\n\nwatch(\n  () => aiChat.messages.value?.length ?? 0,\n  () => scrollToBottom(),\n);\n\nwatch(\n  () => props.visible,\n  async (isVisible) => {\n    if (isVisible && !historyLoaded.value) {\n      historyLoaded.value = true;\n      await aiChat.loadConversation();\n      if (!aliveFlag.alive) return;\n\n      if (\n        (aiChat.messages.value?.length ?? 0) === 0 &&\n        editor.content.value.blocks.length === 0\n      ) {\n        aiChat.loadSuggestions(editor.content.value, mergeTags);\n      }\n    }\n  },\n);\n\nasync function handleSend(): Promise<void> {\n  const prompt = promptInput.value.trim();\n  if (!prompt || aiChat.isGenerating.value) {\n    return;\n  }\n\n  promptInput.value = \"\";\n  aiChat.error.value = null;\n  aiChat.failedPrompt.value = null;\n  scrollToBottom();\n\n  await aiChat.sendPrompt(prompt, editor.content.value, mergeTags);\n  if (!aliveFlag.alive) return;\n\n  if (aiChat.failedPrompt.value) {\n    promptInput.value = aiChat.failedPrompt.value;\n  }\n\n  scrollToBottom();\n}\n\nfunction stripJsonBlock(text: string): string {\n  return text\n    .replace(/```json[\\s\\S]*?```/g, \"\")\n    .replace(/```json[\\s\\S]*/g, \"\")\n    .trim();\n}\n\nfunction handleSuggestionClick(suggestion: string): void {\n  pauseReveal();\n  promptInput.value = suggestion;\n  handleSend();\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key === \"Enter\" && !event.shiftKey) {\n    event.preventDefault();\n    handleSend();\n  }\n}\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl-ai-slide-enter-active\"\n    enter-from-class=\"tpl:translate-x-full\"\n    enter-to-class=\"tpl:translate-x-0\"\n    leave-active-class=\"tpl-ai-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-ai-sidebar 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          <Sparkles :size=\"13\" :stroke-width=\"2\" />\n          <span>\n            {{ cloudTranslations.aiChat.title }}\n          </span>\n        </div>\n        <div class=\"tpl:flex tpl:items-center tpl:gap-1\">\n          <button\n            v-if=\"(aiChat.messages.value?.length ?? 0) > 0\"\n            class=\"tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]\"\n            :title=\"cloudTranslations.aiChat.clear\"\n            @click=\"aiChat.clearChat()\"\n          >\n            <Trash2 :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      <!-- Messages wrapper -->\n      <div class=\"tpl:relative tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col\">\n        <!-- Messages -->\n        <div\n          ref=\"messagesContainer\"\n          class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\"\n        >\n          <!-- Loading history state -->\n          <div\n            v-if=\"aiChat.isLoadingHistory.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            <LoaderCircle\n              class=\"tpl-spinner tpl:text-[var(--tpl-text-muted)]\"\n              :size=\"24\"\n              :stroke-width=\"2\"\n            />\n            <p class=\"tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n              {{ cloudTranslations.aiChat.loadingHistory }}\n            </p>\n          </div>\n\n          <!-- Empty state -->\n          <div\n            v-else-if=\"(aiChat.messages.value?.length ?? 0) === 0\"\n            class=\"tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center\"\n          >\n            <Sparkles\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              {{ cloudTranslations.aiChat.placeholder }}\n            </p>\n          </div>\n\n          <!-- Message list -->\n          <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-4\">\n            <div\n              v-for=\"(message, index) in aiChat.messages.value\"\n              :key=\"message.id\"\n              class=\"tpl:flex tpl:flex-col tpl:gap-2\"\n            >\n              <!-- User message -->\n              <div\n                v-if=\"message.role === 'user'\"\n                class=\"tpl:self-end tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm\"\n                style=\"\n                  background-color: var(--tpl-primary-light);\n                  color: var(--tpl-text);\n                  max-width: 85%;\n                  box-shadow: var(--tpl-shadow);\n                \"\n              >\n                {{ message.content }}\n              </div>\n\n              <!-- Assistant message -->\n              <div v-else class=\"tpl:flex tpl:flex-col tpl:gap-2\">\n                <LoadingTrack\n                  v-if=\"\n                    !stripJsonBlock(message.content) &&\n                    aiChat.isGenerating.value &&\n                    index === (aiChat.messages.value?.length ?? 0) - 1\n                  \"\n                />\n                <div\n                  v-else\n                  class=\"tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm tpl:whitespace-pre-wrap\"\n                  style=\"\n                    max-width: 85%;\n                    background-color: var(--tpl-bg);\n                    color: var(--tpl-text);\n                    box-shadow: var(--tpl-shadow);\n                  \"\n                >\n                  {{\n                    stripJsonBlock(message.content) ||\n                    cloudTranslations.aiChat.applied\n                  }}\n                </div>\n                <button\n                  v-if=\"\n                    message.id === aiChat.lastApplyMessageId.value &&\n                    !aiChat.isGenerating.value\n                  \"\n                  class=\"tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150\"\n                  style=\"\n                    border-color: var(--tpl-border);\n                    color: var(--tpl-text-muted);\n                    background-color: transparent;\n                  \"\n                  @click=\"aiChat.toggleLastRevert()\"\n                >\n                  <template v-if=\"aiChat.isLastChangeReverted.value\">\n                    <Redo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.reapply }}\n                  </template>\n                  <template v-else>\n                    <Undo2 :size=\"12\" :stroke-width=\"2\" />\n                    {{ cloudTranslations.aiChat.revert }}\n                  </template>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Error message -->\n        <div\n          v-if=\"aiChat.error.value\"\n          class=\"tpl:mx-3 tpl:mb-2 tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs\"\n          style=\"\n            background-color: var(--tpl-danger-light);\n            color: var(--tpl-danger);\n          \"\n        >\n          <CircleAlert\n            :size=\"14\"\n            :stroke-width=\"2\"\n            class=\"tpl:mt-0.5 tpl:shrink-0\"\n          />\n          <span>{{\n            aiChat.error.value === \"ai_apply_failed\"\n              ? cloudTranslations.aiChat.applyFailed\n              : cloudTranslations.aiChat.error\n          }}</span>\n        </div>\n\n        <!-- Suggestions (overlay) -->\n        <div\n          v-if=\"(aiChat.suggestions.value?.length ?? 0) > 0\"\n          class=\"tpl:absolute tpl:right-0 tpl:bottom-0 tpl:left-0 tpl:z-10 tpl:px-3 tpl:pb-3\"\n          style=\"\n            background-color: color-mix(\n              in srgb,\n              var(--tpl-bg) 50%,\n              transparent\n            );\n            backdrop-filter: blur(2px);\n          \"\n        >\n          <div class=\"tpl:flex tpl:flex-col tpl:gap-1.5\">\n            <button\n              v-for=\"(suggestion, index) in aiChat.suggestions.value ?? []\"\n              :key=\"index\"\n              class=\"tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out\"\n              :class=\"\n                (aiChat.suggestions.value?.length ?? 0) - 1 - index <\n                visibleSuggestionCount\n                  ? 'tpl:translate-y-0 tpl:opacity-100'\n                  : 'tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0'\n              \"\n              style=\"\n                border-color: var(--tpl-border);\n                color: var(--tpl-primary);\n                background-color: var(--tpl-bg);\n                box-shadow: var(--tpl-shadow);\n              \"\n              @click=\"handleSuggestionClick(suggestion)\"\n            >\n              {{ suggestion }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Input area -->\n      <div class=\"tpl:border-t tpl:p-3 tpl:border-[var(--tpl-border)]\">\n        <div\n          class=\"tpl-ai-input-wrapper tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\n        >\n          <textarea\n            v-model=\"promptInput\"\n            class=\"tpl:max-h-32 tpl:min-h-[64px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-sm tpl:outline-none tpl:text-[var(--tpl-text)]\"\n            :placeholder=\"cloudTranslations.aiChat.inputPlaceholder\"\n            :disabled=\"aiChat.isGenerating.value\"\n            rows=\"3\"\n            @keydown=\"handleKeydown\"\n          />\n          <button\n            class=\"tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40 tpl:text-[var(--tpl-primary)]\"\n            :disabled=\"!promptInput.trim() || aiChat.isGenerating.value\"\n            @click=\"handleSend\"\n          >\n            <Send :size=\"16\" :stroke-width=\"2\" />\n          </button>\n        </div>\n\n        <!-- AI disclaimer -->\n        <p\n          class=\"tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]\"\n        >\n          {{ cloudTranslations.aiMenu.disclaimer }}\n        </p>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n.tpl-ai-slide-enter-active {\n  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-slide-leave-active {\n  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-ai-input-wrapper:focus-within {\n  border-color: var(--tpl-primary);\n  box-shadow: var(--tpl-ring);\n}\n\n.tpl-ai-send-btn:not(:disabled):hover {\n  transform: scale(1.05);\n}\n\n.tpl-suggestion-btn: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/{AiFeatureMenu-BtEcjxLL.js → AiFeatureMenu-D2AIDwEG.js}

@@ -1,9 +1,9 @@
-import { L as e, M as t, P as n, ct as r, f as i, g as a, m as o, p as s, st as c, u as l, x as u } from "./draggable-BRF_Q_jB.js";
-import "./useEditorCore-CTYH6u4r.js";
-import { G as d, t as f } from "./keys-CZOBuCQd.js";
-import { A as p, E as m, mt as h } from "./icons-DN008liP.js";
+import { L as e, M as t, P as n, ct as r, f as i, g as a, lt as o, m as s, p as c, u as l, x as u } from "./draggable-DCs9qL-b.js";
+import "./useEditorCore-C_nUXiph.js";
+import { G as d, t as f } from "./keys-Cmc2Yl3D.js";
+import { E as p, k as m, pt as h } from "./icons-CvYN6zrM.js";
 import { t as g } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { n as _ } from "./useCloudI18n-CML0BxqX.js";
+import { n as _ } from "./useCloudI18n-8wkJtuJD.js";
 //#region src/cloud/components/AiFeatureMenu.vue?vue&type=script&setup=true&lang.ts
 var v = {
 	class: "tpl-ai-feature-menu tpl:w-[280px] tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:py-1 tpl:bg-[var(--tpl-bg-elevated)] tpl:border tpl:border-[var(--tpl-border)] tpl:shadow-[var(--tpl-shadow-lg)]",
@@ -23,7 +23,7 @@ var v = {
 		}, D = [
 			{
 				key: "ai-chat",
-				icon: m
+				icon: p
 			},
 			{
 				key: "design-reference",
@@ -31,7 +31,7 @@ var v = {
 			},
 			{
 				key: "scoring",
-				icon: p
+				icon: m
 			}
 		], O = i(() => D.filter((e) => T.isFeatureEnabled(E[e.key])));
 		function k(e) {
@@ -43,21 +43,21 @@ var v = {
 		return (i, d) => (t(), a("div", v, [(t(!0), a(l, null, n(O.value, (n) => (t(), a("button", {
 			key: n.key,
 			class: "tpl-ai-feature-menu-item tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-start tpl:gap-3 tpl:border-none tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:duration-100",
-			style: c({ backgroundColor: u.activeFeature === n.key ? "var(--tpl-primary-light)" : "transparent" }),
+			style: r({ backgroundColor: u.activeFeature === n.key ? "var(--tpl-primary-light)" : "transparent" }),
 			onClick: (e) => C("select", n.key)
-		}, [s("div", {
+		}, [c("div", {
 			class: "tpl:mt-0.5 tpl:flex tpl:size-7 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)]",
-			style: c({
+			style: r({
 				backgroundColor: u.activeFeature === n.key ? "var(--tpl-primary)" : "var(--tpl-bg-active)",
 				color: u.activeFeature === n.key ? "var(--tpl-bg)" : "var(--tpl-text-muted)"
 			})
-		}, [(t(), o(e(n.icon), {
+		}, [(t(), s(e(n.icon), {
 			size: 15,
 			"stroke-width": 2
-		}))], 4), s("div", b, [s("span", x, r(k(n.key)), 1), s("span", S, r(A(n.key)), 1)])], 12, y))), 128))]));
+		}))], 4), c("div", b, [c("span", x, o(k(n.key)), 1), c("span", S, o(A(n.key)), 1)])], 12, y))), 128))]));
 	}
 }), [["__scopeId", "data-v-07839fa3"]]);
 //#endregion
 export { C as default };
 
-//# sourceMappingURL=AiFeatureMenu-BtEcjxLL.js.map
+//# sourceMappingURL=AiFeatureMenu-D2AIDwEG.js.map

package/dist/cdn/chunks/{AiFeatureMenu-BtEcjxLL.js.map → AiFeatureMenu-D2AIDwEG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AiFeatureMenu-BtEcjxLL.js","names":[],"sources":["../../../src/cloud/components/AiFeatureMenu.vue","../../../src/cloud/components/AiFeatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { AI_CONFIG_KEY, requireInject } from \"../../keys\";\nimport type { AiConfig } from \"@templatical/types\";\nimport { ImageUp, ShieldCheck, Sparkles } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nexport type AiFeature = \"ai-chat\" | \"design-reference\" | \"scoring\";\n\ndefineProps<{\n  activeFeature: AiFeature | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"select\", feature: AiFeature): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst aiConfig = requireInject(AI_CONFIG_KEY, \"AiFeatureMenu\");\n\nconst configKeyMap: Record<AiFeature, keyof AiConfig> = {\n  \"ai-chat\": \"chat\",\n  \"design-reference\": \"designToTemplate\",\n  scoring: \"scoring\",\n};\n\nconst allFeatures: { key: AiFeature; icon: typeof Sparkles }[] = [\n  { key: \"ai-chat\", icon: Sparkles },\n  { key: \"design-reference\", icon: ImageUp },\n  { key: \"scoring\", icon: ShieldCheck },\n];\n\nconst features = computed(() =>\n  allFeatures.filter((f) => aiConfig.isFeatureEnabled(configKeyMap[f.key])),\n);\n\nfunction getTitle(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistant;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplate;\n  return cloudT.aiMenu.templateScore;\n}\n\nfunction getDescription(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistantDesc;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplateDesc;\n  return cloudT.aiMenu.templateScoreDesc;\n}\n</script>\n\n<template>\n  <div\n    class=\"tpl-ai-feature-menu tpl:w-[280px] tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:py-1 tpl:bg-[var(--tpl-bg-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    <button\n      v-for=\"feature in features\"\n      :key=\"feature.key\"\n      class=\"tpl-ai-feature-menu-item tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-start tpl:gap-3 tpl:border-none tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:duration-100\"\n      :style=\"{\n        backgroundColor:\n          activeFeature === feature.key\n            ? 'var(--tpl-primary-light)'\n            : 'transparent',\n      }\"\n      @click=\"emit('select', feature.key)\"\n    >\n      <div\n        class=\"tpl:mt-0.5 tpl:flex tpl:size-7 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)]\"\n        :style=\"{\n          backgroundColor:\n            activeFeature === feature.key\n              ? 'var(--tpl-primary)'\n              : 'var(--tpl-bg-active)',\n          color:\n            activeFeature === feature.key\n              ? 'var(--tpl-bg)'\n              : 'var(--tpl-text-muted)',\n        }\"\n      >\n        <component :is=\"feature.icon\" :size=\"15\" :stroke-width=\"2\" />\n      </div>\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5\">\n        <span class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\">\n          {{ getTitle(feature.key) }}\n        </span>\n        <span\n          class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ getDescription(feature.key) }}\n        </span>\n      </div>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.tpl-ai-feature-menu-item:hover {\n  background-color: var(--tpl-bg-hover) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { AI_CONFIG_KEY, requireInject } from \"../../keys\";\nimport type { AiConfig } from \"@templatical/types\";\nimport { ImageUp, ShieldCheck, Sparkles } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nexport type AiFeature = \"ai-chat\" | \"design-reference\" | \"scoring\";\n\ndefineProps<{\n  activeFeature: AiFeature | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"select\", feature: AiFeature): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst aiConfig = requireInject(AI_CONFIG_KEY, \"AiFeatureMenu\");\n\nconst configKeyMap: Record<AiFeature, keyof AiConfig> = {\n  \"ai-chat\": \"chat\",\n  \"design-reference\": \"designToTemplate\",\n  scoring: \"scoring\",\n};\n\nconst allFeatures: { key: AiFeature; icon: typeof Sparkles }[] = [\n  { key: \"ai-chat\", icon: Sparkles },\n  { key: \"design-reference\", icon: ImageUp },\n  { key: \"scoring\", icon: ShieldCheck },\n];\n\nconst features = computed(() =>\n  allFeatures.filter((f) => aiConfig.isFeatureEnabled(configKeyMap[f.key])),\n);\n\nfunction getTitle(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistant;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplate;\n  return cloudT.aiMenu.templateScore;\n}\n\nfunction getDescription(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistantDesc;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplateDesc;\n  return cloudT.aiMenu.templateScoreDesc;\n}\n</script>\n\n<template>\n  <div\n    class=\"tpl-ai-feature-menu tpl:w-[280px] tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:py-1 tpl:bg-[var(--tpl-bg-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    <button\n      v-for=\"feature in features\"\n      :key=\"feature.key\"\n      class=\"tpl-ai-feature-menu-item tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-start tpl:gap-3 tpl:border-none tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:duration-100\"\n      :style=\"{\n        backgroundColor:\n          activeFeature === feature.key\n            ? 'var(--tpl-primary-light)'\n            : 'transparent',\n      }\"\n      @click=\"emit('select', feature.key)\"\n    >\n      <div\n        class=\"tpl:mt-0.5 tpl:flex tpl:size-7 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)]\"\n        :style=\"{\n          backgroundColor:\n            activeFeature === feature.key\n              ? 'var(--tpl-primary)'\n              : 'var(--tpl-bg-active)',\n          color:\n            activeFeature === feature.key\n              ? 'var(--tpl-bg)'\n              : 'var(--tpl-text-muted)',\n        }\"\n      >\n        <component :is=\"feature.icon\" :size=\"15\" :stroke-width=\"2\" />\n      </div>\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5\">\n        <span class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\">\n          {{ getTitle(feature.key) }}\n        </span>\n        <span\n          class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ getDescription(feature.key) }}\n        </span>\n      </div>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.tpl-ai-feature-menu-item:hover {\n  background-color: var(--tpl-bg-hover) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAaA,IAAM,IAAO,GAIP,EAAE,GAAG,MAAW,EAAmB,GAEnC,IAAW,EAAc,GAAe,eAAe,GAEvD,IAAkD;GACtD,WAAW;GACX,oBAAoB;GACpB,SAAS;EACX,GAEM,IAA2D;GAC/D;IAAE,KAAK;IAAW,MAAM;GAAS;GACjC;IAAE,KAAK;IAAoB,MAAM;GAAQ;GACzC;IAAE,KAAK;IAAW,MAAM;GAAY;EACtC,GAEM,IAAW,QACf,EAAY,QAAQ,MAAM,EAAS,iBAAiB,EAAa,EAAE,IAAI,CAAC,CAC1E;EAEA,SAAS,EAAS,GAAwB;GAGxC,OAFI,MAAQ,YAAkB,EAAO,OAAO,cACxC,MAAQ,qBAA2B,EAAO,OAAO,mBAC9C,EAAO,OAAO;EACvB;EAEA,SAAS,EAAe,GAAwB;GAG9C,OAFI,MAAQ,YAAkB,EAAO,OAAO,kBACxC,MAAQ,qBAA2B,EAAO,OAAO,uBAC9C,EAAO,OAAO;EACvB;oBAIE,EAAA,GAAA,EA0CM,OA1CN,GA0CM,EAtCJ,EAAA,EAAA,GAAA,EAqCS,GAAA,MAAA,EApCW,EAAA,QAAX,OADT,EAAA,GAAA,EAqCS,UAAA;GAnCN,KAAK,EAAQ;GACd,OAAM;GACL,OAAK,EAAA,EAAA,iBAAuC,EAAA,kBAAkB,EAAQ,MAAA,6BAAA,cAAA,CAAA;GAMtE,UAAK,MAAE,EAAI,UAAW,EAAQ,GAAG;EAElC,GAAA,CAAA,EAcM,OAAA;GAbJ,OAAM;GACL,OAAK,EAAA;IAA2C,iBAAA,EAAA,kBAAkB,EAAQ,MAAA,uBAAA;IAA8G,OAAA,EAAA,kBAAkB,EAAQ,MAAA,kBAAA;;EAWnN,GAAA,EAAA,EAAA,GAAA,EAA6D,EAA7C,EAAQ,IAAI,GAAA;GAAG,MAAM;GAAK,gBAAc;EAE1D,CAAA,EAAA,GAAA,CAAA,GAAA,EASM,OATN,GASM,CARJ,EAEO,QAFP,GAEO,EADF,EAAS,EAAQ,GAAG,CAAA,GAAA,CAAA,GAEzB,EAIO,QAJP,GAIO,EADF,EAAe,EAAQ,GAAG,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"AiFeatureMenu-D2AIDwEG.js","names":[],"sources":["../../../src/cloud/components/AiFeatureMenu.vue","../../../src/cloud/components/AiFeatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { AI_CONFIG_KEY, requireInject } from \"../../keys\";\nimport type { AiConfig } from \"@templatical/types\";\nimport { ImageUp, ShieldCheck, Sparkles } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nexport type AiFeature = \"ai-chat\" | \"design-reference\" | \"scoring\";\n\ndefineProps<{\n  activeFeature: AiFeature | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"select\", feature: AiFeature): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst aiConfig = requireInject(AI_CONFIG_KEY, \"AiFeatureMenu\");\n\nconst configKeyMap: Record<AiFeature, keyof AiConfig> = {\n  \"ai-chat\": \"chat\",\n  \"design-reference\": \"designToTemplate\",\n  scoring: \"scoring\",\n};\n\nconst allFeatures: { key: AiFeature; icon: typeof Sparkles }[] = [\n  { key: \"ai-chat\", icon: Sparkles },\n  { key: \"design-reference\", icon: ImageUp },\n  { key: \"scoring\", icon: ShieldCheck },\n];\n\nconst features = computed(() =>\n  allFeatures.filter((f) => aiConfig.isFeatureEnabled(configKeyMap[f.key])),\n);\n\nfunction getTitle(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistant;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplate;\n  return cloudT.aiMenu.templateScore;\n}\n\nfunction getDescription(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistantDesc;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplateDesc;\n  return cloudT.aiMenu.templateScoreDesc;\n}\n</script>\n\n<template>\n  <div\n    class=\"tpl-ai-feature-menu tpl:w-[280px] tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:py-1 tpl:bg-[var(--tpl-bg-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    <button\n      v-for=\"feature in features\"\n      :key=\"feature.key\"\n      class=\"tpl-ai-feature-menu-item tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-start tpl:gap-3 tpl:border-none tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:duration-100\"\n      :style=\"{\n        backgroundColor:\n          activeFeature === feature.key\n            ? 'var(--tpl-primary-light)'\n            : 'transparent',\n      }\"\n      @click=\"emit('select', feature.key)\"\n    >\n      <div\n        class=\"tpl:mt-0.5 tpl:flex tpl:size-7 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)]\"\n        :style=\"{\n          backgroundColor:\n            activeFeature === feature.key\n              ? 'var(--tpl-primary)'\n              : 'var(--tpl-bg-active)',\n          color:\n            activeFeature === feature.key\n              ? 'var(--tpl-bg)'\n              : 'var(--tpl-text-muted)',\n        }\"\n      >\n        <component :is=\"feature.icon\" :size=\"15\" :stroke-width=\"2\" />\n      </div>\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5\">\n        <span class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\">\n          {{ getTitle(feature.key) }}\n        </span>\n        <span\n          class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ getDescription(feature.key) }}\n        </span>\n      </div>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.tpl-ai-feature-menu-item:hover {\n  background-color: var(--tpl-bg-hover) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { AI_CONFIG_KEY, requireInject } from \"../../keys\";\nimport type { AiConfig } from \"@templatical/types\";\nimport { ImageUp, ShieldCheck, Sparkles } from \"@lucide/vue\";\nimport { computed } from \"vue\";\n\nexport type AiFeature = \"ai-chat\" | \"design-reference\" | \"scoring\";\n\ndefineProps<{\n  activeFeature: AiFeature | null;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"select\", feature: AiFeature): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst aiConfig = requireInject(AI_CONFIG_KEY, \"AiFeatureMenu\");\n\nconst configKeyMap: Record<AiFeature, keyof AiConfig> = {\n  \"ai-chat\": \"chat\",\n  \"design-reference\": \"designToTemplate\",\n  scoring: \"scoring\",\n};\n\nconst allFeatures: { key: AiFeature; icon: typeof Sparkles }[] = [\n  { key: \"ai-chat\", icon: Sparkles },\n  { key: \"design-reference\", icon: ImageUp },\n  { key: \"scoring\", icon: ShieldCheck },\n];\n\nconst features = computed(() =>\n  allFeatures.filter((f) => aiConfig.isFeatureEnabled(configKeyMap[f.key])),\n);\n\nfunction getTitle(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistant;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplate;\n  return cloudT.aiMenu.templateScore;\n}\n\nfunction getDescription(key: AiFeature): string {\n  if (key === \"ai-chat\") return cloudT.aiMenu.aiAssistantDesc;\n  if (key === \"design-reference\") return cloudT.aiMenu.designToTemplateDesc;\n  return cloudT.aiMenu.templateScoreDesc;\n}\n</script>\n\n<template>\n  <div\n    class=\"tpl-ai-feature-menu tpl:w-[280px] tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:py-1 tpl:bg-[var(--tpl-bg-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    <button\n      v-for=\"feature in features\"\n      :key=\"feature.key\"\n      class=\"tpl-ai-feature-menu-item tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-start tpl:gap-3 tpl:border-none tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:duration-100\"\n      :style=\"{\n        backgroundColor:\n          activeFeature === feature.key\n            ? 'var(--tpl-primary-light)'\n            : 'transparent',\n      }\"\n      @click=\"emit('select', feature.key)\"\n    >\n      <div\n        class=\"tpl:mt-0.5 tpl:flex tpl:size-7 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)]\"\n        :style=\"{\n          backgroundColor:\n            activeFeature === feature.key\n              ? 'var(--tpl-primary)'\n              : 'var(--tpl-bg-active)',\n          color:\n            activeFeature === feature.key\n              ? 'var(--tpl-bg)'\n              : 'var(--tpl-text-muted)',\n        }\"\n      >\n        <component :is=\"feature.icon\" :size=\"15\" :stroke-width=\"2\" />\n      </div>\n      <div class=\"tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5\">\n        <span class=\"tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]\">\n          {{ getTitle(feature.key) }}\n        </span>\n        <span\n          class=\"tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text-muted)]\"\n        >\n          {{ getDescription(feature.key) }}\n        </span>\n      </div>\n    </button>\n  </div>\n</template>\n\n<style scoped>\n.tpl-ai-feature-menu-item:hover {\n  background-color: var(--tpl-bg-hover) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAaA,IAAM,IAAO,GAIP,EAAE,GAAG,MAAW,EAAmB,GAEnC,IAAW,EAAc,GAAe,eAAe,GAEvD,IAAkD;GACtD,WAAW;GACX,oBAAoB;GACpB,SAAS;EACX,GAEM,IAA2D;GAC/D;IAAE,KAAK;IAAW,MAAM;GAAS;GACjC;IAAE,KAAK;IAAoB,MAAM;GAAQ;GACzC;IAAE,KAAK;IAAW,MAAM;GAAY;EACtC,GAEM,IAAW,QACf,EAAY,QAAQ,MAAM,EAAS,iBAAiB,EAAa,EAAE,IAAI,CAAC,CAC1E;EAEA,SAAS,EAAS,GAAwB;GAGxC,OAFI,MAAQ,YAAkB,EAAO,OAAO,cACxC,MAAQ,qBAA2B,EAAO,OAAO,mBAC9C,EAAO,OAAO;EACvB;EAEA,SAAS,EAAe,GAAwB;GAG9C,OAFI,MAAQ,YAAkB,EAAO,OAAO,kBACxC,MAAQ,qBAA2B,EAAO,OAAO,uBAC9C,EAAO,OAAO;EACvB;oBAIE,EAAA,GAAA,EA0CM,OA1CN,GA0CM,EAtCJ,EAAA,EAAA,GAAA,EAqCS,GAAA,MAAA,EApCW,EAAA,QAAX,OADT,EAAA,GAAA,EAqCS,UAAA;GAnCN,KAAK,EAAQ;GACd,OAAM;GACL,OAAK,EAAA,EAAA,iBAAuC,EAAA,kBAAkB,EAAQ,MAAA,6BAAA,cAAA,CAAA;GAMtE,UAAK,MAAE,EAAI,UAAW,EAAQ,GAAG;EAElC,GAAA,CAAA,EAcM,OAAA;GAbJ,OAAM;GACL,OAAK,EAAA;IAA2C,iBAAA,EAAA,kBAAkB,EAAQ,MAAA,uBAAA;IAA8G,OAAA,EAAA,kBAAkB,EAAQ,MAAA,kBAAA;;EAWnN,GAAA,EAAA,EAAA,GAAA,EAA6D,EAA7C,EAAQ,IAAI,GAAA;GAAG,MAAM;GAAK,gBAAc;EAE1D,CAAA,EAAA,GAAA,CAAA,GAAA,EASM,OATN,GASM,CARJ,EAEO,QAFP,GAEO,EADF,EAAS,EAAQ,GAAG,CAAA,GAAA,CAAA,GAEzB,EAIO,QAJP,GAIO,EADF,EAAe,EAAQ,GAAG,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/cdn/chunks/{BlockIssueBadge-dnqZk6pl.js → BlockIssueBadge-BEEY9o2o.js}

@@ -1,7 +1,7 @@
-import { M as e, T as t, f as n, g as r, h as i, it as a, m as o, ot as s, x as c } from "./draggable-BRF_Q_jB.js";
-import { B as l } from "./keys-CZOBuCQd.js";
-import { t as u } from "./useI18n-aRMtgYRj.js";
-import { Mt as d, u as f } from "./icons-DN008liP.js";
+import { M as e, T as t, f as n, g as r, h as i, it as a, m as o, st as s, x as c } from "./draggable-DCs9qL-b.js";
+import { B as l } from "./keys-Cmc2Yl3D.js";
+import { t as u } from "./useI18n-UMs0F71x.js";
+import { Mt as d, u as f } from "./icons-CvYN6zrM.js";
 //#region src/components/canvas/BlockIssueBadge.vue?vue&type=script&setup=true&lang.ts
 var p = ["title", "aria-label"], m = /* @__PURE__ */ c({
 	__name: "BlockIssueBadge",
@@ -32,4 +32,4 @@ var p = ["title", "aria-label"], m = /* @__PURE__ */ c({
 //#endregion
 export { m as default };
 
-//# sourceMappingURL=BlockIssueBadge-dnqZk6pl.js.map
+//# sourceMappingURL=BlockIssueBadge-BEEY9o2o.js.map

package/dist/cdn/chunks/{BlockIssueBadge-dnqZk6pl.js.map → BlockIssueBadge-BEEY9o2o.js.map}

@@ -1 +1 @@
-{"version":3,"file":"BlockIssueBadge-dnqZk6pl.js","names":[],"sources":["../../../src/components/canvas/BlockIssueBadge.vue","../../../src/components/canvas/BlockIssueBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport { CircleAlert, TriangleAlert } from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { TEMPLATE_LINT_KEY } from \"../../keys\";\n\nconst props = defineProps<{ blockId: string }>();\nconst { t } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\n\nconst blockIssues = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.blockId === props.blockId),\n);\n\nconst severity = computed<\"error\" | \"warning\" | null>(() => {\n  if (blockIssues.value.some((i) => i.severity === \"error\")) return \"error\";\n  if (blockIssues.value.some((i) => i.severity === \"warning\")) return \"warning\";\n  return null;\n});\n\nconst tooltip = computed(() =>\n  severity.value === \"error\" ? t.issues.badgeError : t.issues.badgeWarning,\n);\n</script>\n\n<template>\n  <span\n    v-if=\"severity\"\n    class=\"tpl:absolute tpl:top-1 tpl:right-1 tpl:z-10 tpl:flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)] tpl:ring-1 tpl:ring-[var(--tpl-border)]\"\n    :class=\"\n      severity === 'error'\n        ? 'tpl:text-[var(--tpl-danger)]'\n        : 'tpl:text-[var(--tpl-warning)]'\n    \"\n    :title=\"tooltip\"\n    :aria-label=\"tooltip\"\n    role=\"img\"\n  >\n    <CircleAlert\n      v-if=\"severity === 'error'\"\n      :size=\"14\"\n      :stroke-width=\"2.25\"\n      fill=\"currentColor\"\n      stroke=\"var(--tpl-bg)\"\n    />\n    <TriangleAlert\n      v-else\n      :size=\"14\"\n      :stroke-width=\"2.25\"\n      fill=\"currentColor\"\n      stroke=\"var(--tpl-bg)\"\n    />\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport { CircleAlert, TriangleAlert } from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { TEMPLATE_LINT_KEY } from \"../../keys\";\n\nconst props = defineProps<{ blockId: string }>();\nconst { t } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\n\nconst blockIssues = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.blockId === props.blockId),\n);\n\nconst severity = computed<\"error\" | \"warning\" | null>(() => {\n  if (blockIssues.value.some((i) => i.severity === \"error\")) return \"error\";\n  if (blockIssues.value.some((i) => i.severity === \"warning\")) return \"warning\";\n  return null;\n});\n\nconst tooltip = computed(() =>\n  severity.value === \"error\" ? t.issues.badgeError : t.issues.badgeWarning,\n);\n</script>\n\n<template>\n  <span\n    v-if=\"severity\"\n    class=\"tpl:absolute tpl:top-1 tpl:right-1 tpl:z-10 tpl:flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)] tpl:ring-1 tpl:ring-[var(--tpl-border)]\"\n    :class=\"\n      severity === 'error'\n        ? 'tpl:text-[var(--tpl-danger)]'\n        : 'tpl:text-[var(--tpl-warning)]'\n    \"\n    :title=\"tooltip\"\n    :aria-label=\"tooltip\"\n    role=\"img\"\n  >\n    <CircleAlert\n      v-if=\"severity === 'error'\"\n      :size=\"14\"\n      :stroke-width=\"2.25\"\n      fill=\"currentColor\"\n      stroke=\"var(--tpl-bg)\"\n    />\n    <TriangleAlert\n      v-else\n      :size=\"14\"\n      :stroke-width=\"2.25\"\n      fill=\"currentColor\"\n      stroke=\"var(--tpl-bg)\"\n    />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;EAMA,IAAM,IAAQ,GACR,EAAE,SAAM,EAAQ,GAChB,IAAO,EAAO,GAAmB,IAAI,GAErC,IAAc,SACjB,GAAM,OAAO,SAAS,CAAC,EAAA,CAAG,QAAQ,MAAM,EAAE,YAAY,EAAM,OAAO,CACtE,GAEM,IAAW,QACX,EAAY,MAAM,MAAM,MAAM,EAAE,aAAa,OAAO,IAAU,UAC9D,EAAY,MAAM,MAAM,MAAM,EAAE,aAAa,SAAS,IAAU,YAC7D,IACR,GAEK,IAAU,QACd,EAAS,UAAU,UAAU,EAAE,OAAO,aAAa,EAAE,OAAO,YAC9D;mBAKU,EAAA,SADR,EAAA,GAAA,EA0BO,QAAA;;GAxBL,OAAK,EAAA,CAAC,yNACS,EAAA,UAAQ,UAAA,iCAAA,+BAAA,CAAA;GAKtB,OAAO,EAAA;GACP,cAAY,EAAA;GACb,MAAK;EAGG,GAAA,CAAA,EAAA,UAAQ,WADhB,EAAA,GAAA,EAME,EAAA,CAAA,GAAA;;GAJC,MAAM;GACN,gBAAc;GACf,MAAK;GACL,QAAO;EAET,CAAA,MAAA,EAAA,GAAA,EAME,EAAA,CAAA,GAAA;;GAJC,MAAM;GACN,gBAAc;GACf,MAAK;GACL,QAAO"}
+{"version":3,"file":"BlockIssueBadge-BEEY9o2o.js","names":[],"sources":["../../../src/components/canvas/BlockIssueBadge.vue","../../../src/components/canvas/BlockIssueBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport { CircleAlert, TriangleAlert } from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { TEMPLATE_LINT_KEY } from \"../../keys\";\n\nconst props = defineProps<{ blockId: string }>();\nconst { t } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\n\nconst blockIssues = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.blockId === props.blockId),\n);\n\nconst severity = computed<\"error\" | \"warning\" | null>(() => {\n  if (blockIssues.value.some((i) => i.severity === \"error\")) return \"error\";\n  if (blockIssues.value.some((i) => i.severity === \"warning\")) return \"warning\";\n  return null;\n});\n\nconst tooltip = computed(() =>\n  severity.value === \"error\" ? t.issues.badgeError : t.issues.badgeWarning,\n);\n</script>\n\n<template>\n  <span\n    v-if=\"severity\"\n    class=\"tpl:absolute tpl:top-1 tpl:right-1 tpl:z-10 tpl:flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)] tpl:ring-1 tpl:ring-[var(--tpl-border)]\"\n    :class=\"\n      severity === 'error'\n        ? 'tpl:text-[var(--tpl-danger)]'\n        : 'tpl:text-[var(--tpl-warning)]'\n    \"\n    :title=\"tooltip\"\n    :aria-label=\"tooltip\"\n    role=\"img\"\n  >\n    <CircleAlert\n      v-if=\"severity === 'error'\"\n      :size=\"14\"\n      :stroke-width=\"2.25\"\n      fill=\"currentColor\"\n      stroke=\"var(--tpl-bg)\"\n    />\n    <TriangleAlert\n      v-else\n      :size=\"14\"\n      :stroke-width=\"2.25\"\n      fill=\"currentColor\"\n      stroke=\"var(--tpl-bg)\"\n    />\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from \"vue\";\nimport { CircleAlert, TriangleAlert } from \"@lucide/vue\";\nimport { useI18n } from \"../../composables/useI18n\";\nimport { TEMPLATE_LINT_KEY } from \"../../keys\";\n\nconst props = defineProps<{ blockId: string }>();\nconst { t } = useI18n();\nconst lint = inject(TEMPLATE_LINT_KEY, null);\n\nconst blockIssues = computed(() =>\n  (lint?.issues.value ?? []).filter((i) => i.blockId === props.blockId),\n);\n\nconst severity = computed<\"error\" | \"warning\" | null>(() => {\n  if (blockIssues.value.some((i) => i.severity === \"error\")) return \"error\";\n  if (blockIssues.value.some((i) => i.severity === \"warning\")) return \"warning\";\n  return null;\n});\n\nconst tooltip = computed(() =>\n  severity.value === \"error\" ? t.issues.badgeError : t.issues.badgeWarning,\n);\n</script>\n\n<template>\n  <span\n    v-if=\"severity\"\n    class=\"tpl:absolute tpl:top-1 tpl:right-1 tpl:z-10 tpl:flex tpl:size-5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)] tpl:ring-1 tpl:ring-[var(--tpl-border)]\"\n    :class=\"\n      severity === 'error'\n        ? 'tpl:text-[var(--tpl-danger)]'\n        : 'tpl:text-[var(--tpl-warning)]'\n    \"\n    :title=\"tooltip\"\n    :aria-label=\"tooltip\"\n    role=\"img\"\n  >\n    <CircleAlert\n      v-if=\"severity === 'error'\"\n      :size=\"14\"\n      :stroke-width=\"2.25\"\n      fill=\"currentColor\"\n      stroke=\"var(--tpl-bg)\"\n    />\n    <TriangleAlert\n      v-else\n      :size=\"14\"\n      :stroke-width=\"2.25\"\n      fill=\"currentColor\"\n      stroke=\"var(--tpl-bg)\"\n    />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;EAMA,IAAM,IAAQ,GACR,EAAE,SAAM,EAAQ,GAChB,IAAO,EAAO,GAAmB,IAAI,GAErC,IAAc,SACjB,GAAM,OAAO,SAAS,CAAC,EAAA,CAAG,QAAQ,MAAM,EAAE,YAAY,EAAM,OAAO,CACtE,GAEM,IAAW,QACX,EAAY,MAAM,MAAM,MAAM,EAAE,aAAa,OAAO,IAAU,UAC9D,EAAY,MAAM,MAAM,MAAM,EAAE,aAAa,SAAS,IAAU,YAC7D,IACR,GAEK,IAAU,QACd,EAAS,UAAU,UAAU,EAAE,OAAO,aAAa,EAAE,OAAO,YAC9D;mBAKU,EAAA,SADR,EAAA,GAAA,EA0BO,QAAA;;GAxBL,OAAK,EAAA,CAAC,yNACS,EAAA,UAAQ,UAAA,iCAAA,+BAAA,CAAA;GAKtB,OAAO,EAAA;GACP,cAAY,EAAA;GACb,MAAK;EAGG,GAAA,CAAA,EAAA,UAAQ,WADhB,EAAA,GAAA,EAME,EAAA,CAAA,GAAA;;GAJC,MAAM;GACN,gBAAc;GACf,MAAK;GACL,QAAO;EAET,CAAA,MAAA,EAAA,GAAA,EAME,EAAA,CAAA,GAAA;;GAJC,MAAM;GACN,gBAAc;GACf,MAAK;GACL,QAAO"}

package/dist/cdn/chunks/{BlockPreviewCanvas-D8pfTFWi.js → BlockPreviewCanvas-DH5ULGkw.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./rolldown-runtime-B0aSnxlc.js";
-import { I as t, L as n, M as r, N as i, P as a, T as o, f as s, g as c, it as l, m as u, p as d, st as f, u as p, x as m } from "./draggable-BRF_Q_jB.js";
-import { _ as h, a as g, c as _, d as v, f as y, h as b, i as x, k as S, m as C, n as w, p as T, r as E, u as D, v as O, y as k } from "./useEditorCore-CTYH6u4r.js";
-import { W as A, f as j, g as M, k as N, s as P } from "./keys-CZOBuCQd.js";
+import { I as t, L as n, M as r, N as i, P as a, T as o, ct as s, f as c, g as l, it as u, m as d, p as f, u as p, x as m } from "./draggable-DCs9qL-b.js";
+import { _ as h, a as g, c as _, d as v, f as y, h as b, i as x, k as S, m as C, n as w, p as T, r as E, u as D, v as O, y as k } from "./useEditorCore-C_nUXiph.js";
+import { W as A, f as j, g as M, k as N, s as P } from "./keys-Cmc2Yl3D.js";
 import { n as F, t as I } from "./emailFrameWidth-BmFCN2dp.js";
 //#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
 var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__PURE__ */ m({
@@ -25,7 +25,7 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 			spacer: x,
 			html: h,
 			custom: k
-		}, m = e, v = o(P, null), A = s(() => {
+		}, m = e, v = o(P, null), A = c(() => {
 			switch (m.block.columns) {
 				case "2": return ["50%", "50%"];
 				case "3": return [
@@ -37,7 +37,7 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 				case "2-1": return ["66.67%", "33.33%"];
 				default: return ["100%"];
 			}
-		}), j = s(() => {
+		}), j = c(() => {
 			let e = A.value.length, t = [...m.block.children];
 			for (; t.length < e;) t.push([]);
 			return t.slice(0, e);
@@ -50,17 +50,17 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 		}
 		return (e, i) => {
 			let o = t("PreviewSectionBlock", !0);
-			return r(), c("div", L, [d("div", R, [(r(!0), c(p, null, a(j.value, (e, t) => (r(), c("div", {
+			return r(), l("div", L, [f("div", R, [(r(!0), l(p, null, a(j.value, (e, t) => (r(), l("div", {
 				key: t,
-				style: f({ width: A.value[t] })
-			}, [(r(!0), c(p, null, a(M(t), (e) => (r(), c("div", {
+				style: s({ width: A.value[t] })
+			}, [(r(!0), l(p, null, a(M(t), (e) => (r(), l("div", {
 				key: e.id,
-				style: f(l(D)(e))
-			}, [e.type === "section" ? (r(), u(o, {
+				style: s(u(D)(e))
+			}, [e.type === "section" ? (r(), d(o, {
 				key: 0,
 				block: e,
 				viewport: "desktop"
-			}, null, 8, ["block"])) : (r(), u(n(N(e)), {
+			}, null, 8, ["block"])) : (r(), d(n(N(e)), {
 				key: 1,
 				block: e,
 				viewport: "desktop"
@@ -78,9 +78,9 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 		}
 	},
 	setup(e) {
-		let t = e, d = o(P), m = o(M, null), L = o(j, null), R = o(N, null);
-		i(A, s(() => R?.value ?? !1));
-		let B = s(() => t.applyConditionFilter ? t.blocks.filter((e) => !L?.isHidden(e.id)) : t.blocks), V = s(() => F(m?.content.value.settings, t.viewport)), H = s(() => m ? v(m.content.value.settings) : {}), U = {
+		let t = e, f = o(P), m = o(M, null), L = o(j, null), R = o(N, null);
+		i(A, c(() => R?.value ?? !1));
+		let B = c(() => t.applyConditionFilter ? t.blocks.filter((e) => !L?.isHidden(e.id)) : t.blocks), V = c(() => F(m?.content.value.settings, t.viewport)), H = c(() => m ? v(m.content.value.settings) : {}), U = {
 			section: z,
 			title: _,
 			paragraph: T,
@@ -96,22 +96,22 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 			custom: k
 		};
 		function W(e) {
-			return y(e, d, U);
+			return y(e, f, U);
 		}
-		return (t, i) => (r(), c("div", {
+		return (t, i) => (r(), l("div", {
 			"data-testid": "block-preview-canvas",
 			class: "tpl:pointer-events-none tpl:mx-auto tpl:select-none tpl:rounded-lg",
-			style: f({
+			style: s({
 				width: `${V.value}px`,
-				transition: l(I),
+				transition: u(I),
 				backgroundColor: "var(--tpl-canvas-bg)",
 				boxShadow: "var(--tpl-shadow-sm)",
 				...H.value
 			})
-		}, [(r(!0), c(p, null, a(B.value, (t) => (r(), c("div", {
+		}, [(r(!0), l(p, null, a(B.value, (t) => (r(), l("div", {
 			key: t.id,
-			style: f(l(D)(t))
-		}, [(r(), u(n(W(t)), {
+			style: s(u(D)(t))
+		}, [(r(), d(n(W(t)), {
 			block: t,
 			viewport: e.viewport
 		}, null, 8, ["block", "viewport"]))], 4))), 128))], 4));
@@ -120,4 +120,4 @@ var L = { class: "tpl:w-full" }, R = { class: "tpl:flex tpl:gap-0" }, z = /* @__
 //#endregion
 export { V as n, H as t };
 
-//# sourceMappingURL=BlockPreviewCanvas-D8pfTFWi.js.map
+//# sourceMappingURL=BlockPreviewCanvas-DH5ULGkw.js.map