@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/ElementListBuilder-Dcz13diI.js

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

package/dist/chunks/ElementListBuilder-Dcz13diI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementListBuilder-Dcz13diI.js","names":[],"sources":["../../src/components/compositions/elements/builder/ElementListBuilder.vue","../../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","<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/chunks/ElementListCard-B8oVHSqE.js

@@ -0,0 +1,75 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { a as t, n, o as r, r as i, s as a } from "./card-DAfWnvro.js";
+import { t as o } from "./ElementRenderer-DUhlfnFD.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderList as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
+//#region src/components/compositions/cards/ElementListCard.vue?vue&type=script&setup=true&lang.ts
+var S = {
+	key: 0,
+	class: "mb-3 flex flex-col gap-0.5"
+}, C = {
+	key: 0,
+	class: "text-base font-semibold"
+}, w = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, T = /* @__PURE__ */ m({
+	__name: "ElementListCard",
+	props: {
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		gutterY: { default: "1rem" },
+		gutterX: { default: "1rem" },
+		classList: {},
+		elements: { default: () => [] },
+		item: { default: () => ({}) }
+	},
+	setup(e) {
+		let m = e, T = c(() => m.showCard !== !1), E = c(() => !!m.title || !!m.subtitle), D = c(() => ({
+			rowGap: m.gutterY,
+			columnGap: m.gutterX
+		}));
+		return (c, m) => T.value ? (_(), l(b(a), {
+			key: 0,
+			class: "flex flex-col"
+		}, {
+			default: x(() => [E.value ? (_(), l(b(i), { key: 0 }, {
+				default: x(() => [e.title ? (_(), l(b(n), { key: 0 }, {
+					default: x(() => [f(y(e.title), 1)]),
+					_: 1
+				})) : u("", !0), e.subtitle ? (_(), l(b(t), { key: 1 }, {
+					default: x(() => [f(y(e.subtitle), 1)]),
+					_: 1
+				})) : u("", !0)]),
+				_: 1
+			})) : u("", !0), p(b(r), {
+				class: h(["flex flex-col", [E.value ? "" : "pt-6"]]),
+				style: g(D.value)
+			}, {
+				default: x(() => [(_(!0), d(s, null, v(e.elements, (t) => (_(), l(o, {
+					key: t.id,
+					element: t,
+					item: e.item
+				}, null, 8, ["element", "item"]))), 128))]),
+				_: 1
+			}, 8, ["class", "style"])]),
+			_: 1
+		})) : (_(), d("section", {
+			key: 1,
+			class: "flex flex-col",
+			style: g(D.value),
+			"data-testid": "element-list-bare"
+		}, [E.value ? (_(), d("header", S, [e.title ? (_(), d("h3", C, y(e.title), 1)) : u("", !0), e.subtitle ? (_(), d("p", w, y(e.subtitle), 1)) : u("", !0)])) : u("", !0), (_(!0), d(s, null, v(e.elements, (t) => (_(), l(o, {
+			key: t.id,
+			element: t,
+			item: e.item
+		}, null, 8, ["element", "item"]))), 128))], 4));
+	}
+}), E = /* @__PURE__ */ e({ default: () => D }), D = T;
+//#endregion
+export { E as n, D as t };
+
+//# sourceMappingURL=ElementListCard-B8oVHSqE.js.map

package/dist/chunks/ElementListCard-B8oVHSqE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementListCard-B8oVHSqE.js","names":[],"sources":["../../src/components/compositions/cards/ElementListCard.vue","../../src/components/compositions/cards/ElementListCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `element-list` card. Renders a vertical stack of\n * resolved CardElements via `ElementRenderer`.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <ElementListCard\n *     title=\"Personal details\"\n *     :elements=\"[firstName, lastName]\"\n *     :item=\"{ first_name: 'Jane' }\"\n *   />\n *\n * The JSON-driven engine reaches this composition via `CardRenderer`,\n * which is responsible for resolving the card's `elementList: string[]`\n * IDs against the page-level `elements` map and forwarding the\n * resolved CardElement array as the `elements` prop here.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface ElementListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  gutterY?: string\n  gutterX?: string\n  classList?: string[] | string\n  /** Resolved child elements (NOT IDs). */\n  elements?: CardElement[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<ElementListCardProps>(), {\n  showCard: true,\n  gutterY: \"1rem\",\n  gutterX: \"1rem\",\n  elements: () => [],\n  item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst hasHeader = computed<boolean>(\n  () => Boolean(props.title) || Boolean(props.subtitle),\n)\n\nconst bodyStyle = computed(() => ({\n  rowGap: props.gutterY,\n  columnGap: props.gutterX,\n}))\n</script>\n\n<template>\n  <Card v-if=\"showChrome\" class=\"flex flex-col\">\n    <CardHeader v-if=\"hasHeader\">\n      <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n      <CardDescription v-if=\"subtitle\">\n        {{ subtitle }}\n      </CardDescription>\n    </CardHeader>\n    <CardContent\n      class=\"flex flex-col\"\n      :class=\"[hasHeader ? '' : 'pt-6']\"\n      :style=\"bodyStyle\"\n    >\n      <ElementRenderer\n        v-for=\"element in elements\"\n        :key=\"element.id\"\n        :element=\"element\"\n        :item=\"item\"\n      />\n    </CardContent>\n  </Card>\n  <section\n    v-else\n    class=\"flex flex-col\"\n    :style=\"bodyStyle\"\n    data-testid=\"element-list-bare\"\n  >\n    <header v-if=\"hasHeader\" class=\"mb-3 flex flex-col gap-0.5\">\n      <h3 v-if=\"title\" class=\"text-base font-semibold\">\n        {{ title }}\n      </h3>\n      <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n        {{ subtitle }}\n      </p>\n    </header>\n    <ElementRenderer\n      v-for=\"element in elements\"\n      :key=\"element.id\"\n      :element=\"element\"\n      :item=\"item\"\n    />\n  </section>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven `element-list` card. Renders a vertical stack of\n * resolved CardElements via `ElementRenderer`.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <ElementListCard\n *     title=\"Personal details\"\n *     :elements=\"[firstName, lastName]\"\n *     :item=\"{ first_name: 'Jane' }\"\n *   />\n *\n * The JSON-driven engine reaches this composition via `CardRenderer`,\n * which is responsible for resolving the card's `elementList: string[]`\n * IDs against the page-level `elements` map and forwarding the\n * resolved CardElement array as the `elements` prop here.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface ElementListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  gutterY?: string\n  gutterX?: string\n  classList?: string[] | string\n  /** Resolved child elements (NOT IDs). */\n  elements?: CardElement[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<ElementListCardProps>(), {\n  showCard: true,\n  gutterY: \"1rem\",\n  gutterX: \"1rem\",\n  elements: () => [],\n  item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst hasHeader = computed<boolean>(\n  () => Boolean(props.title) || Boolean(props.subtitle),\n)\n\nconst bodyStyle = computed(() => ({\n  rowGap: props.gutterY,\n  columnGap: props.gutterX,\n}))\n</script>\n\n<template>\n  <Card v-if=\"showChrome\" class=\"flex flex-col\">\n    <CardHeader v-if=\"hasHeader\">\n      <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n      <CardDescription v-if=\"subtitle\">\n        {{ subtitle }}\n      </CardDescription>\n    </CardHeader>\n    <CardContent\n      class=\"flex flex-col\"\n      :class=\"[hasHeader ? '' : 'pt-6']\"\n      :style=\"bodyStyle\"\n    >\n      <ElementRenderer\n        v-for=\"element in elements\"\n        :key=\"element.id\"\n        :element=\"element\"\n        :item=\"item\"\n      />\n    </CardContent>\n  </Card>\n  <section\n    v-else\n    class=\"flex flex-col\"\n    :style=\"bodyStyle\"\n    data-testid=\"element-list-bare\"\n  >\n    <header v-if=\"hasHeader\" class=\"mb-3 flex flex-col gap-0.5\">\n      <h3 v-if=\"title\" class=\"text-base font-semibold\">\n        {{ title }}\n      </h3>\n      <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n        {{ subtitle }}\n      </p>\n    </header>\n    <ElementRenderer\n      v-for=\"element in elements\"\n      :key=\"element.id\"\n      :element=\"element\"\n      :item=\"item\"\n    />\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GAQR,IAAa,QAAwB,EAAM,aAAa,EAAK,GAE7D,IAAY,QACV,EAAQ,EAAM,SAAU,EAAQ,EAAM,QAC9C,GAEM,IAAY,SAAgB;GAChC,QAAQ,EAAM;GACd,WAAW,EAAM;EACnB,EAAE;mBAIY,EAAA,SAAA,EAAA,GAAZ,EAmBO,EAAA,CAAA,GAAA;;GAnBiB,OAAM;;oBAMf,CALK,EAAA,SAAA,EAAA,GAAlB,EAKa,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;qBAJoC,CAA9B,EAAA,SAAA,EAAA,GAAjB,EAA+C,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBAAZ,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;qBACT,EAAA,YAAA,EAAA,GAAvB,EAEkB,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBADF,CAAA,EAAA,EAAX,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;;;oBAGf,EAWc,EAAA,CAAA,GAAA;IAVZ,OAAK,EAAA,CAAC,iBAAe,CACZ,EAAA,QAAS,KAAA,MAAA,CAAA,CAAA;IACjB,OAAK,EAAE,EAAA,KAAS;;qBAGY,EAAA,EAAA,EAAA,GAD7B,EAKE,GAAA,MAAA,EAJkB,EAAA,WAAX,YADT,EAKE,GAAA;KAHC,KAAK,EAAQ;KACJ;KACT,MAAM,EAAA;;;;;cAIb,EAoBU,WAAA;;GAlBR,OAAM;GACL,OAAK,EAAE,EAAA,KAAS;GACjB,eAAY;MAEE,EAAA,SAAA,EAAA,GAAd,EAOS,UAPT,GAOS,CANG,EAAA,SAAA,EAAA,GAAV,EAEK,MAFL,GAEK,EADA,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAED,EAAA,YAAA,EAAA,GAAT,EAEI,KAFJ,GAEI,EADC,EAAA,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,GAGf,EAKE,GAAA,MAAA,EAJkB,EAAA,WAAX,YADT,EAKE,GAAA;GAHC,KAAK,EAAQ;GACJ;GACT,MAAM,EAAA"}

package/dist/chunks/ElementRenderer-DUhlfnFD.js

@@ -0,0 +1,161 @@
+import { n as e } from "./utils-DAErOi9O.js";
+import { r as t, t as n } from "./useDisplayConditions-Dopsa2vu.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, defineComponent as s, inject as c, mergeProps as l, normalizeClass as u, openBlock as d, provide as f, ref as p, resolveDynamicComponent as m } from "vue";
+import { defineStore as h } from "pinia";
+//#region src/stores/formDataStore.ts
+var g = h("gx-modui/formData", () => {
+	let e = p({});
+	function t(t) {
+		return e.value[t] || (e.value[t] = {
+			values: {},
+			errors: {},
+			touched: {},
+			dirty: !1
+		}), e.value[t];
+	}
+	function n(e, n) {
+		let r = t(e);
+		r.values = { ...n }, r.errors = {}, r.touched = {}, r.dirty = !1;
+	}
+	function r(e, n, r) {
+		let i = t(e);
+		i.values[n] = r, i.touched[n] = !0, i.dirty = !0;
+	}
+	function i(e, n) {
+		let r = t(e), i = {};
+		for (let [e, t] of Object.entries(n)) i[e] = Array.isArray(t) ? t : [t];
+		r.errors = i;
+	}
+	function a(e, n) {
+		let r = t(e);
+		n === void 0 ? r.errors = {} : delete r.errors[n];
+	}
+	function o(e) {
+		return t(e);
+	}
+	function s(t) {
+		delete e.value[t];
+	}
+	return {
+		forms: e,
+		ensureForm: t,
+		setInitialValues: n,
+		setValue: r,
+		setErrors: i,
+		clearErrors: a,
+		getForm: o,
+		resetForm: s
+	};
+}), _ = Symbol("gx-modui:formId");
+function v(e) {
+	f(_, e);
+}
+function y(e, t) {
+	let n = t ?? c(_, void 0) ?? "default", i = g();
+	return i.ensureForm(n), {
+		value: r(() => i.forms[n]?.values[e]),
+		errors: r(() => i.forms[n]?.errors[e] ?? []),
+		touched: r(() => !!i.forms[n]?.touched[e]),
+		setValue: (t) => i.setValue(n, e, t),
+		clearError: () => i.clearErrors(n, e)
+	};
+}
+//#endregion
+//#region src/engine/legacyPropRemap.ts
+var b = {
+	"configuration-block": {
+		selectOptions: "nestedElements",
+		triggerButtonLabel: "triggerLabel",
+		dialogTitle: "title",
+		modalTitle: "title",
+		addOptionButtonLabel: "addButtonLabel"
+	},
+	display: { icon: "iconName" }
+}, x = {
+	action: { variant: {
+		primary: "default",
+		danger: "destructive",
+		"outline-primary": "outline",
+		"outline-danger": "outline",
+		"outline-secondary": "outline",
+		"btn-success": "success",
+		"btn-warning": "warning",
+		"btn-info": "info",
+		light: "ghost",
+		dark: "default"
+	} },
+	boolean: { variant: {} }
+};
+function S(e, t) {
+	let n = e.indexOf("."), r = n < 0 ? e : e.slice(0, n), i = b[r], a = x[r];
+	if (!i && !a) return t;
+	let o = {};
+	for (let [e, n] of Object.entries(t)) {
+		let r = i?.[e] ?? e;
+		if (r !== e && r in t) continue;
+		let s = a?.[r];
+		o[r] = typeof n == "string" && s && s[n] !== void 0 ? s[n] : n;
+	}
+	return o;
+}
+//#endregion
+//#region src/engine/ElementRenderer.vue?vue&type=script&setup=true&lang.ts
+var C = ["data-element-id", "data-element-type"], w = /* @__PURE__ */ s({
+	__name: "ElementRenderer",
+	props: {
+		element: {},
+		item: { default: () => ({}) },
+		evaluationContext: { default: () => ({}) }
+	},
+	setup(s) {
+		let c = s, f = r(() => n(c.element, c.item, c.evaluationContext)), p = r(() => t(c.element.type)), h = r(() => y(c.element.name ?? "")), g = new Set([
+			"type",
+			"conditionParams",
+			"conditionGroupLogic",
+			"condition",
+			"features",
+			"permissions",
+			"columns",
+			"columnsSm",
+			"columnsMd",
+			"columnsLg",
+			"columnsXl",
+			"columnsXxl",
+			"wrapperClassList",
+			"columnClassList",
+			"labelClassList",
+			"classList",
+			"previewMode",
+			"order",
+			"defaultValue",
+			"modelValue"
+		]), _ = r(() => {
+			let e = c.element, t = {};
+			for (let [n, r] of Object.entries(e)) g.has(n) || (t[n] = r);
+			let n = c.element.name ?? "", r = n ? h.value.value.value : void 0, i = n ? c.item[n] : void 0, a = e.defaultValue;
+			return r == null ? i == null ? a == null ? t.modelValue = "" : t.modelValue = a : t.modelValue = i : t.modelValue = r, t.errors = h.value.errors.value, S(c.element.type, t);
+		});
+		function v(e) {
+			c.element.name && h.value.setValue(e);
+		}
+		let b = r(() => e("gxp-element", `gxp-element--${c.element.type.replace(/\./g, "-")}`, x("col", c.element.columns), x("col-sm", c.element.columnsSm), x("col-md", c.element.columnsMd), x("col-lg", c.element.columnsLg), x("col-xl", c.element.columnsXl), w(c.element.columnClassList), w(c.element.wrapperClassList)));
+		function x(e, t) {
+			if (typeof t != "number") return;
+			let n = Math.max(0, Math.min(12, t)) / 12;
+			return e === "col" ? `basis-[${(n * 100).toFixed(4)}%]` : `${e}:basis-[${(n * 100).toFixed(4)}%]`;
+		}
+		function w(e) {
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		}
+		return (e, t) => f.value ? (d(), o("div", {
+			key: 0,
+			class: u(b.value),
+			"data-element-id": s.element.id,
+			"data-element-type": s.element.type
+		}, [(d(), i(m(p.value), l(_.value, { "onUpdate:modelValue": v }), null, 16))], 10, C)) : a("", !0);
+	}
+});
+//#endregion
+export { g as a, y as i, _ as n, v as r, w as t };
+
+//# sourceMappingURL=ElementRenderer-DUhlfnFD.js.map