import { E as e, I as t, L as n, M as r, Ot as i, P as a, S as o, _ as s, d as c, h as l, it as u, m as d, p as f } from "./vue.runtime.esm-bundler-DpvJL-nX.js";
import { N as p, _ as m, a as h, f as g, g as _, h as v, i as y, m as b, n as x, p as S, r as C, u as w, v as T, y as E } from "./useEditorCore-D0uZbPKG.js";
import { o as D } from "./keys-BeW4IrXP.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__ */ o({
	name: "PreviewSectionBlock",
	__name: "PreviewSectionBlock",
	props: {
		block: {},
		viewport: {}
	},
	setup(o) {
		let A = {
			title: w,
			paragraph: b,
			image: _,
			video: x,
			button: p,
			divider: T,
			social: h,
			menu: v,
			table: C,
			spacer: y,
			html: m,
			custom: E
		}, j = o, M = e(D, 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 S(e, M, A);
		}
		return (e, o) => {
			let f = t("PreviewSectionBlock", !0);
			return r(), s("div", O, [d("div", k, [(r(!0), s(c, null, a(P.value, (e, t) => (r(), s("div", {
				key: t,
				style: i({ width: N.value[t] })
			}, [(r(!0), s(c, null, a(F(t), (e) => (r(), s("div", {
				key: e.id,
				style: i(u(g)(e))
			}, [e.type === "section" ? (r(), l(f, {
				key: 0,
				block: e,
				viewport: "desktop"
			}, null, 8, ["block"])) : (r(), l(n(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__ */ o({
	__name: "ModulePreviewCanvas",
	props: { blocks: {} },
	setup(t) {
		let o = e(D), d = {
			section: A,
			title: w,
			paragraph: b,
			image: _,
			video: x,
			button: p,
			divider: T,
			social: h,
			menu: v,
			table: C,
			spacer: y,
			html: m,
			custom: E
		};
		function f(e) {
			return S(e, o, d);
		}
		return (e, o) => (r(), s("div", j, [(r(!0), s(c, null, a(t.blocks, (e) => (r(), s("div", {
			key: e.id,
			style: i(u(g)(e))
		}, [(r(), l(n(f(e)), {
			block: e,
			viewport: "desktop"
		}, null, 8, ["block"]))], 4))), 128))]));
	}
});
//#endregion
export { M as default };
