@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/elements/builder/ElementListBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementListBuilder.js","names":[],"sources":["../../../../../src/components/compositions/elements/builder/ElementListBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ElementListBuilder — a simpler sibling of FormBuilder.\n *\n * The schema is just a flat list of CardElements (no cards, no tabs,\n * no nested cards). Useful for forms-as-arrays and list-of-fields\n * configs.\n *\n * Three-pane layout:\n *   - LEFT  (Palette):    Clickable list of element categories from\n *                         CardElementMetadataMap. Click to append.\n *   - MIDDLE (Canvas):    Flat list of elements with selection.\n *   - RIGHT (Inspector):  Property panel mirroring FormBuilder's\n *                         (label, name, placeholder, helpText,\n *                         required, readonly, disabled).\n *\n * State is owned by `elementListBuilderStore`. The builder accepts an\n * initial schema via `modelValue` and emits the current schema via\n * `update:modelValue` on every mutation.\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { ArrowDown, ArrowUp, Plus, Trash2, X } from \"@lucide/vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport { CardElementMetadataMap } from \"@/definitions/elements\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n  useElementListBuilder,\n  type ElementListBuilderSchema,\n} from \"@/stores/elementListBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ElementListBuilderProps {\n  /** Initial / current schema. Two-way bindable via v-model. */\n  modelValue?: ElementListBuilderSchema\n  /**\n   * Identifier used to key the elementListBuilderStore. Defaults to a\n   * stable auto-generated id so multiple builders on the same page\n   * don't collide.\n   */\n  builderId?: string\n  label?: string\n  name?: string | null\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ElementListBuilderProps>(), {\n  label: \"Element List Builder\",\n  item: () => ({}),\n})\n\nconst model = defineModel<ElementListBuilderSchema | undefined>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n  nextAutoId += 1\n  return `element-list-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\n\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useElementListBuilder(builderId.value)\n\nfunction isElementListBuilderSchema(\n  value: unknown,\n): value is ElementListBuilderSchema {\n  if (typeof value !== \"object\" || value === null) {\n    return false\n  }\n  const v = value as Record<string, unknown>\n  return Array.isArray(v.elements)\n}\n\n/** Seed the store from the initial modelValue. */\nonMounted(() => {\n  const seed = model.value\n  if (isElementListBuilderSchema(seed)) {\n    builder.loadSchema(seed)\n  }\n})\n\n/** Push schema changes back via v-model. */\nwatch(\n  () => builder.schema.value,\n  (next) => {\n    model.value = {\n      elements: next.elements.map(\n        (el) =>\n          ({ ...(el as unknown as Record<string, unknown>) }) as unknown as CardElement,\n      ),\n    }\n  },\n  { deep: true },\n)\n\nconst elements = computed<CardElement[]>(() => builder.schema.value.elements)\n\n/**\n * Display-time view of `elements` with the fields the template needs\n * narrowed to plain strings. Doing the casts here keeps the template\n * free of `as unknown as` expressions that confuse the template\n * compiler around `{` `}` characters.\n */\ninterface ElementRow {\n  id: string\n  label: string\n  type: string\n}\nconst elementRows = computed<ElementRow[]>(() =>\n  elements.value.map((el) => {\n    const bag = el as unknown as Record<string, unknown>\n    return {\n      id: (bag.id as string) ?? \"\",\n      label: (bag.label as string) ?? \"(unnamed)\",\n      type: (bag.type as string) ?? \"\",\n    }\n  }),\n)\n\nconst paletteEntries = computed(() =>\n  (\n    Object.entries(CardElementMetadataMap) as Array<\n      [\n        keyof typeof CardElementMetadataMap,\n        (typeof CardElementMetadataMap)[keyof typeof CardElementMetadataMap],\n      ]\n    >\n  ).map(([type, meta]) => ({ type, meta })),\n)\n\nconst selectedElement = computed<CardElement | null>(() => {\n  const sel = builder.selection.value\n  if (!sel.id) {\n    return null\n  }\n  return (\n    elements.value.find(\n      (el) => (el as unknown as { id: string }).id === sel.id,\n    ) ?? null\n  )\n})\n\nconst selectedIndex = computed<number>(() => {\n  const sel = builder.selection.value\n  if (!sel.id) {\n    return -1\n  }\n  return elements.value.findIndex(\n    (el) => (el as unknown as { id: string }).id === sel.id,\n  )\n})\n\nconst canMoveDown = computed<boolean>(() => {\n  return (\n    selectedIndex.value >= 0 && selectedIndex.value < elements.value.length - 1\n  )\n})\n\nfunction onPaletteClick(type: keyof typeof CardElementMetadataMap): void {\n  const newId = builder.addElement(type)\n  builder.select(newId)\n}\n\nfunction onCanvasRowClick(elementId: string): void {\n  builder.select(elementId)\n}\n\nfunction onMoveUp(): void {\n  if (selectedIndex.value <= 0) {\n    return\n  }\n  builder.reorderElement(selectedIndex.value, selectedIndex.value - 1)\n}\n\nfunction onMoveDown(): void {\n  if (!canMoveDown.value) {\n    return\n  }\n  builder.reorderElement(selectedIndex.value, selectedIndex.value + 1)\n}\n\nfunction onRemove(): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.removeElement(sel.id)\n  }\n}\n\nfunction onClearSelection(): void {\n  builder.select(null)\n}\n\nfunction patchSelected(patch: Partial<CardElement>): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.updateElement(sel.id, patch)\n  }\n}\n\nconst labelValue = computed<string>(\n  () => (selectedElement.value?.label as string) ?? \"\",\n)\nconst nameValue = computed<string>(\n  () => (selectedElement.value?.name as string) ?? \"\",\n)\nconst placeholderValue = computed<string>(\n  () => (selectedElement.value?.placeholder as string) ?? \"\",\n)\nconst helpTextValue = computed<string>(\n  () => (selectedElement.value?.helpText as string) ?? \"\",\n)\nconst requiredValue = computed<boolean>(() =>\n  Boolean(selectedElement.value?.required),\n)\nconst readonlyValue = computed<boolean>(() =>\n  Boolean(selectedElement.value?.readonly),\n)\nconst disabledValue = computed<boolean>(() =>\n  Boolean(selectedElement.value?.disabled),\n)\nconst selectedTypeLabel = computed<string>(() => {\n  const sel = selectedElement.value\n  if (!sel) {\n    return \"\"\n  }\n  return ((sel as unknown as Record<string, unknown>).type as string) ?? \"\"\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'gxp-element-list-builder grid gap-3 rounded-lg border bg-card',\n        props.classList,\n      )\n    \"\n    style=\"grid-template-columns: 220px 1fr 280px; min-height: 24rem\"\n    data-testid=\"element-list-builder\"\n    :data-element-name=\"props.name ?? undefined\"\n  >\n    <aside\n      class=\"flex flex-col gap-2 border-r p-3 overflow-y-auto\"\n      data-testid=\"element-list-builder-palette\"\n    >\n      <h4\n        class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n      >\n        {{ props.label }}\n      </h4>\n      <div class=\"flex flex-col gap-1\">\n        <button\n          v-for=\"entry in paletteEntries\"\n          :key=\"entry.type\"\n          type=\"button\"\n          class=\"flex items-start gap-2 rounded-md border bg-background px-2 py-1.5 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40\"\n          :data-testid=\"`element-list-builder-palette-${entry.type}`\"\n          @click=\"onPaletteClick(entry.type)\"\n        >\n          <Plus class=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n          <span class=\"flex min-w-0 flex-col gap-0.5\">\n            <span class=\"font-medium\">{{ entry.meta.displayLabel }}</span>\n            <span class=\"line-clamp-2 text-[10px] text-muted-foreground\">\n              {{ entry.meta.description }}\n            </span>\n          </span>\n        </button>\n      </div>\n    </aside>\n\n    <section\n      class=\"flex flex-col gap-3 overflow-y-auto p-3\"\n      data-testid=\"element-list-builder-canvas\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4\n          class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n        >\n          Elements\n        </h4>\n        <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n          builder/element-list-builder\n        </Badge>\n      </header>\n\n      <p\n        v-if=\"elements.length === 0\"\n        class=\"rounded-md border border-dashed bg-background py-6 text-center text-xs text-muted-foreground\"\n        data-testid=\"element-list-builder-canvas-empty\"\n      >\n        Click an element in the palette to add it.\n      </p>\n\n      <ul\n        v-else\n        class=\"flex flex-col gap-1 text-xs\"\n        data-testid=\"element-list-builder-canvas-list\"\n      >\n        <li\n          v-for=\"(row, index) in elementRows\"\n          :key=\"row.id\"\n          class=\"flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors\"\n          :class=\"\n            builder.selection.value.id === row.id\n              ? 'border-primary bg-accent/30'\n              : ''\n          \"\n          :data-testid=\"`element-list-builder-row-${row.id}`\"\n          @click=\"onCanvasRowClick(row.id)\"\n        >\n          <span class=\"w-6 text-right tabular-nums text-muted-foreground\">\n            {{ index + 1 }}.\n          </span>\n          <span class=\"font-medium\">{{ row.label }}</span>\n          <Badge variant=\"secondary\" class=\"ml-auto font-mono text-[9px]\">\n            {{ row.type }}\n          </Badge>\n        </li>\n      </ul>\n    </section>\n\n    <aside\n      class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n      data-testid=\"element-list-builder-inspector\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4\n          class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n        >\n          Inspector\n        </h4>\n        <Button\n          v-if=\"builder.selection.value.id\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label=\"Clear selection\"\n          @click=\"onClearSelection\"\n        >\n          <X class=\"h-3.5 w-3.5\" />\n        </Button>\n      </header>\n\n      <p\n        v-if=\"!selectedElement\"\n        class=\"py-3 text-xs text-muted-foreground\"\n        data-testid=\"element-list-builder-inspector-empty\"\n      >\n        Select an element on the canvas to edit its properties.\n      </p>\n\n      <div\n        v-else\n        class=\"flex flex-col gap-3\"\n        data-testid=\"element-list-builder-inspector-fields\"\n      >\n        <Card class=\"border-dashed\">\n          <CardHeader class=\"py-2\">\n            <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n              {{ selectedTypeLabel }}\n            </CardTitle>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2 pb-3\">\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"elb-label\">Label</Label>\n              <Input\n                id=\"elb-label\"\n                :model-value=\"labelValue\"\n                data-testid=\"element-list-builder-inspector-label\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelected({\n                      label: (e.target as HTMLInputElement).value,\n                    })\n                \"\n              />\n            </div>\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"elb-name\">Field name</Label>\n              <Input\n                id=\"elb-name\"\n                :model-value=\"nameValue\"\n                data-testid=\"element-list-builder-inspector-name\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelected({\n                      name: (e.target as HTMLInputElement).value,\n                    })\n                \"\n              />\n            </div>\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"elb-placeholder\">Placeholder</Label>\n              <Input\n                id=\"elb-placeholder\"\n                :model-value=\"placeholderValue\"\n                data-testid=\"element-list-builder-inspector-placeholder\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelected({\n                      placeholder: (e.target as HTMLInputElement).value,\n                    })\n                \"\n              />\n            </div>\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"elb-help\">Help text</Label>\n              <Textarea\n                id=\"elb-help\"\n                :model-value=\"helpTextValue\"\n                data-testid=\"element-list-builder-inspector-help\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelected({\n                      helpText: (e.target as HTMLTextAreaElement).value,\n                    })\n                \"\n              />\n            </div>\n\n            <div\n              class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n            >\n              <Label for=\"elb-required\">Required</Label>\n              <Switch\n                id=\"elb-required\"\n                :model-value=\"requiredValue\"\n                data-testid=\"element-list-builder-inspector-required\"\n                @update:model-value=\"(v: boolean) => patchSelected({ required: v })\"\n              />\n            </div>\n            <div\n              class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n            >\n              <Label for=\"elb-readonly\">Read-only</Label>\n              <Switch\n                id=\"elb-readonly\"\n                :model-value=\"readonlyValue\"\n                @update:model-value=\"(v: boolean) => patchSelected({ readonly: v })\"\n              />\n            </div>\n            <div\n              class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n            >\n              <Label for=\"elb-disabled\">Disabled</Label>\n              <Switch\n                id=\"elb-disabled\"\n                :model-value=\"disabledValue\"\n                @update:model-value=\"(v: boolean) => patchSelected({ disabled: v })\"\n              />\n            </div>\n          </CardContent>\n        </Card>\n\n        <div class=\"flex items-center gap-1\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            :disabled=\"selectedIndex <= 0\"\n            data-testid=\"element-list-builder-move-up\"\n            @click=\"onMoveUp\"\n          >\n            <ArrowUp class=\"h-3.5 w-3.5\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            :disabled=\"!canMoveDown\"\n            data-testid=\"element-list-builder-move-down\"\n            @click=\"onMoveDown\"\n          >\n            <ArrowDown class=\"h-3.5 w-3.5\" />\n          </Button>\n          <Button\n            variant=\"destructive\"\n            size=\"sm\"\n            class=\"ml-auto\"\n            data-testid=\"element-list-builder-remove\"\n            @click=\"onRemove\"\n          >\n            <Trash2 class=\"h-3.5 w-3.5\" />\n            Remove\n          </Button>\n        </div>\n      </div>\n    </aside>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,284 @@
+import { CardElementMetadataMap as e } from "../../../../definitions/elements/index.js";
+import { cn as t } from "../../../../lib/utils.js";
+import n from "../../../ui/badge/Badge.js";
+import "../../../ui/badge/index.js";
+import r from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import ee from "../../../ui/card/Card.js";
+import i from "../../../ui/card/CardContent.js";
+import te from "../../../ui/card/CardHeader.js";
+import ne from "../../../ui/card/CardTitle.js";
+import "../../../ui/card/index.js";
+import a from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import o from "../../../ui/label/Label.js";
+import "../../../ui/label/index.js";
+import s from "../../../ui/switch/Switch.js";
+import "../../../ui/switch/index.js";
+import re from "../../../ui/textarea/Textarea.js";
+import "../../../ui/textarea/index.js";
+import { useElementListBuilder as c } from "../../../../stores/elementListBuilderStore.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as ie, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, normalizeClass as v, onMounted as ae, openBlock as y, ref as oe, renderList as b, toDisplayString as x, unref as S, useModel as se, watch as ce, withCtx as C } from "vue";
+import { ArrowDown as w, ArrowUp as T, Plus as E, Trash2 as D, X as O } from "@lucide/vue";
+//#region src/components/compositions/elements/builder/ElementListBuilder.vue?vue&type=script&setup=true&lang.ts
+var k = ["data-element-name"], A = {
+	class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
+	"data-testid": "element-list-builder-palette"
+}, j = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, M = { class: "flex flex-col gap-1" }, N = ["data-testid", "onClick"], P = { class: "flex min-w-0 flex-col gap-0.5" }, F = { class: "font-medium" }, I = { class: "line-clamp-2 text-[10px] text-muted-foreground" }, L = {
+	class: "flex flex-col gap-3 overflow-y-auto p-3",
+	"data-testid": "element-list-builder-canvas"
+}, R = { class: "flex items-center justify-between" }, z = {
+	key: 0,
+	class: "rounded-md border border-dashed bg-background py-6 text-center text-xs text-muted-foreground",
+	"data-testid": "element-list-builder-canvas-empty"
+}, B = {
+	key: 1,
+	class: "flex flex-col gap-1 text-xs",
+	"data-testid": "element-list-builder-canvas-list"
+}, V = ["data-testid", "onClick"], H = { class: "w-6 text-right tabular-nums text-muted-foreground" }, U = { class: "font-medium" }, W = {
+	class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
+	"data-testid": "element-list-builder-inspector"
+}, G = { class: "flex items-center justify-between" }, le = {
+	key: 0,
+	class: "py-3 text-xs text-muted-foreground",
+	"data-testid": "element-list-builder-inspector-empty"
+}, ue = {
+	key: 1,
+	class: "flex flex-col gap-3",
+	"data-testid": "element-list-builder-inspector-fields"
+}, de = { class: "flex flex-col gap-1" }, fe = { class: "flex flex-col gap-1" }, pe = { class: "flex flex-col gap-1" }, me = { class: "flex flex-col gap-1" }, he = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" }, ge = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" }, _e = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" }, ve = { class: "flex items-center gap-1" }, K = /* @__PURE__ */ g({
+	__name: "ElementListBuilder",
+	props: /* @__PURE__ */ _({
+		modelValue: {},
+		builderId: {},
+		label: { default: "Element List Builder" },
+		name: {},
+		item: { default: () => ({}) },
+		classList: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(g) {
+		let _ = g, K = se(g, "modelValue"), q = 0;
+		function ye() {
+			return q += 1, `element-list-builder-${Date.now()}-${q}`;
+		}
+		let be = oe(ye()), J = c(u(() => _.builderId ?? be.value).value);
+		function xe(e) {
+			if (typeof e != "object" || !e) return !1;
+			let t = e;
+			return Array.isArray(t.elements);
+		}
+		ae(() => {
+			let e = K.value;
+			xe(e) && J.loadSchema(e);
+		}), ce(() => J.schema.value, (e) => {
+			K.value = { elements: e.elements.map((e) => ({ ...e })) };
+		}, { deep: !0 });
+		let Y = u(() => J.schema.value.elements), Se = u(() => Y.value.map((e) => {
+			let t = e;
+			return {
+				id: t.id ?? "",
+				label: t.label ?? "(unnamed)",
+				type: t.type ?? ""
+			};
+		})), Ce = u(() => Object.entries(e).map(([e, t]) => ({
+			type: e,
+			meta: t
+		}))), X = u(() => {
+			let e = J.selection.value;
+			return e.id ? Y.value.find((t) => t.id === e.id) ?? null : null;
+		}), Z = u(() => {
+			let e = J.selection.value;
+			return e.id ? Y.value.findIndex((t) => t.id === e.id) : -1;
+		}), Q = u(() => Z.value >= 0 && Z.value < Y.value.length - 1);
+		function we(e) {
+			let t = J.addElement(e);
+			J.select(t);
+		}
+		function Te(e) {
+			J.select(e);
+		}
+		function Ee() {
+			Z.value <= 0 || J.reorderElement(Z.value, Z.value - 1);
+		}
+		function De() {
+			Q.value && J.reorderElement(Z.value, Z.value + 1);
+		}
+		function Oe() {
+			let e = J.selection.value;
+			e.id && J.removeElement(e.id);
+		}
+		function ke() {
+			J.select(null);
+		}
+		function $(e) {
+			let t = J.selection.value;
+			t.id && J.updateElement(t.id, e);
+		}
+		let Ae = u(() => X.value?.label ?? ""), je = u(() => X.value?.name ?? ""), Me = u(() => X.value?.placeholder ?? ""), Ne = u(() => X.value?.helpText ?? ""), Pe = u(() => !!X.value?.required), Fe = u(() => !!X.value?.readonly), Ie = u(() => !!X.value?.disabled), Le = u(() => {
+			let e = X.value;
+			return e ? e.type ?? "" : "";
+		});
+		return (e, c) => (y(), f("div", {
+			class: v(S(t)("gxp-element-list-builder grid gap-3 rounded-lg border bg-card", _.classList)),
+			style: {
+				"grid-template-columns": "220px 1fr 280px",
+				"min-height": "24rem"
+			},
+			"data-testid": "element-list-builder",
+			"data-element-name": _.name ?? void 0
+		}, [
+			p("aside", A, [p("h4", j, x(_.label), 1), p("div", M, [(y(!0), f(l, null, b(Ce.value, (e) => (y(), f("button", {
+				key: e.type,
+				type: "button",
+				class: "flex items-start gap-2 rounded-md border bg-background px-2 py-1.5 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40",
+				"data-testid": `element-list-builder-palette-${e.type}`,
+				onClick: (t) => we(e.type)
+			}, [h(S(E), { class: "mt-0.5 h-3.5 w-3.5 shrink-0" }), p("span", P, [p("span", F, x(e.meta.displayLabel), 1), p("span", I, x(e.meta.description), 1)])], 8, N))), 128))])]),
+			p("section", L, [p("header", R, [c[8] ||= p("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Elements ", -1), h(S(n), {
+				variant: "outline",
+				class: "font-mono text-[10px]"
+			}, {
+				default: C(() => [...c[7] ||= [m(" builder/element-list-builder ", -1)]]),
+				_: 1
+			})]), Y.value.length === 0 ? (y(), f("p", z, " Click an element in the palette to add it. ")) : (y(), f("ul", B, [(y(!0), f(l, null, b(Se.value, (e, t) => (y(), f("li", {
+				key: e.id,
+				class: v(["flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors", S(J).selection.value.id === e.id ? "border-primary bg-accent/30" : ""]),
+				"data-testid": `element-list-builder-row-${e.id}`,
+				onClick: (t) => Te(e.id)
+			}, [
+				p("span", H, x(t + 1) + ". ", 1),
+				p("span", U, x(e.label), 1),
+				h(S(n), {
+					variant: "secondary",
+					class: "ml-auto font-mono text-[9px]"
+				}, {
+					default: C(() => [m(x(e.type), 1)]),
+					_: 2
+				}, 1024)
+			], 10, V))), 128))]))]),
+			p("aside", W, [p("header", G, [c[9] ||= p("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1), S(J).selection.value.id ? (y(), d(S(r), {
+				key: 0,
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Clear selection",
+				onClick: ke
+			}, {
+				default: C(() => [h(S(O), { class: "h-3.5 w-3.5" })]),
+				_: 1
+			})) : ie("", !0)]), X.value ? (y(), f("div", ue, [h(S(ee), { class: "border-dashed" }, {
+				default: C(() => [h(S(te), { class: "py-2" }, {
+					default: C(() => [h(S(ne), { class: "font-mono text-xs uppercase tracking-wide" }, {
+						default: C(() => [m(x(Le.value), 1)]),
+						_: 1
+					})]),
+					_: 1
+				}), h(S(i), { class: "flex flex-col gap-2 pb-3" }, {
+					default: C(() => [
+						p("div", de, [h(S(o), { for: "elb-label" }, {
+							default: C(() => [...c[10] ||= [m("Label", -1)]]),
+							_: 1
+						}), h(S(a), {
+							id: "elb-label",
+							"model-value": Ae.value,
+							"data-testid": "element-list-builder-inspector-label",
+							onInput: c[0] ||= (e) => $({ label: e.target.value })
+						}, null, 8, ["model-value"])]),
+						p("div", fe, [h(S(o), { for: "elb-name" }, {
+							default: C(() => [...c[11] ||= [m("Field name", -1)]]),
+							_: 1
+						}), h(S(a), {
+							id: "elb-name",
+							"model-value": je.value,
+							"data-testid": "element-list-builder-inspector-name",
+							onInput: c[1] ||= (e) => $({ name: e.target.value })
+						}, null, 8, ["model-value"])]),
+						p("div", pe, [h(S(o), { for: "elb-placeholder" }, {
+							default: C(() => [...c[12] ||= [m("Placeholder", -1)]]),
+							_: 1
+						}), h(S(a), {
+							id: "elb-placeholder",
+							"model-value": Me.value,
+							"data-testid": "element-list-builder-inspector-placeholder",
+							onInput: c[2] ||= (e) => $({ placeholder: e.target.value })
+						}, null, 8, ["model-value"])]),
+						p("div", me, [h(S(o), { for: "elb-help" }, {
+							default: C(() => [...c[13] ||= [m("Help text", -1)]]),
+							_: 1
+						}), h(S(re), {
+							id: "elb-help",
+							"model-value": Ne.value,
+							"data-testid": "element-list-builder-inspector-help",
+							onInput: c[3] ||= (e) => $({ helpText: e.target.value })
+						}, null, 8, ["model-value"])]),
+						p("div", he, [h(S(o), { for: "elb-required" }, {
+							default: C(() => [...c[14] ||= [m("Required", -1)]]),
+							_: 1
+						}), h(S(s), {
+							id: "elb-required",
+							"model-value": Pe.value,
+							"data-testid": "element-list-builder-inspector-required",
+							"onUpdate:modelValue": c[4] ||= (e) => $({ required: e })
+						}, null, 8, ["model-value"])]),
+						p("div", ge, [h(S(o), { for: "elb-readonly" }, {
+							default: C(() => [...c[15] ||= [m("Read-only", -1)]]),
+							_: 1
+						}), h(S(s), {
+							id: "elb-readonly",
+							"model-value": Fe.value,
+							"onUpdate:modelValue": c[5] ||= (e) => $({ readonly: e })
+						}, null, 8, ["model-value"])]),
+						p("div", _e, [h(S(o), { for: "elb-disabled" }, {
+							default: C(() => [...c[16] ||= [m("Disabled", -1)]]),
+							_: 1
+						}), h(S(s), {
+							id: "elb-disabled",
+							"model-value": Ie.value,
+							"onUpdate:modelValue": c[6] ||= (e) => $({ disabled: e })
+						}, null, 8, ["model-value"])])
+					]),
+					_: 1
+				})]),
+				_: 1
+			}), p("div", ve, [
+				h(S(r), {
+					variant: "outline",
+					size: "sm",
+					disabled: Z.value <= 0,
+					"data-testid": "element-list-builder-move-up",
+					onClick: Ee
+				}, {
+					default: C(() => [h(S(T), { class: "h-3.5 w-3.5" })]),
+					_: 1
+				}, 8, ["disabled"]),
+				h(S(r), {
+					variant: "outline",
+					size: "sm",
+					disabled: !Q.value,
+					"data-testid": "element-list-builder-move-down",
+					onClick: De
+				}, {
+					default: C(() => [h(S(w), { class: "h-3.5 w-3.5" })]),
+					_: 1
+				}, 8, ["disabled"]),
+				h(S(r), {
+					variant: "destructive",
+					size: "sm",
+					class: "ml-auto",
+					"data-testid": "element-list-builder-remove",
+					onClick: Oe
+				}, {
+					default: C(() => [h(S(D), { class: "h-3.5 w-3.5" }), c[17] ||= m(" Remove ", -1)]),
+					_: 1
+				})
+			])])) : (y(), f("p", le, " Select an element on the canvas to edit its properties. "))])
+		], 10, k));
+	}
+});
+//#endregion
+export { K as default };
+
+//# sourceMappingURL=ElementListBuilder.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/builder/ElementListBuilder.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementListBuilder.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/builder/ElementListBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ElementListBuilder — a simpler sibling of FormBuilder.\n *\n * The schema is just a flat list of CardElements (no cards, no tabs,\n * no nested cards). Useful for forms-as-arrays and list-of-fields\n * configs.\n *\n * Three-pane layout:\n *   - LEFT  (Palette):    Clickable list of element categories from\n *                         CardElementMetadataMap. Click to append.\n *   - MIDDLE (Canvas):    Flat list of elements with selection.\n *   - RIGHT (Inspector):  Property panel mirroring FormBuilder's\n *                         (label, name, placeholder, helpText,\n *                         required, readonly, disabled).\n *\n * State is owned by `elementListBuilderStore`. The builder accepts an\n * initial schema via `modelValue` and emits the current schema via\n * `update:modelValue` on every mutation.\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { ArrowDown, ArrowUp, Plus, Trash2, X } from \"@lucide/vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport { CardElementMetadataMap } from \"@/definitions/elements\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n  useElementListBuilder,\n  type ElementListBuilderSchema,\n} from \"@/stores/elementListBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ElementListBuilderProps {\n  /** Initial / current schema. Two-way bindable via v-model. */\n  modelValue?: ElementListBuilderSchema\n  /**\n   * Identifier used to key the elementListBuilderStore. Defaults to a\n   * stable auto-generated id so multiple builders on the same page\n   * don't collide.\n   */\n  builderId?: string\n  label?: string\n  name?: string | null\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ElementListBuilderProps>(), {\n  label: \"Element List Builder\",\n  item: () => ({}),\n})\n\nconst model = defineModel<ElementListBuilderSchema | undefined>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n  nextAutoId += 1\n  return `element-list-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\n\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useElementListBuilder(builderId.value)\n\nfunction isElementListBuilderSchema(\n  value: unknown,\n): value is ElementListBuilderSchema {\n  if (typeof value !== \"object\" || value === null) {\n    return false\n  }\n  const v = value as Record<string, unknown>\n  return Array.isArray(v.elements)\n}\n\n/** Seed the store from the initial modelValue. */\nonMounted(() => {\n  const seed = model.value\n  if (isElementListBuilderSchema(seed)) {\n    builder.loadSchema(seed)\n  }\n})\n\n/** Push schema changes back via v-model. */\nwatch(\n  () => builder.schema.value,\n  (next) => {\n    model.value = {\n      elements: next.elements.map(\n        (el) =>\n          ({ ...(el as unknown as Record<string, unknown>) }) as unknown as CardElement,\n      ),\n    }\n  },\n  { deep: true },\n)\n\nconst elements = computed<CardElement[]>(() => builder.schema.value.elements)\n\n/**\n * Display-time view of `elements` with the fields the template needs\n * narrowed to plain strings. Doing the casts here keeps the template\n * free of `as unknown as` expressions that confuse the template\n * compiler around `{` `}` characters.\n */\ninterface ElementRow {\n  id: string\n  label: string\n  type: string\n}\nconst elementRows = computed<ElementRow[]>(() =>\n  elements.value.map((el) => {\n    const bag = el as unknown as Record<string, unknown>\n    return {\n      id: (bag.id as string) ?? \"\",\n      label: (bag.label as string) ?? \"(unnamed)\",\n      type: (bag.type as string) ?? \"\",\n    }\n  }),\n)\n\nconst paletteEntries = computed(() =>\n  (\n    Object.entries(CardElementMetadataMap) as Array<\n      [\n        keyof typeof CardElementMetadataMap,\n        (typeof CardElementMetadataMap)[keyof typeof CardElementMetadataMap],\n      ]\n    >\n  ).map(([type, meta]) => ({ type, meta })),\n)\n\nconst selectedElement = computed<CardElement | null>(() => {\n  const sel = builder.selection.value\n  if (!sel.id) {\n    return null\n  }\n  return (\n    elements.value.find(\n      (el) => (el as unknown as { id: string }).id === sel.id,\n    ) ?? null\n  )\n})\n\nconst selectedIndex = computed<number>(() => {\n  const sel = builder.selection.value\n  if (!sel.id) {\n    return -1\n  }\n  return elements.value.findIndex(\n    (el) => (el as unknown as { id: string }).id === sel.id,\n  )\n})\n\nconst canMoveDown = computed<boolean>(() => {\n  return (\n    selectedIndex.value >= 0 && selectedIndex.value < elements.value.length - 1\n  )\n})\n\nfunction onPaletteClick(type: keyof typeof CardElementMetadataMap): void {\n  const newId = builder.addElement(type)\n  builder.select(newId)\n}\n\nfunction onCanvasRowClick(elementId: string): void {\n  builder.select(elementId)\n}\n\nfunction onMoveUp(): void {\n  if (selectedIndex.value <= 0) {\n    return\n  }\n  builder.reorderElement(selectedIndex.value, selectedIndex.value - 1)\n}\n\nfunction onMoveDown(): void {\n  if (!canMoveDown.value) {\n    return\n  }\n  builder.reorderElement(selectedIndex.value, selectedIndex.value + 1)\n}\n\nfunction onRemove(): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.removeElement(sel.id)\n  }\n}\n\nfunction onClearSelection(): void {\n  builder.select(null)\n}\n\nfunction patchSelected(patch: Partial<CardElement>): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.updateElement(sel.id, patch)\n  }\n}\n\nconst labelValue = computed<string>(\n  () => (selectedElement.value?.label as string) ?? \"\",\n)\nconst nameValue = computed<string>(\n  () => (selectedElement.value?.name as string) ?? \"\",\n)\nconst placeholderValue = computed<string>(\n  () => (selectedElement.value?.placeholder as string) ?? \"\",\n)\nconst helpTextValue = computed<string>(\n  () => (selectedElement.value?.helpText as string) ?? \"\",\n)\nconst requiredValue = computed<boolean>(() =>\n  Boolean(selectedElement.value?.required),\n)\nconst readonlyValue = computed<boolean>(() =>\n  Boolean(selectedElement.value?.readonly),\n)\nconst disabledValue = computed<boolean>(() =>\n  Boolean(selectedElement.value?.disabled),\n)\nconst selectedTypeLabel = computed<string>(() => {\n  const sel = selectedElement.value\n  if (!sel) {\n    return \"\"\n  }\n  return ((sel as unknown as Record<string, unknown>).type as string) ?? \"\"\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'gxp-element-list-builder grid gap-3 rounded-lg border bg-card',\n        props.classList,\n      )\n    \"\n    style=\"grid-template-columns: 220px 1fr 280px; min-height: 24rem\"\n    data-testid=\"element-list-builder\"\n    :data-element-name=\"props.name ?? undefined\"\n  >\n    <aside\n      class=\"flex flex-col gap-2 border-r p-3 overflow-y-auto\"\n      data-testid=\"element-list-builder-palette\"\n    >\n      <h4\n        class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n      >\n        {{ props.label }}\n      </h4>\n      <div class=\"flex flex-col gap-1\">\n        <button\n          v-for=\"entry in paletteEntries\"\n          :key=\"entry.type\"\n          type=\"button\"\n          class=\"flex items-start gap-2 rounded-md border bg-background px-2 py-1.5 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40\"\n          :data-testid=\"`element-list-builder-palette-${entry.type}`\"\n          @click=\"onPaletteClick(entry.type)\"\n        >\n          <Plus class=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n          <span class=\"flex min-w-0 flex-col gap-0.5\">\n            <span class=\"font-medium\">{{ entry.meta.displayLabel }}</span>\n            <span class=\"line-clamp-2 text-[10px] text-muted-foreground\">\n              {{ entry.meta.description }}\n            </span>\n          </span>\n        </button>\n      </div>\n    </aside>\n\n    <section\n      class=\"flex flex-col gap-3 overflow-y-auto p-3\"\n      data-testid=\"element-list-builder-canvas\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4\n          class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n        >\n          Elements\n        </h4>\n        <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n          builder/element-list-builder\n        </Badge>\n      </header>\n\n      <p\n        v-if=\"elements.length === 0\"\n        class=\"rounded-md border border-dashed bg-background py-6 text-center text-xs text-muted-foreground\"\n        data-testid=\"element-list-builder-canvas-empty\"\n      >\n        Click an element in the palette to add it.\n      </p>\n\n      <ul\n        v-else\n        class=\"flex flex-col gap-1 text-xs\"\n        data-testid=\"element-list-builder-canvas-list\"\n      >\n        <li\n          v-for=\"(row, index) in elementRows\"\n          :key=\"row.id\"\n          class=\"flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors\"\n          :class=\"\n            builder.selection.value.id === row.id\n              ? 'border-primary bg-accent/30'\n              : ''\n          \"\n          :data-testid=\"`element-list-builder-row-${row.id}`\"\n          @click=\"onCanvasRowClick(row.id)\"\n        >\n          <span class=\"w-6 text-right tabular-nums text-muted-foreground\">\n            {{ index + 1 }}.\n          </span>\n          <span class=\"font-medium\">{{ row.label }}</span>\n          <Badge variant=\"secondary\" class=\"ml-auto font-mono text-[9px]\">\n            {{ row.type }}\n          </Badge>\n        </li>\n      </ul>\n    </section>\n\n    <aside\n      class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n      data-testid=\"element-list-builder-inspector\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4\n          class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n        >\n          Inspector\n        </h4>\n        <Button\n          v-if=\"builder.selection.value.id\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label=\"Clear selection\"\n          @click=\"onClearSelection\"\n        >\n          <X class=\"h-3.5 w-3.5\" />\n        </Button>\n      </header>\n\n      <p\n        v-if=\"!selectedElement\"\n        class=\"py-3 text-xs text-muted-foreground\"\n        data-testid=\"element-list-builder-inspector-empty\"\n      >\n        Select an element on the canvas to edit its properties.\n      </p>\n\n      <div\n        v-else\n        class=\"flex flex-col gap-3\"\n        data-testid=\"element-list-builder-inspector-fields\"\n      >\n        <Card class=\"border-dashed\">\n          <CardHeader class=\"py-2\">\n            <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n              {{ selectedTypeLabel }}\n            </CardTitle>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2 pb-3\">\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"elb-label\">Label</Label>\n              <Input\n                id=\"elb-label\"\n                :model-value=\"labelValue\"\n                data-testid=\"element-list-builder-inspector-label\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelected({\n                      label: (e.target as HTMLInputElement).value,\n                    })\n                \"\n              />\n            </div>\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"elb-name\">Field name</Label>\n              <Input\n                id=\"elb-name\"\n                :model-value=\"nameValue\"\n                data-testid=\"element-list-builder-inspector-name\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelected({\n                      name: (e.target as HTMLInputElement).value,\n                    })\n                \"\n              />\n            </div>\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"elb-placeholder\">Placeholder</Label>\n              <Input\n                id=\"elb-placeholder\"\n                :model-value=\"placeholderValue\"\n                data-testid=\"element-list-builder-inspector-placeholder\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelected({\n                      placeholder: (e.target as HTMLInputElement).value,\n                    })\n                \"\n              />\n            </div>\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"elb-help\">Help text</Label>\n              <Textarea\n                id=\"elb-help\"\n                :model-value=\"helpTextValue\"\n                data-testid=\"element-list-builder-inspector-help\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelected({\n                      helpText: (e.target as HTMLTextAreaElement).value,\n                    })\n                \"\n              />\n            </div>\n\n            <div\n              class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n            >\n              <Label for=\"elb-required\">Required</Label>\n              <Switch\n                id=\"elb-required\"\n                :model-value=\"requiredValue\"\n                data-testid=\"element-list-builder-inspector-required\"\n                @update:model-value=\"(v: boolean) => patchSelected({ required: v })\"\n              />\n            </div>\n            <div\n              class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n            >\n              <Label for=\"elb-readonly\">Read-only</Label>\n              <Switch\n                id=\"elb-readonly\"\n                :model-value=\"readonlyValue\"\n                @update:model-value=\"(v: boolean) => patchSelected({ readonly: v })\"\n              />\n            </div>\n            <div\n              class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n            >\n              <Label for=\"elb-disabled\">Disabled</Label>\n              <Switch\n                id=\"elb-disabled\"\n                :model-value=\"disabledValue\"\n                @update:model-value=\"(v: boolean) => patchSelected({ disabled: v })\"\n              />\n            </div>\n          </CardContent>\n        </Card>\n\n        <div class=\"flex items-center gap-1\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            :disabled=\"selectedIndex <= 0\"\n            data-testid=\"element-list-builder-move-up\"\n            @click=\"onMoveUp\"\n          >\n            <ArrowUp class=\"h-3.5 w-3.5\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            :disabled=\"!canMoveDown\"\n            data-testid=\"element-list-builder-move-down\"\n            @click=\"onMoveDown\"\n          >\n            <ArrowDown class=\"h-3.5 w-3.5\" />\n          </Button>\n          <Button\n            variant=\"destructive\"\n            size=\"sm\"\n            class=\"ml-auto\"\n            data-testid=\"element-list-builder-remove\"\n            @click=\"onRemove\"\n          >\n            <Trash2 class=\"h-3.5 w-3.5\" />\n            Remove\n          </Button>\n        </div>\n      </div>\n    </aside>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import e from "./FormBuilder.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/builder/FormBuilder.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=FormBuilder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilder.js","names":[],"sources":["../../../../../src/components/compositions/elements/builder/FormBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * FormBuilder — visual schema builder.\n *\n * Three-pane layout:\n *   - LEFT  (Palette):    Clickable list of element types from\n *                         CardElementMetadataMap. Click to append a\n *                         new element to the root card.\n *   - MIDDLE (Canvas):    Live preview via CardRenderer plus a drag-\n *                         sortable grid canvas. Each element block shows\n *                         a center-top reorder handle and a top-right\n *                         resize handle on hover.\n *   - RIGHT (Inspector):  Property panel for the selected element.\n *                         Every input writes through the\n *                         formBuilderStore.\n *\n * State is owned by `formBuilderStore` (Pinia). The builder accepts an\n * optional initial schema via `modelValue` and emits the current schema\n * through `update:modelValue` so the host page can save it like any\n * other form field.\n *\n * Drag reorder: center-top handle → pointer events snap element to new\n * index in elementList.\n * Drag resize: top-right handle → pointer events set colSpan (1–4) on\n * the element, mapping to 25/50/75/100 % of the canvas width.\n */\nimport { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from \"vue\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  ChevronRight,\n  ChevronsLeftRight,\n  GripHorizontal,\n  Info,\n  LayoutList,\n  Maximize2,\n  Minimize2,\n  PencilLine,\n  Plus,\n  Trash2,\n  X,\n} from \"@lucide/vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport { CardElementMetadataMap, CardElementStylesMap, getElementEditConfig } from \"@/definitions/elements\"\nimport type { EditConfigField } from \"@/definitions/shared/base\"\nimport { joinElementType, splitElementType } from \"@/definitions/shared/base\"\nimport { shouldRender } from \"@/engine/useDisplayConditions\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { Switch } from \"@/components/ui/switch\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport {\n  useFormBuilder,\n  type BuilderSchema,\n} from \"@/stores/formBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface FormBuilderProps {\n  /** Initial / current schema. Two-way bindable via v-model. */\n  modelValue?: BuilderSchema\n  /**\n   * Identifier used to key the formBuilderStore. Defaults to a stable\n   * auto-generated id so multiple FormBuilders on the same page don't\n   * collide.\n   */\n  builderId?: string\n  label?: string\n  name?: string | null\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<FormBuilderProps>(), {\n  item: () => ({}),\n})\n\nconst model = defineModel<BuilderSchema | undefined>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n  nextAutoId += 1\n  return `form-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\n\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\n/** Controls which canvas view is active. */\nconst canvasMode = ref<\"inline\" | \"list\">(\"list\")\n\n/**\n * When non-null the canvas is \"zoomed into\" a specific card-type element.\n * Only that card's children are shown and editable. Schema storage is\n * unaffected — this is purely a UI focus state.\n */\nconst zoomedCardId = ref<string | null>(null)\nconst isZoomed = computed(() => zoomedCardId.value !== null)\nconst zoomedCardElement = computed(() =>\n  zoomedCardId.value\n    ? (builder.schema.value.elements[zoomedCardId.value] ?? null)\n    : null,\n)\n\nfunction zoomInto(elementId: string): void {\n  zoomedCardId.value = elementId\n  builder.select(\"element\", elementId)\n}\n\nfunction zoomOut(): void {\n  zoomedCardId.value = null\n}\n\nconst builder = useFormBuilder(builderId.value)\n\nfunction isBuilderSchema(value: unknown): value is BuilderSchema {\n  if (typeof value !== \"object\" || value === null) {\n    return false\n  }\n  const v = value as Record<string, unknown>\n  return (\n    typeof v.rootCardId === \"string\" &&\n    typeof v.cards === \"object\" &&\n    v.cards !== null &&\n    typeof v.elements === \"object\" &&\n    v.elements !== null\n  )\n}\n\n/** Seed the store from the initial modelValue. */\nonMounted(() => {\n  const seed = model.value\n  if (isBuilderSchema(seed)) {\n    builder.loadSchema(seed)\n  }\n})\n\n/** Push schema changes back via v-model. */\nwatch(\n  () => builder.schema.value,\n  (next) => {\n    model.value = next\n  },\n  { deep: true },\n)\n\nconst rootCard = computed(\n  () => builder.schema.value.cards[builder.schema.value.rootCardId],\n)\n\nconst canvasRootContainerId = computed(() => builder.schema.value.rootCardId)\n\n/** Active container for the visible canvas — root unless zoomed into a card element. */\nconst activeCanvasContainerId = computed(() => zoomedCardId.value ?? canvasRootContainerId.value)\n\n/** The element list shown in the canvas — scoped to the zoomed card when active. */\nconst activeElementList = computed(() =>\n  zoomedCardId.value ? getElementList(zoomedCardId.value) : rootElementList.value,\n)\n\nconst rootElementList = computed<string[]>(() => {\n  const card = rootCard.value\n  if (!card) {\n    return []\n  }\n  return ((card as unknown as Record<string, unknown>).elementList as string[]) ?? []\n})\n\n/** True when an element's type starts with \"card.\" — it acts as a nested container. */\nfunction isCardElement(elementId: string): boolean {\n  const el = builder.schema.value.elements[elementId]\n  if (!el) return false\n  return String((el as unknown as Record<string, unknown>).type ?? \"\").startsWith(\"card.\")\n}\n\n/** Returns the elementList for any container (card or card-type element). */\nfunction getElementList(containerId: string): string[] {\n  const schema = builder.schema.value\n  const card = schema.cards[containerId]\n  if (card) return ((card as unknown as Record<string, unknown>).elementList as string[] | undefined) ?? []\n  const el = schema.elements[containerId]\n  if (el) return ((el as unknown as Record<string, unknown>).elementList as string[] | undefined) ?? []\n  return []\n}\n\n/**\n * For inline-mode rendering: augments a card-type element with resolved\n * `nestedElements` so the composition receives actual child objects, not IDs.\n */\nfunction resolveElementForRender(elementId: string): CardElement {\n  const el = builder.schema.value.elements[elementId]!\n  if (!isCardElement(elementId)) return el\n  const bag = el as unknown as Record<string, unknown>\n  const childIds = (bag.elementList as string[] | undefined) ?? []\n  const nestedElements = childIds\n    .map((id) => builder.schema.value.elements[id])\n    .filter(Boolean)\n  return { ...el, nestedElements } as unknown as CardElement\n}\n\nconst paletteGroups = computed(() =>\n  (\n    Object.entries(CardElementMetadataMap) as Array<\n      [\n        keyof typeof CardElementMetadataMap,\n        (typeof CardElementMetadataMap)[keyof typeof CardElementMetadataMap],\n      ]\n    >\n  ).map(([type, meta]) => ({\n    type,\n    meta,\n    styles: CardElementStylesMap[type],\n  })),\n)\n\nconst expandedGroups = reactive<Record<string, boolean>>({})\n\nfunction toggleGroup(type: string): void {\n  expandedGroups[type] = !expandedGroups[type]\n}\n\nconst selectedElement = computed<CardElement | null>(() => {\n  const sel = builder.selection.value\n  if (sel.kind !== \"element\" || !sel.id) {\n    return null\n  }\n  return builder.schema.value.elements[sel.id] ?? null\n})\n\n/** ID of the container that owns the currently selected element. */\nconst selectedContainerId = computed<string>(() => {\n  const sel = builder.selection.value\n  if (sel.kind !== \"element\" || !sel.id) return canvasRootContainerId.value\n  if (rootElementList.value.includes(sel.id)) return canvasRootContainerId.value\n  for (const [elId, el] of Object.entries(builder.schema.value.elements)) {\n    const bag = el as unknown as Record<string, unknown>\n    if (typeof bag.type === \"string\" && (bag.type as string).startsWith(\"card.\")) {\n      if (((bag.elementList as string[] | undefined) ?? []).includes(sel.id)) {\n        return elId\n      }\n    }\n  }\n  return canvasRootContainerId.value\n})\n\nconst selectedContainerList = computed<string[]>(() => getElementList(selectedContainerId.value))\n\nconst selectedIndex = computed<number>(() => {\n  const sel = builder.selection.value\n  if (sel.kind !== \"element\" || !sel.id) return -1\n  return selectedContainerList.value.indexOf(sel.id)\n})\n\nconst canMoveDown = computed<boolean>(() => {\n  const list = selectedContainerList.value\n  return selectedIndex.value >= 0 && selectedIndex.value < list.length - 1\n})\n\nfunction onStyleClick(category: keyof typeof CardElementMetadataMap, style: string): void {\n  const sel = builder.selection.value\n  // Priority: 1) zoomed card container, 2) selected card element, 3) root.\n  let containerId: string\n  if (zoomedCardId.value) {\n    containerId = zoomedCardId.value\n  } else if (sel.kind === \"element\" && sel.id && isCardElement(sel.id)) {\n    containerId = sel.id\n  } else {\n    containerId = builder.schema.value.rootCardId\n  }\n  const newId = builder.addElement(containerId, `${category}.${style}`)\n  builder.select(\"element\", newId)\n}\n\nfunction onCanvasElementClick(elementId: string): void {\n  builder.select(\"element\", elementId)\n}\n\nfunction onMoveUp(): void {\n  if (selectedIndex.value <= 0) return\n  builder.reorderElement(selectedContainerId.value, selectedIndex.value, selectedIndex.value - 1)\n}\n\nfunction onMoveDown(): void {\n  if (!canMoveDown.value) return\n  builder.reorderElement(selectedContainerId.value, selectedIndex.value, selectedIndex.value + 1)\n}\n\nfunction onRemove(): void {\n  const sel = builder.selection.value\n  if (sel.kind === \"element\" && sel.id) {\n    builder.removeElement(sel.id)\n  } else if (sel.kind === \"card\" && sel.id) {\n    builder.removeCard(sel.id)\n  }\n}\n\nfunction onClearSelection(): void {\n  builder.select(null, null)\n}\n\nfunction patchSelected(patch: Partial<CardElement>): void {\n  const sel = builder.selection.value\n  if (sel.kind === \"element\" && sel.id) {\n    builder.updateElement(sel.id, patch)\n  }\n}\n\n/**\n * Dynamically resolved list of inspector fields for the selected element.\n * Uses the category-level EditConfig and evaluates conditionParams against a\n * virtual item that includes `style` extracted from the dot-notation type so\n * conditions like `{ name: \"style\", logic: \"==\", value: \"textarea\" }` work.\n */\nconst inspectorFields = computed<Array<{ fieldName: string; spec: EditConfigField }>>(() => {\n  const el = selectedElement.value\n  if (!el) return []\n\n  const editConfig = getElementEditConfig(el.type)\n  if (!editConfig) return []\n\n  const { style } = splitElementType(el.type)\n  const virtualItem = { ...(el as unknown as Record<string, unknown>), style }\n\n  return Object.entries(editConfig)\n    .filter(([, spec]) => {\n      const t = (spec as EditConfigField).type as string\n      // Skip fields that need complex nested renderers in the inspector.\n      if (t?.startsWith(\"configuration-block.\")) return false\n      if (t?.startsWith(\"builder.\")) return false\n      if (t?.startsWith(\"code.\")) return false\n      return shouldRender(spec as EditConfigField, virtualItem)\n    })\n    .map(([fieldName, spec]) => ({ fieldName, spec: spec as EditConfigField }))\n})\n\nfunction getFieldValue(fieldName: string): unknown {\n  const el = selectedElement.value as unknown as Record<string, unknown> | null\n  // `style` is not stored separately — derive it from the dot-notation `type`.\n  if (fieldName === \"style\" && el?.type) {\n    return splitElementType(String(el.type)).style\n  }\n  return el?.[fieldName] ?? \"\"\n}\n\nfunction onFieldInput(fieldName: string, value: unknown): void {\n  // A style change means the element type changes: \"boolean.checkbox\" → \"boolean.switch\".\n  if (fieldName === \"style\") {\n    const el = selectedElement.value\n    if (!el) return\n    const { category } = splitElementType(el.type)\n    patchSelected({ type: joinElementType(category, String(value)) } as unknown as Partial<CardElement>)\n    return\n  }\n  patchSelected({ [fieldName]: value } as Partial<CardElement>)\n}\n\n/* ------------------------------------------------------------------ */\n/* Drag-reorder + drag-resize                                          */\n/* ------------------------------------------------------------------ */\n\nconst canvasEl = ref<HTMLElement | null>(null)\n\ninterface FormDragState {\n  mode: \"reorder\" | \"resize\"\n  elementId: string\n  fromContainerId: string\n  fromIndex: number\n  startClientX: number\n  startColSpan: number\n  containerWidth: number\n  pointerId: number\n  captureTarget: HTMLElement\n}\n\nconst activeDrag = ref<FormDragState | null>(null)\nconst dropTargetIndex = ref<number | null>(null)\nconst dropContainerId = ref<string | null>(null)\n\n/** colSpan (1–4) is stored directly on the element as a builder prop. */\nfunction getColSpan(elementId: string): number {\n  const el = builder.schema.value.elements[elementId] as unknown as Record<string, unknown>\n  const span = el?.colSpan\n  return typeof span === \"number\" && span >= 1 && span <= 4 ? span : 4\n}\n\nfunction elementGridStyle(elementId: string): Record<string, string> {\n  return { gridColumn: `span ${getColSpan(elementId)}` }\n}\n\nfunction beginFormDrag(\n  mode: \"reorder\" | \"resize\",\n  elementId: string,\n  fromContainerId: string,\n  fromIndex: number,\n  event: PointerEvent,\n): void {\n  if (event.button !== 0) return\n  event.preventDefault()\n  event.stopPropagation()\n  builder.select(\"element\", elementId)\n  const target = event.target as HTMLElement\n  try {\n    target.setPointerCapture(event.pointerId)\n  } catch {\n    // jsdom or restricted context\n  }\n  activeDrag.value = {\n    mode,\n    elementId,\n    fromContainerId,\n    fromIndex,\n    startClientX: event.clientX,\n    startColSpan: getColSpan(elementId),\n    containerWidth: canvasEl.value?.getBoundingClientRect().width ?? 0,\n    pointerId: event.pointerId,\n    captureTarget: target,\n  }\n  if (mode === \"reorder\") {\n    dropTargetIndex.value = fromIndex\n    dropContainerId.value = fromContainerId\n  }\n  window.addEventListener(\"pointermove\", onFormPointerMove)\n  window.addEventListener(\"pointerup\", onFormPointerUp)\n  window.addEventListener(\"pointercancel\", onFormPointerUp)\n}\n\nfunction onReorderHandlePointerDown(\n  elementId: string,\n  containerId: string,\n  index: number,\n  event: PointerEvent,\n): void {\n  beginFormDrag(\"reorder\", elementId, containerId, index, event)\n}\n\nfunction onResizeHandlePointerDown(\n  elementId: string,\n  event: PointerEvent,\n): void {\n  beginFormDrag(\"resize\", elementId, canvasRootContainerId.value, -1, event)\n}\n\nfunction onFormPointerMove(event: PointerEvent): void {\n  const state = activeDrag.value\n  if (!state) return\n\n  if (state.mode === \"resize\") {\n    const dx = event.clientX - state.startClientX\n    const colW = (state.containerWidth > 0 ? state.containerWidth : 400) / 4\n    const colDelta = Math.round(dx / colW)\n    const newSpan = Math.max(1, Math.min(4, state.startColSpan + colDelta))\n    builder.updateElement(state.elementId, { colSpan: newSpan } as unknown as Partial<CardElement>)\n    return\n  }\n\n  const target = document.elementFromPoint(event.clientX, event.clientY)\n  if (!target) return\n\n  // Determine which container the pointer is over (innermost wins).\n  const containerEl = (target as HTMLElement).closest(\"[data-container-id]\")\n  const cId = (containerEl as HTMLElement | null)?.dataset.containerId ?? null\n  dropContainerId.value = cId\n\n  // Find the element block index within that container.\n  let blockEl: Element | null = (target as HTMLElement).closest(\"[data-element-block-index]\")\n  // Discard if the block is outside (ancestor of) the detected container.\n  if (blockEl && containerEl && !containerEl.contains(blockEl)) {\n    blockEl = null\n  }\n  if (blockEl) {\n    const idx = Number.parseInt(\n      (blockEl as HTMLElement).dataset.elementBlockIndex ?? \"-1\",\n      10,\n    )\n    if (idx >= 0) dropTargetIndex.value = idx\n  } else {\n    // Hovering over empty space in the container — drop at end.\n    dropTargetIndex.value = cId ? getElementList(cId).length : null\n  }\n}\n\nfunction onFormPointerUp(event: PointerEvent): void {\n  const state = activeDrag.value\n  if (!state) {\n    cleanupFormDrag()\n    return\n  }\n  try {\n    state.captureTarget.releasePointerCapture(state.pointerId)\n  } catch {\n    // ignore\n  }\n  if (state.mode === \"reorder\" && dropTargetIndex.value !== null) {\n    const targetContainer = dropContainerId.value ?? state.fromContainerId\n    if (targetContainer !== state.fromContainerId) {\n      builder.moveElement(state.fromContainerId, targetContainer, state.elementId, dropTargetIndex.value)\n    } else if (dropTargetIndex.value !== state.fromIndex) {\n      builder.reorderElement(state.fromContainerId, state.fromIndex, dropTargetIndex.value)\n    }\n  }\n  cleanupFormDrag()\n  void event\n}\n\nfunction cleanupFormDrag(): void {\n  activeDrag.value = null\n  dropTargetIndex.value = null\n  dropContainerId.value = null\n  window.removeEventListener(\"pointermove\", onFormPointerMove)\n  window.removeEventListener(\"pointerup\", onFormPointerUp)\n  window.removeEventListener(\"pointercancel\", onFormPointerUp)\n}\n\nonBeforeUnmount(() => {\n  cleanupFormDrag()\n})\n\nconst outerGridColumns = computed(() =>\n  selectedElement.value\n    ? \"220px 1fr 280px\"\n    : \"220px 1fr 2rem\",\n)\n</script>\n\n<template>\n  <div\n    :class=\"cn('gxp-form-builder grid gap-3 rounded-lg border bg-card', props.classList)\"\n    :style=\"{ gridTemplateColumns: outerGridColumns, minHeight: '24rem', transition: 'grid-template-columns 200ms ease' }\"\n    data-testid=\"form-builder\"\n    :data-element-name=\"props.name ?? undefined\"\n  >\n    <aside\n      class=\"flex flex-col gap-2 border-r p-3 overflow-y-auto\"\n      data-testid=\"form-builder-palette\"\n    >\n      <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n        {{ props.label ?? \"Element palette\" }}\n      </h4>\n      <div class=\"flex flex-col gap-0.5\">\n        <div\n          v-for=\"entry in paletteGroups\"\n          :key=\"entry.type\"\n        >\n          <button\n            type=\"button\"\n            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\"\n            :data-testid=\"`form-builder-palette-${entry.type}`\"\n            @click=\"toggleGroup(entry.type)\"\n          >\n            <ChevronRight\n              class=\"mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-150\"\n              :class=\"expandedGroups[entry.type] ? 'rotate-90' : ''\"\n            />\n            <span class=\"flex min-w-0 flex-col gap-0.5\">\n              <span class=\"font-medium\">{{ entry.meta.displayLabel }}</span>\n              <span class=\"line-clamp-2 text-[10px] text-muted-foreground\">\n                {{ entry.meta.description }}\n              </span>\n            </span>\n          </button>\n\n          <div\n            v-if=\"expandedGroups[entry.type]\"\n            class=\"ml-5 flex flex-col gap-0.5 pb-1\"\n          >\n            <button\n              v-for=\"styleOption in entry.styles\"\n              :key=\"styleOption.value\"\n              type=\"button\"\n              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\"\n              :data-testid=\"`form-builder-palette-${entry.type}-${styleOption.value}`\"\n              @click=\"onStyleClick(entry.type, styleOption.value)\"\n            >\n              <Plus class=\"h-3 w-3 shrink-0 text-muted-foreground\" />\n              {{ styleOption.label }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </aside>\n\n    <section\n      class=\"flex flex-col gap-3 overflow-y-auto p-3\"\n      data-testid=\"form-builder-canvas\"\n    >\n      <header class=\"flex flex-col gap-2\">\n        <!-- Zoom breadcrumb — shown when focused into a card element -->\n        <div\n          v-if=\"isZoomed\"\n          class=\"flex items-center gap-2 rounded-md border bg-muted/40 px-2.5 py-1.5 text-xs\"\n          data-testid=\"form-builder-zoom-breadcrumb\"\n        >\n          <button\n            type=\"button\"\n            class=\"flex items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground\"\n            data-testid=\"form-builder-zoom-out\"\n            @click=\"zoomOut\"\n          >\n            <Minimize2 class=\"h-3.5 w-3.5\" />\n            <span>Full form</span>\n          </button>\n          <span class=\"text-muted-foreground/50\">/</span>\n          <span class=\"font-medium\">\n            {{ (zoomedCardElement as Record<string, unknown> | null)?.label ?? 'Card' }}\n          </span>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n            {{ canvasMode === \"inline\" ? \"Canvas\" : isZoomed ? \"Card preview\" : \"Preview\" }}\n          </h4>\n          <div class=\"flex items-center gap-2\">\n            <!-- Mode toggle -->\n            <div class=\"flex items-center rounded-md border p-0.5\">\n              <button\n                type=\"button\"\n                class=\"rounded px-1.5 py-0.5 transition-colors\"\n                :class=\"canvasMode === 'list' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'\"\n                title=\"List mode — separate preview and element list\"\n                data-testid=\"form-builder-mode-list\"\n                @click=\"canvasMode = 'list'\"\n              >\n                <LayoutList class=\"h-3.5 w-3.5\" />\n              </button>\n              <button\n                type=\"button\"\n                class=\"rounded px-1.5 py-0.5 transition-colors\"\n                :class=\"canvasMode === 'inline' ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:text-foreground'\"\n                title=\"Inline mode — live interactive canvas\"\n                data-testid=\"form-builder-mode-inline\"\n                @click=\"canvasMode = 'inline'\"\n              >\n                <PencilLine class=\"h-3.5 w-3.5\" />\n              </button>\n            </div>\n            <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n              builder/form-builder\n            </Badge>\n          </div>\n        </div>\n      </header>\n\n      <!-- ─── LIST MODE ──────────────────────────────────────────────── -->\n      <template v-if=\"canvasMode === 'list'\">\n        <!-- Preview section: full CardRenderer when at root, element preview when zoomed -->\n        <div class=\"rounded-md border border-dashed bg-background p-3\">\n          <template v-if=\"isZoomed && zoomedCardId\">\n            <Suspense>\n              <ElementRenderer\n                :element=\"resolveElementForRender(zoomedCardId)\"\n                :item=\"props.item\"\n              />\n            </Suspense>\n            <p\n              v-if=\"!activeElementList.length\"\n              class=\"py-6 text-center text-xs text-muted-foreground\"\n              data-testid=\"form-builder-canvas-empty\"\n            >\n              Click an element in the palette to add it.\n            </p>\n          </template>\n          <template v-else-if=\"rootCard\">\n            <CardRenderer\n              :card=\"rootCard\"\n              :item=\"props.item\"\n              :elements=\"builder.schema.value.elements\"\n              :cards=\"builder.schema.value.cards\"\n            />\n            <p\n              v-if=\"rootElementList.length === 0\"\n              class=\"py-6 text-center text-xs text-muted-foreground\"\n              data-testid=\"form-builder-canvas-empty\"\n            >\n              Click an element in the palette to add it.\n            </p>\n          </template>\n        </div>\n\n        <!-- Drag-sortable grid canvas — scoped to active container -->\n        <div\n          ref=\"canvasEl\"\n          class=\"grid gap-2 text-xs\"\n          style=\"grid-template-columns: repeat(4, minmax(0, 1fr))\"\n          :data-container-id=\"activeCanvasContainerId\"\n          data-testid=\"form-builder-canvas-list\"\n        >\n          <p\n            v-if=\"!activeElementList.length\"\n            class=\"col-span-full py-4 text-center text-muted-foreground\"\n          >\n            Add elements from the palette.\n          </p>\n          <div\n            v-for=\"(elId, index) in activeElementList\"\n            :key=\"elId\"\n            :data-element-block-index=\"index\"\n            :data-testid=\"`form-builder-row-${elId}`\"\n            class=\"group relative cursor-pointer select-none rounded border bg-background transition-colors\"\n            :class=\"[\n              isCardElement(elId) ? 'px-2 pb-2 pt-5' : 'px-2 pb-2 pt-5 text-center',\n              builder.selection.value.kind === 'element' && builder.selection.value.id === elId\n                ? 'border-primary bg-accent/30'\n                : 'hover:border-primary/50',\n              activeDrag?.elementId === elId && activeDrag.mode === 'reorder'\n                ? 'opacity-40 ring-2 ring-primary'\n                : '',\n              dropContainerId === activeCanvasContainerId &&\n              dropTargetIndex === index &&\n              activeDrag?.mode === 'reorder' &&\n              activeDrag?.elementId !== elId\n                ? 'ring-2 ring-primary/60 bg-primary/5'\n                : '',\n            ]\"\n            :style=\"elementGridStyle(elId)\"\n            @click=\"onCanvasElementClick(elId)\"\n          >\n            <!-- Center-top reorder handle -->\n            <span\n              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\"\n              title=\"Drag to reorder\"\n              @click.stop\n              @pointerdown.stop=\"(e: PointerEvent) => onReorderHandlePointerDown(elId, activeCanvasContainerId, index, e)\"\n            >\n              <GripHorizontal class=\"h-3 w-3 text-muted-foreground\" />\n            </span>\n\n            <!-- Top-right resize handle -->\n            <span\n              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\"\n              :title=\"`Width: ${getColSpan(elId)}/4 — drag to resize`\"\n              @click.stop\n              @pointerdown.stop=\"(e: PointerEvent) => onResizeHandlePointerDown(elId, e)\"\n            >\n              <ChevronsLeftRight class=\"h-3 w-3 text-muted-foreground\" />\n            </span>\n\n            <!-- Non-card element: label + type badge -->\n            <template v-if=\"!isCardElement(elId)\">\n              <span class=\"block truncate font-medium leading-tight\">\n                {{ builder.schema.value.elements[elId]?.label ?? \"(unnamed)\" }}\n              </span>\n              <Badge variant=\"secondary\" class=\"mt-1 font-mono text-[9px]\">\n                {{ builder.schema.value.elements[elId]?.type }}\n              </Badge>\n            </template>\n\n            <!-- Card-type element: label + nested droppable container -->\n            <template v-else>\n              <!-- Zoom-in button — top-left, shown on hover or when selected -->\n              <button\n                type=\"button\"\n                class=\"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\"\n                :class=\"{ '!opacity-100': builder.selection.value.kind === 'element' && builder.selection.value.id === elId }\"\n                title=\"Zoom into this card\"\n                data-testid=\"form-builder-zoom-in\"\n                @click.stop=\"zoomInto(elId)\"\n              >\n                <Maximize2 class=\"h-3 w-3\" />\n              </button>\n              <div>\n                <span class=\"block truncate font-medium leading-tight\">\n                  {{ builder.schema.value.elements[elId]?.label ?? \"(unnamed)\" }}\n                </span>\n                <Badge variant=\"outline\" class=\"mt-1 font-mono text-[9px]\">\n                  {{ builder.schema.value.elements[elId]?.type }}\n                </Badge>\n              </div>\n              <!-- Nested mini-grid for children -->\n              <div\n                class=\"mt-1.5 grid gap-1 rounded border border-dashed bg-muted/20 p-1\"\n                style=\"grid-template-columns: repeat(4, minmax(0, 1fr))\"\n                :data-container-id=\"elId\"\n                @click.stop=\"onCanvasElementClick(elId)\"\n              >\n                <p\n                  v-if=\"!getElementList(elId).length\"\n                  class=\"col-span-full py-2 text-center text-[10px] text-muted-foreground\"\n                >\n                  Drop elements here — or select &amp; use palette\n                </p>\n                <div\n                  v-for=\"(childId, childIdx) in getElementList(elId)\"\n                  :key=\"childId\"\n                  :data-element-block-index=\"childIdx\"\n                  :data-testid=\"`form-builder-row-${childId}`\"\n                  class=\"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                  :class=\"[\n                    builder.selection.value.kind === 'element' && builder.selection.value.id === childId\n                      ? 'border-primary bg-accent/30'\n                      : 'hover:border-primary/50',\n                    activeDrag?.elementId === childId && activeDrag.mode === 'reorder'\n                      ? 'opacity-40 ring-2 ring-primary'\n                      : '',\n                    dropContainerId === elId &&\n                    dropTargetIndex === childIdx &&\n                    activeDrag?.mode === 'reorder' &&\n                    activeDrag?.elementId !== childId\n                      ? 'ring-2 ring-primary/60 bg-primary/5'\n                      : '',\n                  ]\"\n                  :style=\"elementGridStyle(childId)\"\n                  @click.stop=\"onCanvasElementClick(childId)\"\n                >\n                  <span\n                    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\"\n                    title=\"Drag to reorder\"\n                    @click.stop\n                    @pointerdown.stop=\"(e: PointerEvent) => onReorderHandlePointerDown(childId, elId, childIdx, e)\"\n                  >\n                    <GripHorizontal class=\"h-3 w-3 text-muted-foreground\" />\n                  </span>\n                  <span\n                    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\"\n                    :title=\"`Width: ${getColSpan(childId)}/4 — drag to resize`\"\n                    @click.stop\n                    @pointerdown.stop=\"(e: PointerEvent) => onResizeHandlePointerDown(childId, e)\"\n                  >\n                    <ChevronsLeftRight class=\"h-3 w-3 text-muted-foreground\" />\n                  </span>\n                  <span class=\"block truncate font-medium leading-tight\">\n                    {{ builder.schema.value.elements[childId]?.label ?? \"(unnamed)\" }}\n                  </span>\n                  <Badge variant=\"secondary\" class=\"mt-0.5 font-mono text-[9px]\">\n                    {{ builder.schema.value.elements[childId]?.type }}\n                  </Badge>\n                </div>\n              </div>\n            </template>\n          </div>\n        </div>\n      </template>\n\n      <!-- ─── INLINE MODE ────────────────────────────────────────────── -->\n      <template v-else>\n        <div class=\"rounded-md border border-dashed bg-background p-2\">\n          <p\n            v-if=\"activeElementList.length === 0\"\n            class=\"py-6 text-center text-xs text-muted-foreground\"\n            data-testid=\"form-builder-canvas-empty\"\n          >\n            Click an element in the palette to add it.\n          </p>\n          <div\n            v-else\n            ref=\"canvasEl\"\n            class=\"grid gap-3\"\n            style=\"grid-template-columns: repeat(4, minmax(0, 1fr))\"\n            :data-container-id=\"activeCanvasContainerId\"\n            data-testid=\"form-builder-canvas-list\"\n          >\n            <div\n              v-for=\"(elId, index) in activeElementList\"\n              :key=\"elId\"\n              :data-element-block-index=\"index\"\n              :data-testid=\"`form-builder-row-${elId}`\"\n              class=\"group relative cursor-pointer rounded border pt-8 px-1.5 pb-1.5 transition-colors\"\n              :class=\"[\n                builder.selection.value.kind === 'element' && builder.selection.value.id === elId\n                  ? 'border-primary ring-1 ring-primary/30'\n                  : 'border-transparent hover:border-primary/40',\n                activeDrag?.elementId === elId && activeDrag.mode === 'reorder'\n                  ? 'opacity-40 ring-2 ring-primary'\n                  : '',\n                dropContainerId === activeCanvasContainerId &&\n                dropTargetIndex === index &&\n                activeDrag?.mode === 'reorder' &&\n                activeDrag?.elementId !== elId\n                  ? 'ring-2 ring-primary/60 bg-primary/5'\n                  : '',\n              ]\"\n              :style=\"elementGridStyle(elId)\"\n              @click=\"onCanvasElementClick(elId)\"\n            >\n              <!-- Center-top reorder handle -->\n              <span\n                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\"\n                title=\"Drag to reorder\"\n                @click.stop\n                @pointerdown.stop=\"(e: PointerEvent) => onReorderHandlePointerDown(elId, activeCanvasContainerId, index, e)\"\n              >\n                <GripHorizontal class=\"h-3 w-3 text-muted-foreground\" />\n              </span>\n\n              <!-- Top-right resize handle -->\n              <span\n                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\"\n                :title=\"`Width: ${getColSpan(elId)}/4 — drag to resize`\"\n                @click.stop\n                @pointerdown.stop=\"(e: PointerEvent) => onResizeHandlePointerDown(elId, e)\"\n              >\n                <ChevronsLeftRight class=\"h-3 w-3 text-muted-foreground\" />\n              </span>\n\n              <!-- Zoom-in button — card elements only, top-left, shown on hover or when selected -->\n              <button\n                v-if=\"isCardElement(elId)\"\n                type=\"button\"\n                class=\"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\"\n                :class=\"{ '!opacity-100': builder.selection.value.kind === 'element' && builder.selection.value.id === elId }\"\n                title=\"Zoom into this card\"\n                data-testid=\"form-builder-zoom-in\"\n                @click.stop=\"zoomInto(elId)\"\n              >\n                <Maximize2 class=\"h-3.5 w-3.5\" />\n              </button>\n\n              <!-- Live element render — card elements get resolved nestedElements -->\n              <ElementRenderer\n                :element=\"resolveElementForRender(elId)\"\n                :item=\"props.item\"\n              />\n            </div>\n          </div>\n        </div>\n      </template>\n    </section>\n\n    <!-- ─── INSPECTOR (collapsed) ──────────────────────────────────────── -->\n    <aside\n      v-if=\"!selectedElement\"\n      class=\"flex items-start justify-center border-l pt-3 overflow-hidden\"\n      data-testid=\"form-builder-inspector\"\n    >\n      <TooltipProvider>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <span\n              class=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-muted-foreground\"\n              tabindex=\"0\"\n              aria-label=\"Select an element on the canvas to edit its properties\"\n              data-testid=\"form-builder-inspector-empty\"\n            >\n              <Info class=\"h-4 w-4\" />\n            </span>\n          </TooltipTrigger>\n          <TooltipContent side=\"left\">\n            Select an element on the canvas to edit its properties\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </aside>\n\n    <!-- ─── INSPECTOR (expanded) ─────────────────────────────────────── -->\n    <aside\n      v-else\n      class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n      data-testid=\"form-builder-inspector\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n          Inspector\n        </h4>\n        <Button\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label=\"Clear selection\"\n          @click=\"onClearSelection\"\n        >\n          <X class=\"h-3.5 w-3.5\" />\n        </Button>\n      </header>\n\n      <div\n        class=\"flex flex-col gap-3\"\n        data-testid=\"form-builder-inspector-fields\"\n      >\n        <Card class=\"border-dashed\">\n          <CardHeader class=\"py-2\">\n            <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n              {{ selectedElement.type }}\n            </CardTitle>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2 pb-3\">\n            <template\n              v-for=\"field in inspectorFields\"\n              :key=\"field.fieldName\"\n            >\n              <!-- boolean switch / checkbox → toggle row -->\n              <div\n                v-if=\"field.spec.type?.toString().startsWith('boolean.')\"\n                class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n              >\n                <Label :for=\"`fb-${field.fieldName}`\" class=\"cursor-pointer\">\n                  {{ field.spec.label ?? field.fieldName }}\n                </Label>\n                <Switch\n                  :id=\"`fb-${field.fieldName}`\"\n                  :model-value=\"Boolean(getFieldValue(field.fieldName))\"\n                  :data-testid=\"`form-builder-inspector-${field.fieldName}`\"\n                  @update:model-value=\"(v: boolean) => onFieldInput(field.fieldName, v)\"\n                />\n              </div>\n\n              <!-- option-select → native select -->\n              <div\n                v-else-if=\"field.spec.type?.toString().startsWith('option-select.')\"\n                class=\"flex flex-col gap-1\"\n              >\n                <Label :for=\"`fb-${field.fieldName}`\">\n                  {{ field.spec.label ?? field.fieldName }}\n                </Label>\n                <select\n                  :id=\"`fb-${field.fieldName}`\"\n                  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\"\n                  :value=\"String(getFieldValue(field.fieldName) ?? '')\"\n                  :data-testid=\"`form-builder-inspector-${field.fieldName}`\"\n                  @change=\"(e: Event) => onFieldInput(field.fieldName, (e.target as HTMLSelectElement).value)\"\n                >\n                  <option\n                    v-for=\"opt in (field.spec.selectOptions as Array<{label: string; value: string}> ?? [])\"\n                    :key=\"opt.value\"\n                    :value=\"opt.value\"\n                  >\n                    {{ opt.label }}\n                  </option>\n                </select>\n              </div>\n\n              <!-- textarea -->\n              <div\n                v-else-if=\"field.spec.type === 'input.textarea'\"\n                class=\"flex flex-col gap-1\"\n              >\n                <Label :for=\"`fb-${field.fieldName}`\">\n                  {{ field.spec.label ?? field.fieldName }}\n                </Label>\n                <Textarea\n                  :id=\"`fb-${field.fieldName}`\"\n                  :model-value=\"String(getFieldValue(field.fieldName) ?? '')\"\n                  :data-testid=\"`form-builder-inspector-${field.fieldName}`\"\n                  @input=\"(e: Event) => onFieldInput(field.fieldName, (e.target as HTMLTextAreaElement).value)\"\n                />\n              </div>\n\n              <!-- default: text input (covers input.*, picker.*, display.*, etc.) -->\n              <div\n                v-else\n                class=\"flex flex-col gap-1\"\n              >\n                <Label :for=\"`fb-${field.fieldName}`\">\n                  {{ field.spec.label ?? field.fieldName }}\n                </Label>\n                <Input\n                  :id=\"`fb-${field.fieldName}`\"\n                  :model-value=\"String(getFieldValue(field.fieldName) ?? '')\"\n                  :data-testid=\"`form-builder-inspector-${field.fieldName}`\"\n                  @input=\"(e: Event) => onFieldInput(field.fieldName, (e.target as HTMLInputElement).value)\"\n                />\n              </div>\n            </template>\n\n            <Separator v-if=\"inspectorFields.length\" class=\"my-1\" />\n\n            <!-- Base fields always shown (not in every EditConfig) -->\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"fb-help\">Help text</Label>\n              <Textarea\n                id=\"fb-help\"\n                :model-value=\"String(getFieldValue('helpText') ?? '')\"\n                data-testid=\"form-builder-inspector-help\"\n                @input=\"(e: Event) => onFieldInput('helpText', (e.target as HTMLTextAreaElement).value)\"\n              />\n            </div>\n            <div class=\"flex items-center justify-between rounded border bg-background px-2 py-1\">\n              <Label for=\"fb-disabled\">Disabled</Label>\n              <Switch\n                id=\"fb-disabled\"\n                :model-value=\"Boolean(getFieldValue('disabled'))\"\n                @update:model-value=\"(v: boolean) => onFieldInput('disabled', v)\"\n              />\n            </div>\n          </CardContent>\n        </Card>\n\n        <div class=\"flex items-center gap-1\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            :disabled=\"selectedIndex <= 0\"\n            data-testid=\"form-builder-move-up\"\n            @click=\"onMoveUp\"\n          >\n            <ArrowUp class=\"h-3.5 w-3.5\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            :disabled=\"!canMoveDown\"\n            data-testid=\"form-builder-move-down\"\n            @click=\"onMoveDown\"\n          >\n            <ArrowDown class=\"h-3.5 w-3.5\" />\n          </Button>\n          <Button\n            variant=\"destructive\"\n            size=\"sm\"\n            class=\"ml-auto\"\n            data-testid=\"form-builder-remove\"\n            @click=\"onRemove\"\n          >\n            <Trash2 class=\"h-3.5 w-3.5\" />\n            Remove\n          </Button>\n        </div>\n      </div>\n    </aside>\n  </div>\n</template>\n"],"mappings":""}