@templatical/editor 0.0.3 → 0.0.5

package/dist/{DesignReferenceSidebar-CmwXvltV.js → DesignReferenceSidebar-DdOht5zn.js}

@@ -1,14 +1,14 @@
 import "./timeouts-CmBrLeZA.js";
-import { f as e, r as t } from "./keys-Dwa2PmdD.js";
-import { t as n } from "./useI18n-DUirdXEX.js";
+import { T as e, f as t, r as n } from "./keys-C0MQRs8d.js";
+import { t as ee } from "./useI18n-D6m7ZUgY.js";
 import { n as r, t as i } from "./_plugin-vue_export-helper-B1-bu7yR.js";
-import { t as ee } from "./circle-alert-E2vYPs5r.js";
+import { t as te } from "./circle-alert-E2vYPs5r.js";
 import { t as a } from "./image-up-X4xIq4ea.js";
 import { t as o } from "./x-CGlq2XQe.js";
-import { t as te } from "./LoadingTrack-vK8W2PJf.js";
-import { Transition as ne, computed as re, createBlock as ie, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, inject as p, normalizeClass as ae, normalizeStyle as m, openBlock as h, ref as g, toDisplayString as _, unref as v, vModelText as y, watch as oe, withCtx as se, withDirectives as ce } from "vue";
-import { useDesignReference as le } from "@templatical/core/cloud";
-var ue = r("file-image", [
+import { t as ne } from "./LoadingTrack-vK8W2PJf.js";
+import { Transition as re, computed as ie, createBlock as ae, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as oe, normalizeStyle as p, openBlock as m, ref as h, toDisplayString as g, unref as _, vModelText as v, watch as se, withCtx as ce, withDirectives as le } from "vue";
+import { useDesignReference as ue } from "@templatical/core/cloud";
+var de = r("file-image", [
 	["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"
@@ -27,7 +27,7 @@ var ue = r("file-image", [
 		d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22",
 		key: "wt3hpn"
 	}]
-]), b = r("file-text", [
+]), y = r("file-text", [
 	["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"
@@ -48,7 +48,7 @@ var ue = r("file-image", [
 		d: "M16 17H8",
 		key: "z1uh3a"
 	}]
-]), de = r("upload", [
+]), fe = r("upload", [
 	["path", {
 		d: "M12 3v12",
 		key: "1x0j5s"
@@ -61,10 +61,10 @@ var ue = r("file-image", [
 		d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
 		key: "ih7n3h"
 	}]
-]), fe = {
+]), pe = {
 	key: 0,
 	class: "tpl-design-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)]"
-}, pe = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, me = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]" }, he = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, x = {
+}, me = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, he = { 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 = {
@@ -90,11 +90,11 @@ var ue = r("file-image", [
 	},
 	emits: ["close", "apply"],
 	setup(r, { emit: i }) {
-		let f = r, z = i, { t: B } = n(), be = p(e), V = le({
-			authManager: p(t),
+		let f = r, z = i, { t: B } = ee(), be = e(t, "DesignReferenceSidebar"), V = ue({
+			authManager: e(n, "DesignReferenceSidebar"),
 			getTemplateId: () => be.state.template?.id ?? null,
 			onApply: (e) => z("apply", e)
-		}), H = g(null), U = g("image"), W = g(null), G = g(""), K = g(null), q = g(!1), J = g(!1), Y = re(() => V.isGenerating.value ? !1 : W.value !== null);
+		}), H = h(null), U = h("image"), W = h(null), G = h(""), K = h(null), q = h(!1), J = h(!1), Y = ie(() => V.isGenerating.value ? !1 : W.value !== null);
 		function X(e) {
 			U.value = e, Q();
 		}
@@ -150,9 +150,9 @@ var ue = r("file-image", [
 		function Te() {
 			q.value = !1;
 		}
-		return oe(() => f.visible, (e) => {
+		return se(() => f.visible, (e) => {
 			e || (q.value = !1);
-		}), (e, t) => (h(), ie(ne, {
+		}), (e, t) => (m(), ae(re, {
 			"enter-active-class": "tpl-design-slide-enter-active",
 			"enter-from-class": "tpl:translate-x-full",
 			"enter-to-class": "tpl:translate-x-0",
@@ -160,58 +160,58 @@ var ue = r("file-image", [
 			"leave-from-class": "tpl:translate-x-0",
 			"leave-to-class": "tpl:translate-x-full"
 		}, {
-			default: se(() => [r.visible ? (h(), c("div", fe, [l("div", pe, [l("div", me, [d(v(a), {
+			default: ce(() => [r.visible ? (m(), c("div", pe, [l("div", me, [l("div", he, [d(_(a), {
 				size: 13,
 				"stroke-width": 2
-			}), l("span", null, _(v(B).designReference.title), 1)]), l("button", {
+			}), l("span", null, g(_(B).designReference.title), 1)]), l("button", {
 				class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150 tpl:text-[var(--tpl-text-muted)]",
 				onClick: t[0] ||= (e) => z("close")
-			}, [d(v(o), {
+			}, [d(_(o), {
 				size: 14,
 				"stroke-width": 2
-			})])]), l("div", he, [v(V).isGenerating.value ? (h(), c("div", x, [l("div", S, [d(te), l("p", C, _(v(B).designReference.generating), 1)])])) : (h(), c("div", w, [
+			})])]), l("div", b, [_(V).isGenerating.value ? (m(), c("div", x, [l("div", S, [d(ne), l("p", C, g(_(B).designReference.generating), 1)])])) : (m(), c("div", w, [
 				l("div", T, [l("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 tpl:duration-150",
-					style: m({
+					style: p({
 						backgroundColor: U.value === "image" ? "var(--tpl-bg)" : "transparent",
 						color: U.value === "image" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
 						boxShadow: U.value === "image" ? "var(--tpl-shadow)" : "none"
 					}),
 					onClick: t[1] ||= (e) => X("image")
-				}, [d(v(ue), {
+				}, [d(_(de), {
 					size: 12,
 					"stroke-width": 2
-				}), u(" " + _(v(B).designReference.uploadImage), 1)], 4), l("button", {
+				}), u(" " + g(_(B).designReference.uploadImage), 1)], 4), l("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 tpl:duration-150",
-					style: m({
+					style: p({
 						backgroundColor: U.value === "pdf" ? "var(--tpl-bg)" : "transparent",
 						color: U.value === "pdf" ? "var(--tpl-primary)" : "var(--tpl-text-muted)",
 						boxShadow: U.value === "pdf" ? "var(--tpl-shadow)" : "none"
 					}),
 					onClick: t[2] ||= (e) => X("pdf")
-				}, [d(v(b), {
+				}, [d(_(y), {
 					size: 12,
 					"stroke-width": 2
-				}), u(" " + _(v(B).designReference.uploadPdf), 1)], 4)]),
-				l("div", null, [W.value ? (h(), c("div", E, [l("div", D, [K.value ? (h(), c("img", {
+				}), u(" " + g(_(B).designReference.uploadPdf), 1)], 4)]),
+				l("div", null, [W.value ? (m(), c("div", E, [l("div", D, [K.value ? (m(), c("img", {
 					key: 0,
 					src: K.value,
 					alt: W.value.name,
 					class: "tpl:h-auto tpl:max-h-48 tpl:w-full tpl:object-contain"
-				}, null, 8, O)) : (h(), c("div", k, [d(v(b), {
+				}, null, 8, O)) : (m(), c("div", k, [d(_(y), {
 					size: 32,
 					"stroke-width": 1.5,
 					class: "tpl:text-[var(--tpl-text-dim)]"
-				}), l("span", A, _(W.value.name), 1)])), l("button", {
+				}), l("span", A, g(W.value.name), 1)])), l("button", {
 					class: "tpl:absolute tpl:top-2 tpl:right-2 tpl:rounded-full tpl:p-1 tpl:transition-colors tpl:duration-150 tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text-muted)] tpl:shadow-[var(--tpl-shadow)]",
 					onClick: Q
-				}, [d(v(o), {
+				}, [d(_(o), {
 					size: 12,
 					"stroke-width": 2
-				})])])])) : (h(), c("div", {
+				})])])])) : (m(), c("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 tpl:duration-150",
-					style: m({
+					style: p({
 						borderColor: J.value ? "var(--tpl-primary)" : "var(--tpl-border-light)",
 						backgroundColor: J.value ? "var(--tpl-primary-light)" : "var(--tpl-bg)"
 					}),
@@ -220,13 +220,13 @@ var ue = r("file-image", [
 					onDragleave: Ce,
 					onDrop: we
 				}, [
-					d(v(de), {
+					d(_(fe), {
 						size: 24,
 						"stroke-width": 1.5,
 						class: "tpl:text-[var(--tpl-text-dim)]"
 					}),
-					l("span", j, _(v(B).designReference.dropHint), 1),
-					l("span", M, _(U.value === "image" ? v(B).designReference.acceptedImages : v(B).designReference.acceptedPdf), 1)
+					l("span", j, g(_(B).designReference.dropHint), 1),
+					l("span", M, g(U.value === "image" ? _(B).designReference.acceptedImages : _(B).designReference.acceptedPdf), 1)
 				], 36)), l("input", {
 					ref_key: "fileInput",
 					ref: H,
@@ -235,39 +235,39 @@ var ue = r("file-image", [
 					accept: U.value === "image" ? "image/png,image/jpeg,image/webp" : "application/pdf",
 					onChange: xe
 				}, null, 40, N)]),
-				l("div", P, [l("label", F, _(v(B).designReference.promptLabel), 1), ce(l("textarea", {
+				l("div", P, [l("label", F, g(_(B).designReference.promptLabel), 1), le(l("textarea", {
 					"onUpdate:modelValue": t[4] ||= (e) => G.value = e,
-					class: ae(["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:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]", ["tpl-design-prompt-input"]]),
-					placeholder: v(B).designReference.promptPlaceholder,
+					class: oe(["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:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]", ["tpl-design-prompt-input"]]),
+					placeholder: _(B).designReference.promptPlaceholder,
 					rows: "3"
-				}, null, 8, I), [[y, G.value]])]),
-				q.value ? (h(), c("div", L, [l("p", R, _(v(B).designReference.replaceWarning), 1), l("div", ge, [l("button", {
+				}, null, 8, I), [[v, G.value]])]),
+				q.value ? (m(), c("div", L, [l("p", R, g(_(B).designReference.replaceWarning), 1), l("div", ge, [l("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:duration-150 tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]",
 					style: { "background-color": "transparent" },
 					onClick: Te
-				}, _(v(B).designReference.replaceCancel), 1), l("button", {
+				}, g(_(B).designReference.replaceCancel), 1), l("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:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
 					onClick: $
-				}, _(v(B).designReference.replaceConfirm), 1)])])) : s("", !0),
-				v(V).error.value ? (h(), c("div", _e, [d(v(ee), {
+				}, g(_(B).designReference.replaceConfirm), 1)])])) : s("", !0),
+				_(V).error.value ? (m(), c("div", _e, [d(_(te), {
 					size: 14,
 					"stroke-width": 2,
 					class: "tpl:mt-0.5 tpl:shrink-0"
-				}), l("span", null, _(v(B).designReference.error), 1)])) : s("", !0),
-				q.value ? s("", !0) : (h(), c("button", {
+				}), l("span", null, g(_(B).designReference.error), 1)])) : s("", !0),
+				q.value ? s("", !0) : (m(), c("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:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
 					disabled: !Y.value,
 					onClick: $
-				}, [d(v(a), {
+				}, [d(_(a), {
 					size: 16,
 					"stroke-width": 2
-				}), u(" " + _(v(B).designReference.generate), 1)], 8, ve)),
-				l("p", ye, _(v(B).aiMenu.disclaimer), 1)
+				}), u(" " + g(_(B).designReference.generate), 1)], 8, ve)),
+				l("p", ye, g(_(B).aiMenu.disclaimer), 1)
 			]))])])) : s("", !0)]),
 			_: 1
 		}));
 	}
-}), [["__scopeId", "data-v-1c8d2ac8"]]);
+}), [["__scopeId", "data-v-d70ec3cf"]]);
 //#endregion
 export { z as default };

package/dist/ModuleBrowserModal-CiV_jOEM.js

@@ -0,0 +1,205 @@
+import "./useEditorCore-DUGD6pq_.js";
+import { T as e, b as t, f as n } from "./keys-C0MQRs8d.js";
+import { t as r } from "./useI18n-D6m7ZUgY.js";
+import { n as i } from "./_plugin-vue_export-helper-B1-bu7yR.js";
+import { n as a, t as o } from "./blockTypeIcons-BrKZB10B.js";
+import { t as s } from "./trash-2-OwjZ-guZ.js";
+import { t as ee } from "./x-CGlq2XQe.js";
+import { t as te } from "./TplModal-C5_CF-qn.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as ne, createElementBlock as d, createElementVNode as f, createVNode as p, defineAsyncComponent as re, defineComponent as m, normalizeStyle as ie, openBlock as h, ref as g, renderList as _, resolveDynamicComponent as ae, toDisplayString as v, unref as y, vModelSelect as oe, vModelText as se, watch as ce, withCtx as le, withDirectives as b, withModifiers as x } from "vue";
+var ue = i("search", [["path", {
+	d: "m21 21-4.34-4.34",
+	key: "14j7rj"
+}], ["circle", {
+	cx: "11",
+	cy: "11",
+	r: "8",
+	key: "4ej97u"
+}]]), de = {
+	role: "dialog",
+	"aria-modal": "true",
+	"aria-labelledby": "tpl-module-browser-title",
+	class: "tpl-scale-in tpl:mx-4 tpl:flex tpl:w-full tpl:max-w-[1000px] tpl:flex-col tpl:rounded-[var(--tpl-radius-lg)]",
+	style: {
+		"background-color": "var(--tpl-bg-elevated)",
+		"box-shadow": "var(--tpl-shadow-xl)",
+		"max-height": "90vh"
+	}
+}, fe = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]" }, pe = {
+	id: "tpl-module-browser-title",
+	class: "tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
+}, me = ["aria-label"], S = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, C = { class: "tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden" }, w = { class: "tpl:px-4 tpl:pt-4 tpl:pb-3" }, T = { class: "tpl:relative" }, E = ["placeholder"], D = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4" }, O = {
+	key: 0,
+	class: "tpl:flex tpl:flex-col tpl:gap-1"
+}, k = ["aria-pressed", "onClick"], A = { class: "tpl:flex tpl:items-center tpl:gap-2" }, j = { class: "tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, M = { class: "tpl:shrink-0 tpl:rounded-full tpl:px-1.5 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]" }, N = { class: "tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1" }, P = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]"
+}, F = ["aria-label", "onClick"], I = [
+	"aria-label",
+	"title",
+	"onClick"
+], L = {
+	key: 1,
+	class: "tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12"
+}, R = { class: "tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, z = { class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]" }, he = {
+	key: 0,
+	class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden"
+}, ge = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, _e = {
+	key: 1,
+	class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4"
+}, ve = { class: "tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, ye = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]" }, be = { class: "tpl:flex tpl:items-center tpl:gap-2" }, xe = { class: "tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, Se = ["value"], Ce = { class: "tpl:flex tpl:gap-2" }, we = ["disabled"], B = /* @__PURE__ */ m({
+	__name: "ModuleBrowserModal",
+	props: { visible: { type: Boolean } },
+	emits: ["close", "insert"],
+	setup(i, { emit: m }) {
+		let B = i, V = m, Te = re(() => import("./ModulePreviewCanvas-Bmy6Y1WE.js")), { t: H } = r(), U = e(t, "ModuleBrowserModal"), W = e(n, "ModuleBrowserModal"), G = g(""), K = g(null), q = g(null), J = g("end"), Y = l(() => {
+			let e = U.modules.value;
+			if (!G.value) return e;
+			let t = G.value.toLowerCase();
+			return e.filter((e) => e.name.toLowerCase().includes(t));
+		}), X = l(() => K.value ? U.modules.value.find((e) => e.id === K.value) ?? null : null), Ee = l(() => {
+			let e = [{
+				value: "beginning",
+				label: H.modules.insertAtBeginning
+			}], t = W.content.value.blocks;
+			for (let n = 0; n < t.length; n++) {
+				let r = t[n], i = r.type, a = H.blocks[i] ?? r.type;
+				e.push({
+					value: r.id,
+					label: H.modules.insertAfterBlock.replace("{block}", `${a} ${n + 1}`)
+				});
+			}
+			return e.push({
+				value: "end",
+				label: H.modules.insertAtEnd
+			}), e;
+		}), De = l(() => {
+			if (J.value === "end") return;
+			if (J.value === "beginning") return 0;
+			let e = W.content.value.blocks.findIndex((e) => e.id === J.value);
+			if (e !== -1) return e + 1;
+		});
+		ce(() => B.visible, (e) => {
+			if (e) {
+				G.value = "", K.value = null, q.value = null;
+				let e = W.state.selectedBlockId;
+				e ? J.value = W.content.value.blocks.findIndex((t) => t.id === e) === -1 ? "end" : e : J.value = "end";
+			}
+		});
+		function Oe(e) {
+			let t = [], n = /* @__PURE__ */ new Set();
+			for (let r of e.content) if (!n.has(r.type) && o[r.type] && (n.add(r.type), t.push({
+				type: r.type,
+				icon: o[r.type]
+			})), t.length >= 5) break;
+			return t;
+		}
+		function Z(e) {
+			let t = new Set(e.content.map((e) => e.type));
+			return Math.max(0, t.size - 5);
+		}
+		async function ke(e) {
+			try {
+				await U.deleteModule(e), K.value === e && (K.value = null);
+			} finally {
+				q.value = null;
+			}
+		}
+		function Q() {
+			X.value && V("insert", X.value, De.value);
+		}
+		function $() {
+			V("close");
+		}
+		function Ae(e) {
+			e.key === "Escape" && $(), e.key === "Enter" && X.value && (e.preventDefault(), Q());
+		}
+		return (e, t) => (h(), u(te, {
+			visible: i.visible,
+			onClose: $,
+			onKeydown: Ae
+		}, {
+			default: le(() => [f("div", de, [
+				f("div", fe, [f("h3", pe, v(y(H).modules.browse), 1), f("button", {
+					"aria-label": y(H).modules.close,
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-1 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]",
+					onClick: $
+				}, [p(y(ee), {
+					size: 16,
+					"stroke-width": 2
+				})], 8, me)]),
+				f("div", S, [f("div", C, [f("div", w, [f("div", T, [p(y(ue), {
+					size: 14,
+					"stroke-width": 2,
+					class: "tpl:pointer-events-none tpl:absolute tpl:left-3 tpl:top-1/2 tpl:-translate-y-1/2 tpl:text-[var(--tpl-text-dim)]"
+				}), b(f("input", {
+					"onUpdate:modelValue": t[0] ||= (e) => G.value = e,
+					type: "text",
+					placeholder: y(H).modules.search,
+					class: "tpl:h-9 tpl:w-full tpl:rounded-md tpl:border tpl:pl-9 tpl:pr-3 tpl:text-sm tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"
+				}, null, 8, E), [[se, G.value]])])]), f("div", D, [Y.value.length > 0 ? (h(), d("div", O, [(h(!0), d(c, null, _(Y.value, (e) => (h(), d("button", {
+					key: e.id,
+					type: "button",
+					"aria-pressed": K.value === e.id,
+					class: "tpl:group/card tpl:w-full tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-md)] tpl:border tpl:bg-transparent tpl:px-3 tpl:py-2 tpl:text-left tpl:transition-all tpl:duration-[120ms]",
+					style: ie({
+						borderColor: K.value === e.id ? "var(--tpl-primary)" : "var(--tpl-border)",
+						backgroundColor: K.value === e.id ? "var(--tpl-primary-light)" : "transparent"
+					}),
+					onClick: (t) => K.value = e.id
+				}, [f("div", A, [f("span", j, v(e.name), 1), f("span", M, v(y(H).modules.blockCount.replace("{count}", String(e.content.length))), 1)]), f("div", N, [
+					(h(!0), d(c, null, _(Oe(e), (e) => (h(), u(ae(e.icon), {
+						key: e.type,
+						size: 14,
+						"stroke-width": 1.5,
+						class: "tpl:text-[var(--tpl-text-dim)]"
+					}))), 128)),
+					Z(e) > 0 ? (h(), d("span", P, " +" + v(Z(e)), 1)) : ne("", !0),
+					q.value === e.id ? (h(), d("button", {
+						key: 1,
+						"aria-label": y(H).modules.deleteConfirm,
+						class: "tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2 tpl:py-0.5 tpl:text-[10px] tpl:font-medium tpl:transition-colors tpl:duration-100 tpl:border-[var(--tpl-danger)] tpl:text-[var(--tpl-danger)]",
+						style: { "background-color": "transparent" },
+						onClick: x((t) => ke(e.id), ["stop"])
+					}, v(y(H).modules.deleteConfirm), 9, F)) : (h(), d("button", {
+						key: 2,
+						class: "tpl-module-delete-btn tpl:ml-auto tpl:cursor-pointer tpl:rounded-md tpl:border-none tpl:bg-transparent tpl:p-0.5 tpl:transition-colors tpl:duration-100 tpl:text-[var(--tpl-text-dim)]",
+						"aria-label": y(H).modules.delete,
+						title: y(H).modules.delete,
+						onClick: x((t) => q.value = e.id, ["stop"])
+					}, [p(y(s), {
+						size: 12,
+						"stroke-width": 1.5
+					})], 8, I))
+				])], 12, k))), 128))])) : (h(), d("div", L, [p(y(a), {
+					size: 32,
+					"stroke-width": 1,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), f("p", R, v(G.value ? y(H).modules.noModules : y(H).modules.noModulesHint), 1)]))])]), f("div", z, [X.value ? (h(), d("div", he, [f("div", ge, [p(y(Te), { blocks: X.value.content }, null, 8, ["blocks"])])])) : (h(), d("div", _e, [p(y(a), {
+					size: 32,
+					"stroke-width": 1,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), f("p", ve, v(y(H).modules.selectToPreview), 1)]))])]),
+				f("div", ye, [f("div", be, [f("label", xe, v(y(H).modules.insertPosition), 1), b(f("select", {
+					"onUpdate:modelValue": t[1] ||= (e) => J.value = e,
+					class: "tpl:h-7 tpl:max-w-[220px] tpl:rounded-md tpl:border tpl:px-2 tpl:text-xs tpl:outline-none tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:text-[var(--tpl-text)]"
+				}, [(h(!0), d(c, null, _(Ee.value, (e) => (h(), d("option", {
+					key: e.value,
+					value: e.value
+				}, v(e.label), 9, Se))), 128))], 512), [[oe, J.value]])]), f("div", Ce, [f("button", {
+					type: "button",
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]",
+					onClick: $
+				}, v(y(H).modules.close), 1), f("button", {
+					type: "button",
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]",
+					disabled: !X.value,
+					onClick: Q
+				}, v(y(H).modules.insert), 9, we)])])
+			])]),
+			_: 1
+		}, 8, ["visible"]));
+	}
+});
+//#endregion
+export { B as default };

package/dist/{ModulePreviewCanvas-BcBJLnwL.js → ModulePreviewCanvas-Bmy6Y1WE.js}

@@ -1,5 +1,5 @@
-import { P as e, _ as t, a as n, f as r, g as i, h as a, i as o, m as s, n as c, p as l, r as u, u as d, v as f, y as p } from "./useEditorCore-Cc4RCwWq.js";
-import { o as m } from "./keys-Dwa2PmdD.js";
+import { P as e, _ as t, a as n, f as r, g as i, h as a, i as o, m as s, n as c, p as l, r as u, u as d, v as f, y as p } from "./useEditorCore-DUGD6pq_.js";
+import { o as m } from "./keys-C0MQRs8d.js";
 import { Fragment as h, computed as g, createBlock as _, createElementBlock as v, createElementVNode as y, defineComponent as b, inject as x, normalizeStyle as S, openBlock as C, renderList as w, resolveComponent as T, resolveDynamicComponent as E, unref as D } from "vue";
 //#region src/components/blocks/PreviewSectionBlock.vue?vue&type=script&setup=true&lang.ts
 var O = { class: "tpl:w-full" }, k = { class: "tpl:flex tpl:gap-0" }, A = /* @__PURE__ */ b({