@templatical/editor 0.39.2 → 0.39.4

package/dist/DesignReferenceSidebar-QC4gEUWp.js

@@ -1,273 +0,0 @@
-import { A as e, At as t, B as n, D as ee, R as r, V as te, Z as i, at as a, c as o, d as s, g as c, h as l, jt as u, kt as ne, l as re, s as ie, u as d, v as f } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { a as ae, t as oe } from "./runtime-dom.esm-bundler-BGbPz4-g.js";
-import { Z as p, g as se, i as ce } from "./keys-BdoSgsz9.js";
-import "./timeouts-DHPZQ0G3.js";
-import { t as m } from "./createLucideIcon-BxY5yz5u.js";
-import { t as le } from "./circle-alert-CYgTHKWr.js";
-import { t as h } from "./image-up-Qi2BXD7T.js";
-import { t as ue } from "./upload-BBDme2cy.js";
-import { t as g } from "./x-3BHV3Q6K.js";
-import { t as de } from "./LoadingTrack-C2jKCU2d.js";
-import { t as _ } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { n as fe } from "./useCloudI18n-D1iedlP3.js";
-import { _ as pe } from "./cloud-C9xWZXhg.js";
-var me = m({
-	name: "file-image",
-	size: 24,
-	node: [
-		["path", {
-			d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
-			key: "1oefj6"
-		}],
-		["path", {
-			d: "M14 2v5a1 1 0 0 0 1 1h5",
-			key: "wfsgrz"
-		}],
-		["circle", {
-			cx: "10",
-			cy: "12",
-			r: "2",
-			key: "737tya"
-		}],
-		["path", {
-			d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22",
-			key: "wt3hpn"
-		}]
-	]
-}), v = m({
-	name: "file-text",
-	size: 24,
-	node: [
-		["path", {
-			d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
-			key: "1oefj6"
-		}],
-		["path", {
-			d: "M14 2v5a1 1 0 0 0 1 1h5",
-			key: "wfsgrz"
-		}],
-		["path", {
-			d: "M10 9H8",
-			key: "b1mrlr"
-		}],
-		["path", {
-			d: "M16 13H8",
-			key: "t4e002"
-		}],
-		["path", {
-			d: "M16 17H8",
-			key: "z1uh3a"
-		}]
-	]
-}), he = {
-	key: 0,
-	class: "tpl-design-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]"
-}, ge = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, y = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]" }, b = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, x = {
-	key: 0,
-	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
-}, S = { class: "tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3" }, C = { class: "tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, w = {
-	key: 1,
-	class: "tpl:flex tpl:flex-col tpl:gap-4"
-}, T = { class: "tpl:flex tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]" }, E = {
-	key: 0,
-	class: "tpl:flex tpl:flex-col tpl:gap-2"
-}, D = { class: "tpl:relative tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, O = ["src", "alt"], k = {
-	key: 1,
-	class: "tpl:flex tpl:h-32 tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2"
-}, A = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, j = { class: "tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, M = { class: "tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, N = ["accept"], P = { class: "tpl:flex tpl:flex-col tpl:gap-1.5" }, F = { class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, I = ["placeholder"], L = {
-	key: 0,
-	class: "tpl:flex tpl:flex-col tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:px-3 tpl:py-3 tpl:bg-[var(--tpl-warning-light)] tpl:border tpl:border-[var(--tpl-warning)]"
-}, _e = { class: "tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]" }, ve = { class: "tpl:flex tpl:gap-2" }, ye = {
-	key: 1,
-	class: "tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs tpl:bg-[var(--tpl-danger-light)] tpl:text-[var(--tpl-danger)]"
-}, be = ["disabled"], xe = { class: "tpl:m-0 tpl:pt-1 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, R = /*#__PURE__*/ _(/* @__PURE__ */ f({
-	__name: "DesignReferenceSidebar",
-	props: {
-		visible: { type: Boolean },
-		hasExistingBlocks: { type: Boolean }
-	},
-	emits: ["close", "apply"],
-	setup(f, { emit: m }) {
-		let _ = f, R = m, { t: z } = fe(), Se = p(se, "DesignReferenceSidebar"), Ce = p(ce, "DesignReferenceSidebar"), B = pe({
-			authManager: Ce,
-			getTemplateId: () => Se.state.template?.id ?? null,
-			onApply: (e) => R("apply", e)
-		}), V = i(null), H = i("image"), U = i(null), W = i(""), G = i(null), K = i(!1), q = i(!1), J = ie(() => !B.isGenerating.value && U.value !== null);
-		function Y(e) {
-			H.value = e, Z();
-		}
-		function we(e) {
-			let t = e.target, n = t.files?.[0];
-			n && X(n), t.value = "";
-		}
-		function X(e) {
-			if (e.size > 10485760) {
-				B.error.value = z.designReference.fileTooLarge;
-				return;
-			}
-			if (H.value === "image") {
-				if (![
-					"image/png",
-					"image/jpeg",
-					"image/jpg",
-					"image/webp"
-				].includes(e.type)) {
-					B.error.value = z.designReference.invalidFileType;
-					return;
-				}
-			} else if (H.value === "pdf" && e.type !== "application/pdf") {
-				B.error.value = z.designReference.invalidFileType;
-				return;
-			}
-			U.value = e, B.error.value = null, G.value && URL.revokeObjectURL(G.value), e.type.startsWith("image/") ? G.value = URL.createObjectURL(e) : G.value = null;
-		}
-		function Z() {
-			G.value &&= (URL.revokeObjectURL(G.value), null), U.value = null;
-		}
-		function Q(e) {
-			e.preventDefault(), q.value = !0;
-		}
-		function Te() {
-			q.value = !1;
-		}
-		function Ee(e) {
-			e.preventDefault(), q.value = !1;
-			let t = e.dataTransfer?.files?.[0];
-			t && X(t);
-		}
-		function $() {
-			if (!J.value) return;
-			if (_.hasExistingBlocks && !K.value) {
-				K.value = !0;
-				return;
-			}
-			K.value = !1;
-			let e = {};
-			W.value.trim() && (e.prompt = W.value.trim()), H.value === "image" && U.value ? e.imageUpload = U.value : H.value === "pdf" && U.value && (e.pdfUpload = U.value), B.generate(e);
-		}
-		function De() {
-			K.value = !1;
-		}
-		return r(() => _.visible, (e) => {
-			e || (K.value = !1);
-		}), ee(() => {
-			G.value &&= (URL.revokeObjectURL(G.value), null);
-		}), (ee, r) => (e(), re(oe, {
-			"enter-active-class": "tpl-design-slide-enter-active",
-			"enter-from-class": "tpl:translate-x-full",
-			"enter-to-class": "tpl:translate-x-0",
-			"leave-active-class": "tpl-design-slide-leave-active",
-			"leave-from-class": "tpl:translate-x-0",
-			"leave-to-class": "tpl:translate-x-full"
-		}, {
-			default: n(() => [f.visible ? (e(), s("div", he, [o("div", ge, [o("div", y, [c(a(h), {
-				size: 13,
-				"stroke-width": 2
-			}), o("span", null, u(a(z).designReference.title), 1)]), o("button", {
-				class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:text-[var(--tpl-text-muted)]",
-				onClick: r[0] ||= (e) => R("close")
-			}, [c(a(g), {
-				size: 14,
-				"stroke-width": 2
-			})])]), o("div", b, [a(B).isGenerating.value ? (e(), s("div", x, [o("div", S, [c(de), o("p", C, u(a(z).designReference.generating), 1)])])) : (e(), s("div", w, [
-				o("div", T, [o("button", {
-					class: "tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all",
-					style: t({
-						backgroundColor: H.value === "image" ? "var(--tpl-bg)" : "transparent",
-						color: H.value === "image" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-						boxShadow: H.value === "image" ? "var(--tpl-shadow)" : "none"
-					}),
-					onClick: r[1] ||= (e) => Y("image")
-				}, [c(a(me), {
-					size: 12,
-					"stroke-width": 2
-				}), l(" " + u(a(z).designReference.uploadImage), 1)], 4), o("button", {
-					class: "tpl:flex tpl:flex-1 tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-2 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all",
-					style: t({
-						backgroundColor: H.value === "pdf" ? "var(--tpl-bg)" : "transparent",
-						color: H.value === "pdf" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
-						boxShadow: H.value === "pdf" ? "var(--tpl-shadow)" : "none"
-					}),
-					onClick: r[2] ||= (e) => Y("pdf")
-				}, [c(a(v), {
-					size: 12,
-					"stroke-width": 2
-				}), l(" " + u(a(z).designReference.uploadPdf), 1)], 4)]),
-				o("div", null, [U.value ? (e(), s("div", E, [o("div", D, [G.value ? (e(), s("img", {
-					key: 0,
-					src: G.value,
-					alt: U.value.name,
-					class: "tpl:h-auto tpl:max-h-48 tpl:w-full tpl:object-contain"
-				}, null, 8, O)) : (e(), s("div", k, [c(a(v), {
-					size: 32,
-					"stroke-width": 1.5,
-					class: "tpl:text-[var(--tpl-text-dim)]"
-				}), o("span", A, u(U.value.name), 1)])), o("button", {
-					class: "tpl:absolute tpl:top-2 tpl:right-2 tpl:rounded-full tpl:p-1 tpl:transition-colors tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:shadow-[var(--tpl-shadow)]",
-					onClick: Z
-				}, [c(a(g), {
-					size: 12,
-					"stroke-width": 2
-				})])])])) : (e(), s("div", {
-					key: 1,
-					class: "tpl-design-dropzone tpl:flex tpl:cursor-pointer tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border-2 tpl:border-dashed tpl:px-4 tpl:py-8 tpl:transition-colors",
-					style: t({
-						borderColor: q.value ? "var(--tpl-primary)" : "var(--tpl-border-light)",
-						backgroundColor: q.value ? "var(--tpl-primary-light)" : "var(--tpl-bg)"
-					}),
-					onClick: r[3] ||= (e) => V.value?.click(),
-					onDragover: Q,
-					onDragleave: Te,
-					onDrop: Ee
-				}, [
-					c(a(ue), {
-						size: 24,
-						"stroke-width": 1.5,
-						class: "tpl:text-[var(--tpl-text-dim)]"
-					}),
-					o("span", j, u(a(z).designReference.dropHint), 1),
-					o("span", M, u(H.value === "image" ? a(z).designReference.acceptedImages : a(z).designReference.acceptedPdf), 1)
-				], 36)), o("input", {
-					ref_key: "fileInput",
-					ref: V,
-					type: "file",
-					class: "tpl:hidden",
-					accept: H.value === "image" ? "image/png,image/jpeg,image/webp" : "application/pdf",
-					onChange: we
-				}, null, 40, N)]),
-				o("div", P, [o("label", F, u(a(z).designReference.promptLabel), 1), te(o("textarea", {
-					"onUpdate:modelValue": r[4] ||= (e) => W.value = e,
-					class: ne(["tpl:min-h-[72px] tpl:w-full tpl:resize-none tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:font-sans tpl:text-sm tpl:outline-none tpl:transition-colors tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]", ["tpl-design-prompt-input"]]),
-					placeholder: a(z).designReference.promptPlaceholder,
-					rows: "3"
-				}, null, 8, I), [[ae, W.value]])]),
-				K.value ? (e(), s("div", L, [o("p", _e, u(a(z).designReference.replaceWarning), 1), o("div", ve, [o("button", {
-					class: "tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]",
-					style: { "background-color": "transparent" },
-					onClick: De
-				}, u(a(z).designReference.replaceCancel), 1), o("button", {
-					class: "tpl:flex-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]",
-					onClick: $
-				}, u(a(z).designReference.replaceConfirm), 1)])])) : d("", !0),
-				a(B).error.value ? (e(), s("div", ye, [c(a(le), {
-					size: 14,
-					"stroke-width": 2,
-					class: "tpl:mt-0.5 tpl:shrink-0"
-				}), o("span", null, u(a(z).designReference.error), 1)])) : d("", !0),
-				K.value ? d("", !0) : (e(), s("button", {
-					key: 2,
-					class: "tpl:flex tpl:w-full tpl:items-center tpl:justify-center tpl:gap-2 tpl:rounded-[var(--tpl-radius-sm)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]",
-					disabled: !J.value,
-					onClick: $
-				}, [c(a(h), {
-					size: 16,
-					"stroke-width": 2
-				}), l(" " + u(a(z).designReference.generate), 1)], 8, be)),
-				o("p", xe, u(a(z).aiMenu.disclaimer), 1)
-			]))])])) : d("", !0)]),
-			_: 1
-		}));
-	}
-}), [["__scopeId", "data-v-d72bc7be"]]);
-//#endregion
-export { R as default };

package/dist/SavedBlocksPickBar-cI7bDQQi.js

@@ -1,52 +0,0 @@
-import { A as e, at as t, c as n, d as r, g as i, h as a, jt as o, v as s } from "./vue.runtime.esm-bundler-CyqhBwpY.js";
-import { O as c } from "./useEditorCore-C5APBjjV.js";
-import { t as l } from "./useI18n-Ds_-druD.js";
-import { t as u } from "./x-3BHV3Q6K.js";
-//#region src/components/SavedBlocksPickBar.vue?vue&type=script&setup=true&lang.ts
-var d = {
-	"data-testid": "saved-blocks-pick-bar",
-	class: "tpl:absolute tpl:bottom-10 tpl:left-12 tpl:right-[320px] tpl:z-50 tpl:flex tpl:justify-center tpl:px-4",
-	style: { "pointer-events": "none" }
-}, f = ["aria-label"], p = { class: "tpl:flex tpl:flex-col" }, m = {
-	"data-testid": "saved-blocks-pick-count",
-	class: "tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-text)]"
-}, h = { class: "tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, g = { class: "tpl:flex tpl:items-center tpl:gap-1.5" }, _ = ["disabled"], v = /* @__PURE__ */ s({
-	__name: "SavedBlocksPickBar",
-	props: { count: {} },
-	emits: ["confirm", "cancel"],
-	setup(s, { emit: v }) {
-		let y = s, b = v, { t: x, format: S } = l();
-		function C() {
-			y.count > 0 && b("confirm");
-		}
-		return (l, v) => (e(), r("div", d, [n("div", {
-			role: "toolbar",
-			"aria-label": t(x).savedBlocks.pickToolbar,
-			class: "tpl-scale-in tpl:flex tpl:items-center tpl:gap-3 tpl:rounded-[var(--tpl-radius-lg)] tpl:border tpl:py-2 tpl:pl-4 tpl:pr-2 tpl:border-[var(--tpl-border)]",
-			style: {
-				"pointer-events": "auto",
-				"background-color": "var(--tpl-bg-elevated)",
-				"box-shadow": "var(--tpl-shadow-xl)"
-			}
-		}, [n("div", p, [n("span", m, o(t(S)(t(x).savedBlocks.pickCount, { count: s.count })), 1), n("span", h, o(t(x).savedBlocks.pickHint), 1)]), n("div", g, [n("button", {
-			type: "button",
-			"data-testid": "saved-blocks-pick-cancel",
-			class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]",
-			onClick: v[0] ||= (e) => b("cancel")
-		}, [i(t(u), {
-			size: 13,
-			"stroke-width": 2
-		}), a(" " + o(t(x).savedBlocks.cancel), 1)]), n("button", {
-			type: "button",
-			"data-testid": "saved-blocks-pick-confirm",
-			class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-1 tpl:rounded-md tpl:px-2.5 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]",
-			disabled: s.count === 0,
-			onClick: C
-		}, [i(t(c), {
-			size: 13,
-			"stroke-width": 2
-		}), a(" " + o(t(x).savedBlocks.save), 1)], 8, _)])], 8, f)]));
-	}
-});
-//#endregion
-export { v as default };

package/dist/cdn/chunks/AiChatSidebar-CjSEoK4x.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AiChatSidebar-CjSEoK4x.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  NO_MERGE_TAGS,\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, NO_MERGE_TAGS);\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.value);\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.value);\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: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: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: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\"\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-focus-ring-host tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\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: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  NO_MERGE_TAGS,\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, NO_MERGE_TAGS);\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.value);\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.value);\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: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: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: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\"\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-focus-ring-host tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2 tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]\"\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: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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,IAAM,IAAQ,GAKR,KAAO,GAIP,IAAoB,EACxB,GACA,eACF,GACM,IAAS,EAAc,IAAY,eAAe,GAClD,KAAc,EAAc,IAAkB,eAAe,GAC7D,IAAY,EAAO,IAAgB,EAAa,GAChD,IAAY,EAAa,GAEzB,IAAS,EAAU;GACvB;GACA,qBAAqB,EAAO,MAAM,UAAU,MAAM;GAClD,SAAS,EAAM;GACf,SAAS,KAAA;EACX,CAAC,GAEK,IAAc,EAAI,EAAE,GACpB,IAAoB,EAAwB,IAAI,GAChD,IAAgB,EAAI,EAAK,GACzB,IAAyB,EAAI,CAAC,GAE9B,EAAE,OAAO,GAAa,QAAQ,OAAiB,SAC7C;GAEJ,AAAI,EAAuB,SADb,EAAO,YAAY,OAAO,UAAU,KAEhD,EAAuB,UAEvB,EAAY;EAEhB,GACA,KACA,EAAE,WAAW,GAAM,CACrB,GAEM,EAAE,OAAO,OAAuB,SAAmB,GAAa,GAAG,KAAK,EAC5E,WAAW,GACb,CAAC;EAED,QACQ,EAAO,YAAY,OAAO,UAAU,IACzC,MAAU;GAET,IADA,EAAY,GACR,MAAU,GAAG;IACf,EAAuB,QAAQ;IAC/B;GACF;GAGA,AADA,EAAuB,QAAQ,GAC/B,GAAmB;EACrB,CACF;EAEA,SAAS,IAAuB;GAC9B,QAAe;IACb,AAAI,EAAkB,UACpB,EAAkB,MAAM,YAAY,EAAkB,MAAM;GAEhE,CAAC;EACH;EAOA,AALA,QACQ,EAAO,SAAS,OAAO,UAAU,SACjC,EAAe,CACvB,GAEA,QACQ,EAAM,SACZ,OAAO,MAAc;GACnB,IAAI,KAAa,CAAC,EAAc,OAAO;IAGrC,IAFA,EAAc,QAAQ,IACtB,MAAM,EAAO,iBAAiB,GAC1B,CAAC,EAAU,OAAO;IAEtB,CACG,EAAO,SAAS,OAAO,UAAU,OAAO,KACzC,EAAO,QAAQ,MAAM,OAAO,WAAW,KAEvC,EAAO,gBAAgB,EAAO,QAAQ,OAAO,EAAU,KAAK;GAEhE;EACF,CACF;EAEA,eAAe,IAA4B;GACzC,IAAM,IAAS,EAAY,MAAM,KAAK;GAClC,AAAC,KAAU,GAAO,aAAa,UAInC,EAAY,QAAQ,IACpB,EAAO,MAAM,QAAQ,MACrB,EAAO,aAAa,QAAQ,MAC5B,EAAe,GAEf,MAAM,EAAO,WAAW,GAAQ,EAAO,QAAQ,OAAO,EAAU,KAAK,GAChE,EAAU,UAEX,EAAO,aAAa,UACtB,EAAY,QAAQ,EAAO,aAAa,QAG1C,EAAe;EACjB;EAEA,SAAS,EAAe,GAAsB;GAC5C,OAAO,EACJ,QAAQ,uBAAuB,EAAE,CAAA,CACjC,QAAQ,mBAAmB,EAAE,CAAA,CAC7B,KAAK;EACV;EAEA,SAAS,GAAsB,GAA0B;GAGvD,AAFA,EAAY,GACZ,EAAY,QAAQ,GACpB,EAAW;EACb;EAEA,SAAS,GAAc,GAA4B;GACjD,AAAI,EAAM,QAAQ,WAAW,CAAC,EAAM,aAClC,EAAM,eAAe,GACrB,EAAW;EAEf;oBAIE,EAAA,GAAA,EAkPa,IAAA;GAjPX,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;GACf,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;;GAEf,SAAA,SAyOM,CAxOE,EAAA,WADR,EAAA,GAAA,EAyOM,OAzON,GAyOM;IApOJ,EA2BM,OA3BN,GA2BM,CAxBJ,EAOM,OAPN,GAOM,CAJJ,EAAyC,EAAA,CAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;IACpC,CAAA,GAAA,EAEO,QAAA,MAAA,EADF,EAAA,CAAA,CAAiB,CAAC,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,GAGrC,EAeM,OAfN,GAeM,EAbK,EAAA,CAAA,CAAM,CAAC,SAAS,OAAO,UAAM,KAAA,KADtC,EAAA,GAAA,EAOS,UAAA;;KALP,OAAM;KACL,OAAO,EAAA,CAAA,CAAiB,CAAC,OAAO;KAChC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAM,CAAC,UAAS;IAExB,GAAA,CAAA,EAAuC,EAAA,EAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;IAEpC,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAKS,UAAA;KAJP,OAAM;KACL,SAAK,AAAA,EAAA,QAAA,MAAE,GAAI,OAAA;IAEZ,GAAA,CAAA,EAAkC,EAAA,CAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;;IAMnC,EAuKM,OAvKN,GAuKM;KArKJ,EA0GM,OAAA;MAzGA,SAAA;MAAJ,KAAI;MACJ,OAAM;KAIE,GAAA,CAAA,EAAA,CAAA,CAAM,CAAC,iBAAiB,SADhC,EAAA,GAAA,EAYM,OAZN,GAYM,CARJ,EAIE,EAAA,CAAA,GAAA;MAHA,OAAM;MACL,MAAM;MACN,gBAAc;KAEjB,CAAA,GAAA,EAEI,KAFJ,GAEI,EADC,EAAA,CAAA,CAAiB,CAAC,OAAO,cAAc,GAAA,CAAA,CAAA,CAAA,MAMhC,EAAA,CAAA,CAAM,CAAC,SAAS,OAAO,UAAM,OAAA,KAD3C,EAAA,GAAA,EAcM,OAdN,GAcM,CAVJ,EAIE,EAAA,CAAA,GAAA;MAHC,MAAM;MACN,gBAAc;MACf,OAAM;KAER,CAAA,GAAA,EAII,KAJJ,GAII,EADC,EAAA,CAAA,CAAiB,CAAC,OAAO,WAAW,GAAA,CAAA,CAAA,CAAA,MAK3C,EAAA,GAAA,EAoEM,OApEN,GAoEM,EAnEJ,EAAA,EAAA,GAAA,EAkEM,GAAA,MAAA,EAjEuB,EAAA,CAAA,CAAM,CAAC,SAAS,QAAnC,GAAS,OADnB,EAAA,GAAA,EAkEM,OAAA;MAhEH,KAAK,EAAQ;MACd,OAAM;KAIE,GAAA,CAAA,EAAQ,SAAI,UADpB,EAAA,GAAA,EAWM,OAXN,GAWM,EADD,EAAQ,OAAO,GAAA,CAAA,MAIpB,EAAA,GAAA,EA6CM,OA7CN,GA6CM,CA3C0B,CAAA,EAAe,EAAQ,OAAO,KAAyB,EAAA,CAAA,CAAM,CAAC,aAAa,SAA6B,OAAW,EAAA,CAAA,CAAM,CAAC,SAAS,OAAO,UAAM,KAAA,KAD9K,EAAA,GAAA,EAME,GAAA,EAAA,KAAA,EAAA,CAAA,MACF,EAAA,GAAA,EAcM,OAdN,GAcM,EAHF,EAAe,EAAQ,OAAO,KAAyB,EAAA,CAAA,CAAiB,CAAC,OAAO,OAAO,GAAA,CAAA,IAK9D,EAAQ,OAAO,EAAA,CAAA,CAAM,CAAC,mBAAmB,SAA8B,CAAA,EAAA,CAAA,CAAM,CAAC,aAAa,SADxH,EAAA,GAAA,EAqBS,UAAA;;MAhBP,OAAM;MACN,OAAA;OAAA,gBAAA;OAAA,OAAA;OAAA,oBAAA;MAAA;MAKC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAM,CAAC,iBAAgB;KAEf,GAAA,CAAA,EAAA,CAAA,CAAM,CAAC,qBAAqB,SAA5C,EAAA,GAAA,EAGW,GAAA,EAAA,KAAA,EAAA,GAAA,CAFT,EAAsC,EAAA,EAAA,GAAA;MAA9B,MAAM;MAAK,gBAAc;KAAK,CAAA,GAAA,EAAA,MACtC,EAAG,EAAA,CAAA,CAAiB,CAAC,OAAO,OAAO,GAAA,CAAA,CAAA,GAAA,EAAA,MAErC,EAAA,GAAA,EAGW,GAAA,EAAA,KAAA,EAAA,GAAA,CAFT,EAAsC,EAAA,CAAA,GAAA;MAA9B,MAAM;MAAK,gBAAc;KAAK,CAAA,GAAA,EAAA,MACtC,EAAG,EAAA,CAAA,CAAiB,CAAC,OAAO,MAAM,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,CAAA;KAUtC,EAAA,CAAA,CAAM,CAAC,MAAM,SADrB,EAAA,GAAA,EAkBM,OAlBN,IAkBM,CAVJ,EAIE,EAAA,EAAA,GAAA;MAHC,MAAM;MACN,gBAAc;MACf,OAAM;KAER,CAAA,GAAA,EAIS,QAAA,MAAA,EAHP,EAAA,CAAA,CAAM,CAAC,MAAM,UAAK,oBAAuC,EAAA,CAAA,CAAiB,CAAC,OAAO,cAA4B,EAAA,CAAA,CAAiB,CAAC,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;MAQvI,EAAA,CAAA,CAAM,CAAC,YAAY,OAAO,UAAM,KAAA,KADzC,EAAA,GAAA,EAkCM,OAlCN,IAkCM,CAtBJ,EAqBM,OArBN,IAqBM,EApBJ,EAAA,EAAA,GAAA,EAmBS,GAAA,MAAA,EAlBuB,EAAA,CAAA,CAAM,CAAC,YAAY,SAAK,CAAA,IAA9C,GAAY,OADtB,EAAA,GAAA,EAmBS,UAAA;MAjBN,KAAK;MACN,OAAK,GAAA,CAAC,sMACoB,EAAA,CAAA,CAAM,CAAC,YAAY,OAAO,UAAM,KAAA,IAAa,IAAwB,EAAA,QAAA,sCAAA,0DAAA,CAAA;MAM/F,OAAA;OAAA,gBAAA;OAAA,OAAA;OAAA,oBAAA;OAAA,cAAA;MAAA;MAMC,UAAK,MAAE,GAAsB,CAAU;KAErC,GAAA,EAAA,CAAU,GAAA,IAAA,EAAA;;IAOrB,EA2BM,OA3BN,IA2BM,CA1BJ,EAkBM,OAlBN,IAkBM,CAfJ,GAAA,EAOE,YAAA;KANS,uBAAA,AAAA,EAAA,QAAA,MAAA,EAAW,QAAA;KACpB,OAAM;KACL,aAAa,EAAA,CAAA,CAAiB,CAAC,OAAO;KACtC,UAAU,EAAA,CAAA,CAAM,CAAC,aAAa;KAC/B,MAAK;KACJ,WAAS;IALD,GAAA,MAAA,IAAA,EAAA,GAAA,CAAA,CAAA,IAAA,EAAA,KAAW,CAAA,CAAA,GAOtB,EAMS,UAAA;KALP,OAAM;KACL,UAAQ,CAAG,EAAA,MAAY,KAAI,KAAM,EAAA,CAAA,CAAM,CAAC,aAAa;KACrD,SAAO;IAER,GAAA,CAAA,EAAqC,EAAA,EAAA,GAAA;KAA9B,MAAM;KAAK,gBAAc;IAKpC,CAAA,CAAA,GAAA,GAAA,EAAA,CAAA,CAAA,GAAA,EAII,KAJJ,IAII,EADC,EAAA,CAAA,CAAiB,CAAC,OAAO,UAAU,GAAA,CAAA,CAAA,CAAA"}

package/dist/cdn/chunks/CloudPanels-bHhh9AUA.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CloudPanels-bHhh9AUA.js","names":[],"sources":["../../../src/cloud/components/CloudErrorOverlay.vue","../../../src/cloud/components/CloudErrorOverlay.vue","../../../src/cloud/components/CloudLoadingOverlay.vue","../../../src/cloud/components/CloudLoadingOverlay.vue","../../../src/cloud/components/CloudSaveGateModal.vue","../../../src/cloud/components/CloudSaveGateModal.vue","../../../src/cloud/components/CollabUndoToast.vue","../../../src/cloud/components/CollabUndoToast.vue","../../../src/cloud/components/CloudPanels.vue","../../../src/cloud/components/CloudPanels.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CircleAlert } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\n\ndefineProps<{\n  error: Error | null;\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"retry\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nfunction getErrorMessage(error: Error): string {\n  if (\n    \"isUnauthorized\" in error &&\n    (error as { isUnauthorized: boolean }).isUnauthorized\n  ) {\n    return cloudT.error.authFailed;\n  }\n  if (\"isNotFound\" in error && (error as { isNotFound: boolean }).isNotFound) {\n    return cloudT.error.templateNotFound;\n  }\n  return cloudT.error.defaultMessage;\n}\n\nfunction isNotFoundError(error: Error): boolean {\n  return (\n    \"isNotFound\" in error && !!(error as { isNotFound: boolean }).isNotFound\n  );\n}\n</script>\n\n<template>\n  <div\n    v-if=\"visible && error\"\n    role=\"alert\"\n    class=\"tpl-error tpl:absolute tpl:inset-0 tpl:z-[100] tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-6 tpl:px-8 tpl:bg-[var(--tpl-bg)]\"\n  >\n    <div\n      class=\"tpl:flex tpl:size-16 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-danger-light)]\"\n    >\n      <CircleAlert\n        :size=\"32\"\n        :stroke-width=\"1.5\"\n        class=\"tpl:text-[var(--tpl-danger)]\"\n      />\n    </div>\n    <div\n      class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:text-center\"\n    >\n      <h2 class=\"tpl:text-lg tpl:font-semibold tpl:text-[var(--tpl-text)]\">\n        {{ cloudT.error.title }}\n      </h2>\n      <p class=\"tpl:max-w-md tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n        {{ getErrorMessage(error) }}\n      </p>\n    </div>\n    <button\n      v-if=\"!isNotFoundError(error)\"\n      class=\"tpl-btn tpl-btn-primary tpl:inline-flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n      @click=\"emit('retry')\"\n    >\n      {{ cloudT.error.retry }}\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { CircleAlert } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\n\ndefineProps<{\n  error: Error | null;\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"retry\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nfunction getErrorMessage(error: Error): string {\n  if (\n    \"isUnauthorized\" in error &&\n    (error as { isUnauthorized: boolean }).isUnauthorized\n  ) {\n    return cloudT.error.authFailed;\n  }\n  if (\"isNotFound\" in error && (error as { isNotFound: boolean }).isNotFound) {\n    return cloudT.error.templateNotFound;\n  }\n  return cloudT.error.defaultMessage;\n}\n\nfunction isNotFoundError(error: Error): boolean {\n  return (\n    \"isNotFound\" in error && !!(error as { isNotFound: boolean }).isNotFound\n  );\n}\n</script>\n\n<template>\n  <div\n    v-if=\"visible && error\"\n    role=\"alert\"\n    class=\"tpl-error tpl:absolute tpl:inset-0 tpl:z-[100] tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-6 tpl:px-8 tpl:bg-[var(--tpl-bg)]\"\n  >\n    <div\n      class=\"tpl:flex tpl:size-16 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-danger-light)]\"\n    >\n      <CircleAlert\n        :size=\"32\"\n        :stroke-width=\"1.5\"\n        class=\"tpl:text-[var(--tpl-danger)]\"\n      />\n    </div>\n    <div\n      class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:text-center\"\n    >\n      <h2 class=\"tpl:text-lg tpl:font-semibold tpl:text-[var(--tpl-text)]\">\n        {{ cloudT.error.title }}\n      </h2>\n      <p class=\"tpl:max-w-md tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n        {{ getErrorMessage(error) }}\n      </p>\n    </div>\n    <button\n      v-if=\"!isNotFoundError(error)\"\n      class=\"tpl-btn tpl-btn-primary tpl:inline-flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:shadow-[var(--tpl-shadow-sm)] tpl:transition-all tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-on-primary)]\"\n      @click=\"emit('retry')\"\n    >\n      {{ cloudT.error.retry }}\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  visible: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"tpl-loading tpl:absolute tpl:inset-0 tpl:z-[100] tpl:flex tpl:flex-col tpl:bg-[var(--tpl-bg)]\"\n  >\n    <!-- Skeleton header -->\n    <div\n      class=\"tpl:flex tpl:h-14 tpl:shrink-0 tpl:items-center tpl:justify-between tpl:px-4 tpl:border-b tpl:border-[var(--tpl-border)]\"\n    >\n      <div\n        class=\"tpl-shimmer tpl:h-5 tpl:w-28 tpl:rounded-[var(--tpl-radius-sm)]\"\n      ></div>\n      <div class=\"tpl:flex tpl:gap-3\">\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n    </div>\n    <!-- Skeleton body -->\n    <div class=\"tpl:flex tpl:flex-1 tpl:overflow-hidden\">\n      <!-- Left sidebar rail -->\n      <div\n        class=\"tpl:flex tpl:w-12 tpl:shrink-0 tpl:flex-col tpl:items-center tpl:gap-4 tpl:py-5 tpl:border-r tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          v-for=\"n in 5\"\n          :key=\"n\"\n          class=\"tpl-shimmer tpl:size-7 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n      <!-- Canvas area -->\n      <div\n        class=\"tpl:flex tpl:flex-1 tpl:items-start tpl:justify-center tpl:overflow-auto tpl:p-8 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <div\n          class=\"tpl:w-full tpl:max-w-[600px] tpl:rounded-[var(--tpl-radius)] tpl:p-6 tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)]\"\n        >\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-3/4 tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-5/6 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-44 tpl:w-full tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-2/3 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:flex tpl:justify-center tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-10 tpl:w-36 tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/2 tpl:rounded\"\n            ></div>\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/3 tpl:rounded\"\n            ></div>\n          </div>\n        </div>\n      </div>\n      <!-- Right panel -->\n      <div\n        class=\"tpl:flex tpl:w-[320px] tpl:shrink-0 tpl:flex-col tpl:gap-4 tpl:p-4 tpl:border-l tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  visible: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"tpl-loading tpl:absolute tpl:inset-0 tpl:z-[100] tpl:flex tpl:flex-col tpl:bg-[var(--tpl-bg)]\"\n  >\n    <!-- Skeleton header -->\n    <div\n      class=\"tpl:flex tpl:h-14 tpl:shrink-0 tpl:items-center tpl:justify-between tpl:px-4 tpl:border-b tpl:border-[var(--tpl-border)]\"\n    >\n      <div\n        class=\"tpl-shimmer tpl:h-5 tpl:w-28 tpl:rounded-[var(--tpl-radius-sm)]\"\n      ></div>\n      <div class=\"tpl:flex tpl:gap-3\">\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n    </div>\n    <!-- Skeleton body -->\n    <div class=\"tpl:flex tpl:flex-1 tpl:overflow-hidden\">\n      <!-- Left sidebar rail -->\n      <div\n        class=\"tpl:flex tpl:w-12 tpl:shrink-0 tpl:flex-col tpl:items-center tpl:gap-4 tpl:py-5 tpl:border-r tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          v-for=\"n in 5\"\n          :key=\"n\"\n          class=\"tpl-shimmer tpl:size-7 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n      <!-- Canvas area -->\n      <div\n        class=\"tpl:flex tpl:flex-1 tpl:items-start tpl:justify-center tpl:overflow-auto tpl:p-8 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <div\n          class=\"tpl:w-full tpl:max-w-[600px] tpl:rounded-[var(--tpl-radius)] tpl:p-6 tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)]\"\n        >\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-3/4 tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-5/6 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-44 tpl:w-full tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-2/3 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:flex tpl:justify-center tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-10 tpl:w-36 tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/2 tpl:rounded\"\n            ></div>\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/3 tpl:rounded\"\n            ></div>\n          </div>\n        </div>\n      </div>\n      <!-- Right panel -->\n      <div\n        class=\"tpl:flex tpl:w-[320px] tpl:shrink-0 tpl:flex-col tpl:gap-4 tpl:p-4 tpl:border-l tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { AlertTriangle } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\ndefineProps<{\n  open: boolean;\n  issues: LintIssue[];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"confirm\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl:transition-opacity\"\n    leave-active-class=\"tpl:transition-opacity\"\n    enter-from-class=\"tpl:opacity-0\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <div\n      v-if=\"open\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-label=\"cloudT.saveGate.title\"\n      class=\"tpl:fixed tpl:inset-0 tpl:z-50 tpl:flex tpl:items-center tpl:justify-center tpl:bg-black/40 tpl:p-6\"\n      @click.self=\"emit('cancel')\"\n    >\n      <div\n        class=\"tpl:flex tpl:max-h-[80%] tpl:w-full tpl:max-w-md tpl:flex-col tpl:gap-4 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-5 tpl:shadow-[var(--tpl-shadow-md)]\"\n      >\n        <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <AlertTriangle\n            :size=\"18\"\n            :stroke-width=\"2\"\n            class=\"tpl:text-[var(--tpl-warning)]\"\n          />\n          <h2\n            class=\"tpl:m-0 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          >\n            {{ cloudT.saveGate.title }}\n          </h2>\n        </header>\n\n        <p class=\"tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n          {{ cloudT.saveGate.body }}\n        </p>\n\n        <ul\n          class=\"tpl:m-0 tpl:flex tpl:max-h-64 tpl:list-none tpl:flex-col tpl:gap-1.5 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2\"\n        >\n          <li\n            v-for=\"issue in issues\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-0.5 tpl:rounded tpl:px-2 tpl:py-1.5\"\n          >\n            <span class=\"tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </span>\n            <span\n              class=\"tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </span>\n          </li>\n        </ul>\n\n        <footer class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n            @click=\"emit('cancel')\"\n          >\n            {{ cloudT.saveGate.cancel }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:bg-[var(--tpl-danger)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-bg)]\"\n            @click=\"emit('confirm')\"\n          >\n            {{ cloudT.saveGate.confirm }}\n          </button>\n        </footer>\n      </div>\n    </div>\n  </Transition>\n</template>\n","<script setup lang=\"ts\">\nimport { AlertTriangle } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { LintIssue } from \"../../composables/useTemplateLint\";\n\ndefineProps<{\n  open: boolean;\n  issues: LintIssue[];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"confirm\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl:transition-opacity\"\n    leave-active-class=\"tpl:transition-opacity\"\n    enter-from-class=\"tpl:opacity-0\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <div\n      v-if=\"open\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-label=\"cloudT.saveGate.title\"\n      class=\"tpl:fixed tpl:inset-0 tpl:z-50 tpl:flex tpl:items-center tpl:justify-center tpl:bg-black/40 tpl:p-6\"\n      @click.self=\"emit('cancel')\"\n    >\n      <div\n        class=\"tpl:flex tpl:max-h-[80%] tpl:w-full tpl:max-w-md tpl:flex-col tpl:gap-4 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-5 tpl:shadow-[var(--tpl-shadow-md)]\"\n      >\n        <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <AlertTriangle\n            :size=\"18\"\n            :stroke-width=\"2\"\n            class=\"tpl:text-[var(--tpl-warning)]\"\n          />\n          <h2\n            class=\"tpl:m-0 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          >\n            {{ cloudT.saveGate.title }}\n          </h2>\n        </header>\n\n        <p class=\"tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n          {{ cloudT.saveGate.body }}\n        </p>\n\n        <ul\n          class=\"tpl:m-0 tpl:flex tpl:max-h-64 tpl:list-none tpl:flex-col tpl:gap-1.5 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2\"\n        >\n          <li\n            v-for=\"issue in issues\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-0.5 tpl:rounded tpl:px-2 tpl:py-1.5\"\n          >\n            <span class=\"tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </span>\n            <span\n              class=\"tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </span>\n          </li>\n        </ul>\n\n        <footer class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n            @click=\"emit('cancel')\"\n          >\n            {{ cloudT.saveGate.cancel }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:bg-[var(--tpl-danger)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-bg)]\"\n            @click=\"emit('confirm')\"\n          >\n            {{ cloudT.saveGate.confirm }}\n          </button>\n        </footer>\n      </div>\n    </div>\n  </Transition>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\n\ndefineProps<{\n  visible: boolean;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    role=\"status\"\n    aria-live=\"polite\"\n    class=\"tpl:absolute tpl:top-16 tpl:left-1/2 tpl:z-[60] tpl:-translate-x-1/2 tpl:rounded-[var(--tpl-radius)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:shadow-[var(--tpl-shadow-lg)]\"\n    style=\"\n      background-color: var(--tpl-warning-light);\n      color: var(--tpl-text);\n      border: 1px solid var(--tpl-warning);\n    \"\n  >\n    {{ t.history.collabWarning }}\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\n\ndefineProps<{\n  visible: boolean;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    role=\"status\"\n    aria-live=\"polite\"\n    class=\"tpl:absolute tpl:top-16 tpl:left-1/2 tpl:z-[60] tpl:-translate-x-1/2 tpl:rounded-[var(--tpl-radius)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:shadow-[var(--tpl-shadow-lg)]\"\n    style=\"\n      background-color: var(--tpl-warning-light);\n      color: var(--tpl-text);\n      border: 1px solid var(--tpl-warning);\n    \"\n  >\n    {{ t.history.collabWarning }}\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { defineAsyncComponent } from \"vue\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport type { UseEditorReturn } from \"@templatical/core\";\n\nimport type { UseEditorCoreReturn } from \"../../composables/useEditorCore\";\nimport type { CloudAttachment, CloudReady, CloudRuntime } from \"../runtime\";\n\nimport CloudErrorOverlay from \"./CloudErrorOverlay.vue\";\nimport CloudLoadingOverlay from \"./CloudLoadingOverlay.vue\";\nimport CloudSaveGateModal from \"./CloudSaveGateModal.vue\";\nimport CollabUndoToast from \"./CollabUndoToast.vue\";\n\nconst AiChatSidebar = defineAsyncComponent(() => import(\"./AiChatSidebar.vue\"));\nconst DesignReferenceSidebar = defineAsyncComponent(\n  () => import(\"./DesignReferenceSidebar.vue\"),\n);\nconst TemplateScoringPanel = defineAsyncComponent(\n  () => import(\"./TemplateScoringPanel.vue\"),\n);\n\n/**\n * Every piece of Cloud chrome that renders outside the header.\n *\n * `Editor.vue` mounts this behind one lazy `defineAsyncComponent` gated on a\n * cloud runtime being present, so an OSS consumer downloads none of it — the\n * `SavedBlocksPanels` / `TestEmailPanel` pattern.\n *\n * The overlays live here rather than in the shared editor deliberately: `init()`\n * cannot fail after it mounts, and OSS should not grow the ability.\n *\n * The comments sidebar is deliberately not here: it is shared, as `CommentsPanel`\n * in `Editor.vue` over a `CommentsProvider`. Its filter target lives on the shared\n * feature rather than being relayed through this component, so it survives the\n * lazy panel's mount without a runtime hop.\n *\n * The media library is not here either: it is shared, as `MediaPanels` in\n * `Editor.vue` over a `MediaProvider`. Cloud supplies that provider; it does\n * not mount a second modal.\n */\nconst props = defineProps<{\n  editor: UseEditorReturn;\n  core: UseEditorCoreReturn;\n  runtime: CloudRuntime;\n  cloud: CloudAttachment;\n  ready: CloudReady;\n}>();\n\nfunction applyContent(content: TemplateContent): void {\n  props.core.history.record();\n  props.editor.setContent(content);\n  props.core.conditionPreview.reset();\n}\n</script>\n\n<template>\n  <!-- A template create / load in flight. Cloud reads its content from the\n       server, so there is a real gap where the canvas shows the wrong thing. -->\n  <Transition\n    enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n    enter-from-class=\"tpl:opacity-100\"\n    enter-to-class=\"tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n    leave-from-class=\"tpl:opacity-100\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <CloudLoadingOverlay :visible=\"editor.state.isLoading\" />\n  </Transition>\n\n  <!-- Session failure — an auth refresh that could not renew the token. The\n       *bootstrap* has no overlay any more: it runs before the mount, so a\n       failure there rejects `initCloud()` instead of mounting a dead editor. -->\n  <Transition\n    enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n    enter-from-class=\"tpl:opacity-0\"\n    enter-to-class=\"tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n    leave-from-class=\"tpl:opacity-100\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <CloudErrorOverlay\n      :error=\"ready.sessionError.value\"\n      :visible=\"!!ready.sessionError.value\"\n      @retry=\"ready.retry\"\n    />\n  </Transition>\n\n  <CloudSaveGateModal\n    :open=\"ready.saveGate.modalOpen.value\"\n    :issues=\"ready.saveGate.blockingIssues.value\"\n    @cancel=\"ready.saveGate.cancel\"\n    @confirm=\"ready.saveGate.confirmAndSave\"\n  />\n\n  <Transition\n    enter-active-class=\"tpl:transition-all tpl:duration-200 tpl:ease-out\"\n    enter-from-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n    enter-to-class=\"tpl:translate-y-0 tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-all tpl:duration-300 tpl:ease-in\"\n    leave-from-class=\"tpl:translate-y-0 tpl:opacity-100\"\n    leave-to-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n  >\n    <CollabUndoToast\n      :visible=\"ready.collabWarning.collabUndoWarningVisible.value\"\n    />\n  </Transition>\n\n  <AiChatSidebar\n    :visible=\"cloud.panelState.aiChatOpen.value\"\n    :on-apply=\"applyContent\"\n    @close=\"cloud.panelState.aiChatOpen.value = false\"\n  />\n\n  <TemplateScoringPanel\n    :visible=\"cloud.panelState.scoringPanelOpen.value\"\n    @close=\"cloud.panelState.scoringPanelOpen.value = false\"\n  />\n\n  <DesignReferenceSidebar\n    :visible=\"cloud.panelState.designReferenceOpen.value\"\n    :has-existing-blocks=\"editor.content.value.blocks.length > 0\"\n    @close=\"cloud.panelState.designReferenceOpen.value = false\"\n    @apply=\"applyContent\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport { defineAsyncComponent } from \"vue\";\nimport type { TemplateContent } from \"@templatical/types\";\nimport type { UseEditorReturn } from \"@templatical/core\";\n\nimport type { UseEditorCoreReturn } from \"../../composables/useEditorCore\";\nimport type { CloudAttachment, CloudReady, CloudRuntime } from \"../runtime\";\n\nimport CloudErrorOverlay from \"./CloudErrorOverlay.vue\";\nimport CloudLoadingOverlay from \"./CloudLoadingOverlay.vue\";\nimport CloudSaveGateModal from \"./CloudSaveGateModal.vue\";\nimport CollabUndoToast from \"./CollabUndoToast.vue\";\n\nconst AiChatSidebar = defineAsyncComponent(() => import(\"./AiChatSidebar.vue\"));\nconst DesignReferenceSidebar = defineAsyncComponent(\n  () => import(\"./DesignReferenceSidebar.vue\"),\n);\nconst TemplateScoringPanel = defineAsyncComponent(\n  () => import(\"./TemplateScoringPanel.vue\"),\n);\n\n/**\n * Every piece of Cloud chrome that renders outside the header.\n *\n * `Editor.vue` mounts this behind one lazy `defineAsyncComponent` gated on a\n * cloud runtime being present, so an OSS consumer downloads none of it — the\n * `SavedBlocksPanels` / `TestEmailPanel` pattern.\n *\n * The overlays live here rather than in the shared editor deliberately: `init()`\n * cannot fail after it mounts, and OSS should not grow the ability.\n *\n * The comments sidebar is deliberately not here: it is shared, as `CommentsPanel`\n * in `Editor.vue` over a `CommentsProvider`. Its filter target lives on the shared\n * feature rather than being relayed through this component, so it survives the\n * lazy panel's mount without a runtime hop.\n *\n * The media library is not here either: it is shared, as `MediaPanels` in\n * `Editor.vue` over a `MediaProvider`. Cloud supplies that provider; it does\n * not mount a second modal.\n */\nconst props = defineProps<{\n  editor: UseEditorReturn;\n  core: UseEditorCoreReturn;\n  runtime: CloudRuntime;\n  cloud: CloudAttachment;\n  ready: CloudReady;\n}>();\n\nfunction applyContent(content: TemplateContent): void {\n  props.core.history.record();\n  props.editor.setContent(content);\n  props.core.conditionPreview.reset();\n}\n</script>\n\n<template>\n  <!-- A template create / load in flight. Cloud reads its content from the\n       server, so there is a real gap where the canvas shows the wrong thing. -->\n  <Transition\n    enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n    enter-from-class=\"tpl:opacity-100\"\n    enter-to-class=\"tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n    leave-from-class=\"tpl:opacity-100\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <CloudLoadingOverlay :visible=\"editor.state.isLoading\" />\n  </Transition>\n\n  <!-- Session failure — an auth refresh that could not renew the token. The\n       *bootstrap* has no overlay any more: it runs before the mount, so a\n       failure there rejects `initCloud()` instead of mounting a dead editor. -->\n  <Transition\n    enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n    enter-from-class=\"tpl:opacity-0\"\n    enter-to-class=\"tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n    leave-from-class=\"tpl:opacity-100\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <CloudErrorOverlay\n      :error=\"ready.sessionError.value\"\n      :visible=\"!!ready.sessionError.value\"\n      @retry=\"ready.retry\"\n    />\n  </Transition>\n\n  <CloudSaveGateModal\n    :open=\"ready.saveGate.modalOpen.value\"\n    :issues=\"ready.saveGate.blockingIssues.value\"\n    @cancel=\"ready.saveGate.cancel\"\n    @confirm=\"ready.saveGate.confirmAndSave\"\n  />\n\n  <Transition\n    enter-active-class=\"tpl:transition-all tpl:duration-200 tpl:ease-out\"\n    enter-from-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n    enter-to-class=\"tpl:translate-y-0 tpl:opacity-100\"\n    leave-active-class=\"tpl:transition-all tpl:duration-300 tpl:ease-in\"\n    leave-from-class=\"tpl:translate-y-0 tpl:opacity-100\"\n    leave-to-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n  >\n    <CollabUndoToast\n      :visible=\"ready.collabWarning.collabUndoWarningVisible.value\"\n    />\n  </Transition>\n\n  <AiChatSidebar\n    :visible=\"cloud.panelState.aiChatOpen.value\"\n    :on-apply=\"applyContent\"\n    @close=\"cloud.panelState.aiChatOpen.value = false\"\n  />\n\n  <TemplateScoringPanel\n    :visible=\"cloud.panelState.scoringPanelOpen.value\"\n    @close=\"cloud.panelState.scoringPanelOpen.value = false\"\n  />\n\n  <DesignReferenceSidebar\n    :visible=\"cloud.panelState.designReferenceOpen.value\"\n    :has-existing-blocks=\"editor.content.value.blocks.length > 0\"\n    @close=\"cloud.panelState.designReferenceOpen.value = false\"\n    @apply=\"applyContent\"\n  />\n</template>\n"],"mappings":"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"}

package/dist/cdn/chunks/CollaboratorBar-DgqcaGGI.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CollaboratorBar-DgqcaGGI.js","names":[],"sources":["../../../src/cloud/components/CollaboratorBar.vue","../../../src/cloud/components/CollaboratorBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Collaborator } from \"@templatical/types\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { Wifi, WifiOff } from \"@lucide/vue\";\nimport { computed } from \"vue\";\nimport { readableTextColor } from \"../../utils/readableTextColor\";\n\nconst props = defineProps<{\n  collaborators: Collaborator[];\n  isConnected: boolean;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst maxVisible = 3;\n\nconst visibleCollaborators = computed(() =>\n  props.collaborators.slice(0, maxVisible),\n);\n\nconst overflowCollaborators = computed(() =>\n  props.collaborators.slice(maxVisible),\n);\n\nconst overflowCount = computed(() => overflowCollaborators.value.length);\n\nconst overflowNames = computed(() =>\n  overflowCollaborators.value.map((c) => c.name).join(\"\\n\"),\n);\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length >= 2) {\n    return (\n      parts[0].charAt(0) + parts[parts.length - 1].charAt(0)\n    ).toUpperCase();\n  }\n  return name.charAt(0).toUpperCase();\n}\n</script>\n\n<template>\n  <div class=\"tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2\">\n    <!-- Connection indicator -->\n    <div\n      class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:text-[11px]\"\n      :style=\"{\n        color: isConnected ? 'var(--tpl-success)' : 'var(--tpl-text-muted)',\n      }\"\n      :title=\"\n        isConnected\n          ? cloudT.collaboration.connected\n          : cloudT.collaboration.disconnected\n      \"\n    >\n      <Wifi v-if=\"isConnected\" :size=\"12\" :stroke-width=\"2\" />\n      <WifiOff v-else :size=\"12\" :stroke-width=\"2\" />\n    </div>\n\n    <!-- Avatar stack -->\n    <div\n      v-if=\"collaborators.length > 0\"\n      class=\"tpl:flex tpl:items-center tpl:-space-x-1.5\"\n    >\n      <div\n        v-for=\"collaborator in visibleCollaborators\"\n        :key=\"collaborator.id\"\n        class=\"tpl-collaborator-avatar tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:transition-transform tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]\"\n        :style=\"{\n          backgroundColor: collaborator.color,\n          color: readableTextColor(collaborator.color),\n        }\"\n        :title=\"collaborator.name\"\n      >\n        {{ getInitials(collaborator.name) }}\n      </div>\n      <div\n        v-if=\"overflowCount > 0\"\n        class=\"tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[9px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"overflowNames\"\n      >\n        +{{ overflowCount }}\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Collaborator } from \"@templatical/types\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { Wifi, WifiOff } from \"@lucide/vue\";\nimport { computed } from \"vue\";\nimport { readableTextColor } from \"../../utils/readableTextColor\";\n\nconst props = defineProps<{\n  collaborators: Collaborator[];\n  isConnected: boolean;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst maxVisible = 3;\n\nconst visibleCollaborators = computed(() =>\n  props.collaborators.slice(0, maxVisible),\n);\n\nconst overflowCollaborators = computed(() =>\n  props.collaborators.slice(maxVisible),\n);\n\nconst overflowCount = computed(() => overflowCollaborators.value.length);\n\nconst overflowNames = computed(() =>\n  overflowCollaborators.value.map((c) => c.name).join(\"\\n\"),\n);\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length >= 2) {\n    return (\n      parts[0].charAt(0) + parts[parts.length - 1].charAt(0)\n    ).toUpperCase();\n  }\n  return name.charAt(0).toUpperCase();\n}\n</script>\n\n<template>\n  <div class=\"tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2\">\n    <!-- Connection indicator -->\n    <div\n      class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:text-[11px]\"\n      :style=\"{\n        color: isConnected ? 'var(--tpl-success)' : 'var(--tpl-text-muted)',\n      }\"\n      :title=\"\n        isConnected\n          ? cloudT.collaboration.connected\n          : cloudT.collaboration.disconnected\n      \"\n    >\n      <Wifi v-if=\"isConnected\" :size=\"12\" :stroke-width=\"2\" />\n      <WifiOff v-else :size=\"12\" :stroke-width=\"2\" />\n    </div>\n\n    <!-- Avatar stack -->\n    <div\n      v-if=\"collaborators.length > 0\"\n      class=\"tpl:flex tpl:items-center tpl:-space-x-1.5\"\n    >\n      <div\n        v-for=\"collaborator in visibleCollaborators\"\n        :key=\"collaborator.id\"\n        class=\"tpl-collaborator-avatar tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:transition-transform tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]\"\n        :style=\"{\n          backgroundColor: collaborator.color,\n          color: readableTextColor(collaborator.color),\n        }\"\n        :title=\"collaborator.name\"\n      >\n        {{ getInitials(collaborator.name) }}\n      </div>\n      <div\n        v-if=\"overflowCount > 0\"\n        class=\"tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[9px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"overflowNames\"\n      >\n        +{{ overflowCount }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;iCAcM,IAAa;;;;;;;EAPnB,IAAM,IAAQ,GAKR,EAAE,GAAG,MAAW,EAAmB,GAInC,IAAuB,QAC3B,EAAM,cAAc,MAAM,GAAG,CAAU,CACzC,GAEM,IAAwB,QAC5B,EAAM,cAAc,MAAM,CAAU,CACtC,GAEM,IAAgB,QAAe,EAAsB,MAAM,MAAM,GAEjE,IAAgB,QACpB,EAAsB,MAAM,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI,CAC1D;EAEA,SAAS,EAAY,GAAsB;GACzC,IAAM,IAAQ,EAAK,KAAK,CAAC,CAAC,MAAM,KAAK;GAMrC,OALI,EAAM,UAAU,KAEhB,EAAM,EAAE,CAAC,OAAO,CAAC,IAAI,EAAM,EAAM,SAAS,EAAE,CAAC,OAAO,CAAC,EAAA,CACrD,YAAY,IAET,EAAK,OAAO,CAAC,CAAC,CAAC,YAAY;EACpC;oBAIE,EAAA,GAAA,EA0CM,OA1CN,GA0CM,CAxCJ,EAaM,OAAA;GAZJ,OAAM;GACL,OAAK,EAAA,EAAmB,OAAA,EAAA,cAAW,uBAAA,wBAAA,CAAA;GAGnC,OAAgB,EAAA,cAAwB,EAAA,CAAA,CAAM,CAAC,cAAc,YAAsB,EAAA,CAAA,CAAM,CAAC,cAAc;EAM7F,GAAA,CAAA,EAAA,eAAZ,EAAA,GAAA,EAAwD,EAAA,CAAA,GAAA;;GAA9B,MAAM;GAAK,gBAAc;EACnD,CAAA,MAAA,EAAA,GAAA,EAA+C,EAAA,CAAA,GAAA;;GAA9B,MAAM;GAAK,gBAAc;EAKpC,CAAA,EAAA,GAAA,IAAA,CAAA,GAAA,EAAA,cAAc,SAAM,KAD5B,EAAA,GAAA,EAuBM,OAvBN,GAuBM,EAnBJ,EAAA,EAAA,GAAA,EAWM,GAAA,MAAA,EAVmB,EAAA,QAAhB,OADT,EAAA,GAAA,EAWM,OAAA;GATH,KAAK,EAAa;GACnB,OAAM;GACL,OAAK,EAAA;IAA+B,iBAAA,EAAa;IAAwB,OAAA,EAAA,CAAA,CAAiB,CAAC,EAAa,KAAK;;GAI7G,OAAO,EAAa;EAElB,GAAA,EAAA,EAAY,EAAa,IAAI,CAAA,GAAA,IAAA,CAAA,EAG1B,GAAA,GAAA,IAAA,EAAA,QAAa,KADrB,EAAA,GAAA,EAMM,OAAA;;GAJJ,OAAM;GACL,OAAO,EAAA;EACT,GAAA,OACE,EAAG,EAAA,KAAa,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}