@templatical/editor 0.0.1 → 0.0.2

package/dist/DesignReferenceSidebar-CyHq4SWt.js

@@ -0,0 +1,272 @@
+import "./timeouts-CmBrLeZA.js";
+import { f as e, r as t } from "./keys-8B5MFafK.js";
+import { t as n } from "./useI18n-DzH4KXDk.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 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", [
+	["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"
+	}]
+]), b = 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"
+	}],
+	["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"
+	}]
+]), de = r("upload", [
+	["path", {
+		d: "M12 3v12",
+		key: "1x0j5s"
+	}],
+	["path", {
+		d: "m17 8-5-5-5 5",
+		key: "7q97r8"
+	}],
+	["path", {
+		d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
+		key: "ih7n3h"
+	}]
+]), fe = {
+	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)]" }, x = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, S = {
+	key: 0,
+	class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
+}, C = { class: "tpl:flex tpl:w-full tpl:flex-col tpl:items-center tpl:gap-3" }, w = { class: "tpl:text-sm tpl:text-[var(--tpl-text-muted)]" }, T = {
+	key: 1,
+	class: "tpl:flex tpl:flex-col tpl:gap-4"
+}, E = { class: "tpl:flex tpl:gap-1 tpl:rounded-[var(--tpl-radius-sm)] tpl:p-1 tpl:bg-[var(--tpl-bg-hover)]" }, D = {
+	key: 0,
+	class: "tpl:flex tpl:flex-col tpl:gap-2"
+}, O = { class: "tpl:relative tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)]" }, k = ["src", "alt"], A = {
+	key: 1,
+	class: "tpl:flex tpl:h-32 tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-2"
+}, j = { class: "tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, M = { class: "tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-muted)]" }, N = { class: "tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, P = ["accept"], F = { class: "tpl:flex tpl:flex-col tpl:gap-1.5" }, I = { class: "tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text-muted)]" }, L = ["placeholder"], R = {
+	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)]"
+}, z = { class: "tpl:text-xs tpl:leading-snug tpl:text-[var(--tpl-text)]" }, he = { class: "tpl:flex tpl:gap-2" }, ge = {
+	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)]"
+}, _e = ["disabled"], ve = { class: "tpl:m-0 tpl:pt-1 tpl:text-center tpl:text-[11px] tpl:text-[var(--tpl-text-dim)]" }, B = /* @__PURE__ */ i(/* @__PURE__ */ f({
+	__name: "DesignReferenceSidebar",
+	props: {
+		visible: { type: Boolean },
+		hasExistingBlocks: { type: Boolean }
+	},
+	emits: ["close", "apply"],
+	setup(r, { emit: i }) {
+		let f = r, B = i, { t: V } = n(), ye = p(e), H = le({
+			authManager: p(t),
+			getTemplateId: () => ye.state.template?.id ?? null,
+			onApply: (e) => B("apply", e)
+		}), U = g("image"), W = g(null), G = g(""), K = g(null), q = g(!1), J = g(!1), Y = re(() => H.isGenerating.value ? !1 : W.value !== null);
+		function X(e) {
+			U.value = e, Q();
+		}
+		function be(e) {
+			let t = e.target, n = t.files?.[0];
+			n && Z(n), t.value = "";
+		}
+		function Z(e) {
+			if (e.size > 10485760) {
+				H.error.value = V.designReference.fileTooLarge;
+				return;
+			}
+			if (U.value === "image") {
+				if (![
+					"image/png",
+					"image/jpeg",
+					"image/jpg",
+					"image/webp"
+				].includes(e.type)) {
+					H.error.value = V.designReference.invalidFileType;
+					return;
+				}
+			} else if (U.value === "pdf" && e.type !== "application/pdf") {
+				H.error.value = V.designReference.invalidFileType;
+				return;
+			}
+			W.value = e, H.error.value = null, K.value && URL.revokeObjectURL(K.value), e.type.startsWith("image/") ? K.value = URL.createObjectURL(e) : K.value = null;
+		}
+		function Q() {
+			K.value &&= (URL.revokeObjectURL(K.value), null), W.value = null;
+		}
+		function xe(e) {
+			e.preventDefault(), J.value = !0;
+		}
+		function Se() {
+			J.value = !1;
+		}
+		function Ce(e) {
+			e.preventDefault(), J.value = !1;
+			let t = e.dataTransfer?.files?.[0];
+			t && Z(t);
+		}
+		function $() {
+			if (!Y.value) return;
+			if (f.hasExistingBlocks && !q.value) {
+				q.value = !0;
+				return;
+			}
+			q.value = !1;
+			let e = {};
+			G.value.trim() && (e.prompt = G.value.trim()), U.value === "image" && W.value ? e.imageUpload = W.value : U.value === "pdf" && W.value && (e.pdfUpload = W.value), H.generate(e);
+		}
+		function we() {
+			q.value = !1;
+		}
+		return oe(() => f.visible, (e) => {
+			e || (q.value = !1);
+		}), (e, t) => (h(), ie(ne, {
+			"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: se(() => [r.visible ? (h(), c("div", fe, [l("div", pe, [l("div", me, [d(v(a), {
+				size: 13,
+				"stroke-width": 2
+			}), l("span", null, _(v(V).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) => B("close")
+			}, [d(v(o), {
+				size: 14,
+				"stroke-width": 2
+			})])]), l("div", x, [v(H).isGenerating.value ? (h(), c("div", S, [l("div", C, [d(te), l("p", w, _(v(V).designReference.generating), 1)])])) : (h(), c("div", T, [
+				l("div", E, [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({
+						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), {
+					size: 12,
+					"stroke-width": 2
+				}), u(" " + _(v(V).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({
+						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), {
+					size: 12,
+					"stroke-width": 2
+				}), u(" " + _(v(V).designReference.uploadPdf), 1)], 4)]),
+				l("div", null, [W.value ? (h(), c("div", D, [l("div", O, [K.value ? (h(), 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, k)) : (h(), c("div", A, [d(v(b), {
+					size: 32,
+					"stroke-width": 1.5,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), l("span", j, _(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), {
+					size: 12,
+					"stroke-width": 2
+				})])])])) : (h(), 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({
+						borderColor: J.value ? "var(--tpl-primary)" : "var(--tpl-border-light)",
+						backgroundColor: J.value ? "var(--tpl-primary-light)" : "var(--tpl-bg)"
+					}),
+					onClick: t[3] ||= (t) => e.$refs.fileInput?.click(),
+					onDragover: xe,
+					onDragleave: Se,
+					onDrop: Ce
+				}, [
+					d(v(de), {
+						size: 24,
+						"stroke-width": 1.5,
+						class: "tpl:text-[var(--tpl-text-dim)]"
+					}),
+					l("span", M, _(v(V).designReference.dropHint), 1),
+					l("span", N, _(U.value === "image" ? v(V).designReference.acceptedImages : v(V).designReference.acceptedPdf), 1)
+				], 36)), l("input", {
+					ref: "fileInput",
+					type: "file",
+					class: "tpl:hidden",
+					accept: U.value === "image" ? "image/png,image/jpeg,image/webp" : "application/pdf",
+					onChange: be
+				}, null, 40, P)]),
+				l("div", F, [l("label", I, _(v(V).designReference.promptLabel), 1), ce(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(V).designReference.promptPlaceholder,
+					rows: "3"
+				}, null, 8, L), [[y, G.value]])]),
+				q.value ? (h(), c("div", R, [l("p", z, _(v(V).designReference.replaceWarning), 1), l("div", he, [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: we
+				}, _(v(V).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(V).designReference.replaceConfirm), 1)])])) : s("", !0),
+				v(H).error.value ? (h(), c("div", ge, [d(v(ee), {
+					size: 14,
+					"stroke-width": 2,
+					class: "tpl:mt-0.5 tpl:shrink-0"
+				}), l("span", null, _(v(V).designReference.error), 1)])) : s("", !0),
+				q.value ? s("", !0) : (h(), 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), {
+					size: 16,
+					"stroke-width": 2
+				}), u(" " + _(v(V).designReference.generate), 1)], 8, _e)),
+				l("p", ve, _(v(V).aiMenu.disclaimer), 1)
+			]))])])) : s("", !0)]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-0b1509fc"]]);
+//#endregion
+export { B as default };

package/dist/LoadingTrack-vK8W2PJf.js

@@ -0,0 +1,10 @@
+import { t as e } from "./_plugin-vue_export-helper-B1-bu7yR.js";
+import { createElementBlock as t, openBlock as n } from "vue";
+//#region src/components/LoadingTrack.vue
+var r = {}, i = { class: "tpl-loading-track" };
+function a(e, r) {
+	return n(), t("div", i);
+}
+var o = /* @__PURE__ */ e(r, [["render", a], ["__scopeId", "data-v-1ed538ec"]]);
+//#endregion
+export { o as t };

package/dist/ModuleBrowserModal-Cus2Hdwl.js

@@ -0,0 +1,205 @@
+import "./useEditorCore-DVp5qmtC.js";
+import { f as e, y as t } from "./keys-8B5MFafK.js";
+import { t as n } from "./useI18n-DzH4KXDk.js";
+import { n as r } from "./_plugin-vue_export-helper-B1-bu7yR.js";
+import { n as i, t as a } from "./blockTypeIcons-BujoY5Dl.js";
+import { t as ee } from "./trash-2-OwjZ-guZ.js";
+import { t as te } from "./x-CGlq2XQe.js";
+import { t as ne } from "./TplModal-LT3FXlgs.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as re, createElementBlock as l, createElementVNode as u, createVNode as d, defineAsyncComponent as ie, defineComponent as f, inject as p, normalizeStyle as ae, openBlock as m, ref as h, renderList as g, resolveDynamicComponent as oe, toDisplayString as _, unref as v, vModelSelect as se, vModelText as ce, watch as le, withCtx as ue, withDirectives as y, withModifiers as b } from "vue";
+var de = r("search", [["path", {
+	d: "m21 21-4.34-4.34",
+	key: "14j7rj"
+}], ["circle", {
+	cx: "11",
+	cy: "11",
+	r: "8",
+	key: "4ej97u"
+}]]), fe = {
+	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"
+	}
+}, pe = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]" }, me = {
+	id: "tpl-module-browser-title",
+	class: "tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]"
+}, he = ["aria-label"], x = { class: "tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden" }, S = { class: "tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden" }, C = { class: "tpl:px-4 tpl:pt-4 tpl:pb-3" }, w = { class: "tpl:relative" }, T = ["placeholder"], E = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4" }, D = {
+	key: 0,
+	class: "tpl:flex tpl:flex-col tpl:gap-1"
+}, O = ["aria-pressed", "onClick"], k = { class: "tpl:flex tpl:items-center tpl:gap-2" }, A = { class: "tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]" }, j = { 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)]" }, M = { class: "tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1" }, N = {
+	key: 0,
+	class: "tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]"
+}, P = ["aria-label", "onClick"], F = [
+	"aria-label",
+	"title",
+	"onClick"
+], I = {
+	key: 1,
+	class: "tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12"
+}, L = { class: "tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, R = { class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]" }, ge = {
+	key: 0,
+	class: "tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden"
+}, _e = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, z = {
+	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__ */ f({
+	__name: "ModuleBrowserModal",
+	props: { visible: { type: Boolean } },
+	emits: ["close", "insert"],
+	setup(r, { emit: f }) {
+		let B = r, V = f, Te = ie(() => import("./ModulePreviewCanvas-DaByXKY_.js")), { t: H } = n(), U = p(t), W = p(e), G = h(""), K = h(null), q = h(null), J = h("end"), Y = s(() => {
+			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 = s(() => K.value ? U.modules.value.find((e) => e.id === K.value) ?? null : null), Ee = s(() => {
+			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 = s(() => {
+			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;
+		});
+		le(() => 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) && a[r.type] && (n.add(r.type), t.push({
+				type: r.type,
+				icon: a[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) => (m(), c(ne, {
+			visible: r.visible,
+			onClose: $,
+			onKeydown: Ae
+		}, {
+			default: ue(() => [u("div", fe, [
+				u("div", pe, [u("h3", me, _(v(H).modules.browse), 1), u("button", {
+					"aria-label": v(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: $
+				}, [d(v(te), {
+					size: 16,
+					"stroke-width": 2
+				})], 8, he)]),
+				u("div", x, [u("div", S, [u("div", C, [u("div", w, [d(v(de), {
+					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)]"
+				}), y(u("input", {
+					"onUpdate:modelValue": t[0] ||= (e) => G.value = e,
+					type: "text",
+					placeholder: v(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, T), [[ce, G.value]])])]), u("div", E, [Y.value.length > 0 ? (m(), l("div", D, [(m(!0), l(o, null, g(Y.value, (e) => (m(), l("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: ae({
+						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
+				}, [u("div", k, [u("span", A, _(e.name), 1), u("span", j, _(v(H).modules.blockCount.replace("{count}", String(e.content.length))), 1)]), u("div", M, [
+					(m(!0), l(o, null, g(Oe(e), (e) => (m(), c(oe(e.icon), {
+						key: e.type,
+						size: 14,
+						"stroke-width": 1.5,
+						class: "tpl:text-[var(--tpl-text-dim)]"
+					}))), 128)),
+					Z(e) > 0 ? (m(), l("span", N, " +" + _(Z(e)), 1)) : re("", !0),
+					q.value === e.id ? (m(), l("button", {
+						key: 1,
+						"aria-label": v(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: b((t) => ke(e.id), ["stop"])
+					}, _(v(H).modules.deleteConfirm), 9, P)) : (m(), l("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": v(H).modules.delete,
+						title: v(H).modules.delete,
+						onClick: b((t) => q.value = e.id, ["stop"])
+					}, [d(v(ee), {
+						size: 12,
+						"stroke-width": 1.5
+					})], 8, F))
+				])], 12, O))), 128))])) : (m(), l("div", I, [d(v(i), {
+					size: 32,
+					"stroke-width": 1,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), u("p", L, _(G.value ? v(H).modules.noModules : v(H).modules.noModulesHint), 1)]))])]), u("div", R, [X.value ? (m(), l("div", ge, [u("div", _e, [d(v(Te), { blocks: X.value.content }, null, 8, ["blocks"])])])) : (m(), l("div", z, [d(v(i), {
+					size: 32,
+					"stroke-width": 1,
+					class: "tpl:text-[var(--tpl-text-dim)]"
+				}), u("p", ve, _(v(H).modules.selectToPreview), 1)]))])]),
+				u("div", ye, [u("div", be, [u("label", xe, _(v(H).modules.insertPosition), 1), y(u("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)]"
+				}, [(m(!0), l(o, null, g(Ee.value, (e) => (m(), l("option", {
+					key: e.value,
+					value: e.value
+				}, _(e.label), 9, Se))), 128))], 512), [[se, J.value]])]), u("div", Ce, [u("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(H).modules.close), 1), u("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(H).modules.insert), 9, we)])])
+			])]),
+			_: 1
+		}, 8, ["visible"]));
+	}
+});
+//#endregion
+export { B as default };

package/dist/ModulePreviewCanvas-DaByXKY_.js

@@ -0,0 +1,106 @@
+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-DVp5qmtC.js";
+import { o as m } from "./keys-8B5MFafK.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({
+	name: "PreviewSectionBlock",
+	__name: "PreviewSectionBlock",
+	props: {
+		block: {},
+		viewport: {}
+	},
+	setup(b) {
+		let A = {
+			title: d,
+			paragraph: s,
+			image: i,
+			video: c,
+			button: e,
+			divider: f,
+			social: n,
+			menu: a,
+			table: u,
+			spacer: o,
+			html: t,
+			custom: p
+		}, j = b, M = x(m), N = g(() => {
+			switch (j.block.columns) {
+				case "2": return ["50%", "50%"];
+				case "3": return [
+					"33.33%",
+					"33.33%",
+					"33.33%"
+				];
+				case "1-2": return ["33.33%", "66.67%"];
+				case "2-1": return ["66.67%", "33.33%"];
+				default: return ["100%"];
+			}
+		}), P = g(() => {
+			let e = N.value.length, t = [...j.block.children];
+			for (; t.length < e;) t.push([]);
+			return t.slice(0, e);
+		});
+		function F(e) {
+			return P.value[e] || [];
+		}
+		function I(e) {
+			return l(e, M, A);
+		}
+		return (e, t) => {
+			let n = T("PreviewSectionBlock", !0);
+			return C(), v("div", O, [y("div", k, [(C(!0), v(h, null, w(P.value, (e, t) => (C(), v("div", {
+				key: t,
+				style: S({ width: N.value[t] })
+			}, [(C(!0), v(h, null, w(F(t), (e) => (C(), v("div", {
+				key: e.id,
+				style: S(D(r)(e))
+			}, [e.type === "section" ? (C(), _(n, {
+				key: 0,
+				block: e,
+				viewport: "desktop"
+			}, null, 8, ["block"])) : (C(), _(E(I(e)), {
+				key: 1,
+				block: e,
+				viewport: "desktop"
+			}, null, 8, ["block"]))], 4))), 128))], 4))), 128))])]);
+		};
+	}
+}), j = {
+	class: "tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg",
+	style: {
+		"background-color": "var(--tpl-canvas-bg)",
+		"box-shadow": "var(--tpl-shadow-sm)"
+	}
+}, M = /* @__PURE__ */ b({
+	__name: "ModulePreviewCanvas",
+	props: { blocks: {} },
+	setup(g) {
+		let y = x(m), b = {
+			section: A,
+			title: d,
+			paragraph: s,
+			image: i,
+			video: c,
+			button: e,
+			divider: f,
+			social: n,
+			menu: a,
+			table: u,
+			spacer: o,
+			html: t,
+			custom: p
+		};
+		function T(e) {
+			return l(e, y, b);
+		}
+		return (e, t) => (C(), v("div", j, [(C(!0), v(h, null, w(g.blocks, (e) => (C(), v("div", {
+			key: e.id,
+			style: S(D(r)(e))
+		}, [(C(), _(E(T(e)), {
+			block: e,
+			viewport: "desktop"
+		}, null, 8, ["block"]))], 4))), 128))]));
+	}
+});
+//#endregion
+export { M as default };