@gxp-dev/mod-ui 2.0.10 → 2.0.14

package/dist/chunks/FormBuilder-D314W1mI.js

@@ -0,0 +1,663 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { a as t, d as n, f as r, i, l as a, n as ee, o as te, u as ne } from "./formBuilderStore-D-G-ujKs.js";
+import { a as re, n as ie, t as ae } from "./elements-Du8w4W8Q.js";
+import { n as oe } from "./utils-DAErOi9O.js";
+import { n as o } from "./badge-4iQG4kuk.js";
+import { n as s } from "./button-BAwcISlK.js";
+import { n as se, o as ce, r as le, s as ue } from "./card-DAfWnvro.js";
+import { t as de } from "./input-tw5ZQGKQ.js";
+import { n as c } from "./label-I5voJX5E.js";
+import { r as fe } from "./switch--qhuMfjn.js";
+import { t as pe } from "./textarea-lgNOfYRH.js";
+import { t as me } from "./useDisplayConditions-Dopsa2vu.js";
+import { t as he } from "./ElementRenderer-DUhlfnFD.js";
+import { t as ge } from "./CardRenderer-N4R08uDO.js";
+import { Fragment as l, Suspense as _e, computed as u, createBlock as ve, 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 ye, onMounted as be, openBlock as b, reactive as xe, ref as x, renderList as S, toDisplayString as C, unref as w, useModel as Se, watch as Ce, withCtx as T, withModifiers as E } from "vue";
+import { ArrowDown as we, ArrowUp as Te, ChevronRight as Ee, ChevronsLeftRight as D, GripHorizontal as O, 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" }, k = /* @__PURE__ */ g({
+	__name: "FormBuilder",
+	props: /* @__PURE__ */ _({
+		modelValue: {},
+		builderId: {},
+		label: {},
+		name: {},
+		item: { default: () => ({}) },
+		classList: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let g = e, _ = Se(e, "modelValue"), k = 0;
+		function Lt() {
+			return k += 1, `form-builder-${Date.now()}-${k}`;
+		}
+		let Rt = x(Lt()), zt = u(() => g.builderId ?? Rt.value), A = x("list"), j = x(null), M = u(() => j.value !== null), Bt = u(() => j.value ? N.schema.value.elements[j.value] ?? null : null);
+		function Vt(e) {
+			j.value = e, N.select("element", e);
+		}
+		function Ht() {
+			j.value = null;
+		}
+		let N = ee(zt.value);
+		function Ut(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;
+		}
+		be(() => {
+			let e = _.value;
+			Ut(e) && N.loadSchema(e);
+		}), Ce(() => N.schema.value, (e) => {
+			_.value = e;
+		}, { deep: !0 });
+		let P = u(() => N.schema.value.cards[N.schema.value.rootCardId]), F = u(() => N.schema.value.rootCardId), I = u(() => j.value ?? F.value), L = u(() => j.value ? B(j.value) : R.value), R = u(() => {
+			let e = P.value;
+			return e ? e.elementList ?? [] : [];
+		});
+		function z(e) {
+			let t = N.schema.value.elements[e];
+			return t ? String(t.type ?? "").startsWith("card.") : !1;
+		}
+		function B(e) {
+			let t = N.schema.value, n = t.cards[e];
+			if (n) return n.elementList ?? [];
+			let r = t.elements[e];
+			return r ? r.elementList ?? [] : [];
+		}
+		function Wt(e) {
+			let t = N.schema.value.elements[e];
+			if (!z(e)) return t;
+			let n = (t.elementList ?? []).map((e) => N.schema.value.elements[e]).filter(Boolean);
+			return {
+				...t,
+				nestedElements: n
+			};
+		}
+		let Gt = u(() => Object.entries(ae).map(([e, t]) => ({
+			type: e,
+			meta: t,
+			styles: ie[e]
+		}))), V = xe({});
+		function Kt(e) {
+			V[e] = !V[e];
+		}
+		let H = u(() => {
+			let e = N.selection.value;
+			return e.kind !== "element" || !e.id ? null : N.schema.value.elements[e.id] ?? null;
+		}), U = u(() => {
+			let e = N.selection.value;
+			if (e.kind !== "element" || !e.id || R.value.includes(e.id)) return F.value;
+			for (let [t, n] of Object.entries(N.schema.value.elements)) {
+				let r = n;
+				if (typeof r.type == "string" && r.type.startsWith("card.") && (r.elementList ?? []).includes(e.id)) return t;
+			}
+			return F.value;
+		}), qt = u(() => B(U.value)), W = u(() => {
+			let e = N.selection.value;
+			return e.kind !== "element" || !e.id ? -1 : qt.value.indexOf(e.id);
+		}), Jt = u(() => {
+			let e = qt.value;
+			return W.value >= 0 && W.value < e.length - 1;
+		});
+		function Yt(e, t) {
+			let n = N.selection.value, r;
+			r = j.value ? j.value : n.kind === "element" && n.id && z(n.id) ? n.id : N.schema.value.rootCardId;
+			let i = N.addElement(r, `${e}.${t}`);
+			N.select("element", i);
+		}
+		function G(e) {
+			N.select("element", e);
+		}
+		function Xt() {
+			W.value <= 0 || N.reorderElement(U.value, W.value, W.value - 1);
+		}
+		function Zt() {
+			Jt.value && N.reorderElement(U.value, W.value, W.value + 1);
+		}
+		function Qt() {
+			let e = N.selection.value;
+			e.kind === "element" && e.id ? N.removeElement(e.id) : e.kind === "card" && e.id && N.removeCard(e.id);
+		}
+		function $t() {
+			N.select(null, null);
+		}
+		function en(e) {
+			let t = N.selection.value;
+			t.kind === "element" && t.id && N.updateElement(t.id, e);
+		}
+		let tn = u(() => {
+			let e = H.value;
+			if (!e) return [];
+			let t = re(e.type);
+			if (!t) return [];
+			let { style: n } = r(e.type), i = {
+				...e,
+				style: n
+			};
+			return Object.entries(t).filter(([, e]) => {
+				let t = e.type;
+				return t?.startsWith("configuration-block.") || t?.startsWith("builder.") || t?.startsWith("code.") ? !1 : me(e, i);
+			}).map(([e, t]) => ({
+				fieldName: e,
+				spec: t
+			}));
+		});
+		function K(e) {
+			let t = H.value;
+			return e === "style" && t?.type ? r(String(t.type)).style : t?.[e] ?? "";
+		}
+		function q(e, t) {
+			if (e === "style") {
+				let e = H.value;
+				if (!e) return;
+				let { category: i } = r(e.type);
+				en({ type: n(i, String(t)) });
+				return;
+			}
+			en({ [e]: t });
+		}
+		let J = x(null), Y = x(null), X = x(null), Z = x(null);
+		function Q(e) {
+			let t = N.schema.value.elements[e]?.colSpan;
+			return typeof t == "number" && t >= 1 && t <= 4 ? t : 4;
+		}
+		function nn(e) {
+			return { gridColumn: `span ${Q(e)}` };
+		}
+		function rn(e, t, n, r, i) {
+			if (i.button !== 0) return;
+			i.preventDefault(), i.stopPropagation(), N.select("element", t);
+			let a = i.target;
+			try {
+				a.setPointerCapture(i.pointerId);
+			} catch {}
+			Y.value = {
+				mode: e,
+				elementId: t,
+				fromContainerId: n,
+				fromIndex: r,
+				startClientX: i.clientX,
+				startColSpan: Q(t),
+				containerWidth: J.value?.getBoundingClientRect().width ?? 0,
+				pointerId: i.pointerId,
+				captureTarget: a
+			}, e === "reorder" && (X.value = r, Z.value = n), window.addEventListener("pointermove", sn), window.addEventListener("pointerup", $), window.addEventListener("pointercancel", $);
+		}
+		function an(e, t, n, r) {
+			rn("reorder", e, t, n, r);
+		}
+		function on(e, t) {
+			rn("resize", e, F.value, -1, t);
+		}
+		function sn(e) {
+			let t = Y.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));
+				N.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;
+			Z.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 && (X.value = e);
+			} else X.value = i ? B(i).length : null;
+		}
+		function $(e) {
+			let t = Y.value;
+			if (!t) {
+				cn();
+				return;
+			}
+			try {
+				t.captureTarget.releasePointerCapture(t.pointerId);
+			} catch {}
+			if (t.mode === "reorder" && X.value !== null) {
+				let e = Z.value ?? t.fromContainerId;
+				e === t.fromContainerId ? X.value !== t.fromIndex && N.reorderElement(t.fromContainerId, t.fromIndex, X.value) : N.moveElement(t.fromContainerId, e, t.elementId, X.value);
+			}
+			cn();
+		}
+		function cn() {
+			Y.value = null, X.value = null, Z.value = null, window.removeEventListener("pointermove", sn), window.removeEventListener("pointerup", $), window.removeEventListener("pointercancel", $);
+		}
+		ye(() => {
+			cn();
+		});
+		let ln = u(() => H.value ? "220px 1fr 280px" : "220px 1fr 2rem");
+		return (e, n) => (b(), f("div", {
+			class: v(w(oe)("gxp-form-builder grid gap-3 rounded-lg border bg-card", g.classList)),
+			style: y({
+				gridTemplateColumns: ln.value,
+				minHeight: "24rem",
+				transition: "grid-template-columns 200ms ease"
+			}),
+			"data-testid": "form-builder",
+			"data-element-name": g.name ?? void 0
+		}, [
+			p("aside", Ie, [p("h4", Le, C(g.label ?? "Element palette"), 1), p("div", Re, [(b(!0), f(l, null, S(Gt.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) => Kt(e.type)
+			}, [h(w(Ee), { class: v(["mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-150", V[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), V[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) => Yt(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, [M.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: Ht
+				}, [h(w(Ae), { class: "h-3.5 w-3.5" }), n[10] ||= p("span", null, "Full form", -1)]),
+				n[11] ||= p("span", { class: "text-muted-foreground/50" }, "/", -1),
+				p("span", Je, C(Bt.value?.label ?? "Card"), 1)
+			])) : d("", !0), p("div", Ye, [p("h4", Xe, C(A.value === "inline" ? "Canvas" : M.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", A.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: n[0] ||= (e) => A.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", A.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: n[1] ||= (e) => A.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(() => [...n[12] ||= [m(" builder/form-builder ", -1)]]),
+				_: 1
+			})])])]), A.value === "list" ? (b(), f(l, { key: 0 }, [p("div", $e, [M.value && j.value ? (b(), f(l, { key: 0 }, [(b(), ve(_e, null, {
+				default: T(() => [h(he, {
+					element: Wt(j.value),
+					item: g.item
+				}, null, 8, ["element", "item"])]),
+				_: 1
+			})), L.value.length ? d("", !0) : (b(), f("p", et, " Click an element in the palette to add it. "))], 64)) : P.value ? (b(), f(l, { key: 1 }, [h(ge, {
+				card: P.value,
+				item: g.item,
+				elements: w(N).schema.value.elements,
+				cards: w(N).schema.value.cards
+			}, null, 8, [
+				"card",
+				"item",
+				"elements",
+				"cards"
+			]), R.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: J,
+				class: "grid gap-2 text-xs",
+				style: { "grid-template-columns": "repeat(4, minmax(0, 1fr))" },
+				"data-container-id": I.value,
+				"data-testid": "form-builder-canvas-list"
+			}, [L.value.length ? d("", !0) : (b(), f("p", rt, " Add elements from the palette. ")), (b(!0), f(l, null, S(L.value, (e, t) => (b(), f("div", {
+				key: e,
+				"data-element-block-index": t,
+				"data-testid": `form-builder-row-${e}`,
+				class: v(["group relative cursor-pointer select-none rounded border bg-background transition-colors", [
+					z(e) ? "px-2 pb-2 pt-5" : "px-2 pb-2 pt-5 text-center",
+					w(N).selection.value.kind === "element" && w(N).selection.value.id === e ? "border-primary bg-accent/30" : "hover:border-primary/50",
+					Y.value?.elementId === e && Y.value.mode === "reorder" ? "opacity-40 ring-2 ring-primary" : "",
+					Z.value === I.value && X.value === t && Y.value?.mode === "reorder" && Y.value?.elementId !== e ? "ring-2 ring-primary/60 bg-primary/5" : ""
+				]]),
+				style: y(nn(e)),
+				onClick: (t) => G(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: n[2] ||= E(() => {}, ["stop"]),
+					onPointerdown: E((n) => an(e, I.value, t, n), ["stop"])
+				}, [h(w(O), { 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: ${Q(e)}/4 — drag to resize`,
+					onClick: n[3] ||= E(() => {}, ["stop"]),
+					onPointerdown: E((t) => on(e, t), ["stop"])
+				}, [h(w(D), { class: "h-3 w-3 text-muted-foreground" })], 40, ot),
+				z(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(N).selection.value.kind === "element" && w(N).selection.value.id === e }]),
+						title: "Zoom into this card",
+						"data-testid": "form-builder-zoom-in",
+						onClick: E((t) => Vt(e), ["stop"])
+					}, [h(w(ke), { class: "h-3 w-3" })], 10, ct),
+					p("div", null, [p("span", lt, C(w(N).schema.value.elements[e]?.label ?? "(unnamed)"), 1), h(w(o), {
+						variant: "outline",
+						class: "mt-1 font-mono text-[9px]"
+					}, {
+						default: T(() => [m(C(w(N).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) => G(e), ["stop"])
+					}, [B(e).length ? d("", !0) : (b(), f("p", dt, " Drop elements here — or select & use palette ")), (b(!0), f(l, null, S(B(e), (t, r) => (b(), f("div", {
+						key: t,
+						"data-element-block-index": r,
+						"data-testid": `form-builder-row-${t}`,
+						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(N).selection.value.kind === "element" && w(N).selection.value.id === t ? "border-primary bg-accent/30" : "hover:border-primary/50",
+							Y.value?.elementId === t && Y.value.mode === "reorder" ? "opacity-40 ring-2 ring-primary" : "",
+							Z.value === e && X.value === r && Y.value?.mode === "reorder" && Y.value?.elementId !== t ? "ring-2 ring-primary/60 bg-primary/5" : ""
+						]]),
+						style: y(nn(t)),
+						onClick: E((e) => G(t), ["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: n[4] ||= E(() => {}, ["stop"]),
+							onPointerdown: E((n) => an(t, e, r, n), ["stop"])
+						}, [h(w(O), { 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: ${Q(t)}/4 — drag to resize`,
+							onClick: n[5] ||= E(() => {}, ["stop"]),
+							onPointerdown: E((e) => on(t, e), ["stop"])
+						}, [h(w(D), { class: "h-3 w-3 text-muted-foreground" })], 40, mt),
+						p("span", ht, C(w(N).schema.value.elements[t]?.label ?? "(unnamed)"), 1),
+						h(w(o), {
+							variant: "secondary",
+							class: "mt-0.5 font-mono text-[9px]"
+						}, {
+							default: T(() => [m(C(w(N).schema.value.elements[t]?.type), 1)]),
+							_: 2
+						}, 1024)
+					], 14, ft))), 128))], 8, ut)
+				], 64)) : (b(), f(l, { key: 0 }, [p("span", st, C(w(N).schema.value.elements[e]?.label ?? "(unnamed)"), 1), h(w(o), {
+					variant: "secondary",
+					class: "mt-1 font-mono text-[9px]"
+				}, {
+					default: T(() => [m(C(w(N).schema.value.elements[e]?.type), 1)]),
+					_: 2
+				}, 1024)], 64))
+			], 14, it))), 128))], 8, nt)], 64)) : (b(), f("div", gt, [L.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: J,
+				class: "grid gap-3",
+				style: { "grid-template-columns": "repeat(4, minmax(0, 1fr))" },
+				"data-container-id": I.value,
+				"data-testid": "form-builder-canvas-list"
+			}, [(b(!0), f(l, null, S(L.value, (e, t) => (b(), f("div", {
+				key: e,
+				"data-element-block-index": t,
+				"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(N).selection.value.kind === "element" && w(N).selection.value.id === e ? "border-primary ring-1 ring-primary/30" : "border-transparent hover:border-primary/40",
+					Y.value?.elementId === e && Y.value.mode === "reorder" ? "opacity-40 ring-2 ring-primary" : "",
+					Z.value === I.value && X.value === t && Y.value?.mode === "reorder" && Y.value?.elementId !== e ? "ring-2 ring-primary/60 bg-primary/5" : ""
+				]]),
+				style: y(nn(e)),
+				onClick: (t) => G(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: n[6] ||= E(() => {}, ["stop"]),
+					onPointerdown: E((n) => an(e, I.value, t, n), ["stop"])
+				}, [h(w(O), { 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: ${Q(e)}/4 — drag to resize`,
+					onClick: n[7] ||= E(() => {}, ["stop"]),
+					onPointerdown: E((t) => on(e, t), ["stop"])
+				}, [h(w(D), { class: "h-3 w-3 text-muted-foreground" })], 40, xt),
+				z(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(N).selection.value.kind === "element" && w(N).selection.value.id === e }]),
+					title: "Zoom into this card",
+					"data-testid": "form-builder-zoom-in",
+					onClick: E((t) => Vt(e), ["stop"])
+				}, [h(w(ke), { class: "h-3.5 w-3.5" })], 10, St)) : d("", !0),
+				h(he, {
+					element: Wt(e),
+					item: g.item
+				}, null, 8, ["element", "item"])
+			], 14, yt))), 128))], 8, vt))]))]),
+			H.value ? (b(), f("aside", Tt, [p("header", Et, [n[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: $t
+			}, {
+				default: T(() => [h(w(Pe), { class: "h-3.5 w-3.5" })]),
+				_: 1
+			})]), p("div", Dt, [h(w(ue), { class: "border-dashed" }, {
+				default: T(() => [h(w(le), { class: "py-2" }, {
+					default: T(() => [h(w(se), { class: "font-mono text-xs uppercase tracking-wide" }, {
+						default: T(() => [m(C(H.value.type), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}), h(w(ce), { class: "flex flex-col gap-2 pb-3" }, {
+					default: T(() => [
+						(b(!0), f(l, null, S(tn.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(fe), {
+							id: `fb-${e.fieldName}`,
+							"model-value": !!K(e.fieldName),
+							"data-testid": `form-builder-inspector-${e.fieldName}`,
+							"onUpdate:modelValue": (t) => q(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(K(e.fieldName) ?? ""),
+							"data-testid": `form-builder-inspector-${e.fieldName}`,
+							onChange: (t) => q(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(pe), {
+							id: `fb-${e.fieldName}`,
+							"model-value": String(K(e.fieldName) ?? ""),
+							"data-testid": `form-builder-inspector-${e.fieldName}`,
+							onInput: (t) => q(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(de), {
+							id: `fb-${e.fieldName}`,
+							"model-value": String(K(e.fieldName) ?? ""),
+							"data-testid": `form-builder-inspector-${e.fieldName}`,
+							onInput: (t) => q(e.fieldName, t.target.value)
+						}, null, 8, [
+							"id",
+							"model-value",
+							"data-testid",
+							"onInput"
+						])]))], 64))), 128)),
+						tn.value.length ? (b(), ve(w(ne), {
+							key: 0,
+							class: "my-1"
+						})) : d("", !0),
+						p("div", Pt, [h(w(c), { for: "fb-help" }, {
+							default: T(() => [...n[15] ||= [m("Help text", -1)]]),
+							_: 1
+						}), h(w(pe), {
+							id: "fb-help",
+							"model-value": String(K("helpText") ?? ""),
+							"data-testid": "form-builder-inspector-help",
+							onInput: n[8] ||= (e) => q("helpText", e.target.value)
+						}, null, 8, ["model-value"])]),
+						p("div", Ft, [h(w(c), { for: "fb-disabled" }, {
+							default: T(() => [...n[16] ||= [m("Disabled", -1)]]),
+							_: 1
+						}), h(w(fe), {
+							id: "fb-disabled",
+							"model-value": !!K("disabled"),
+							"onUpdate:modelValue": n[9] ||= (e) => q("disabled", e)
+						}, null, 8, ["model-value"])])
+					]),
+					_: 1
+				})]),
+				_: 1
+			}), p("div", It, [
+				h(w(s), {
+					variant: "outline",
+					size: "sm",
+					disabled: W.value <= 0,
+					"data-testid": "form-builder-move-up",
+					onClick: Xt
+				}, {
+					default: T(() => [h(w(Te), { class: "h-3.5 w-3.5" })]),
+					_: 1
+				}, 8, ["disabled"]),
+				h(w(s), {
+					variant: "outline",
+					size: "sm",
+					disabled: !Jt.value,
+					"data-testid": "form-builder-move-down",
+					onClick: Zt
+				}, {
+					default: T(() => [h(w(we), { 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: Qt
+				}, {
+					default: T(() => [h(w(Ne), { class: "h-3.5 w-3.5" }), n[17] ||= m(" Remove ", -1)]),
+					_: 1
+				})
+			])])])) : (b(), f("aside", Ct, [h(w(t), null, {
+				default: T(() => [h(w(a), null, {
+					default: T(() => [h(w(i), { "as-child": "" }, {
+						default: T(() => [p("span", wt, [h(w(De), { class: "h-4 w-4" })])]),
+						_: 1
+					}), h(w(te), { side: "left" }, {
+						default: T(() => [...n[13] ||= [m(" Select an element on the canvas to edit its properties ", -1)]]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})]))
+		], 14, Fe));
+	}
+}), Lt = /* @__PURE__ */ e({ default: () => Rt }), Rt = k;
+//#endregion
+export { Lt as n, Rt as t };
+
+//# sourceMappingURL=FormBuilder-D314W1mI.js.map