@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/elements/builder/FormBuilder.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,680 @@
+import { joinElementType as e, splitElementType as t } from "../../../../definitions/shared/base.js";
+import { CardElementMetadataMap as n, CardElementStylesMap as r, getElementEditConfig as i } from "../../../../definitions/elements/index.js";
+import { cn as a } from "../../../../lib/utils.js";
+import o from "../../../ui/badge/Badge.js";
+import "../../../ui/badge/index.js";
+import s from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import ee from "../../../ui/card/Card.js";
+import te from "../../../ui/card/CardContent.js";
+import ne from "../../../ui/card/CardHeader.js";
+import re from "../../../ui/card/CardTitle.js";
+import "../../../ui/card/index.js";
+import ie from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import c from "../../../ui/label/Label.js";
+import "../../../ui/label/index.js";
+import ae from "../../../ui/separator/Separator.js";
+import "../../../ui/separator/index.js";
+import oe from "../../../ui/switch/Switch.js";
+import "../../../ui/switch/index.js";
+import se from "../../../ui/textarea/Textarea.js";
+import "../../../ui/textarea/index.js";
+import ce from "../../../ui/tooltip/Tooltip.js";
+import le from "../../../ui/tooltip/TooltipContent.js";
+import ue from "../../../ui/tooltip/TooltipProvider.js";
+import de from "../../../ui/tooltip/TooltipTrigger.js";
+import "../../../ui/tooltip/index.js";
+import { shouldRender as fe } from "../../../../engine/useDisplayConditions.js";
+import pe from "../../../../engine/ElementRenderer.js";
+import me from "../../../../engine/CardRenderer.js";
+import { useFormBuilder as he } from "../../../../stores/formBuilderStore.js";
+import { Fragment as l, Suspense as ge, computed as u, createBlock as _e, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as ve, onMounted as ye, openBlock as b, reactive as be, ref as x, renderList as S, toDisplayString as C, unref as w, useModel as xe, watch as Se, withCtx as T, withModifiers as E } from "vue";
+import { ArrowDown as Ce, ArrowUp as we, ChevronRight as Te, ChevronsLeftRight as Ee, GripHorizontal as D, Info as De, LayoutList as Oe, Maximize2 as ke, Minimize2 as Ae, PencilLine as je, Plus as Me, Trash2 as Ne, X as Pe } from "@lucide/vue";
+//#region src/components/compositions/elements/builder/FormBuilder.vue?vue&type=script&setup=true&lang.ts
+var Fe = ["data-element-name"], Ie = {
+	class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
+	"data-testid": "form-builder-palette"
+}, Le = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, Re = { class: "flex flex-col gap-0.5" }, ze = ["data-testid", "onClick"], Be = { class: "flex min-w-0 flex-col gap-0.5" }, Ve = { class: "font-medium" }, He = { class: "line-clamp-2 text-[10px] text-muted-foreground" }, Ue = {
+	key: 0,
+	class: "ml-5 flex flex-col gap-0.5 pb-1"
+}, We = ["data-testid", "onClick"], Ge = {
+	class: "flex flex-col gap-3 overflow-y-auto p-3",
+	"data-testid": "form-builder-canvas"
+}, Ke = { class: "flex flex-col gap-2" }, qe = {
+	key: 0,
+	class: "flex items-center gap-2 rounded-md border bg-muted/40 px-2.5 py-1.5 text-xs",
+	"data-testid": "form-builder-zoom-breadcrumb"
+}, Je = { class: "font-medium" }, Ye = { class: "flex items-center justify-between" }, Xe = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, Ze = { class: "flex items-center gap-2" }, Qe = { class: "flex items-center rounded-md border p-0.5" }, $e = { class: "rounded-md border border-dashed bg-background p-3" }, et = {
+	key: 0,
+	class: "py-6 text-center text-xs text-muted-foreground",
+	"data-testid": "form-builder-canvas-empty"
+}, tt = {
+	key: 0,
+	class: "py-6 text-center text-xs text-muted-foreground",
+	"data-testid": "form-builder-canvas-empty"
+}, nt = ["data-container-id"], rt = {
+	key: 0,
+	class: "col-span-full py-4 text-center text-muted-foreground"
+}, it = [
+	"data-element-block-index",
+	"data-testid",
+	"onClick"
+], at = ["onPointerdown"], ot = ["title", "onPointerdown"], st = { class: "block truncate font-medium leading-tight" }, ct = ["onClick"], lt = { class: "block truncate font-medium leading-tight" }, ut = ["data-container-id", "onClick"], dt = {
+	key: 0,
+	class: "col-span-full py-2 text-center text-[10px] text-muted-foreground"
+}, ft = [
+	"data-element-block-index",
+	"data-testid",
+	"onClick"
+], pt = ["onPointerdown"], mt = ["title", "onPointerdown"], ht = { class: "block truncate font-medium leading-tight" }, gt = {
+	key: 1,
+	class: "rounded-md border border-dashed bg-background p-2"
+}, _t = {
+	key: 0,
+	class: "py-6 text-center text-xs text-muted-foreground",
+	"data-testid": "form-builder-canvas-empty"
+}, vt = ["data-container-id"], yt = [
+	"data-element-block-index",
+	"data-testid",
+	"onClick"
+], bt = ["onPointerdown"], xt = ["title", "onPointerdown"], St = ["onClick"], Ct = {
+	key: 0,
+	class: "flex items-start justify-center border-l pt-3 overflow-hidden",
+	"data-testid": "form-builder-inspector"
+}, wt = {
+	class: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-muted-foreground",
+	tabindex: "0",
+	"aria-label": "Select an element on the canvas to edit its properties",
+	"data-testid": "form-builder-inspector-empty"
+}, Tt = {
+	key: 1,
+	class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
+	"data-testid": "form-builder-inspector"
+}, Et = { class: "flex items-center justify-between" }, Dt = {
+	class: "flex flex-col gap-3",
+	"data-testid": "form-builder-inspector-fields"
+}, Ot = {
+	key: 0,
+	class: "flex items-center justify-between rounded border bg-background px-2 py-1"
+}, kt = {
+	key: 1,
+	class: "flex flex-col gap-1"
+}, At = [
+	"id",
+	"value",
+	"data-testid",
+	"onChange"
+], jt = ["value"], Mt = {
+	key: 2,
+	class: "flex flex-col gap-1"
+}, Nt = {
+	key: 3,
+	class: "flex flex-col gap-1"
+}, Pt = { class: "flex flex-col gap-1" }, Ft = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" }, It = { class: "flex items-center gap-1" }, Lt = /* @__PURE__ */ g({
+	__name: "FormBuilder",
+	props: /* @__PURE__ */ _({
+		modelValue: {},
+		builderId: {},
+		label: {},
+		name: {},
+		item: { default: () => ({}) },
+		classList: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(g) {
+		let _ = g, Lt = xe(g, "modelValue"), Rt = 0;
+		function zt() {
+			return Rt += 1, `form-builder-${Date.now()}-${Rt}`;
+		}
+		let Bt = x(zt()), Vt = u(() => _.builderId ?? Bt.value), O = x("list"), k = x(null), A = u(() => k.value !== null), Ht = u(() => k.value ? j.schema.value.elements[k.value] ?? null : null);
+		function Ut(e) {
+			k.value = e, j.select("element", e);
+		}
+		function Wt() {
+			k.value = null;
+		}
+		let j = he(Vt.value);
+		function Gt(e) {
+			if (typeof e != "object" || !e) return !1;
+			let t = e;
+			return typeof t.rootCardId == "string" && typeof t.cards == "object" && t.cards !== null && typeof t.elements == "object" && t.elements !== null;
+		}
+		ye(() => {
+			let e = Lt.value;
+			Gt(e) && j.loadSchema(e);
+		}), Se(() => j.schema.value, (e) => {
+			Lt.value = e;
+		}, { deep: !0 });
+		let M = u(() => j.schema.value.cards[j.schema.value.rootCardId]), N = u(() => j.schema.value.rootCardId), P = u(() => k.value ?? N.value), F = u(() => k.value ? R(k.value) : I.value), I = u(() => {
+			let e = M.value;
+			return e ? e.elementList ?? [] : [];
+		});
+		function L(e) {
+			let t = j.schema.value.elements[e];
+			return t ? String(t.type ?? "").startsWith("card.") : !1;
+		}
+		function R(e) {
+			let t = j.schema.value, n = t.cards[e];
+			if (n) return n.elementList ?? [];
+			let r = t.elements[e];
+			return r ? r.elementList ?? [] : [];
+		}
+		function Kt(e) {
+			let t = j.schema.value.elements[e];
+			if (!L(e)) return t;
+			let n = (t.elementList ?? []).map((e) => j.schema.value.elements[e]).filter(Boolean);
+			return {
+				...t,
+				nestedElements: n
+			};
+		}
+		let qt = u(() => Object.entries(n).map(([e, t]) => ({
+			type: e,
+			meta: t,
+			styles: r[e]
+		}))), z = be({});
+		function Jt(e) {
+			z[e] = !z[e];
+		}
+		let B = u(() => {
+			let e = j.selection.value;
+			return e.kind !== "element" || !e.id ? null : j.schema.value.elements[e.id] ?? null;
+		}), V = u(() => {
+			let e = j.selection.value;
+			if (e.kind !== "element" || !e.id || I.value.includes(e.id)) return N.value;
+			for (let [t, n] of Object.entries(j.schema.value.elements)) {
+				let r = n;
+				if (typeof r.type == "string" && r.type.startsWith("card.") && (r.elementList ?? []).includes(e.id)) return t;
+			}
+			return N.value;
+		}), Yt = u(() => R(V.value)), H = u(() => {
+			let e = j.selection.value;
+			return e.kind !== "element" || !e.id ? -1 : Yt.value.indexOf(e.id);
+		}), Xt = u(() => {
+			let e = Yt.value;
+			return H.value >= 0 && H.value < e.length - 1;
+		});
+		function Zt(e, t) {
+			let n = j.selection.value, r;
+			r = k.value ? k.value : n.kind === "element" && n.id && L(n.id) ? n.id : j.schema.value.rootCardId;
+			let i = j.addElement(r, `${e}.${t}`);
+			j.select("element", i);
+		}
+		function U(e) {
+			j.select("element", e);
+		}
+		function Qt() {
+			H.value <= 0 || j.reorderElement(V.value, H.value, H.value - 1);
+		}
+		function $t() {
+			Xt.value && j.reorderElement(V.value, H.value, H.value + 1);
+		}
+		function en() {
+			let e = j.selection.value;
+			e.kind === "element" && e.id ? j.removeElement(e.id) : e.kind === "card" && e.id && j.removeCard(e.id);
+		}
+		function tn() {
+			j.select(null, null);
+		}
+		function nn(e) {
+			let t = j.selection.value;
+			t.kind === "element" && t.id && j.updateElement(t.id, e);
+		}
+		let rn = u(() => {
+			let e = B.value;
+			if (!e) return [];
+			let n = i(e.type);
+			if (!n) return [];
+			let { style: r } = t(e.type), a = {
+				...e,
+				style: r
+			};
+			return Object.entries(n).filter(([, e]) => {
+				let t = e.type;
+				return t?.startsWith("configuration-block.") || t?.startsWith("builder.") || t?.startsWith("code.") ? !1 : fe(e, a);
+			}).map(([e, t]) => ({
+				fieldName: e,
+				spec: t
+			}));
+		});
+		function W(e) {
+			let n = B.value;
+			return e === "style" && n?.type ? t(String(n.type)).style : n?.[e] ?? "";
+		}
+		function G(n, r) {
+			if (n === "style") {
+				let n = B.value;
+				if (!n) return;
+				let { category: i } = t(n.type);
+				nn({ type: e(i, String(r)) });
+				return;
+			}
+			nn({ [n]: r });
+		}
+		let K = x(null), q = x(null), J = x(null), Y = x(null);
+		function X(e) {
+			let t = j.schema.value.elements[e]?.colSpan;
+			return typeof t == "number" && t >= 1 && t <= 4 ? t : 4;
+		}
+		function Z(e) {
+			return { gridColumn: `span ${X(e)}` };
+		}
+		function an(e, t, n, r, i) {
+			if (i.button !== 0) return;
+			i.preventDefault(), i.stopPropagation(), j.select("element", t);
+			let a = i.target;
+			try {
+				a.setPointerCapture(i.pointerId);
+			} catch {}
+			q.value = {
+				mode: e,
+				elementId: t,
+				fromContainerId: n,
+				fromIndex: r,
+				startClientX: i.clientX,
+				startColSpan: X(t),
+				containerWidth: K.value?.getBoundingClientRect().width ?? 0,
+				pointerId: i.pointerId,
+				captureTarget: a
+			}, e === "reorder" && (J.value = r, Y.value = n), window.addEventListener("pointermove", sn), window.addEventListener("pointerup", $), window.addEventListener("pointercancel", $);
+		}
+		function Q(e, t, n, r) {
+			an("reorder", e, t, n, r);
+		}
+		function on(e, t) {
+			an("resize", e, N.value, -1, t);
+		}
+		function sn(e) {
+			let t = q.value;
+			if (!t) return;
+			if (t.mode === "resize") {
+				let n = e.clientX - t.startClientX, r = (t.containerWidth > 0 ? t.containerWidth : 400) / 4, i = Math.round(n / r), a = Math.max(1, Math.min(4, t.startColSpan + i));
+				j.updateElement(t.elementId, { colSpan: a });
+				return;
+			}
+			let n = document.elementFromPoint(e.clientX, e.clientY);
+			if (!n) return;
+			let r = n.closest("[data-container-id]"), i = r?.dataset.containerId ?? null;
+			Y.value = i;
+			let a = n.closest("[data-element-block-index]");
+			if (a && r && !r.contains(a) && (a = null), a) {
+				let e = Number.parseInt(a.dataset.elementBlockIndex ?? "-1", 10);
+				e >= 0 && (J.value = e);
+			} else J.value = i ? R(i).length : null;
+		}
+		function $(e) {
+			let t = q.value;
+			if (!t) {
+				cn();
+				return;
+			}
+			try {
+				t.captureTarget.releasePointerCapture(t.pointerId);
+			} catch {}
+			if (t.mode === "reorder" && J.value !== null) {
+				let e = Y.value ?? t.fromContainerId;
+				e === t.fromContainerId ? J.value !== t.fromIndex && j.reorderElement(t.fromContainerId, t.fromIndex, J.value) : j.moveElement(t.fromContainerId, e, t.elementId, J.value);
+			}
+			cn();
+		}
+		function cn() {
+			q.value = null, J.value = null, Y.value = null, window.removeEventListener("pointermove", sn), window.removeEventListener("pointerup", $), window.removeEventListener("pointercancel", $);
+		}
+		ve(() => {
+			cn();
+		});
+		let ln = u(() => B.value ? "220px 1fr 280px" : "220px 1fr 2rem");
+		return (e, t) => (b(), f("div", {
+			class: v(w(a)("gxp-form-builder grid gap-3 rounded-lg border bg-card", _.classList)),
+			style: y({
+				gridTemplateColumns: ln.value,
+				minHeight: "24rem",
+				transition: "grid-template-columns 200ms ease"
+			}),
+			"data-testid": "form-builder",
+			"data-element-name": _.name ?? void 0
+		}, [
+			p("aside", Ie, [p("h4", Le, C(_.label ?? "Element palette"), 1), p("div", Re, [(b(!0), f(l, null, S(qt.value, (e) => (b(), f("div", { key: e.type }, [p("button", {
+				type: "button",
+				class: "flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent/30",
+				"data-testid": `form-builder-palette-${e.type}`,
+				onClick: (t) => Jt(e.type)
+			}, [h(w(Te), { class: v(["mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-150", z[e.type] ? "rotate-90" : ""]) }, null, 8, ["class"]), p("span", Be, [p("span", Ve, C(e.meta.displayLabel), 1), p("span", He, C(e.meta.description), 1)])], 8, ze), z[e.type] ? (b(), f("div", Ue, [(b(!0), f(l, null, S(e.styles, (t) => (b(), f("button", {
+				key: t.value,
+				type: "button",
+				class: "flex items-center gap-1.5 rounded border bg-background px-2 py-1 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40",
+				"data-testid": `form-builder-palette-${e.type}-${t.value}`,
+				onClick: (n) => Zt(e.type, t.value)
+			}, [h(w(Me), { class: "h-3 w-3 shrink-0 text-muted-foreground" }), m(" " + C(t.label), 1)], 8, We))), 128))])) : d("", !0)]))), 128))])]),
+			p("section", Ge, [p("header", Ke, [A.value ? (b(), f("div", qe, [
+				p("button", {
+					type: "button",
+					class: "flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground",
+					"data-testid": "form-builder-zoom-out",
+					onClick: Wt
+				}, [h(w(Ae), { class: "h-3.5 w-3.5" }), t[10] ||= p("span", null, "Full form", -1)]),
+				t[11] ||= p("span", { class: "text-muted-foreground/50" }, "/", -1),
+				p("span", Je, C(Ht.value?.label ?? "Card"), 1)
+			])) : d("", !0), p("div", Ye, [p("h4", Xe, C(O.value === "inline" ? "Canvas" : A.value ? "Card preview" : "Preview"), 1), p("div", Ze, [p("div", Qe, [p("button", {
+				type: "button",
+				class: v(["rounded px-1.5 py-0.5 transition-colors", O.value === "list" ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:text-foreground"]),
+				title: "List mode — separate preview and element list",
+				"data-testid": "form-builder-mode-list",
+				onClick: t[0] ||= (e) => O.value = "list"
+			}, [h(w(Oe), { class: "h-3.5 w-3.5" })], 2), p("button", {
+				type: "button",
+				class: v(["rounded px-1.5 py-0.5 transition-colors", O.value === "inline" ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:text-foreground"]),
+				title: "Inline mode — live interactive canvas",
+				"data-testid": "form-builder-mode-inline",
+				onClick: t[1] ||= (e) => O.value = "inline"
+			}, [h(w(je), { class: "h-3.5 w-3.5" })], 2)]), h(w(o), {
+				variant: "outline",
+				class: "font-mono text-[10px]"
+			}, {
+				default: T(() => [...t[12] ||= [m(" builder/form-builder ", -1)]]),
+				_: 1
+			})])])]), O.value === "list" ? (b(), f(l, { key: 0 }, [p("div", $e, [A.value && k.value ? (b(), f(l, { key: 0 }, [(b(), _e(ge, null, {
+				default: T(() => [h(pe, {
+					element: Kt(k.value),
+					item: _.item
+				}, null, 8, ["element", "item"])]),
+				_: 1
+			})), F.value.length ? d("", !0) : (b(), f("p", et, " Click an element in the palette to add it. "))], 64)) : M.value ? (b(), f(l, { key: 1 }, [h(me, {
+				card: M.value,
+				item: _.item,
+				elements: w(j).schema.value.elements,
+				cards: w(j).schema.value.cards
+			}, null, 8, [
+				"card",
+				"item",
+				"elements",
+				"cards"
+			]), I.value.length === 0 ? (b(), f("p", tt, " Click an element in the palette to add it. ")) : d("", !0)], 64)) : d("", !0)]), p("div", {
+				ref_key: "canvasEl",
+				ref: K,
+				class: "grid gap-2 text-xs",
+				style: { "grid-template-columns": "repeat(4, minmax(0, 1fr))" },
+				"data-container-id": P.value,
+				"data-testid": "form-builder-canvas-list"
+			}, [F.value.length ? d("", !0) : (b(), f("p", rt, " Add elements from the palette. ")), (b(!0), f(l, null, S(F.value, (e, n) => (b(), f("div", {
+				key: e,
+				"data-element-block-index": n,
+				"data-testid": `form-builder-row-${e}`,
+				class: v(["group relative cursor-pointer select-none rounded border bg-background transition-colors", [
+					L(e) ? "px-2 pb-2 pt-5" : "px-2 pb-2 pt-5 text-center",
+					w(j).selection.value.kind === "element" && w(j).selection.value.id === e ? "border-primary bg-accent/30" : "hover:border-primary/50",
+					q.value?.elementId === e && q.value.mode === "reorder" ? "opacity-40 ring-2 ring-primary" : "",
+					Y.value === P.value && J.value === n && q.value?.mode === "reorder" && q.value?.elementId !== e ? "ring-2 ring-primary/60 bg-primary/5" : ""
+				]]),
+				style: y(Z(e)),
+				onClick: (t) => U(e)
+			}, [
+				p("span", {
+					class: "absolute left-1/2 top-0.5 -translate-x-1/2 cursor-grab touch-none rounded-sm bg-muted/60 px-1 py-0.5 opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing",
+					title: "Drag to reorder",
+					onClick: t[2] ||= E(() => {}, ["stop"]),
+					onPointerdown: E((t) => Q(e, P.value, n, t), ["stop"])
+				}, [h(w(D), { class: "h-3 w-3 text-muted-foreground" })], 40, at),
+				p("span", {
+					class: "absolute right-0.5 top-0.5 cursor-ew-resize touch-none rounded-sm bg-muted/60 px-1 py-0.5 opacity-0 transition-opacity group-hover:opacity-100",
+					title: `Width: ${X(e)}/4 — drag to resize`,
+					onClick: t[3] ||= E(() => {}, ["stop"]),
+					onPointerdown: E((t) => on(e, t), ["stop"])
+				}, [h(w(Ee), { class: "h-3 w-3 text-muted-foreground" })], 40, ot),
+				L(e) ? (b(), f(l, { key: 1 }, [
+					p("button", {
+						type: "button",
+						class: v(["absolute left-0.5 top-0.5 z-10 flex h-5 w-5 items-center justify-center rounded bg-muted/60 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 hover:bg-muted hover:text-foreground", { "!opacity-100": w(j).selection.value.kind === "element" && w(j).selection.value.id === e }]),
+						title: "Zoom into this card",
+						"data-testid": "form-builder-zoom-in",
+						onClick: E((t) => Ut(e), ["stop"])
+					}, [h(w(ke), { class: "h-3 w-3" })], 10, ct),
+					p("div", null, [p("span", lt, C(w(j).schema.value.elements[e]?.label ?? "(unnamed)"), 1), h(w(o), {
+						variant: "outline",
+						class: "mt-1 font-mono text-[9px]"
+					}, {
+						default: T(() => [m(C(w(j).schema.value.elements[e]?.type), 1)]),
+						_: 2
+					}, 1024)]),
+					p("div", {
+						class: "mt-1.5 grid gap-1 rounded border border-dashed bg-muted/20 p-1",
+						style: { "grid-template-columns": "repeat(4, minmax(0, 1fr))" },
+						"data-container-id": e,
+						onClick: E((t) => U(e), ["stop"])
+					}, [R(e).length ? d("", !0) : (b(), f("p", dt, " Drop elements here — or select & use palette ")), (b(!0), f(l, null, S(R(e), (n, r) => (b(), f("div", {
+						key: n,
+						"data-element-block-index": r,
+						"data-testid": `form-builder-row-${n}`,
+						class: v(["group/child relative cursor-pointer select-none rounded border bg-background px-1.5 pb-1 pt-4 text-center text-[10px] transition-colors", [
+							w(j).selection.value.kind === "element" && w(j).selection.value.id === n ? "border-primary bg-accent/30" : "hover:border-primary/50",
+							q.value?.elementId === n && q.value.mode === "reorder" ? "opacity-40 ring-2 ring-primary" : "",
+							Y.value === e && J.value === r && q.value?.mode === "reorder" && q.value?.elementId !== n ? "ring-2 ring-primary/60 bg-primary/5" : ""
+						]]),
+						style: y(Z(n)),
+						onClick: E((e) => U(n), ["stop"])
+					}, [
+						p("span", {
+							class: "absolute left-1/2 top-0.5 -translate-x-1/2 cursor-grab touch-none rounded-sm bg-muted/60 px-1 py-0.5 opacity-0 transition-opacity group-hover/child:opacity-100 active:cursor-grabbing",
+							title: "Drag to reorder",
+							onClick: t[4] ||= E(() => {}, ["stop"]),
+							onPointerdown: E((t) => Q(n, e, r, t), ["stop"])
+						}, [h(w(D), { class: "h-3 w-3 text-muted-foreground" })], 40, pt),
+						p("span", {
+							class: "absolute right-0.5 top-0.5 cursor-ew-resize touch-none rounded-sm bg-muted/60 px-1 py-0.5 opacity-0 transition-opacity group-hover/child:opacity-100",
+							title: `Width: ${X(n)}/4 — drag to resize`,
+							onClick: t[5] ||= E(() => {}, ["stop"]),
+							onPointerdown: E((e) => on(n, e), ["stop"])
+						}, [h(w(Ee), { class: "h-3 w-3 text-muted-foreground" })], 40, mt),
+						p("span", ht, C(w(j).schema.value.elements[n]?.label ?? "(unnamed)"), 1),
+						h(w(o), {
+							variant: "secondary",
+							class: "mt-0.5 font-mono text-[9px]"
+						}, {
+							default: T(() => [m(C(w(j).schema.value.elements[n]?.type), 1)]),
+							_: 2
+						}, 1024)
+					], 14, ft))), 128))], 8, ut)
+				], 64)) : (b(), f(l, { key: 0 }, [p("span", st, C(w(j).schema.value.elements[e]?.label ?? "(unnamed)"), 1), h(w(o), {
+					variant: "secondary",
+					class: "mt-1 font-mono text-[9px]"
+				}, {
+					default: T(() => [m(C(w(j).schema.value.elements[e]?.type), 1)]),
+					_: 2
+				}, 1024)], 64))
+			], 14, it))), 128))], 8, nt)], 64)) : (b(), f("div", gt, [F.value.length === 0 ? (b(), f("p", _t, " Click an element in the palette to add it. ")) : (b(), f("div", {
+				key: 1,
+				ref_key: "canvasEl",
+				ref: K,
+				class: "grid gap-3",
+				style: { "grid-template-columns": "repeat(4, minmax(0, 1fr))" },
+				"data-container-id": P.value,
+				"data-testid": "form-builder-canvas-list"
+			}, [(b(!0), f(l, null, S(F.value, (e, n) => (b(), f("div", {
+				key: e,
+				"data-element-block-index": n,
+				"data-testid": `form-builder-row-${e}`,
+				class: v(["group relative cursor-pointer rounded border pt-8 px-1.5 pb-1.5 transition-colors", [
+					w(j).selection.value.kind === "element" && w(j).selection.value.id === e ? "border-primary ring-1 ring-primary/30" : "border-transparent hover:border-primary/40",
+					q.value?.elementId === e && q.value.mode === "reorder" ? "opacity-40 ring-2 ring-primary" : "",
+					Y.value === P.value && J.value === n && q.value?.mode === "reorder" && q.value?.elementId !== e ? "ring-2 ring-primary/60 bg-primary/5" : ""
+				]]),
+				style: y(Z(e)),
+				onClick: (t) => U(e)
+			}, [
+				p("span", {
+					class: "absolute left-1/2 top-1 z-10 -translate-x-1/2 cursor-grab touch-none rounded-sm bg-muted/80 px-1 py-0.5 opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing",
+					title: "Drag to reorder",
+					onClick: t[6] ||= E(() => {}, ["stop"]),
+					onPointerdown: E((t) => Q(e, P.value, n, t), ["stop"])
+				}, [h(w(D), { class: "h-3 w-3 text-muted-foreground" })], 40, bt),
+				p("span", {
+					class: "absolute right-1 top-1 z-10 cursor-ew-resize touch-none rounded-sm bg-muted/80 px-1 py-0.5 opacity-0 transition-opacity group-hover:opacity-100",
+					title: `Width: ${X(e)}/4 — drag to resize`,
+					onClick: t[7] ||= E(() => {}, ["stop"]),
+					onPointerdown: E((t) => on(e, t), ["stop"])
+				}, [h(w(Ee), { class: "h-3 w-3 text-muted-foreground" })], 40, xt),
+				L(e) ? (b(), f("button", {
+					key: 0,
+					type: "button",
+					class: v(["absolute left-1 top-1 z-10 flex h-5 w-5 items-center justify-center rounded bg-muted/80 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 hover:bg-muted hover:text-foreground", { "!opacity-100": w(j).selection.value.kind === "element" && w(j).selection.value.id === e }]),
+					title: "Zoom into this card",
+					"data-testid": "form-builder-zoom-in",
+					onClick: E((t) => Ut(e), ["stop"])
+				}, [h(w(ke), { class: "h-3.5 w-3.5" })], 10, St)) : d("", !0),
+				h(pe, {
+					element: Kt(e),
+					item: _.item
+				}, null, 8, ["element", "item"])
+			], 14, yt))), 128))], 8, vt))]))]),
+			B.value ? (b(), f("aside", Tt, [p("header", Et, [t[14] ||= p("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1), h(w(s), {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Clear selection",
+				onClick: tn
+			}, {
+				default: T(() => [h(w(Pe), { class: "h-3.5 w-3.5" })]),
+				_: 1
+			})]), p("div", Dt, [h(w(ee), { class: "border-dashed" }, {
+				default: T(() => [h(w(ne), { class: "py-2" }, {
+					default: T(() => [h(w(re), { class: "font-mono text-xs uppercase tracking-wide" }, {
+						default: T(() => [m(C(B.value.type), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}), h(w(te), { class: "flex flex-col gap-2 pb-3" }, {
+					default: T(() => [
+						(b(!0), f(l, null, S(rn.value, (e) => (b(), f(l, { key: e.fieldName }, [e.spec.type?.toString().startsWith("boolean.") ? (b(), f("div", Ot, [h(w(c), {
+							for: `fb-${e.fieldName}`,
+							class: "cursor-pointer"
+						}, {
+							default: T(() => [m(C(e.spec.label ?? e.fieldName), 1)]),
+							_: 2
+						}, 1032, ["for"]), h(w(oe), {
+							id: `fb-${e.fieldName}`,
+							"model-value": !!W(e.fieldName),
+							"data-testid": `form-builder-inspector-${e.fieldName}`,
+							"onUpdate:modelValue": (t) => G(e.fieldName, t)
+						}, null, 8, [
+							"id",
+							"model-value",
+							"data-testid",
+							"onUpdate:modelValue"
+						])])) : e.spec.type?.toString().startsWith("option-select.") ? (b(), f("div", kt, [h(w(c), { for: `fb-${e.fieldName}` }, {
+							default: T(() => [m(C(e.spec.label ?? e.fieldName), 1)]),
+							_: 2
+						}, 1032, ["for"]), p("select", {
+							id: `fb-${e.fieldName}`,
+							class: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus:outline-none focus:ring-1 focus:ring-ring",
+							value: String(W(e.fieldName) ?? ""),
+							"data-testid": `form-builder-inspector-${e.fieldName}`,
+							onChange: (t) => G(e.fieldName, t.target.value)
+						}, [(b(!0), f(l, null, S(e.spec.selectOptions ?? [], (e) => (b(), f("option", {
+							key: e.value,
+							value: e.value
+						}, C(e.label), 9, jt))), 128))], 40, At)])) : e.spec.type === "input.textarea" ? (b(), f("div", Mt, [h(w(c), { for: `fb-${e.fieldName}` }, {
+							default: T(() => [m(C(e.spec.label ?? e.fieldName), 1)]),
+							_: 2
+						}, 1032, ["for"]), h(w(se), {
+							id: `fb-${e.fieldName}`,
+							"model-value": String(W(e.fieldName) ?? ""),
+							"data-testid": `form-builder-inspector-${e.fieldName}`,
+							onInput: (t) => G(e.fieldName, t.target.value)
+						}, null, 8, [
+							"id",
+							"model-value",
+							"data-testid",
+							"onInput"
+						])])) : (b(), f("div", Nt, [h(w(c), { for: `fb-${e.fieldName}` }, {
+							default: T(() => [m(C(e.spec.label ?? e.fieldName), 1)]),
+							_: 2
+						}, 1032, ["for"]), h(w(ie), {
+							id: `fb-${e.fieldName}`,
+							"model-value": String(W(e.fieldName) ?? ""),
+							"data-testid": `form-builder-inspector-${e.fieldName}`,
+							onInput: (t) => G(e.fieldName, t.target.value)
+						}, null, 8, [
+							"id",
+							"model-value",
+							"data-testid",
+							"onInput"
+						])]))], 64))), 128)),
+						rn.value.length ? (b(), _e(w(ae), {
+							key: 0,
+							class: "my-1"
+						})) : d("", !0),
+						p("div", Pt, [h(w(c), { for: "fb-help" }, {
+							default: T(() => [...t[15] ||= [m("Help text", -1)]]),
+							_: 1
+						}), h(w(se), {
+							id: "fb-help",
+							"model-value": String(W("helpText") ?? ""),
+							"data-testid": "form-builder-inspector-help",
+							onInput: t[8] ||= (e) => G("helpText", e.target.value)
+						}, null, 8, ["model-value"])]),
+						p("div", Ft, [h(w(c), { for: "fb-disabled" }, {
+							default: T(() => [...t[16] ||= [m("Disabled", -1)]]),
+							_: 1
+						}), h(w(oe), {
+							id: "fb-disabled",
+							"model-value": !!W("disabled"),
+							"onUpdate:modelValue": t[9] ||= (e) => G("disabled", e)
+						}, null, 8, ["model-value"])])
+					]),
+					_: 1
+				})]),
+				_: 1
+			}), p("div", It, [
+				h(w(s), {
+					variant: "outline",
+					size: "sm",
+					disabled: H.value <= 0,
+					"data-testid": "form-builder-move-up",
+					onClick: Qt
+				}, {
+					default: T(() => [h(w(we), { class: "h-3.5 w-3.5" })]),
+					_: 1
+				}, 8, ["disabled"]),
+				h(w(s), {
+					variant: "outline",
+					size: "sm",
+					disabled: !Xt.value,
+					"data-testid": "form-builder-move-down",
+					onClick: $t
+				}, {
+					default: T(() => [h(w(Ce), { class: "h-3.5 w-3.5" })]),
+					_: 1
+				}, 8, ["disabled"]),
+				h(w(s), {
+					variant: "destructive",
+					size: "sm",
+					class: "ml-auto",
+					"data-testid": "form-builder-remove",
+					onClick: en
+				}, {
+					default: T(() => [h(w(Ne), { class: "h-3.5 w-3.5" }), t[17] ||= m(" Remove ", -1)]),
+					_: 1
+				})
+			])])])) : (b(), f("aside", Ct, [h(w(ue), null, {
+				default: T(() => [h(w(ce), null, {
+					default: T(() => [h(w(de), { "as-child": "" }, {
+						default: T(() => [p("span", wt, [h(w(De), { class: "h-4 w-4" })])]),
+						_: 1
+					}), h(w(le), { side: "left" }, {
+						default: T(() => [...t[13] ||= [m(" Select an element on the canvas to edit its properties ", -1)]]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})]))
+		], 14, Fe));
+	}
+});
+//#endregion
+export { Lt as default };
+
+//# sourceMappingURL=FormBuilder.vue_vue_type_script_setup_true_lang.js.map