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

//# sourceMappingURL=ModulePreviewCanvas-K9CQFr7p.js.map