import { A as e, F as t, M as n, P as r, b as i, d as a, f as o, h as s, l as c, ot as l, p as u, rt as d, w as f } from "./vue.runtime.esm-bundler-Bxqkjqhc.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-uCU9Ny0M.js";
import { s as D } from "./keys-B5SJtPWf.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__ */ i({
	name: "PreviewSectionBlock",
	__name: "PreviewSectionBlock",
	props: {
		block: {},
		viewport: {}
	},
	setup(i) {
		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 = i, M = f(D, 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 S(e, M, A);
		}
		return (i, a) => {
			let f = r("PreviewSectionBlock", !0);
			return e(), s("div", O, [o("div", k, [(e(!0), s(c, null, n(P.value, (r, i) => (e(), s("div", {
				key: i,
				style: l({ width: N.value[i] })
			}, [(e(!0), s(c, null, n(F(i), (n) => (e(), s("div", {
				key: n.id,
				style: l(d(g)(n))
			}, [n.type === "section" ? (e(), u(f, {
				key: 0,
				block: n,
				viewport: "desktop"
			}, null, 8, ["block"])) : (e(), u(t(I(n)), {
				key: 1,
				block: n,
				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__ */ i({
	__name: "ModulePreviewCanvas",
	props: { blocks: {} },
	setup(r) {
		let i = f(D), a = {
			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 o(e) {
			return S(e, i, a);
		}
		return (i, a) => (e(), s("div", j, [(e(!0), s(c, null, n(r.blocks, (n) => (e(), s("div", {
			key: n.id,
			style: l(d(g)(n))
		}, [(e(), u(t(o(n)), {
			block: n,
			viewport: "desktop"
		}, null, 8, ["block"]))], 4))), 128))]));
	}
});
//#endregion
export { M as default };
