import { n as __exportAll } from "./chunk-B-1-B7_t.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 { l as SelectContent_default, n as SelectTrigger_default, s as SelectItem_default, t as SelectValue_default, u as Select_default } from "./select-Dwoxq29k.js";
import { t as Textarea_default } from "./textarea-Bi7Nstc4.js";
import { r as useReactiveCanvasBuilder, t as REACTIVE_CANVAS_BLOCK_TYPES } from "./reactiveCanvasBuilderStore-wPcgR7hD.js";
import { t as FieldFrame_default } from "./field-frame-DhCOWcMP.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
import { Plus, Trash2, X } from "@lucide/vue";
//#region src/components/compositions/elements/builder/ReactiveCanvasBuilder.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": "reactive-canvas-builder-palette"
};
var _hoisted_3 = { class: "flex flex-col gap-1" };
var _hoisted_4 = ["data-testid", "onClick"];
var _hoisted_5 = { class: "font-medium" };
var _hoisted_6 = {
	class: "flex flex-col gap-3 overflow-auto p-3",
	"data-testid": "reactive-canvas-builder-canvas"
};
var _hoisted_7 = { class: "flex items-center justify-between gap-2" };
var _hoisted_8 = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" };
var _hoisted_9 = {
	key: 0,
	class: "absolute inset-0 flex items-center justify-center text-center text-xs text-muted-foreground",
	"data-testid": "reactive-canvas-builder-canvas-empty"
};
var _hoisted_10 = [
	"data-testid",
	"onClick",
	"onPointerdown"
];
var _hoisted_11 = { class: "flex items-center justify-between" };
var _hoisted_12 = { class: "font-mono text-[10px] text-muted-foreground" };
var _hoisted_13 = { class: "font-mono text-[10px] text-muted-foreground" };
var _hoisted_14 = { class: "mt-1 font-mono text-[10px] text-muted-foreground" };
var _hoisted_15 = ["data-testid", "onPointerdown"];
var _hoisted_16 = {
	class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
	"data-testid": "reactive-canvas-builder-inspector"
};
var _hoisted_17 = { class: "flex items-center justify-between" };
var _hoisted_18 = { class: "grid grid-cols-2 gap-2" };
var _hoisted_19 = { class: "flex flex-col gap-1" };
var _hoisted_20 = { class: "flex flex-col gap-1" };
var _hoisted_21 = {
	key: 0,
	class: "py-3 text-xs text-muted-foreground",
	"data-testid": "reactive-canvas-builder-inspector-empty"
};
var _hoisted_22 = {
	key: 1,
	class: "flex flex-col gap-3",
	"data-testid": "reactive-canvas-builder-inspector-fields"
};
var _hoisted_23 = { class: "flex flex-col gap-1" };
var _hoisted_24 = { class: "grid grid-cols-2 gap-2" };
var _hoisted_25 = { class: "flex flex-col gap-1" };
var _hoisted_26 = { class: "flex flex-col gap-1" };
var _hoisted_27 = { class: "flex flex-col gap-1" };
var _hoisted_28 = { class: "flex flex-col gap-1" };
var _hoisted_29 = { class: "flex flex-col gap-1" };
var _hoisted_30 = {
	key: 0,
	class: "text-xs text-destructive",
	"data-testid": "reactive-canvas-builder-inspector-props-error"
};
var _hoisted_31 = { class: "flex items-center gap-1" };
var MIN_BLOCK_SIZE = 20;
var ReactiveCanvasBuilder_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "ReactiveCanvasBuilder",
	props: /* @__PURE__ */ mergeModels({
		modelValue: {},
		builderId: {},
		name: {},
		item: { default: () => ({}) },
		classList: {},
		label: {},
		hideLabel: { type: Boolean },
		helpText: {},
		errors: { default: () => [] }
	}, {
		"modelValue": {},
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props) {
		/**
		* ReactiveCanvasBuilder — visual canvas where component-like blocks can
		* be placed and configured.
		*
		* Three-pane layout (matches FormBuilder):
		*   - LEFT (Palette):    a list of built-in block types. Click to add.
		*   - MIDDLE (Canvas):   a fixed-size relative-positioned surface. Each
		*                        block renders as an absolutely-positioned
		*                        placeholder card showing type + size + position.
		*                        Click to select.
		*   - RIGHT (Inspector): edits the selected block's x / y / width /
		*                        height (number inputs), type (Select), and
		*                        props (JSON textarea for now).
		*
		* Blocks may be repositioned by pointer-drag (no snapping, raw pixel
		* delta) and resized via four corner handles. Drag clamps to the
		* canvas bounds; resize clamps each block to a 20x20 minimum.
		*
		* State is owned by `reactiveCanvasBuilderStore`. Two-way binds the
		* full `ReactiveCanvasBuilderSchema` via `defineModel`.
		*/
		const props = __props;
		const model = useModel(__props, "modelValue");
		let nextAutoId = 0;
		function makeAutoId() {
			nextAutoId += 1;
			return `reactive-canvas-${Date.now()}-${nextAutoId}`;
		}
		const fallbackId = ref(makeAutoId());
		const builder = useReactiveCanvasBuilder(computed(() => props.builderId ?? fallbackId.value).value);
		function isSchema(value) {
			if (typeof value !== "object" || value === null) return false;
			const v = value;
			return typeof v.width === "number" && typeof v.height === "number" && Array.isArray(v.blocks);
		}
		onMounted(() => {
			const seed = model.value;
			if (isSchema(seed)) builder.loadSchema(seed);
		});
		watch(() => builder.schema.value, (next) => {
			model.value = next;
		}, { deep: true });
		const schema = computed(() => builder.schema.value);
		const blocks = computed(() => schema.value.blocks);
		const selectedId = computed(() => builder.selection.value.id);
		const selectedBlock = computed(() => {
			const id = selectedId.value;
			if (!id) return null;
			return blocks.value.find((b) => b.id === id) ?? null;
		});
		/** Local string buffer for the props JSON textarea so users can type
		* freely without us re-parsing on every keystroke. */
		const propsJsonDraft = ref("");
		const propsJsonError = ref(null);
		watch(() => selectedBlock.value?.id, () => {
			const block = selectedBlock.value;
			if (!block) {
				propsJsonDraft.value = "";
				propsJsonError.value = null;
				return;
			}
			propsJsonDraft.value = JSON.stringify(block.props ?? {}, null, 2);
			propsJsonError.value = null;
		}, { immediate: true });
		function onPaletteAdd(type) {
			const id = builder.addBlock(type);
			builder.select(id);
		}
		function onBlockClick(blockId) {
			builder.select(blockId);
		}
		function onClearSelection() {
			builder.select(null);
		}
		function onRemoveSelected() {
			const id = selectedId.value;
			if (id) builder.removeBlock(id);
		}
		function patchSelected(patch) {
			const id = selectedId.value;
			if (id) builder.updateBlock(id, patch);
		}
		function onNumberInput(key, e) {
			const raw = e.target.value;
			const parsed = Number(raw);
			if (Number.isFinite(parsed)) patchSelected({ [key]: parsed });
		}
		function onCanvasSizeInput(key, e) {
			const raw = e.target.value;
			const parsed = Number(raw);
			if (Number.isFinite(parsed) && parsed > 0) builder.setCanvasSize({ [key]: parsed });
		}
		function onTypeChange(v) {
			if (typeof v === "string") patchSelected({ type: v });
		}
		function onPropsJsonInput(e) {
			const next = e.target.value;
			propsJsonDraft.value = next;
			try {
				const parsed = next.trim() === "" ? {} : JSON.parse(next);
				if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) throw new Error("Props must be a JSON object");
				propsJsonError.value = null;
				patchSelected({ props: parsed });
			} catch (err) {
				propsJsonError.value = err instanceof Error ? err.message : "Invalid JSON";
			}
		}
		const canvasStyle = computed(() => ({
			width: `${schema.value.width}px`,
			height: `${schema.value.height}px`,
			maxWidth: "100%"
		}));
		function blockStyle(block) {
			return {
				left: `${block.x}px`,
				top: `${block.y}px`,
				width: `${block.width}px`,
				height: `${block.height}px`
			};
		}
		const activeDrag = ref(null);
		const activeInteractionId = computed(() => activeDrag.value?.blockId ?? null);
		function clampToCanvas(x, y, width, height) {
			const maxX = Math.max(0, schema.value.width - width);
			const maxY = Math.max(0, schema.value.height - height);
			return {
				x: Math.min(Math.max(0, x), maxX),
				y: Math.min(Math.max(0, y), maxY)
			};
		}
		function beginInteraction(block, event, mode, corner = null) {
			event.preventDefault();
			event.stopPropagation();
			builder.select(block.id);
			const target = event.target;
			if (target && typeof target.setPointerCapture === "function") try {
				target.setPointerCapture(event.pointerId);
			} catch {}
			activeDrag.value = {
				mode,
				corner,
				blockId: block.id,
				pointerId: event.pointerId,
				target: target ?? event.currentTarget,
				startClientX: event.clientX,
				startClientY: event.clientY,
				startX: block.x,
				startY: block.y,
				startWidth: block.width,
				startHeight: block.height
			};
			window.addEventListener("pointermove", onPointerMove);
			window.addEventListener("pointerup", onPointerUp);
			window.addEventListener("pointercancel", onPointerUp);
		}
		function onBlockPointerDown(block, event) {
			if (event.button !== void 0 && event.button !== 0) return;
			beginInteraction(block, event, "drag");
		}
		function onResizePointerDown(block, corner, event) {
			if (event.button !== void 0 && event.button !== 0) return;
			beginInteraction(block, event, "resize", corner);
		}
		function applyDrag(state, dx, dy) {
			const clamped = clampToCanvas(state.startX + dx, state.startY + dy, state.startWidth, state.startHeight);
			builder.updateBlock(state.blockId, {
				x: clamped.x,
				y: clamped.y
			});
		}
		function applyResize(state, dx, dy) {
			let x = state.startX;
			let y = state.startY;
			let width = state.startWidth;
			let height = state.startHeight;
			switch (state.corner) {
				case "br":
					width = state.startWidth + dx;
					height = state.startHeight + dy;
					break;
				case "tr":
					width = state.startWidth + dx;
					height = state.startHeight - dy;
					y = state.startY + dy;
					break;
				case "bl":
					width = state.startWidth - dx;
					height = state.startHeight + dy;
					x = state.startX + dx;
					break;
				case "tl":
					width = state.startWidth - dx;
					height = state.startHeight - dy;
					x = state.startX + dx;
					y = state.startY + dy;
					break;
				default: return;
			}
			if (width < MIN_BLOCK_SIZE) {
				if (state.corner === "tl" || state.corner === "bl") x = state.startX + (state.startWidth - MIN_BLOCK_SIZE);
				width = MIN_BLOCK_SIZE;
			}
			if (height < MIN_BLOCK_SIZE) {
				if (state.corner === "tl" || state.corner === "tr") y = state.startY + (state.startHeight - MIN_BLOCK_SIZE);
				height = MIN_BLOCK_SIZE;
			}
			builder.updateBlock(state.blockId, {
				x,
				y,
				width,
				height
			});
		}
		function onPointerMove(event) {
			const state = activeDrag.value;
			if (!state) return;
			const dx = event.clientX - state.startClientX;
			const dy = event.clientY - state.startClientY;
			if (state.mode === "drag") applyDrag(state, dx, dy);
			else applyResize(state, dx, dy);
		}
		function onPointerUp(event) {
			const state = activeDrag.value;
			if (state) {
				const target = state.target;
				if (target && typeof target.releasePointerCapture === "function") try {
					target.releasePointerCapture(state.pointerId);
				} catch {}
			}
			activeDrag.value = null;
			window.removeEventListener("pointermove", onPointerMove);
			window.removeEventListener("pointerup", onPointerUp);
			window.removeEventListener("pointercancel", onPointerUp);
		}
		onBeforeUnmount(() => {
			window.removeEventListener("pointermove", onPointerMove);
			window.removeEventListener("pointerup", onPointerUp);
			window.removeEventListener("pointercancel", onPointerUp);
		});
		const RESIZE_HANDLES = [
			{
				corner: "tl",
				position: "-top-1 -left-1",
				cursor: "cursor-nwse-resize"
			},
			{
				corner: "tr",
				position: "-top-1 -right-1",
				cursor: "cursor-nesw-resize"
			},
			{
				corner: "bl",
				position: "-bottom-1 -left-1",
				cursor: "cursor-nesw-resize"
			},
			{
				corner: "br",
				position: "-bottom-1 -right-1",
				cursor: "cursor-nwse-resize"
			}
		];
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(FieldFrame_default), {
				label: props.label,
				"hide-label": props.hideLabel,
				"help-text": props.helpText,
				errors: props.errors,
				class: normalizeClass(props.classList)
			}, {
				default: withCtx(() => [createElementVNode("div", {
					class: normalizeClass(unref(cn)("gxp-reactive-canvas-builder grid gap-3 rounded-lg border bg-card")),
					style: {
						"grid-template-columns": "220px 1fr 320px",
						"min-height": "24rem"
					},
					"data-testid": "reactive-canvas-builder",
					"data-element-name": props.name ?? void 0
				}, [
					createElementVNode("aside", _hoisted_2, [_cache[7] || (_cache[7] = createElementVNode("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Block palette ", -1)), createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(REACTIVE_CANVAS_BLOCK_TYPES), (type) => {
						return openBlock(), createElementBlock("button", {
							key: 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": `reactive-canvas-builder-palette-${type}`,
							onClick: ($event) => onPaletteAdd(type)
						}, [createVNode(unref(Plus), { class: "mt-0.5 h-3.5 w-3.5 shrink-0" }), createElementVNode("span", _hoisted_5, toDisplayString(type), 1)], 8, _hoisted_4);
					}), 128))])]),
					createElementVNode("section", _hoisted_6, [createElementVNode("header", _hoisted_7, [createElementVNode("h4", _hoisted_8, " Canvas (" + toDisplayString(schema.value.width) + " x " + toDisplayString(schema.value.height) + ") ", 1), createVNode(unref(Badge_default), {
						variant: "outline",
						class: "font-mono text-[10px]"
					}, {
						default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode(" builder/reactive-canvas-builder ", -1)])]),
						_: 1
					})]), createElementVNode("div", {
						class: "relative overflow-auto rounded-md border border-dashed bg-background",
						style: normalizeStyle(canvasStyle.value),
						"data-testid": "reactive-canvas-builder-surface"
					}, [blocks.value.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_9, " Click a block type in the palette to add it. ")) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(blocks.value, (block) => {
						return openBlock(), createElementBlock("div", {
							key: block.id,
							class: normalizeClass(["absolute cursor-move touch-none select-none rounded border bg-card p-2 text-xs shadow-sm transition-colors hover:border-primary", [selectedId.value === block.id ? "border-primary ring-2 ring-primary/30" : "", activeInteractionId.value === block.id ? "ring-2 ring-primary" : ""]]),
							style: normalizeStyle(blockStyle(block)),
							"data-testid": `reactive-canvas-builder-block-${block.id}`,
							onClick: withModifiers(($event) => onBlockClick(block.id), ["stop"]),
							onPointerdown: (e) => onBlockPointerDown(block, e)
						}, [
							createElementVNode("div", _hoisted_11, [createElementVNode("span", _hoisted_12, toDisplayString(block.type), 1), createElementVNode("span", _hoisted_13, toDisplayString(block.width) + "x" + toDisplayString(block.height), 1)]),
							createElementVNode("div", _hoisted_14, " (" + toDisplayString(block.x) + ", " + toDisplayString(block.y) + ") ", 1),
							(openBlock(), createElementBlock(Fragment, null, renderList(RESIZE_HANDLES, (handle) => {
								return createElementVNode("span", {
									key: handle.corner,
									class: normalizeClass(unref(cn)("absolute h-2 w-2 rounded-sm border border-primary/70 bg-primary/30 hover:bg-primary", handle.position, handle.cursor)),
									"data-testid": `reactive-canvas-builder-block-${block.id}-resize-${handle.corner}`,
									onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
									onPointerdown: withModifiers((e) => onResizePointerDown(block, handle.corner, e), ["stop"])
								}, null, 42, _hoisted_15);
							}), 64))
						], 46, _hoisted_10);
					}), 128))], 4)]),
					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)), selectedId.value ? (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)]),
						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(() => [..._cache[10] || (_cache[10] = [createTextVNode(" Canvas ", -1)])]),
									_: 1
								})]),
								_: 1
							}), createVNode(unref(CardContent_default), { class: "flex flex-col gap-2 pb-3" }, {
								default: withCtx(() => [createElementVNode("div", _hoisted_18, [createElementVNode("div", _hoisted_19, [createVNode(unref(Label_default), { for: "rcb-canvas-width" }, {
									default: withCtx(() => [..._cache[11] || (_cache[11] = [createTextVNode("Width", -1)])]),
									_: 1
								}), createVNode(unref(Input_default), {
									id: "rcb-canvas-width",
									type: "number",
									"model-value": schema.value.width,
									"data-testid": "reactive-canvas-builder-canvas-width",
									onInput: _cache[1] || (_cache[1] = (e) => onCanvasSizeInput("width", e))
								}, null, 8, ["model-value"])]), createElementVNode("div", _hoisted_20, [createVNode(unref(Label_default), { for: "rcb-canvas-height" }, {
									default: withCtx(() => [..._cache[12] || (_cache[12] = [createTextVNode("Height", -1)])]),
									_: 1
								}), createVNode(unref(Input_default), {
									id: "rcb-canvas-height",
									type: "number",
									"model-value": schema.value.height,
									"data-testid": "reactive-canvas-builder-canvas-height",
									onInput: _cache[2] || (_cache[2] = (e) => onCanvasSizeInput("height", e))
								}, null, 8, ["model-value"])])])]),
								_: 1
							})]),
							_: 1
						}),
						!selectedBlock.value ? (openBlock(), createElementBlock("p", _hoisted_21, " Select a block on the canvas to edit it. ")) : (openBlock(), createElementBlock("div", _hoisted_22, [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(selectedBlock.value.type), 1)]),
									_: 1
								})]),
								_: 1
							}), createVNode(unref(CardContent_default), { class: "flex flex-col gap-2 pb-3" }, {
								default: withCtx(() => [
									createElementVNode("div", _hoisted_23, [createVNode(unref(Label_default), null, {
										default: withCtx(() => [..._cache[13] || (_cache[13] = [createTextVNode("Block type", -1)])]),
										_: 1
									}), createVNode(unref(Select_default), {
										"model-value": selectedBlock.value.type,
										"onUpdate:modelValue": onTypeChange
									}, {
										default: withCtx(() => [createVNode(unref(SelectTrigger_default), { "data-testid": "reactive-canvas-builder-inspector-type" }, {
											default: withCtx(() => [createVNode(unref(SelectValue_default))]),
											_: 1
										}), createVNode(unref(SelectContent_default), null, {
											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(REACTIVE_CANVAS_BLOCK_TYPES), (t) => {
												return openBlock(), createBlock(unref(SelectItem_default), {
													key: t,
													value: t
												}, {
													default: withCtx(() => [createTextVNode(toDisplayString(t), 1)]),
													_: 2
												}, 1032, ["value"]);
											}), 128))]),
											_: 1
										})]),
										_: 1
									}, 8, ["model-value"])]),
									createElementVNode("div", _hoisted_24, [
										createElementVNode("div", _hoisted_25, [createVNode(unref(Label_default), { for: "rcb-block-x" }, {
											default: withCtx(() => [..._cache[14] || (_cache[14] = [createTextVNode("X", -1)])]),
											_: 1
										}), createVNode(unref(Input_default), {
											id: "rcb-block-x",
											type: "number",
											"model-value": selectedBlock.value.x,
											"data-testid": "reactive-canvas-builder-inspector-x",
											onInput: _cache[3] || (_cache[3] = (e) => onNumberInput("x", e))
										}, null, 8, ["model-value"])]),
										createElementVNode("div", _hoisted_26, [createVNode(unref(Label_default), { for: "rcb-block-y" }, {
											default: withCtx(() => [..._cache[15] || (_cache[15] = [createTextVNode("Y", -1)])]),
											_: 1
										}), createVNode(unref(Input_default), {
											id: "rcb-block-y",
											type: "number",
											"model-value": selectedBlock.value.y,
											"data-testid": "reactive-canvas-builder-inspector-y",
											onInput: _cache[4] || (_cache[4] = (e) => onNumberInput("y", e))
										}, null, 8, ["model-value"])]),
										createElementVNode("div", _hoisted_27, [createVNode(unref(Label_default), { for: "rcb-block-width" }, {
											default: withCtx(() => [..._cache[16] || (_cache[16] = [createTextVNode("Width", -1)])]),
											_: 1
										}), createVNode(unref(Input_default), {
											id: "rcb-block-width",
											type: "number",
											"model-value": selectedBlock.value.width,
											"data-testid": "reactive-canvas-builder-inspector-width",
											onInput: _cache[5] || (_cache[5] = (e) => onNumberInput("width", e))
										}, null, 8, ["model-value"])]),
										createElementVNode("div", _hoisted_28, [createVNode(unref(Label_default), { for: "rcb-block-height" }, {
											default: withCtx(() => [..._cache[17] || (_cache[17] = [createTextVNode("Height", -1)])]),
											_: 1
										}), createVNode(unref(Input_default), {
											id: "rcb-block-height",
											type: "number",
											"model-value": selectedBlock.value.height,
											"data-testid": "reactive-canvas-builder-inspector-height",
											onInput: _cache[6] || (_cache[6] = (e) => onNumberInput("height", e))
										}, null, 8, ["model-value"])])
									]),
									createElementVNode("div", _hoisted_29, [
										createVNode(unref(Label_default), { for: "rcb-block-props" }, {
											default: withCtx(() => [..._cache[18] || (_cache[18] = [createTextVNode("Props (JSON)", -1)])]),
											_: 1
										}),
										createVNode(unref(Textarea_default), {
											id: "rcb-block-props",
											"model-value": propsJsonDraft.value,
											rows: "6",
											class: "font-mono text-xs",
											"data-testid": "reactive-canvas-builder-inspector-props",
											onInput: onPropsJsonInput
										}, null, 8, ["model-value"]),
										propsJsonError.value ? (openBlock(), createElementBlock("p", _hoisted_30, toDisplayString(propsJsonError.value), 1)) : createCommentVNode("", true)
									])
								]),
								_: 1
							})]),
							_: 1
						}), createElementVNode("div", _hoisted_31, [createVNode(unref(Button_default), {
							variant: "destructive",
							size: "sm",
							class: "ml-auto",
							"data-testid": "reactive-canvas-builder-remove",
							onClick: onRemoveSelected
						}, {
							default: withCtx(() => [createVNode(unref(Trash2), { class: "h-3.5 w-3.5" }), _cache[19] || (_cache[19] = createTextVNode(" Remove block ", -1))]),
							_: 1
						})])]))
					])
				], 10, _hoisted_1)]),
				_: 1
			}, 8, [
				"label",
				"hide-label",
				"help-text",
				"errors",
				"class"
			]);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/builder/ReactiveCanvasBuilder.vue
var ReactiveCanvasBuilder_exports = /* @__PURE__ */ __exportAll({ default: () => ReactiveCanvasBuilder_default });
var ReactiveCanvasBuilder_default = ReactiveCanvasBuilder_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { ReactiveCanvasBuilder_exports as n, ReactiveCanvasBuilder_default as t };

//# sourceMappingURL=ReactiveCanvasBuilder-C0M2tKNS.js.map