@burdenoff/microfe-buildmyiq 2026.705.13 → 2026.706.10

package/dist/buildmyiq/pages/catalog/CourseDetailPage.js

@@ -1,362 +1,483 @@
 import { useBuildmyiq as e } from "../../context/BuildmyiqContext.js";
-import { PageLayout as t } from "../../components/PageLayout.js";
-import { formatDuration as n, formatEnumLabel as r, formatHours 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 s, LoadingView as c, Section as l } from "../../components/StateViews.js";
-import { MiniBar as u } from "../../components/MiniBar.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { formatDuration as r, formatEnumLabel as i, formatHours as a } from "../../utils/formatters.js";
+import { StatusBadge as o } from "../../components/StatusBadge.js";
+import { EmptyState as s } from "../../components/EmptyState.js";
+import { ErrorView as c, LoadingView as l, Section as u } from "../../components/StateViews.js";
+import { MiniBar as d } from "../../components/MiniBar.js";
 import "../../context/index.js";
-import { useBuiAssessments as d, useBuiCourse as f, useBuiEnroll as p, useBuiEnrollments as m, useBuiModules as h } from "../../hooks/useBuildmyiqApi.js";
+import { useBuiAssessments as f, useBuiCourse as ee, useBuiEnroll as p, useBuiEnrollments as m, useBuiModules as h } from "../../hooks/useBuildmyiqApi.js";
 import "../../hooks/index.js";
-import { BuiDiscussion as g } from "../../components/BuiDiscussion.js";
-import { BuiTags as _ } from "../../components/BuiTags.js";
+import { BuiDiscussion as te } from "../../components/BuiDiscussion.js";
+import { BuiTags as ne } from "../../components/BuiTags.js";
 import "../../components/index.js";
-import { useMemo as v, useState as y } from "react";
-import { ArrowLeft as b, BookOpen as x, ClipboardCheck as S, ClipboardList as C, Clock as w, FileText as T, GraduationCap as E, Layers as D, ListChecks as O, MousePointerClick as k, PlayCircle as A, Radio as j, Sparkles as M, Video as N } from "lucide-react";
-import { useParams as P } from "react-router-dom";
-import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
-import { Button as R, GlassCard as z } from "@burdenoff/fe-libs/ui";
+import { useMemo as g, useState as _ } from "react";
+import { ArrowLeft as re, ArrowRight as v, BookOpen as y, ChevronDown as b, ClipboardCheck as x, ClipboardList as S, Clock as C, FileText as w, GraduationCap as ie, Layers as T, ListChecks as E, MousePointerClick as D, PlayCircle as ae, Radio as O, Sparkles as oe, Video as k } from "lucide-react";
+import { useParams as A } from "react-router-dom";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
+import { Button as N, GlassCard as P } from "@burdenoff/fe-libs/ui";
 //#region src/buildmyiq/pages/catalog/CourseDetailPage.tsx
-var B = "buildmyiq-course", V = {
-	ARTICLE: T,
-	VIDEO: N,
-	QUIZ: O,
-	ASSIGNMENT: C,
-	INTERACTIVE: k,
-	LIVE_SESSION: j
-}, H = ({ lesson: e }) => /* @__PURE__ */ L("li", {
-	className: "flex items-center gap-3 px-4 py-3",
+var F = "buildmyiq-course", se = "__ungrouped__", I = {
+	ARTICLE: w,
+	VIDEO: k,
+	QUIZ: E,
+	ASSIGNMENT: S,
+	INTERACTIVE: D,
+	LIVE_SESSION: O
+}, L = ({ lesson: e, index: t }) => /* @__PURE__ */ M("li", {
+	className: "flex items-center gap-3 px-4 py-3 transition-colors hover:bg-bg-sunken/60",
 	children: [
-		/* @__PURE__ */ I("span", {
-			className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-bg-sunken text-text-secondary",
-			children: /* @__PURE__ */ I(V[e.type] ?? T, { className: "h-4 w-4" })
+		/* @__PURE__ */ j("span", {
+			className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+			children: /* @__PURE__ */ j(I[e.type] ?? w, { className: "h-4 w-4" })
 		}),
-		/* @__PURE__ */ L("div", {
+		/* @__PURE__ */ M("div", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ I("p", {
+			children: [/* @__PURE__ */ M("p", {
 				className: "truncate text-sm font-medium text-text-primary",
-				children: e.title
-			}), /* @__PURE__ */ I("p", {
+				children: [/* @__PURE__ */ M("span", {
+					className: "mr-1.5 tabular-nums text-text-tertiary",
+					children: [t + 1, "."]
+				}), e.title]
+			}), /* @__PURE__ */ j("p", {
 				className: "text-xs text-text-tertiary",
-				children: r(e.type)
+				children: i(e.type)
 			})]
 		}),
-		e.isPreview && /* @__PURE__ */ I("span", {
-			className: "shrink-0 rounded-full bg-status-success-bg-subtle px-2 py-0.5 text-xs font-medium text-status-success-text",
-			children: "Preview"
-		}),
-		e.durationMin > 0 && /* @__PURE__ */ L("span", {
+		e.durationMin > 0 && /* @__PURE__ */ M("span", {
 			className: "hidden shrink-0 items-center gap-1 text-xs tabular-nums text-text-secondary sm:inline-flex",
 			children: [
-				/* @__PURE__ */ I(w, { className: "h-3.5 w-3.5" }),
+				/* @__PURE__ */ j(C, { className: "h-3.5 w-3.5" }),
 				" ",
-				n(e.durationMin)
+				r(e.durationMin)
 			]
+		}),
+		e.isPreview && /* @__PURE__ */ j("span", {
+			className: "shrink-0 rounded-full border border-[var(--color-accent-teal)] px-2 py-0.5 text-xs font-medium text-[var(--color-accent-teal)]",
+			children: "Preview"
 		})
 	]
-}), U = () => {
-	let { courseId: r } = P(), { currentUser: C, navigateTo: T } = e(), O = C?.id, k = f(r), j = h(r), N = d(r), V = m({
-		courseId: r,
-		learnerId: O,
-		enabled: !!(r && O)
-	}), U = p(), [W, G] = y(null), K = k.data ?? null, q = j.data ?? [], J = N.data ?? [], Y = V.data?.items ?? [], X = v(() => Y.find((e) => e.status !== "DROPPED" && e.status !== "EXPIRED"), [Y]), Z = v(() => (K?.lessons ?? []).filter((e) => !e.moduleId), [K]), Q = K?.lessons?.length ?? 0;
-	return r ? k.isLoading ? /* @__PURE__ */ I(t, {
+}), R = ({ icon: e, children: t }) => /* @__PURE__ */ M("span", {
+	className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam bg-bg-surface px-3 py-1.5 text-xs font-medium text-text-secondary",
+	children: [/* @__PURE__ */ j(e, {
+		className: "h-3.5 w-3.5 text-text-tertiary",
+		"aria-hidden": !0
+	}), t]
+}), z = () => {
+	let { courseId: i } = A(), { currentUser: S, navigateTo: w } = e(), E = S?.id, D = ee(i), O = h(i), k = f(i), I = m({
+		courseId: i,
+		learnerId: E,
+		enabled: !!(i && E)
+	}), z = p(), [B, V] = _(null), [H, U] = _(null), W = D.data ?? null, G = O.data ?? [], K = k.data ?? [], q = I.data?.items ?? [], J = g(() => q.find((e) => e.status !== "DROPPED" && e.status !== "EXPIRED"), [q]), Y = g(() => (W?.lessons ?? []).filter((e) => !e.moduleId), [W]), X = g(() => {
+		let e = G.map((e) => ({
+			id: e.id,
+			title: e.title,
+			description: e.description,
+			lessons: e.lessons ?? []
+		}));
+		return Y.length > 0 && e.push({
+			id: se,
+			title: "Additional lessons",
+			lessons: Y
+		}), e;
+	}, [G, Y]), Z = W?.lessons?.length ?? 0, ce = K.filter((e) => e.status === "PUBLISHED").length, Q = H ?? new Set(X.slice(0, 1).map((e) => e.id)), $ = X.length > 0 && X.every((e) => Q.has(e.id)), le = (e) => {
+		let t = new Set(Q);
+		t.has(e) ? t.delete(e) : t.add(e), U(t);
+	};
+	return i ? D.isLoading ? /* @__PURE__ */ j(n, {
 		title: "Course",
-		children: /* @__PURE__ */ I(c, { label: "Loading course…" })
-	}) : k.isError ? /* @__PURE__ */ I(t, {
+		children: /* @__PURE__ */ j(l, { label: "Loading course…" })
+	}) : D.isError ? /* @__PURE__ */ j(n, {
 		title: "Course",
-		children: /* @__PURE__ */ I(s, {
+		children: /* @__PURE__ */ j(c, {
 			title: "Couldn't load this course",
-			message: k.error instanceof Error ? k.error.message : void 0,
-			onRetry: () => k.refetch()
+			message: D.error instanceof Error ? D.error.message : void 0,
+			onRetry: () => D.refetch()
 		})
-	}) : K ? /* @__PURE__ */ I(t, {
-		title: K.title,
-		children: /* @__PURE__ */ L("div", {
-			className: "mx-auto flex w-full max-w-5xl flex-col gap-8",
+	}) : W ? /* @__PURE__ */ j(n, {
+		title: W.title,
+		children: /* @__PURE__ */ M("div", {
+			className: "mx-auto flex w-full max-w-6xl flex-col gap-6",
 			children: [
-				/* @__PURE__ */ L("button", {
-					type: "button",
-					onClick: () => T("catalog"),
-					className: "inline-flex w-fit items-center gap-1.5 text-sm text-text-secondary transition-colors hover:text-text-primary",
-					children: [/* @__PURE__ */ I(b, { className: "h-4 w-4" }), " Back to catalog"]
-				}),
-				/* @__PURE__ */ I(z, {
-					treatment: "plain",
-					className: "overflow-hidden",
-					children: /* @__PURE__ */ L("div", {
-						className: "grid grid-cols-1 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]",
-						children: [/* @__PURE__ */ I("div", {
-							className: "relative h-48 w-full overflow-hidden bg-bg-sunken lg:h-full",
-							children: K.cover?.downloadUrl ? /* @__PURE__ */ I("img", {
-								src: K.cover.downloadUrl,
-								alt: "",
-								className: "h-full w-full object-cover"
-							}) : /* @__PURE__ */ I("div", {
-								className: "flex h-full min-h-[12rem] w-full items-center justify-center bg-[var(--color-accent-soft)]",
-								children: /* @__PURE__ */ I(x, { className: "h-10 w-10 text-text-secondary opacity-60" })
+				/* @__PURE__ */ M("div", {
+					className: "flex flex-wrap items-center justify-between gap-3",
+					children: [/* @__PURE__ */ M("nav", {
+						className: "flex min-w-0 items-center gap-1.5 text-sm",
+						"aria-label": "Breadcrumb",
+						children: [
+							/* @__PURE__ */ j("button", {
+								type: "button",
+								onClick: () => w("catalog"),
+								className: "shrink-0 font-medium text-[var(--color-accent-teal)] transition-colors hover:opacity-80",
+								children: "Catalog"
+							}),
+							/* @__PURE__ */ j("span", {
+								className: "shrink-0 text-text-tertiary",
+								children: "/"
+							}),
+							/* @__PURE__ */ j("span", {
+								className: "truncate text-text-secondary",
+								children: W.title
 							})
-						}), /* @__PURE__ */ L("div", {
-							className: "flex flex-col gap-4 p-6",
-							children: [
-								/* @__PURE__ */ L("div", {
-									className: "flex flex-wrap items-center gap-2",
-									children: [/* @__PURE__ */ I(a, { status: K.level }), K.skill?.name && /* @__PURE__ */ L("span", {
-										className: "inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs text-text-secondary",
+						]
+					}), /* @__PURE__ */ M("button", {
+						type: "button",
+						onClick: () => w("catalog"),
+						className: "inline-flex shrink-0 items-center gap-1.5 text-sm text-text-secondary transition-colors hover:text-text-primary",
+						children: [/* @__PURE__ */ j(re, { className: "h-4 w-4" }), " Back to catalog"]
+					})]
+				}),
+				/* @__PURE__ */ M("div", {
+					className: "grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]",
+					children: [/* @__PURE__ */ j(P, {
+						treatment: "plain",
+						className: "overflow-hidden",
+						children: /* @__PURE__ */ M("div", {
+							className: "grid grid-cols-1 sm:grid-cols-[minmax(0,15rem)_minmax(0,1fr)]",
+							children: [/* @__PURE__ */ j("div", {
+								className: "relative h-44 w-full overflow-hidden bg-bg-sunken sm:h-full",
+								children: W.cover?.downloadUrl ? /* @__PURE__ */ j("img", {
+									src: W.cover.downloadUrl,
+									alt: "",
+									className: "h-full w-full object-cover"
+								}) : /* @__PURE__ */ j("div", {
+									className: "flex h-full min-h-[11rem] w-full items-center justify-center bg-[var(--color-accent-soft)]",
+									children: /* @__PURE__ */ j(y, { className: "h-10 w-10 text-text-secondary opacity-60" })
+								})
+							}), /* @__PURE__ */ M("div", {
+								className: "flex flex-col gap-4 p-6",
+								children: [
+									/* @__PURE__ */ M("div", {
+										className: "flex flex-wrap items-center gap-2",
+										children: [/* @__PURE__ */ j(o, { status: W.level }), /* @__PURE__ */ j(o, { status: W.status })]
+									}),
+									/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("h1", {
+										className: "text-2xl font-semibold tracking-tight text-text-primary",
+										children: W.title
+									}), W.summary && /* @__PURE__ */ j("p", {
+										className: "mt-2 text-sm text-text-secondary",
+										children: W.summary
+									})] }),
+									/* @__PURE__ */ M("div", {
+										className: "flex flex-wrap gap-2",
 										children: [
-											/* @__PURE__ */ I(M, { className: "h-3.5 w-3.5" }),
-											" ",
-											K.skill.name
+											W.skill?.name && /* @__PURE__ */ j(R, {
+												icon: oe,
+												children: W.skill.name
+											}),
+											/* @__PURE__ */ M(R, {
+												icon: T,
+												children: [
+													G.length,
+													" module",
+													G.length === 1 ? "" : "s",
+													" · ",
+													Z,
+													" lesson",
+													Z === 1 ? "" : "s"
+												]
+											}),
+											W.estimatedHours > 0 && /* @__PURE__ */ j(R, {
+												icon: C,
+												children: a(W.estimatedHours)
+											})
 										]
-									})]
+									}),
+									W.tags.length > 0 && /* @__PURE__ */ j("div", {
+										className: "flex flex-wrap gap-1.5",
+										children: W.tags.map((e) => /* @__PURE__ */ j("span", {
+											className: "rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs text-text-secondary",
+											children: e
+										}, e))
+									}),
+									W.description && /* @__PURE__ */ j("p", {
+										className: "whitespace-pre-wrap text-sm leading-relaxed text-text-secondary",
+										children: W.description
+									})
+								]
+							})]
+						})
+					}), /* @__PURE__ */ j(P, {
+						treatment: "glass",
+						glow: !0,
+						className: "h-fit p-5 lg:sticky lg:top-4",
+						children: J ? /* @__PURE__ */ M("div", {
+							className: "flex flex-col gap-4",
+							children: [
+								/* @__PURE__ */ M(N, {
+									size: "lg",
+									className: "w-full",
+									onClick: () => w(`learning/${J.id}`),
+									children: [/* @__PURE__ */ j(ae, { className: "mr-2 h-4 w-4" }), " Continue learning"]
 								}),
-								/* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("h1", {
-									className: "text-2xl font-semibold text-text-primary",
-									children: K.title
-								}), K.summary && /* @__PURE__ */ I("p", {
-									className: "mt-2 text-sm text-text-secondary",
-									children: K.summary
-								})] }),
-								/* @__PURE__ */ L("div", {
-									className: "flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-text-secondary",
-									children: [/* @__PURE__ */ L("span", {
-										className: "inline-flex items-center gap-1",
-										children: [
-											/* @__PURE__ */ I(D, { className: "h-3.5 w-3.5" }),
-											" ",
-											q.length,
-											" module",
-											q.length === 1 ? "" : "s",
-											" · ",
-											Q,
-											" lesson",
-											Q === 1 ? "" : "s"
-										]
-									}), K.estimatedHours > 0 && /* @__PURE__ */ L("span", {
-										className: "inline-flex items-center gap-1",
-										children: [
-											/* @__PURE__ */ I(w, { className: "h-3.5 w-3.5" }),
-											" ",
-											i(K.estimatedHours)
-										]
-									})]
+								/* @__PURE__ */ M("div", {
+									className: "flex flex-col gap-1.5",
+									children: [/* @__PURE__ */ M("div", {
+										className: "flex items-center justify-between text-sm",
+										children: [/* @__PURE__ */ j("span", {
+											className: "text-text-secondary",
+											children: "Your progress"
+										}), /* @__PURE__ */ M("span", {
+											className: "font-semibold tabular-nums text-text-primary",
+											children: [J.progressPct, "%"]
+										})]
+									}), /* @__PURE__ */ j(d, { value: J.progressPct })]
+								}),
+								/* @__PURE__ */ M("div", {
+									className: "flex items-center justify-between border-t border-border-seam pt-3 text-xs",
+									children: [/* @__PURE__ */ j("span", {
+										className: "text-text-secondary",
+										children: "Enrollment"
+									}), /* @__PURE__ */ j(o, { status: J.status })]
+								})
+							]
+						}) : /* @__PURE__ */ M("div", {
+							className: "flex flex-col gap-4",
+							children: [
+								/* @__PURE__ */ M(N, {
+									size: "lg",
+									className: "w-full",
+									onClick: async () => {
+										if (!(!i || !E)) {
+											V(null);
+											try {
+												w(`learning/${(await z.mutateAsync({
+													courseId: i,
+													learnerId: E
+												})).id}`);
+											} catch (e) {
+												V(e instanceof Error ? e.message : "Could not enrol in this course.");
+											}
+										}
+									},
+									disabled: z.isPending || !E,
+									children: [
+										/* @__PURE__ */ j(ie, { className: "mr-2 h-4 w-4" }),
+										z.isPending ? "Enrolling…" : "Enrol in this course",
+										!z.isPending && /* @__PURE__ */ j(v, { className: "ml-2 h-4 w-4" })
+									]
 								}),
-								K.tags.length > 0 && /* @__PURE__ */ I("div", {
-									className: "flex flex-wrap gap-1.5",
-									children: K.tags.map((e) => /* @__PURE__ */ I("span", {
-										className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
-										children: e
-									}, e))
+								!E && /* @__PURE__ */ j("p", {
+									className: "text-xs text-text-tertiary",
+									children: "Sign in to your workspace to enrol."
 								}),
-								K.description && /* @__PURE__ */ I("p", {
-									className: "whitespace-pre-wrap text-sm leading-relaxed text-text-secondary",
-									children: K.description
+								B && /* @__PURE__ */ j("p", {
+									className: "text-xs text-status-error-text",
+									children: B
 								}),
-								/* @__PURE__ */ I("div", {
-									className: "mt-auto flex flex-col gap-2 pt-2",
-									children: X ? /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ L(R, {
-										size: "lg",
-										className: "w-full sm:w-auto",
-										onClick: () => T(`learning/${X.id}`),
-										children: [/* @__PURE__ */ I(A, { className: "mr-2 h-4 w-4" }), " Continue learning"]
-									}), /* @__PURE__ */ L("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ I(u, {
-											value: X.progressPct,
-											className: "flex-1"
-										}), /* @__PURE__ */ L("span", {
-											className: "shrink-0 text-xs tabular-nums text-text-secondary",
-											children: [X.progressPct, "% complete"]
-										})]
-									})] }) : /* @__PURE__ */ L(F, { children: [
-										/* @__PURE__ */ L(R, {
-											size: "lg",
-											className: "w-full sm:w-auto",
-											onClick: async () => {
-												if (!(!r || !O)) {
-													G(null);
-													try {
-														T(`learning/${(await U.mutateAsync({
-															courseId: r,
-															learnerId: O
-														})).id}`);
-													} catch (e) {
-														G(e instanceof Error ? e.message : "Could not enrol in this course.");
-													}
-												}
-											},
-											disabled: U.isPending || !O,
-											children: [/* @__PURE__ */ I(E, { className: "mr-2 h-4 w-4" }), U.isPending ? "Enrolling…" : "Enrol in this course"]
+								/* @__PURE__ */ M("dl", {
+									className: "flex flex-col gap-2.5 border-t border-border-seam pt-3 text-sm",
+									children: [
+										/* @__PURE__ */ M("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ M("dt", {
+												className: "inline-flex items-center gap-1.5 text-text-secondary",
+												children: [/* @__PURE__ */ j(T, { className: "h-3.5 w-3.5 text-text-tertiary" }), " Lessons"]
+											}), /* @__PURE__ */ j("dd", {
+												className: "font-medium tabular-nums text-text-primary",
+												children: Z
+											})]
 										}),
-										!O && /* @__PURE__ */ I("p", {
-											className: "text-xs text-text-tertiary",
-											children: "Sign in to your workspace to enrol."
+										W.estimatedHours > 0 && /* @__PURE__ */ M("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ M("dt", {
+												className: "inline-flex items-center gap-1.5 text-text-secondary",
+												children: [/* @__PURE__ */ j(C, { className: "h-3.5 w-3.5 text-text-tertiary" }), " Duration"]
+											}), /* @__PURE__ */ j("dd", {
+												className: "font-medium text-text-primary",
+												children: a(W.estimatedHours)
+											})]
 										}),
-										W && /* @__PURE__ */ I("p", {
-											className: "text-xs text-status-error-text",
-											children: W
+										/* @__PURE__ */ M("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ M("dt", {
+												className: "inline-flex items-center gap-1.5 text-text-secondary",
+												children: [/* @__PURE__ */ j(x, { className: "h-3.5 w-3.5 text-text-tertiary" }), " Assessments"]
+											}), /* @__PURE__ */ j("dd", {
+												className: "font-medium tabular-nums text-text-primary",
+												children: ce
+											})]
 										})
-									] })
+									]
 								})
 							]
-						})]
-					})
-				}),
-				/* @__PURE__ */ I(l, {
-					title: "Curriculum",
-					description: "Modules and lessons in this course.",
-					children: j.isLoading ? /* @__PURE__ */ I(c, { label: "Loading curriculum…" }) : j.isError ? /* @__PURE__ */ I(s, {
-						title: "Couldn't load the curriculum",
-						message: j.error instanceof Error ? j.error.message : void 0,
-						onRetry: () => j.refetch()
-					}) : q.length === 0 && Z.length === 0 ? /* @__PURE__ */ I(o, {
-						illustration: "empty-data",
-						title: "No lessons yet",
-						description: "The instructor hasn't added any modules or lessons to this course."
-					}) : /* @__PURE__ */ L("div", {
-						className: "flex flex-col gap-4",
-						children: [q.map((e, t) => {
-							let n = e.lessons ?? [];
-							return /* @__PURE__ */ L("div", {
-								className: "overflow-hidden rounded-xl border border-border-seam bg-bg-surface",
-								children: [/* @__PURE__ */ L("div", {
-									className: "border-b border-border-seam px-4 py-3",
-									children: [/* @__PURE__ */ L("div", {
-										className: "flex items-baseline justify-between gap-3",
-										children: [/* @__PURE__ */ L("h3", {
-											className: "font-semibold text-text-primary",
-											children: [/* @__PURE__ */ I("span", {
-												className: "mr-2 text-text-tertiary",
-												children: String(t + 1).padStart(2, "0")
-											}), e.title]
-										}), /* @__PURE__ */ L("span", {
-											className: "shrink-0 text-xs text-text-tertiary",
-											children: [
-												n.length,
-												" lesson",
-												n.length === 1 ? "" : "s"
-											]
-										})]
-									}), e.description && /* @__PURE__ */ I("p", {
-										className: "mt-1 text-sm text-text-secondary",
-										children: e.description
-									})]
-								}), n.length === 0 ? /* @__PURE__ */ I("p", {
-									className: "px-4 py-3 text-sm text-text-tertiary",
-									children: "No lessons in this module yet."
-								}) : /* @__PURE__ */ I("ul", {
-									className: "divide-y divide-border-seam",
-									children: n.map((e) => /* @__PURE__ */ I(H, { lesson: e }, e.id))
-								})]
-							}, e.id);
-						}), Z.length > 0 && /* @__PURE__ */ L("div", {
-							className: "overflow-hidden rounded-xl border border-border-seam bg-bg-surface",
-							children: [/* @__PURE__ */ I("div", {
-								className: "border-b border-border-seam px-4 py-3",
-								children: /* @__PURE__ */ I("h3", {
-									className: "font-semibold text-text-primary",
-									children: "Additional lessons"
-								})
-							}), /* @__PURE__ */ I("ul", {
-								className: "divide-y divide-border-seam",
-								children: Z.map((e) => /* @__PURE__ */ I(H, { lesson: e }, e.id))
-							})]
-						})]
-					})
+						})
+					})]
 				}),
-				/* @__PURE__ */ I(l, {
-					title: "Assessments",
-					description: "Quizzes and exams for this course.",
-					children: N.isLoading ? /* @__PURE__ */ I(c, { label: "Loading assessments…" }) : N.isError ? /* @__PURE__ */ I(s, {
-						title: "Couldn't load assessments",
-						message: N.error instanceof Error ? N.error.message : void 0,
-						onRetry: () => N.refetch()
-					}) : J.length === 0 ? /* @__PURE__ */ I(o, {
-						illustration: "empty-data",
-						icon: /* @__PURE__ */ I(S, { className: "h-9 w-9" }),
-						title: "No assessments yet",
-						description: "This course doesn't have any quizzes or exams attached."
-					}) : /* @__PURE__ */ I("ul", {
-						className: "flex flex-col gap-3",
-						children: J.map((e) => /* @__PURE__ */ L("li", {
-							className: "flex flex-wrap items-center gap-3 rounded-xl border border-border-seam bg-bg-surface p-4",
-							children: [
-								/* @__PURE__ */ I("span", {
-									className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-									children: /* @__PURE__ */ I(S, { className: "h-4 w-4" })
-								}),
-								/* @__PURE__ */ L("div", {
-									className: "min-w-0 flex-1",
-									children: [/* @__PURE__ */ I("p", {
-										className: "truncate font-medium text-text-primary",
-										children: e.title
-									}), /* @__PURE__ */ L("div", {
-										className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-secondary",
+				/* @__PURE__ */ M("div", {
+					className: "grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1.7fr)_minmax(0,1fr)]",
+					children: [/* @__PURE__ */ j("div", { children: /* @__PURE__ */ j(u, {
+						title: "Curriculum",
+						description: "Modules and lessons in this course.",
+						action: X.length > 1 ? /* @__PURE__ */ j("button", {
+							type: "button",
+							onClick: () => {
+								U($ ? /* @__PURE__ */ new Set() : new Set(X.map((e) => e.id)));
+							},
+							className: "text-sm font-medium text-[var(--color-accent-teal)] transition-colors hover:opacity-80",
+							children: $ ? "Collapse all" : "Expand all"
+						}) : void 0,
+						children: O.isLoading ? /* @__PURE__ */ j(l, { label: "Loading curriculum…" }) : O.isError ? /* @__PURE__ */ j(c, {
+							title: "Couldn't load the curriculum",
+							message: O.error instanceof Error ? O.error.message : void 0,
+							onRetry: () => O.refetch()
+						}) : X.length === 0 ? /* @__PURE__ */ j(s, {
+							illustration: "empty-data",
+							title: "No lessons yet",
+							description: "The instructor hasn't added any modules or lessons to this course."
+						}) : /* @__PURE__ */ j("div", {
+							className: "flex flex-col gap-3",
+							children: X.map((e, n) => {
+								let r = Q.has(e.id), i = `curriculum-panel-${e.id}`;
+								return /* @__PURE__ */ M("div", {
+									className: t("overflow-hidden rounded-xl border bg-bg-surface transition-colors", r ? "border-[var(--color-accent-soft)]" : "border-border-seam"),
+									children: [/* @__PURE__ */ M("button", {
+										type: "button",
+										onClick: () => le(e.id),
+										"aria-expanded": r,
+										"aria-controls": i,
+										className: "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-bg-sunken/50",
 										children: [
-											/* @__PURE__ */ L("span", { children: [
-												"Pass ≥ ",
-												e.passingScore,
-												"%"
-											] }),
-											/* @__PURE__ */ L("span", { children: [
-												e.maxAttempts,
-												" attempt",
-												e.maxAttempts === 1 ? "" : "s"
-											] }),
-											e.timeLimitMin > 0 && /* @__PURE__ */ L("span", {
-												className: "inline-flex items-center gap-1",
-												children: [/* @__PURE__ */ I(w, { className: "h-3.5 w-3.5" }), n(e.timeLimitMin)]
+											/* @__PURE__ */ j("span", {
+												className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-action-primary-bg text-xs font-semibold text-action-primary-text",
+												children: n + 1
+											}),
+											/* @__PURE__ */ M("div", {
+												className: "min-w-0 flex-1",
+												children: [/* @__PURE__ */ j("h3", {
+													className: "truncate font-semibold text-text-primary",
+													children: e.title
+												}), e.description && r && /* @__PURE__ */ j("p", {
+													className: "mt-0.5 line-clamp-2 text-sm text-text-secondary",
+													children: e.description
+												})]
+											}),
+											/* @__PURE__ */ M("span", {
+												className: "shrink-0 text-xs text-text-tertiary",
+												children: [
+													e.lessons.length,
+													" lesson",
+													e.lessons.length === 1 ? "" : "s"
+												]
+											}),
+											/* @__PURE__ */ j(b, {
+												className: t("h-4 w-4 shrink-0 text-text-tertiary transition-transform", r && "rotate-180"),
+												"aria-hidden": !0
 											})
 										]
-									})]
-								}),
-								/* @__PURE__ */ L("div", {
-									className: "flex shrink-0 items-center gap-2",
-									children: [
-										/* @__PURE__ */ I(a, { status: e.type }),
-										/* @__PURE__ */ I(a, { status: e.status }),
-										e.status === "PUBLISHED" && X && /* @__PURE__ */ I(R, {
+									}), r && (e.lessons.length === 0 ? /* @__PURE__ */ j("p", {
+										className: "border-t border-border-seam px-4 py-3 text-sm text-text-tertiary",
+										children: "No lessons in this module yet."
+									}) : /* @__PURE__ */ j("ul", {
+										id: i,
+										className: "divide-y divide-border-seam border-t border-border-seam",
+										children: e.lessons.map((e, t) => /* @__PURE__ */ j(L, {
+											lesson: e,
+											index: t
+										}, e.id))
+									}))]
+								}, e.id);
+							})
+						})
+					}) }), /* @__PURE__ */ M("div", {
+						className: "flex flex-col gap-6",
+						children: [/* @__PURE__ */ j("div", { children: /* @__PURE__ */ j(u, {
+							title: "Assessments",
+							description: "Quizzes and exams for this course.",
+							children: k.isLoading ? /* @__PURE__ */ j(l, { label: "Loading assessments…" }) : k.isError ? /* @__PURE__ */ j(c, {
+								title: "Couldn't load assessments",
+								message: k.error instanceof Error ? k.error.message : void 0,
+								onRetry: () => k.refetch()
+							}) : K.length === 0 ? /* @__PURE__ */ j(s, {
+								illustration: "empty-data",
+								icon: /* @__PURE__ */ j(x, { className: "h-9 w-9" }),
+								title: "No assessments yet",
+								description: "This course doesn't have any quizzes or exams attached."
+							}) : /* @__PURE__ */ j("ul", {
+								className: "flex flex-col gap-3",
+								children: K.map((e) => /* @__PURE__ */ M("li", {
+									className: "rounded-xl border border-border-seam bg-bg-surface p-4",
+									children: [/* @__PURE__ */ M("div", {
+										className: "flex items-start gap-3",
+										children: [/* @__PURE__ */ j("span", {
+											className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+											children: /* @__PURE__ */ j(x, { className: "h-4 w-4" })
+										}), /* @__PURE__ */ M("div", {
+											className: "min-w-0 flex-1",
+											children: [
+												/* @__PURE__ */ j("p", {
+													className: "font-medium text-text-primary",
+													children: e.title
+												}),
+												/* @__PURE__ */ M("div", {
+													className: "mt-1.5 flex flex-wrap items-center gap-1.5",
+													children: [/* @__PURE__ */ j(o, { status: e.type }), /* @__PURE__ */ j(o, { status: e.status })]
+												}),
+												/* @__PURE__ */ M("div", {
+													className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-secondary",
+													children: [
+														/* @__PURE__ */ M("span", { children: [
+															"Pass ≥ ",
+															e.passingScore,
+															"%"
+														] }),
+														/* @__PURE__ */ M("span", { children: [
+															e.maxAttempts,
+															" attempt",
+															e.maxAttempts === 1 ? "" : "s"
+														] }),
+														e.timeLimitMin > 0 && /* @__PURE__ */ M("span", {
+															className: "inline-flex items-center gap-1",
+															children: [/* @__PURE__ */ j(C, { className: "h-3.5 w-3.5" }), r(e.timeLimitMin)]
+														})
+													]
+												})
+											]
+										})]
+									}), e.status === "PUBLISHED" && J && /* @__PURE__ */ j("div", {
+										className: "mt-3 flex justify-end",
+										children: /* @__PURE__ */ j(N, {
 											size: "sm",
-											onClick: () => T(`assessments/${e.id}/take`),
+											onClick: () => w(`assessments/${e.id}/take`),
 											children: "Take"
 										})
-									]
-								})
-							]
-						}, e.id))
-					})
-				}),
-				/* @__PURE__ */ I(_, {
-					entityType: B,
-					entityId: r
+									})]
+								}, e.id))
+							})
+						}) }), /* @__PURE__ */ j("div", { children: /* @__PURE__ */ j(te, {
+							entityType: F,
+							entityId: i,
+							description: "Ask questions and discuss this course with your workspace."
+						}) })]
+					})]
 				}),
-				/* @__PURE__ */ I(g, {
-					entityType: B,
-					entityId: r,
-					description: "Ask questions and discuss this course with your workspace."
-				})
+				/* @__PURE__ */ j("div", { children: /* @__PURE__ */ j(ne, {
+					entityType: F,
+					entityId: i
+				}) })
 			]
 		})
-	}) : /* @__PURE__ */ I(t, {
+	}) : /* @__PURE__ */ j(n, {
 		title: "Course",
-		children: /* @__PURE__ */ I(o, {
+		children: /* @__PURE__ */ j(s, {
 			illustration: "empty-search",
 			title: "Course not found",
 			description: "This course may have been unpublished or removed.",
-			action: /* @__PURE__ */ I(R, {
-				onClick: () => T("catalog"),
+			action: /* @__PURE__ */ j(N, {
+				onClick: () => w("catalog"),
 				children: "Back to catalog"
 			})
 		})
-	}) : /* @__PURE__ */ I(t, {
+	}) : /* @__PURE__ */ j(n, {
 		title: "Course",
-		children: /* @__PURE__ */ I(s, {
+		children: /* @__PURE__ */ j(c, {
 			title: "Missing course",
 			message: "No course was specified."
 		})
 	});
 };
 //#endregion
-export { U as CourseDetailPage };
+export { z as CourseDetailPage };
 
 //# sourceMappingURL=CourseDetailPage.js.map