@cocoar/vue-page-builder 2.1.0

package/dist/index.js

@@ -0,0 +1,2454 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, inject as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, provide as g, ref as _, renderList as v, resolveComponent as y, resolveDynamicComponent as b, shallowRef as x, toDisplayString as S, unref as C, useCssVars as w, useModel as T, watch as E, withCtx as D, withModifiers as O } from "vue";
+import { CoarButton as k, CoarCard as A, CoarCheckbox as j, CoarDivider as M, CoarFormField as N, CoarIcon as P, CoarPasswordInput as F, CoarSelect as I, CoarTab as L, CoarTabGroup as ee, CoarTextInput as R, setCoarDragImageFromElement as z } from "@cocoar/vue-ui";
+//#region src/context.ts
+var B = Symbol("page-renderer");
+//#endregion
+//#region src/schema.ts
+function V(e) {
+	return e.type === "page" || e.type === "stack" || e.type === "card" || e.type === "section";
+}
+function H(e, t) {
+	return e === "page" || !t?.allowedElements ? !0 : t.allowedElements.includes(e);
+}
+//#endregion
+//#region src/PageNode.vue?vue&type=script&setup=true&lang.ts
+var U = {
+	key: 0,
+	class: "pb-section__title"
+}, W = ["src", "alt"], te = /* @__PURE__ */ c({
+	name: "PageNode",
+	__name: "PageNode",
+	props: { node: {} },
+	setup(c) {
+		let u = c, p = l(B);
+		if (!p) throw Error("PageNode must be rendered inside CoarPageRenderer.");
+		let m = t(() => {
+			let e = H(u.node.type, p.config);
+			return e || p.reportDisallowed?.(u.node.type), e;
+		});
+		function g(e) {
+			if (!e) return {};
+			let t = {};
+			return e.padding && (t.padding = e.padding), e.width && (t.width = e.width), t;
+		}
+		function _(e) {
+			let t = e.style?.gap, n = e.style?.align, r = {};
+			return t && (r.gap = t), n && (r.alignItems = n), r;
+		}
+		let x = t(() => g(u.node.style)), w = t(() => u.node);
+		function T(e, t) {
+			e && p.triggerAction(e, t);
+		}
+		function E(e) {
+			return p.assetResolver?.(e) ?? "";
+		}
+		function O(e) {
+			return (e ?? []).map((e) => ({
+				value: e.value,
+				label: e.label
+			}));
+		}
+		return (t, c) => {
+			let l = y("PageNode", !0);
+			return m.value ? (h(), i(e, { key: 0 }, [w.value.type === "page" ? (h(), i("div", {
+				key: 0,
+				class: "pb-stack",
+				style: f({
+					...x.value,
+					..._(w.value)
+				})
+			}, [(h(!0), i(e, null, v(w.value.children, (e) => (h(), n(l, {
+				key: e.id,
+				node: e
+			}, null, 8, ["node"]))), 128))], 4)) : w.value.type === "stack" ? (h(), i("div", {
+				key: 1,
+				class: d(["pb-stack", {
+					"pb-stack--row": w.value.direction === "row",
+					"pb-stack--wrap": w.value.wrap
+				}]),
+				style: f({
+					...x.value,
+					..._(w.value)
+				})
+			}, [(h(!0), i(e, null, v(w.value.children, (e) => (h(), n(l, {
+				key: e.id,
+				node: e
+			}, null, 8, ["node"]))), 128))], 6)) : w.value.type === "card" ? (h(), n(C(A), {
+				key: 2,
+				title: w.value.title,
+				style: f(x.value)
+			}, {
+				default: D(() => [a("div", {
+					class: "pb-card-body",
+					style: f(_(w.value))
+				}, [(h(!0), i(e, null, v(w.value.children, (e) => (h(), n(l, {
+					key: e.id,
+					node: e
+				}, null, 8, ["node"]))), 128))], 4)]),
+				_: 1
+			}, 8, ["title", "style"])) : w.value.type === "section" ? (h(), i("section", {
+				key: 3,
+				class: "pb-section",
+				style: f(x.value)
+			}, [w.value.title ? (h(), i("h3", U, S(w.value.title), 1)) : r("", !0), a("div", {
+				class: "pb-section__body",
+				style: f(_(w.value))
+			}, [(h(!0), i(e, null, v(w.value.children, (e) => (h(), n(l, {
+				key: e.id,
+				node: e
+			}, null, 8, ["node"]))), 128))], 4)], 4)) : w.value.type === "divider" ? (h(), n(C(M), {
+				key: 4,
+				style: f(x.value)
+			}, null, 8, ["style"])) : w.value.type === "spacer" ? (h(), i("div", {
+				key: 5,
+				class: "pb-spacer",
+				style: f(w.value.size ? {
+					height: w.value.size,
+					width: w.value.size
+				} : { flex: "1" })
+			}, null, 4)) : w.value.type === "heading" ? (h(), n(b(`h${w.value.level ?? 2}`), {
+				key: 6,
+				class: "pb-heading",
+				style: f(x.value)
+			}, {
+				default: D(() => [o(S(w.value.text), 1)]),
+				_: 1
+			}, 8, ["style"])) : w.value.type === "paragraph" ? (h(), i("p", {
+				key: 7,
+				class: "pb-paragraph",
+				style: f(x.value)
+			}, S(w.value.text), 5)) : w.value.type === "text-input" ? (h(), n(C(N), {
+				key: 8,
+				label: w.value.label,
+				required: w.value.validation?.required,
+				error: w.value.name ? C(p).getError(w.value.name) : "",
+				disabled: w.value.disabled,
+				style: f(x.value)
+			}, {
+				default: D(() => [w.value.inputType === "password" ? (h(), n(C(F), {
+					key: 0,
+					"model-value": w.value.name ? C(p).getValue(w.value.name) ?? "" : "",
+					placeholder: w.value.placeholder,
+					disabled: w.value.disabled,
+					"onUpdate:modelValue": c[0] ||= (e) => w.value.name && C(p).setValue(w.value.name, e),
+					onBlurred: c[1] ||= (e) => w.value.name && C(p).markTouched(w.value.name)
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"disabled"
+				])) : (h(), n(C(R), {
+					key: 1,
+					"model-value": w.value.name ? C(p).getValue(w.value.name) ?? "" : "",
+					placeholder: w.value.placeholder,
+					disabled: w.value.disabled,
+					"onUpdate:modelValue": c[2] ||= (e) => w.value.name && C(p).setValue(w.value.name, e),
+					onBlurred: c[3] ||= (e) => w.value.name && C(p).markTouched(w.value.name)
+				}, null, 8, [
+					"model-value",
+					"placeholder",
+					"disabled"
+				]))]),
+				_: 1
+			}, 8, [
+				"label",
+				"required",
+				"error",
+				"disabled",
+				"style"
+			])) : w.value.type === "checkbox" ? (h(), n(C(j), {
+				key: 9,
+				"model-value": w.value.name ? C(p).getValue(w.value.name) ?? !1 : !1,
+				label: w.value.label,
+				required: w.value.validation?.required,
+				disabled: w.value.disabled,
+				style: f(x.value),
+				"onUpdate:modelValue": c[4] ||= (e) => w.value.name && C(p).setValue(w.value.name, e)
+			}, null, 8, [
+				"model-value",
+				"label",
+				"required",
+				"disabled",
+				"style"
+			])) : w.value.type === "select" ? (h(), n(C(N), {
+				key: 10,
+				label: w.value.label,
+				required: w.value.validation?.required,
+				error: w.value.name ? C(p).getError(w.value.name) : "",
+				disabled: w.value.disabled,
+				style: f(x.value)
+			}, {
+				default: D(() => [s(C(I), {
+					"model-value": w.value.name ? C(p).getValue(w.value.name) ?? null : null,
+					options: O(w.value.options),
+					placeholder: w.value.placeholder,
+					disabled: w.value.disabled,
+					"onUpdate:modelValue": c[5] ||= (e) => w.value.name && C(p).setValue(w.value.name, e)
+				}, null, 8, [
+					"model-value",
+					"options",
+					"placeholder",
+					"disabled"
+				])]),
+				_: 1
+			}, 8, [
+				"label",
+				"required",
+				"error",
+				"disabled",
+				"style"
+			])) : w.value.type === "button" ? (h(), n(C(k), {
+				key: 11,
+				class: "pb-button",
+				variant: w.value.variant ?? "primary",
+				size: w.value.size,
+				"icon-left": w.value.icon,
+				disabled: w.value.validates && !C(p).isFormValid.value,
+				style: f(x.value),
+				onClick: c[6] ||= (e) => T(w.value.action, w.value.validates)
+			}, {
+				default: D(() => [o(S(w.value.label), 1)]),
+				_: 1
+			}, 8, [
+				"variant",
+				"size",
+				"icon-left",
+				"disabled",
+				"style"
+			])) : w.value.type === "link" ? (h(), i("button", {
+				key: 12,
+				class: "pb-link",
+				style: f(x.value),
+				onClick: c[7] ||= (e) => T(w.value.action)
+			}, S(w.value.label), 5)) : w.value.type === "image" ? (h(), i("img", {
+				key: 13,
+				class: "pb-image",
+				src: E(w.value.assetId),
+				alt: w.value.alt ?? "",
+				style: f(x.value)
+			}, null, 12, W)) : r("", !0)], 64)) : r("", !0);
+		};
+	}
+}), G = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, ne = /* @__PURE__ */ G(te, [["__scopeId", "data-v-0632b6f4"]]), K = { class: "coar-page-renderer" }, q = /* @__PURE__ */ G(/* @__PURE__ */ c({
+	__name: "CoarPageRenderer",
+	props: {
+		schema: {},
+		actions: {},
+		onValidate: { type: Function },
+		assetResolver: { type: Function },
+		config: {}
+	},
+	setup(e) {
+		let n = e, r = _({}), a = _({});
+		function o(e) {
+			return (e.type === "text-input" || e.type === "checkbox" || e.type === "select") && !!e.name;
+		}
+		function c(e) {
+			let t = {};
+			if (o(e) && e.name && e.defaultValue !== void 0 && (t[e.name] = e.defaultValue), "children" in e) for (let n of e.children) Object.assign(t, c(n));
+			return t;
+		}
+		function l() {
+			r.value = c(n.schema), a.value = {};
+		}
+		l(), E(() => n.schema, l, { deep: !1 });
+		function u(e) {
+			let t = r.value[e.name], n = e.validation;
+			if (!n) return "";
+			if (n.required && (t == null || t === "" || t === !1)) return n.message ?? "This field is required";
+			if (e.type === "text-input" && typeof t == "string") {
+				if (n.minLength && t.length < n.minLength) return n.message ?? `Minimum ${n.minLength} characters`;
+				if (n.maxLength && t.length > n.maxLength) return n.message ?? `Maximum ${n.maxLength} characters`;
+				if (n.pattern && !new RegExp(n.pattern).test(t)) return n.message ?? "Invalid format";
+			}
+			return n.matchField && t !== r.value[n.matchField] ? n.message ?? "Does not match" : "";
+		}
+		function d(e, t) {
+			if (o(e) && e.name) {
+				let n = u(e);
+				n && (t[e.name] = n);
+			}
+			"children" in e && e.children.forEach((e) => d(e, t));
+		}
+		let f = t(() => {
+			let e = {};
+			if (d(n.schema, e), n.onValidate) {
+				let t = n.onValidate(r.value);
+				for (let [n, r] of Object.entries(t)) r && (e[n] = r);
+			}
+			return e;
+		}), p = t(() => Object.keys(f.value).length === 0);
+		function m(e) {
+			o(e) && e.name && (a.value[e.name] = !0), "children" in e && e.children.forEach(m);
+		}
+		let v = /* @__PURE__ */ new Set();
+		return g(B, {
+			get actions() {
+				return n.actions;
+			},
+			get assetResolver() {
+				return n.assetResolver;
+			},
+			get config() {
+				return n.config;
+			},
+			reportDisallowed(e) {
+				v.has(e) || (v.add(e), console.warn(`[CoarPageRenderer] Element type "${e}" is not in config.allowedElements; instances were skipped at render time.`));
+			},
+			isFormValid: p,
+			getValue: (e) => r.value[e],
+			setValue: (e, t) => {
+				r.value[e] = t;
+			},
+			getError: (e) => a.value[e] ? f.value[e] ?? "" : "",
+			markTouched: (e) => {
+				a.value[e] = !0;
+			},
+			triggerAction(e, t = !1) {
+				t && (m(n.schema), !p.value) || n.actions?.[e]?.(r.value);
+			}
+		}), (t, n) => (h(), i("div", K, [s(ne, { node: e.schema }, null, 8, ["node"])]));
+	}
+}), [["__scopeId", "data-v-8ff147bf"]]), J = 0;
+function Y() {
+	return J += 1, `node_${J}`;
+}
+function X(e) {
+	switch (e) {
+		case "page": return {
+			id: Y(),
+			type: "page",
+			children: []
+		};
+		case "stack": return {
+			id: Y(),
+			type: "stack",
+			children: []
+		};
+		case "card": return {
+			id: Y(),
+			type: "card",
+			children: []
+		};
+		case "section": return {
+			id: Y(),
+			type: "section",
+			title: "Section",
+			children: []
+		};
+		case "divider": return {
+			id: Y(),
+			type: "divider"
+		};
+		case "spacer": return {
+			id: Y(),
+			type: "spacer"
+		};
+		case "heading": return {
+			id: Y(),
+			type: "heading",
+			text: "Heading",
+			level: 2
+		};
+		case "paragraph": return {
+			id: Y(),
+			type: "paragraph",
+			text: "Paragraph text."
+		};
+		case "text-input": return {
+			id: Y(),
+			type: "text-input",
+			label: "Label",
+			name: Y()
+		};
+		case "checkbox": return {
+			id: Y(),
+			type: "checkbox",
+			label: "Checkbox",
+			name: Y()
+		};
+		case "select": return {
+			id: Y(),
+			type: "select",
+			label: "Select",
+			name: Y(),
+			options: [{
+				value: "a",
+				label: "Option A"
+			}, {
+				value: "b",
+				label: "Option B"
+			}]
+		};
+		case "button": return {
+			id: Y(),
+			type: "button",
+			label: "Button"
+		};
+		case "link": return {
+			id: Y(),
+			type: "link",
+			label: "Link"
+		};
+		case "image": return {
+			id: Y(),
+			type: "image",
+			assetId: ""
+		};
+	}
+}
+//#endregion
+//#region src/builder/operations.ts
+function Z(e, t) {
+	let n = e, r = null, i = -1;
+	for (let e of t) {
+		if (!V(n) || e < 0 || e >= n.children.length) return null;
+		r = n, i = e, n = n.children[e];
+	}
+	return {
+		path: t,
+		node: n,
+		parent: r,
+		index: i
+	};
+}
+function re(e, t) {
+	if (e === t) return [];
+	function n(e, r) {
+		if (!V(e)) return null;
+		for (let i = 0; i < e.children.length; i++) {
+			let a = e.children[i];
+			if (a === t) return [...r, i];
+			let o = n(a, [...r, i]);
+			if (o) return o;
+		}
+		return null;
+	}
+	return n(e, []);
+}
+function ie(e, t) {
+	if (e.length > t.length) return !1;
+	for (let n = 0; n < e.length; n++) if (e[n] !== t[n]) return !1;
+	return !0;
+}
+function ae(e, t, n, r) {
+	return fe(e, t, (e) => {
+		if (!V(e)) return e;
+		let t = Math.max(0, Math.min(n, e.children.length));
+		return {
+			...e,
+			children: [
+				...e.children.slice(0, t),
+				r,
+				...e.children.slice(t)
+			]
+		};
+	});
+}
+function oe(e, t) {
+	if (t.length === 0) return e;
+	let n = t.slice(0, -1), r = t[t.length - 1];
+	return fe(e, n, (e) => V(e) ? {
+		...e,
+		children: e.children.filter((e, t) => t !== r)
+	} : e);
+}
+function se(e, t, n) {
+	if (t.length === 0) return n;
+	let r = t.slice(0, -1), i = t[t.length - 1];
+	return fe(e, r, (e) => V(e) ? {
+		...e,
+		children: e.children.map((e, t) => t === i ? n : e)
+	} : e);
+}
+function ce(e, t, n) {
+	let r = Z(e, t);
+	if (!r) return e;
+	let i = r.node, a = { ...r.node }, o = !1;
+	for (let [e, t] of Object.entries(n)) e === "type" || e === "id" || (t === "" || t == null ? i[e] !== void 0 && (delete a[e], o = !0) : i[e] !== t && (a[e] = t, o = !0));
+	return o ? se(e, t, a) : e;
+}
+function le(e, t, n, r) {
+	if (t.length === 0 || ie(t, n)) return e;
+	let i = Z(e, t);
+	if (!i) return e;
+	let a = t.slice(0, -1), o = t[t.length - 1];
+	return de(a, n) && r === o ? e : ae(oe(e, t), n, r, i.node);
+}
+function ue(e, t, n) {
+	if (t.length === 0) return e;
+	let r = t.slice(0, -1), i = t[t.length - 1], a = Z(e, r);
+	if (!a || !V(a.node)) return e;
+	let o = i + n;
+	return o < 0 || o >= a.node.children.length ? e : le(e, t, r, o);
+}
+function de(e, t) {
+	if (e.length !== t.length) return !1;
+	for (let n = 0; n < e.length; n++) if (e[n] !== t[n]) return !1;
+	return !0;
+}
+function fe(e, t, n) {
+	function r(e, i) {
+		if (i === t.length) return n(e);
+		if (!V(e)) return e;
+		let a = t[i];
+		return a < 0 || a >= e.children.length ? e : {
+			...e,
+			children: e.children.map((e, t) => t === a ? r(e, i + 1) : e)
+		};
+	}
+	return r(e, 0);
+}
+//#endregion
+//#region src/builder/usePageBuilder.ts
+var pe = 500;
+function me(e = {}) {
+	let n = e.schema ?? x(e.initial ?? {
+		id: "root",
+		type: "page",
+		children: []
+	}), r = _([]), i = _(0), a = () => {
+		i.value++;
+	}, o = _([]), s = _([]), c = null;
+	function l(e, t) {
+		if (t.kind === "structural") {
+			o.value = [...o.value, e], s.value = [], c = { kind: "structural" };
+			return;
+		}
+		let n = t.path.join("/"), r = Date.now();
+		c?.kind === "patch" && c.pathKey === n && r - c.time < pe || (o.value = [...o.value, e], s.value = []), c = {
+			kind: "patch",
+			pathKey: n,
+			time: r
+		};
+	}
+	function u() {
+		if (o.value.length === 0) return;
+		let e = o.value[o.value.length - 1];
+		o.value = o.value.slice(0, -1), s.value = [...s.value, n.value], n.value = e, (!r.value || !Z(e, r.value)) && (r.value = []), c = null, a();
+	}
+	function d() {
+		if (s.value.length === 0) return;
+		let e = s.value[s.value.length - 1];
+		s.value = s.value.slice(0, -1), o.value = [...o.value, n.value], n.value = e, (!r.value || !Z(e, r.value)) && (r.value = []), c = null, a();
+	}
+	let f = t(() => o.value.length > 0), p = t(() => s.value.length > 0), m = t(() => r.value ? Z(n.value, r.value)?.node ?? null : null);
+	function h(e) {
+		r.value = e;
+	}
+	function g(e) {
+		r.value = re(n.value, e);
+	}
+	function v(e, t, i) {
+		let o = Z(n.value, e);
+		if (!o) return;
+		let s = n.value, c = X(t), u = "children" in o.node ? o.node.children.length : 0, d = i ?? u;
+		n.value = ae(n.value, e, d, c), r.value = [...e, d], l(s, { kind: "structural" }), a();
+	}
+	function y(e) {
+		if (e.length === 0) return;
+		let t = n.value, i = oe(n.value, e);
+		n.value = i;
+		let o = e.slice(0, -1), s = e[e.length - 1], c = Z(i, o);
+		if (c && "children" in c.node && c.node.children.length > 0) {
+			let e = Math.max(0, s - 1);
+			r.value = [...o, Math.min(e, c.node.children.length - 1)];
+		} else r.value = o;
+		l(t, { kind: "structural" }), a();
+	}
+	function b(e, t) {
+		let i = n.value, o = ue(i, e, t);
+		i !== o && (n.value = o, r.value = [...e.slice(0, -1), e[e.length - 1] + t], l(i, { kind: "structural" }), a());
+	}
+	function S(e, t, i) {
+		let o = n.value, s = le(o, e, t, i);
+		o !== s && (n.value = s, r.value = [...t, i], l(o, { kind: "structural" }), a());
+	}
+	function C(e, t) {
+		let r = n.value, i = ce(n.value, e, t);
+		r !== i && (n.value = i, l(r, {
+			kind: "patch",
+			path: e
+		}));
+	}
+	function w(e) {
+		let t = n.value;
+		n.value = e, r.value = [], l(t, { kind: "structural" }), a();
+	}
+	return {
+		schema: n,
+		selectedPath: r,
+		selectedNode: m,
+		structuralVersion: i,
+		canUndo: f,
+		canRedo: p,
+		select: h,
+		selectNode: g,
+		addChild: v,
+		remove: y,
+		move: b,
+		moveTo: S,
+		patch: C,
+		replaceSchema: w,
+		undo: u,
+		redo: d
+	};
+}
+//#endregion
+//#region src/builder/useSchemaValidation.ts
+function he(e, n) {
+	let r = t(() => {
+		let t = [], r = [], i = new Set(n.value?.availableActions?.map((e) => e.id) ?? []), a = (n.value?.availableActions?.length ?? 0) > 0, o = new Set([
+			"text-input",
+			"checkbox",
+			"select"
+		]);
+		ge(e.value, (e) => {
+			if (e.type === "button" && (e.action ? a && !i.has(e.action) && t.push({
+				nodeId: e.id,
+				field: "action",
+				severity: "warning",
+				message: `Action "${e.action}" is not in config.availableActions.`
+			}) : t.push({
+				nodeId: e.id,
+				field: "action",
+				severity: "warning",
+				message: "Button has no Action — clicking it will do nothing."
+			})), e.type === "link" && (e.action ? a && !i.has(e.action) && t.push({
+				nodeId: e.id,
+				field: "action",
+				severity: "warning",
+				message: `Action "${e.action}" is not in config.availableActions.`
+			}) : t.push({
+				nodeId: e.id,
+				field: "action",
+				severity: "warning",
+				message: "Link has no Action — clicking it will do nothing."
+			})), e.type === "image" && !e.assetId && t.push({
+				nodeId: e.id,
+				field: "assetId",
+				severity: "error",
+				message: "Image has no Asset ID — nothing will render."
+			}), o.has(e.type)) {
+				let t = e.name;
+				t && r.push({
+					node: e,
+					name: t
+				});
+			}
+		});
+		let s = /* @__PURE__ */ new Map();
+		for (let { node: e, name: t } of r) {
+			let n = s.get(t) ?? [];
+			n.push(e), s.set(t, n);
+		}
+		for (let [e, n] of s) if (!(n.length < 2)) for (let r of n) t.push({
+			nodeId: r.id,
+			field: "name",
+			severity: "error",
+			message: `Duplicate field name "${e}" — values will overwrite each other.`
+		});
+		return t;
+	});
+	return {
+		issues: r,
+		byNodeId: t(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let t of r.value) {
+				let n = e.get(t.nodeId) ?? [];
+				n.push(t), e.set(t.nodeId, n);
+			}
+			return e;
+		})
+	};
+}
+function ge(e, t) {
+	if (t(e), "children" in e) for (let n of e.children) ge(n, t);
+}
+//#endregion
+//#region src/builder/builderContext.ts
+var Q = Symbol("PageBuilderApi"), $ = Symbol("PageBuilderConfig"), _e = Symbol("PageBuilderValidation"), ve = {
+	class: "pb-tree-grip",
+	"aria-hidden": "true"
+}, ye = {
+	class: "pb-tree-type-icon",
+	"aria-hidden": "true"
+}, be = { class: "pb-tree-label" }, xe = { class: "pb-tree-label-text" }, Se = {
+	key: 0,
+	class: "pb-tree-label-key"
+}, Ce = ["title"], we = { class: "pb-tree-actions" }, Te = ["disabled"], Ee = ["disabled"], De = {
+	key: 0,
+	class: "pb-tree-add__menu",
+	role: "menu"
+}, Oe = ["onClick"], ke = ["onClick"], Ae = /* @__PURE__ */ G(/* @__PURE__ */ c({
+	name: "BuilderOutlineNode",
+	__name: "BuilderOutlineNode",
+	props: {
+		node: {},
+		path: {},
+		depth: { default: 0 }
+	},
+	setup(o) {
+		let c = o, u = l(Q), g = l($), b = l(_e), x = t(() => N.filter((e) => H(e.type, g?.value))), w = t(() => b?.byNodeId.value.get(c.node.id) ?? []), T = t(() => w.value.some((e) => e.severity === "error") ? "error" : w.value.length > 0 ? "warning" : null), E = t(() => w.value.map((e) => `• ${e.message}`).join("\n")), D = t(() => c.path.length === 0), k = t(() => {
+			let e = u.selectedPath.value;
+			return e !== null && e.length === c.path.length && e.every((e, t) => e === c.path[t]);
+		}), A = {
+			page: "file",
+			stack: "layers",
+			card: "square-dashed",
+			section: "panel-left",
+			divider: "minus",
+			spacer: "more-horizontal",
+			heading: "heading",
+			paragraph: "pilcrow",
+			"text-input": "file-text",
+			checkbox: "check-circle-2",
+			select: "list",
+			button: "zap",
+			link: "link",
+			image: "image"
+		}, j = t(() => {
+			let e = c.node;
+			return e.type === "page" ? "Page" : e.type === "stack" ? e.direction === "row" ? "Row" : "Column" : e.text ? String(e.text) : e.label ? String(e.label) : e.title ? String(e.title) : e.type;
+		}), M = t(() => {
+			let e = c.node;
+			return e.name ? String(e.name) : void 0;
+		}), N = [
+			{
+				type: "stack",
+				label: "Stack",
+				icon: "layers",
+				group: "container"
+			},
+			{
+				type: "card",
+				label: "Card",
+				icon: "square-dashed",
+				group: "container"
+			},
+			{
+				type: "section",
+				label: "Section",
+				icon: "panel-left",
+				group: "container"
+			},
+			{
+				type: "heading",
+				label: "Heading",
+				icon: "heading",
+				group: "element"
+			},
+			{
+				type: "paragraph",
+				label: "Paragraph",
+				icon: "pilcrow",
+				group: "element"
+			},
+			{
+				type: "divider",
+				label: "Divider",
+				icon: "minus",
+				group: "element"
+			},
+			{
+				type: "spacer",
+				label: "Spacer",
+				icon: "more-horizontal",
+				group: "element"
+			},
+			{
+				type: "text-input",
+				label: "Text Input",
+				icon: "file-text",
+				group: "element"
+			},
+			{
+				type: "checkbox",
+				label: "Checkbox",
+				icon: "check-circle-2",
+				group: "element"
+			},
+			{
+				type: "select",
+				label: "Select",
+				icon: "list",
+				group: "element"
+			},
+			{
+				type: "button",
+				label: "Button",
+				icon: "zap",
+				group: "element"
+			},
+			{
+				type: "link",
+				label: "Link",
+				icon: "link",
+				group: "element"
+			},
+			{
+				type: "image",
+				label: "Image",
+				icon: "image",
+				group: "element"
+			}
+		], F = _(!1), I = _(null);
+		function L() {
+			F.value = !F.value;
+		}
+		function ee(e) {
+			F.value = !1, u.addChild(c.path, e);
+		}
+		function R(e) {
+			if (!F.value) return;
+			let t = e.target;
+			t && I.value && !I.value.contains(t) && (F.value = !1);
+		}
+		function z(e) {
+			e.key === "Escape" && (F.value = !1);
+		}
+		m(() => {
+			document.addEventListener("click", R), document.addEventListener("keydown", z);
+		}), p(() => {
+			document.removeEventListener("click", R), document.removeEventListener("keydown", z);
+		});
+		function B() {
+			return c.path.length > 0 && c.path[c.path.length - 1] > 0;
+		}
+		function U() {
+			if (c.path.length === 0) return !1;
+			let e = c.path.slice(0, -1), t = c.path[c.path.length - 1], n = u.schema.value;
+			for (let t of e) {
+				if (!V(n)) return !1;
+				n = n.children[t];
+			}
+			return V(n) && t < n.children.length - 1;
+		}
+		return (t, c) => {
+			let l = y("BuilderOutlineNode", !0);
+			return h(), i("div", { class: d(["pb-tree-node", {
+				"pb-tree-node--selected": k.value,
+				"pb-tree-node--root": D.value
+			}]) }, [a("div", {
+				class: "pb-tree-row",
+				style: f({ paddingLeft: `${8 + o.depth * 16}px` }),
+				onClick: c[3] ||= O((e) => C(u).select(o.path), ["stop"])
+			}, [
+				a("span", ve, [s(C(P), {
+					name: "grip-vertical",
+					size: "xs"
+				})]),
+				a("span", ye, [s(C(P), {
+					name: A[o.node.type],
+					size: "s"
+				}, null, 8, ["name"])]),
+				a("span", be, [a("span", xe, S(j.value), 1), M.value ? (h(), i("span", Se, S(M.value), 1)) : r("", !0)]),
+				T.value ? (h(), i("span", {
+					key: 0,
+					class: d(["pb-tree-issue", `pb-tree-issue--${T.value}`]),
+					title: E.value,
+					"aria-label": "Validation issues"
+				}, [s(C(P), {
+					name: T.value === "error" ? "circle-alert" : "triangle-alert",
+					size: "s"
+				}, null, 8, ["name"])], 10, Ce)) : r("", !0),
+				a("div", we, [
+					D.value ? r("", !0) : (h(), i("button", {
+						key: 0,
+						type: "button",
+						class: "pb-tree-btn",
+						disabled: !B(),
+						title: "Move up",
+						onClick: c[0] ||= O((e) => C(u).move(o.path, -1), ["stop"])
+					}, [s(C(P), {
+						name: "chevron-up",
+						size: "s"
+					})], 8, Te)),
+					D.value ? r("", !0) : (h(), i("button", {
+						key: 1,
+						type: "button",
+						class: "pb-tree-btn",
+						disabled: !U(),
+						title: "Move down",
+						onClick: c[1] ||= O((e) => C(u).move(o.path, 1), ["stop"])
+					}, [s(C(P), {
+						name: "chevron-down",
+						size: "s"
+					})], 8, Ee)),
+					D.value ? r("", !0) : (h(), i("button", {
+						key: 2,
+						type: "button",
+						class: "pb-tree-btn pb-tree-btn--danger",
+						title: "Delete",
+						onClick: c[2] ||= O((e) => C(u).remove(o.path), ["stop"])
+					}, [s(C(P), {
+						name: "trash-2",
+						size: "s"
+					})]))
+				])
+			], 4), C(V)(o.node) ? (h(), i(e, { key: 0 }, [(h(!0), i(e, null, v(o.node.children, (e, t) => (h(), n(l, {
+				key: t,
+				node: e,
+				path: [...o.path, t],
+				depth: o.depth + 1
+			}, null, 8, [
+				"node",
+				"path",
+				"depth"
+			]))), 128)), a("div", {
+				ref_key: "addMenuRoot",
+				ref: I,
+				class: "pb-tree-add",
+				style: f({ paddingLeft: `${8 + (o.depth + 1) * 16}px` })
+			}, [a("button", {
+				type: "button",
+				class: d(["pb-tree-add__trigger", { "pb-tree-add__trigger--open": F.value }]),
+				onClick: O(L, ["stop"])
+			}, [s(C(P), {
+				name: "plus",
+				size: "s"
+			}), c[4] ||= a("span", null, "Add child", -1)], 2), F.value ? (h(), i("div", De, [
+				c[5] ||= a("div", { class: "pb-tree-add__group-label" }, "Containers", -1),
+				(h(!0), i(e, null, v(x.value.filter((e) => e.group === "container"), (e) => (h(), i("button", {
+					key: e.type,
+					type: "button",
+					class: "pb-tree-add__item",
+					role: "menuitem",
+					onClick: O((t) => ee(e.type), ["stop"])
+				}, [s(C(P), {
+					name: e.icon,
+					size: "s"
+				}, null, 8, ["name"]), a("span", null, S(e.label), 1)], 8, Oe))), 128)),
+				c[6] ||= a("div", { class: "pb-tree-add__divider" }, null, -1),
+				c[7] ||= a("div", { class: "pb-tree-add__group-label" }, "Elements", -1),
+				(h(!0), i(e, null, v(x.value.filter((e) => e.group === "element"), (e) => (h(), i("button", {
+					key: e.type,
+					type: "button",
+					class: "pb-tree-add__item",
+					role: "menuitem",
+					onClick: O((t) => ee(e.type), ["stop"])
+				}, [s(C(P), {
+					name: e.icon,
+					size: "s"
+				}, null, 8, ["name"]), a("span", null, S(e.label), 1)], 8, ke))), 128))
+			])) : r("", !0)], 4)], 64)) : r("", !0)], 2);
+		};
+	}
+}), [["__scopeId", "data-v-be04973b"]]), je = { class: "pb-outline-wrap" }, Me = /* @__PURE__ */ G(/* @__PURE__ */ c({
+	name: "BuilderOutline",
+	__name: "BuilderOutline",
+	setup(e) {
+		let t = l(Q);
+		return (e, n) => (h(), i("div", je, [s(Ae, {
+			node: C(t).schema.value,
+			path: [],
+			depth: 0
+		}, null, 8, ["node"])]));
+	}
+}), [["__scopeId", "data-v-fc62f26e"]]), Ne = Symbol("PageBuilderDnd"), Pe = 80;
+function Fe(e) {
+	let t = _(!1), n = _(null), r = _(null), i = null;
+	function a() {
+		i !== null && (clearTimeout(i), i = null);
+	}
+	function o(e) {
+		let t = n.value;
+		return t ? t.kind === "new" ? !0 : !ie(t.path, e) : !1;
+	}
+	function s(e) {
+		a(), t.value = !0, n.value = e;
+	}
+	function c() {
+		t.value = !1, n.value = null, r.value = null, a();
+	}
+	function l(e, t) {
+		return o(t) ? (a(), r.value = e, !0) : !1;
+	}
+	function u(e) {
+		r.value === e && (a(), i = setTimeout(() => {
+			r.value === e && (r.value = null), i = null;
+		}, Pe));
+	}
+	function d(t, r) {
+		let i = n.value;
+		if (!i || !o(t)) return;
+		if (i.kind === "new") {
+			e.addChild(t, i.type, r);
+			return;
+		}
+		let a = i.path;
+		if (a.length === 0) return;
+		let s = a.slice(0, -1), c = a[a.length - 1], l = s.length === t.length && s.every((e, n) => e === t[n]), u = r;
+		l && (c < r && (u = r - 1), u === c) || e.moveTo(a, t, u);
+	}
+	let f = {
+		isDragging: t,
+		payload: n,
+		activeZoneKey: r,
+		startDrag: s,
+		endDrag: c,
+		onZoneEnter: l,
+		onZoneLeave: u,
+		onZoneDrop: d,
+		canDrop: o
+	};
+	return g(Ne, f), f;
+}
+function Ie() {
+	let e = l(Ne);
+	if (!e) throw Error("useBuilderDnd must be called inside CoarPageBuilder.");
+	return e;
+}
+//#endregion
+//#region src/builder/BuilderCanvasNode.vue?vue&type=script&setup=true&lang.ts
+var Le = ["title", "draggable"], Re = { class: "canvas-node__tab-label" }, ze = {
+	key: 0,
+	class: "canvas-node__section-title"
+}, Be = ["data-dropzone"], Ve = ["data-dropzone"], He = [
+	"data-dropzone",
+	"onDragenter",
+	"onDragover",
+	"onDragleave",
+	"onDrop"
+], Ue = {
+	key: 2,
+	class: "canvas-node__preview"
+}, We = {
+	key: 1,
+	class: "canvas-node__spacer-preview"
+}, Ge = {
+	key: 3,
+	class: "canvas-node__paragraph"
+}, Ke = {
+	key: 8,
+	class: "canvas-node__link",
+	type: "button"
+}, qe = ["src", "alt"], Je = {
+	key: 1,
+	class: "canvas-node__image-placeholder"
+}, Ye = /* @__PURE__ */ G(/* @__PURE__ */ c({
+	name: "BuilderCanvasNode",
+	__name: "BuilderCanvasNode",
+	props: {
+		node: {},
+		path: {}
+	},
+	setup(c) {
+		let u = c, p = l(Q), m = l($), g = Ie();
+		function _(e) {
+			return m?.value?.assetResolver?.(e) ?? "";
+		}
+		let x = t(() => u.path.length === 0), w = t(() => u.path.join("/")), T = t(() => {
+			let e = g.payload.value;
+			return !e || e.kind !== "move" ? !1 : e.path.length === u.path.length && e.path.every((e, t) => e === u.path[t]);
+		}), E = t(() => {
+			let e = p.selectedPath.value;
+			return e !== null && e.length === u.path.length && e.every((e, t) => e === u.path[t]);
+		}), A = {
+			page: "file",
+			stack: "layers",
+			card: "square-dashed",
+			section: "panel-left",
+			divider: "minus",
+			spacer: "more-horizontal",
+			heading: "heading",
+			paragraph: "pilcrow",
+			"text-input": "file-text",
+			checkbox: "check-circle-2",
+			select: "list",
+			button: "zap",
+			link: "link",
+			image: "image"
+		}, L = t(() => {
+			let e = u.node;
+			return e.text ? `${e.type} · ${String(e.text).slice(0, 24)}` : e.label ? `${e.type} · ${String(e.label).slice(0, 24)}` : e.title ? `${e.type} · ${String(e.title).slice(0, 24)}` : e.name ? `${e.type} · ${String(e.name)}` : e.type;
+		}), ee = t(() => V(u.node) ? "container" : "element"), B = t(() => {
+			let e = u.node;
+			return e.type === "stack" ? e.direction ?? "column" : "column";
+		}), H = t(() => {
+			let e = u.node;
+			if (!V(e)) return {};
+			let t = e.style?.gap, n = e.style?.align, r = e.style?.padding;
+			switch (e.type) {
+				case "page":
+				case "section": return {
+					display: "flex",
+					flexDirection: "column",
+					...t && { gap: t },
+					...n && { alignItems: n },
+					...r && { padding: r }
+				};
+				case "stack": return {
+					display: "flex",
+					flexDirection: e.direction ?? "column",
+					...t && { gap: t },
+					...n && { alignItems: n },
+					...r && { padding: r }
+				};
+				case "card": return {
+					display: "flex",
+					flexDirection: "column",
+					...t && { gap: t },
+					...n && { alignItems: n }
+				};
+				default: return {};
+			}
+		}), U = t(() => {
+			let e = u.node.style;
+			if (!e) return {};
+			let t = {};
+			return e.width && (t.width = e.width), t;
+		});
+		function W(e) {
+			return (e ?? []).map((e) => ({
+				value: e.value,
+				label: e.label
+			}));
+		}
+		function te(e) {
+			e.stopPropagation(), p.select(u.path);
+		}
+		function G(e) {
+			if (x.value) {
+				e.preventDefault();
+				return;
+			}
+			if (!e.dataTransfer) return;
+			g.startDrag({
+				kind: "move",
+				path: [...u.path]
+			}), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", "move");
+			let t = e.currentTarget?.closest(".canvas-node");
+			t && z(e, t, {
+				offsetX: 20,
+				offsetY: 16
+			}), e.stopPropagation();
+		}
+		function ne() {
+			g.endDrag();
+		}
+		function K(e) {
+			return `${w.value}:${e}`;
+		}
+		function q(e) {
+			return g.activeZoneKey.value === K(e);
+		}
+		function J(e) {
+			let t = g.isDragging.value, n = g.canDrop(u.path);
+			return {
+				"canvas-dropzone--drag-active": t && n,
+				"canvas-dropzone--disabled": t && !n,
+				"canvas-dropzone--over": q(e)
+			};
+		}
+		function Y(e, t) {
+			g.onZoneEnter(K(t), u.path) && e.preventDefault();
+		}
+		function X(e, t) {
+			g.canDrop(u.path) && (e.preventDefault(), q(t) || g.onZoneEnter(K(t), u.path));
+		}
+		function Z(e) {
+			g.onZoneLeave(K(e));
+		}
+		function re(e, t) {
+			e.preventDefault(), e.stopPropagation(), g.onZoneDrop([...u.path], t), g.endDrag();
+		}
+		return (t, l) => {
+			let u = y("BuilderCanvasNode", !0);
+			return h(), i("div", {
+				class: d(["canvas-node", [`canvas-node--${ee.value}`, {
+					"canvas-node--selected": E.value,
+					"canvas-node--root": x.value,
+					"canvas-node--dragging": T.value
+				}]]),
+				style: f(U.value),
+				onClick: te
+			}, [
+				a("span", {
+					class: d(["canvas-node__tab", { "canvas-node__tab--grabbable": !x.value }]),
+					title: L.value,
+					draggable: !x.value,
+					onDragstart: G,
+					onDragend: ne
+				}, [s(C(P), {
+					name: A[c.node.type],
+					size: "xs"
+				}, null, 8, ["name"]), a("span", Re, S(L.value), 1)], 42, Le),
+				x.value ? r("", !0) : (h(), i("button", {
+					key: 0,
+					type: "button",
+					class: "canvas-node__delete",
+					title: "Delete",
+					onClick: l[0] ||= O((e) => C(p).remove(c.path), ["stop"])
+				}, [s(C(P), {
+					name: "x",
+					size: "xs"
+				})])),
+				C(V)(c.node) ? (h(), i("div", {
+					key: 1,
+					class: d(["canvas-node__body", [`canvas-node__body--${c.node.type}`, `canvas-node__body--dir-${B.value}`]]),
+					style: f(H.value)
+				}, [c.node.type === "section" && c.node.title ? (h(), i("div", ze, S(c.node.title), 1)) : r("", !0), c.node.children.length === 0 ? (h(), i("div", {
+					key: 1,
+					class: d(["canvas-dropzone canvas-dropzone--empty", J(0)]),
+					"data-dropzone": K(0),
+					onDragenter: l[1] ||= (e) => Y(e, 0),
+					onDragover: l[2] ||= (e) => X(e, 0),
+					onDragleave: l[3] ||= (e) => Z(0),
+					onDrop: l[4] ||= (e) => re(e, 0)
+				}, " Empty " + S(c.node.type) + " — drop something here ", 43, Be)) : (h(), i(e, { key: 2 }, [a("div", {
+					class: d(["canvas-dropzone", [`canvas-dropzone--${B.value}`, J(0)]]),
+					"data-dropzone": K(0),
+					"aria-hidden": "true",
+					onDragenter: l[5] ||= (e) => Y(e, 0),
+					onDragover: l[6] ||= (e) => X(e, 0),
+					onDragleave: l[7] ||= (e) => Z(0),
+					onDrop: l[8] ||= (e) => re(e, 0)
+				}, null, 42, Ve), (h(!0), i(e, null, v(c.node.children, (t, n) => (h(), i(e, { key: t.id }, [s(u, {
+					node: t,
+					path: [...c.path, n]
+				}, null, 8, ["node", "path"]), a("div", {
+					class: d(["canvas-dropzone", [`canvas-dropzone--${B.value}`, J(n + 1)]]),
+					"data-dropzone": K(n + 1),
+					"aria-hidden": "true",
+					onDragenter: (e) => Y(e, n + 1),
+					onDragover: (e) => X(e, n + 1),
+					onDragleave: (e) => Z(n + 1),
+					onDrop: (e) => re(e, n + 1)
+				}, null, 42, He)], 64))), 128))], 64))], 6)) : (h(), i("div", Ue, [c.node.type === "divider" ? (h(), n(C(M), { key: 0 })) : c.node.type === "spacer" ? (h(), i("div", We)) : c.node.type === "heading" ? (h(), n(b(`h${c.node.level ?? 2}`), {
+					key: 2,
+					class: "canvas-node__heading"
+				}, {
+					default: D(() => [o(S(c.node.text || "Heading"), 1)]),
+					_: 1
+				})) : c.node.type === "paragraph" ? (h(), i("p", Ge, S(c.node.text || "Paragraph text."), 1)) : c.node.type === "text-input" ? (h(), n(C(N), {
+					key: 4,
+					label: c.node.label,
+					required: c.node.validation?.required
+				}, {
+					default: D(() => [c.node.inputType === "password" ? (h(), n(C(F), {
+						key: 0,
+						"model-value": "",
+						placeholder: c.node.placeholder,
+						disabled: ""
+					}, null, 8, ["placeholder"])) : (h(), n(C(R), {
+						key: 1,
+						"model-value": "",
+						placeholder: c.node.placeholder,
+						readonly: ""
+					}, null, 8, ["placeholder"]))]),
+					_: 1
+				}, 8, ["label", "required"])) : c.node.type === "checkbox" ? (h(), n(C(j), {
+					key: 5,
+					"model-value": !1,
+					label: c.node.label || "Checkbox",
+					required: c.node.validation?.required,
+					disabled: ""
+				}, null, 8, ["label", "required"])) : c.node.type === "select" ? (h(), n(C(N), {
+					key: 6,
+					label: c.node.label,
+					required: c.node.validation?.required
+				}, {
+					default: D(() => [s(C(I), {
+						"model-value": null,
+						options: W(c.node.options),
+						placeholder: c.node.placeholder,
+						disabled: ""
+					}, null, 8, ["options", "placeholder"])]),
+					_: 1
+				}, 8, ["label", "required"])) : c.node.type === "button" ? (h(), n(C(k), {
+					key: 7,
+					variant: c.node.variant ?? "primary",
+					size: c.node.size,
+					style: f(c.node.style?.width ? { width: c.node.style.width } : {}),
+					disabled: ""
+				}, {
+					default: D(() => [o(S(c.node.label || "Button"), 1)]),
+					_: 1
+				}, 8, [
+					"variant",
+					"size",
+					"style"
+				])) : c.node.type === "link" ? (h(), i("button", Ke, S(c.node.label || "Link"), 1)) : c.node.type === "image" ? (h(), i(e, { key: 9 }, [c.node.assetId && _(c.node.assetId) ? (h(), i("img", {
+					key: 0,
+					src: _(c.node.assetId),
+					alt: c.node.alt ?? "",
+					class: "canvas-node__image-preview"
+				}, null, 8, qe)) : (h(), i("div", Je, [s(C(P), {
+					name: "image",
+					size: "m"
+				}), a("span", null, S(c.node.assetId || "No image"), 1)]))], 64)) : r("", !0)]))
+			], 6);
+		};
+	}
+}), [["__scopeId", "data-v-3ae4c5ac"]]), Xe = { class: "pb-canvas-shell" }, Ze = { class: "pb-palette" }, Qe = { class: "pb-palette__group" }, $e = ["title", "onDragstart"], et = { class: "pb-palette__group" }, tt = ["title", "onDragstart"], nt = 120, rt = 60, it = /* @__PURE__ */ G(/* @__PURE__ */ c({
+	name: "BuilderCanvas",
+	__name: "BuilderCanvas",
+	setup(n) {
+		let r = l(Q), o = l($), c = Fe(r), u = t(() => f.filter((e) => H(e.type, o?.value))), f = [
+			{
+				type: "stack",
+				label: "Stack",
+				icon: "layers",
+				group: "container"
+			},
+			{
+				type: "card",
+				label: "Card",
+				icon: "square-dashed",
+				group: "container"
+			},
+			{
+				type: "section",
+				label: "Section",
+				icon: "panel-left",
+				group: "container"
+			},
+			{
+				type: "heading",
+				label: "Heading",
+				icon: "heading",
+				group: "element"
+			},
+			{
+				type: "paragraph",
+				label: "Paragraph",
+				icon: "pilcrow",
+				group: "element"
+			},
+			{
+				type: "divider",
+				label: "Divider",
+				icon: "minus",
+				group: "element"
+			},
+			{
+				type: "spacer",
+				label: "Spacer",
+				icon: "more-horizontal",
+				group: "element"
+			},
+			{
+				type: "text-input",
+				label: "Text Input",
+				icon: "file-text",
+				group: "element"
+			},
+			{
+				type: "checkbox",
+				label: "Checkbox",
+				icon: "check-circle-2",
+				group: "element"
+			},
+			{
+				type: "select",
+				label: "Select",
+				icon: "list",
+				group: "element"
+			},
+			{
+				type: "button",
+				label: "Button",
+				icon: "zap",
+				group: "element"
+			},
+			{
+				type: "link",
+				label: "Link",
+				icon: "link",
+				group: "element"
+			},
+			{
+				type: "image",
+				label: "Image",
+				icon: "image",
+				group: "element"
+			}
+		];
+		function g(e) {
+			let t = c.payload.value;
+			return !!(t && t.kind === "new" && t.type === e);
+		}
+		function _(e, t) {
+			if (!e.dataTransfer) return;
+			c.startDrag({
+				kind: "new",
+				type: t
+			}), e.dataTransfer.effectAllowed = "copy", e.dataTransfer.setData("text/plain", t);
+			let n = e.currentTarget;
+			n && z(e, n);
+		}
+		function y() {
+			c.endDrag();
+		}
+		function b() {
+			r.select([]);
+		}
+		function x(e) {
+			if (!c.isDragging.value) return;
+			let t = e.clientX, n = e.clientY, r = document.querySelectorAll(".canvas-dropzone:not(.canvas-dropzone--empty)");
+			for (let e of r) {
+				let r = e.getBoundingClientRect(), i = Math.max(r.left - t, 0, t - r.right), a = Math.max(r.top - n, 0, n - r.bottom), o = Math.hypot(i, a);
+				if (o >= nt) e.style.opacity = "0", e.style.pointerEvents = "none";
+				else {
+					let t = 1 - o / nt;
+					e.style.opacity = t.toFixed(3), e.style.pointerEvents = o <= rt ? "auto" : "none";
+				}
+			}
+		}
+		function w() {
+			let e = document.querySelectorAll(".canvas-dropzone:not(.canvas-dropzone--empty)");
+			for (let t of e) t.style.opacity = "", t.style.pointerEvents = "";
+		}
+		E(() => c.isDragging.value, (e) => {
+			e || w();
+		});
+		function T(e) {
+			let t = e.ctrlKey || e.metaKey;
+			if (t && (e.key === "z" || e.key === "Z")) {
+				e.preventDefault(), e.shiftKey ? r.redo() : r.undo();
+				return;
+			}
+			if (t && (e.key === "y" || e.key === "Y")) {
+				e.preventDefault(), r.redo();
+				return;
+			}
+			if (e.key !== "Delete" && e.key !== "Backspace") return;
+			let n = e.target;
+			if (!n) return;
+			let i = n.tagName;
+			if (i === "INPUT" || i === "TEXTAREA" || i === "SELECT" || n.isContentEditable) return;
+			let a = r.selectedPath.value;
+			!a || a.length === 0 || (e.preventDefault(), r.remove(a));
+		}
+		return m(() => window.addEventListener("keydown", T)), p(() => window.removeEventListener("keydown", T)), (t, n) => (h(), i("div", Xe, [a("div", Ze, [
+			a("div", Qe, [n[0] ||= a("span", { class: "pb-palette__label" }, "Containers", -1), (h(!0), i(e, null, v(u.value.filter((e) => e.group === "container"), (e) => (h(), i("button", {
+				key: e.type,
+				type: "button",
+				class: d(["pb-palette__card pb-palette__card--container", { "pb-palette__card--dragging": g(e.type) }]),
+				title: `Drag to add ${e.label}`,
+				draggable: "true",
+				onDragstart: (t) => _(t, e.type),
+				onDragend: y
+			}, [s(C(P), {
+				name: e.icon,
+				size: "s"
+			}, null, 8, ["name"]), a("span", null, S(e.label), 1)], 42, $e))), 128))]),
+			n[2] ||= a("div", { class: "pb-palette__divider" }, null, -1),
+			a("div", et, [n[1] ||= a("span", { class: "pb-palette__label" }, "Elements", -1), (h(!0), i(e, null, v(u.value.filter((e) => e.group === "element"), (e) => (h(), i("button", {
+				key: e.type,
+				type: "button",
+				class: d(["pb-palette__card pb-palette__card--element", { "pb-palette__card--dragging": g(e.type) }]),
+				title: `Drag to add ${e.label}`,
+				draggable: "true",
+				onDragstart: (t) => _(t, e.type),
+				onDragend: y
+			}, [s(C(P), {
+				name: e.icon,
+				size: "s"
+			}, null, 8, ["name"]), a("span", null, S(e.label), 1)], 42, tt))), 128))])
+		]), a("div", {
+			class: d(["pb-canvas", { "pb-canvas--dragging": C(c).isDragging.value }]),
+			onClick: O(b, ["self"]),
+			onDragover: x
+		}, [s(Ye, {
+			node: C(r).schema.value,
+			path: []
+		}, null, 8, ["node"])], 34)]));
+	}
+}), [["__scopeId", "data-v-4d674269"]]), at = { class: "pb-prop-group" }, ot = {
+	class: "pb-prop-seg",
+	role: "radiogroup",
+	"aria-label": "Stack direction"
+}, st = ["aria-checked"], ct = ["aria-checked"], lt = /* @__PURE__ */ G(/* @__PURE__ */ c({
+	__name: "StackProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(t) {
+		let o = t;
+		return (t, s) => (h(), i(e, null, [a("div", at, [s[3] ||= a("span", { class: "pb-prop-label" }, "Direction", -1), a("div", ot, [a("button", {
+			type: "button",
+			class: d(["pb-prop-seg__btn", { "pb-prop-seg__btn--active": (o.node.direction ?? "column") === "column" }]),
+			role: "radio",
+			"aria-checked": (o.node.direction ?? "column") === "column",
+			onClick: s[0] ||= (e) => o.patch({ direction: "column" })
+		}, " ↓ Column ", 10, st), a("button", {
+			type: "button",
+			class: d(["pb-prop-seg__btn", { "pb-prop-seg__btn--active": o.node.direction === "row" }]),
+			role: "radio",
+			"aria-checked": o.node.direction === "row",
+			onClick: s[1] ||= (e) => o.patch({ direction: "row" })
+		}, " → Row ", 10, ct)])]), o.node.direction === "row" ? (h(), n(C(j), {
+			key: 0,
+			"model-value": !!o.node.wrap,
+			label: "Wrap children",
+			"onUpdate:modelValue": s[2] ||= (e) => o.patch({ wrap: e })
+		}, null, 8, ["model-value"])) : r("", !0)], 64));
+	}
+}), [["__scopeId", "data-v-e4171f7c"]]), ut = /* @__PURE__ */ c({
+	__name: "CardProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(e) {
+		let t = e;
+		return (e, r) => (h(), n(C(N), { label: "Title" }, {
+			default: D(() => [s(C(R), {
+				"model-value": t.node.title ?? "",
+				"onUpdate:modelValue": r[0] ||= (e) => t.patch({ title: e })
+			}, null, 8, ["model-value"])]),
+			_: 1
+		}));
+	}
+}), dt = /* @__PURE__ */ c({
+	__name: "SectionProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(e) {
+		let t = e;
+		return (e, r) => (h(), n(C(N), { label: "Title" }, {
+			default: D(() => [s(C(R), {
+				"model-value": t.node.title ?? "",
+				"onUpdate:modelValue": r[0] ||= (e) => t.patch({ title: e })
+			}, null, 8, ["model-value"])]),
+			_: 1
+		}));
+	}
+}), ft = /* @__PURE__ */ c({
+	__name: "HeadingProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(t) {
+		let n = t, r = [
+			{
+				value: 1,
+				label: "H1"
+			},
+			{
+				value: 2,
+				label: "H2"
+			},
+			{
+				value: 3,
+				label: "H3"
+			},
+			{
+				value: 4,
+				label: "H4"
+			},
+			{
+				value: 5,
+				label: "H5"
+			},
+			{
+				value: 6,
+				label: "H6"
+			}
+		];
+		return (t, a) => (h(), i(e, null, [s(C(N), { label: "Text" }, {
+			default: D(() => [s(C(R), {
+				"model-value": n.node.text ?? "",
+				"onUpdate:modelValue": a[0] ||= (e) => n.patch({ text: e })
+			}, null, 8, ["model-value"])]),
+			_: 1
+		}), s(C(N), { label: "Level" }, {
+			default: D(() => [s(C(I), {
+				"model-value": n.node.level ?? 2,
+				options: r,
+				"onUpdate:modelValue": a[1] ||= (e) => n.patch({ level: e })
+			}, null, 8, ["model-value"])]),
+			_: 1
+		})], 64));
+	}
+}), pt = ["value"], mt = /* @__PURE__ */ G(/* @__PURE__ */ c({
+	__name: "ParagraphProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(e) {
+		let t = e;
+		return (e, r) => (h(), n(C(N), { label: "Text" }, {
+			default: D(() => [a("textarea", {
+				class: "pb-prop-textarea",
+				value: t.node.text ?? "",
+				rows: "3",
+				onInput: r[0] ||= (e) => t.patch({ text: e.target.value })
+			}, null, 40, pt)]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-13b6b029"]]), ht = /* @__PURE__ */ c({
+	__name: "SpacerProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(e) {
+		let t = e;
+		return (e, r) => (h(), n(C(N), {
+			label: "Size (CSS)",
+			hint: "Leave empty to fill available space"
+		}, {
+			default: D(() => [s(C(R), {
+				"model-value": t.node.size ?? "",
+				placeholder: "e.g. 24px",
+				"onUpdate:modelValue": r[0] ||= (e) => t.patch({ size: e })
+			}, null, 8, ["model-value"])]),
+			_: 1
+		}));
+	}
+}), gt = /* @__PURE__ */ c({
+	__name: "TextInputProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(t) {
+		let n = t, r = [
+			{
+				value: "text",
+				label: "text"
+			},
+			{
+				value: "email",
+				label: "email"
+			},
+			{
+				value: "password",
+				label: "password"
+			},
+			{
+				value: "url",
+				label: "url"
+			}
+		];
+		function a(e) {
+			n.patch({ validation: e ? { required: !0 } : {} });
+		}
+		return (t, o) => (h(), i(e, null, [
+			s(C(N), { label: "Label" }, {
+				default: D(() => [s(C(R), {
+					"model-value": n.node.label ?? "",
+					"onUpdate:modelValue": o[0] ||= (e) => n.patch({ label: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(N), { label: "Name (field key)" }, {
+				default: D(() => [s(C(R), {
+					"model-value": n.node.name ?? "",
+					"onUpdate:modelValue": o[1] ||= (e) => n.patch({ name: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(N), { label: "Placeholder" }, {
+				default: D(() => [s(C(R), {
+					"model-value": n.node.placeholder ?? "",
+					"onUpdate:modelValue": o[2] ||= (e) => n.patch({ placeholder: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(N), { label: "Input type" }, {
+				default: D(() => [s(C(I), {
+					"model-value": n.node.inputType ?? "text",
+					options: r,
+					"onUpdate:modelValue": o[3] ||= (e) => n.patch({ inputType: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(j), {
+				"model-value": !!n.node.validation?.required,
+				label: "Required",
+				"onUpdate:modelValue": a
+			}, null, 8, ["model-value"]),
+			s(C(j), {
+				"model-value": !!n.node.disabled,
+				label: "Disabled",
+				"onUpdate:modelValue": o[4] ||= (e) => n.patch({ disabled: e })
+			}, null, 8, ["model-value"])
+		], 64));
+	}
+}), _t = /* @__PURE__ */ c({
+	__name: "CheckboxProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(t) {
+		let n = t;
+		function r(e) {
+			n.patch({ validation: e ? { required: !0 } : {} });
+		}
+		return (t, a) => (h(), i(e, null, [
+			s(C(N), { label: "Label" }, {
+				default: D(() => [s(C(R), {
+					"model-value": n.node.label ?? "",
+					"onUpdate:modelValue": a[0] ||= (e) => n.patch({ label: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(N), { label: "Name (field key)" }, {
+				default: D(() => [s(C(R), {
+					"model-value": n.node.name ?? "",
+					"onUpdate:modelValue": a[1] ||= (e) => n.patch({ name: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(j), {
+				"model-value": !!n.node.validation?.required,
+				label: "Required",
+				"onUpdate:modelValue": r
+			}, null, 8, ["model-value"]),
+			s(C(j), {
+				"model-value": !!n.node.disabled,
+				label: "Disabled",
+				"onUpdate:modelValue": a[2] ||= (e) => n.patch({ disabled: e })
+			}, null, 8, ["model-value"])
+		], 64));
+	}
+}), vt = /* @__PURE__ */ c({
+	__name: "SelectProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(t) {
+		let n = t;
+		function r(e) {
+			n.patch({ validation: e ? { required: !0 } : {} });
+		}
+		return (t, a) => (h(), i(e, null, [
+			s(C(N), { label: "Label" }, {
+				default: D(() => [s(C(R), {
+					"model-value": n.node.label ?? "",
+					"onUpdate:modelValue": a[0] ||= (e) => n.patch({ label: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(N), { label: "Name (field key)" }, {
+				default: D(() => [s(C(R), {
+					"model-value": n.node.name ?? "",
+					"onUpdate:modelValue": a[1] ||= (e) => n.patch({ name: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(N), { label: "Placeholder" }, {
+				default: D(() => [s(C(R), {
+					"model-value": n.node.placeholder ?? "",
+					"onUpdate:modelValue": a[2] ||= (e) => n.patch({ placeholder: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(j), {
+				"model-value": !!n.node.validation?.required,
+				label: "Required",
+				"onUpdate:modelValue": r
+			}, null, 8, ["model-value"]),
+			s(C(j), {
+				"model-value": !!n.node.disabled,
+				label: "Disabled",
+				"onUpdate:modelValue": a[3] ||= (e) => n.patch({ disabled: e })
+			}, null, 8, ["model-value"])
+		], 64));
+	}
+}), yt = /* @__PURE__ */ c({
+	__name: "ButtonProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(r) {
+		let a = r, o = l($), c = t(() => {
+			let e = o?.value?.availableActions;
+			if (!e || e.length === 0) return null;
+			let t = /* @__PURE__ */ new Set(), n = [{
+				value: "",
+				label: "— none"
+			}];
+			for (let r of e) t.has(r.id) || (t.add(r.id), n.push({
+				value: r.id,
+				label: r.label
+			}));
+			let r = a.node.action;
+			return r && !t.has(r) && n.push({
+				value: r,
+				label: `${r} (not configured)`
+			}), n;
+		}), u = [
+			{
+				value: "primary",
+				label: "primary"
+			},
+			{
+				value: "secondary",
+				label: "secondary"
+			},
+			{
+				value: "ghost",
+				label: "ghost"
+			},
+			{
+				value: "danger",
+				label: "danger"
+			}
+		], d = [
+			{
+				value: "",
+				label: "— default"
+			},
+			{
+				value: "xs",
+				label: "xs"
+			},
+			{
+				value: "s",
+				label: "s"
+			},
+			{
+				value: "m",
+				label: "m"
+			},
+			{
+				value: "l",
+				label: "l"
+			}
+		];
+		return (t, r) => (h(), i(e, null, [
+			s(C(N), { label: "Label" }, {
+				default: D(() => [s(C(R), {
+					"model-value": a.node.label ?? "",
+					"onUpdate:modelValue": r[0] ||= (e) => a.patch({ label: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(N), {
+				label: "Action",
+				hint: "Matched against the actions map at render time"
+			}, {
+				default: D(() => [c.value ? (h(), n(C(I), {
+					key: 0,
+					"model-value": a.node.action ?? "",
+					options: c.value,
+					"onUpdate:modelValue": r[1] ||= (e) => a.patch({ action: e || void 0 })
+				}, null, 8, ["model-value", "options"])) : (h(), n(C(R), {
+					key: 1,
+					"model-value": a.node.action ?? "",
+					placeholder: "e.g. auth:login",
+					"onUpdate:modelValue": r[2] ||= (e) => a.patch({ action: e })
+				}, null, 8, ["model-value"]))]),
+				_: 1
+			}),
+			s(C(N), { label: "Variant" }, {
+				default: D(() => [s(C(I), {
+					"model-value": a.node.variant ?? "primary",
+					options: u,
+					"onUpdate:modelValue": r[3] ||= (e) => a.patch({ variant: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(N), { label: "Size" }, {
+				default: D(() => [s(C(I), {
+					"model-value": a.node.size ?? "",
+					options: d,
+					"onUpdate:modelValue": r[4] ||= (e) => a.patch({ size: e || void 0 })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(N), { label: "Icon (left)" }, {
+				default: D(() => [s(C(R), {
+					"model-value": a.node.icon ?? "",
+					placeholder: "e.g. log-in",
+					"onUpdate:modelValue": r[5] ||= (e) => a.patch({ icon: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(j), {
+				"model-value": !!a.node.validates,
+				label: "Validates form before firing",
+				"onUpdate:modelValue": r[6] ||= (e) => a.patch({ validates: e })
+			}, null, 8, ["model-value"])
+		], 64));
+	}
+}), bt = /* @__PURE__ */ c({
+	__name: "LinkProps",
+	props: {
+		node: {},
+		patch: { type: Function }
+	},
+	setup(r) {
+		let a = r, o = l($), c = t(() => {
+			let e = o?.value?.availableActions;
+			if (!e || e.length === 0) return null;
+			let t = /* @__PURE__ */ new Set(), n = [{
+				value: "",
+				label: "— none"
+			}];
+			for (let r of e) t.has(r.id) || (t.add(r.id), n.push({
+				value: r.id,
+				label: r.label
+			}));
+			let r = a.node.action;
+			return r && !t.has(r) && n.push({
+				value: r,
+				label: `${r} (not configured)`
+			}), n;
+		});
+		return (t, r) => (h(), i(e, null, [s(C(N), { label: "Label" }, {
+			default: D(() => [s(C(R), {
+				"model-value": a.node.label ?? "",
+				"onUpdate:modelValue": r[0] ||= (e) => a.patch({ label: e })
+			}, null, 8, ["model-value"])]),
+			_: 1
+		}), s(C(N), { label: "Action" }, {
+			default: D(() => [c.value ? (h(), n(C(I), {
+				key: 0,
+				"model-value": a.node.action ?? "",
+				options: c.value,
+				"onUpdate:modelValue": r[1] ||= (e) => a.patch({ action: e || void 0 })
+			}, null, 8, ["model-value", "options"])) : (h(), n(C(R), {
+				key: 1,
+				"model-value": a.node.action ?? "",
+				placeholder: "e.g. nav:forgot-password",
+				"onUpdate:modelValue": r[2] ||= (e) => a.patch({ action: e })
+			}, null, 8, ["model-value"]))]),
+			_: 1
+		})], 64));
+	}
+}), xt = { class: "pb-image-asset" }, St = { class: "pb-image-asset__thumb" }, Ct = ["src", "alt"], wt = {
+	key: 1,
+	class: "pb-image-asset__empty"
+}, Tt = { class: "pb-image-asset__empty-label" }, Et = { class: "pb-image-asset__controls" }, Dt = {
+	stack: {
+		component: lt,
+		sectionTitle: "Layout"
+	},
+	card: {
+		component: ut,
+		sectionTitle: "Card"
+	},
+	section: {
+		component: dt,
+		sectionTitle: "Section"
+	},
+	heading: {
+		component: ft,
+		sectionTitle: "Heading"
+	},
+	paragraph: {
+		component: mt,
+		sectionTitle: "Paragraph"
+	},
+	spacer: {
+		component: ht,
+		sectionTitle: "Spacer"
+	},
+	"text-input": {
+		component: gt,
+		sectionTitle: "Text input"
+	},
+	checkbox: {
+		component: _t,
+		sectionTitle: "Checkbox"
+	},
+	select: {
+		component: vt,
+		sectionTitle: "Select"
+	},
+	button: {
+		component: yt,
+		sectionTitle: "Button"
+	},
+	link: {
+		component: bt,
+		sectionTitle: "Link"
+	},
+	image: {
+		component: /* @__PURE__ */ G(/* @__PURE__ */ c({
+			__name: "ImageProps",
+			props: {
+				node: {},
+				patch: { type: Function }
+			},
+			setup(c) {
+				let u = c, d = l($), f = t(() => !!d?.value?.pickAsset), p = t(() => {
+					let e = u.node.assetId;
+					return e ? d?.value?.assetResolver?.(e) ?? "" : "";
+				});
+				async function m() {
+					let e = d?.value?.pickAsset;
+					if (!e) return;
+					let t = await e(u.node.assetId || void 0);
+					t != null && u.patch({ assetId: t });
+				}
+				function g() {
+					u.patch({ assetId: "" });
+				}
+				return (t, c) => (h(), i(e, null, [f.value ? (h(), n(C(N), {
+					key: 0,
+					label: "Asset"
+				}, {
+					default: D(() => [a("div", xt, [a("div", St, [p.value ? (h(), i("img", {
+						key: 0,
+						src: p.value,
+						alt: u.node.alt ?? ""
+					}, null, 8, Ct)) : (h(), i("span", wt, [s(C(P), {
+						name: "image",
+						size: "m"
+					}), a("span", Tt, S(u.node.assetId ? "No preview" : "No image"), 1)]))]), a("div", Et, [s(C(k), {
+						size: "s",
+						variant: "secondary",
+						onClick: m
+					}, {
+						default: D(() => [o(S(u.node.assetId ? "Change…" : "Choose…"), 1)]),
+						_: 1
+					}), u.node.assetId ? (h(), n(C(k), {
+						key: 0,
+						size: "s",
+						variant: "ghost",
+						onClick: g
+					}, {
+						default: D(() => [...c[2] ||= [o(" Clear ", -1)]]),
+						_: 1
+					})) : r("", !0)])])]),
+					_: 1
+				})) : (h(), n(C(N), {
+					key: 1,
+					label: "Asset ID",
+					hint: "Resolved via assetResolver at render time"
+				}, {
+					default: D(() => [s(C(R), {
+						"model-value": u.node.assetId ?? "",
+						"onUpdate:modelValue": c[0] ||= (e) => u.patch({ assetId: e })
+					}, null, 8, ["model-value"])]),
+					_: 1
+				})), s(C(N), { label: "Alt text" }, {
+					default: D(() => [s(C(R), {
+						"model-value": u.node.alt ?? "",
+						"onUpdate:modelValue": c[1] ||= (e) => u.patch({ alt: e })
+					}, null, 8, ["model-value"])]),
+					_: 1
+				})], 64));
+			}
+		}), [["__scopeId", "data-v-49a42b45"]]),
+		sectionTitle: "Image"
+	}
+}, Ot = /* @__PURE__ */ c({
+	__name: "StyleProps",
+	props: {
+		node: {},
+		patchStyle: { type: Function }
+	},
+	setup(a) {
+		let o = a, c = t(() => V(o.node)), l = [
+			{
+				value: "",
+				label: "— inherit"
+			},
+			{
+				value: "start",
+				label: "start"
+			},
+			{
+				value: "center",
+				label: "center"
+			},
+			{
+				value: "end",
+				label: "end"
+			},
+			{
+				value: "stretch",
+				label: "stretch"
+			}
+		];
+		return (t, a) => (h(), i(e, null, [
+			c.value ? (h(), n(C(N), {
+				key: 0,
+				label: "Gap"
+			}, {
+				default: D(() => [s(C(R), {
+					"model-value": o.node.style?.gap ?? "",
+					placeholder: "e.g. 8px",
+					"onUpdate:modelValue": a[0] ||= (e) => o.patchStyle({ gap: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			})) : r("", !0),
+			s(C(N), { label: "Padding" }, {
+				default: D(() => [s(C(R), {
+					"model-value": o.node.style?.padding ?? "",
+					placeholder: "e.g. 16px",
+					"onUpdate:modelValue": a[1] ||= (e) => o.patchStyle({ padding: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			s(C(N), { label: "Width" }, {
+				default: D(() => [s(C(R), {
+					"model-value": o.node.style?.width ?? "",
+					placeholder: "e.g. 100%, 380px",
+					"onUpdate:modelValue": a[2] ||= (e) => o.patchStyle({ width: e })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			}),
+			c.value ? (h(), n(C(N), {
+				key: 1,
+				label: "Align children"
+			}, {
+				default: D(() => [s(C(I), {
+					"model-value": o.node.style?.align ?? "",
+					options: l,
+					"onUpdate:modelValue": a[3] ||= (e) => o.patchStyle({ align: e || void 0 })
+				}, null, 8, ["model-value"])]),
+				_: 1
+			})) : r("", !0)
+		], 64));
+	}
+}), kt = { class: "pb-props" }, At = { class: "pb-props__header" }, jt = {
+	key: 0,
+	class: "pb-props__empty"
+}, Mt = {
+	key: 1,
+	class: "pb-props__body"
+}, Nt = {
+	key: 0,
+	class: "pb-props__issues"
+}, Pt = {
+	key: 1,
+	class: "pb-props__section"
+}, Ft = { class: "pb-props__section-title" }, It = /* @__PURE__ */ G(/* @__PURE__ */ c({
+	name: "BuilderPropsPanel",
+	__name: "BuilderPropsPanel",
+	setup(o) {
+		let c = l(Q), u = l(_e), f = t(() => c.selectedNode.value), p = t(() => c.selectedPath.value ?? []), m = t(() => f.value ? Dt[f.value.type] : void 0), g = t(() => f.value ? u?.byNodeId.value.get(f.value.id) ?? [] : []);
+		function _(e) {
+			p.value && c.patch(p.value, e);
+		}
+		function y(e) {
+			f.value && _({ style: {
+				...f.value.style ?? {},
+				...e
+			} });
+		}
+		return (t, o) => (h(), i("aside", kt, [a("header", At, [s(C(P), {
+			name: "settings",
+			size: "s"
+		}), o[0] ||= a("span", { class: "pb-props__title" }, "Properties", -1)]), f.value ? (h(), i("div", Mt, [
+			g.value.length > 0 ? (h(), i("ul", Nt, [(h(!0), i(e, null, v(g.value, (e, t) => (h(), i("li", {
+				key: t,
+				class: d(["pb-props__issue", `pb-props__issue--${e.severity}`])
+			}, [s(C(P), {
+				name: e.severity === "error" ? "circle-alert" : "triangle-alert",
+				size: "s"
+			}, null, 8, ["name"]), a("span", null, S(e.message), 1)], 2))), 128))])) : r("", !0),
+			m.value ? (h(), i("section", Pt, [a("h4", Ft, S(m.value.sectionTitle), 1), (h(), n(b(m.value.component), {
+				node: f.value,
+				patch: _
+			}, null, 8, ["node"]))])) : r("", !0),
+			f.value.type === "spacer" ? r("", !0) : (h(), i("section", {
+				key: 2,
+				class: d(["pb-props__section", { "pb-props__section--separated": !!m.value }])
+			}, [o[3] ||= a("h4", { class: "pb-props__section-title" }, "Style", -1), s(Ot, {
+				node: f.value,
+				"patch-style": y
+			}, null, 8, ["node"])], 2))
+		])) : (h(), i("div", jt, [
+			s(C(P), {
+				name: "settings",
+				size: "l"
+			}),
+			o[1] ||= a("p", { class: "pb-props__empty-title" }, "No node selected", -1),
+			o[2] ||= a("p", { class: "pb-props__empty-hint" }, "Click a node in the outline or canvas to edit it.", -1)
+		]))]));
+	}
+}), [["__scopeId", "data-v-380ec929"]]), Lt = { class: "pb-builder__pane-header" }, Rt = { class: "pb-builder__tree-scroll" }, zt = { class: "pb-builder__pane pb-builder__pane--center" }, Bt = ["disabled"], Vt = ["disabled"], Ht = { class: "pb-builder__tab-label" }, Ut = { class: "pb-builder__tab-label" }, Wt = { class: "pb-builder__preview-pane" }, Gt = { class: "pb-builder__preview-toolbar" }, Kt = {
+	class: "pb-builder__seg",
+	role: "radiogroup",
+	"aria-label": "Preview width"
+}, qt = ["aria-checked"], Jt = ["aria-checked"], Yt = ["aria-checked"], Xt = { class: "pb-builder__preview" }, Zt = { class: "pb-builder__tab-label" }, Qt = { class: "pb-builder__json-pane" }, $t = { class: "pb-builder__json-toolbar" }, en = {
+	key: 0,
+	class: "pb-builder__json-error"
+}, tn = ["disabled"], nn = ["value"], rn = 260, an = 180, on = 280, sn = 220, cn = 360, ln = 36, un = /* @__PURE__ */ G(/* @__PURE__ */ c({
+	__name: "CoarPageBuilder",
+	props: /* @__PURE__ */ u({ config: {} }, {
+		modelValue: { required: !1 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(n) {
+		w((e) => ({
+			v0d1c4c4b: N.value,
+			v0f378b9d: F.value
+		}));
+		let c = T(n, "modelValue"), l = n, u = me({
+			schema: c.value === void 0 ? void 0 : c,
+			initial: {
+				id: "root",
+				type: "page",
+				style: {
+					gap: "16px",
+					padding: "24px"
+				},
+				children: []
+			}
+		}), p = t(() => l.config), m = he(u.schema, p);
+		g(Q, u), g($, p), g(_e, m);
+		let v = _("editor"), y = _("full"), b = {
+			tablet: 768,
+			mobile: 375
+		}, x = t(() => y.value === "full" ? {} : {
+			maxWidth: `${b[y.value]}px`,
+			width: "100%",
+			margin: "0 auto"
+		}), O = _(rn), k = _(on), A = _(!1), j = _(!1), M = _(null), N = _(`${rn}px`), F = _(`${on}px`);
+		E([A, O], () => {
+			N.value = A.value ? `${ln}px` : `${O.value}px`;
+		}), E([j, k], () => {
+			F.value = j.value ? `${ln}px` : `${k.value}px`;
+		});
+		let I = _(null);
+		function R(e, t) {
+			if (e === "outline" && A.value || e === "props" && j.value) return;
+			t.preventDefault(), M.value = e;
+			let n = t.clientX, r = O.value, i = k.value;
+			function a(t) {
+				let a = I.value?.getBoundingClientRect().width ?? 0;
+				if (!a) return;
+				let o = a - (e === "outline" ? j.value ? ln : k.value : A.value ? ln : O.value) - cn - 2, s = t.clientX - n;
+				e === "outline" ? O.value = Math.min(Math.max(r + s, an), Math.max(an, o)) : k.value = Math.min(Math.max(i - s, sn), Math.max(sn, o));
+			}
+			function o() {
+				M.value = null, window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", o), window.removeEventListener("pointercancel", o);
+			}
+			window.addEventListener("pointermove", a), window.addEventListener("pointerup", o), window.addEventListener("pointercancel", o);
+		}
+		let z = _(JSON.stringify(u.schema.value, null, 2)), B = _(""), V = !1;
+		E(u.schema, (e) => {
+			V || (z.value = JSON.stringify(e, null, 2));
+		}, { deep: !1 });
+		function H(e) {
+			V = !0, z.value = e.target.value;
+			try {
+				JSON.parse(z.value), B.value = "";
+			} catch {
+				B.value = "Invalid JSON";
+			}
+		}
+		function U() {
+			V = !1;
+		}
+		function W(e) {
+			if (!e || typeof e != "object") return e;
+			let t = e, n = Array.isArray(t.children) ? t.children.map(W) : t.children;
+			return t.type === "column" ? {
+				...t,
+				type: "stack",
+				direction: "column",
+				children: n
+			} : t.type === "row" ? {
+				...t,
+				type: "stack",
+				direction: "row",
+				children: n
+			} : n === t.children ? e : {
+				...t,
+				children: n
+			};
+		}
+		function te(e) {
+			let t = W(e);
+			return t.type === "page" ? t : {
+				id: "root",
+				type: "page",
+				style: {
+					gap: "16px",
+					padding: "24px"
+				},
+				children: [t]
+			};
+		}
+		function G() {
+			try {
+				let e = JSON.parse(z.value);
+				u.replaceSchema(te(e)), B.value = "", v.value = "editor";
+			} catch (e) {
+				B.value = e instanceof Error ? e.message : "Invalid JSON";
+			}
+		}
+		return (t, c) => (h(), i("div", {
+			ref_key: "rootRef",
+			ref: I,
+			class: d(["pb-builder", {
+				"pb-builder--outline-collapsed": A.value,
+				"pb-builder--props-collapsed": j.value,
+				"pb-builder--resizing": M.value !== null
+			}])
+		}, [
+			a("section", { class: d(["pb-builder__pane pb-builder__pane--tree", { "pb-builder__pane--rail": A.value }]) }, [A.value ? (h(), i("button", {
+				key: 1,
+				type: "button",
+				class: "pb-builder__rail-btn",
+				title: "Expand outline",
+				onClick: c[1] ||= (e) => A.value = !1
+			}, [s(C(P), {
+				name: "chevrons-right",
+				size: "s"
+			})])) : (h(), i(e, { key: 0 }, [a("header", Lt, [
+				s(C(P), {
+					name: "list",
+					size: "s"
+				}),
+				c[12] ||= a("span", { class: "pb-builder__pane-title" }, "Outline", -1),
+				a("button", {
+					type: "button",
+					class: "pb-builder__icon-btn",
+					title: "Collapse outline",
+					onClick: c[0] ||= (e) => A.value = !0
+				}, [s(C(P), {
+					name: "chevrons-left",
+					size: "s"
+				})])
+			]), a("div", Rt, [s(Me)])], 64))], 2),
+			a("div", {
+				class: d(["pb-builder__divider", { "pb-builder__divider--inert": A.value }]),
+				role: "separator",
+				onPointerdown: c[2] ||= (e) => R("outline", e)
+			}, null, 34),
+			a("section", zt, [s(C(ee), {
+				modelValue: v.value,
+				"onUpdate:modelValue": c[8] ||= (e) => v.value = e,
+				class: "pb-builder__tabs"
+			}, {
+				actions: D(() => [a("button", {
+					type: "button",
+					class: "pb-builder__icon-btn",
+					disabled: !C(u).canUndo.value,
+					title: "Undo (Ctrl+Z)",
+					onClick: c[3] ||= (e) => C(u).undo()
+				}, [s(C(P), {
+					name: "undo-2",
+					size: "s"
+				})], 8, Bt), a("button", {
+					type: "button",
+					class: "pb-builder__icon-btn",
+					disabled: !C(u).canRedo.value,
+					title: "Redo (Ctrl+Y)",
+					onClick: c[4] ||= (e) => C(u).redo()
+				}, [s(C(P), {
+					name: "redo-2",
+					size: "s"
+				})], 8, Vt)]),
+				default: D(() => [
+					s(C(L), { id: "editor" }, {
+						default: D(() => [a("span", Ht, [s(C(P), {
+							name: "pencil",
+							size: "s"
+						}), c[13] ||= o(" Editor ", -1)])]),
+						content: D(() => [s(it)]),
+						_: 1
+					}),
+					s(C(L), { id: "preview" }, {
+						default: D(() => [a("span", Ut, [s(C(P), {
+							name: "eye",
+							size: "s"
+						}), c[14] ||= o(" Preview ", -1)])]),
+						content: D(() => [a("div", Wt, [a("div", Gt, [a("div", Kt, [
+							a("button", {
+								type: "button",
+								class: d(["pb-builder__seg-btn", { "pb-builder__seg-btn--active": y.value === "full" }]),
+								role: "radio",
+								"aria-checked": y.value === "full",
+								title: "Full width",
+								onClick: c[5] ||= (e) => y.value = "full"
+							}, " Desktop ", 10, qt),
+							a("button", {
+								type: "button",
+								class: d(["pb-builder__seg-btn", { "pb-builder__seg-btn--active": y.value === "tablet" }]),
+								role: "radio",
+								"aria-checked": y.value === "tablet",
+								title: "768px",
+								onClick: c[6] ||= (e) => y.value = "tablet"
+							}, " Tablet · 768 ", 10, Jt),
+							a("button", {
+								type: "button",
+								class: d(["pb-builder__seg-btn", { "pb-builder__seg-btn--active": y.value === "mobile" }]),
+								role: "radio",
+								"aria-checked": y.value === "mobile",
+								title: "375px",
+								onClick: c[7] ||= (e) => y.value = "mobile"
+							}, " Mobile · 375 ", 10, Yt)
+						])]), a("div", Xt, [a("div", {
+							class: "pb-builder__preview-frame",
+							style: f(x.value)
+						}, [s(q, {
+							schema: C(u).schema.value,
+							config: n.config,
+							"asset-resolver": n.config?.assetResolver
+						}, null, 8, [
+							"schema",
+							"config",
+							"asset-resolver"
+						])], 4)])])]),
+						_: 1
+					}),
+					s(C(L), { id: "json" }, {
+						default: D(() => [a("span", Zt, [s(C(P), {
+							name: "code",
+							size: "s"
+						}), c[15] ||= o(" JSON ", -1)])]),
+						content: D(() => [a("div", Qt, [a("div", $t, [
+							c[16] ||= a("span", { class: "pb-builder__json-hint" }, "Paste or edit JSON, then click Apply", -1),
+							B.value ? (h(), i("span", en, S(B.value), 1)) : r("", !0),
+							a("button", {
+								class: "pb-builder__json-apply",
+								disabled: !!B.value,
+								onClick: G
+							}, " Apply → ", 8, tn)
+						]), a("textarea", {
+							class: "pb-builder__json-editor",
+							value: z.value,
+							spellcheck: "false",
+							onInput: H,
+							onBlur: U
+						}, null, 40, nn)])]),
+						_: 1
+					})
+				]),
+				_: 1
+			}, 8, ["modelValue"])]),
+			a("div", {
+				class: d(["pb-builder__divider", { "pb-builder__divider--inert": j.value }]),
+				role: "separator",
+				onPointerdown: c[9] ||= (e) => R("props", e)
+			}, null, 34),
+			a("section", { class: d(["pb-builder__pane pb-builder__pane--props", { "pb-builder__pane--rail": j.value }]) }, [j.value ? (h(), i("button", {
+				key: 1,
+				type: "button",
+				class: "pb-builder__rail-btn",
+				title: "Expand properties",
+				onClick: c[11] ||= (e) => j.value = !1
+			}, [s(C(P), {
+				name: "chevrons-left",
+				size: "s"
+			})])) : (h(), i(e, { key: 0 }, [a("button", {
+				type: "button",
+				class: "pb-builder__icon-btn pb-builder__icon-btn--corner",
+				title: "Collapse properties",
+				onClick: c[10] ||= (e) => j.value = !0
+			}, [s(C(P), {
+				name: "chevrons-right",
+				size: "s"
+			})]), s(It, { class: "pb-builder__pane-inner" })], 64))], 2)
+		], 2));
+	}
+}), [["__scopeId", "data-v-fb26dca9"]]);
+//#endregion
+export { un as CoarPageBuilder, q as CoarPageRenderer, V as isContainerNode, H as isElementAllowed };