import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { t as CardRenderer_default } from "./CardRenderer-BVyy_sI2.js";
import { createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref, withModifiers } from "vue";
import { ChevronsLeftRight, GripHorizontal, Maximize2, Puzzle } from "@lucide/vue";
//#region src/components/compositions/elements/builder/SnippetCanvasBlock.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["data-element-block-index", "data-testid"];
var _hoisted_2 = ["title"];
var _hoisted_3 = ["data-testid"];
var _hoisted_4 = { class: "flex items-center gap-2 border-b border-amber-400/40 px-2.5 py-1 text-xs" };
var _hoisted_5 = { class: "font-medium" };
var _hoisted_6 = ["data-testid"];
var _hoisted_7 = {
	key: 1,
	class: "px-2.5 py-2 text-xs italic text-muted-foreground"
};
var SnippetCanvasBlock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "SnippetCanvasBlock",
	props: {
		token: {},
		label: {},
		index: {},
		selected: {
			type: Boolean,
			default: false
		},
		colSpan: { default: 4 },
		preview: { default: null },
		item: { default: () => ({}) }
	},
	emits: [
		"select",
		"reorder",
		"resize",
		"expand"
	],
	setup(__props, { emit: __emit }) {
		/**
		* Read-only canvas block for a placed snippet. Renders the resolved snippet
		* definition (via the engine's CardRenderer) inside a yellow dashed border
		* with a "Snippet: <label>" caption. Selection + drag-reorder are delegated to
		* the host via events so the same block works at the root and nested in cards.
		*/
		const props = __props;
		const emit = __emit;
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock("div", {
				"data-element-block-index": __props.index,
				"data-testid": `form-builder-row-${__props.token}`,
				class: normalizeClass(["group relative cursor-pointer rounded border border-dashed transition-colors", __props.selected ? "border-amber-500 bg-amber-500/10 ring-1 ring-amber-500/30" : "border-amber-400/60 bg-amber-500/[0.04] hover:border-amber-500"]),
				style: normalizeStyle({ gridColumn: `span ${props.colSpan}` }),
				onClick: _cache[5] || (_cache[5] = ($event) => emit("select"))
			}, [
				createElementVNode("span", {
					class: "absolute left-1/2 top-1 z-20 -translate-x-1/2 cursor-grab touch-none rounded-sm bg-muted/80 px-1 py-0.5 opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing",
					title: "Drag to reorder",
					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
					onPointerdown: _cache[1] || (_cache[1] = withModifiers((e) => emit("reorder", e), ["stop"]))
				}, [createVNode(unref(GripHorizontal), { class: "h-3 w-3 text-muted-foreground" })], 32),
				createElementVNode("span", {
					class: "absolute right-1 top-1 z-20 cursor-ew-resize touch-none rounded-sm bg-muted/80 px-1 py-0.5 opacity-0 transition-opacity group-hover:opacity-100",
					title: `Width: ${props.colSpan}/4 — drag to resize`,
					onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
					onPointerdown: _cache[3] || (_cache[3] = withModifiers((e) => emit("resize", e), ["stop"]))
				}, [createVNode(unref(ChevronsLeftRight), { class: "h-3 w-3 text-muted-foreground" })], 40, _hoisted_2),
				createElementVNode("button", {
					type: "button",
					class: normalizeClass(["absolute left-1 top-1 z-20 flex h-5 w-5 items-center justify-center rounded bg-muted/80 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 hover:bg-muted hover:text-foreground", { "!opacity-100": __props.selected }]),
					title: "Expand to edit this snippet",
					"data-testid": `form-builder-snippet-expand-${__props.token}`,
					onClick: _cache[4] || (_cache[4] = withModifiers(($event) => emit("expand"), ["stop"]))
				}, [createVNode(unref(Maximize2), { class: "h-3.5 w-3.5" })], 10, _hoisted_3),
				createElementVNode("div", _hoisted_4, [
					createVNode(unref(Puzzle), { class: "h-3.5 w-3.5 shrink-0 text-amber-600" }),
					_cache[6] || (_cache[6] = createElementVNode("span", { class: "text-muted-foreground" }, "Snippet:", -1)),
					createElementVNode("span", _hoisted_5, toDisplayString(__props.label), 1)
				]),
				__props.preview ? (openBlock(), createElementBlock("div", {
					key: 0,
					class: "pointer-events-none select-none p-2.5",
					"data-testid": `form-builder-snippet-preview-${__props.token}`
				}, [createVNode(CardRenderer_default, {
					card: __props.preview.card,
					cards: __props.preview.cards,
					elements: __props.preview.elements,
					item: __props.item
				}, null, 8, [
					"card",
					"cards",
					"elements",
					"item"
				])], 8, _hoisted_6)) : (openBlock(), createElementBlock("p", _hoisted_7, " Snippet definition not found. "))
			], 14, _hoisted_1);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/builder/SnippetCanvasBlock.vue
var SnippetCanvasBlock_exports = /* @__PURE__ */ __exportAll({ default: () => SnippetCanvasBlock_default });
var SnippetCanvasBlock_default = SnippetCanvasBlock_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { SnippetCanvasBlock_exports as n, SnippetCanvasBlock_default as t };

//# sourceMappingURL=SnippetCanvasBlock-BzZ3q7iP.js.map