@burdenoff/microfe-buildmyiq 2026.705.13 → 2026.706.10

package/dist/buildmyiq/pages/assessments/AssessmentDetailPage.js

@@ -1,21 +1,22 @@
 import { useBuildmyiq as e } from "../../context/BuildmyiqContext.js";
-import { PageLayout as t } from "../../components/PageLayout.js";
-import { formatDuration as n, formatEnumLabel as r } from "../../utils/formatters.js";
-import { StatusBadge as i } from "../../components/StatusBadge.js";
-import { EmptyState as a } from "../../components/EmptyState.js";
-import { ErrorView as ee, LoadingView as te } from "../../components/StateViews.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { formatDuration as r, formatEnumLabel as i } from "../../utils/formatters.js";
+import { StatusBadge as a } from "../../components/StatusBadge.js";
+import { EmptyState as o } from "../../components/EmptyState.js";
+import { ErrorView as ee, LoadingView as te, Section as ne } from "../../components/StateViews.js";
 import "../../context/index.js";
-import { useBuiAssessment as ne, useBuiCreateQuestion as re, useBuiPublishAssessment as ie } from "../../hooks/useBuildmyiqApi.js";
+import { useBuiAssessment as re, useBuiCreateQuestion as s, useBuiPublishAssessment as c } from "../../hooks/useBuildmyiqApi.js";
 import "../../hooks/index.js";
 import "../../components/index.js";
-import { QUESTION_TYPES as o } from "../../types/index.js";
-import { useMemo as s, useState as c } from "react";
-import { ArrowLeft as ae, CheckCircle2 as l, Circle as u, ClipboardCheck as d, Clock as f, Plus as p, Repeat as m, Send as h, Target as g, Trash2 as _ } from "lucide-react";
-import { useParams as v } from "react-router-dom";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { Button as S, Checkbox as oe, GlassCard as C, Input as w, Label as T, ResponsiveDialog as se, ResponsiveDialogContent as ce, ResponsiveDialogDescription as le, ResponsiveDialogFooter as ue, ResponsiveDialogHeader as de, ResponsiveDialogTitle as E, Select as D, SelectContent as O, SelectItem as k, SelectTrigger as A, SelectValue as j, Textarea as M } from "@burdenoff/fe-libs/ui";
+import { QUESTION_TYPES as l } from "../../types/index.js";
+import { useMemo as u, useState as d } from "react";
+import { ArrowLeft as ie, Circle as f, ClipboardCheck as p, ClipboardEdit as ae, Clock as m, Lightbulb as h, Plus as g, Repeat as _, Send as v, Square as y, Trash2 as oe, Trophy as se } from "lucide-react";
+import { useParams as ce } from "react-router-dom";
+import { Fragment as le, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { Button as S, Checkbox as ue, GlassCard as C, Input as w, Label as T, ResponsiveDialog as de, ResponsiveDialogContent as fe, ResponsiveDialogDescription as pe, ResponsiveDialogFooter as me, ResponsiveDialogHeader as he, ResponsiveDialogTitle as ge, Select as _e, SelectContent as E, SelectItem as D, SelectTrigger as O, SelectValue as k, Textarea as A } from "@burdenoff/fe-libs/ui";
 //#region src/buildmyiq/pages/assessments/AssessmentDetailPage.tsx
-var N = (e) => {
+var j = (e) => {
 	if (!Array.isArray(e)) return [];
 	let t = [];
 	for (let n of e) if (n && typeof n == "object" && "label" in n) {
@@ -29,260 +30,240 @@ var N = (e) => {
 		}
 	}
 	return t;
-}, P = new Set(["SINGLE_CHOICE", "MULTIPLE_CHOICE"]), F = (e) => e === "SINGLE_CHOICE" || e === "TRUE_FALSE", I = () => [{
+}, M = 1e3, N = new Set(["SINGLE_CHOICE", "MULTIPLE_CHOICE"]), P = (e) => e === "SINGLE_CHOICE" || e === "TRUE_FALSE", F = () => [{
 	label: "",
 	correct: !1
 }, {
 	label: "",
 	correct: !1
-}], L = () => [{
+}], I = () => [{
 	label: "True",
 	correct: !1
 }, {
 	label: "False",
 	correct: !1
-}], R = () => ({
+}], L = () => ({
 	prompt: "",
 	type: "SINGLE_CHOICE",
 	points: "1",
 	explanation: "",
-	options: I(),
+	options: F(),
 	shortAnswer: ""
-}), z = () => {
-	let { assessmentId: l } = v(), { navigateTo: u } = e(), N = ne(l), z = ie(), V = re(), [fe, H] = c(!1), [U, W] = c(R), [G, K] = c(null), q = N.data ?? null, J = s(() => [...q?.questions ?? []].sort((e, t) => e.position - t.position), [q]), Y = s(() => J.length ? Math.max(...J.map((e) => e.position)) + 1 : 1, [J]), X = U.type === "TRUE_FALSE" || P.has(U.type), Z = () => {
-		W(R()), K(null), H(!0);
+}), R = () => {
+	let { assessmentId: f } = ce(), { navigateTo: h } = e(), y = re(f), j = c(), R = s(), [B, V] = d(!1), [H, U] = d(L), [W, G] = d(null), K = y.data ?? null, q = u(() => [...K?.questions ?? []].sort((e, t) => e.position - t.position), [K]), J = u(() => q.length ? Math.max(...q.map((e) => e.position)) + 1 : 1, [q]), Y = u(() => q.reduce((e, t) => e + t.points, 0), [q]), X = H.type === "TRUE_FALSE" || N.has(H.type), Z = () => {
+		U(L()), G(null), V(!0);
 	}, Q = () => {
-		H(!1), W(R()), K(null);
-	}, pe = (e) => {
-		W((t) => {
+		V(!1), U(L()), G(null);
+	}, ye = (e) => {
+		U((t) => {
 			let n = t.options;
-			return e === "TRUE_FALSE" ? n = L() : P.has(e) && (n = t.options.some((e) => e.label === "True" || e.label === "False") ? I() : t.options), {
+			return e === "TRUE_FALSE" ? n = I() : N.has(e) && (n = t.options.some((e) => e.label === "True" || e.label === "False") ? F() : t.options), {
 				...t,
 				type: e,
 				options: n
 			};
 		});
-	}, me = (e, t) => {
-		W((n) => ({
+	}, be = (e, t) => {
+		U((n) => ({
 			...n,
 			options: n.options.map((n, r) => r === e ? {
 				...n,
 				label: t
 			} : n)
 		}));
-	}, he = (e, t) => {
-		W((n) => ({
+	}, xe = (e, t) => {
+		U((n) => ({
 			...n,
 			options: n.options.map((r, i) => i === e ? {
 				...r,
 				correct: t
-			} : F(n.type) ? {
+			} : P(n.type) ? {
 				...r,
 				correct: !1
 			} : r)
 		}));
-	}, ge = () => {
-		W((e) => ({
+	}, Se = () => {
+		U((e) => ({
 			...e,
 			options: [...e.options, {
 				label: "",
 				correct: !1
 			}]
 		}));
-	}, $ = (e) => {
-		W((t) => ({
+	}, Ce = (e) => {
+		U((t) => ({
 			...t,
 			options: t.options.filter((t, n) => n !== e)
 		}));
-	}, _e = async () => {
-		if (q) try {
-			await z.mutateAsync(q.id);
+	}, $ = async () => {
+		if (K) try {
+			await j.mutateAsync(K.id);
 		} catch {}
-	}, ve = async () => {
-		if (!l) return;
-		if (!U.prompt.trim()) {
-			K("Question prompt is required.");
+	}, we = async () => {
+		if (!f) return;
+		if (!H.prompt.trim()) {
+			G("Question prompt is required.");
 			return;
 		}
 		let e, t;
 		if (X) {
-			let n = U.options.map((e) => ({
+			let n = H.options.map((e) => ({
 				label: e.label.trim(),
 				correct: e.correct
 			})).filter((e) => e.label.length > 0);
-			if (P.has(U.type) && n.length < 2) {
-				K("Add at least two options.");
+			if (N.has(H.type) && n.length < 2) {
+				G("Add at least two options.");
 				return;
 			}
 			e = n.map((e) => ({ label: e.label }));
 			let r = n.filter((e) => e.correct).map((e) => e.label);
 			r.length && (t = r);
-		} else U.type === "SHORT_ANSWER" && (t = U.shortAnswer.trim() || void 0);
+		} else H.type === "SHORT_ANSWER" && (t = H.shortAnswer.trim() || void 0);
 		try {
-			await V.mutateAsync({
-				assessmentId: l,
-				prompt: U.prompt.trim(),
-				type: U.type,
-				points: U.points ? Number(U.points) : void 0,
-				position: Y,
-				explanation: U.explanation.trim() || void 0,
+			await R.mutateAsync({
+				assessmentId: f,
+				prompt: H.prompt.trim(),
+				type: H.type,
+				points: H.points ? Number(H.points) : void 0,
+				position: J,
+				explanation: H.explanation.trim() || void 0,
 				options: e,
 				answerKey: t
 			}), Q();
 		} catch (e) {
-			K(e instanceof Error ? e.message : "Failed to add question.");
+			G(e instanceof Error ? e.message : "Failed to add question.");
 		}
 	};
-	if (N.isLoading) return /* @__PURE__ */ b(t, {
+	if (y.isLoading) return /* @__PURE__ */ b(n, {
 		title: "Assessment",
 		children: /* @__PURE__ */ b(te, { label: "Loading assessment…" })
 	});
-	if (N.isError) return /* @__PURE__ */ b(t, {
+	if (y.isError) return /* @__PURE__ */ b(n, {
 		title: "Assessment",
 		children: /* @__PURE__ */ b(ee, {
 			message: "Couldn't load this assessment.",
-			onRetry: () => N.refetch()
+			onRetry: () => y.refetch()
 		})
 	});
-	if (!q) return /* @__PURE__ */ b(t, {
+	if (!K) return /* @__PURE__ */ b(n, {
 		title: "Assessment",
-		children: /* @__PURE__ */ b(a, {
+		children: /* @__PURE__ */ b(o, {
 			illustration: "empty-search",
 			title: "Assessment not found",
 			description: "This assessment may have been removed or you don't have access to it.",
 			action: /* @__PURE__ */ b(S, {
-				onClick: () => u("assessments"),
+				onClick: () => h("assessments"),
 				children: "Back to assessments"
 			})
 		})
 	});
-	let ye = q.status === "DRAFT";
-	return /* @__PURE__ */ x(t, {
-		title: q.title,
-		description: q.description ?? void 0,
-		actions: /* @__PURE__ */ x(y, { children: [
-			/* @__PURE__ */ x(S, {
-				variant: "ghost",
-				onClick: () => u("submissions"),
-				children: [/* @__PURE__ */ b(d, { className: "mr-1.5 h-4 w-4" }), " Submissions"]
-			}),
-			ye && /* @__PURE__ */ x(S, {
-				variant: "outline",
-				onClick: _e,
-				disabled: z.isPending,
-				children: [/* @__PURE__ */ b(h, { className: "mr-1.5 h-4 w-4" }), z.isPending ? "Publishing…" : "Publish"]
-			}),
-			/* @__PURE__ */ x(S, {
-				onClick: Z,
-				children: [/* @__PURE__ */ b(p, { className: "mr-1.5 h-4 w-4" }), " Add question"]
-			})
-		] }),
+	let Te = K.status === "DRAFT";
+	return /* @__PURE__ */ x(n, {
+		title: /* @__PURE__ */ x("span", {
+			className: "flex min-w-0 items-center gap-3",
+			children: [/* @__PURE__ */ b("span", {
+				className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--color-accent-soft)] text-[var(--color-accent-teal)]",
+				children: /* @__PURE__ */ b(ae, { className: "h-5 w-5" })
+			}), /* @__PURE__ */ b("span", {
+				className: "truncate",
+				children: K.title
+			})]
+		}),
+		description: K.description ?? void 0,
+		actions: /* @__PURE__ */ x(le, { children: [/* @__PURE__ */ x(S, {
+			variant: "ghost",
+			onClick: () => h("submissions"),
+			children: [/* @__PURE__ */ b(p, { className: "mr-1.5 h-4 w-4" }), " Submissions"]
+		}), Te ? /* @__PURE__ */ x(S, {
+			onClick: $,
+			disabled: j.isPending,
+			children: [/* @__PURE__ */ b(v, { className: "mr-1.5 h-4 w-4" }), j.isPending ? "Publishing…" : "Publish"]
+		}) : /* @__PURE__ */ b(a, {
+			status: K.status,
+			className: "px-3 py-1.5"
+		})] }),
 		children: [
 			/* @__PURE__ */ x("button", {
 				type: "button",
-				onClick: () => u("assessments"),
+				onClick: () => h("assessments"),
 				className: "mb-4 inline-flex items-center gap-1.5 text-sm text-text-secondary transition-colors hover:text-text-primary",
-				children: [/* @__PURE__ */ b(ae, { className: "h-4 w-4" }), " All assessments"]
+				children: [/* @__PURE__ */ b(ie, { className: "h-4 w-4" }), " All assessments"]
 			}),
 			/* @__PURE__ */ x(C, {
-				treatment: "plain",
-				className: "mb-6 p-5",
+				treatment: "glass",
+				className: "mb-6 p-5 sm:p-6",
 				children: [/* @__PURE__ */ x("div", {
-					className: "flex flex-wrap items-center gap-2",
+					className: "mb-5 flex flex-wrap items-center gap-2",
 					children: [
-						/* @__PURE__ */ b(i, { status: q.type }),
-						/* @__PURE__ */ b(i, { status: q.status }),
-						q.isGraded ? /* @__PURE__ */ b(i, { status: "GRADED" }) : /* @__PURE__ */ b("span", {
+						/* @__PURE__ */ b(a, { status: K.type }),
+						/* @__PURE__ */ b(a, { status: K.status }),
+						K.isGraded ? /* @__PURE__ */ b(a, { status: "GRADED" }) : /* @__PURE__ */ b("span", {
 							className: "inline-flex items-center gap-1.5 rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs font-medium text-text-secondary",
 							children: "Not graded"
 						})
 					]
 				}), /* @__PURE__ */ x("div", {
-					className: "mt-4 grid grid-cols-2 gap-4 sm:grid-cols-4",
+					className: "grid grid-cols-2 gap-y-6 sm:grid-cols-4",
 					children: [
-						/* @__PURE__ */ x("div", {
-							className: "flex items-center gap-2.5",
-							children: [/* @__PURE__ */ b(g, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ x("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ b("p", {
-									className: "text-xs text-text-secondary",
-									children: "Passing score"
-								}), /* @__PURE__ */ x("p", {
-									className: "font-semibold tabular-nums text-text-primary",
-									children: [q.passingScore, "%"]
-								})]
-							})]
+						/* @__PURE__ */ b(z, {
+							icon: /* @__PURE__ */ b(se, { className: "h-5 w-5" }),
+							label: "Passing score",
+							value: `${K.passingScore}%`
 						}),
-						/* @__PURE__ */ x("div", {
-							className: "flex items-center gap-2.5",
-							children: [/* @__PURE__ */ b(f, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ x("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ b("p", {
-									className: "text-xs text-text-secondary",
-									children: "Time limit"
-								}), /* @__PURE__ */ b("p", {
-									className: "font-semibold text-text-primary",
-									children: n(q.timeLimitMin)
-								})]
-							})]
+						/* @__PURE__ */ b(z, {
+							icon: /* @__PURE__ */ b(m, { className: "h-5 w-5" }),
+							label: "Time limit",
+							value: r(K.timeLimitMin),
+							divider: !0
 						}),
-						/* @__PURE__ */ x("div", {
-							className: "flex items-center gap-2.5",
-							children: [/* @__PURE__ */ b(m, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ x("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ b("p", {
-									className: "text-xs text-text-secondary",
-									children: "Max attempts"
-								}), /* @__PURE__ */ b("p", {
-									className: "font-semibold tabular-nums text-text-primary",
-									children: q.maxAttempts
-								})]
-							})]
+						/* @__PURE__ */ b(z, {
+							icon: /* @__PURE__ */ b(_, { className: "h-5 w-5" }),
+							label: "Max attempts",
+							value: K.maxAttempts,
+							divider: !0
 						}),
-						/* @__PURE__ */ x("div", {
-							className: "flex items-center gap-2.5",
-							children: [/* @__PURE__ */ b(d, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ x("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ b("p", {
-									className: "text-xs text-text-secondary",
-									children: "Questions"
-								}), /* @__PURE__ */ b("p", {
-									className: "font-semibold tabular-nums text-text-primary",
-									children: J.length
-								})]
-							})]
+						/* @__PURE__ */ b(z, {
+							icon: /* @__PURE__ */ b(p, { className: "h-5 w-5" }),
+							label: "Graded",
+							value: K.isGraded ? "Yes" : "No",
+							divider: !0
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ b("h2", {
-				className: "mb-3 text-base font-semibold text-text-primary",
-				children: "Questions"
-			}),
-			J.length === 0 ? /* @__PURE__ */ b(a, {
-				illustration: "empty-data",
-				title: "No questions yet",
-				description: "Build this assessment by adding its first question.",
+			/* @__PURE__ */ b(ne, {
+				title: `Questions (${q.length})`,
+				description: q.length > 0 ? `${Y} point${Y === 1 ? "" : "s"} across ${q.length} question${q.length === 1 ? "" : "s"}` : void 0,
 				action: /* @__PURE__ */ x(S, {
+					variant: "outline",
 					onClick: Z,
-					children: [/* @__PURE__ */ b(p, { className: "mr-1.5 h-4 w-4" }), " Add question"]
+					children: [/* @__PURE__ */ b(g, { className: "mr-1.5 h-4 w-4" }), " Add question"]
+				}),
+				children: q.length === 0 ? /* @__PURE__ */ b(o, {
+					illustration: "empty-data",
+					title: "No questions yet",
+					description: "Build this assessment by adding its first question.",
+					action: /* @__PURE__ */ x(S, {
+						onClick: Z,
+						children: [/* @__PURE__ */ b(g, { className: "mr-1.5 h-4 w-4" }), " Add question"]
+					})
+				}) : /* @__PURE__ */ b("ol", {
+					className: "flex flex-col gap-3",
+					children: q.map((e, t) => /* @__PURE__ */ b(ve, {
+						index: t + 1,
+						question: e
+					}, e.id))
 				})
-			}) : /* @__PURE__ */ b("ol", {
-				className: "flex flex-col gap-3",
-				children: J.map((e, t) => /* @__PURE__ */ b(B, {
-					index: t + 1,
-					question: e
-				}, e.id))
 			}),
-			/* @__PURE__ */ b(se, {
-				open: fe,
+			/* @__PURE__ */ b(de, {
+				open: B,
 				onOpenChange: (e) => {
-					e ? H(!0) : Q();
+					e ? V(!0) : Q();
 				},
-				children: /* @__PURE__ */ x(ce, { children: [
-					/* @__PURE__ */ x(de, { children: [/* @__PURE__ */ b(E, { children: "Add question" }), /* @__PURE__ */ x(le, { children: [
+				children: /* @__PURE__ */ x(fe, { children: [
+					/* @__PURE__ */ x(he, { children: [/* @__PURE__ */ b(ge, { children: "Add question" }), /* @__PURE__ */ x(pe, { children: [
 						"Question ",
-						Y,
+						J,
 						" · pick a type, write the prompt and mark the correct answer(s)."
 					] })] }),
 					/* @__PURE__ */ x("div", {
@@ -290,19 +271,31 @@ var N = (e) => {
 						children: [
 							/* @__PURE__ */ x("div", {
 								className: "grid gap-1.5",
-								children: [/* @__PURE__ */ b(T, {
-									htmlFor: "prompt",
-									children: "Prompt *"
-								}), /* @__PURE__ */ b(M, {
-									id: "prompt",
-									value: U.prompt,
-									onChange: (e) => W({
-										...U,
-										prompt: e.target.value
+								children: [
+									/* @__PURE__ */ b(T, {
+										htmlFor: "prompt",
+										children: "Prompt *"
 									}),
-									placeholder: "What do you want to ask?",
-									rows: 2
-								})]
+									/* @__PURE__ */ b(A, {
+										id: "prompt",
+										value: H.prompt,
+										onChange: (e) => U({
+											...H,
+											prompt: e.target.value.slice(0, M)
+										}),
+										placeholder: "Enter your question prompt…",
+										rows: 3,
+										maxLength: M
+									}),
+									/* @__PURE__ */ x("p", {
+										className: "text-right text-xs tabular-nums text-text-secondary",
+										children: [
+											H.prompt.length,
+											" / ",
+											M
+										]
+									})
+								]
 							}),
 							/* @__PURE__ */ x("div", {
 								className: "grid gap-2 sm:grid-cols-2",
@@ -311,15 +304,15 @@ var N = (e) => {
 									children: [/* @__PURE__ */ b(T, {
 										htmlFor: "questionType",
 										children: "Type"
-									}), /* @__PURE__ */ x(D, {
-										value: U.type,
-										onValueChange: (e) => pe(e),
-										children: [/* @__PURE__ */ b(A, {
+									}), /* @__PURE__ */ x(_e, {
+										value: H.type,
+										onValueChange: (e) => ye(e),
+										children: [/* @__PURE__ */ b(O, {
 											id: "questionType",
-											children: /* @__PURE__ */ b(j, {})
-										}), /* @__PURE__ */ b(O, { children: o.map((e) => /* @__PURE__ */ b(k, {
+											children: /* @__PURE__ */ b(k, {})
+										}), /* @__PURE__ */ b(E, { children: l.map((e) => /* @__PURE__ */ b(D, {
 											value: e,
-											children: r(e)
+											children: i(e)
 										}, e)) })]
 									})]
 								}), /* @__PURE__ */ x("div", {
@@ -332,9 +325,9 @@ var N = (e) => {
 										type: "number",
 										min: "0",
 										step: "1",
-										value: U.points,
-										onChange: (e) => W({
-											...U,
+										value: H.points,
+										onChange: (e) => U({
+											...H,
 											points: e.target.value
 										}),
 										placeholder: "1"
@@ -344,149 +337,177 @@ var N = (e) => {
 							X && /* @__PURE__ */ x("div", {
 								className: "grid gap-2",
 								children: [
-									/* @__PURE__ */ x(T, { children: ["Options", U.type !== "TRUE_FALSE" && " *"] }),
+									/* @__PURE__ */ x(T, { children: ["Options", H.type !== "TRUE_FALSE" && " *"] }),
 									/* @__PURE__ */ x("p", {
 										className: "-mt-1 text-xs text-text-secondary",
 										children: [
 											"Tick the ",
-											F(U.type) ? "single correct answer" : "correct answers",
+											P(H.type) ? "single correct answer" : "correct answers",
 											"."
 										]
 									}),
 									/* @__PURE__ */ b("div", {
 										className: "flex flex-col gap-2",
-										children: U.options.map((e, t) => /* @__PURE__ */ x("div", {
-											className: "flex items-center gap-2",
+										children: H.options.map((e, n) => /* @__PURE__ */ x("div", {
+											className: t("flex items-center gap-2.5 rounded-lg border px-2.5 py-1.5 transition-colors", e.correct ? "border-status-success-text bg-status-success-bg-subtle" : "border-border-seam bg-bg-surface"),
 											children: [
-												/* @__PURE__ */ b("label", {
-													className: "flex items-center gap-2",
-													children: /* @__PURE__ */ b(oe, {
-														checked: e.correct,
-														onCheckedChange: (e) => he(t, e === !0),
-														"aria-label": "Mark option correct"
-													})
+												/* @__PURE__ */ b(ue, {
+													checked: e.correct,
+													onCheckedChange: (e) => xe(n, e === !0),
+													"aria-label": "Mark option correct"
 												}),
 												/* @__PURE__ */ b(w, {
 													value: e.label,
-													readOnly: U.type === "TRUE_FALSE",
-													onChange: (e) => me(t, e.target.value),
-													placeholder: `Option ${t + 1}`,
-													className: "flex-1"
+													readOnly: H.type === "TRUE_FALSE",
+													onChange: (e) => be(n, e.target.value),
+													placeholder: `Option ${n + 1}`,
+													className: "flex-1 border-0 bg-transparent px-1 shadow-none focus-visible:ring-0"
 												}),
-												U.type !== "TRUE_FALSE" && U.options.length > 2 && /* @__PURE__ */ b(S, {
+												e.correct && /* @__PURE__ */ b("span", {
+													className: "shrink-0 text-xs font-medium text-status-success-text",
+													children: "Correct"
+												}),
+												H.type !== "TRUE_FALSE" && H.options.length > 2 && /* @__PURE__ */ b(S, {
 													type: "button",
 													variant: "ghost",
 													size: "icon",
-													onClick: () => $(t),
+													onClick: () => Ce(n),
 													"aria-label": "Remove option",
-													children: /* @__PURE__ */ b(_, { className: "h-4 w-4" })
+													children: /* @__PURE__ */ b(oe, { className: "h-4 w-4" })
 												})
 											]
-										}, t))
+										}, n))
 									}),
-									U.type !== "TRUE_FALSE" && /* @__PURE__ */ x(S, {
+									H.type !== "TRUE_FALSE" && /* @__PURE__ */ x(S, {
 										type: "button",
 										variant: "ghost",
 										size: "sm",
-										onClick: ge,
-										children: [/* @__PURE__ */ b(p, { className: "mr-1.5 h-4 w-4" }), " Add option"]
+										onClick: Se,
+										children: [/* @__PURE__ */ b(g, { className: "mr-1.5 h-4 w-4" }), " Add option"]
 									})
 								]
 							}),
-							U.type === "SHORT_ANSWER" && /* @__PURE__ */ x("div", {
+							H.type === "SHORT_ANSWER" && /* @__PURE__ */ x("div", {
 								className: "grid gap-1.5",
 								children: [/* @__PURE__ */ b(T, {
 									htmlFor: "shortAnswer",
 									children: "Expected answer"
 								}), /* @__PURE__ */ b(w, {
 									id: "shortAnswer",
-									value: U.shortAnswer,
-									onChange: (e) => W({
-										...U,
+									value: H.shortAnswer,
+									onChange: (e) => U({
+										...H,
 										shortAnswer: e.target.value
 									}),
 									placeholder: "The accepted answer (used as the grading key)."
 								})]
 							}),
-							(U.type === "ESSAY" || U.type === "CODE") && /* @__PURE__ */ x("p", {
+							(H.type === "ESSAY" || H.type === "CODE") && /* @__PURE__ */ x("p", {
 								className: "rounded-lg bg-bg-sunken px-3 py-2 text-xs text-text-secondary",
-								children: [r(U.type), " responses are graded manually from the Submissions view."]
+								children: [i(H.type), " responses are graded manually from the Submissions view."]
 							}),
 							/* @__PURE__ */ x("div", {
 								className: "grid gap-1.5",
 								children: [/* @__PURE__ */ b(T, {
 									htmlFor: "explanation",
 									children: "Explanation"
-								}), /* @__PURE__ */ b(M, {
+								}), /* @__PURE__ */ b(A, {
 									id: "explanation",
-									value: U.explanation,
-									onChange: (e) => W({
-										...U,
+									value: H.explanation,
+									onChange: (e) => U({
+										...H,
 										explanation: e.target.value
 									}),
 									placeholder: "Shown to learners after grading (optional).",
 									rows: 2
 								})]
 							}),
-							G && /* @__PURE__ */ b("p", {
+							W && /* @__PURE__ */ b("p", {
 								className: "text-sm text-status-error-text",
-								children: G
+								children: W
 							})
 						]
 					}),
-					/* @__PURE__ */ x(ue, { children: [/* @__PURE__ */ b(S, {
+					/* @__PURE__ */ x(me, { children: [/* @__PURE__ */ b(S, {
 						variant: "outline",
 						onClick: Q,
 						children: "Cancel"
 					}), /* @__PURE__ */ b(S, {
-						onClick: ve,
-						disabled: V.isPending,
-						children: V.isPending ? "Adding…" : "Add question"
+						onClick: we,
+						disabled: R.isPending,
+						children: R.isPending ? "Adding…" : "Add question"
 					})] })
 				] })
 			})
 		]
 	});
-}, B = ({ index: e, question: t }) => {
-	let n = N(t.options), r = P.has(t.type) || t.type === "TRUE_FALSE";
+}, z = ({ icon: e, label: n, value: r, divider: i }) => /* @__PURE__ */ x("div", {
+	className: t("flex items-center gap-3", i && "sm:border-l sm:border-border-seam sm:pl-5"),
+	children: [/* @__PURE__ */ b("span", {
+		className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[var(--color-accent-soft)] text-[var(--color-accent-teal)]",
+		children: e
+	}), /* @__PURE__ */ x("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ b("p", {
+			className: "text-xs font-medium uppercase tracking-wide text-text-secondary",
+			children: n
+		}), /* @__PURE__ */ b("p", {
+			className: "mt-0.5 text-lg font-semibold tabular-nums text-text-primary",
+			children: r
+		})]
+	})]
+}), B = (e) => {
+	switch (e) {
+		case "SHORT_ANSWER": return "Learners type a short answer — auto-graded against the answer key.";
+		case "ESSAY": return "Open long-form response — graded manually from Submissions.";
+		case "CODE": return "Code response — graded manually from Submissions.";
+		default: return "Free-text response.";
+	}
+}, ve = ({ index: e, question: t }) => {
+	let n = j(t.options), r = N.has(t.type) || t.type === "TRUE_FALSE", i = t.type === "MULTIPLE_CHOICE";
 	return /* @__PURE__ */ b("li", { children: /* @__PURE__ */ b(C, {
 		treatment: "plain",
-		className: "p-4",
+		className: "p-4 sm:p-5",
 		children: /* @__PURE__ */ x("div", {
-			className: "flex items-start gap-3",
+			className: "flex items-start gap-3.5",
 			children: [/* @__PURE__ */ b("span", {
-				className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-semibold tabular-nums text-text-secondary",
+				className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-sm font-bold tabular-nums text-[var(--color-accent-teal)]",
 				children: e
 			}), /* @__PURE__ */ x("div", {
 				className: "min-w-0 flex-1",
 				children: [
 					/* @__PURE__ */ x("div", {
-						className: "flex flex-wrap items-start justify-between gap-2",
-						children: [/* @__PURE__ */ b("p", {
-							className: "font-medium text-text-primary",
-							children: t.prompt
-						}), /* @__PURE__ */ x("div", {
-							className: "flex shrink-0 items-center gap-2",
-							children: [/* @__PURE__ */ b(i, { status: t.type }), /* @__PURE__ */ x("span", {
-								className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium tabular-nums text-text-secondary",
-								children: [
-									t.points,
-									" pt",
-									t.points === 1 ? "" : "s"
-								]
-							})]
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ b(a, { status: t.type }), /* @__PURE__ */ x("span", {
+							className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium tabular-nums text-text-secondary",
+							children: [
+								t.points,
+								" pt",
+								t.points === 1 ? "" : "s"
+							]
 						})]
 					}),
+					/* @__PURE__ */ b("p", {
+						className: "mt-2.5 font-medium text-text-primary",
+						children: t.prompt
+					}),
 					r && n.length > 0 && /* @__PURE__ */ b("ul", {
-						className: "mt-3 flex flex-col gap-1.5",
+						className: "mt-3 flex flex-col gap-2",
 						children: n.map((e, t) => /* @__PURE__ */ x("li", {
-							className: "flex items-center gap-2 text-sm text-text-secondary",
-							children: [/* @__PURE__ */ b(u, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }), /* @__PURE__ */ b("span", { children: e.label })]
+							className: "flex items-center gap-2.5 rounded-lg border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary",
+							children: [b(i ? y : f, { className: "h-4 w-4 shrink-0 text-text-secondary opacity-60" }), /* @__PURE__ */ b("span", {
+								className: "min-w-0",
+								children: e.label
+							})]
 						}, e.id ?? `${t}-${e.label}`))
 					}),
+					!r && /* @__PURE__ */ b("p", {
+						className: "mt-3 rounded-lg border border-dashed border-border-seam bg-bg-sunken px-3 py-2 text-xs text-text-secondary",
+						children: B(t.type)
+					}),
 					t.explanation && /* @__PURE__ */ x("p", {
 						className: "mt-3 flex items-start gap-1.5 rounded-lg bg-bg-sunken px-3 py-2 text-xs text-text-secondary",
-						children: [/* @__PURE__ */ b(l, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-status-success-text" }), /* @__PURE__ */ b("span", { children: t.explanation })]
+						children: [/* @__PURE__ */ b(h, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-status-warning-text" }), /* @__PURE__ */ b("span", { children: t.explanation })]
 					})
 				]
 			})]
@@ -494,6 +515,6 @@ var N = (e) => {
 	}) });
 };
 //#endregion
-export { z as AssessmentDetailPage };
+export { R as AssessmentDetailPage };
 
 //# sourceMappingURL=AssessmentDetailPage.js.map