npm - @gxp-dev/mod-ui - Versions diffs - 2.0.12 → 2.0.14 - Mend

@gxp-dev/mod-ui 2.0.12 → 2.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1470) hide show

package/dist/chunks/ReactiveCanvasBuilder-COIZYfDx.js ADDED Viewed

@@ -0,0 +1,459 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { n } from "./badge-4iQG4kuk.js";
+import { n as r } from "./button-BAwcISlK.js";
+import { n as i, o as a, r as o, s } from "./card-DAfWnvro.js";
+import { t as c } from "./input-tw5ZQGKQ.js";
+import { n as l } from "./label-I5voJX5E.js";
+import { l as ee, n as te, s as ne, t as re, u as ie } from "./select-DZcdBLiy.js";
+import { t as ae } from "./textarea-lgNOfYRH.js";
+import { r as u, t as d } from "./reactiveCanvasBuilderStore-DXwaTopz.js";
+import { t as oe } from "./field-frame-n5oLDNBT.js";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeModels as x, normalizeClass as S, normalizeStyle as C, onBeforeUnmount as se, onMounted as ce, openBlock as w, ref as T, renderList as E, toDisplayString as D, unref as O, useModel as le, watch as k, withCtx as A, withModifiers as j } from "vue";
+import { Plus as ue, Trash2 as de, X as fe } from "@lucide/vue";
+//#region src/components/compositions/elements/builder/ReactiveCanvasBuilder.vue?vue&type=script&setup=true&lang.ts
+var pe = ["data-element-name"], me = {
+	class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
+	"data-testid": "reactive-canvas-builder-palette"
+}, he = { class: "flex flex-col gap-1" }, ge = ["data-testid", "onClick"], _e = { class: "font-medium" }, ve = {
+	class: "flex flex-col gap-3 overflow-auto p-3",
+	"data-testid": "reactive-canvas-builder-canvas"
+}, ye = { class: "flex items-center justify-between gap-2" }, M = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, N = {
+	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"
+}, P = [
+	"data-testid",
+	"onClick",
+	"onPointerdown"
+], be = { class: "flex items-center justify-between" }, xe = { class: "font-mono text-[10px] text-muted-foreground" }, Se = { class: "font-mono text-[10px] text-muted-foreground" }, Ce = { class: "mt-1 font-mono text-[10px] text-muted-foreground" }, we = ["data-testid", "onPointerdown"], Te = {
+	class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
+	"data-testid": "reactive-canvas-builder-inspector"
+}, Ee = { class: "flex items-center justify-between" }, De = { class: "grid grid-cols-2 gap-2" }, Oe = { class: "flex flex-col gap-1" }, ke = { class: "flex flex-col gap-1" }, Ae = {
+	key: 0,
+	class: "py-3 text-xs text-muted-foreground",
+	"data-testid": "reactive-canvas-builder-inspector-empty"
+}, je = {
+	key: 1,
+	class: "flex flex-col gap-3",
+	"data-testid": "reactive-canvas-builder-inspector-fields"
+}, Me = { class: "flex flex-col gap-1" }, Ne = { class: "grid grid-cols-2 gap-2" }, Pe = { class: "flex flex-col gap-1" }, Fe = { class: "flex flex-col gap-1" }, Ie = { class: "flex flex-col gap-1" }, Le = { class: "flex flex-col gap-1" }, Re = { class: "flex flex-col gap-1" }, ze = {
+	key: 0,
+	class: "text-xs text-destructive",
+	"data-testid": "reactive-canvas-builder-inspector-props-error"
+}, Be = { class: "flex items-center gap-1" }, F = 20, I = /* @__PURE__ */ b({
+	__name: "ReactiveCanvasBuilder",
+	props: /* @__PURE__ */ x({
+		modelValue: {},
+		builderId: {},
+		name: {},
+		item: { default: () => ({}) },
+		classList: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let b = e, x = le(e, "modelValue"), I = 0;
+		function L() {
+			return I += 1, `reactive-canvas-${Date.now()}-${I}`;
+		}
+		let R = T(L()), z = u(p(() => b.builderId ?? R.value).value);
+		function Ve(e) {
+			if (typeof e != "object" || !e) return !1;
+			let t = e;
+			return typeof t.width == "number" && typeof t.height == "number" && Array.isArray(t.blocks);
+		}
+		ce(() => {
+			let e = x.value;
+			Ve(e) && z.loadSchema(e);
+		}), k(() => z.schema.value, (e) => {
+			x.value = e;
+		}, { deep: !0 });
+		let B = p(() => z.schema.value), V = p(() => B.value.blocks), H = p(() => z.selection.value.id), U = p(() => {
+			let e = H.value;
+			return e ? V.value.find((t) => t.id === e) ?? null : null;
+		}), W = T(""), G = T(null);
+		k(() => U.value?.id, () => {
+			let e = U.value;
+			if (!e) {
+				W.value = "", G.value = null;
+				return;
+			}
+			W.value = JSON.stringify(e.props ?? {}, null, 2), G.value = null;
+		}, { immediate: !0 });
+		function He(e) {
+			let t = z.addBlock(e);
+			z.select(t);
+		}
+		function Ue(e) {
+			z.select(e);
+		}
+		function We() {
+			z.select(null);
+		}
+		function Ge() {
+			let e = H.value;
+			e && z.removeBlock(e);
+		}
+		function K(e) {
+			let t = H.value;
+			t && z.updateBlock(t, e);
+		}
+		function q(e, t) {
+			let n = t.target.value, r = Number(n);
+			Number.isFinite(r) && K({ [e]: r });
+		}
+		function J(e, t) {
+			let n = t.target.value, r = Number(n);
+			Number.isFinite(r) && r > 0 && z.setCanvasSize({ [e]: r });
+		}
+		function Y(e) {
+			typeof e == "string" && K({ type: e });
+		}
+		function Ke(e) {
+			let t = e.target.value;
+			W.value = t;
+			try {
+				let e = t.trim() === "" ? {} : JSON.parse(t);
+				if (typeof e != "object" || !e || Array.isArray(e)) throw Error("Props must be a JSON object");
+				G.value = null, K({ props: e });
+			} catch (e) {
+				G.value = e instanceof Error ? e.message : "Invalid JSON";
+			}
+		}
+		let qe = p(() => ({
+			width: `${B.value.width}px`,
+			height: `${B.value.height}px`,
+			maxWidth: "100%"
+		}));
+		function Je(e) {
+			return {
+				left: `${e.x}px`,
+				top: `${e.y}px`,
+				width: `${e.width}px`,
+				height: `${e.height}px`
+			};
+		}
+		let X = T(null), Ye = p(() => X.value?.blockId ?? null);
+		function Xe(e, t, n, r) {
+			let i = Math.max(0, B.value.width - n), a = Math.max(0, B.value.height - r);
+			return {
+				x: Math.min(Math.max(0, e), i),
+				y: Math.min(Math.max(0, t), a)
+			};
+		}
+		function Z(e, t, n, r = null) {
+			t.preventDefault(), t.stopPropagation(), z.select(e.id);
+			let i = t.target;
+			if (i && typeof i.setPointerCapture == "function") try {
+				i.setPointerCapture(t.pointerId);
+			} catch {}
+			X.value = {
+				mode: n,
+				corner: r,
+				blockId: e.id,
+				pointerId: t.pointerId,
+				target: i ?? t.currentTarget,
+				startClientX: t.clientX,
+				startClientY: t.clientY,
+				startX: e.x,
+				startY: e.y,
+				startWidth: e.width,
+				startHeight: e.height
+			}, window.addEventListener("pointermove", Q), window.addEventListener("pointerup", $), window.addEventListener("pointercancel", $);
+		}
+		function Ze(e, t) {
+			t.button !== void 0 && t.button !== 0 || Z(e, t, "drag");
+		}
+		function Qe(e, t, n) {
+			n.button !== void 0 && n.button !== 0 || Z(e, n, "resize", t);
+		}
+		function $e(e, t, n) {
+			let r = Xe(e.startX + t, e.startY + n, e.startWidth, e.startHeight);
+			z.updateBlock(e.blockId, {
+				x: r.x,
+				y: r.y
+			});
+		}
+		function et(e, t, n) {
+			let r = e.startX, i = e.startY, a = e.startWidth, o = e.startHeight;
+			switch (e.corner) {
+				case "br":
+					a = e.startWidth + t, o = e.startHeight + n;
+					break;
+				case "tr":
+					a = e.startWidth + t, o = e.startHeight - n, i = e.startY + n;
+					break;
+				case "bl":
+					a = e.startWidth - t, o = e.startHeight + n, r = e.startX + t;
+					break;
+				case "tl":
+					a = e.startWidth - t, o = e.startHeight - n, r = e.startX + t, i = e.startY + n;
+					break;
+				default: return;
+			}
+			a < F && ((e.corner === "tl" || e.corner === "bl") && (r = e.startX + (e.startWidth - F)), a = F), o < F && ((e.corner === "tl" || e.corner === "tr") && (i = e.startY + (e.startHeight - F)), o = F), z.updateBlock(e.blockId, {
+				x: r,
+				y: i,
+				width: a,
+				height: o
+			});
+		}
+		function Q(e) {
+			let t = X.value;
+			if (!t) return;
+			let n = e.clientX - t.startClientX, r = e.clientY - t.startClientY;
+			t.mode === "drag" ? $e(t, n, r) : et(t, n, r);
+		}
+		function $(e) {
+			let t = X.value;
+			if (t) {
+				let e = t.target;
+				if (e && typeof e.releasePointerCapture == "function") try {
+					e.releasePointerCapture(t.pointerId);
+				} catch {}
+			}
+			X.value = null, window.removeEventListener("pointermove", Q), window.removeEventListener("pointerup", $), window.removeEventListener("pointercancel", $);
+		}
+		se(() => {
+			window.removeEventListener("pointermove", Q), window.removeEventListener("pointerup", $), window.removeEventListener("pointercancel", $);
+		});
+		let tt = [
+			{
+				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 (e, u) => (w(), m(O(oe), {
+			label: b.label,
+			"hide-label": b.hideLabel,
+			"help-text": b.helpText,
+			errors: b.errors,
+			class: S(b.classList)
+		}, {
+			default: A(() => [_("div", {
+				class: S(O(t)("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": b.name ?? void 0
+			}, [
+				_("aside", me, [u[7] ||= _("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Block palette ", -1), _("div", he, [(w(!0), g(f, null, E(O(d), (e) => (w(), g("button", {
+					key: e,
+					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-${e}`,
+					onClick: (t) => He(e)
+				}, [y(O(ue), { class: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _("span", _e, D(e), 1)], 8, ge))), 128))])]),
+				_("section", ve, [_("header", ye, [_("h4", M, " Canvas (" + D(B.value.width) + " x " + D(B.value.height) + ") ", 1), y(O(n), {
+					variant: "outline",
+					class: "font-mono text-[10px]"
+				}, {
+					default: A(() => [...u[8] ||= [v(" builder/reactive-canvas-builder ", -1)]]),
+					_: 1
+				})]), _("div", {
+					class: "relative overflow-auto rounded-md border border-dashed bg-background",
+					style: C(qe.value),
+					"data-testid": "reactive-canvas-builder-surface"
+				}, [V.value.length === 0 ? (w(), g("p", N, " Click a block type in the palette to add it. ")) : h("", !0), (w(!0), g(f, null, E(V.value, (e) => (w(), g("div", {
+					key: e.id,
+					class: S(["absolute cursor-move touch-none select-none rounded border bg-card p-2 text-xs shadow-sm transition-colors hover:border-primary", [H.value === e.id ? "border-primary ring-2 ring-primary/30" : "", Ye.value === e.id ? "ring-2 ring-primary" : ""]]),
+					style: C(Je(e)),
+					"data-testid": `reactive-canvas-builder-block-${e.id}`,
+					onClick: j((t) => Ue(e.id), ["stop"]),
+					onPointerdown: (t) => Ze(e, t)
+				}, [
+					_("div", be, [_("span", xe, D(e.type), 1), _("span", Se, D(e.width) + "x" + D(e.height), 1)]),
+					_("div", Ce, " (" + D(e.x) + ", " + D(e.y) + ") ", 1),
+					(w(), g(f, null, E(tt, (n) => _("span", {
+						key: n.corner,
+						class: S(O(t)("absolute h-2 w-2 rounded-sm border border-primary/70 bg-primary/30 hover:bg-primary", n.position, n.cursor)),
+						"data-testid": `reactive-canvas-builder-block-${e.id}-resize-${n.corner}`,
+						onClick: u[0] ||= j(() => {}, ["stop"]),
+						onPointerdown: j((t) => Qe(e, n.corner, t), ["stop"])
+					}, null, 42, we)), 64))
+				], 46, P))), 128))], 4)]),
+				_("aside", Te, [
+					_("header", Ee, [u[9] ||= _("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1), H.value ? (w(), m(O(r), {
+						key: 0,
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Clear selection",
+						onClick: We
+					}, {
+						default: A(() => [y(O(fe), { class: "h-3.5 w-3.5" })]),
+						_: 1
+					})) : h("", !0)]),
+					y(O(s), { class: "border-dashed" }, {
+						default: A(() => [y(O(o), { class: "py-2" }, {
+							default: A(() => [y(O(i), { class: "font-mono text-xs uppercase tracking-wide" }, {
+								default: A(() => [...u[10] ||= [v(" Canvas ", -1)]]),
+								_: 1
+							})]),
+							_: 1
+						}), y(O(a), { class: "flex flex-col gap-2 pb-3" }, {
+							default: A(() => [_("div", De, [_("div", Oe, [y(O(l), { for: "rcb-canvas-width" }, {
+								default: A(() => [...u[11] ||= [v("Width", -1)]]),
+								_: 1
+							}), y(O(c), {
+								id: "rcb-canvas-width",
+								type: "number",
+								"model-value": B.value.width,
+								"data-testid": "reactive-canvas-builder-canvas-width",
+								onInput: u[1] ||= (e) => J("width", e)
+							}, null, 8, ["model-value"])]), _("div", ke, [y(O(l), { for: "rcb-canvas-height" }, {
+								default: A(() => [...u[12] ||= [v("Height", -1)]]),
+								_: 1
+							}), y(O(c), {
+								id: "rcb-canvas-height",
+								type: "number",
+								"model-value": B.value.height,
+								"data-testid": "reactive-canvas-builder-canvas-height",
+								onInput: u[2] ||= (e) => J("height", e)
+							}, null, 8, ["model-value"])])])]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					U.value ? (w(), g("div", je, [y(O(s), { class: "border-dashed" }, {
+						default: A(() => [y(O(o), { class: "py-2" }, {
+							default: A(() => [y(O(i), { class: "font-mono text-xs uppercase tracking-wide" }, {
+								default: A(() => [v(D(U.value.type), 1)]),
+								_: 1
+							})]),
+							_: 1
+						}), y(O(a), { class: "flex flex-col gap-2 pb-3" }, {
+							default: A(() => [
+								_("div", Me, [y(O(l), null, {
+									default: A(() => [...u[13] ||= [v("Block type", -1)]]),
+									_: 1
+								}), y(O(ie), {
+									"model-value": U.value.type,
+									"onUpdate:modelValue": Y
+								}, {
+									default: A(() => [y(O(te), { "data-testid": "reactive-canvas-builder-inspector-type" }, {
+										default: A(() => [y(O(re))]),
+										_: 1
+									}), y(O(ee), null, {
+										default: A(() => [(w(!0), g(f, null, E(O(d), (e) => (w(), m(O(ne), {
+											key: e,
+											value: e
+										}, {
+											default: A(() => [v(D(e), 1)]),
+											_: 2
+										}, 1032, ["value"]))), 128))]),
+										_: 1
+									})]),
+									_: 1
+								}, 8, ["model-value"])]),
+								_("div", Ne, [
+									_("div", Pe, [y(O(l), { for: "rcb-block-x" }, {
+										default: A(() => [...u[14] ||= [v("X", -1)]]),
+										_: 1
+									}), y(O(c), {
+										id: "rcb-block-x",
+										type: "number",
+										"model-value": U.value.x,
+										"data-testid": "reactive-canvas-builder-inspector-x",
+										onInput: u[3] ||= (e) => q("x", e)
+									}, null, 8, ["model-value"])]),
+									_("div", Fe, [y(O(l), { for: "rcb-block-y" }, {
+										default: A(() => [...u[15] ||= [v("Y", -1)]]),
+										_: 1
+									}), y(O(c), {
+										id: "rcb-block-y",
+										type: "number",
+										"model-value": U.value.y,
+										"data-testid": "reactive-canvas-builder-inspector-y",
+										onInput: u[4] ||= (e) => q("y", e)
+									}, null, 8, ["model-value"])]),
+									_("div", Ie, [y(O(l), { for: "rcb-block-width" }, {
+										default: A(() => [...u[16] ||= [v("Width", -1)]]),
+										_: 1
+									}), y(O(c), {
+										id: "rcb-block-width",
+										type: "number",
+										"model-value": U.value.width,
+										"data-testid": "reactive-canvas-builder-inspector-width",
+										onInput: u[5] ||= (e) => q("width", e)
+									}, null, 8, ["model-value"])]),
+									_("div", Le, [y(O(l), { for: "rcb-block-height" }, {
+										default: A(() => [...u[17] ||= [v("Height", -1)]]),
+										_: 1
+									}), y(O(c), {
+										id: "rcb-block-height",
+										type: "number",
+										"model-value": U.value.height,
+										"data-testid": "reactive-canvas-builder-inspector-height",
+										onInput: u[6] ||= (e) => q("height", e)
+									}, null, 8, ["model-value"])])
+								]),
+								_("div", Re, [
+									y(O(l), { for: "rcb-block-props" }, {
+										default: A(() => [...u[18] ||= [v("Props (JSON)", -1)]]),
+										_: 1
+									}),
+									y(O(ae), {
+										id: "rcb-block-props",
+										"model-value": W.value,
+										rows: "6",
+										class: "font-mono text-xs",
+										"data-testid": "reactive-canvas-builder-inspector-props",
+										onInput: Ke
+									}, null, 8, ["model-value"]),
+									G.value ? (w(), g("p", ze, D(G.value), 1)) : h("", !0)
+								])
+							]),
+							_: 1
+						})]),
+						_: 1
+					}), _("div", Be, [y(O(r), {
+						variant: "destructive",
+						size: "sm",
+						class: "ml-auto",
+						"data-testid": "reactive-canvas-builder-remove",
+						onClick: Ge
+					}, {
+						default: A(() => [y(O(de), { class: "h-3.5 w-3.5" }), u[19] ||= v(" Remove block ", -1)]),
+						_: 1
+					})])])) : (w(), g("p", Ae, " Select a block on the canvas to edit it. "))
+				])
+			], 10, pe)]),
+			_: 1
+		}, 8, [
+			"label",
+			"hide-label",
+			"help-text",
+			"errors",
+			"class"
+		]));
+	}
+}), L = /* @__PURE__ */ e({ default: () => R }), R = I;
+//#endregion
+export { L as n, R as t };
+//# sourceMappingURL=ReactiveCanvasBuilder-COIZYfDx.js.map

package/dist/chunks/ReactiveCanvasBuilder-COIZYfDx.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ReactiveCanvasBuilder-COIZYfDx.js","names":[],"sources":["../../src/components/compositions/elements/builder/ReactiveCanvasBuilder.vue","../../src/components/compositions/elements/builder/ReactiveCanvasBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ReactiveCanvasBuilder — visual canvas where component-like blocks can\n * be placed and configured.\n *\n * Three-pane layout (matches FormBuilder):\n * - LEFT (Palette): a list of built-in block types. Click to add.\n * - MIDDLE (Canvas): a fixed-size relative-positioned surface. Each\n * block renders as an absolutely-positioned\n * placeholder card showing type + size + position.\n * Click to select.\n * - RIGHT (Inspector): edits the selected block's x / y / width /\n * height (number inputs), type (Select), and\n * props (JSON textarea for now).\n *\n * Blocks may be repositioned by pointer-drag (no snapping, raw pixel\n * delta) and resized via four corner handles. Drag clamps to the\n * canvas bounds; resize clamps each block to a 20x20 minimum.\n *\n * State is owned by `reactiveCanvasBuilderStore`. Two-way binds the\n * full `ReactiveCanvasBuilderSchema` via `defineModel`.\n */\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport { Plus, Trash2, X } from \"@lucide/vue\"\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 {\n FieldFrame,\n type FieldFrameProps,\n} from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n REACTIVE_CANVAS_BLOCK_TYPES,\n useReactiveCanvasBuilder,\n type ReactiveCanvasBlock,\n type ReactiveCanvasBuilderSchema,\n} from \"@/stores/reactiveCanvasBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ReactiveCanvasBuilderProps\n extends Pick<FieldFrameProps, \"label\" | \"hideLabel\" | \"helpText\" | \"errors\"> {\n /** Initial / current schema. Two-way bindable via v-model. */\n modelValue?: ReactiveCanvasBuilderSchema\n /**\n * Identifier used to key the reactiveCanvasBuilderStore. Defaults to\n * a stable auto-generated id so multiple builders on the same page\n * don't collide.\n */\n builderId?: string\n name?: string | null\n item?: Record<string, unknown>\n classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ReactiveCanvasBuilderProps>(), {\n errors: () => [],\n item: () => ({}),\n})\n\nconst model = defineModel<ReactiveCanvasBuilderSchema | undefined>(\n \"modelValue\",\n)\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n nextAutoId += 1\n return `reactive-canvas-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useReactiveCanvasBuilder(builderId.value)\n\nfunction isSchema(value: unknown): value is ReactiveCanvasBuilderSchema {\n if (typeof value !== \"object\" || value === null) {\n return false\n }\n const v = value as Record<string, unknown>\n return (\n typeof v.width === \"number\" &&\n typeof v.height === \"number\" &&\n Array.isArray(v.blocks)\n )\n}\n\nonMounted(() => {\n const seed = model.value\n if (isSchema(seed)) {\n builder.loadSchema(seed)\n }\n})\n\nwatch(\n () => builder.schema.value,\n (next) => {\n model.value = next\n },\n { deep: true },\n)\n\nconst schema = computed<ReactiveCanvasBuilderSchema>(\n () => builder.schema.value,\n)\nconst blocks = computed<ReactiveCanvasBlock[]>(() => schema.value.blocks)\nconst selectedId = computed<string | null>(() => builder.selection.value.id)\nconst selectedBlock = computed<ReactiveCanvasBlock | null>(() => {\n const id = selectedId.value\n if (!id) {\n return null\n }\n return blocks.value.find((b) => b.id === id) ?? null\n})\n\n/** Local string buffer for the props JSON textarea so users can type\n * freely without us re-parsing on every keystroke. */\nconst propsJsonDraft = ref<string>(\"\")\nconst propsJsonError = ref<string | null>(null)\n\nwatch(\n () => selectedBlock.value?.id,\n () => {\n const block = selectedBlock.value\n if (!block) {\n propsJsonDraft.value = \"\"\n propsJsonError.value = null\n return\n }\n propsJsonDraft.value = JSON.stringify(block.props ?? {}, null, 2)\n propsJsonError.value = null\n },\n { immediate: true },\n)\n\nfunction onPaletteAdd(type: string): void {\n const id = builder.addBlock(type)\n builder.select(id)\n}\n\nfunction onBlockClick(blockId: string): void {\n builder.select(blockId)\n}\n\nfunction onClearSelection(): void {\n builder.select(null)\n}\n\nfunction onRemoveSelected(): void {\n const id = selectedId.value\n if (id) {\n builder.removeBlock(id)\n }\n}\n\nfunction patchSelected(\n patch: Partial<Omit<ReactiveCanvasBlock, \"id\">>,\n): void {\n const id = selectedId.value\n if (id) {\n builder.updateBlock(id, patch)\n }\n}\n\nfunction onNumberInput(\n key: \"x\" | \"y\" | \"width\" | \"height\",\n e: Event,\n): void {\n const raw = (e.target as HTMLInputElement).value\n const parsed = Number(raw)\n if (Number.isFinite(parsed)) {\n patchSelected({ [key]: parsed } as Partial<ReactiveCanvasBlock>)\n }\n}\n\nfunction onCanvasSizeInput(key: \"width\" | \"height\", e: Event): void {\n const raw = (e.target as HTMLInputElement).value\n const parsed = Number(raw)\n if (Number.isFinite(parsed) && parsed > 0) {\n builder.setCanvasSize({ [key]: parsed })\n }\n}\n\nfunction onTypeChange(v: unknown): void {\n if (typeof v === \"string\") {\n patchSelected({ type: v })\n }\n}\n\nfunction onPropsJsonInput(e: Event): void {\n const next = (e.target as HTMLTextAreaElement).value\n propsJsonDraft.value = next\n try {\n const parsed = next.trim() === \"\" ? {} : JSON.parse(next)\n if (\n typeof parsed !== \"object\" ||\n parsed === null ||\n Array.isArray(parsed)\n ) {\n throw new Error(\"Props must be a JSON object\")\n }\n propsJsonError.value = null\n patchSelected({ props: parsed as Record<string, unknown> })\n } catch (err) {\n propsJsonError.value =\n err instanceof Error ? err.message : \"Invalid JSON\"\n }\n}\n\nconst canvasStyle = computed(() => ({\n width: `${schema.value.width}px`,\n height: `${schema.value.height}px`,\n maxWidth: \"100%\",\n}))\n\nfunction blockStyle(block: ReactiveCanvasBlock): Record<string, string> {\n return {\n left: `${block.x}px`,\n top: `${block.y}px`,\n width: `${block.width}px`,\n height: `${block.height}px`,\n }\n}\n\n/* ------------------------------------------------------------------ */\n/* Pointer-driven drag + resize */\n/* ------------------------------------------------------------------ */\n\nconst MIN_BLOCK_SIZE = 20\n\ntype ResizeCorner = \"tl\" | \"tr\" | \"bl\" | \"br\"\n\ninterface DragState {\n mode: \"drag\" | \"resize\"\n corner: ResizeCorner | null\n blockId: string\n pointerId: number\n target: HTMLElement\n startClientX: number\n startClientY: number\n startX: number\n startY: number\n startWidth: number\n startHeight: number\n}\n\nconst activeDrag = ref<DragState | null>(null)\nconst activeInteractionId = computed<string | null>(\n () => activeDrag.value?.blockId ?? null,\n)\n\nfunction clampToCanvas(\n x: number,\n y: number,\n width: number,\n height: number,\n): { x: number; y: number } {\n const maxX = Math.max(0, schema.value.width - width)\n const maxY = Math.max(0, schema.value.height - height)\n return {\n x: Math.min(Math.max(0, x), maxX),\n y: Math.min(Math.max(0, y), maxY),\n }\n}\n\nfunction beginInteraction(\n block: ReactiveCanvasBlock,\n event: PointerEvent,\n mode: \"drag\" | \"resize\",\n corner: ResizeCorner | null = null,\n): void {\n event.preventDefault()\n event.stopPropagation()\n builder.select(block.id)\n const target = event.target as HTMLElement | null\n if (target && typeof target.setPointerCapture === \"function\") {\n try {\n target.setPointerCapture(event.pointerId)\n } catch {\n // ignore (jsdom or detached node)\n }\n }\n activeDrag.value = {\n mode,\n corner,\n blockId: block.id,\n pointerId: event.pointerId,\n target: target ?? (event.currentTarget as HTMLElement),\n startClientX: event.clientX,\n startClientY: event.clientY,\n startX: block.x,\n startY: block.y,\n startWidth: block.width,\n startHeight: block.height,\n }\n window.addEventListener(\"pointermove\", onPointerMove)\n window.addEventListener(\"pointerup\", onPointerUp)\n window.addEventListener(\"pointercancel\", onPointerUp)\n}\n\nfunction onBlockPointerDown(\n block: ReactiveCanvasBlock,\n event: PointerEvent,\n): void {\n if (event.button !== undefined && event.button !== 0) {\n return\n }\n beginInteraction(block, event, \"drag\")\n}\n\nfunction onResizePointerDown(\n block: ReactiveCanvasBlock,\n corner: ResizeCorner,\n event: PointerEvent,\n): void {\n if (event.button !== undefined && event.button !== 0) {\n return\n }\n beginInteraction(block, event, \"resize\", corner)\n}\n\nfunction applyDrag(state: DragState, dx: number, dy: number): void {\n const nextX = state.startX + dx\n const nextY = state.startY + dy\n const clamped = clampToCanvas(\n nextX,\n nextY,\n state.startWidth,\n state.startHeight,\n )\n builder.updateBlock(state.blockId, { x: clamped.x, y: clamped.y })\n}\n\nfunction applyResize(state: DragState, dx: number, dy: number): void {\n let x = state.startX\n let y = state.startY\n let width = state.startWidth\n let height = state.startHeight\n switch (state.corner) {\n case \"br\":\n width = state.startWidth + dx\n height = state.startHeight + dy\n break\n case \"tr\":\n width = state.startWidth + dx\n height = state.startHeight - dy\n y = state.startY + dy\n break\n case \"bl\":\n width = state.startWidth - dx\n height = state.startHeight + dy\n x = state.startX + dx\n break\n case \"tl\":\n width = state.startWidth - dx\n height = state.startHeight - dy\n x = state.startX + dx\n y = state.startY + dy\n break\n default:\n return\n }\n // Enforce minimum size: if the user drags past the min on a \"leading\n // edge\" corner (tl/tr/bl), we need to clamp position too so the\n // block doesn't grow in the wrong direction.\n if (width < MIN_BLOCK_SIZE) {\n if (state.corner === \"tl\" || state.corner === \"bl\") {\n x = state.startX + (state.startWidth - MIN_BLOCK_SIZE)\n }\n width = MIN_BLOCK_SIZE\n }\n if (height < MIN_BLOCK_SIZE) {\n if (state.corner === \"tl\" || state.corner === \"tr\") {\n y = state.startY + (state.startHeight - MIN_BLOCK_SIZE)\n }\n height = MIN_BLOCK_SIZE\n }\n builder.updateBlock(state.blockId, { x, y, width, height })\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n const state = activeDrag.value\n if (!state) {\n return\n }\n const dx = event.clientX - state.startClientX\n const dy = event.clientY - state.startClientY\n if (state.mode === \"drag\") {\n applyDrag(state, dx, dy)\n } else {\n applyResize(state, dx, dy)\n }\n}\n\nfunction onPointerUp(event: PointerEvent): void {\n const state = activeDrag.value\n if (state) {\n const target = state.target\n if (target && typeof target.releasePointerCapture === \"function\") {\n try {\n target.releasePointerCapture(state.pointerId)\n } catch {\n // ignore\n }\n }\n }\n activeDrag.value = null\n window.removeEventListener(\"pointermove\", onPointerMove)\n window.removeEventListener(\"pointerup\", onPointerUp)\n window.removeEventListener(\"pointercancel\", onPointerUp)\n void event\n}\n\nonBeforeUnmount(() => {\n window.removeEventListener(\"pointermove\", onPointerMove)\n window.removeEventListener(\"pointerup\", onPointerUp)\n window.removeEventListener(\"pointercancel\", onPointerUp)\n})\n\ninterface ResizeHandleSpec {\n corner: ResizeCorner\n position: string\n cursor: string\n}\n\nconst RESIZE_HANDLES: ResizeHandleSpec[] = [\n { corner: \"tl\", position: \"-top-1 -left-1\", cursor: \"cursor-nwse-resize\" },\n { corner: \"tr\", position: \"-top-1 -right-1\", cursor: \"cursor-nesw-resize\" },\n { corner: \"bl\", position: \"-bottom-1 -left-1\", cursor: \"cursor-nesw-resize\" },\n { corner: \"br\", position: \"-bottom-1 -right-1\", cursor: \"cursor-nwse-resize\" },\n]\n</script>\n\n<template>\n <FieldFrame\n :label=\"props.label\"\n :hide-label=\"props.hideLabel\"\n :help-text=\"props.helpText\"\n :errors=\"props.errors\"\n :class=\"props.classList\"\n >\n <div\n :class=\"cn('gxp-reactive-canvas-builder grid gap-3 rounded-lg border bg-card')\"\n style=\"grid-template-columns: 220px 1fr 320px; min-height: 24rem\"\n data-testid=\"reactive-canvas-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=\"reactive-canvas-builder-palette\"\n >\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Block palette\n </h4>\n <div class=\"flex flex-col gap-1\">\n <button\n v-for=\"type in REACTIVE_CANVAS_BLOCK_TYPES\"\n :key=\"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=\"`reactive-canvas-builder-palette-${type}`\"\n @click=\"onPaletteAdd(type)\"\n >\n <Plus class=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n <span class=\"font-medium\">{{ type }}</span>\n </button>\n </div>\n </aside>\n\n <section\n class=\"flex flex-col gap-3 overflow-auto p-3\"\n data-testid=\"reactive-canvas-builder-canvas\"\n >\n <header class=\"flex items-center justify-between gap-2\">\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Canvas ({{ schema.width }} x {{ schema.height }})\n </h4>\n <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n builder/reactive-canvas-builder\n </Badge>\n </header>\n\n <div\n class=\"relative overflow-auto rounded-md border border-dashed bg-background\"\n :style=\"canvasStyle\"\n data-testid=\"reactive-canvas-builder-surface\"\n >\n <p\n v-if=\"blocks.length === 0\"\n class=\"absolute inset-0 flex items-center justify-center text-center text-xs text-muted-foreground\"\n data-testid=\"reactive-canvas-builder-canvas-empty\"\n >\n Click a block type in the palette to add it.\n </p>\n <div\n v-for=\"block in blocks\"\n :key=\"block.id\"\n class=\"absolute cursor-move touch-none select-none rounded border bg-card p-2 text-xs shadow-sm transition-colors hover:border-primary\"\n :class=\"[\n selectedId === block.id\n ? 'border-primary ring-2 ring-primary/30'\n : '',\n activeInteractionId === block.id ? 'ring-2 ring-primary' : '',\n ]\"\n :style=\"blockStyle(block)\"\n :data-testid=\"`reactive-canvas-builder-block-${block.id}`\"\n @click.stop=\"onBlockClick(block.id)\"\n @pointerdown=\"(e: PointerEvent) => onBlockPointerDown(block, e)\"\n >\n <div class=\"flex items-center justify-between\">\n <span class=\"font-mono text-[10px] text-muted-foreground\">\n {{ block.type }}\n </span>\n <span class=\"font-mono text-[10px] text-muted-foreground\">\n {{ block.width }}x{{ block.height }}\n </span>\n </div>\n <div class=\"mt-1 font-mono text-[10px] text-muted-foreground\">\n ({{ block.x }}, {{ block.y }})\n </div>\n <span\n v-for=\"handle in RESIZE_HANDLES\"\n :key=\"handle.corner\"\n :class=\"\n cn(\n 'absolute h-2 w-2 rounded-sm border border-primary/70 bg-primary/30 hover:bg-primary',\n handle.position,\n handle.cursor,\n )\n \"\n :data-testid=\"`reactive-canvas-builder-block-${block.id}-resize-${handle.corner}`\"\n @click.stop\n @pointerdown.stop=\"\n (e: PointerEvent) => onResizePointerDown(block, handle.corner, e)\n \"\n />\n </div>\n </div>\n </section>\n\n <aside\n class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n data-testid=\"reactive-canvas-builder-inspector\"\n >\n <header class=\"flex items-center justify-between\">\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Inspector\n </h4>\n <Button\n v-if=\"selectedId\"\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 <Card class=\"border-dashed\">\n <CardHeader class=\"py-2\">\n <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n Canvas\n </CardTitle>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-2 pb-3\">\n <div class=\"grid grid-cols-2 gap-2\">\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-canvas-width\">Width</Label>\n <Input\n id=\"rcb-canvas-width\"\n type=\"number\"\n :model-value=\"schema.width\"\n data-testid=\"reactive-canvas-builder-canvas-width\"\n @input=\"(e: Event) => onCanvasSizeInput('width', e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-canvas-height\">Height</Label>\n <Input\n id=\"rcb-canvas-height\"\n type=\"number\"\n :model-value=\"schema.height\"\n data-testid=\"reactive-canvas-builder-canvas-height\"\n @input=\"(e: Event) => onCanvasSizeInput('height', e)\"\n />\n </div>\n </div>\n </CardContent>\n </Card>\n\n <p\n v-if=\"!selectedBlock\"\n class=\"py-3 text-xs text-muted-foreground\"\n data-testid=\"reactive-canvas-builder-inspector-empty\"\n >\n Select a block on the canvas to edit it.\n </p>\n\n <div\n v-else\n class=\"flex flex-col gap-3\"\n data-testid=\"reactive-canvas-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 {{ selectedBlock.type }}\n </CardTitle>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-2 pb-3\">\n <div class=\"flex flex-col gap-1\">\n <Label>Block type</Label>\n <Select\n :model-value=\"selectedBlock.type\"\n @update:model-value=\"onTypeChange\"\n >\n <SelectTrigger\n data-testid=\"reactive-canvas-builder-inspector-type\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"t in REACTIVE_CANVAS_BLOCK_TYPES\"\n :key=\"t\"\n :value=\"t\"\n >\n {{ t }}\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div class=\"grid grid-cols-2 gap-2\">\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-block-x\">X</Label>\n <Input\n id=\"rcb-block-x\"\n type=\"number\"\n :model-value=\"selectedBlock.x\"\n data-testid=\"reactive-canvas-builder-inspector-x\"\n @input=\"(e: Event) => onNumberInput('x', e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-block-y\">Y</Label>\n <Input\n id=\"rcb-block-y\"\n type=\"number\"\n :model-value=\"selectedBlock.y\"\n data-testid=\"reactive-canvas-builder-inspector-y\"\n @input=\"(e: Event) => onNumberInput('y', e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-block-width\">Width</Label>\n <Input\n id=\"rcb-block-width\"\n type=\"number\"\n :model-value=\"selectedBlock.width\"\n data-testid=\"reactive-canvas-builder-inspector-width\"\n @input=\"(e: Event) => onNumberInput('width', e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-block-height\">Height</Label>\n <Input\n id=\"rcb-block-height\"\n type=\"number\"\n :model-value=\"selectedBlock.height\"\n data-testid=\"reactive-canvas-builder-inspector-height\"\n @input=\"(e: Event) => onNumberInput('height', e)\"\n />\n </div>\n </div>\n\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-block-props\">Props (JSON)</Label>\n <Textarea\n id=\"rcb-block-props\"\n :model-value=\"propsJsonDraft\"\n rows=\"6\"\n class=\"font-mono text-xs\"\n data-testid=\"reactive-canvas-builder-inspector-props\"\n @input=\"onPropsJsonInput\"\n />\n <p\n v-if=\"propsJsonError\"\n class=\"text-xs text-destructive\"\n data-testid=\"reactive-canvas-builder-inspector-props-error\"\n >\n {{ propsJsonError }}\n </p>\n </div>\n </CardContent>\n </Card>\n\n <div class=\"flex items-center gap-1\">\n <Button\n variant=\"destructive\"\n size=\"sm\"\n class=\"ml-auto\"\n data-testid=\"reactive-canvas-builder-remove\"\n @click=\"onRemoveSelected\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n Remove block\n </Button>\n </div>\n </div>\n </aside>\n </div>\n </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * ReactiveCanvasBuilder — visual canvas where component-like blocks can\n * be placed and configured.\n *\n * Three-pane layout (matches FormBuilder):\n * - LEFT (Palette): a list of built-in block types. Click to add.\n * - MIDDLE (Canvas): a fixed-size relative-positioned surface. Each\n * block renders as an absolutely-positioned\n * placeholder card showing type + size + position.\n * Click to select.\n * - RIGHT (Inspector): edits the selected block's x / y / width /\n * height (number inputs), type (Select), and\n * props (JSON textarea for now).\n *\n * Blocks may be repositioned by pointer-drag (no snapping, raw pixel\n * delta) and resized via four corner handles. Drag clamps to the\n * canvas bounds; resize clamps each block to a 20x20 minimum.\n *\n * State is owned by `reactiveCanvasBuilderStore`. Two-way binds the\n * full `ReactiveCanvasBuilderSchema` via `defineModel`.\n */\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\"\nimport { Plus, Trash2, X } from \"@lucide/vue\"\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 {\n FieldFrame,\n type FieldFrameProps,\n} from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n REACTIVE_CANVAS_BLOCK_TYPES,\n useReactiveCanvasBuilder,\n type ReactiveCanvasBlock,\n type ReactiveCanvasBuilderSchema,\n} from \"@/stores/reactiveCanvasBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ReactiveCanvasBuilderProps\n extends Pick<FieldFrameProps, \"label\" | \"hideLabel\" | \"helpText\" | \"errors\"> {\n /** Initial / current schema. Two-way bindable via v-model. */\n modelValue?: ReactiveCanvasBuilderSchema\n /**\n * Identifier used to key the reactiveCanvasBuilderStore. Defaults to\n * a stable auto-generated id so multiple builders on the same page\n * don't collide.\n */\n builderId?: string\n name?: string | null\n item?: Record<string, unknown>\n classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<ReactiveCanvasBuilderProps>(), {\n errors: () => [],\n item: () => ({}),\n})\n\nconst model = defineModel<ReactiveCanvasBuilderSchema | undefined>(\n \"modelValue\",\n)\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n nextAutoId += 1\n return `reactive-canvas-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useReactiveCanvasBuilder(builderId.value)\n\nfunction isSchema(value: unknown): value is ReactiveCanvasBuilderSchema {\n if (typeof value !== \"object\" || value === null) {\n return false\n }\n const v = value as Record<string, unknown>\n return (\n typeof v.width === \"number\" &&\n typeof v.height === \"number\" &&\n Array.isArray(v.blocks)\n )\n}\n\nonMounted(() => {\n const seed = model.value\n if (isSchema(seed)) {\n builder.loadSchema(seed)\n }\n})\n\nwatch(\n () => builder.schema.value,\n (next) => {\n model.value = next\n },\n { deep: true },\n)\n\nconst schema = computed<ReactiveCanvasBuilderSchema>(\n () => builder.schema.value,\n)\nconst blocks = computed<ReactiveCanvasBlock[]>(() => schema.value.blocks)\nconst selectedId = computed<string | null>(() => builder.selection.value.id)\nconst selectedBlock = computed<ReactiveCanvasBlock | null>(() => {\n const id = selectedId.value\n if (!id) {\n return null\n }\n return blocks.value.find((b) => b.id === id) ?? null\n})\n\n/** Local string buffer for the props JSON textarea so users can type\n * freely without us re-parsing on every keystroke. */\nconst propsJsonDraft = ref<string>(\"\")\nconst propsJsonError = ref<string | null>(null)\n\nwatch(\n () => selectedBlock.value?.id,\n () => {\n const block = selectedBlock.value\n if (!block) {\n propsJsonDraft.value = \"\"\n propsJsonError.value = null\n return\n }\n propsJsonDraft.value = JSON.stringify(block.props ?? {}, null, 2)\n propsJsonError.value = null\n },\n { immediate: true },\n)\n\nfunction onPaletteAdd(type: string): void {\n const id = builder.addBlock(type)\n builder.select(id)\n}\n\nfunction onBlockClick(blockId: string): void {\n builder.select(blockId)\n}\n\nfunction onClearSelection(): void {\n builder.select(null)\n}\n\nfunction onRemoveSelected(): void {\n const id = selectedId.value\n if (id) {\n builder.removeBlock(id)\n }\n}\n\nfunction patchSelected(\n patch: Partial<Omit<ReactiveCanvasBlock, \"id\">>,\n): void {\n const id = selectedId.value\n if (id) {\n builder.updateBlock(id, patch)\n }\n}\n\nfunction onNumberInput(\n key: \"x\" | \"y\" | \"width\" | \"height\",\n e: Event,\n): void {\n const raw = (e.target as HTMLInputElement).value\n const parsed = Number(raw)\n if (Number.isFinite(parsed)) {\n patchSelected({ [key]: parsed } as Partial<ReactiveCanvasBlock>)\n }\n}\n\nfunction onCanvasSizeInput(key: \"width\" | \"height\", e: Event): void {\n const raw = (e.target as HTMLInputElement).value\n const parsed = Number(raw)\n if (Number.isFinite(parsed) && parsed > 0) {\n builder.setCanvasSize({ [key]: parsed })\n }\n}\n\nfunction onTypeChange(v: unknown): void {\n if (typeof v === \"string\") {\n patchSelected({ type: v })\n }\n}\n\nfunction onPropsJsonInput(e: Event): void {\n const next = (e.target as HTMLTextAreaElement).value\n propsJsonDraft.value = next\n try {\n const parsed = next.trim() === \"\" ? {} : JSON.parse(next)\n if (\n typeof parsed !== \"object\" ||\n parsed === null ||\n Array.isArray(parsed)\n ) {\n throw new Error(\"Props must be a JSON object\")\n }\n propsJsonError.value = null\n patchSelected({ props: parsed as Record<string, unknown> })\n } catch (err) {\n propsJsonError.value =\n err instanceof Error ? err.message : \"Invalid JSON\"\n }\n}\n\nconst canvasStyle = computed(() => ({\n width: `${schema.value.width}px`,\n height: `${schema.value.height}px`,\n maxWidth: \"100%\",\n}))\n\nfunction blockStyle(block: ReactiveCanvasBlock): Record<string, string> {\n return {\n left: `${block.x}px`,\n top: `${block.y}px`,\n width: `${block.width}px`,\n height: `${block.height}px`,\n }\n}\n\n/* ------------------------------------------------------------------ */\n/* Pointer-driven drag + resize */\n/* ------------------------------------------------------------------ */\n\nconst MIN_BLOCK_SIZE = 20\n\ntype ResizeCorner = \"tl\" | \"tr\" | \"bl\" | \"br\"\n\ninterface DragState {\n mode: \"drag\" | \"resize\"\n corner: ResizeCorner | null\n blockId: string\n pointerId: number\n target: HTMLElement\n startClientX: number\n startClientY: number\n startX: number\n startY: number\n startWidth: number\n startHeight: number\n}\n\nconst activeDrag = ref<DragState | null>(null)\nconst activeInteractionId = computed<string | null>(\n () => activeDrag.value?.blockId ?? null,\n)\n\nfunction clampToCanvas(\n x: number,\n y: number,\n width: number,\n height: number,\n): { x: number; y: number } {\n const maxX = Math.max(0, schema.value.width - width)\n const maxY = Math.max(0, schema.value.height - height)\n return {\n x: Math.min(Math.max(0, x), maxX),\n y: Math.min(Math.max(0, y), maxY),\n }\n}\n\nfunction beginInteraction(\n block: ReactiveCanvasBlock,\n event: PointerEvent,\n mode: \"drag\" | \"resize\",\n corner: ResizeCorner | null = null,\n): void {\n event.preventDefault()\n event.stopPropagation()\n builder.select(block.id)\n const target = event.target as HTMLElement | null\n if (target && typeof target.setPointerCapture === \"function\") {\n try {\n target.setPointerCapture(event.pointerId)\n } catch {\n // ignore (jsdom or detached node)\n }\n }\n activeDrag.value = {\n mode,\n corner,\n blockId: block.id,\n pointerId: event.pointerId,\n target: target ?? (event.currentTarget as HTMLElement),\n startClientX: event.clientX,\n startClientY: event.clientY,\n startX: block.x,\n startY: block.y,\n startWidth: block.width,\n startHeight: block.height,\n }\n window.addEventListener(\"pointermove\", onPointerMove)\n window.addEventListener(\"pointerup\", onPointerUp)\n window.addEventListener(\"pointercancel\", onPointerUp)\n}\n\nfunction onBlockPointerDown(\n block: ReactiveCanvasBlock,\n event: PointerEvent,\n): void {\n if (event.button !== undefined && event.button !== 0) {\n return\n }\n beginInteraction(block, event, \"drag\")\n}\n\nfunction onResizePointerDown(\n block: ReactiveCanvasBlock,\n corner: ResizeCorner,\n event: PointerEvent,\n): void {\n if (event.button !== undefined && event.button !== 0) {\n return\n }\n beginInteraction(block, event, \"resize\", corner)\n}\n\nfunction applyDrag(state: DragState, dx: number, dy: number): void {\n const nextX = state.startX + dx\n const nextY = state.startY + dy\n const clamped = clampToCanvas(\n nextX,\n nextY,\n state.startWidth,\n state.startHeight,\n )\n builder.updateBlock(state.blockId, { x: clamped.x, y: clamped.y })\n}\n\nfunction applyResize(state: DragState, dx: number, dy: number): void {\n let x = state.startX\n let y = state.startY\n let width = state.startWidth\n let height = state.startHeight\n switch (state.corner) {\n case \"br\":\n width = state.startWidth + dx\n height = state.startHeight + dy\n break\n case \"tr\":\n width = state.startWidth + dx\n height = state.startHeight - dy\n y = state.startY + dy\n break\n case \"bl\":\n width = state.startWidth - dx\n height = state.startHeight + dy\n x = state.startX + dx\n break\n case \"tl\":\n width = state.startWidth - dx\n height = state.startHeight - dy\n x = state.startX + dx\n y = state.startY + dy\n break\n default:\n return\n }\n // Enforce minimum size: if the user drags past the min on a \"leading\n // edge\" corner (tl/tr/bl), we need to clamp position too so the\n // block doesn't grow in the wrong direction.\n if (width < MIN_BLOCK_SIZE) {\n if (state.corner === \"tl\" || state.corner === \"bl\") {\n x = state.startX + (state.startWidth - MIN_BLOCK_SIZE)\n }\n width = MIN_BLOCK_SIZE\n }\n if (height < MIN_BLOCK_SIZE) {\n if (state.corner === \"tl\" || state.corner === \"tr\") {\n y = state.startY + (state.startHeight - MIN_BLOCK_SIZE)\n }\n height = MIN_BLOCK_SIZE\n }\n builder.updateBlock(state.blockId, { x, y, width, height })\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n const state = activeDrag.value\n if (!state) {\n return\n }\n const dx = event.clientX - state.startClientX\n const dy = event.clientY - state.startClientY\n if (state.mode === \"drag\") {\n applyDrag(state, dx, dy)\n } else {\n applyResize(state, dx, dy)\n }\n}\n\nfunction onPointerUp(event: PointerEvent): void {\n const state = activeDrag.value\n if (state) {\n const target = state.target\n if (target && typeof target.releasePointerCapture === \"function\") {\n try {\n target.releasePointerCapture(state.pointerId)\n } catch {\n // ignore\n }\n }\n }\n activeDrag.value = null\n window.removeEventListener(\"pointermove\", onPointerMove)\n window.removeEventListener(\"pointerup\", onPointerUp)\n window.removeEventListener(\"pointercancel\", onPointerUp)\n void event\n}\n\nonBeforeUnmount(() => {\n window.removeEventListener(\"pointermove\", onPointerMove)\n window.removeEventListener(\"pointerup\", onPointerUp)\n window.removeEventListener(\"pointercancel\", onPointerUp)\n})\n\ninterface ResizeHandleSpec {\n corner: ResizeCorner\n position: string\n cursor: string\n}\n\nconst RESIZE_HANDLES: ResizeHandleSpec[] = [\n { corner: \"tl\", position: \"-top-1 -left-1\", cursor: \"cursor-nwse-resize\" },\n { corner: \"tr\", position: \"-top-1 -right-1\", cursor: \"cursor-nesw-resize\" },\n { corner: \"bl\", position: \"-bottom-1 -left-1\", cursor: \"cursor-nesw-resize\" },\n { corner: \"br\", position: \"-bottom-1 -right-1\", cursor: \"cursor-nwse-resize\" },\n]\n</script>\n\n<template>\n <FieldFrame\n :label=\"props.label\"\n :hide-label=\"props.hideLabel\"\n :help-text=\"props.helpText\"\n :errors=\"props.errors\"\n :class=\"props.classList\"\n >\n <div\n :class=\"cn('gxp-reactive-canvas-builder grid gap-3 rounded-lg border bg-card')\"\n style=\"grid-template-columns: 220px 1fr 320px; min-height: 24rem\"\n data-testid=\"reactive-canvas-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=\"reactive-canvas-builder-palette\"\n >\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Block palette\n </h4>\n <div class=\"flex flex-col gap-1\">\n <button\n v-for=\"type in REACTIVE_CANVAS_BLOCK_TYPES\"\n :key=\"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=\"`reactive-canvas-builder-palette-${type}`\"\n @click=\"onPaletteAdd(type)\"\n >\n <Plus class=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n <span class=\"font-medium\">{{ type }}</span>\n </button>\n </div>\n </aside>\n\n <section\n class=\"flex flex-col gap-3 overflow-auto p-3\"\n data-testid=\"reactive-canvas-builder-canvas\"\n >\n <header class=\"flex items-center justify-between gap-2\">\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Canvas ({{ schema.width }} x {{ schema.height }})\n </h4>\n <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n builder/reactive-canvas-builder\n </Badge>\n </header>\n\n <div\n class=\"relative overflow-auto rounded-md border border-dashed bg-background\"\n :style=\"canvasStyle\"\n data-testid=\"reactive-canvas-builder-surface\"\n >\n <p\n v-if=\"blocks.length === 0\"\n class=\"absolute inset-0 flex items-center justify-center text-center text-xs text-muted-foreground\"\n data-testid=\"reactive-canvas-builder-canvas-empty\"\n >\n Click a block type in the palette to add it.\n </p>\n <div\n v-for=\"block in blocks\"\n :key=\"block.id\"\n class=\"absolute cursor-move touch-none select-none rounded border bg-card p-2 text-xs shadow-sm transition-colors hover:border-primary\"\n :class=\"[\n selectedId === block.id\n ? 'border-primary ring-2 ring-primary/30'\n : '',\n activeInteractionId === block.id ? 'ring-2 ring-primary' : '',\n ]\"\n :style=\"blockStyle(block)\"\n :data-testid=\"`reactive-canvas-builder-block-${block.id}`\"\n @click.stop=\"onBlockClick(block.id)\"\n @pointerdown=\"(e: PointerEvent) => onBlockPointerDown(block, e)\"\n >\n <div class=\"flex items-center justify-between\">\n <span class=\"font-mono text-[10px] text-muted-foreground\">\n {{ block.type }}\n </span>\n <span class=\"font-mono text-[10px] text-muted-foreground\">\n {{ block.width }}x{{ block.height }}\n </span>\n </div>\n <div class=\"mt-1 font-mono text-[10px] text-muted-foreground\">\n ({{ block.x }}, {{ block.y }})\n </div>\n <span\n v-for=\"handle in RESIZE_HANDLES\"\n :key=\"handle.corner\"\n :class=\"\n cn(\n 'absolute h-2 w-2 rounded-sm border border-primary/70 bg-primary/30 hover:bg-primary',\n handle.position,\n handle.cursor,\n )\n \"\n :data-testid=\"`reactive-canvas-builder-block-${block.id}-resize-${handle.corner}`\"\n @click.stop\n @pointerdown.stop=\"\n (e: PointerEvent) => onResizePointerDown(block, handle.corner, e)\n \"\n />\n </div>\n </div>\n </section>\n\n <aside\n class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n data-testid=\"reactive-canvas-builder-inspector\"\n >\n <header class=\"flex items-center justify-between\">\n <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n Inspector\n </h4>\n <Button\n v-if=\"selectedId\"\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 <Card class=\"border-dashed\">\n <CardHeader class=\"py-2\">\n <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n Canvas\n </CardTitle>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-2 pb-3\">\n <div class=\"grid grid-cols-2 gap-2\">\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-canvas-width\">Width</Label>\n <Input\n id=\"rcb-canvas-width\"\n type=\"number\"\n :model-value=\"schema.width\"\n data-testid=\"reactive-canvas-builder-canvas-width\"\n @input=\"(e: Event) => onCanvasSizeInput('width', e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-canvas-height\">Height</Label>\n <Input\n id=\"rcb-canvas-height\"\n type=\"number\"\n :model-value=\"schema.height\"\n data-testid=\"reactive-canvas-builder-canvas-height\"\n @input=\"(e: Event) => onCanvasSizeInput('height', e)\"\n />\n </div>\n </div>\n </CardContent>\n </Card>\n\n <p\n v-if=\"!selectedBlock\"\n class=\"py-3 text-xs text-muted-foreground\"\n data-testid=\"reactive-canvas-builder-inspector-empty\"\n >\n Select a block on the canvas to edit it.\n </p>\n\n <div\n v-else\n class=\"flex flex-col gap-3\"\n data-testid=\"reactive-canvas-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 {{ selectedBlock.type }}\n </CardTitle>\n </CardHeader>\n <CardContent class=\"flex flex-col gap-2 pb-3\">\n <div class=\"flex flex-col gap-1\">\n <Label>Block type</Label>\n <Select\n :model-value=\"selectedBlock.type\"\n @update:model-value=\"onTypeChange\"\n >\n <SelectTrigger\n data-testid=\"reactive-canvas-builder-inspector-type\"\n >\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectItem\n v-for=\"t in REACTIVE_CANVAS_BLOCK_TYPES\"\n :key=\"t\"\n :value=\"t\"\n >\n {{ t }}\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div class=\"grid grid-cols-2 gap-2\">\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-block-x\">X</Label>\n <Input\n id=\"rcb-block-x\"\n type=\"number\"\n :model-value=\"selectedBlock.x\"\n data-testid=\"reactive-canvas-builder-inspector-x\"\n @input=\"(e: Event) => onNumberInput('x', e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-block-y\">Y</Label>\n <Input\n id=\"rcb-block-y\"\n type=\"number\"\n :model-value=\"selectedBlock.y\"\n data-testid=\"reactive-canvas-builder-inspector-y\"\n @input=\"(e: Event) => onNumberInput('y', e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-block-width\">Width</Label>\n <Input\n id=\"rcb-block-width\"\n type=\"number\"\n :model-value=\"selectedBlock.width\"\n data-testid=\"reactive-canvas-builder-inspector-width\"\n @input=\"(e: Event) => onNumberInput('width', e)\"\n />\n </div>\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-block-height\">Height</Label>\n <Input\n id=\"rcb-block-height\"\n type=\"number\"\n :model-value=\"selectedBlock.height\"\n data-testid=\"reactive-canvas-builder-inspector-height\"\n @input=\"(e: Event) => onNumberInput('height', e)\"\n />\n </div>\n </div>\n\n <div class=\"flex flex-col gap-1\">\n <Label for=\"rcb-block-props\">Props (JSON)</Label>\n <Textarea\n id=\"rcb-block-props\"\n :model-value=\"propsJsonDraft\"\n rows=\"6\"\n class=\"font-mono text-xs\"\n data-testid=\"reactive-canvas-builder-inspector-props\"\n @input=\"onPropsJsonInput\"\n />\n <p\n v-if=\"propsJsonError\"\n class=\"text-xs text-destructive\"\n data-testid=\"reactive-canvas-builder-inspector-props-error\"\n >\n {{ propsJsonError }}\n </p>\n </div>\n </CardContent>\n </Card>\n\n <div class=\"flex items-center gap-1\">\n <Button\n variant=\"destructive\"\n size=\"sm\"\n class=\"ml-auto\"\n data-testid=\"reactive-canvas-builder-remove\"\n @click=\"onRemoveSelected\"\n >\n <Trash2 class=\"h-3.5 w-3.5\" />\n Remove block\n </Button>\n </div>\n </div>\n </aside>\n </div>\n </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/chunks/ReactiveCanvasDisplay-CmStQoGO.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./badge-4iQG4kuk.js";
+import { a as n, n as r, o as i, r as a, s as o } from "./card-DAfWnvro.js";
+import { computed as s, createBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
+import { Construction as v } from "@lucide/vue";
+//#region src/components/compositions/elements/display/ReactiveCanvasDisplay.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "flex-1" }, b = /* @__PURE__ */ f({
+	__name: "ReactiveCanvasDisplay",
+	props: {
+		label: {},
+		classList: {}
+	},
+	setup(e) {
+		let f = e, b = s(() => {
+			let e = f.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (s, f) => (m(), c(g(o), {
+			class: p(b.value),
+			"data-testid": "reactive-canvas-display"
+		}, {
+			default: _(() => [d(g(a), { class: "flex flex-row items-center gap-3 p-4" }, {
+				default: _(() => [
+					d(g(v), { class: "size-5 text-muted-foreground" }),
+					l("div", y, [d(g(r), { class: "text-base" }, {
+						default: _(() => [u(h(e.label ?? "Reactive Canvas"), 1)]),
+						_: 1
+					}), d(g(n), null, {
+						default: _(() => [...f[0] ||= [u(" Coming soon — reactive canvas runtime is not yet implemented. ", -1)]]),
+						_: 1
+					})]),
+					d(g(t), { variant: "secondary" }, {
+						default: _(() => [...f[1] ||= [u(" reactive-canvas ", -1)]]),
+						_: 1
+					})
+				]),
+				_: 1
+			}), d(g(i), { class: "p-4 pt-0 text-sm text-muted-foreground" }, {
+				default: _(() => [...f[2] ||= [u(" Awaiting the reactive-canvas builder counterpart. ", -1)]]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["class"]));
+	}
+}), x = /* @__PURE__ */ e({ default: () => S }), S = b;
+//#endregion
+export { x as n, S as t };
+//# sourceMappingURL=ReactiveCanvasDisplay-CmStQoGO.js.map