@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/QuizBuilder-CRhL-P6I.js

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

package/dist/chunks/QuizBuilder-CRhL-P6I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuizBuilder-CRhL-P6I.js","names":[],"sources":["../../src/components/compositions/elements/builder/QuizBuilder.vue","../../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","<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,IAAqB;GAE5B,OADA,KAAc,GACP,gBAAgB,KAAK,IAAI,EAAE,GAAG;EACvC;EACA,IAAM,IAAa,GAAY,EAAW,CAAC,GAGrC,IAAU,EAFE,QAAuB,EAAM,aAAa,EAAW,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;yBAIE,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,IA6CQ;IAzCN,EAIK,MAJL,IAIK,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,IA8BK,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/chunks/RadioBoolean-DLoE2Ckl.js

@@ -0,0 +1,95 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./label-I5voJX5E.js";
+import { n, t as r } from "./radio-group-WeXB9v-D.js";
+import { t as i } from "./field-frame-n5oLDNBT.js";
+import { computed as a, createBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
+//#region src/components/compositions/elements/boolean/RadioBoolean.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "flex items-center gap-2" }, y = { class: "flex items-center gap-2" }, b = /* @__PURE__ */ u({
+	__name: "RadioBoolean",
+	props: /* @__PURE__ */ d({
+		modelValue: { type: Boolean },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		trueLabel: { default: "Yes" },
+		falseLabel: { default: "No" },
+		inline: { type: Boolean }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let u = e, d = g(e, "modelValue"), b = a(() => d.value ? "true" : "false"), x = a(() => `${u.id ?? "radio-bool"}-true`), S = a(() => `${u.id ?? "radio-bool"}-false`);
+		function C(e) {
+			d.value = (Array.isArray(e) ? e[0] : e) === "true";
+		}
+		return (a, u) => (p(), o(h(i), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: _(() => [l(h(n), {
+				"model-value": b.value,
+				name: e.name,
+				disabled: e.disabled || e.readonly,
+				required: e.required,
+				"data-element-name": e.name ?? void 0,
+				class: f(e.inline ? "flex flex-row gap-4" : "grid gap-2"),
+				"onUpdate:modelValue": C
+			}, {
+				default: _(() => [s("div", v, [l(h(r), {
+					id: x.value,
+					value: "true"
+				}, null, 8, ["id"]), l(h(t), {
+					for: x.value,
+					class: "cursor-pointer"
+				}, {
+					default: _(() => [c(m(e.trueLabel), 1)]),
+					_: 1
+				}, 8, ["for"])]), s("div", y, [l(h(r), {
+					id: S.value,
+					value: "false"
+				}, null, 8, ["id"]), l(h(t), {
+					for: S.value,
+					class: "cursor-pointer"
+				}, {
+					default: _(() => [c(m(e.falseLabel), 1)]),
+					_: 1
+				}, 8, ["for"])])]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"name",
+				"disabled",
+				"required",
+				"data-element-name",
+				"class"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), x = /* @__PURE__ */ e({ default: () => S }), S = b;
+//#endregion
+export { x as n, S as t };
+
+//# sourceMappingURL=RadioBoolean-DLoE2Ckl.js.map