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-Bcb86AsV.js";
import { A as p, B as m, G as h, H as g, K as _, L as v, Lt as y, M as b, N as x, U as S, V as C, W as w, j as T, kt as E, z as D } from "./features-BnG-dhzy.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: v,
			paragraph: C,
			image: S,
			video: p,
			button: E,
			divider: h,
			social: x,
			menu: g,
			table: T,
			spacer: b,
			html: w,
			custom: _
		}, j = a, M = e(y, 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(y), d = {
			section: A,
			title: v,
			paragraph: C,
			image: S,
			video: p,
			button: E,
			divider: h,
			social: x,
			menu: g,
			table: T,
			spacer: b,
			html: w,
			custom: _
		};
		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-VHhQwuFP.js.map