@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/elements/builder/QuizBuilder.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,456 @@
+import { cn as e } from "../../../../lib/utils.js";
+import t from "../../../ui/badge/Badge.js";
+import "../../../ui/badge/index.js";
+import n from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import r from "../../../ui/card/Card.js";
+import i from "../../../ui/card/CardContent.js";
+import a from "../../../ui/card/CardHeader.js";
+import o from "../../../ui/card/CardTitle.js";
+import "../../../ui/card/index.js";
+import s from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import c from "../../../ui/label/Label.js";
+import "../../../ui/label/index.js";
+import ee from "../../../ui/select/Select.js";
+import te from "../../../ui/select/SelectContent.js";
+import l from "../../../ui/select/SelectItem.js";
+import ne from "../../../ui/select/SelectTrigger.js";
+import re from "../../../ui/select/SelectValue.js";
+import "../../../ui/select/index.js";
+import u from "../../../ui/switch/Switch.js";
+import "../../../ui/switch/index.js";
+import d from "../../../ui/textarea/Textarea.js";
+import "../../../ui/textarea/index.js";
+import { useQuizBuilder as ie } from "../../../../stores/quizBuilderStore.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, onMounted as ae, openBlock as C, ref as oe, renderList as w, toDisplayString as T, unref as E, useModel as se, watch as ce, withCtx as D } from "vue";
+import { Plus as O, Trash2 as k, X as le } from "@lucide/vue";
+//#region src/components/compositions/elements/builder/QuizBuilder.vue?vue&type=script&setup=true&lang.ts
+var ue = ["data-element-name"], A = {
+	class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
+	"data-testid": "quiz-builder-palette"
+}, j = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, M = { class: "flex flex-col gap-1" }, N = [
+	"data-testid",
+	"disabled",
+	"onClick"
+], P = { class: "font-medium" }, F = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+}, I = {
+	key: 1,
+	class: "flex flex-col gap-0.5 text-xs text-destructive",
+	role: "alert"
+}, L = {
+	class: "flex flex-col gap-3 overflow-y-auto p-3",
+	"data-testid": "quiz-builder-canvas"
+}, R = { class: "flex items-center justify-between" }, z = { class: "flex flex-col gap-1" }, B = { class: "flex flex-col gap-1" }, V = { class: "flex flex-col gap-1" }, H = {
+	key: 0,
+	class: "py-6 text-center text-xs text-muted-foreground",
+	"data-testid": "quiz-builder-canvas-empty"
+}, U = {
+	key: 1,
+	class: "flex flex-col gap-1 text-xs",
+	"data-testid": "quiz-builder-canvas-list"
+}, de = ["data-testid", "onClick"], fe = { class: "w-6 text-right tabular-nums text-muted-foreground" }, pe = { class: "flex min-w-0 flex-col" }, me = { class: "truncate font-medium" }, he = { class: "text-[10px] text-muted-foreground" }, ge = {
+	class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
+	"data-testid": "quiz-builder-inspector"
+}, _e = { class: "flex items-center justify-between" }, ve = {
+	key: 0,
+	class: "py-3 text-xs text-muted-foreground",
+	"data-testid": "quiz-builder-inspector-empty"
+}, ye = {
+	key: 1,
+	class: "flex flex-col gap-3",
+	"data-testid": "quiz-builder-inspector-fields"
+}, be = { class: "flex flex-col gap-1" }, xe = { class: "flex flex-col gap-1" }, Se = { class: "flex flex-col gap-1" }, Ce = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" }, we = ["data-testid"], Te = { class: "grid grid-cols-2 gap-1" }, Ee = { class: "flex flex-col gap-1" }, De = { class: "flex flex-col gap-1" }, Oe = { class: "grid grid-cols-2 items-center gap-1" }, ke = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" }, Ae = { class: "flex flex-col gap-1" }, je = {
+	key: 0,
+	class: "py-2 text-center text-xs text-muted-foreground"
+}, W = /* @__PURE__ */ b({
+	__name: "QuizBuilder",
+	props: /* @__PURE__ */ x({
+		modelValue: {},
+		builderId: {},
+		label: {},
+		name: {},
+		item: { default: () => ({}) },
+		classList: {},
+		helpText: {},
+		errors: { default: () => [] },
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(b) {
+		let x = b, W = se(b, "modelValue"), G = 0;
+		function Me() {
+			return G += 1, `quiz-builder-${Date.now()}-${G}`;
+		}
+		let Ne = oe(Me()), K = ie(p(() => x.builderId ?? Ne.value).value);
+		function Pe(e) {
+			if (typeof e != "object" || !e) return !1;
+			let t = e;
+			return Array.isArray(t.questions);
+		}
+		ae(() => {
+			let e = W.value;
+			Pe(e) && K.loadSchema(e);
+		}), ce(() => K.schema.value, (e) => {
+			W.value = {
+				title: e.title,
+				description: e.description,
+				passingScore: e.passingScore,
+				questions: e.questions.map((e) => ({
+					...e,
+					options: e.options.map((e) => ({ ...e }))
+				}))
+			};
+		}, { deep: !0 });
+		let Fe = [
+			{
+				type: "single-choice",
+				label: "Single choice"
+			},
+			{
+				type: "multi-choice",
+				label: "Multi choice"
+			},
+			{
+				type: "free-text",
+				label: "Free text"
+			}
+		], q = p(() => K.schema.value.questions), Ie = p(() => K.schema.value.title ?? ""), Le = p(() => K.schema.value.description ?? ""), Re = p(() => K.schema.value.passingScore ?? 0), J = p(() => {
+			let e = K.selection.value;
+			return e.id ? q.value.find((t) => t.id === e.id) ?? null : null;
+		}), Y = p(() => {
+			let e = J.value;
+			return !!(e && e.type !== "free-text");
+		});
+		function X(e) {
+			let t = K.addQuestion(e);
+			K.select(t);
+		}
+		function ze(e) {
+			K.select(e);
+		}
+		function Be() {
+			let e = K.selection.value;
+			e.id && K.removeQuestion(e.id);
+		}
+		function Ve() {
+			K.select(null);
+		}
+		function Z(e) {
+			let t = K.selection.value;
+			t.id && K.updateQuestion(t.id, e);
+		}
+		function He() {
+			let e = K.selection.value;
+			e.id && K.addOption(e.id);
+		}
+		function Ue(e) {
+			let t = K.selection.value;
+			t.id && K.removeOption(t.id, e);
+		}
+		function Q(e, t) {
+			let n = K.selection.value;
+			n.id && K.updateOption(n.id, e, t);
+		}
+		function $(e) {
+			let t = Number.parseFloat(e);
+			return Number.isFinite(t) ? t : 0;
+		}
+		return (ie, p) => (C(), g("div", {
+			class: S(E(e)("gxp-quiz-builder grid gap-3 rounded-lg border bg-card", x.classList)),
+			style: {
+				"grid-template-columns": "220px 1fr 320px",
+				"min-height": "24rem"
+			},
+			"data-testid": "quiz-builder",
+			"data-element-name": x.name ?? void 0
+		}, [
+			_("aside", A, [
+				_("h4", j, T(x.label ?? "Question palette"), 1),
+				y(E(n), {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					class: "justify-start gap-2",
+					"data-testid": "quiz-builder-palette-add",
+					disabled: x.disabled || x.readonly,
+					onClick: p[0] ||= (e) => X("single-choice")
+				}, {
+					default: D(() => [y(E(O), { class: "h-3.5 w-3.5" }), p[8] ||= v(" Add question ", -1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				_("div", M, [(C(), g(f, null, w(Fe, (e) => _("button", {
+					key: e.type,
+					type: "button",
+					class: "flex items-center 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 disabled:opacity-50",
+					"data-testid": `quiz-builder-palette-${e.type}`,
+					disabled: x.disabled || x.readonly,
+					onClick: (t) => X(e.type)
+				}, [y(E(O), { class: "h-3.5 w-3.5 shrink-0" }), _("span", P, T(e.label), 1)], 8, N)), 64))]),
+				x.helpText ? (C(), g("p", F, T(x.helpText), 1)) : h("", !0),
+				x.errors.length ? (C(), g("ul", I, [(C(!0), g(f, null, w(x.errors, (e, t) => (C(), g("li", { key: t }, T(e), 1))), 128))])) : h("", !0)
+			]),
+			_("section", L, [
+				_("header", R, [p[10] ||= _("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Quiz ", -1), y(E(t), {
+					variant: "outline",
+					class: "font-mono text-[10px]"
+				}, {
+					default: D(() => [...p[9] ||= [v(" builder/quiz-builder ", -1)]]),
+					_: 1
+				})]),
+				y(E(r), { class: "border-dashed" }, {
+					default: D(() => [y(E(i), { class: "flex flex-col gap-2 py-3" }, {
+						default: D(() => [
+							_("div", z, [y(E(c), { for: "qb-title" }, {
+								default: D(() => [...p[11] ||= [v("Quiz title", -1)]]),
+								_: 1
+							}), y(E(s), {
+								id: "qb-title",
+								"model-value": Ie.value,
+								"data-testid": "quiz-builder-title",
+								onInput: p[1] ||= (e) => E(K).updateMeta({ title: e.target.value })
+							}, null, 8, ["model-value"])]),
+							_("div", B, [y(E(c), { for: "qb-description" }, {
+								default: D(() => [...p[12] ||= [v("Description", -1)]]),
+								_: 1
+							}), y(E(d), {
+								id: "qb-description",
+								"model-value": Le.value,
+								"data-testid": "quiz-builder-description",
+								onInput: p[2] ||= (e) => E(K).updateMeta({ description: e.target.value })
+							}, null, 8, ["model-value"])]),
+							_("div", V, [y(E(c), { for: "qb-passing" }, {
+								default: D(() => [...p[13] ||= [v("Passing score", -1)]]),
+								_: 1
+							}), y(E(s), {
+								id: "qb-passing",
+								type: "number",
+								"model-value": Re.value,
+								"data-testid": "quiz-builder-passing-score",
+								onInput: p[3] ||= (e) => E(K).updateMeta({ passingScore: $(e.target.value) })
+							}, null, 8, ["model-value"])])
+						]),
+						_: 1
+					})]),
+					_: 1
+				}),
+				q.value.length === 0 ? (C(), g("p", H, " Click \"Add question\" or a chip to start the quiz. ")) : (C(), g("ul", U, [(C(!0), g(f, null, w(q.value, (e, n) => (C(), g("li", {
+					key: e.id,
+					class: S(["flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors", E(K).selection.value.id === e.id ? "border-primary bg-accent/30" : ""]),
+					"data-testid": `quiz-builder-row-${e.id}`,
+					onClick: (t) => ze(e.id)
+				}, [
+					_("span", fe, T(n + 1) + ". ", 1),
+					_("span", pe, [_("span", me, T(e.prompt), 1), _("span", he, T(e.options.length) + " option(s) ", 1)]),
+					y(E(t), {
+						variant: "secondary",
+						class: "ml-auto font-mono text-[9px]"
+					}, {
+						default: D(() => [v(T(e.type), 1)]),
+						_: 2
+					}, 1024)
+				], 10, de))), 128))]))
+			]),
+			_("aside", ge, [_("header", _e, [p[14] ||= _("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1), E(K).selection.value.id ? (C(), m(E(n), {
+				key: 0,
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Clear selection",
+				onClick: Ve
+			}, {
+				default: D(() => [y(E(le), { class: "h-3.5 w-3.5" })]),
+				_: 1
+			})) : h("", !0)]), J.value ? (C(), g("div", ye, [
+				y(E(r), { class: "border-dashed" }, {
+					default: D(() => [y(E(a), { class: "py-2" }, {
+						default: D(() => [y(E(o), { class: "font-mono text-xs uppercase tracking-wide" }, {
+							default: D(() => [...p[15] ||= [v(" question ", -1)]]),
+							_: 1
+						})]),
+						_: 1
+					}), y(E(i), { class: "flex flex-col gap-2 pb-3" }, {
+						default: D(() => [
+							_("div", be, [y(E(c), { for: "qb-prompt" }, {
+								default: D(() => [...p[16] ||= [v("Prompt", -1)]]),
+								_: 1
+							}), y(E(s), {
+								id: "qb-prompt",
+								"model-value": J.value.prompt,
+								"data-testid": "quiz-builder-inspector-prompt",
+								onInput: p[4] ||= (e) => Z({ prompt: e.target.value })
+							}, null, 8, ["model-value"])]),
+							_("div", xe, [y(E(c), { for: "qb-type" }, {
+								default: D(() => [...p[17] ||= [v("Type", -1)]]),
+								_: 1
+							}), y(E(ee), {
+								"model-value": J.value.type,
+								"onUpdate:modelValue": p[5] ||= (e) => Z({ type: e })
+							}, {
+								default: D(() => [y(E(ne), {
+									id: "qb-type",
+									"data-testid": "quiz-builder-inspector-type"
+								}, {
+									default: D(() => [y(E(re), { placeholder: "Question type" })]),
+									_: 1
+								}), y(E(te), null, {
+									default: D(() => [
+										y(E(l), { value: "single-choice" }, {
+											default: D(() => [...p[18] ||= [v("Single choice", -1)]]),
+											_: 1
+										}),
+										y(E(l), { value: "multi-choice" }, {
+											default: D(() => [...p[19] ||= [v("Multi choice", -1)]]),
+											_: 1
+										}),
+										y(E(l), { value: "free-text" }, {
+											default: D(() => [...p[20] ||= [v("Free text", -1)]]),
+											_: 1
+										})
+									]),
+									_: 1
+								})]),
+								_: 1
+							}, 8, ["model-value"])]),
+							_("div", Se, [y(E(c), { for: "qb-help" }, {
+								default: D(() => [...p[21] ||= [v("Help text", -1)]]),
+								_: 1
+							}), y(E(d), {
+								id: "qb-help",
+								"model-value": J.value.helpText ?? "",
+								"data-testid": "quiz-builder-inspector-help",
+								onInput: p[6] ||= (e) => Z({ helpText: e.target.value })
+							}, null, 8, ["model-value"])]),
+							_("div", Ce, [y(E(c), { for: "qb-required" }, {
+								default: D(() => [...p[22] ||= [v("Required", -1)]]),
+								_: 1
+							}), y(E(u), {
+								id: "qb-required",
+								"model-value": !!J.value.required,
+								"data-testid": "quiz-builder-inspector-required",
+								"onUpdate:modelValue": p[7] ||= (e) => Z({ required: e })
+							}, null, 8, ["model-value"])])
+						]),
+						_: 1
+					})]),
+					_: 1
+				}),
+				Y.value ? (C(), m(E(r), {
+					key: 0,
+					class: "border-dashed"
+				}, {
+					default: D(() => [y(E(a), { class: "py-2" }, {
+						default: D(() => [y(E(o), { class: "flex items-center justify-between font-mono text-xs uppercase tracking-wide" }, {
+							default: D(() => [p[24] ||= _("span", null, "options", -1), y(E(n), {
+								variant: "outline",
+								size: "sm",
+								"data-testid": "quiz-builder-inspector-add-option",
+								onClick: He
+							}, {
+								default: D(() => [y(E(O), { class: "h-3.5 w-3.5" }), p[23] ||= v(" Add option ", -1)]),
+								_: 1
+							})]),
+							_: 1
+						})]),
+						_: 1
+					}), y(E(i), { class: "flex flex-col gap-2 pb-3" }, {
+						default: D(() => [(C(!0), g(f, null, w(J.value.options, (e) => (C(), g("div", {
+							key: e.id,
+							class: "flex flex-col gap-1 rounded border bg-background p-2",
+							"data-testid": `quiz-builder-inspector-option-${e.id}`
+						}, [
+							_("div", Te, [_("div", Ee, [y(E(c), { for: `qb-opt-label-${e.id}` }, {
+								default: D(() => [...p[25] ||= [v("Label", -1)]]),
+								_: 1
+							}, 8, ["for"]), y(E(s), {
+								id: `qb-opt-label-${e.id}`,
+								"model-value": e.label,
+								"data-testid": `quiz-builder-inspector-option-${e.id}-label`,
+								onInput: (t) => Q(e.id, { label: t.target.value })
+							}, null, 8, [
+								"id",
+								"model-value",
+								"data-testid",
+								"onInput"
+							])]), _("div", De, [y(E(c), { for: `qb-opt-value-${e.id}` }, {
+								default: D(() => [...p[26] ||= [v("Value", -1)]]),
+								_: 1
+							}, 8, ["for"]), y(E(s), {
+								id: `qb-opt-value-${e.id}`,
+								"model-value": String(e.value),
+								"data-testid": `quiz-builder-inspector-option-${e.id}-value`,
+								onInput: (t) => Q(e.id, { value: t.target.value })
+							}, null, 8, [
+								"id",
+								"model-value",
+								"data-testid",
+								"onInput"
+							])])]),
+							_("div", Oe, [_("div", ke, [y(E(c), { for: `qb-opt-correct-${e.id}` }, {
+								default: D(() => [...p[27] ||= [v("Correct", -1)]]),
+								_: 1
+							}, 8, ["for"]), y(E(u), {
+								id: `qb-opt-correct-${e.id}`,
+								"model-value": !!e.correct,
+								"data-testid": `quiz-builder-inspector-option-${e.id}-correct`,
+								"onUpdate:modelValue": (t) => Q(e.id, { correct: t })
+							}, null, 8, [
+								"id",
+								"model-value",
+								"data-testid",
+								"onUpdate:modelValue"
+							])]), _("div", Ae, [y(E(c), { for: `qb-opt-score-${e.id}` }, {
+								default: D(() => [...p[28] ||= [v("Score", -1)]]),
+								_: 1
+							}, 8, ["for"]), y(E(s), {
+								id: `qb-opt-score-${e.id}`,
+								type: "number",
+								"model-value": e.score ?? 0,
+								"data-testid": `quiz-builder-inspector-option-${e.id}-score`,
+								onInput: (t) => Q(e.id, { score: $(t.target.value) })
+							}, null, 8, [
+								"id",
+								"model-value",
+								"data-testid",
+								"onInput"
+							])])]),
+							y(E(n), {
+								variant: "ghost",
+								size: "sm",
+								class: "self-end text-destructive",
+								"data-testid": `quiz-builder-inspector-option-${e.id}-remove`,
+								onClick: (t) => Ue(e.id)
+							}, {
+								default: D(() => [y(E(k), { class: "h-3.5 w-3.5" }), p[29] ||= v(" Remove option ", -1)]),
+								_: 1
+							}, 8, ["data-testid", "onClick"])
+						], 8, we))), 128)), J.value.options.length === 0 ? (C(), g("p", je, " No options yet — click \"Add option\". ")) : h("", !0)]),
+						_: 1
+					})]),
+					_: 1
+				})) : h("", !0),
+				y(E(n), {
+					variant: "destructive",
+					size: "sm",
+					class: "self-end",
+					"data-testid": "quiz-builder-remove",
+					onClick: Be
+				}, {
+					default: D(() => [y(E(k), { class: "h-3.5 w-3.5" }), p[30] ||= v(" Remove question ", -1)]),
+					_: 1
+				})
+			])) : (C(), g("p", ve, " Select a question on the canvas to edit it. "))])
+		], 10, ue));
+	}
+});
+//#endregion
+export { W as default };
+
+//# sourceMappingURL=QuizBuilder.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/builder/QuizBuilder.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuizBuilder.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/builder/QuizBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * QuizBuilder — MVP visual quiz designer.\n *\n * Three-pane layout:\n *   - LEFT  (Palette):    \"Add question\" plus chips for each question\n *                         type (single-choice, multi-choice, free-text).\n *                         Clicking a chip appends a question of that\n *                         type to the canvas.\n *   - MIDDLE (Canvas):    The list of questions plus the quiz-level\n *                         metadata (title, description, passing score).\n *                         Click a question to select it.\n *   - RIGHT (Inspector):  Edit the selected question's prompt, type,\n *                         help text, required flag, and (for\n *                         single/multi-choice) the option list — add,\n *                         label, value, correct, score, remove.\n *\n * State lives in `quizBuilderStore` (Pinia). The component accepts an\n * optional `modelValue` schema (v-modelable) and emits the current\n * schema on every mutation.\n */\nimport { computed, 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 { 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 { Switch } from \"@/components/ui/switch\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n  useQuizBuilder,\n  type QuizBuilderSchema,\n  type QuizOption,\n  type QuizQuestion,\n  type QuizQuestionType,\n} from \"@/stores/quizBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface QuizBuilderProps {\n  /** Initial / current schema. Two-way bindable via v-model. */\n  modelValue?: QuizBuilderSchema\n  /**\n   * Identifier used to key the quizBuilderStore. Defaults to a stable\n   * auto-generated id.\n   */\n  builderId?: string\n  label?: string\n  name?: string | null\n  item?: Record<string, unknown>\n  classList?: string[] | string\n  helpText?: string\n  errors?: string[]\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<QuizBuilderProps>(), {\n  errors: () => [],\n  item: () => ({}),\n})\n\nconst model = defineModel<QuizBuilderSchema | undefined>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n  nextAutoId += 1\n  return `quiz-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useQuizBuilder(builderId.value)\n\nfunction isQuizBuilderSchema(value: unknown): value is QuizBuilderSchema {\n  if (typeof value !== \"object\" || value === null) {\n    return false\n  }\n  const v = value as Record<string, unknown>\n  return Array.isArray(v.questions)\n}\n\n/** Seed the store from the initial modelValue. */\nonMounted(() => {\n  const seed = model.value\n  if (isQuizBuilderSchema(seed)) {\n    builder.loadSchema(seed)\n  }\n})\n\n/** Push schema changes back via v-model. */\nwatch(\n  () => builder.schema.value,\n  (next) => {\n    model.value = {\n      title: next.title,\n      description: next.description,\n      passingScore: next.passingScore,\n      questions: next.questions.map((q) => ({\n        ...q,\n        options: q.options.map((o) => ({ ...o })),\n      })),\n    }\n  },\n  { deep: true },\n)\n\ninterface QuestionTypeChip {\n  type: QuizQuestionType\n  label: string\n}\n\nconst questionTypeChips: QuestionTypeChip[] = [\n  { type: \"single-choice\", label: \"Single choice\" },\n  { type: \"multi-choice\", label: \"Multi choice\" },\n  { type: \"free-text\", label: \"Free text\" },\n]\n\nconst questions = computed<QuizQuestion[]>(\n  () => builder.schema.value.questions,\n)\n\nconst titleValue = computed<string>(() => builder.schema.value.title ?? \"\")\nconst descriptionValue = computed<string>(\n  () => builder.schema.value.description ?? \"\",\n)\nconst passingScoreValue = computed<number>(\n  () => builder.schema.value.passingScore ?? 0,\n)\n\nconst selectedQuestion = computed<QuizQuestion | null>(() => {\n  const sel = builder.selection.value\n  if (!sel.id) {\n    return null\n  }\n  return questions.value.find((q) => q.id === sel.id) ?? null\n})\n\nconst selectedHasOptions = computed<boolean>(() => {\n  const q = selectedQuestion.value\n  return Boolean(q && q.type !== \"free-text\")\n})\n\nfunction onAddQuestion(type: QuizQuestionType): void {\n  const id = builder.addQuestion(type)\n  builder.select(id)\n}\n\nfunction onQuestionClick(questionId: string): void {\n  builder.select(questionId)\n}\n\nfunction onRemoveQuestion(): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.removeQuestion(sel.id)\n  }\n}\n\nfunction onClearSelection(): void {\n  builder.select(null)\n}\n\nfunction patchSelectedQuestion(patch: Partial<Omit<QuizQuestion, \"id\">>): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.updateQuestion(sel.id, patch)\n  }\n}\n\nfunction onAddOption(): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.addOption(sel.id)\n  }\n}\n\nfunction onRemoveOption(optionId: string): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.removeOption(sel.id, optionId)\n  }\n}\n\nfunction patchOption(\n  optionId: string,\n  patch: Partial<Omit<QuizOption, \"id\">>,\n): void {\n  const sel = builder.selection.value\n  if (sel.id) {\n    builder.updateOption(sel.id, optionId, patch)\n  }\n}\n\nfunction parseScore(value: string): number {\n  const n = Number.parseFloat(value)\n  return Number.isFinite(n) ? n : 0\n}\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'gxp-quiz-builder grid gap-3 rounded-lg border bg-card',\n        props.classList,\n      )\n    \"\n    style=\"grid-template-columns: 220px 1fr 320px; min-height: 24rem\"\n    data-testid=\"quiz-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=\"quiz-builder-palette\"\n    >\n      <h4\n        class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n      >\n        {{ props.label ?? \"Question palette\" }}\n      </h4>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        class=\"justify-start gap-2\"\n        data-testid=\"quiz-builder-palette-add\"\n        :disabled=\"props.disabled || props.readonly\"\n        @click=\"onAddQuestion('single-choice')\"\n      >\n        <Plus class=\"h-3.5 w-3.5\" />\n        Add question\n      </Button>\n      <div class=\"flex flex-col gap-1\">\n        <button\n          v-for=\"chip in questionTypeChips\"\n          :key=\"chip.type\"\n          type=\"button\"\n          class=\"flex items-center 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 disabled:opacity-50\"\n          :data-testid=\"`quiz-builder-palette-${chip.type}`\"\n          :disabled=\"props.disabled || props.readonly\"\n          @click=\"onAddQuestion(chip.type)\"\n        >\n          <Plus class=\"h-3.5 w-3.5 shrink-0\" />\n          <span class=\"font-medium\">{{ chip.label }}</span>\n        </button>\n      </div>\n      <p v-if=\"props.helpText\" class=\"text-xs text-muted-foreground\">\n        {{ props.helpText }}\n      </p>\n      <ul\n        v-if=\"props.errors.length\"\n        class=\"flex flex-col gap-0.5 text-xs text-destructive\"\n        role=\"alert\"\n      >\n        <li v-for=\"(err, i) in props.errors\" :key=\"i\">{{ err }}</li>\n      </ul>\n    </aside>\n\n    <section\n      class=\"flex flex-col gap-3 overflow-y-auto p-3\"\n      data-testid=\"quiz-builder-canvas\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4\n          class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n        >\n          Quiz\n        </h4>\n        <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n          builder/quiz-builder\n        </Badge>\n      </header>\n\n      <Card class=\"border-dashed\">\n        <CardContent class=\"flex flex-col gap-2 py-3\">\n          <div class=\"flex flex-col gap-1\">\n            <Label for=\"qb-title\">Quiz title</Label>\n            <Input\n              id=\"qb-title\"\n              :model-value=\"titleValue\"\n              data-testid=\"quiz-builder-title\"\n              @input=\"\n                (e: Event) =>\n                  builder.updateMeta({\n                    title: (e.target as HTMLInputElement).value,\n                  })\n              \"\n            />\n          </div>\n          <div class=\"flex flex-col gap-1\">\n            <Label for=\"qb-description\">Description</Label>\n            <Textarea\n              id=\"qb-description\"\n              :model-value=\"descriptionValue\"\n              data-testid=\"quiz-builder-description\"\n              @input=\"\n                (e: Event) =>\n                  builder.updateMeta({\n                    description: (e.target as HTMLTextAreaElement).value,\n                  })\n              \"\n            />\n          </div>\n          <div class=\"flex flex-col gap-1\">\n            <Label for=\"qb-passing\">Passing score</Label>\n            <Input\n              id=\"qb-passing\"\n              type=\"number\"\n              :model-value=\"passingScoreValue\"\n              data-testid=\"quiz-builder-passing-score\"\n              @input=\"\n                (e: Event) =>\n                  builder.updateMeta({\n                    passingScore: parseScore(\n                      (e.target as HTMLInputElement).value,\n                    ),\n                  })\n              \"\n            />\n          </div>\n        </CardContent>\n      </Card>\n\n      <p\n        v-if=\"questions.length === 0\"\n        class=\"py-6 text-center text-xs text-muted-foreground\"\n        data-testid=\"quiz-builder-canvas-empty\"\n      >\n        Click \"Add question\" or a chip to start the quiz.\n      </p>\n\n      <ul\n        v-else\n        class=\"flex flex-col gap-1 text-xs\"\n        data-testid=\"quiz-builder-canvas-list\"\n      >\n        <li\n          v-for=\"(q, index) in questions\"\n          :key=\"q.id\"\n          class=\"flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors\"\n          :class=\"\n            builder.selection.value.id === q.id\n              ? 'border-primary bg-accent/30'\n              : ''\n          \"\n          :data-testid=\"`quiz-builder-row-${q.id}`\"\n          @click=\"onQuestionClick(q.id)\"\n        >\n          <span class=\"w-6 text-right tabular-nums text-muted-foreground\">\n            {{ index + 1 }}.\n          </span>\n          <span class=\"flex min-w-0 flex-col\">\n            <span class=\"truncate font-medium\">{{ q.prompt }}</span>\n            <span class=\"text-[10px] text-muted-foreground\">\n              {{ q.options.length }} option(s)\n            </span>\n          </span>\n          <Badge variant=\"secondary\" class=\"ml-auto font-mono text-[9px]\">\n            {{ q.type }}\n          </Badge>\n        </li>\n      </ul>\n    </section>\n\n    <aside\n      class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n      data-testid=\"quiz-builder-inspector\"\n    >\n      <header class=\"flex items-center justify-between\">\n        <h4\n          class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n        >\n          Inspector\n        </h4>\n        <Button\n          v-if=\"builder.selection.value.id\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label=\"Clear selection\"\n          @click=\"onClearSelection\"\n        >\n          <X class=\"h-3.5 w-3.5\" />\n        </Button>\n      </header>\n\n      <p\n        v-if=\"!selectedQuestion\"\n        class=\"py-3 text-xs text-muted-foreground\"\n        data-testid=\"quiz-builder-inspector-empty\"\n      >\n        Select a question on the canvas to edit it.\n      </p>\n\n      <div\n        v-else\n        class=\"flex flex-col gap-3\"\n        data-testid=\"quiz-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              question\n            </CardTitle>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2 pb-3\">\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"qb-prompt\">Prompt</Label>\n              <Input\n                id=\"qb-prompt\"\n                :model-value=\"selectedQuestion.prompt\"\n                data-testid=\"quiz-builder-inspector-prompt\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelectedQuestion({\n                      prompt: (e.target as HTMLInputElement).value,\n                    })\n                \"\n              />\n            </div>\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"qb-type\">Type</Label>\n              <Select\n                :model-value=\"selectedQuestion.type\"\n                @update:model-value=\"\n                  (v: unknown) =>\n                    patchSelectedQuestion({ type: v as QuizQuestionType })\n                \"\n              >\n                <SelectTrigger\n                  id=\"qb-type\"\n                  data-testid=\"quiz-builder-inspector-type\"\n                >\n                  <SelectValue placeholder=\"Question type\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"single-choice\">Single choice</SelectItem>\n                  <SelectItem value=\"multi-choice\">Multi choice</SelectItem>\n                  <SelectItem value=\"free-text\">Free text</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n            <div class=\"flex flex-col gap-1\">\n              <Label for=\"qb-help\">Help text</Label>\n              <Textarea\n                id=\"qb-help\"\n                :model-value=\"selectedQuestion.helpText ?? ''\"\n                data-testid=\"quiz-builder-inspector-help\"\n                @input=\"\n                  (e: Event) =>\n                    patchSelectedQuestion({\n                      helpText: (e.target as HTMLTextAreaElement).value,\n                    })\n                \"\n              />\n            </div>\n            <div\n              class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n            >\n              <Label for=\"qb-required\">Required</Label>\n              <Switch\n                id=\"qb-required\"\n                :model-value=\"Boolean(selectedQuestion.required)\"\n                data-testid=\"quiz-builder-inspector-required\"\n                @update:model-value=\"\n                  (v: boolean) => patchSelectedQuestion({ required: v })\n                \"\n              />\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card v-if=\"selectedHasOptions\" class=\"border-dashed\">\n          <CardHeader class=\"py-2\">\n            <CardTitle\n              class=\"flex items-center justify-between font-mono text-xs uppercase tracking-wide\"\n            >\n              <span>options</span>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                data-testid=\"quiz-builder-inspector-add-option\"\n                @click=\"onAddOption\"\n              >\n                <Plus class=\"h-3.5 w-3.5\" />\n                Add option\n              </Button>\n            </CardTitle>\n          </CardHeader>\n          <CardContent class=\"flex flex-col gap-2 pb-3\">\n            <div\n              v-for=\"opt in selectedQuestion.options\"\n              :key=\"opt.id\"\n              class=\"flex flex-col gap-1 rounded border bg-background p-2\"\n              :data-testid=\"`quiz-builder-inspector-option-${opt.id}`\"\n            >\n              <div class=\"grid grid-cols-2 gap-1\">\n                <div class=\"flex flex-col gap-1\">\n                  <Label :for=\"`qb-opt-label-${opt.id}`\">Label</Label>\n                  <Input\n                    :id=\"`qb-opt-label-${opt.id}`\"\n                    :model-value=\"opt.label\"\n                    :data-testid=\"`quiz-builder-inspector-option-${opt.id}-label`\"\n                    @input=\"\n                      (e: Event) =>\n                        patchOption(opt.id, {\n                          label: (e.target as HTMLInputElement).value,\n                        })\n                    \"\n                  />\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <Label :for=\"`qb-opt-value-${opt.id}`\">Value</Label>\n                  <Input\n                    :id=\"`qb-opt-value-${opt.id}`\"\n                    :model-value=\"String(opt.value)\"\n                    :data-testid=\"`quiz-builder-inspector-option-${opt.id}-value`\"\n                    @input=\"\n                      (e: Event) =>\n                        patchOption(opt.id, {\n                          value: (e.target as HTMLInputElement).value,\n                        })\n                    \"\n                  />\n                </div>\n              </div>\n              <div class=\"grid grid-cols-2 items-center gap-1\">\n                <div\n                  class=\"flex items-center justify-between rounded border bg-background px-2 py-1\"\n                >\n                  <Label :for=\"`qb-opt-correct-${opt.id}`\">Correct</Label>\n                  <Switch\n                    :id=\"`qb-opt-correct-${opt.id}`\"\n                    :model-value=\"Boolean(opt.correct)\"\n                    :data-testid=\"`quiz-builder-inspector-option-${opt.id}-correct`\"\n                    @update:model-value=\"\n                      (v: boolean) => patchOption(opt.id, { correct: v })\n                    \"\n                  />\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <Label :for=\"`qb-opt-score-${opt.id}`\">Score</Label>\n                  <Input\n                    :id=\"`qb-opt-score-${opt.id}`\"\n                    type=\"number\"\n                    :model-value=\"opt.score ?? 0\"\n                    :data-testid=\"`quiz-builder-inspector-option-${opt.id}-score`\"\n                    @input=\"\n                      (e: Event) =>\n                        patchOption(opt.id, {\n                          score: parseScore(\n                            (e.target as HTMLInputElement).value,\n                          ),\n                        })\n                    \"\n                  />\n                </div>\n              </div>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"self-end text-destructive\"\n                :data-testid=\"`quiz-builder-inspector-option-${opt.id}-remove`\"\n                @click=\"onRemoveOption(opt.id)\"\n              >\n                <Trash2 class=\"h-3.5 w-3.5\" />\n                Remove option\n              </Button>\n            </div>\n            <p\n              v-if=\"selectedQuestion.options.length === 0\"\n              class=\"py-2 text-center text-xs text-muted-foreground\"\n            >\n              No options yet — click \"Add option\".\n            </p>\n          </CardContent>\n        </Card>\n\n        <Button\n          variant=\"destructive\"\n          size=\"sm\"\n          class=\"self-end\"\n          data-testid=\"quiz-builder-remove\"\n          @click=\"onRemoveQuestion\"\n        >\n          <Trash2 class=\"h-3.5 w-3.5\" />\n          Remove question\n        </Button>\n      </div>\n    </aside>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuEA,IAAM,IAAQ,GAKR,IAAQ,GAA0C,GAAC,YAAY,GAEjE,IAAa;EACjB,SAAS,KAAqB;GAE5B,OADA,KAAc,GACP,gBAAgB,KAAK,IAAI,EAAE,GAAG;EACvC;EACA,IAAM,KAAa,GAAY,GAAW,CAAC,GAGrC,IAAU,GAFE,QAAuB,EAAM,aAAa,GAAW,KAExC,EAAU,KAAK;EAE9C,SAAS,GAAoB,GAA4C;GACvE,IAAI,OAAO,KAAU,aAAY,GAC/B,OAAO;GAET,IAAM,IAAI;GACV,OAAO,MAAM,QAAQ,EAAE,SAAS;EAClC;EAWA,AARA,SAAgB;GACd,IAAM,IAAO,EAAM;GACnB,AAAI,GAAoB,CAAI,KAC1B,EAAQ,WAAW,CAAI;EAE3B,CAAC,GAGD,SACQ,EAAQ,OAAO,QACpB,MAAS;GACR,EAAM,QAAQ;IACZ,OAAO,EAAK;IACZ,aAAa,EAAK;IAClB,cAAc,EAAK;IACnB,WAAW,EAAK,UAAU,KAAK,OAAO;KACpC,GAAG;KACH,SAAS,EAAE,QAAQ,KAAK,OAAO,EAAE,GAAG,EAAE,EAAE;IAC1C,EAAE;GACJ;EACF,GACA,EAAE,MAAM,GAAK,CACf;EAOA,IAAM,KAAwC;GAC5C;IAAE,MAAM;IAAiB,OAAO;GAAgB;GAChD;IAAE,MAAM;IAAgB,OAAO;GAAe;GAC9C;IAAE,MAAM;IAAa,OAAO;GAAY;EAC1C,GAEM,IAAY,QACV,EAAQ,OAAO,MAAM,SAC7B,GAEM,KAAa,QAAuB,EAAQ,OAAO,MAAM,SAAS,EAAE,GACpE,KAAmB,QACjB,EAAQ,OAAO,MAAM,eAAe,EAC5C,GACM,KAAoB,QAClB,EAAQ,OAAO,MAAM,gBAAgB,CAC7C,GAEM,IAAmB,QAAoC;GAC3D,IAAM,IAAM,EAAQ,UAAU;GAI9B,OAHK,EAAI,KAGF,EAAU,MAAM,MAAM,MAAM,EAAE,OAAO,EAAI,EAAE,KAAK,OAF9C;EAGX,CAAC,GAEK,IAAqB,QAAwB;GACjD,IAAM,IAAI,EAAiB;GAC3B,OAAO,GAAQ,KAAK,EAAE,SAAS;EACjC,CAAC;EAED,SAAS,EAAc,GAA8B;GACnD,IAAM,IAAK,EAAQ,YAAY,CAAI;GACnC,EAAQ,OAAO,CAAE;EACnB;EAEA,SAAS,GAAgB,GAA0B;GACjD,EAAQ,OAAO,CAAU;EAC3B;EAEA,SAAS,KAAyB;GAChC,IAAM,IAAM,EAAQ,UAAU;GAC9B,AAAI,EAAI,MACN,EAAQ,eAAe,EAAI,EAAE;EAEjC;EAEA,SAAS,KAAyB;GAChC,EAAQ,OAAO,IAAI;EACrB;EAEA,SAAS,EAAsB,GAAgD;GAC7E,IAAM,IAAM,EAAQ,UAAU;GAC9B,AAAI,EAAI,MACN,EAAQ,eAAe,EAAI,IAAI,CAAK;EAExC;EAEA,SAAS,KAAoB;GAC3B,IAAM,IAAM,EAAQ,UAAU;GAC9B,AAAI,EAAI,MACN,EAAQ,UAAU,EAAI,EAAE;EAE5B;EAEA,SAAS,GAAe,GAAwB;GAC9C,IAAM,IAAM,EAAQ,UAAU;GAC9B,AAAI,EAAI,MACN,EAAQ,aAAa,EAAI,IAAI,CAAQ;EAEzC;EAEA,SAAS,EACP,GACA,GACM;GACN,IAAM,IAAM,EAAQ,UAAU;GAC9B,AAAI,EAAI,MACN,EAAQ,aAAa,EAAI,IAAI,GAAU,CAAK;EAEhD;EAEA,SAAS,EAAW,GAAuB;GACzC,IAAM,IAAI,OAAO,WAAW,CAAK;GACjC,OAAO,OAAO,SAAS,CAAC,IAAI,IAAI;EAClC;0BAIE,EAqYM,OAAA;GApYH,OAAK,EAAS,EAAA,CAAA,EAAA,yDAA6E,EAAM,SAAA,CAAA;GAMlG,OAAA;IAAA,yBAAA;IAAA,cAAA;GAAA;GACA,eAAY;GACX,qBAAmB,EAAM,QAAQ,KAAA;;GAElC,EA6CQ,SA7CR,GA6CQ;IAzCN,EAIK,MAJL,GAIK,EADA,EAAM,SAAK,kBAAA,GAAA,CAAA;IAEhB,EAWS,EAAA,CAAA,GAAA;KAVP,MAAK;KACL,SAAQ;KACR,MAAK;KACL,OAAM;KACN,eAAY;KACX,UAAU,EAAM,YAAY,EAAM;KAClC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAa,eAAA;;sBAEO,CAA5B,EAA4B,EAAA,CAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,GAAA,AAAA,EAAA,OAAA,EAAG,kBAE9B,EAAA,CAAA,CAAA;;;IACA,EAaM,OAbN,GAaM,EAAA,EAAA,GAZJ,EAWS,GAAA,MAAA,EAVQ,KAAR,MADT,EAWS,UAAA;KATN,KAAK,EAAK;KACX,MAAK;KACL,OAAM;KACL,eAAW,wBAA0B,EAAK;KAC1C,UAAU,EAAM,YAAY,EAAM;KAClC,UAAK,MAAE,EAAc,EAAK,IAAI;QAE/B,EAAqC,EAAA,CAAA,GAAA,EAA/B,OAAM,uBAAsB,CAAA,GAClC,EAAiD,QAAjD,GAAiD,EAApB,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,GAAA,CAAA;IAGlC,EAAM,YAAA,EAAA,GAAf,EAEI,KAFJ,GAEI,EADC,EAAM,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;IAGX,EAAM,OAAO,UAAA,EAAA,GADrB,EAMK,MANL,GAMK,EAAA,EAAA,EAAA,GADH,EAA4D,GAAA,MAAA,EAArC,EAAM,SAAjB,GAAK,YAAjB,EAA4D,MAAA,EAAtB,KAAK,EAAC,GAAA,EAAK,CAAG,GAAA,CAAA;;GAIxD,EAwGU,WAxGV,GAwGU;IApGR,EASS,UATT,GASS,CAAA,AAAA,EAAA,QARP,EAIK,MAAA,EAHH,OAAM,sEAAqE,GAC5E,UAED,EAAA,GACA,EAEQ,EAAA,CAAA,GAAA;KAFD,SAAQ;KAAU,OAAM;;sBAE/B,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFuD,0BAEvD,EAAA,CAAA,CAAA,CAAA;;;IAGF,EAgDO,EAAA,CAAA,GAAA,EAhDD,OAAM,gBAAe,GAAA;sBA+CX,CA9Cd,EA8Cc,EAAA,CAAA,GAAA,EA9CD,OAAM,2BAA0B,GAAA;uBAcrC;OAbN,EAaM,OAbN,GAaM,CAZJ,EAAwC,EAAA,CAAA,GAAA,EAAjC,KAAI,WAAU,GAAA;yBAAW,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAV,cAAU,EAAA,CAAA,CAAA,CAAA;;WAChC,EAUE,EAAA,CAAA,GAAA;QATA,IAAG;QACF,eAAa,GAAA;QACd,eAAY;QACX,SAAK,AAAA,EAAA,QAAoB,MAA+B,EAAA,CAAA,EAAQ,WAAU,EAAA,OAA+B,EAAE,OAA4B,MAAA,CAAA;;OAQ5I,EAaM,OAbN,GAaM,CAZJ,EAA+C,EAAA,CAAA,GAAA,EAAxC,KAAI,iBAAgB,GAAA;yBAAY,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAX,eAAW,EAAA,CAAA,CAAA,CAAA;;WACvC,EAUE,EAAA,CAAA,GAAA;QATA,IAAG;QACF,eAAa,GAAA;QACd,eAAY;QACX,SAAK,AAAA,EAAA,QAAoB,MAA+B,EAAA,CAAA,EAAQ,WAAU,EAAA,aAAqC,EAAE,OAA+B,MAAA,CAAA;;OAQrJ,EAgBM,OAhBN,GAgBM,CAfJ,EAA6C,EAAA,CAAA,GAAA,EAAtC,KAAI,aAAY,GAAA;yBAAc,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAb,iBAAa,EAAA,CAAA,CAAA,CAAA;;WACrC,EAaE,EAAA,CAAA,GAAA;QAZA,IAAG;QACH,MAAK;QACJ,eAAa,GAAA;QACd,eAAY;QACX,SAAK,AAAA,EAAA,QAAoB,MAA+B,EAAA,CAAA,EAAQ,WAAU,EAAA,cAAqC,EAAmC,EAAE,OAA4B,KAAA,EAAA,CAAA;;;;;;;IAcjL,EAAA,MAAU,WAAM,KAAA,EAAA,GADxB,EAMI,KANJ,GAIC,uDAED,MAAA,EAAA,GAEA,EA8BK,MA9BL,GA8BK,EAAA,EAAA,EAAA,GAzBH,EAwBK,GAAA,MAAA,EAvBkB,EAAA,QAAb,GAAG,YADb,EAwBK,MAAA;KAtBF,KAAK,EAAE;KACR,OAAK,EAAA,CAAC,qGACe,EAAA,CAAA,EAAQ,UAAU,MAAM,OAAO,EAAE,KAAA,gCAAA,EAAA,CAAA;KAKrD,eAAW,oBAAsB,EAAE;KACnC,UAAK,MAAE,GAAgB,EAAE,EAAE;;KAE5B,EAEO,QAFP,IAEO,EADF,IAAK,CAAA,IAAO,MACjB,CAAA;KACA,EAKO,QALP,IAKO,CAJL,EAAwD,QAAxD,IAAwD,EAAlB,EAAE,MAAM,GAAA,CAAA,GAC9C,EAEO,QAFP,IAEO,EADF,EAAE,QAAQ,MAAM,IAAG,eACxB,CAAA,CAAA,CAAA;KAEF,EAEQ,EAAA,CAAA,GAAA;MAFD,SAAQ;MAAY,OAAM;;uBACnB,CAAA,EAAA,EAAT,EAAE,IAAI,GAAA,CAAA,CAAA,CAAA;;;;;GAMjB,EAgOQ,SAhOR,IAgOQ,CA5NN,EAeS,UAfT,IAeS,CAAA,AAAA,EAAA,QAdP,EAIK,MAAA,EAHH,OAAM,sEAAqE,GAC5E,eAED,EAAA,GAEQ,EAAA,CAAA,EAAQ,UAAU,MAAM,MAAA,EAAA,GADhC,EAQS,EAAA,CAAA,GAAA;;IANP,SAAQ;IACR,MAAK;IACL,cAAW;IACV,SAAO;;qBAEiB,CAAzB,EAAyB,EAAA,EAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,CAAA,CAAA;;sBAKjB,EAAA,SAKT,EAAA,GAEA,EAkMM,OAlMN,IAkMM;IA7LJ,EAuEO,EAAA,CAAA,GAAA,EAvED,OAAM,gBAAe,GAAA;sBAKZ,CAJb,EAIa,EAAA,CAAA,GAAA,EAJD,OAAM,OAAM,GAAA;uBAGV,CAFZ,EAEY,EAAA,CAAA,GAAA,EAFD,OAAM,4CAA2C,GAAA;wBAE5D,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAF6D,cAE7D,EAAA,CAAA,CAAA,CAAA;;;;SAEF,EAgEc,EAAA,CAAA,GAAA,EAhED,OAAM,2BAA0B,GAAA;uBAcrC;OAbN,EAaM,OAbN,IAaM,CAZJ,EAAqC,EAAA,CAAA,GAAA,EAA9B,KAAI,YAAW,GAAA;yBAAO,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAN,UAAM,EAAA,CAAA,CAAA,CAAA;;WAC7B,EAUE,EAAA,CAAA,GAAA;QATA,IAAG;QACF,eAAa,EAAA,MAAiB;QAC/B,eAAY;QACX,SAAK,AAAA,EAAA,QAAsB,MAAiC,EAAqB,EAAA,QAAkC,EAAE,OAA4B,MAAA,CAAA;;OAQtJ,EAqBM,OArBN,IAqBM,CApBJ,EAAiC,EAAA,CAAA,GAAA,EAA1B,KAAI,UAAS,GAAA;yBAAK,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAJ,QAAI,EAAA,CAAA,CAAA,CAAA;;WACzB,EAkBS,EAAA,EAAA,GAAA;QAjBN,eAAa,EAAA,MAAiB;QAC9B,uBAAkB,AAAA,EAAA,QAAsB,MAAmC,EAAqB,EAAA,MAAS,EAAC,CAAA;;yBAU3F,CALhB,EAKgB,EAAA,EAAA,GAAA;SAJd,IAAG;SACH,eAAY;;0BAE+B,CAA3C,EAA2C,EAAA,EAAA,GAAA,EAA9B,aAAY,gBAAe,CAAA,CAAA,CAAA;;YAE1C,EAIgB,EAAA,EAAA,GAAA,MAAA;0BAH8C;UAA5D,EAA4D,EAAA,CAAA,GAAA,EAAhD,OAAM,gBAAe,GAAA;4BAAc,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAb,iBAAa,EAAA,CAAA,CAAA,CAAA;;;UAC/C,EAA0D,EAAA,CAAA,GAAA,EAA9C,OAAM,eAAc,GAAA;4BAAa,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAZ,gBAAY,EAAA,CAAA,CAAA,CAAA;;;UAC7C,EAAoD,EAAA,CAAA,GAAA,EAAxC,OAAM,YAAW,GAAA;4BAAU,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAT,aAAS,EAAA,CAAA,CAAA,CAAA;;;;;;;;OAI7C,EAaM,OAbN,IAaM,CAZJ,EAAsC,EAAA,CAAA,GAAA,EAA/B,KAAI,UAAS,GAAA;yBAAU,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAT,aAAS,EAAA,CAAA,CAAA,CAAA;;WAC9B,EAUE,EAAA,CAAA,GAAA;QATA,IAAG;QACF,eAAa,EAAA,MAAiB,YAAQ;QACvC,eAAY;QACX,SAAK,AAAA,EAAA,QAAsB,MAAiC,EAAqB,EAAA,UAAoC,EAAE,OAA+B,MAAA,CAAA;;OAQ3J,EAYM,OAZN,IAYM,CATJ,EAAyC,EAAA,CAAA,GAAA,EAAlC,KAAI,cAAa,GAAA;yBAAS,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAR,YAAQ,EAAA,CAAA,CAAA,CAAA;;WACjC,EAOE,EAAA,CAAA,GAAA;QANA,IAAG;QACF,eAAa,EAAQ,EAAA,MAAiB;QACvC,eAAY;QACX,uBAAkB,AAAA,EAAA,QAAsB,MAAe,EAAqB,EAAA,UAAa,EAAC,CAAA;;;;;;;IAQvF,EAAA,SAAA,EAAA,GAAZ,EAwGO,EAAA,CAAA,GAAA;;KAxGyB,OAAM;;sBAgBvB,CAfb,EAea,EAAA,CAAA,GAAA,EAfD,OAAM,OAAM,GAAA;uBAcV,CAbZ,EAaY,EAAA,CAAA,GAAA,EAZV,OAAM,8EAA6E,GAAA;wBAE/D,CAAA,AAAA,EAAA,QAApB,EAAoB,QAAA,MAAd,WAAO,EAAA,GACb,EAQS,EAAA,CAAA,GAAA;QAPP,SAAQ;QACR,MAAK;QACL,eAAY;QACX,SAAO;;yBAEoB,CAA5B,EAA4B,EAAA,CAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,GAAA,AAAA,EAAA,QAAA,EAAG,gBAE9B,EAAA,CAAA,CAAA;;;;;;SAGJ,EAsFc,EAAA,CAAA,GAAA,EAtFD,OAAM,2BAA0B,GAAA;uBAEF,EAAA,EAAA,EAAA,GADzC,EA8EM,GAAA,MAAA,EA7EU,EAAA,MAAiB,UAAxB,YADT,EA8EM,OAAA;OA5EH,KAAK,EAAI;OACV,OAAM;OACL,eAAW,iCAAmC,EAAI;;OAEnD,EA6BM,OA7BN,IA6BM,CA5BJ,EAaM,OAbN,IAaM,CAZJ,EAAoD,EAAA,CAAA,GAAA,EAA5C,KAAG,gBAAkB,EAAI,KAAA,GAAA;yBAAW,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAL,SAAK,EAAA,CAAA,CAAA,CAAA;;uBAC5C,EAUE,EAAA,CAAA,GAAA;QATC,IAAE,gBAAkB,EAAI;QACxB,eAAa,EAAI;QACjB,eAAW,iCAAmC,EAAI,GAAE;QACpD,UAA+B,MAAqC,EAAY,EAAI,IAAE,EAAA,OAAsC,EAAE,OAA4B,MAAA,CAAA;;;;;;aAQ/J,EAaM,OAbN,IAaM,CAZJ,EAAoD,EAAA,CAAA,GAAA,EAA5C,KAAG,gBAAkB,EAAI,KAAA,GAAA;yBAAW,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAL,SAAK,EAAA,CAAA,CAAA,CAAA;;uBAC5C,EAUE,EAAA,CAAA,GAAA;QATC,IAAE,gBAAkB,EAAI;QACxB,eAAa,OAAO,EAAI,KAAK;QAC7B,eAAW,iCAAmC,EAAI,GAAE;QACpD,UAA+B,MAAqC,EAAY,EAAI,IAAE,EAAA,OAAsC,EAAE,OAA4B,MAAA,CAAA;;;;;;;OASjK,EA+BM,OA/BN,IA+BM,CA9BJ,EAYM,OAZN,IAYM,CATJ,EAAwD,EAAA,CAAA,GAAA,EAAhD,KAAG,kBAAoB,EAAI,KAAA,GAAA;yBAAa,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAP,WAAO,EAAA,CAAA,CAAA,CAAA;;uBAChD,EAOE,EAAA,CAAA,GAAA;QANC,IAAE,kBAAoB,EAAI;QAC1B,eAAa,EAAQ,EAAI;QACzB,eAAW,iCAAmC,EAAI,GAAE;QACpD,wBAA4C,MAAe,EAAY,EAAI,IAAE,EAAA,SAAa,EAAC,CAAA;;;;;;aAKhG,EAgBM,OAhBN,IAgBM,CAfJ,EAAoD,EAAA,CAAA,GAAA,EAA5C,KAAG,gBAAkB,EAAI,KAAA,GAAA;yBAAW,CAAA,GAAA,AAAA,EAAA,QAAA,CAAA,EAAL,SAAK,EAAA,CAAA,CAAA,CAAA;;uBAC5C,EAaE,EAAA,CAAA,GAAA;QAZC,IAAE,gBAAkB,EAAI;QACzB,MAAK;QACJ,eAAa,EAAI,SAAK;QACtB,eAAW,iCAAmC,EAAI,GAAE;QACpD,UAA+B,MAAqC,EAAY,EAAI,IAAE,EAAA,OAAqC,EAAyC,EAAE,OAA4B,KAAA,EAAA,CAAA;;;;;;;OAWzM,EASS,EAAA,CAAA,GAAA;QARP,SAAQ;QACR,MAAK;QACL,OAAM;QACL,eAAW,iCAAmC,EAAI,GAAE;QACpD,UAAK,MAAE,GAAe,EAAI,EAAE;;yBAEC,CAA9B,EAA8B,EAAA,CAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,GAAA,AAAA,EAAA,QAAA,EAAG,mBAEhC,EAAA,CAAA,CAAA;;;0BAGM,EAAA,MAAiB,QAAQ,WAAM,KAAA,EAAA,GADvC,EAKI,KALJ,IAGC,0CAED,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;;;;IAIJ,EASS,EAAA,CAAA,GAAA;KARP,SAAQ;KACR,MAAK;KACL,OAAM;KACN,eAAY;KACX,SAAO;;sBAEsB,CAA9B,EAA8B,EAAA,CAAA,GAAA,EAAtB,OAAM,cAAa,CAAA,GAAA,AAAA,EAAA,QAAA,EAAG,qBAEhC,EAAA,CAAA,CAAA;;;UAxMO,EAAA,GADT,EAMI,KANJ,IAIC,+CAED"}

package/dist/components/compositions/elements/builder/ReactiveCanvasBuilder.js

@@ -0,0 +1,7 @@
+import e from "./ReactiveCanvasBuilder.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/builder/ReactiveCanvasBuilder.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ReactiveCanvasBuilder.js.map

package/dist/components/compositions/elements/builder/ReactiveCanvasBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactiveCanvasBuilder.js","names":[],"sources":["../../../../../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"],"mappings":""}