@gxp-dev/mod-ui 2.0.0 → 2.0.3

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

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