npm - @templatical/editor - Versions diffs - 0.0.3 → 0.0.5 - Mend

@templatical/editor 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/dist/{ModuleBrowserModal-lrk3Fr0H.js → cdn/chunks/ModuleBrowserModal-ChBr3aXj.js} RENAMED Viewed

@@ -1,21 +1,9 @@
-import "./useEditorCore-Cc4RCwWq.js";
-import { f as e, y as t } from "./keys-Dwa2PmdD.js";
-import { t as n } from "./useI18n-DUirdXEX.js";
-import { n as r } from "./_plugin-vue_export-helper-B1-bu7yR.js";
-import { n as i, t as a } from "./blockTypeIcons-BpPTqcok.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-CGzRjR96.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 = {
+import { $ as e, B as t, F as n, H as r, N as i, R as a, S as o, U as s, _ as c, at as l, b as u, ct as ee, d, g as te, h as f, lt as p, m, o as ne, p as h, s as re, u as g, x as ie } from "./draggable-BQNU47zu.js";
+import { Ht as ae, Kt as oe, Xt as _, i as se, jt as ce, rt as le, tt as ue } from "./features-Ds0XUfte.js";
+import { A as v, y as de } from "./icons-fWsuSvgd.js";
+import { t as y } from "./blockTypeIcons-5QwYklNq.js";
+//#region src/cloud/components/ModuleBrowserModal.vue?vue&type=script&setup=true&lang.ts
+var fe = {
 	role: "dialog",
 	"aria-modal": "true",
 	"aria-labelledby": "tpl-module-browser-title",
@@ -28,7 +16,7 @@ var de = r("search", [["path", {
 }, 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 = {
+}, b = ["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 = {
@@ -41,45 +29,45 @@ var de = r("search", [["path", {
 ], 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 = {
+}, 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)]" }, z = {
 	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 = {
+}, he = { class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4" }, ge = {
 	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({
+}, _e = { class: "tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, ve = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]" }, ye = { class: "tpl:flex tpl:items-center tpl:gap-2" }, be = { class: "tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]" }, xe = ["value"], Se = { class: "tpl:flex tpl:gap-2" }, Ce = ["disabled"], B = /* @__PURE__ */ o({
 	__name: "ModuleBrowserModal",
 	props: { visible: { type: Boolean } },
 	emits: ["close", "insert"],
-	setup(r, { emit: f }) {
-		let B = r, V = f, Te = ie(() => import("./ModulePreviewCanvas-BcBJLnwL.js")), { t: H } = n(), U = p(t), W = p(e), G = h(""), K = h(null), q = h(null), J = h("end"), Y = s(() => {
+	setup(o, { emit: B }) {
+		let we = o, V = B, Te = ie(() => import("./ModulePreviewCanvas-DkSvri9H.js")), { t: H } = ce(), U = _(oe, "ModuleBrowserModal"), W = _(ae, "ModuleBrowserModal"), G = e(""), K = e(null), q = e(null), J = e("end"), Y = h(() => {
 			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(() => {
+		}), X = h(() => K.value ? U.modules.value.find((e) => e.id === K.value) ?? null : null), Ee = h(() => {
 			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;
+				let r = t[n];
 				e.push({
 					value: r.id,
-					label: H.modules.insertAfterBlock.replace("{block}", `${a} ${n + 1}`)
+					label: H.modules.insertAfterBlock.replace("{block}", `${H.blocks[r.type] ?? r.type} ${n + 1}`)
 				});
 			}
 			return e.push({
 				value: "end",
 				label: H.modules.insertAtEnd
 			}), e;
-		}), De = s(() => {
+		}), De = h(() => {
 			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) => {
+		t(() => we.visible, (e) => {
 			if (e) {
 				G.value = "", K.value = null, q.value = null;
 				let e = W.state.selectedBlockId;
@@ -88,9 +76,9 @@ var de = r("search", [["path", {
 		});
 		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({
+			for (let r of e.content) if (!n.has(r.type) && y[r.type] && (n.add(r.type), t.push({
 				type: r.type,
-				icon: a[r.type]
+				icon: y[r.type]
 			})), t.length >= 5) break;
 			return t;
 		}
@@ -114,88 +102,88 @@ var de = r("search", [["path", {
 		function Ae(e) {
 			e.key === "Escape" && $(), e.key === "Enter" && X.value && (e.preventDefault(), Q());
 		}
-		return (e, t) => (m(), c(ne, {
-			visible: r.visible,
+		return (e, t) => (i(), f(se, {
+			visible: o.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,
+			default: r(() => [m("div", fe, [
+				m("div", pe, [m("h3", me, p(l(H).modules.browse), 1), m("button", {
+					"aria-label": l(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), {
+				}, [u(l(ue), {
 					size: 16,
 					"stroke-width": 2
-				})], 8, he)]),
-				u("div", x, [u("div", S, [u("div", C, [u("div", w, [d(v(de), {
+				})], 8, b)]),
+				m("div", x, [m("div", S, [m("div", C, [m("div", w, [u(l(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", {
+				}), s(m("input", {
 					"onUpdate:modelValue": t[0] ||= (e) => G.value = e,
 					type: "text",
-					placeholder: v(H).modules.search,
+					placeholder: l(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", {
+				}, null, 8, T), [[re, G.value]])])]), m("div", E, [Y.value.length > 0 ? (i(), c("div", D, [(i(!0), c(d, null, n(Y.value, (e) => (i(), c("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({
+					style: ee({
 						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), {
+				}, [m("div", k, [m("span", A, p(e.name), 1), m("span", j, p(l(H).modules.blockCount.replace("{count}", String(e.content.length))), 1)]), m("div", M, [
+					(i(!0), c(d, null, n(Oe(e), (e) => (i(), f(a(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", {
+					Z(e) > 0 ? (i(), c("span", N, " +" + p(Z(e)), 1)) : te("", !0),
+					q.value === e.id ? (i(), c("button", {
 						key: 1,
-						"aria-label": v(H).modules.deleteConfirm,
+						"aria-label": l(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", {
+						onClick: g((t) => ke(e.id), ["stop"])
+					}, p(l(H).modules.deleteConfirm), 9, P)) : (i(), c("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), {
+						"aria-label": l(H).modules.delete,
+						title: l(H).modules.delete,
+						onClick: g((t) => q.value = e.id, ["stop"])
+					}, [u(l(le), {
 						size: 12,
 						"stroke-width": 1.5
 					})], 8, F))
-				])], 12, O))), 128))])) : (m(), l("div", I, [d(v(i), {
+				])], 12, O))), 128))])) : (i(), c("div", I, [u(l(v), {
 					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), {
+				}), m("p", L, p(G.value ? l(H).modules.noModules : l(H).modules.noModulesHint), 1)]))])]), m("div", R, [X.value ? (i(), c("div", z, [m("div", he, [u(l(Te), { blocks: X.value.content }, null, 8, ["blocks"])])])) : (i(), c("div", ge, [u(l(v), {
 					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", {
+				}), m("p", _e, p(l(H).modules.selectToPreview), 1)]))])]),
+				m("div", ve, [m("div", ye, [m("label", be, p(l(H).modules.insertPosition), 1), s(m("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", {
+				}, [(i(!0), c(d, null, n(Ee.value, (e) => (i(), c("option", {
 					key: e.value,
 					value: e.value
-				}, _(e.label), 9, Se))), 128))], 512), [[se, J.value]])]), u("div", Ce, [u("button", {
+				}, p(e.label), 9, xe))), 128))], 512), [[ne, J.value]])]), m("div", Se, [m("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", {
+				}, p(l(H).modules.close), 1), m("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)])])
+				}, p(l(H).modules.insert), 9, Ce)])])
 			])]),
 			_: 1
 		}, 8, ["visible"]));
@@ -203,3 +191,5 @@ var de = r("search", [["path", {
 });
 //#endregion
 export { B as default };
+//# sourceMappingURL=ModuleBrowserModal-ChBr3aXj.js.map

package/dist/cdn/chunks/ModuleBrowserModal-ChBr3aXj.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ModuleBrowserModal-ChBr3aXj.js","names":[],"sources":["../../../src/cloud/components/ModuleBrowserModal.vue","../../../src/cloud/components/ModuleBrowserModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { blockTypeIcons } from \"../../utils/blockTypeIcons\";\nimport {\n SAVED_MODULES_HEADLESS_KEY,\n EDITOR_KEY,\n requireInject,\n} from \"../../keys\";\nimport type { SavedModule } from \"@templatical/types\";\nimport { Package, Search, Trash2, X } from \"@lucide/vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: \"close\"): void;\n (e: \"insert\", module: SavedModule, insertIndex: number | undefined): void;\n}>();\n\nconst ModulePreviewCanvas = defineAsyncComponent(\n () => import(\"./ModulePreviewCanvas.vue\"),\n);\n\nconst { t } = useI18n();\nconst savedModules = requireInject(\n SAVED_MODULES_HEADLESS_KEY,\n \"ModuleBrowserModal\",\n);\nconst editor = requireInject(EDITOR_KEY, \"ModuleBrowserModal\");\n\nconst searchQuery = ref(\"\");\nconst selectedModuleId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\nconst filteredModules = computed(() => {\n const modules = savedModules.modules.value;\n if (!searchQuery.value) return modules;\n const query = searchQuery.value.toLowerCase();\n return modules.filter((m) => m.name.toLowerCase().includes(query));\n});\n\nconst selectedModule = computed(() => {\n if (!selectedModuleId.value) return null;\n return (\n savedModules.modules.value.find((m) => m.id === selectedModuleId.value) ??\n null\n );\n});\n\ninterface PositionOption {\n value: string;\n label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n const options: PositionOption[] = [\n { value: \"beginning\", label: t.modules.insertAtBeginning },\n ];\n const blocks = editor.content.value.blocks;\n for (let i = 0; i < blocks.length; i++) {\n const block = blocks[i];\n const typeKey = block.type as keyof typeof t.blocks;\n const label = t.blocks[typeKey] ?? block.type;\n options.push({\n value: block.id,\n label: t.modules.insertAfterBlock.replace(\"{block}\", `${label} ${i + 1}`),\n });\n }\n options.push({ value: \"end\", label: t.modules.insertAtEnd });\n return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n if (insertPosition.value === \"end\") return undefined;\n if (insertPosition.value === \"beginning\") return 0;\n const blocks = editor.content.value.blocks;\n const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n if (idx !== -1) return idx + 1;\n return undefined;\n});\n\nwatch(\n () => props.visible,\n (visible) => {\n if (visible) {\n searchQuery.value = \"\";\n selectedModuleId.value = null;\n confirmDeleteId.value = null;\n // Default to after selected block, or end\n const selectedId = editor.state.selectedBlockId;\n if (selectedId) {\n const idx = editor.content.value.blocks.findIndex(\n (b) => b.id === selectedId,\n );\n insertPosition.value = idx !== -1 ? selectedId : \"end\";\n } else {\n insertPosition.value = \"end\";\n }\n }\n },\n);\n\nfunction getModuleBlockTypeIcons(\n module: SavedModule,\n): { type: string; icon: unknown }[] {\n const icons: { type: string; icon: unknown }[] = [];\n const seen = new Set<string>();\n for (const block of module.content) {\n if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n seen.add(block.type);\n icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n }\n if (icons.length >= 5) break;\n }\n return icons;\n}\n\nfunction getRemainingTypeCount(module: SavedModule): number {\n const types = new Set(module.content.map((b) => b.type));\n return Math.max(0, types.size - 5);\n}\n\nasync function handleDelete(moduleId: string): Promise<void> {\n try {\n await savedModules.deleteModule(moduleId);\n if (selectedModuleId.value === moduleId) {\n selectedModuleId.value = null;\n }\n } finally {\n confirmDeleteId.value = null;\n }\n}\n\nfunction handleInsert(): void {\n if (selectedModule.value) {\n emit(\"insert\", selectedModule.value, resolvedInsertIndex.value);\n }\n}\n\nfunction handleClose(): void {\n emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (event.key === \"Escape\") {\n handleClose();\n }\n if (event.key === \"Enter\" && selectedModule.value) {\n event.preventDefault();\n handleInsert();\n }\n}\n</script>\n\n<template>\n <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"tpl-module-browser-title\"\n 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)]\"\n style=\"\n background-color: var(--tpl-bg-elevated);\n box-shadow: var(--tpl-shadow-xl);\n max-height: 90vh;\n \"\n >\n \n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n >\n <h3\n id=\"tpl-module-browser-title\"\n class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{ t.modules.browse }}\n </h3>\n <button\n :aria-label=\"t.modules.close\"\n 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)]\"\n @click=\"handleClose\"\n >\n <X :size=\"16\" :stroke-width=\"2\" />\n </button>\n </div>\n\n \n <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n \n <div\n class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n >\n \n <div class=\"tpl:px-4 tpl:pt-4 tpl:pb-3\">\n <div class=\"tpl:relative\">\n <Search\n :size=\"14\"\n :stroke-width=\"2\"\n 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)]\"\n />\n <input\n v-model=\"searchQuery\"\n type=\"text\"\n :placeholder=\"t.modules.search\"\n 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)]\"\n />\n </div>\n </div>\n\n \n <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n <div\n v-if=\"filteredModules.length > 0\"\n class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n >\n <button\n v-for=\"mod in filteredModules\"\n :key=\"mod.id\"\n type=\"button\"\n :aria-pressed=\"selectedModuleId === mod.id\"\n 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]\"\n :style=\"{\n borderColor:\n selectedModuleId === mod.id\n ? 'var(--tpl-primary)'\n : 'var(--tpl-border)',\n backgroundColor:\n selectedModuleId === mod.id\n ? 'var(--tpl-primary-light)'\n : 'transparent',\n }\"\n @click=\"selectedModuleId = mod.id\"\n >\n <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n <span\n class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{ mod.name }}\n </span>\n <span\n 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 >\n {{\n t.modules.blockCount.replace(\n \"{count}\",\n String(mod.content.length),\n )\n }}\n </span>\n </div>\n <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n <component\n :is=\"icon.icon\"\n v-for=\"icon in getModuleBlockTypeIcons(mod)\"\n :key=\"icon.type\"\n :size=\"14\"\n :stroke-width=\"1.5\"\n class=\"tpl:text-[var(--tpl-text-dim)]\"\n />\n <span\n v-if=\"getRemainingTypeCount(mod) > 0\"\n class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n >\n +{{ getRemainingTypeCount(mod) }}\n </span>\n <button\n v-if=\"confirmDeleteId === mod.id\"\n :aria-label=\"t.modules.deleteConfirm\"\n 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)]\"\n style=\"background-color: transparent\"\n @click.stop=\"handleDelete(mod.id)\"\n >\n {{ t.modules.deleteConfirm }}\n </button>\n <button\n v-else\n 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)]\"\n :aria-label=\"t.modules.delete\"\n :title=\"t.modules.delete\"\n @click.stop=\"confirmDeleteId = mod.id\"\n >\n <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n </button>\n </div>\n </button>\n </div>\n\n \n <div\n v-else\n class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n >\n <Package\n :size=\"32\"\n :stroke-width=\"1\"\n class=\"tpl:text-[var(--tpl-text-dim)]\"\n />\n <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n {{\n searchQuery ? t.modules.noModules : t.modules.noModulesHint\n }}\n </p>\n </div>\n </div>\n </div>\n\n \n <div\n class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n >\n <div\n v-if=\"selectedModule\"\n class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n >\n \n <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n <ModulePreviewCanvas :blocks=\"selectedModule.content\" />\n </div>\n </div>\n\n \n <div\n v-else\n class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n >\n <Package\n :size=\"32\"\n :stroke-width=\"1\"\n class=\"tpl:text-[var(--tpl-text-dim)]\"\n />\n <p\n class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.modules.selectToPreview }}\n </p>\n </div>\n </div>\n </div>\n\n \n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n >\n <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n <label\n class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.modules.insertPosition }}\n </label>\n <select\n v-model=\"insertPosition\"\n 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)]\"\n >\n <option\n v-for=\"opt in positionOptions\"\n :key=\"opt.value\"\n :value=\"opt.value\"\n >\n {{ opt.label }}\n </option>\n </select>\n </div>\n <div class=\"tpl:flex tpl:gap-2\">\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n @click=\"handleClose\"\n >\n {{ t.modules.close }}\n </button>\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n :disabled=\"!selectedModule\"\n @click=\"handleInsert\"\n >\n {{ t.modules.insert }}\n </button>\n </div>\n </div>\n </div>\n </TplModal>\n</template>\n\n<style>\n.tpl-module-delete-btn:hover {\n color: var(--tpl-danger) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport TplModal from \"./TplModal.vue\";\nimport { useI18n } from \"../../composables\";\nimport { blockTypeIcons } from \"../../utils/blockTypeIcons\";\nimport {\n SAVED_MODULES_HEADLESS_KEY,\n EDITOR_KEY,\n requireInject,\n} from \"../../keys\";\nimport type { SavedModule } from \"@templatical/types\";\nimport { Package, Search, Trash2, X } from \"@lucide/vue\";\nimport { computed, defineAsyncComponent, ref, watch } from \"vue\";\n\nconst props = defineProps<{\n visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: \"close\"): void;\n (e: \"insert\", module: SavedModule, insertIndex: number | undefined): void;\n}>();\n\nconst ModulePreviewCanvas = defineAsyncComponent(\n () => import(\"./ModulePreviewCanvas.vue\"),\n);\n\nconst { t } = useI18n();\nconst savedModules = requireInject(\n SAVED_MODULES_HEADLESS_KEY,\n \"ModuleBrowserModal\",\n);\nconst editor = requireInject(EDITOR_KEY, \"ModuleBrowserModal\");\n\nconst searchQuery = ref(\"\");\nconst selectedModuleId = ref<string | null>(null);\nconst confirmDeleteId = ref<string | null>(null);\n// 'end' = append, 'beginning' = index 0, or block id = after that block\nconst insertPosition = ref<string>(\"end\");\n\nconst filteredModules = computed(() => {\n const modules = savedModules.modules.value;\n if (!searchQuery.value) return modules;\n const query = searchQuery.value.toLowerCase();\n return modules.filter((m) => m.name.toLowerCase().includes(query));\n});\n\nconst selectedModule = computed(() => {\n if (!selectedModuleId.value) return null;\n return (\n savedModules.modules.value.find((m) => m.id === selectedModuleId.value) ??\n null\n );\n});\n\ninterface PositionOption {\n value: string;\n label: string;\n}\n\nconst positionOptions = computed<PositionOption[]>(() => {\n const options: PositionOption[] = [\n { value: \"beginning\", label: t.modules.insertAtBeginning },\n ];\n const blocks = editor.content.value.blocks;\n for (let i = 0; i < blocks.length; i++) {\n const block = blocks[i];\n const typeKey = block.type as keyof typeof t.blocks;\n const label = t.blocks[typeKey] ?? block.type;\n options.push({\n value: block.id,\n label: t.modules.insertAfterBlock.replace(\"{block}\", `${label} ${i + 1}`),\n });\n }\n options.push({ value: \"end\", label: t.modules.insertAtEnd });\n return options;\n});\n\nconst resolvedInsertIndex = computed<number | undefined>(() => {\n if (insertPosition.value === \"end\") return undefined;\n if (insertPosition.value === \"beginning\") return 0;\n const blocks = editor.content.value.blocks;\n const idx = blocks.findIndex((b) => b.id === insertPosition.value);\n if (idx !== -1) return idx + 1;\n return undefined;\n});\n\nwatch(\n () => props.visible,\n (visible) => {\n if (visible) {\n searchQuery.value = \"\";\n selectedModuleId.value = null;\n confirmDeleteId.value = null;\n // Default to after selected block, or end\n const selectedId = editor.state.selectedBlockId;\n if (selectedId) {\n const idx = editor.content.value.blocks.findIndex(\n (b) => b.id === selectedId,\n );\n insertPosition.value = idx !== -1 ? selectedId : \"end\";\n } else {\n insertPosition.value = \"end\";\n }\n }\n },\n);\n\nfunction getModuleBlockTypeIcons(\n module: SavedModule,\n): { type: string; icon: unknown }[] {\n const icons: { type: string; icon: unknown }[] = [];\n const seen = new Set<string>();\n for (const block of module.content) {\n if (!seen.has(block.type) && blockTypeIcons[block.type]) {\n seen.add(block.type);\n icons.push({ type: block.type, icon: blockTypeIcons[block.type] });\n }\n if (icons.length >= 5) break;\n }\n return icons;\n}\n\nfunction getRemainingTypeCount(module: SavedModule): number {\n const types = new Set(module.content.map((b) => b.type));\n return Math.max(0, types.size - 5);\n}\n\nasync function handleDelete(moduleId: string): Promise<void> {\n try {\n await savedModules.deleteModule(moduleId);\n if (selectedModuleId.value === moduleId) {\n selectedModuleId.value = null;\n }\n } finally {\n confirmDeleteId.value = null;\n }\n}\n\nfunction handleInsert(): void {\n if (selectedModule.value) {\n emit(\"insert\", selectedModule.value, resolvedInsertIndex.value);\n }\n}\n\nfunction handleClose(): void {\n emit(\"close\");\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (event.key === \"Escape\") {\n handleClose();\n }\n if (event.key === \"Enter\" && selectedModule.value) {\n event.preventDefault();\n handleInsert();\n }\n}\n</script>\n\n<template>\n <TplModal :visible=\"visible\" @close=\"handleClose\" @keydown=\"handleKeydown\">\n <div\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"tpl-module-browser-title\"\n 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)]\"\n style=\"\n background-color: var(--tpl-bg-elevated);\n box-shadow: var(--tpl-shadow-xl);\n max-height: 90vh;\n \"\n >\n \n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:px-5 tpl:py-4 tpl:border-[var(--tpl-border)]\"\n >\n <h3\n id=\"tpl-module-browser-title\"\n class=\"tpl:text-sm tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{ t.modules.browse }}\n </h3>\n <button\n :aria-label=\"t.modules.close\"\n 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)]\"\n @click=\"handleClose\"\n >\n <X :size=\"16\" :stroke-width=\"2\" />\n </button>\n </div>\n\n \n <div class=\"tpl:flex tpl:min-h-0 tpl:flex-1 tpl:overflow-hidden\">\n \n <div\n class=\"tpl:flex tpl:w-[300px] tpl:shrink-0 tpl:flex-col tpl:overflow-hidden\"\n >\n \n <div class=\"tpl:px-4 tpl:pt-4 tpl:pb-3\">\n <div class=\"tpl:relative\">\n <Search\n :size=\"14\"\n :stroke-width=\"2\"\n 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)]\"\n />\n <input\n v-model=\"searchQuery\"\n type=\"text\"\n :placeholder=\"t.modules.search\"\n 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)]\"\n />\n </div>\n </div>\n\n \n <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:px-4 tpl:pb-4\">\n <div\n v-if=\"filteredModules.length > 0\"\n class=\"tpl:flex tpl:flex-col tpl:gap-1\"\n >\n <button\n v-for=\"mod in filteredModules\"\n :key=\"mod.id\"\n type=\"button\"\n :aria-pressed=\"selectedModuleId === mod.id\"\n 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]\"\n :style=\"{\n borderColor:\n selectedModuleId === mod.id\n ? 'var(--tpl-primary)'\n : 'var(--tpl-border)',\n backgroundColor:\n selectedModuleId === mod.id\n ? 'var(--tpl-primary-light)'\n : 'transparent',\n }\"\n @click=\"selectedModuleId = mod.id\"\n >\n <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n <span\n class=\"tpl:flex-1 tpl:truncate tpl:text-xs tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n >\n {{ mod.name }}\n </span>\n <span\n 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 >\n {{\n t.modules.blockCount.replace(\n \"{count}\",\n String(mod.content.length),\n )\n }}\n </span>\n </div>\n <div class=\"tpl:mt-1 tpl:flex tpl:items-center tpl:gap-1\">\n <component\n :is=\"icon.icon\"\n v-for=\"icon in getModuleBlockTypeIcons(mod)\"\n :key=\"icon.type\"\n :size=\"14\"\n :stroke-width=\"1.5\"\n class=\"tpl:text-[var(--tpl-text-dim)]\"\n />\n <span\n v-if=\"getRemainingTypeCount(mod) > 0\"\n class=\"tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n >\n +{{ getRemainingTypeCount(mod) }}\n </span>\n <button\n v-if=\"confirmDeleteId === mod.id\"\n :aria-label=\"t.modules.deleteConfirm\"\n 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)]\"\n style=\"background-color: transparent\"\n @click.stop=\"handleDelete(mod.id)\"\n >\n {{ t.modules.deleteConfirm }}\n </button>\n <button\n v-else\n 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)]\"\n :aria-label=\"t.modules.delete\"\n :title=\"t.modules.delete\"\n @click.stop=\"confirmDeleteId = mod.id\"\n >\n <Trash2 :size=\"12\" :stroke-width=\"1.5\" />\n </button>\n </div>\n </button>\n </div>\n\n \n <div\n v-else\n class=\"tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:py-12\"\n >\n <Package\n :size=\"32\"\n :stroke-width=\"1\"\n class=\"tpl:text-[var(--tpl-text-dim)]\"\n />\n <p class=\"tpl:mt-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\">\n {{\n searchQuery ? t.modules.noModules : t.modules.noModulesHint\n }}\n </p>\n </div>\n </div>\n </div>\n\n \n <div\n class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden tpl:border-l tpl:border-[var(--tpl-border)]\"\n >\n <div\n v-if=\"selectedModule\"\n class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:overflow-hidden\"\n >\n \n <div class=\"tpl:flex-1 tpl:overflow-y-auto tpl:p-4\">\n <ModulePreviewCanvas :blocks=\"selectedModule.content\" />\n </div>\n </div>\n\n \n <div\n v-else\n class=\"tpl:flex tpl:flex-1 tpl:flex-col tpl:items-center tpl:justify-center tpl:px-4\"\n >\n <Package\n :size=\"32\"\n :stroke-width=\"1\"\n class=\"tpl:text-[var(--tpl-text-dim)]\"\n />\n <p\n class=\"tpl:mt-2 tpl:text-center tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.modules.selectToPreview }}\n </p>\n </div>\n </div>\n </div>\n\n \n <div\n class=\"tpl:flex tpl:items-center tpl:justify-between tpl:border-t tpl:px-5 tpl:py-3 tpl:border-[var(--tpl-border)]\"\n >\n <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n <label\n class=\"tpl:shrink-0 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n >\n {{ t.modules.insertPosition }}\n </label>\n <select\n v-model=\"insertPosition\"\n 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)]\"\n >\n <option\n v-for=\"opt in positionOptions\"\n :key=\"opt.value\"\n :value=\"opt.value\"\n >\n {{ opt.label }}\n </option>\n </select>\n </div>\n <div class=\"tpl:flex tpl:gap-2\">\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:border-[var(--tpl-border)] tpl:text-[var(--tpl-text)] tpl:bg-[var(--tpl-bg)]\"\n @click=\"handleClose\"\n >\n {{ t.modules.close }}\n </button>\n <button\n type=\"button\"\n class=\"tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n :disabled=\"!selectedModule\"\n @click=\"handleInsert\"\n >\n {{ t.modules.insert }}\n </button>\n </div>\n </div>\n </div>\n </TplModal>\n</template>\n\n<style>\n.tpl-module-delete-btn:hover {\n color: var(--tpl-danger) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,IAAM,KAAQ,GAIR,IAAO,GAKP,KAAsB,SACpB,OAAO,qCACd,EAEK,EAAE,SAAM,IAAS,EACjB,IAAe,EACnB,IACA,qBACD,EACK,IAAS,EAAc,IAAY,qBAAqB,EAExD,IAAc,EAAI,GAAG,EACrB,IAAmB,EAAmB,KAAK,EAC3C,IAAkB,EAAmB,KAAK,EAE1C,IAAiB,EAAY,MAAM,EAEnC,IAAkB,QAAe;GACrC,IAAM,IAAU,EAAa,QAAQ;AACrC,OAAI,CAAC,EAAY,MAAO,QAAO;GAC/B,IAAM,IAAQ,EAAY,MAAM,aAAa;AAC7C,UAAO,EAAQ,QAAQ,MAAM,EAAE,KAAK,aAAa,CAAC,SAAS,EAAM,CAAC;IAClE,EAEI,IAAiB,QAChB,EAAiB,QAEpB,EAAa,QAAQ,MAAM,MAAM,MAAM,EAAE,OAAO,EAAiB,MAAM,IACvE,OAHkC,KAKpC,EAOI,KAAkB,QAAiC;GACvD,IAAM,IAA4B,CAChC;IAAE,OAAO;IAAa,OAAO,EAAE,QAAQ;IAAmB,CAC3D,EACK,IAAS,EAAO,QAAQ,MAAM;AACpC,QAAK,IAAI,IAAI,GAAG,IAAI,EAAO,QAAQ,KAAK;IACtC,IAAM,IAAQ,EAAO;AAGrB,MAAQ,KAAK;KACX,OAAO,EAAM;KACb,OAAO,EAAE,QAAQ,iBAAiB,QAAQ,WAAW,GAHzC,EAAE,OADA,EAAM,SACa,EAAM,KAGuB,GAAG,IAAI,IAAI;KAC1E,CAAC;;AAGJ,UADA,EAAQ,KAAK;IAAE,OAAO;IAAO,OAAO,EAAE,QAAQ;IAAa,CAAC,EACrD;IACP,EAEI,KAAsB,QAAmC;AAC7D,OAAI,EAAe,UAAU,MAAO;AACpC,OAAI,EAAe,UAAU,YAAa,QAAO;GAEjD,IAAM,IADS,EAAO,QAAQ,MAAM,OACjB,WAAW,MAAM,EAAE,OAAO,EAAe,MAAM;AAClE,OAAI,MAAQ,GAAI,QAAO,IAAM;IAE7B;AAEF,UACQ,GAAM,UACX,MAAY;AACX,OAAI,GAAS;AAGX,IAFA,EAAY,QAAQ,IACpB,EAAiB,QAAQ,MACzB,EAAgB,QAAQ;IAExB,IAAM,IAAa,EAAO,MAAM;AAChC,IAAI,IAIF,EAAe,QAHH,EAAO,QAAQ,MAAM,OAAO,WACrC,MAAM,EAAE,OAAO,EACjB,KAC8B,KAAkB,QAAb,IAEpC,EAAe,QAAQ;;IAI9B;EAED,SAAS,GACP,GACmC;GACnC,IAAM,IAA2C,EAAE,EAC7C,oBAAO,IAAI,KAAa;AAC9B,QAAK,IAAM,KAAS,EAAO,QAKzB,KAJI,CAAC,EAAK,IAAI,EAAM,KAAK,IAAI,EAAe,EAAM,UAChD,EAAK,IAAI,EAAM,KAAK,EACpB,EAAM,KAAK;IAAE,MAAM,EAAM;IAAM,MAAM,EAAe,EAAM;IAAO,CAAC,GAEhE,EAAM,UAAU,EAAG;AAEzB,UAAO;;EAGT,SAAS,EAAsB,GAA6B;GAC1D,IAAM,IAAQ,IAAI,IAAI,EAAO,QAAQ,KAAK,MAAM,EAAE,KAAK,CAAC;AACxD,UAAO,KAAK,IAAI,GAAG,EAAM,OAAO,EAAE;;EAGpC,eAAe,GAAa,GAAiC;AAC3D,OAAI;AAEF,IADA,MAAM,EAAa,aAAa,EAAS,EACrC,EAAiB,UAAU,MAC7B,EAAiB,QAAQ;aAEnB;AACR,MAAgB,QAAQ;;;EAI5B,SAAS,IAAqB;AAC5B,GAAI,EAAe,SACjB,EAAK,UAAU,EAAe,OAAO,GAAoB,MAAM;;EAInE,SAAS,IAAoB;AAC3B,KAAK,QAAQ;;EAGf,SAAS,GAAc,GAA4B;AAIjD,GAHI,EAAM,QAAQ,YAChB,GAAa,EAEX,EAAM,QAAQ,WAAW,EAAe,UAC1C,EAAM,gBAAgB,EACtB,GAAc;;yBAMhB,EAkOW,IAAA;GAlOA,SAAS,EAAA;GAAU,SAAO;GAAc,WAAS;;oBAiOpD,CAhON,EAgOM,OAhON,IAgOM;IApNJ,EAgBM,OAhBN,IAgBM,CAbJ,EAKK,MALL,IAKK,EADA,EAAA,EAAC,CAAC,QAAQ,OAAM,EAAA,EAAA,EAErB,EAMS,UAAA;KALN,cAAY,EAAA,EAAC,CAAC,QAAQ;KACvB,OAAM;KACL,SAAO;QAER,EAAkC,EAAA,GAAA,EAAA;KAA9B,MAAM;KAAK,gBAAc;;IAKjC,EAsJM,OAtJN,GAsJM,CApJJ,EAmHM,OAnHN,GAmHM,CA/GJ,EAcM,OAdN,GAcM,CAbJ,EAYM,OAZN,GAYM,CAXJ,EAIE,EAAA,GAAA,EAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;UAER,EAKE,SAAA;8CAJoB,QAAA;KACpB,MAAK;KACJ,aAAa,EAAA,EAAC,CAAC,QAAQ;KACxB,OAAM;0BAHG,EAAA,MAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAS1B,EA6FM,OA7FN,GA6FM,CA3FI,EAAA,MAAgB,SAAM,KAAA,GAAA,EAD9B,EA0EM,OA1EN,GA0EM,EAAA,EAAA,GAAA,EAtEJ,EAqES,GAAA,MAAA,EApEO,EAAA,QAAP,YADT,EAqES,UAAA;KAnEN,KAAK,EAAI;KACV,MAAK;KACJ,gBAAc,EAAA,UAAqB,EAAI;KACxC,OAAM;KACL,OAAK,GAAA;mBAAuD,EAAA,UAAqB,EAAI,KAAA,uBAAA;uBAAoJ,EAAA,UAAqB,EAAI,KAAA,6BAAA;;KAUlQ,UAAK,MAAE,EAAA,QAAmB,EAAI;QAE/B,EAgBM,OAhBN,GAgBM,CAfJ,EAIO,QAJP,GAIO,EADF,EAAI,KAAI,EAAA,EAAA,EAEb,EASO,QATP,GASO,EALH,EAAA,EAAC,CAAC,QAAQ,WAAW,QAAA,WAAoE,OAAO,EAAI,QAAQ,OAAM,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA,EAOxH,EAiCM,OAjCN,GAiCM;aAhCJ,EAOE,GAAA,MAAA,EALe,GAAwB,EAAG,GAAnC,YAFT,EAOE,EANK,EAAK,KAAI,EAAA;MAEb,KAAK,EAAK;MACV,MAAM;MACN,gBAAc;MACf,OAAM;;KAGA,EAAsB,EAAG,GAAA,KAAA,GAAA,EADjC,EAKO,QALP,GAGC,OACE,EAAG,EAAsB,EAAG,CAAA,EAAA,EAAA,IAAA,GAAA,IAAA,GAAA;KAGvB,EAAA,UAAoB,EAAI,MAAA,GAAA,EADhC,EAQS,UAAA;;MANN,cAAY,EAAA,EAAC,CAAC,QAAQ;MACvB,OAAM;MACN,OAAA,EAAA,oBAAA,eAAqC;MACpC,SAAK,GAAA,MAAO,GAAa,EAAI,GAAE,EAAA,CAAA,OAAA,CAAA;UAE7B,EAAA,EAAC,CAAC,QAAQ,cAAa,EAAA,GAAA,EAAA,KAAA,GAAA,EAE5B,EAQS,UAAA;;MANP,OAAM;MACL,cAAY,EAAA,EAAC,CAAC,QAAQ;MACtB,OAAO,EAAA,EAAC,CAAC,QAAQ;MACjB,SAAK,GAAA,MAAO,EAAA,QAAkB,EAAI,IAAE,CAAA,OAAA,CAAA;SAErC,EAAyC,EAAA,GAAA,EAAA;MAAhC,MAAM;MAAK,gBAAc;;oCAO1C,EAcM,OAdN,GAcM,CAVJ,EAIE,EAAA,EAAA,EAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;QAER,EAII,KAJJ,GAII,EAFA,EAAA,QAAc,EAAA,EAAC,CAAC,QAAQ,YAAY,EAAA,EAAC,CAAC,QAAQ,cAAa,EAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,EAQrE,EA6BM,OA7BN,GA6BM,CAzBI,EAAA,SAAA,GAAA,EADR,EAQM,OARN,GAQM,CAHJ,EAEM,OAFN,IAEM,CADJ,EAAwD,EAAA,GAAA,EAAA,EAAlC,QAAQ,EAAA,MAAe,SAAA,EAAA,MAAA,GAAA,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,GAAA,EAKjD,EAcM,OAdN,IAcM,CAVJ,EAIE,EAAA,EAAA,EAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;QAER,EAII,KAJJ,IAII,EADC,EAAA,EAAC,CAAC,QAAQ,gBAAe,EAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;IAOpC,EAuCM,OAvCN,IAuCM,CApCJ,EAkBM,OAlBN,IAkBM,CAjBJ,EAIQ,SAJR,IAIQ,EADH,EAAA,EAAC,CAAC,QAAQ,eAAc,EAAA,EAAA,EAAA,EAE7B,EAWS,UAAA;8CAVgB,QAAA;KACvB,OAAM;gBAEN,EAMS,GAAA,MAAA,EALO,GAAA,QAAP,YADT,EAMS,UAAA;KAJN,KAAK,EAAI;KACT,OAAO,EAAI;SAET,EAAI,MAAK,EAAA,GAAA,GAAA,wBARL,EAAA,MAAc,CAAA,CAAA,CAAA,CAAA,EAY3B,EAgBM,OAhBN,IAgBM,CAfJ,EAMS,UAAA;KALP,MAAK;KACL,OAAM;KACL,SAAO;SAEL,EAAA,EAAC,CAAC,QAAQ,MAAK,EAAA,EAAA,EAEpB,EAOS,UAAA;KANP,MAAK;KACL,OAAM;KACL,UAAQ,CAAG,EAAA;KACX,SAAO;SAEL,EAAA,EAAC,CAAC,QAAQ,OAAM,EAAA,GAAA,GAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/cdn/chunks/ModulePreviewCanvas-DkSvri9H.js ADDED Viewed

@@ -0,0 +1,107 @@
+import { E as e, F as t, L as n, N as r, R as i, S as a, _ as o, at as s, ct as c, d as l, h as u, m as d, p as f } from "./draggable-BQNU47zu.js";
+import { A as p, B as m, G as h, H as g, It as _, K as v, L as y, M as b, N as x, Ot as S, U as C, V as w, W as T, j as E, z as D } from "./features-Ds0XUfte.js";
+//#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__ */ a({
+	name: "PreviewSectionBlock",
+	__name: "PreviewSectionBlock",
+	props: {
+		block: {},
+		viewport: {}
+	},
+	setup(a) {
+		let A = {
+			title: y,
+			paragraph: w,
+			image: C,
+			video: p,
+			button: S,
+			divider: h,
+			social: x,
+			menu: g,
+			table: E,
+			spacer: b,
+			html: T,
+			custom: v
+		}, j = a, M = e(_, null), N = f(() => {
+			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 = f(() => {
+			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 m(e, M, A);
+		}
+		return (e, a) => {
+			let f = n("PreviewSectionBlock", !0);
+			return r(), o("div", O, [d("div", k, [(r(!0), o(l, null, t(P.value, (e, n) => (r(), o("div", {
+				key: n,
+				style: c({ width: N.value[n] })
+			}, [(r(!0), o(l, null, t(F(n), (e) => (r(), o("div", {
+				key: e.id,
+				style: c(s(D)(e))
+			}, [e.type === "section" ? (r(), u(f, {
+				key: 0,
+				block: e,
+				viewport: "desktop"
+			}, null, 8, ["block"])) : (r(), u(i(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__ */ a({
+	__name: "ModulePreviewCanvas",
+	props: { blocks: {} },
+	setup(n) {
+		let a = e(_), d = {
+			section: A,
+			title: y,
+			paragraph: w,
+			image: C,
+			video: p,
+			button: S,
+			divider: h,
+			social: x,
+			menu: g,
+			table: E,
+			spacer: b,
+			html: T,
+			custom: v
+		};
+		function f(e) {
+			return m(e, a, d);
+		}
+		return (e, a) => (r(), o("div", j, [(r(!0), o(l, null, t(n.blocks, (e) => (r(), o("div", {
+			key: e.id,
+			style: c(s(D)(e))
+		}, [(r(), u(i(f(e)), {
+			block: e,
+			viewport: "desktop"
+		}, null, 8, ["block"]))], 4))), 128))]));
+	}
+});
+//#endregion
+export { M as default };
+//# sourceMappingURL=ModulePreviewCanvas-DkSvri9H.js.map

package/dist/cdn/chunks/ModulePreviewCanvas-DkSvri9H.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ModulePreviewCanvas-DkSvri9H.js","names":[],"sources":["../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/components/blocks/PreviewSectionBlock.vue","../../../src/cloud/components/ModulePreviewCanvas.vue","../../../src/cloud/components/ModulePreviewCanvas.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n resolveBlockComponent,\n getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n Block,\n SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n title: TitleBlock,\n paragraph: ParagraphBlock,\n image: ImageBlock,\n video: VideoBlock,\n button: ButtonBlock,\n divider: DividerBlock,\n social: SocialIconsBlock,\n menu: MenuBlock,\n table: TableBlock,\n spacer: SpacerBlock,\n html: HtmlBlock,\n custom: CustomBlock,\n};\n\nconst props = defineProps<{\n block: SectionBlockType;\n viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n switch (props.block.columns) {\n case \"2\":\n return [\"50%\", \"50%\"];\n case \"3\":\n return [\"33.33%\", \"33.33%\", \"33.33%\"];\n case \"1-2\":\n return [\"33.33%\", \"66.67%\"];\n case \"2-1\":\n return [\"66.67%\", \"33.33%\"];\n default:\n return [\"100%\"];\n }\n});\n\nconst columns = computed(() => {\n const count = columnWidths.value.length;\n const children = [...props.block.children];\n while (children.length < count) {\n children.push([]);\n }\n return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n <div class=\"tpl:w-full\">\n <div class=\"tpl:flex tpl:gap-0\">\n <div\n v-for=\"(_, colIndex) in columns\"\n :key=\"colIndex\"\n :style=\"{ width: columnWidths[colIndex] }\"\n >\n <div\n v-for=\"childBlock in getColumnBlocks(colIndex)\"\n :key=\"childBlock.id\"\n :style=\"getBlockWrapperStyle(childBlock)\"\n >\n \n <PreviewSectionBlock\n v-if=\"childBlock.type === 'section'\"\n :block=\"childBlock\"\n viewport=\"desktop\"\n />\n <component\n :is=\"getBlockComponent(childBlock)\"\n v-else\n :block=\"childBlock\"\n viewport=\"desktop\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"./ButtonBlock.vue\";\nimport CustomBlock from \"./CustomBlock.vue\";\nimport DividerBlock from \"./DividerBlock.vue\";\nimport HtmlBlock from \"./HtmlBlock.vue\";\nimport ImageBlock from \"./ImageBlock.vue\";\nimport MenuBlock from \"./MenuBlock.vue\";\nimport SocialIconsBlock from \"./SocialIconsBlock.vue\";\nimport SpacerBlock from \"./SpacerBlock.vue\";\nimport TableBlock from \"./TableBlock.vue\";\nimport TitleBlock from \"./TitleBlock.vue\";\nimport ParagraphBlock from \"./ParagraphBlock.vue\";\nimport VideoBlock from \"./VideoBlock.vue\";\nimport {\n resolveBlockComponent,\n getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type {\n Block,\n SectionBlock as SectionBlockType,\n} from \"@templatical/types\";\nimport { computed, inject, type Component } from \"vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\n\nconst previewBlockComponentMap: Record<string, Component> = {\n title: TitleBlock,\n paragraph: ParagraphBlock,\n image: ImageBlock,\n video: VideoBlock,\n button: ButtonBlock,\n divider: DividerBlock,\n social: SocialIconsBlock,\n menu: MenuBlock,\n table: TableBlock,\n spacer: SpacerBlock,\n html: HtmlBlock,\n custom: CustomBlock,\n};\n\nconst props = defineProps<{\n block: SectionBlockType;\n viewport: \"desktop\";\n}>();\n\ndefineOptions({ name: \"PreviewSectionBlock\" });\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY, null);\n\nconst columnWidths = computed(() => {\n switch (props.block.columns) {\n case \"2\":\n return [\"50%\", \"50%\"];\n case \"3\":\n return [\"33.33%\", \"33.33%\", \"33.33%\"];\n case \"1-2\":\n return [\"33.33%\", \"66.67%\"];\n case \"2-1\":\n return [\"66.67%\", \"33.33%\"];\n default:\n return [\"100%\"];\n }\n});\n\nconst columns = computed(() => {\n const count = columnWidths.value.length;\n const children = [...props.block.children];\n while (children.length < count) {\n children.push([]);\n }\n return children.slice(0, count);\n});\n\nfunction getColumnBlocks(colIndex: number): Block[] {\n return columns.value[colIndex] || [];\n}\n\nfunction getBlockComponent(block: Block): Component | null {\n return resolveBlockComponent(block, blockRegistry, previewBlockComponentMap);\n}\n</script>\n\n<template>\n <div class=\"tpl:w-full\">\n <div class=\"tpl:flex tpl:gap-0\">\n <div\n v-for=\"(_, colIndex) in columns\"\n :key=\"colIndex\"\n :style=\"{ width: columnWidths[colIndex] }\"\n >\n <div\n v-for=\"childBlock in getColumnBlocks(colIndex)\"\n :key=\"childBlock.id\"\n :style=\"getBlockWrapperStyle(childBlock)\"\n >\n \n <PreviewSectionBlock\n v-if=\"childBlock.type === 'section'\"\n :block=\"childBlock\"\n viewport=\"desktop\"\n />\n <component\n :is=\"getBlockComponent(childBlock)\"\n v-else\n :block=\"childBlock\"\n viewport=\"desktop\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"../../components/blocks/ButtonBlock.vue\";\nimport CustomBlock from \"../../components/blocks/CustomBlock.vue\";\nimport DividerBlock from \"../../components/blocks/DividerBlock.vue\";\nimport HtmlBlock from \"../../components/blocks/HtmlBlock.vue\";\nimport ImageBlock from \"../../components/blocks/ImageBlock.vue\";\nimport MenuBlock from \"../../components/blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"../../components/blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"../../components/blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"../../components/blocks/SpacerBlock.vue\";\nimport TableBlock from \"../../components/blocks/TableBlock.vue\";\nimport TitleBlock from \"../../components/blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"../../components/blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"../../components/blocks/VideoBlock.vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\nimport {\n resolveBlockComponent,\n getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type { Block } from \"@templatical/types\";\nimport { inject, type Component } from \"vue\";\n\ndefineProps<{\n blocks: Block[];\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\n\nconst modulePreviewComponentMap: Record<string, Component> = {\n section: PreviewSectionBlock,\n title: TitleBlock,\n paragraph: ParagraphBlock,\n image: ImageBlock,\n video: VideoBlock,\n button: ButtonBlock,\n divider: DividerBlock,\n social: SocialIconsBlock,\n menu: MenuBlock,\n table: TableBlock,\n spacer: SpacerBlock,\n html: HtmlBlock,\n custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n return resolveBlockComponent(block, blockRegistry, modulePreviewComponentMap);\n}\n</script>\n\n<template>\n <div\n class=\"tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg\"\n style=\"\n background-color: var(--tpl-canvas-bg);\n box-shadow: var(--tpl-shadow-sm);\n \"\n >\n <div\n v-for=\"block in blocks\"\n :key=\"block.id\"\n :style=\"getBlockWrapperStyle(block)\"\n >\n <component\n :is=\"getBlockComponent(block)\"\n :block=\"block\"\n viewport=\"desktop\"\n />\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport ButtonBlock from \"../../components/blocks/ButtonBlock.vue\";\nimport CustomBlock from \"../../components/blocks/CustomBlock.vue\";\nimport DividerBlock from \"../../components/blocks/DividerBlock.vue\";\nimport HtmlBlock from \"../../components/blocks/HtmlBlock.vue\";\nimport ImageBlock from \"../../components/blocks/ImageBlock.vue\";\nimport MenuBlock from \"../../components/blocks/MenuBlock.vue\";\nimport PreviewSectionBlock from \"../../components/blocks/PreviewSectionBlock.vue\";\nimport SocialIconsBlock from \"../../components/blocks/SocialIconsBlock.vue\";\nimport SpacerBlock from \"../../components/blocks/SpacerBlock.vue\";\nimport TableBlock from \"../../components/blocks/TableBlock.vue\";\nimport TitleBlock from \"../../components/blocks/TitleBlock.vue\";\nimport ParagraphBlock from \"../../components/blocks/ParagraphBlock.vue\";\nimport VideoBlock from \"../../components/blocks/VideoBlock.vue\";\nimport { BLOCK_REGISTRY_KEY } from \"../../keys\";\nimport {\n resolveBlockComponent,\n getBlockWrapperStyle,\n} from \"../../utils/blockComponentResolver\";\nimport type { Block } from \"@templatical/types\";\nimport { inject, type Component } from \"vue\";\n\ndefineProps<{\n blocks: Block[];\n}>();\n\nconst blockRegistry = inject(BLOCK_REGISTRY_KEY);\n\nconst modulePreviewComponentMap: Record<string, Component> = {\n section: PreviewSectionBlock,\n title: TitleBlock,\n paragraph: ParagraphBlock,\n image: ImageBlock,\n video: VideoBlock,\n button: ButtonBlock,\n divider: DividerBlock,\n social: SocialIconsBlock,\n menu: MenuBlock,\n table: TableBlock,\n spacer: SpacerBlock,\n html: HtmlBlock,\n custom: CustomBlock,\n};\n\nfunction getBlockComponent(block: Block): Component | null {\n return resolveBlockComponent(block, blockRegistry, modulePreviewComponentMap);\n}\n</script>\n\n<template>\n <div\n class=\"tpl:pointer-events-none tpl:mx-auto tpl:w-[600px] tpl:select-none tpl:rounded-lg\"\n style=\"\n background-color: var(--tpl-canvas-bg);\n box-shadow: var(--tpl-shadow-sm);\n \"\n >\n <div\n v-for=\"block in blocks\"\n :key=\"block.id\"\n :style=\"getBlockWrapperStyle(block)\"\n >\n <component\n :is=\"getBlockComponent(block)\"\n :block=\"block\"\n viewport=\"desktop\"\n />\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAwBA,IAAM,IAAsD;GAC1D,OAAO;GACP,WAAW;GACX,OAAO;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;GACT,EAEK,IAAQ,GAOR,IAAgB,EAAO,GAAoB,KAAK,EAEhD,IAAe,QAAe;AAClC,WAAQ,EAAM,MAAM,SAApB;IACE,KAAK,IACH,QAAO,CAAC,OAAO,MAAM;IACvB,KAAK,IACH,QAAO;KAAC;KAAU;KAAU;KAAS;IACvC,KAAK,MACH,QAAO,CAAC,UAAU,SAAS;IAC7B,KAAK,MACH,QAAO,CAAC,UAAU,SAAS;IAC7B,QACE,QAAO,CAAC,OAAO;;IAEnB,EAEI,IAAU,QAAe;GAC7B,IAAM,IAAQ,EAAa,MAAM,QAC3B,IAAW,CAAC,GAAG,EAAM,MAAM,SAAS;AAC1C,UAAO,EAAS,SAAS,GACvB,GAAS,KAAK,EAAE,CAAC;AAEnB,UAAO,EAAS,MAAM,GAAG,EAAM;IAC/B;EAEF,SAAS,EAAgB,GAA2B;AAClD,UAAO,EAAQ,MAAM,MAAa,EAAE;;EAGtC,SAAS,EAAkB,GAAgC;AACzD,UAAO,EAAsB,GAAO,GAAe,EAAyB;;;;eAK5E,EA2BM,OA3BN,GA2BM,CA1BJ,EAyBM,OAzBN,GAyBM,EAAA,EAAA,GAAA,EAxBJ,EAuBM,GAAA,MAAA,EAtBoB,EAAA,QAAhB,GAAG,YADb,EAuBM,OAAA;IArBH,KAAK;IACL,OAAK,EAAA,EAAA,OAAW,EAAA,MAAa,IAAQ,CAAA;eAEtC,EAiBM,GAAA,MAAA,EAhBiB,EAAgB,EAAQ,GAAtC,YADT,EAiBM,OAAA;IAfH,KAAK,EAAW;IAChB,OAAK,EAAE,EAAA,EAAoB,CAAC,EAAU,CAAA;OAI/B,EAAW,SAAI,aAAA,GAAA,EADvB,EAIE,GAAA;;IAFC,OAAO;IACR,UAAS;mCAEX,EAKE,EAJK,EAAkB,EAAU,CAAA,EAAA;;IAEhC,OAAO;IACR,UAAS;;;;;;;;;;;;;;EE9ErB,IAAM,IAAgB,EAAO,EAAmB,EAE1C,IAAuD;GAC3D,SAAS;GACT,OAAO;GACP,WAAW;GACX,OAAO;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;GACT;EAED,SAAS,EAAkB,GAAgC;AACzD,UAAO,EAAsB,GAAO,GAAe,EAA0B;;yBAK7E,EAkBM,OAlBN,GAkBM,EAAA,EAAA,GAAA,EAXJ,EAUM,GAAA,MAAA,EATY,EAAA,SAAT,YADT,EAUM,OAAA;GARH,KAAK,EAAM;GACX,OAAK,EAAE,EAAA,EAAoB,CAAC,EAAK,CAAA;YAElC,EAIE,EAHK,EAAkB,EAAK,CAAA,EAAA;GACpB;GACR,UAAS"}