@gxp-dev/mod-ui 2.0.12 → 2.0.14

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

@@ -1,138 +0,0 @@
-import { cn as e } from "../../../../lib/utils.js";
-import t from "../../../ui/badge/Badge.js";
-import "../../../ui/badge/index.js";
-import n from "../../../ui/card/Card.js";
-import r from "../../../ui/card/CardContent.js";
-import i from "../../../ui/card/CardHeader.js";
-import a from "../../../ui/card/CardTitle.js";
-import "../../../ui/card/index.js";
-import o from "../../../ui/input/Input.js";
-import "../../../ui/input/index.js";
-import s from "../../../ui/label/Label.js";
-import "../../../ui/label/index.js";
-import c from "../../../ui/textarea/Textarea.js";
-import "../../../ui/textarea/index.js";
-import { useFormBuilder as l } from "../../../../stores/formBuilderStore.js";
-import { usePresetBuilder as u } from "../../../../stores/presetBuilderStore.js";
-import d from "../../../ui/field-frame/FieldFrame.js";
-import "../../../ui/field-frame/index.js";
-import f from "./FormBuilder.js";
-import { computed as p, createBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, mergeModels as y, normalizeClass as b, onMounted as x, openBlock as S, ref as C, unref as w, useModel as T, watch as E, withCtx as D } from "vue";
-//#region src/components/compositions/elements/builder/PresetBuilder.vue?vue&type=script&setup=true&lang.ts
-var O = { class: "flex items-center justify-between gap-2" }, k = { class: "grid gap-3 sm:grid-cols-2" }, A = { class: "flex flex-col gap-1" }, j = { class: "flex flex-col gap-1" }, M = /* @__PURE__ */ v({
-	__name: "PresetBuilder",
-	props: /* @__PURE__ */ y({
-		modelValue: {},
-		builderId: {},
-		name: {},
-		item: { default: () => ({}) },
-		classList: {},
-		label: {},
-		hideLabel: { type: Boolean },
-		helpText: {},
-		errors: { default: () => [] }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: ["update:modelValue"],
-	setup(v) {
-		let y = v, M = T(v, "modelValue"), N = 0;
-		function P() {
-			return N += 1, `preset-builder-${Date.now()}-${N}`;
-		}
-		let F = C(P()), I = u(p(() => y.builderId ?? F.value).value), L = p(() => I.state.value.innerBuilderId), R = l(L.value);
-		function z(e) {
-			if (typeof e != "object" || !e) return !1;
-			let t = e;
-			return typeof t.presetName == "string" && typeof t.schema == "object" && t.schema !== null;
-		}
-		x(() => {
-			let e = M.value;
-			z(e) && (I.loadMeta({
-				presetName: e.presetName,
-				presetDescription: e.presetDescription
-			}), R.loadSchema(e.schema));
-		});
-		let B = p(() => R.schema.value), V = p(() => I.state.value);
-		E([V, B], ([e, t]) => {
-			M.value = {
-				presetName: e.presetName,
-				presetDescription: e.presetDescription,
-				schema: t
-			};
-		}, { deep: !0 });
-		function H(e) {
-			I.setName(e.target.value);
-		}
-		function U(e) {
-			I.setDescription(e.target.value);
-		}
-		return (l, u) => (S(), m(w(d), {
-			label: y.label,
-			"hide-label": y.hideLabel,
-			"help-text": y.helpText,
-			errors: y.errors,
-			class: b(y.classList)
-		}, {
-			default: D(() => [_(w(n), {
-				class: "gxp-preset-builder",
-				"data-testid": "preset-builder",
-				"data-element-name": y.name ?? void 0
-			}, {
-				default: D(() => [_(w(i), null, {
-					default: D(() => [h("div", O, [_(w(a), { class: "text-base" }, {
-						default: D(() => [...u[0] ||= [g("Preset", -1)]]),
-						_: 1
-					}), _(w(t), {
-						variant: "outline",
-						class: "font-mono text-[10px]"
-					}, {
-						default: D(() => [...u[1] ||= [g(" builder/preset-builder ", -1)]]),
-						_: 1
-					})])]),
-					_: 1
-				}), _(w(r), { class: "flex flex-col gap-4" }, {
-					default: D(() => [h("div", k, [h("div", A, [_(w(s), { for: "preset-builder-name" }, {
-						default: D(() => [...u[2] ||= [g("Preset name", -1)]]),
-						_: 1
-					}), _(w(o), {
-						id: "preset-builder-name",
-						"model-value": V.value.presetName,
-						placeholder: "My preset",
-						"data-testid": "preset-builder-name",
-						onInput: H
-					}, null, 8, ["model-value"])]), h("div", j, [_(w(s), { for: "preset-builder-description" }, {
-						default: D(() => [...u[3] ||= [g("Description", -1)]]),
-						_: 1
-					}), _(w(c), {
-						id: "preset-builder-description",
-						"model-value": V.value.presetDescription,
-						placeholder: "Optional description",
-						"data-testid": "preset-builder-description",
-						onInput: U
-					}, null, 8, ["model-value"])])]), h("div", {
-						class: b(w(e)("rounded-md border bg-card/40 p-2")),
-						"data-testid": "preset-builder-inner"
-					}, [_(f, {
-						"builder-id": L.value,
-						item: y.item
-					}, null, 8, ["builder-id", "item"])], 2)]),
-					_: 1
-				})]),
-				_: 1
-			}, 8, ["data-element-name"])]),
-			_: 1
-		}, 8, [
-			"label",
-			"hide-label",
-			"help-text",
-			"errors",
-			"class"
-		]));
-	}
-});
-//#endregion
-export { M as default };
-
-//# sourceMappingURL=PresetBuilder.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PresetBuilder.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/builder/PresetBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * PresetBuilder — wraps a FormBuilder schema with a named, described\n * preset envelope.\n *\n * Layout:\n *   - Canvas header: preset name + description inputs.\n *   - Canvas body:   embedded FormBuilder bound to the inner schema.\n *\n * State for the name + description lives in `presetBuilderStore`. The\n * inner schema is owned by `formBuilderStore` (keyed off a derived\n * `innerBuilderId`) so all existing FormBuilder behaviours work\n * unchanged.\n *\n * Two-way binds the full `PresetBuilderSchema` via `defineModel`.\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\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 { Textarea } from \"@/components/ui/textarea\"\nimport FormBuilder from \"./FormBuilder.vue\"\nimport {\n  usePresetBuilder,\n  type PresetBuilderSchema,\n} from \"@/stores/presetBuilderStore\"\nimport {\n  useFormBuilder,\n  type BuilderSchema,\n} from \"@/stores/formBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface PresetBuilderProps\n  extends Pick<FieldFrameProps, \"label\" | \"hideLabel\" | \"helpText\" | \"errors\"> {\n  /** Initial / current schema. Two-way bindable via v-model. */\n  modelValue?: PresetBuilderSchema\n  /**\n   * Identifier used to key the presetBuilderStore. Defaults to a\n   * stable auto-generated id so multiple PresetBuilders on the same\n   * page 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<PresetBuilderProps>(), {\n  errors: () => [],\n  item: () => ({}),\n})\n\nconst model = defineModel<PresetBuilderSchema | undefined>(\"modelValue\")\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n  nextAutoId += 1\n  return `preset-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = usePresetBuilder(builderId.value)\nconst innerBuilderId = computed<string>(() => builder.state.value.innerBuilderId)\nconst inner = useFormBuilder(innerBuilderId.value)\n\nfunction isPresetSchema(value: unknown): value is PresetBuilderSchema {\n  if (typeof value !== \"object\" || value === null) {\n    return false\n  }\n  const v = value as Record<string, unknown>\n  return (\n    typeof v.presetName === \"string\" &&\n    typeof v.schema === \"object\" &&\n    v.schema !== null\n  )\n}\n\n/** Seed both stores from the initial modelValue. */\nonMounted(() => {\n  const seed = model.value\n  if (isPresetSchema(seed)) {\n    builder.loadMeta({\n      presetName: seed.presetName,\n      presetDescription: seed.presetDescription,\n    })\n    inner.loadSchema(seed.schema)\n  }\n})\n\nconst innerSchemaRef = computed<BuilderSchema>(() => inner.schema.value)\nconst stateRef = computed(() => builder.state.value)\n\n/** Push schema changes back via v-model. */\nwatch(\n  [stateRef, innerSchemaRef],\n  ([state, schema]) => {\n    model.value = {\n      presetName: state.presetName,\n      presetDescription: state.presetDescription,\n      schema,\n    }\n  },\n  { deep: true },\n)\n\nfunction onNameInput(e: Event): void {\n  builder.setName((e.target as HTMLInputElement).value)\n}\n\nfunction onDescriptionInput(e: Event): void {\n  builder.setDescription((e.target as HTMLTextAreaElement).value)\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    <Card\n      class=\"gxp-preset-builder\"\n      data-testid=\"preset-builder\"\n      :data-element-name=\"props.name ?? undefined\"\n    >\n      <CardHeader>\n        <div class=\"flex items-center justify-between gap-2\">\n          <CardTitle class=\"text-base\">Preset</CardTitle>\n          <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n            builder/preset-builder\n          </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"flex flex-col gap-4\">\n        <div class=\"grid gap-3 sm:grid-cols-2\">\n          <div class=\"flex flex-col gap-1\">\n            <Label for=\"preset-builder-name\">Preset name</Label>\n            <Input\n              id=\"preset-builder-name\"\n              :model-value=\"stateRef.presetName\"\n              placeholder=\"My preset\"\n              data-testid=\"preset-builder-name\"\n              @input=\"onNameInput\"\n            />\n          </div>\n          <div class=\"flex flex-col gap-1\">\n            <Label for=\"preset-builder-description\">Description</Label>\n            <Textarea\n              id=\"preset-builder-description\"\n              :model-value=\"stateRef.presetDescription\"\n              placeholder=\"Optional description\"\n              data-testid=\"preset-builder-description\"\n              @input=\"onDescriptionInput\"\n            />\n          </div>\n        </div>\n\n        <div\n          :class=\"cn('rounded-md border bg-card/40 p-2')\"\n          data-testid=\"preset-builder-inner\"\n        >\n          <FormBuilder\n            :builder-id=\"innerBuilderId\"\n            :item=\"props.item\"\n          />\n        </div>\n      </CardContent>\n    </Card>\n  </FieldFrame>\n</template>\n"],"mappings":"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"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"QuizBuilder.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":""}