import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { t as CardElementMetadataMap } from "./elements-CNyptov7.js";
import { n as cn } from "./utils-DXzSsU1e.js";
import { n as Badge_default } from "./badge-BbQrSqE-.js";
import { n as Button_default } from "./button-B9CnnuTu.js";
import { n as CardTitle_default, o as CardContent_default, r as CardHeader_default, s as Card_default } from "./card-X74FuL7B.js";
import { t as Input_default } from "./input-CwDp-vE8.js";
import { n as Label_default } from "./label-C5K3zowH.js";
import { r as Switch_default } from "./switch-E1QdwZg_.js";
import { t as Textarea_default } from "./textarea-Bi7Nstc4.js";
import { n as useElementListBuilder } from "./elementListBuilderStore-C7trqNLO.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, onMounted, openBlock, ref, renderList, toDisplayString, unref, useModel, watch, withCtx } from "vue";
import { ArrowDown, ArrowUp, Plus, Trash2, X } from "@lucide/vue";
//#region src/components/compositions/elements/builder/ElementListBuilder.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["data-element-name"];
var _hoisted_2 = {
	class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
	"data-testid": "element-list-builder-palette"
};
var _hoisted_3 = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" };
var _hoisted_4 = { class: "flex flex-col gap-1" };
var _hoisted_5 = ["data-testid", "onClick"];
var _hoisted_6 = { class: "flex min-w-0 flex-col gap-0.5" };
var _hoisted_7 = { class: "font-medium" };
var _hoisted_8 = { class: "line-clamp-2 text-[10px] text-muted-foreground" };
var _hoisted_9 = {
	class: "flex flex-col gap-3 overflow-y-auto p-3",
	"data-testid": "element-list-builder-canvas"
};
var _hoisted_10 = { class: "flex items-center justify-between" };
var _hoisted_11 = {
	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"
};
var _hoisted_12 = {
	key: 1,
	class: "flex flex-col gap-1 text-xs",
	"data-testid": "element-list-builder-canvas-list"
};
var _hoisted_13 = ["data-testid", "onClick"];
var _hoisted_14 = { class: "w-6 text-right tabular-nums text-muted-foreground" };
var _hoisted_15 = { class: "font-medium" };
var _hoisted_16 = {
	class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
	"data-testid": "element-list-builder-inspector"
};
var _hoisted_17 = { class: "flex items-center justify-between" };
var _hoisted_18 = {
	key: 0,
	class: "py-3 text-xs text-muted-foreground",
	"data-testid": "element-list-builder-inspector-empty"
};
var _hoisted_19 = {
	key: 1,
	class: "flex flex-col gap-3",
	"data-testid": "element-list-builder-inspector-fields"
};
var _hoisted_20 = { class: "flex flex-col gap-1" };
var _hoisted_21 = { class: "flex flex-col gap-1" };
var _hoisted_22 = { class: "flex flex-col gap-1" };
var _hoisted_23 = { class: "flex flex-col gap-1" };
var _hoisted_24 = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" };
var _hoisted_25 = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" };
var _hoisted_26 = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" };
var _hoisted_27 = { class: "flex items-center gap-1" };
var ElementListBuilder_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "ElementListBuilder",
	props: /* @__PURE__ */ mergeModels({
		modelValue: {},
		builderId: {},
		label: { default: "Element List Builder" },
		name: {},
		item: { default: () => ({}) },
		classList: {}
	}, {
		"modelValue": {},
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props) {
		/**
		* ElementListBuilder — a simpler sibling of FormBuilder.
		*
		* The schema is just a flat list of CardElements (no cards, no tabs,
		* no nested cards). Useful for forms-as-arrays and list-of-fields
		* configs.
		*
		* Three-pane layout:
		*   - LEFT  (Palette):    Clickable list of element categories from
		*                         CardElementMetadataMap. Click to append.
		*   - MIDDLE (Canvas):    Flat list of elements with selection.
		*   - RIGHT (Inspector):  Property panel mirroring FormBuilder's
		*                         (label, name, placeholder, helpText,
		*                         required, readonly, disabled).
		*
		* State is owned by `elementListBuilderStore`. The builder accepts an
		* initial schema via `modelValue` and emits the current schema via
		* `update:modelValue` on every mutation.
		*/
		const props = __props;
		const model = useModel(__props, "modelValue");
		let nextAutoId = 0;
		function makeAutoId() {
			nextAutoId += 1;
			return `element-list-builder-${Date.now()}-${nextAutoId}`;
		}
		const fallbackId = ref(makeAutoId());
		const builder = useElementListBuilder(computed(() => props.builderId ?? fallbackId.value).value);
		function isElementListBuilderSchema(value) {
			if (typeof value !== "object" || value === null) return false;
			const v = value;
			return Array.isArray(v.elements);
		}
		/** Seed the store from the initial modelValue. */
		onMounted(() => {
			const seed = model.value;
			if (isElementListBuilderSchema(seed)) builder.loadSchema(seed);
		});
		/** Push schema changes back via v-model. */
		watch(() => builder.schema.value, (next) => {
			model.value = { elements: next.elements.map((el) => ({ ...el })) };
		}, { deep: true });
		const elements = computed(() => builder.schema.value.elements);
		/**
		* Display-time view of `elements` with the fields the template needs
		* narrowed to plain strings. Doing the casts here keeps the template
		* free of `as unknown as` expressions that confuse the template
		* compiler around `{` `}` characters.
		*/
		const elementRows = computed(() => elements.value.map((el) => {
			const bag = el;
			return {
				id: bag.id ?? "",
				label: bag.label ?? "(unnamed)",
				type: bag.type ?? ""
			};
		}));
		const paletteEntries = computed(() => Object.entries(CardElementMetadataMap).map(([type, meta]) => ({
			type,
			meta
		})));
		const selectedElement = computed(() => {
			const sel = builder.selection.value;
			if (!sel.id) return null;
			return elements.value.find((el) => el.id === sel.id) ?? null;
		});
		const selectedIndex = computed(() => {
			const sel = builder.selection.value;
			if (!sel.id) return -1;
			return elements.value.findIndex((el) => el.id === sel.id);
		});
		const canMoveDown = computed(() => {
			return selectedIndex.value >= 0 && selectedIndex.value < elements.value.length - 1;
		});
		function onPaletteClick(type) {
			const newId = builder.addElement(type);
			builder.select(newId);
		}
		function onCanvasRowClick(elementId) {
			builder.select(elementId);
		}
		function onMoveUp() {
			if (selectedIndex.value <= 0) return;
			builder.reorderElement(selectedIndex.value, selectedIndex.value - 1);
		}
		function onMoveDown() {
			if (!canMoveDown.value) return;
			builder.reorderElement(selectedIndex.value, selectedIndex.value + 1);
		}
		function onRemove() {
			const sel = builder.selection.value;
			if (sel.id) builder.removeElement(sel.id);
		}
		function onClearSelection() {
			builder.select(null);
		}
		function patchSelected(patch) {
			const sel = builder.selection.value;
			if (sel.id) builder.updateElement(sel.id, patch);
		}
		const labelValue = computed(() => selectedElement.value?.label ?? "");
		const nameValue = computed(() => selectedElement.value?.name ?? "");
		const placeholderValue = computed(() => selectedElement.value?.placeholder ?? "");
		const helpTextValue = computed(() => selectedElement.value?.helpText ?? "");
		const requiredValue = computed(() => Boolean(selectedElement.value?.required));
		const readonlyValue = computed(() => Boolean(selectedElement.value?.readonly));
		const disabledValue = computed(() => Boolean(selectedElement.value?.disabled));
		const selectedTypeLabel = computed(() => {
			const sel = selectedElement.value;
			if (!sel) return "";
			return sel.type ?? "";
		});
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", {
				class: normalizeClass(unref(cn)("gxp-element-list-builder grid gap-3 rounded-lg border bg-card", props.classList)),
				style: {
					"grid-template-columns": "220px 1fr 280px",
					"min-height": "24rem"
				},
				"data-testid": "element-list-builder",
				"data-element-name": props.name ?? void 0
			}, [
				createElementVNode("aside", _hoisted_2, [createElementVNode("h4", _hoisted_3, toDisplayString(props.label), 1), createElementVNode("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(paletteEntries.value, (entry) => {
					return openBlock(), createElementBlock("button", {
						key: entry.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-${entry.type}`,
						onClick: ($event) => onPaletteClick(entry.type)
					}, [createVNode(unref(Plus), { class: "mt-0.5 h-3.5 w-3.5 shrink-0" }), createElementVNode("span", _hoisted_6, [createElementVNode("span", _hoisted_7, toDisplayString(entry.meta.displayLabel), 1), createElementVNode("span", _hoisted_8, toDisplayString(entry.meta.description), 1)])], 8, _hoisted_5);
				}), 128))])]),
				createElementVNode("section", _hoisted_9, [createElementVNode("header", _hoisted_10, [_cache[8] || (_cache[8] = createElementVNode("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Elements ", -1)), createVNode(unref(Badge_default), {
					variant: "outline",
					class: "font-mono text-[10px]"
				}, {
					default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode(" builder/element-list-builder ", -1)])]),
					_: 1
				})]), elements.value.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_11, " Click an element in the palette to add it. ")) : (openBlock(), createElementBlock("ul", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(elementRows.value, (row, index) => {
					return openBlock(), createElementBlock("li", {
						key: row.id,
						class: normalizeClass(["flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors", unref(builder).selection.value.id === row.id ? "border-primary bg-accent/30" : ""]),
						"data-testid": `element-list-builder-row-${row.id}`,
						onClick: ($event) => onCanvasRowClick(row.id)
					}, [
						createElementVNode("span", _hoisted_14, toDisplayString(index + 1) + ". ", 1),
						createElementVNode("span", _hoisted_15, toDisplayString(row.label), 1),
						createVNode(unref(Badge_default), {
							variant: "secondary",
							class: "ml-auto font-mono text-[9px]"
						}, {
							default: withCtx(() => [createTextVNode(toDisplayString(row.type), 1)]),
							_: 2
						}, 1024)
					], 10, _hoisted_13);
				}), 128))]))]),
				createElementVNode("aside", _hoisted_16, [createElementVNode("header", _hoisted_17, [_cache[9] || (_cache[9] = createElementVNode("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1)), unref(builder).selection.value.id ? (openBlock(), createBlock(unref(Button_default), {
					key: 0,
					variant: "ghost",
					size: "icon-sm",
					"aria-label": "Clear selection",
					onClick: onClearSelection
				}, {
					default: withCtx(() => [createVNode(unref(X), { class: "h-3.5 w-3.5" })]),
					_: 1
				})) : createCommentVNode("", true)]), !selectedElement.value ? (openBlock(), createElementBlock("p", _hoisted_18, " Select an element on the canvas to edit its properties. ")) : (openBlock(), createElementBlock("div", _hoisted_19, [createVNode(unref(Card_default), { class: "border-dashed" }, {
					default: withCtx(() => [createVNode(unref(CardHeader_default), { class: "py-2" }, {
						default: withCtx(() => [createVNode(unref(CardTitle_default), { class: "font-mono text-xs uppercase tracking-wide" }, {
							default: withCtx(() => [createTextVNode(toDisplayString(selectedTypeLabel.value), 1)]),
							_: 1
						})]),
						_: 1
					}), createVNode(unref(CardContent_default), { class: "flex flex-col gap-2 pb-3" }, {
						default: withCtx(() => [
							createElementVNode("div", _hoisted_20, [createVNode(unref(Label_default), { for: "elb-label" }, {
								default: withCtx(() => [..._cache[10] || (_cache[10] = [createTextVNode("Label", -1)])]),
								_: 1
							}), createVNode(unref(Input_default), {
								id: "elb-label",
								"model-value": labelValue.value,
								"data-testid": "element-list-builder-inspector-label",
								onInput: _cache[0] || (_cache[0] = (e) => patchSelected({ label: e.target.value }))
							}, null, 8, ["model-value"])]),
							createElementVNode("div", _hoisted_21, [createVNode(unref(Label_default), { for: "elb-name" }, {
								default: withCtx(() => [..._cache[11] || (_cache[11] = [createTextVNode("Field name", -1)])]),
								_: 1
							}), createVNode(unref(Input_default), {
								id: "elb-name",
								"model-value": nameValue.value,
								"data-testid": "element-list-builder-inspector-name",
								onInput: _cache[1] || (_cache[1] = (e) => patchSelected({ name: e.target.value }))
							}, null, 8, ["model-value"])]),
							createElementVNode("div", _hoisted_22, [createVNode(unref(Label_default), { for: "elb-placeholder" }, {
								default: withCtx(() => [..._cache[12] || (_cache[12] = [createTextVNode("Placeholder", -1)])]),
								_: 1
							}), createVNode(unref(Input_default), {
								id: "elb-placeholder",
								"model-value": placeholderValue.value,
								"data-testid": "element-list-builder-inspector-placeholder",
								onInput: _cache[2] || (_cache[2] = (e) => patchSelected({ placeholder: e.target.value }))
							}, null, 8, ["model-value"])]),
							createElementVNode("div", _hoisted_23, [createVNode(unref(Label_default), { for: "elb-help" }, {
								default: withCtx(() => [..._cache[13] || (_cache[13] = [createTextVNode("Help text", -1)])]),
								_: 1
							}), createVNode(unref(Textarea_default), {
								id: "elb-help",
								"model-value": helpTextValue.value,
								"data-testid": "element-list-builder-inspector-help",
								onInput: _cache[3] || (_cache[3] = (e) => patchSelected({ helpText: e.target.value }))
							}, null, 8, ["model-value"])]),
							createElementVNode("div", _hoisted_24, [createVNode(unref(Label_default), { for: "elb-required" }, {
								default: withCtx(() => [..._cache[14] || (_cache[14] = [createTextVNode("Required", -1)])]),
								_: 1
							}), createVNode(unref(Switch_default), {
								id: "elb-required",
								"model-value": requiredValue.value,
								"data-testid": "element-list-builder-inspector-required",
								"onUpdate:modelValue": _cache[4] || (_cache[4] = (v) => patchSelected({ required: v }))
							}, null, 8, ["model-value"])]),
							createElementVNode("div", _hoisted_25, [createVNode(unref(Label_default), { for: "elb-readonly" }, {
								default: withCtx(() => [..._cache[15] || (_cache[15] = [createTextVNode("Read-only", -1)])]),
								_: 1
							}), createVNode(unref(Switch_default), {
								id: "elb-readonly",
								"model-value": readonlyValue.value,
								"onUpdate:modelValue": _cache[5] || (_cache[5] = (v) => patchSelected({ readonly: v }))
							}, null, 8, ["model-value"])]),
							createElementVNode("div", _hoisted_26, [createVNode(unref(Label_default), { for: "elb-disabled" }, {
								default: withCtx(() => [..._cache[16] || (_cache[16] = [createTextVNode("Disabled", -1)])]),
								_: 1
							}), createVNode(unref(Switch_default), {
								id: "elb-disabled",
								"model-value": disabledValue.value,
								"onUpdate:modelValue": _cache[6] || (_cache[6] = (v) => patchSelected({ disabled: v }))
							}, null, 8, ["model-value"])])
						]),
						_: 1
					})]),
					_: 1
				}), createElementVNode("div", _hoisted_27, [
					createVNode(unref(Button_default), {
						variant: "outline",
						size: "sm",
						disabled: selectedIndex.value <= 0,
						"data-testid": "element-list-builder-move-up",
						onClick: onMoveUp
					}, {
						default: withCtx(() => [createVNode(unref(ArrowUp), { class: "h-3.5 w-3.5" })]),
						_: 1
					}, 8, ["disabled"]),
					createVNode(unref(Button_default), {
						variant: "outline",
						size: "sm",
						disabled: !canMoveDown.value,
						"data-testid": "element-list-builder-move-down",
						onClick: onMoveDown
					}, {
						default: withCtx(() => [createVNode(unref(ArrowDown), { class: "h-3.5 w-3.5" })]),
						_: 1
					}, 8, ["disabled"]),
					createVNode(unref(Button_default), {
						variant: "destructive",
						size: "sm",
						class: "ml-auto",
						"data-testid": "element-list-builder-remove",
						onClick: onRemove
					}, {
						default: withCtx(() => [createVNode(unref(Trash2), { class: "h-3.5 w-3.5" }), _cache[17] || (_cache[17] = createTextVNode(" Remove ", -1))]),
						_: 1
					})
				])]))])
			], 10, _hoisted_1);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/builder/ElementListBuilder.vue
var ElementListBuilder_exports = /* @__PURE__ */ __exportAll({ default: () => ElementListBuilder_default });
var ElementListBuilder_default = ElementListBuilder_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { ElementListBuilder_exports as n, ElementListBuilder_default as t };

//# sourceMappingURL=ElementListBuilder-l8R8wqdp.js.map