@burdenoff/microfe-buildmyiq 2026.705.13 → 2026.706.10

package/dist/buildmyiq/pages/learning/LessonPlayerPage.js

@@ -1,292 +1,355 @@
 import { useBuildmyiq as e } from "../../context/BuildmyiqContext.js";
 import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
-import { formatDuration 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 o, LoadingView as s } from "../../components/StateViews.js";
-import { MiniBar as c } from "../../components/MiniBar.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 s, LoadingView as c } from "../../components/StateViews.js";
+import { MiniBar as l } from "../../components/MiniBar.js";
+import { ProgressRing as u } from "../../components/Viz.js";
 import "../../context/index.js";
-import { useBuiCourse as ee, useBuiEnrollment as l, useBuiRecordLessonProgress as u, useBuiTransitionEnrollment as d } from "../../hooks/useBuildmyiqApi.js";
+import { useBuiCourse as ee, useBuiEnrollment as te, useBuiRecordLessonProgress as ne, useBuiTransitionEnrollment as re } from "../../hooks/useBuildmyiqApi.js";
 import "../../hooks/index.js";
-import { FileLink as f } from "../../components/FileLink.js";
+import { FileLink as d } from "../../components/FileLink.js";
 import "../../components/index.js";
-import { useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
-import { ArrowLeft as _, CheckCircle2 as v, ChevronLeft as y, ChevronRight as te, Circle as b, ListChecks as x, Loader2 as S, Trophy as ne } from "lucide-react";
-import { useParams as re } from "react-router-dom";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import { Button as T, GlassCard as E } from "@burdenoff/fe-libs/ui";
+import { useEffect as ie, useMemo as f, useRef as p, useState as m } from "react";
+import { ArrowLeft as ae, BookOpen as h, Check as g, CheckCircle2 as _, ChevronLeft as oe, ChevronRight as se, FileText as v, HelpCircle as y, ListChecks as b, Loader2 as x, MousePointerClick as S, PenLine as C, PlayCircle as w, Radio as T, Trophy as ce } from "lucide-react";
+import { useParams as le } from "react-router-dom";
+import { Fragment as ue, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { Button as O, GlassCard as k } from "@burdenoff/fe-libs/ui";
 //#region src/buildmyiq/pages/learning/LessonPlayerPage.tsx
-var D = (e) => [...e].sort((e, t) => e.position - t.position), O = () => {
-	let { enrollmentId: O } = re(), { navigateTo: k } = e(), A = l(O), j = A.data ?? null, M = j?.courseId, N = ee(M), P = N.data ?? null, F = u(), I = d(), L = F.mutate, R = h(/* @__PURE__ */ new Set()), [z, B] = g(null), [V, H] = g(!1), U = m(() => {
-		if (!P) return [];
-		let e = /* @__PURE__ */ new Set(), t = D(P.modules ?? []), n = [];
+var A = {
+	ARTICLE: v,
+	VIDEO: w,
+	QUIZ: y,
+	ASSIGNMENT: C,
+	INTERACTIVE: S,
+	LIVE_SESSION: T
+}, j = (e) => [...e].sort((e, t) => e.position - t.position), M = () => {
+	let { enrollmentId: y } = le(), { navigateTo: S } = e(), C = te(y), w = C.data ?? null, T = w?.courseId, M = ee(T), N = M.data ?? null, P = ne(), F = re(), I = P.mutate, L = p(/* @__PURE__ */ new Set()), [R, z] = m(null), [B, V] = m(!1), H = f(() => {
+		if (!N) return [];
+		let e = /* @__PURE__ */ new Set(), t = j(N.modules ?? []), n = [];
 		for (let r of t) {
-			let t = D(r.lessons ?? []).filter((t) => e.has(t.id) ? !1 : (e.add(t.id), !0));
+			let t = j(r.lessons ?? []).filter((t) => e.has(t.id) ? !1 : (e.add(t.id), !0));
 			t.length > 0 && n.push({
 				id: r.id,
 				title: r.title,
 				lessons: t
 			});
 		}
-		let r = D(P.lessons ?? []).filter((t) => e.has(t.id) ? !1 : (e.add(t.id), !0));
+		let r = j(N.lessons ?? []).filter((t) => e.has(t.id) ? !1 : (e.add(t.id), !0));
 		return r.length > 0 && n.push({
 			id: "__standalone",
 			title: "Lessons",
 			lessons: r
 		}), n;
-	}, [P]), W = m(() => U.flatMap((e) => e.lessons), [U]), G = m(() => {
+	}, [N]), U = f(() => H.flatMap((e) => e.lessons), [H]), W = f(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of j?.lessonProgress ?? []) e.set(t.lessonId, t.status);
+		for (let t of w?.lessonProgress ?? []) e.set(t.lessonId, t.status);
 		return e;
-	}, [j]), K = m(() => W.length === 0 ? null : z && W.some((e) => e.id === z) ? z : W[0].id, [W, z]);
-	p(() => {
-		if (!O || !K) return;
-		let e = G.get(K);
-		e === "COMPLETED" || e === "IN_PROGRESS" || R.current.has(K) || (R.current.add(K), L({
-			enrollmentId: O,
-			lessonId: K,
+	}, [w]), G = f(() => U.length === 0 ? null : R && U.some((e) => e.id === R) ? R : U[0].id, [U, R]);
+	ie(() => {
+		if (!y || !G) return;
+		let e = W.get(G);
+		e === "COMPLETED" || e === "IN_PROGRESS" || L.current.has(G) || (L.current.add(G), I({
+			enrollmentId: y,
+			lessonId: G,
 			status: "IN_PROGRESS"
 		}));
 	}, [
-		O,
-		K,
+		y,
 		G,
-		L
+		W,
+		I
 	]);
-	let q = W.findIndex((e) => e.id === K), J = q >= 0 ? W[q] : null, Y = (J ? G.get(J.id) : void 0) === "COMPLETED", ie = W.length > 0 && W.every((e) => G.get(e.id) === "COMPLETED"), ae = j?.status === "COMPLETED", X = (e) => {
-		B(e), H(!1);
+	let K = U.findIndex((e) => e.id === G), q = K >= 0 ? U[K] : null, J = (q ? W.get(q.id) : void 0) === "COMPLETED", Y = U.filter((e) => W.get(e.id) === "COMPLETED").length, de = U.length > 0 && Y === U.length, fe = w?.status === "COMPLETED", X = (e) => {
+		z(e), V(!1);
 	}, Z = (e) => {
-		if (q < 0) return;
-		let t = W[q + e];
+		if (K < 0) return;
+		let t = U[K + e];
 		t && X(t.id);
-	}, oe = async () => {
-		if (!O || !J) return;
-		await F.mutateAsync({
-			enrollmentId: O,
-			lessonId: J.id,
+	}, pe = async () => {
+		if (!y || !q) return;
+		await P.mutateAsync({
+			enrollmentId: y,
+			lessonId: q.id,
 			status: "COMPLETED"
 		});
-		let e = W[q + 1];
-		e && B(e.id);
-	}, se = async () => {
-		O && await I.mutateAsync({
-			id: O,
+		let e = U[K + 1];
+		e && z(e.id);
+	}, me = async () => {
+		y && await F.mutateAsync({
+			id: y,
 			status: "COMPLETED"
 		});
 	};
-	if (!O) return /* @__PURE__ */ C(n, {
+	if (!y) return /* @__PURE__ */ E(n, {
 		title: "Lesson",
-		children: /* @__PURE__ */ C(a, {
+		children: /* @__PURE__ */ E(o, {
 			illustration: "empty-data",
 			title: "No enrollment selected",
 			description: "Open a course from My Learning to start the lesson player.",
-			action: /* @__PURE__ */ C(T, {
-				onClick: () => k("learning"),
+			action: /* @__PURE__ */ E(O, {
+				onClick: () => S("learning"),
 				children: "Back to My Learning"
 			})
 		})
 	});
-	let ce = A.isLoading || !!M && N.isLoading, Q = /* @__PURE__ */ w(T, {
+	let he = C.isLoading || !!T && M.isLoading, Q = /* @__PURE__ */ D(O, {
 		variant: "ghost",
 		size: "sm",
-		onClick: () => k("learning"),
-		children: [/* @__PURE__ */ C(_, { className: "mr-1 h-4 w-4" }), " My Learning"]
+		onClick: () => S("learning"),
+		children: [/* @__PURE__ */ E(ae, { className: "mr-1 h-4 w-4" }), " My Learning"]
 	});
-	if (ce) return /* @__PURE__ */ C(n, {
+	if (he) return /* @__PURE__ */ E(n, {
 		title: "Lesson",
 		actions: Q,
-		children: /* @__PURE__ */ C(s, { label: "Loading your lesson…" })
+		children: /* @__PURE__ */ E(c, { label: "Loading your lesson…" })
 	});
-	if (A.isError) return /* @__PURE__ */ C(n, {
+	if (C.isError) return /* @__PURE__ */ E(n, {
 		title: "Lesson",
 		actions: Q,
-		children: /* @__PURE__ */ C(o, {
+		children: /* @__PURE__ */ E(s, {
 			title: "Couldn't load this enrollment",
-			message: A.error instanceof Error ? A.error.message : void 0,
-			onRetry: () => A.refetch()
+			message: C.error instanceof Error ? C.error.message : void 0,
+			onRetry: () => C.refetch()
 		})
 	});
-	if (!j) return /* @__PURE__ */ C(n, {
+	if (!w) return /* @__PURE__ */ E(n, {
 		title: "Lesson",
 		actions: Q,
-		children: /* @__PURE__ */ C(a, {
+		children: /* @__PURE__ */ E(o, {
 			illustration: "empty-data",
 			title: "Enrollment not found",
 			description: "This enrollment may have been removed or is not available to you.",
-			action: /* @__PURE__ */ C(T, {
-				onClick: () => k("learning"),
+			action: /* @__PURE__ */ E(O, {
+				onClick: () => S("learning"),
 				children: "Back to My Learning"
 			})
 		})
 	});
-	if (N.isError) return /* @__PURE__ */ C(n, {
+	if (M.isError) return /* @__PURE__ */ E(n, {
 		title: "Lesson",
 		actions: Q,
-		children: /* @__PURE__ */ C(o, {
+		children: /* @__PURE__ */ E(s, {
 			title: "Couldn't load the course",
-			message: N.error instanceof Error ? N.error.message : void 0,
-			onRetry: () => N.refetch()
+			message: M.error instanceof Error ? M.error.message : void 0,
+			onRetry: () => M.refetch()
 		})
 	});
-	let $ = Math.round(j.progressPct ?? 0);
-	return /* @__PURE__ */ C(n, {
-		title: P?.title ?? "Lesson",
+	let $ = Math.round(w.progressPct ?? 0), ge = q ? A[q.type] : v;
+	return /* @__PURE__ */ E(n, {
+		title: N?.title ?? "Lesson",
 		actions: Q,
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ D("div", {
 			className: "flex flex-col gap-5",
 			children: [
-				/* @__PURE__ */ w("div", {
-					className: "flex flex-col gap-2 rounded-2xl border border-border-seam bg-bg-surface p-4 sm:flex-row sm:items-center sm:gap-4",
+				/* @__PURE__ */ D(k, {
+					treatment: "glass",
+					glow: $ > 0,
+					className: "flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:gap-5",
 					children: [
-						/* @__PURE__ */ w("div", {
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ C(i, { status: j.status }), /* @__PURE__ */ w("span", {
-								className: "text-sm text-text-secondary",
-								children: [
-									W.filter((e) => G.get(e.id) === "COMPLETED").length,
-									" /",
-									" ",
-									W.length,
-									" lessons complete"
-								]
-							})]
+						/* @__PURE__ */ E(u, {
+							value: $,
+							size: 64,
+							className: "shrink-0"
 						}),
-						/* @__PURE__ */ w("div", {
-							className: "flex flex-1 items-center gap-3",
-							children: [/* @__PURE__ */ C(c, {
+						/* @__PURE__ */ D("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ D("div", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [/* @__PURE__ */ E(a, { status: w.status }), /* @__PURE__ */ D("span", {
+									className: "text-sm text-text-secondary tabular-nums",
+									children: [
+										Y,
+										" of ",
+										U.length,
+										" lessons complete"
+									]
+								})]
+							}), /* @__PURE__ */ E(l, {
 								value: $,
-								className: "flex-1"
-							}), /* @__PURE__ */ w("span", {
-								className: "shrink-0 text-sm font-medium tabular-nums text-text-primary",
-								children: [$, "%"]
+								className: "mt-3"
 							})]
 						}),
-						ie && !ae && /* @__PURE__ */ w(T, {
-							size: "sm",
+						de && !fe && /* @__PURE__ */ D(O, {
 							className: "shrink-0 max-sm:w-full",
-							onClick: se,
-							disabled: I.isPending,
-							children: [I.isPending ? /* @__PURE__ */ C(S, { className: "mr-1 h-4 w-4 animate-spin" }) : /* @__PURE__ */ C(ne, { className: "mr-1 h-4 w-4" }), "Finish course"]
+							onClick: me,
+							disabled: F.isPending,
+							children: [F.isPending ? /* @__PURE__ */ E(x, { className: "mr-1 h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(ce, { className: "mr-1 h-4 w-4" }), "Finish course"]
 						})
 					]
 				}),
-				/* @__PURE__ */ w(T, {
+				/* @__PURE__ */ D(O, {
 					variant: "secondary",
 					size: "sm",
 					className: "w-full lg:hidden",
-					onClick: () => H((e) => !e),
-					children: [/* @__PURE__ */ C(x, { className: "mr-1 h-4 w-4" }), V ? "Hide lessons" : "Show lessons"]
+					onClick: () => V((e) => !e),
+					children: [/* @__PURE__ */ E(b, { className: "mr-1 h-4 w-4" }), B ? "Hide lessons" : `Lessons (${Y}/${U.length})`]
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ D("div", {
 					className: "flex flex-col gap-5 lg:flex-row",
-					children: [/* @__PURE__ */ C("aside", {
-						className: t("lg:block lg:w-80 lg:shrink-0", V ? "block" : "hidden"),
-						children: /* @__PURE__ */ C(E, {
+					children: [/* @__PURE__ */ E("aside", {
+						className: t("lg:block lg:w-80 lg:shrink-0", B ? "block" : "hidden"),
+						children: /* @__PURE__ */ E(k, {
 							treatment: "plain",
 							className: "overflow-hidden p-0 lg:sticky lg:top-4",
-							children: W.length === 0 ? /* @__PURE__ */ C("div", {
+							children: U.length === 0 ? /* @__PURE__ */ E("div", {
 								className: "p-4 text-sm text-text-secondary",
 								children: "This course has no lessons yet."
-							}) : /* @__PURE__ */ C("nav", {
-								className: "max-h-[70vh] overflow-auto p-2",
-								children: U.map((e) => /* @__PURE__ */ w("div", {
-									className: "mb-2 last:mb-0",
-									children: [/* @__PURE__ */ C("p", {
-										className: "px-3 py-2 text-xs font-semibold uppercase tracking-wide text-text-secondary",
-										children: e.title
-									}), /* @__PURE__ */ C("ul", {
-										className: "flex flex-col gap-0.5",
-										children: e.lessons.map((e) => {
-											let n = G.get(e.id) === "COMPLETED", i = e.id === K;
-											return /* @__PURE__ */ C("li", { children: /* @__PURE__ */ w("button", {
-												type: "button",
-												onClick: () => X(e.id),
-												className: t("flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm transition-colors", i ? "bg-[var(--color-accent-soft)] text-text-primary" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"),
-												"aria-current": i ? "true" : void 0,
+							}) : /* @__PURE__ */ D(ue, { children: [/* @__PURE__ */ E("nav", {
+								className: "max-h-[68vh] overflow-auto p-3",
+								children: H.map((e) => {
+									let n = e.lessons.filter((e) => W.get(e.id) === "COMPLETED").length;
+									return /* @__PURE__ */ D("div", {
+										className: "mb-4 last:mb-0",
+										children: [/* @__PURE__ */ D("div", {
+											className: "mb-2 flex items-center justify-between gap-2 px-1",
+											children: [/* @__PURE__ */ E("p", {
+												className: "min-w-0 truncate text-sm font-semibold text-text-primary",
+												children: e.title
+											}), /* @__PURE__ */ D("span", {
+												className: "shrink-0 text-xs font-medium tabular-nums text-text-secondary",
 												children: [
-													n ? /* @__PURE__ */ C(v, { className: "h-4 w-4 shrink-0 text-status-success-text" }) : /* @__PURE__ */ C(b, { className: "h-4 w-4 shrink-0 opacity-50" }),
-													/* @__PURE__ */ C("span", {
-														className: "min-w-0 flex-1 truncate",
-														children: e.title
-													}),
-													e.durationMin > 0 && /* @__PURE__ */ C("span", {
-														className: "shrink-0 text-xs tabular-nums text-text-secondary",
-														children: r(e.durationMin)
-													})
+													n,
+													" / ",
+													e.lessons.length
 												]
-											}) }, e.id);
-										})
-									})]
-								}, e.id))
-							})
+											})]
+										}), /* @__PURE__ */ E("ul", {
+											className: "flex flex-col",
+											children: e.lessons.map((n, a) => {
+												let o = W.get(n.id) === "COMPLETED", s = n.id === G, c = a === e.lessons.length - 1, l = A[n.type];
+												return /* @__PURE__ */ D("li", {
+													className: "flex gap-3",
+													children: [/* @__PURE__ */ D("div", {
+														className: "flex flex-col items-center pt-1.5",
+														children: [o ? /* @__PURE__ */ E("span", {
+															className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--color-status-success-text)]",
+															children: /* @__PURE__ */ E(g, { className: "h-3.5 w-3.5 text-status-success-bg-subtle" })
+														}) : s ? /* @__PURE__ */ E("span", {
+															className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--color-accent-soft)] ring-2 ring-[var(--color-accent-teal)]",
+															children: /* @__PURE__ */ E(l, { className: "h-3.5 w-3.5 text-[var(--color-accent-teal)]" })
+														}) : /* @__PURE__ */ E("span", {
+															className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-border-seam bg-bg-sunken",
+															children: /* @__PURE__ */ E(l, { className: "h-3.5 w-3.5 text-text-secondary opacity-70" })
+														}), !c && /* @__PURE__ */ E("span", { className: t("my-1 w-px flex-1", o ? "bg-[color-mix(in_srgb,var(--color-status-success-text)_45%,transparent)]" : "bg-border-seam") })]
+													}), /* @__PURE__ */ D("button", {
+														type: "button",
+														onClick: () => X(n.id),
+														className: t("mb-1 min-w-0 flex-1 rounded-lg px-3 py-2 text-left transition-colors", s ? "bg-[var(--color-accent-soft)]" : "hover:bg-bg-sunken"),
+														"aria-current": s ? "true" : void 0,
+														children: [/* @__PURE__ */ E("span", {
+															className: t("block truncate text-sm", s ? "font-medium text-text-primary" : o ? "text-text-secondary" : "text-text-primary"),
+															children: n.title
+														}), /* @__PURE__ */ D("span", {
+															className: "mt-0.5 block truncate text-xs text-text-secondary",
+															children: [i(n.type), n.durationMin > 0 ? ` · ${r(n.durationMin)}` : ""]
+														})]
+													})]
+												}, n.id);
+											})
+										})]
+									}, e.id);
+								})
+							}), T && /* @__PURE__ */ E("div", {
+								className: "border-t border-border-seam p-3",
+								children: /* @__PURE__ */ D(O, {
+									variant: "outline",
+									size: "sm",
+									className: "w-full",
+									onClick: () => S(`catalog/${T}`),
+									children: [/* @__PURE__ */ E(h, { className: "mr-1.5 h-4 w-4" }), " Course overview"]
+								})
+							})] })
 						})
-					}), /* @__PURE__ */ C("main", {
+					}), /* @__PURE__ */ E("main", {
 						className: "min-w-0 flex-1",
-						children: J ? /* @__PURE__ */ w(E, {
+						children: q ? /* @__PURE__ */ D(k, {
 							treatment: "plain",
-							className: "flex flex-col gap-4 p-5 sm:p-6",
+							className: "flex flex-col gap-4 p-5 sm:p-7",
 							children: [
-								/* @__PURE__ */ w("div", {
+								/* @__PURE__ */ D("div", {
 									className: "flex flex-wrap items-center gap-2",
 									children: [
-										/* @__PURE__ */ C(i, { status: J.type }),
-										J.durationMin > 0 && /* @__PURE__ */ C("span", {
+										/* @__PURE__ */ D("span", {
+											className: "inline-flex items-center gap-1.5 rounded-full bg-[var(--color-accent-soft)] px-2.5 py-1 text-xs font-medium text-text-primary",
+											children: [/* @__PURE__ */ E(ge, { className: "h-3.5 w-3.5 text-[var(--color-accent-teal)]" }), i(q.type)]
+										}),
+										q.durationMin > 0 && /* @__PURE__ */ E("span", {
 											className: "text-xs text-text-secondary",
-											children: r(J.durationMin)
+											children: r(q.durationMin)
 										}),
-										Y && /* @__PURE__ */ w("span", {
+										J && /* @__PURE__ */ D("span", {
 											className: "inline-flex items-center gap-1 text-xs font-medium text-status-success-text",
-											children: [/* @__PURE__ */ C(v, { className: "h-3.5 w-3.5" }), " Completed"]
+											children: [/* @__PURE__ */ E(_, { className: "h-3.5 w-3.5" }), " Completed"]
+										}),
+										/* @__PURE__ */ D("span", {
+											className: "ml-auto text-xs tabular-nums text-text-secondary",
+											children: [
+												"Lesson ",
+												K + 1,
+												" of ",
+												U.length
+											]
 										})
 									]
 								}),
-								/* @__PURE__ */ C("h2", {
-									className: "text-xl font-semibold text-text-primary",
-									children: J.title
+								/* @__PURE__ */ E("h2", {
+									className: "text-2xl font-semibold tracking-tight text-text-primary",
+									children: q.title
 								}),
-								J.media ? /* @__PURE__ */ C("div", {
+								q.media ? /* @__PURE__ */ D("div", {
 									className: "rounded-xl border border-border-seam bg-bg-sunken p-3",
-									children: /* @__PURE__ */ C(f, { fileId: J.media.id })
+									children: [/* @__PURE__ */ E("p", {
+										className: "mb-2 text-xs font-semibold uppercase tracking-wide text-text-secondary",
+										children: "Resources"
+									}), /* @__PURE__ */ E(d, { fileId: q.media.id })]
 								}) : null,
-								J.content ? /* @__PURE__ */ C("p", {
-									className: "whitespace-pre-wrap text-sm leading-relaxed text-text-primary",
-									children: J.content
-								}) : /* @__PURE__ */ w("p", {
+								q.content ? /* @__PURE__ */ E("p", {
+									className: "max-w-prose whitespace-pre-wrap text-[15px] leading-7 text-text-primary",
+									children: q.content
+								}) : /* @__PURE__ */ D("p", {
 									className: "text-sm text-text-secondary",
 									children: [
 										"This lesson has no written content",
-										J.media ? " beyond the attached media" : "",
+										q.media ? " beyond the attached media" : "",
 										"."
 									]
 								}),
-								/* @__PURE__ */ w("div", {
-									className: "mt-2 flex flex-col gap-3 border-t border-border-seam pt-4 sm:flex-row sm:items-center sm:justify-between",
-									children: [/* @__PURE__ */ w("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ w(T, {
-											variant: "secondary",
+								/* @__PURE__ */ D("div", {
+									className: "mt-2 flex flex-col gap-3 border-t border-border-seam pt-5 sm:flex-row sm:items-center sm:justify-between",
+									children: [
+										/* @__PURE__ */ D(O, {
+											variant: "outline",
 											size: "sm",
+											className: "max-sm:w-full",
 											onClick: () => Z(-1),
-											disabled: q <= 0,
-											children: [/* @__PURE__ */ C(y, { className: "mr-1 h-4 w-4" }), " Prev"]
-										}), /* @__PURE__ */ w(T, {
-											variant: "secondary",
+											disabled: K <= 0,
+											children: [/* @__PURE__ */ E(oe, { className: "mr-1 h-4 w-4" }), " Previous"]
+										}),
+										J ? /* @__PURE__ */ D("span", {
+											className: "inline-flex items-center justify-center gap-2 rounded-lg bg-status-success-bg-subtle px-4 py-2 text-sm font-medium text-status-success-text max-sm:w-full",
+											children: [/* @__PURE__ */ E(_, { className: "h-4 w-4" }), " Lesson complete"]
+										}) : /* @__PURE__ */ D(O, {
+											size: "lg",
+											className: "max-sm:w-full",
+											onClick: pe,
+											disabled: P.isPending,
+											children: [P.isPending ? /* @__PURE__ */ E(x, { className: "mr-1.5 h-4 w-4 animate-spin" }) : /* @__PURE__ */ E(_, { className: "mr-1.5 h-4 w-4" }), "Mark complete"]
+										}),
+										/* @__PURE__ */ D(O, {
+											variant: "outline",
 											size: "sm",
+											className: "max-sm:w-full",
 											onClick: () => Z(1),
-											disabled: q >= W.length - 1,
-											children: ["Next ", /* @__PURE__ */ C(te, { className: "ml-1 h-4 w-4" })]
-										})]
-									}), !Y && /* @__PURE__ */ w(T, {
-										size: "sm",
-										className: "max-sm:w-full",
-										onClick: oe,
-										disabled: F.isPending,
-										children: [F.isPending ? /* @__PURE__ */ C(S, { className: "mr-1 h-4 w-4 animate-spin" }) : /* @__PURE__ */ C(v, { className: "mr-1 h-4 w-4" }), "Mark complete"]
-									})]
+											disabled: K >= U.length - 1,
+											children: ["Next ", /* @__PURE__ */ E(se, { className: "ml-1 h-4 w-4" })]
+										})
+									]
 								})
 							]
-						}) : /* @__PURE__ */ C(a, {
+						}) : /* @__PURE__ */ E(o, {
 							illustration: "empty-data",
 							title: "No lesson to show",
 							description: "This course doesn't have any lessons yet. Check back once the author adds content."
@@ -298,6 +361,6 @@ var D = (e) => [...e].sort((e, t) => e.position - t.position), O = () => {
 	});
 };
 //#endregion
-export { O as LessonPlayerPage };
+export { M as LessonPlayerPage };
 
 //# sourceMappingURL=LessonPlayerPage.js.map