@burdenoff/microfe-crewfoundry 2026.704.5 → 2026.704.7

package/dist/crewfoundry/pages/LearningLearningPathDetailPagePage.js

@@ -1,187 +1,190 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
-import { useState as n } from "react";
-import { BookOpen as r, CheckCircle as i, Clock as a, Star as o, Users as s } from "lucide-react";
-import { useSearchParams as c } from "react-router-dom";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Badge as d, Button as f, Card as p, CardContent as m, EmphasisPanel as h, GradientText as g, IllustratedEmptyState as _, PagePurpose as v } from "@burdenoff/fe-libs/ui";
-import { useGlobalUi as y } from "@burdenoff/fe-libs/shared/providers/shell";
+import { ProgressRing as n } from "../components/viz/ProgressRing.js";
+import { PathSteps as r } from "../components/viz/PathSteps.js";
+import { RatingStars as i } from "../components/viz/RatingStars.js";
+import "../components/viz/index.js";
+import { useState as a } from "react";
+import { BookOpen as o, Check as s, ChevronRight as c, Clock as l, Users as u } from "lucide-react";
+import { useNavigate as d, useSearchParams as f } from "react-router-dom";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Badge as h, Button as g, Card as _, CardContent as v, EmphasisPanel as y, GradientText as b, IllustratedEmptyState as x, PagePurpose as S, Spinner as C } from "@burdenoff/fe-libs/ui";
+import { useGlobalUi as w } from "@burdenoff/fe-libs/shared/providers/shell";
 //#region src/crewfoundry/pages/LearningLearningPathDetailPagePage.tsx
-function b() {
-	let [b] = c(), { learningPaths: x, courses: S, enrollCourse: C } = e(), { showToast: w } = y(), [T, E] = n(!1), D = b.get("id"), O = D ? x.find((e) => e.id === D) : x[0];
-	if (!O) return /* @__PURE__ */ l("div", {
+function T() {
+	let [T] = f(), E = d(), { learningPaths: D, courses: O, enrollCourse: k, initialized: A } = e(), { showToast: j } = w(), [M, N] = a(!1), P = T.get("id"), F = P ? D.find((e) => e.id === P) : D[0];
+	if (!A && !F) return /* @__PURE__ */ p("div", {
+		className: "flex min-h-[60vh] items-center justify-center p-6",
+		children: /* @__PURE__ */ p(C, { size: "lg" })
+	});
+	if (!F) return /* @__PURE__ */ p("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ l(_, {
+		children: /* @__PURE__ */ p(x, {
 			illustration: "empty-search",
 			title: "No learning path found",
 			description: "This learning path is no longer available."
 		})
 	});
-	let k = S.filter((e) => O.courses.includes(e.id));
-	return /* @__PURE__ */ u("div", {
-		className: "space-y-6 p-6 max-w-4xl",
+	let I = O.filter((e) => F.courses.includes(e.id)), L = Math.round(F.completionRate / 100 * I.length), R = I.map((e, t) => ({
+		label: e.title,
+		state: t < L ? "done" : t === L ? "active" : "todo"
+	})), z = (e) => E(`../learning/course-learning-page?id=${encodeURIComponent(e)}`);
+	return /* @__PURE__ */ m("div", {
+		className: "max-w-5xl space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ u("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ u("div", { children: [
-					/* @__PURE__ */ l("h1", {
+			/* @__PURE__ */ m("div", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ m("div", { children: [
+					/* @__PURE__ */ p("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ l(g, { children: O.title })
+						children: /* @__PURE__ */ p(b, { children: F.title })
 					}),
-					/* @__PURE__ */ l("p", {
+					/* @__PURE__ */ p("p", {
 						className: "text-sm text-text-secondary",
-						children: O.description
+						children: F.description
 					}),
-					/* @__PURE__ */ l(v, {
+					/* @__PURE__ */ p(S, {
 						className: "mt-1",
 						children: "Follow a single learning path end-to-end — see its courses, your progress, and what to complete next to finish the journey."
 					})
-				] }), /* @__PURE__ */ l(f, {
+				] }), /* @__PURE__ */ p(g, {
 					onClick: async () => {
-						if (k.length === 0) {
-							w("No courses in this path yet", "warning");
+						if (I.length === 0) {
+							j("No courses in this path yet", "warning");
 							return;
 						}
-						E(!0);
+						N(!0);
 						try {
-							for (let e of k) await C(e.id);
-							w(`Enrolled in ${k.length} course${k.length > 1 ? "s" : ""}`, "success");
+							for (let e of I) await k(e.id);
+							j(`Enrolled in ${I.length} course${I.length > 1 ? "s" : ""}`, "success");
 						} catch (e) {
-							w(e instanceof Error ? e.message : "Unable to enroll in path", "error");
+							j(e instanceof Error ? e.message : "Unable to enroll in path", "error");
 						} finally {
-							E(!1);
+							N(!1);
 						}
 					},
-					disabled: T,
-					children: T ? "Enrolling…" : "Enroll Now"
+					disabled: M,
+					children: M ? "Enrolling…" : "Enroll Now"
 				})]
 			}),
-			/* @__PURE__ */ u("div", {
-				className: "grid gap-4 md:grid-cols-4",
-				children: [
-					/* @__PURE__ */ l(p, { children: /* @__PURE__ */ u(m, {
-						className: "p-4 text-center",
+			/* @__PURE__ */ p(_, { children: /* @__PURE__ */ m(v, {
+				className: "grid gap-6 p-5 md:grid-cols-[auto_minmax(0,1fr)] md:items-center",
+				children: [/* @__PURE__ */ p("div", {
+					className: "flex items-center justify-center",
+					children: /* @__PURE__ */ p(n, {
+						value: F.completionRate,
+						caption: "complete",
+						label: `${F.completionRate}%`
+					})
+				}), /* @__PURE__ */ m("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ m("div", {
+						className: "flex flex-wrap gap-2",
 						children: [
-							/* @__PURE__ */ l(r, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ l("p", {
-								className: "text-lg font-bold",
-								children: O.courses.length
+							/* @__PURE__ */ p(h, {
+								variant: "secondary",
+								className: "text-[10px]",
+								children: t(F.level)
 							}),
-							/* @__PURE__ */ l("p", {
-								className: "text-xs text-text-secondary",
-								children: "Courses"
-							})
-						]
-					}) }),
-					/* @__PURE__ */ l(p, { children: /* @__PURE__ */ u(m, {
-						className: "p-4 text-center",
-						children: [
-							/* @__PURE__ */ l(a, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ l("p", {
-								className: "text-lg font-bold",
-								children: O.duration
+							/* @__PURE__ */ m(h, {
+								variant: "outline",
+								className: "inline-flex items-center gap-1 text-[10px]",
+								children: [/* @__PURE__ */ p(l, { className: "h-3 w-3" }), F.duration]
 							}),
-							/* @__PURE__ */ l("p", {
-								className: "text-xs text-text-secondary",
-								children: "Duration"
-							})
-						]
-					}) }),
-					/* @__PURE__ */ l(p, { children: /* @__PURE__ */ u(m, {
-						className: "p-4 text-center",
-						children: [
-							/* @__PURE__ */ l(s, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ l("p", {
-								className: "text-lg font-bold",
-								children: O.enrolled
-							}),
-							/* @__PURE__ */ l("p", {
-								className: "text-xs text-text-secondary",
-								children: "Enrolled"
-							})
-						]
-					}) }),
-					/* @__PURE__ */ l(p, { children: /* @__PURE__ */ u(m, {
-						className: "p-4 text-center",
-						children: [
-							/* @__PURE__ */ l(i, { className: "h-5 w-5 mx-auto text-status-success-text mb-1" }),
-							/* @__PURE__ */ u("p", {
-								className: "text-lg font-bold",
-								children: [O.completionRate, "%"]
+							/* @__PURE__ */ m(h, {
+								variant: "outline",
+								className: "inline-flex items-center gap-1 text-[10px]",
+								children: [
+									/* @__PURE__ */ p(o, { className: "h-3 w-3" }),
+									I.length,
+									" courses"
+								]
 							}),
-							/* @__PURE__ */ l("p", {
-								className: "text-xs text-text-secondary",
-								children: "Completion"
+							/* @__PURE__ */ m(h, {
+								variant: "outline",
+								className: "inline-flex items-center gap-1 text-[10px]",
+								children: [
+									/* @__PURE__ */ p(u, { className: "h-3 w-3" }),
+									F.enrolled,
+									" enrolled"
+								]
 							})
 						]
-					}) })
-				]
-			}),
-			/* @__PURE__ */ u(h, { children: [
-				/* @__PURE__ */ l("div", {
+					}), R.length > 0 ? /* @__PURE__ */ p(r, { steps: R }) : /* @__PURE__ */ p("p", {
+						className: "text-sm text-text-secondary",
+						children: "No courses have been added to this path yet."
+					})]
+				})]
+			}) }),
+			/* @__PURE__ */ m(y, { children: [
+				/* @__PURE__ */ p("div", {
 					className: "text-lg font-semibold",
 					children: "Courses in this Path"
 				}),
-				/* @__PURE__ */ u("p", {
+				/* @__PURE__ */ m("p", {
 					className: "mb-4 text-sm text-text-secondary",
 					children: [
-						k.length,
+						I.length,
 						" courses · ",
-						O.level
+						t(F.level)
 					]
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ p("div", {
 					className: "space-y-3",
-					children: k.length === 0 ? /* @__PURE__ */ l(_, {
+					children: I.length === 0 ? /* @__PURE__ */ p(x, {
 						illustration: "empty-generic",
 						title: "No courses in this path yet",
 						description: "Courses added to this path will appear here in order."
-					}) : k.map((e, n) => /* @__PURE__ */ u("div", {
-						className: "flex items-center gap-3 rounded border p-4",
-						children: [
-							/* @__PURE__ */ l("div", {
-								className: "flex-shrink-0 w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center text-sm font-bold",
-								children: n + 1
-							}),
-							/* @__PURE__ */ u("div", {
-								className: "flex-1",
-								children: [/* @__PURE__ */ l("p", {
-									className: "text-sm font-medium",
-									children: e.title
-								}), /* @__PURE__ */ u("p", {
-									className: "text-xs text-text-secondary",
-									children: [
-										e.instructor,
-										" · ",
-										e.duration,
-										" · ",
-										e.modules,
-										" modules"
-									]
-								})]
-							}),
-							/* @__PURE__ */ u("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ u("div", {
-									className: "flex items-center gap-1",
-									children: [/* @__PURE__ */ l(o, { className: "h-3 w-3 text-status-warning-text" }), /* @__PURE__ */ l("span", {
-										className: "text-sm",
-										children: e.rating
+					}) : I.map((e, n) => {
+						let r = n < L;
+						return /* @__PURE__ */ m("button", {
+							type: "button",
+							onClick: () => z(e.id),
+							className: "flex w-full items-center gap-3 rounded-lg border border-border-subtle p-4 text-left transition-colors hover:border-border-strong hover:bg-bg-sunken",
+							children: [
+								/* @__PURE__ */ p("span", {
+									className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold ${r ? "border-transparent bg-status-success-bg text-status-success-text" : n === L ? "border-action-primary-bg text-action-primary-bg" : "border-border-default text-text-secondary"}`,
+									children: r ? /* @__PURE__ */ p(s, { className: "h-4 w-4" }) : n + 1
+								}),
+								/* @__PURE__ */ m("div", {
+									className: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ p("p", {
+										className: "truncate text-sm font-medium",
+										children: e.title
+									}), /* @__PURE__ */ m("p", {
+										className: "truncate text-xs text-text-secondary",
+										children: [
+											e.instructor,
+											" · ",
+											e.duration,
+											" · ",
+											e.modules,
+											" modules"
+										]
 									})]
-								}), /* @__PURE__ */ l(d, {
-									variant: e.level === "beginner" ? "secondary" : e.level === "intermediate" ? "default" : "destructive",
-									className: "text-[10px]",
-									children: t(e.level)
-								})]
-							})
-						]
-					}, e.id))
+								}),
+								/* @__PURE__ */ m("div", {
+									className: "hidden items-center gap-3 sm:flex",
+									children: [/* @__PURE__ */ p(i, {
+										value: e.rating,
+										size: 13,
+										showValue: !0
+									}), /* @__PURE__ */ p(h, {
+										variant: e.level === "beginner" ? "secondary" : e.level === "intermediate" ? "default" : "destructive",
+										className: "text-[10px]",
+										children: t(e.level)
+									})]
+								}),
+								/* @__PURE__ */ p(c, { className: "h-4 w-4 shrink-0 text-text-muted" })
+							]
+						}, e.id);
+					})
 				})
 			] })
 		]
 	});
 }
 //#endregion
-export { b as LearningLearningPathDetailPagePage };
+export { T as LearningLearningPathDetailPagePage };
 
 //# sourceMappingURL=LearningLearningPathDetailPagePage.js.map

package/dist/crewfoundry/pages/LearningLearningPathDetailPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LearningLearningPathDetailPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningLearningPathDetailPagePage.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  EmphasisPanel,\n  GradientText,\n  IllustratedEmptyState,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { BookOpen, CheckCircle, Clock, Star, Users } from 'lucide-react';\nimport { useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { useGlobalUi } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nexport function LearningLearningPathDetailPagePage() {\n  const [searchParams] = useSearchParams();\n  const { learningPaths, courses, enrollCourse } = useCrewFoundryStore();\n  const { showToast } = useGlobalUi();\n  const [enrolling, setEnrolling] = useState(false);\n  const pathId = searchParams.get('id');\n  const path = pathId ? learningPaths.find((p) => p.id === pathId) : learningPaths[0];\n  if (!path)\n    return (\n      <div className=\"p-6\">\n        <IllustratedEmptyState\n          illustration=\"empty-search\"\n          title=\"No learning path found\"\n          description=\"This learning path is no longer available.\"\n        />\n      </div>\n    );\n  const pathCourses = courses.filter((c) => path.courses.includes(c.id));\n\n  const handleEnroll = async () => {\n    if (pathCourses.length === 0) {\n      showToast('No courses in this path yet', 'warning');\n      return;\n    }\n    setEnrolling(true);\n    try {\n      for (const course of pathCourses) {\n        await enrollCourse(course.id);\n      }\n      showToast(\n        `Enrolled in ${pathCourses.length} course${pathCourses.length > 1 ? 's' : ''}`,\n        'success'\n      );\n    } catch (error) {\n      showToast(error instanceof Error ? error.message : 'Unable to enroll in path', 'error');\n    } finally {\n      setEnrolling(false);\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-4xl\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>{path.title}</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">{path.description}</p>\n          <PagePurpose className=\"mt-1\">\n            Follow a single learning path end-to-end — see its courses, your progress, and what to\n            complete next to finish the journey.\n          </PagePurpose>\n        </div>\n        <Button onClick={handleEnroll} disabled={enrolling}>\n          {enrolling ? 'Enrolling…' : 'Enroll Now'}\n        </Button>\n      </div>\n      <div className=\"grid gap-4 md:grid-cols-4\">\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <BookOpen className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{path.courses.length}</p>\n            <p className=\"text-xs text-text-secondary\">Courses</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Clock className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{path.duration}</p>\n            <p className=\"text-xs text-text-secondary\">Duration</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <Users className=\"h-5 w-5 mx-auto text-text-secondary mb-1\" />\n            <p className=\"text-lg font-bold\">{path.enrolled}</p>\n            <p className=\"text-xs text-text-secondary\">Enrolled</p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"p-4 text-center\">\n            <CheckCircle className=\"h-5 w-5 mx-auto text-status-success-text mb-1\" />\n            <p className=\"text-lg font-bold\">{path.completionRate}%</p>\n            <p className=\"text-xs text-text-secondary\">Completion</p>\n          </CardContent>\n        </Card>\n      </div>\n      <EmphasisPanel>\n        <div className=\"text-lg font-semibold\">Courses in this Path</div>\n        <p className=\"mb-4 text-sm text-text-secondary\">\n          {pathCourses.length} courses · {path.level}\n        </p>\n        <div className=\"space-y-3\">\n          {pathCourses.length === 0 ? (\n            <IllustratedEmptyState\n              illustration=\"empty-generic\"\n              title=\"No courses in this path yet\"\n              description=\"Courses added to this path will appear here in order.\"\n            />\n          ) : (\n            pathCourses.map((course, idx) => (\n              <div key={course.id} className=\"flex items-center gap-3 rounded border p-4\">\n                <div className=\"flex-shrink-0 w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center text-sm font-bold\">\n                  {idx + 1}\n                </div>\n                <div className=\"flex-1\">\n                  <p className=\"text-sm font-medium\">{course.title}</p>\n                  <p className=\"text-xs text-text-secondary\">\n                    {course.instructor} · {course.duration} · {course.modules} modules\n                  </p>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"flex items-center gap-1\">\n                    <Star className=\"h-3 w-3 text-status-warning-text\" />\n                    <span className=\"text-sm\">{course.rating}</span>\n                  </div>\n                  <Badge\n                    variant={\n                      course.level === 'beginner'\n                        ? 'secondary'\n                        : course.level === 'intermediate'\n                          ? 'default'\n                          : 'destructive'\n                    }\n                    className=\"text-[10px]\"\n                  >\n                    {formatEnumLabel(course.level)}\n                  </Badge>\n                </div>\n              </div>\n            ))\n          )}\n        </div>\n      </EmphasisPanel>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"LearningLearningPathDetailPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/LearningLearningPathDetailPagePage.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  EmphasisPanel,\n  GradientText,\n  IllustratedEmptyState,\n  PagePurpose,\n  Spinner,\n} from '@burdenoff/fe-libs/ui';\nimport { BookOpen, Check, ChevronRight, Clock, Users } from 'lucide-react';\nimport { useState } from 'react';\nimport { useNavigate, useSearchParams } from 'react-router-dom';\nimport { useGlobalUi } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\nimport { PathSteps, ProgressRing, RatingStars, type PathStep } from '../components/viz';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nexport function LearningLearningPathDetailPagePage() {\n  const [searchParams] = useSearchParams();\n  const navigate = useNavigate();\n  const { learningPaths, courses, enrollCourse, initialized } = useCrewFoundryStore();\n  const { showToast } = useGlobalUi();\n  const [enrolling, setEnrolling] = useState(false);\n  const pathId = searchParams.get('id');\n  const path = pathId ? learningPaths.find((p) => p.id === pathId) : learningPaths[0];\n  if (!initialized && !path) {\n    return (\n      <div className=\"flex min-h-[60vh] items-center justify-center p-6\">\n        <Spinner size=\"lg\" />\n      </div>\n    );\n  }\n\n  if (!path)\n    return (\n      <div className=\"p-6\">\n        <IllustratedEmptyState\n          illustration=\"empty-search\"\n          title=\"No learning path found\"\n          description=\"This learning path is no longer available.\"\n        />\n      </div>\n    );\n  const pathCourses = courses.filter((c) => path.courses.includes(c.id));\n  const completedCount = Math.round((path.completionRate / 100) * pathCourses.length);\n  const steps: PathStep[] = pathCourses.map((c, i) => ({\n    label: c.title,\n    state: i < completedCount ? 'done' : i === completedCount ? 'active' : 'todo',\n  }));\n\n  const openPlayer = (id: string) =>\n    navigate(`../learning/course-learning-page?id=${encodeURIComponent(id)}`);\n\n  const handleEnroll = async () => {\n    if (pathCourses.length === 0) {\n      showToast('No courses in this path yet', 'warning');\n      return;\n    }\n    setEnrolling(true);\n    try {\n      for (const course of pathCourses) {\n        await enrollCourse(course.id);\n      }\n      showToast(\n        `Enrolled in ${pathCourses.length} course${pathCourses.length > 1 ? 's' : ''}`,\n        'success'\n      );\n    } catch (error) {\n      showToast(error instanceof Error ? error.message : 'Unable to enroll in path', 'error');\n    } finally {\n      setEnrolling(false);\n    }\n  };\n\n  return (\n    <div className=\"max-w-5xl space-y-6 p-6\">\n      <div className=\"flex flex-wrap items-start justify-between gap-3\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>{path.title}</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">{path.description}</p>\n          <PagePurpose className=\"mt-1\">\n            Follow a single learning path end-to-end — see its courses, your progress, and what to\n            complete next to finish the journey.\n          </PagePurpose>\n        </div>\n        <Button onClick={handleEnroll} disabled={enrolling}>\n          {enrolling ? 'Enrolling…' : 'Enroll Now'}\n        </Button>\n      </div>\n\n      {/* Overview: progress ring + timeline */}\n      <Card>\n        <CardContent className=\"grid gap-6 p-5 md:grid-cols-[auto_minmax(0,1fr)] md:items-center\">\n          <div className=\"flex items-center justify-center\">\n            <ProgressRing\n              value={path.completionRate}\n              caption=\"complete\"\n              label={`${path.completionRate}%`}\n            />\n          </div>\n          <div className=\"space-y-4\">\n            <div className=\"flex flex-wrap gap-2\">\n              <Badge variant=\"secondary\" className=\"text-[10px]\">\n                {formatEnumLabel(path.level)}\n              </Badge>\n              <Badge variant=\"outline\" className=\"inline-flex items-center gap-1 text-[10px]\">\n                <Clock className=\"h-3 w-3\" />\n                {path.duration}\n              </Badge>\n              <Badge variant=\"outline\" className=\"inline-flex items-center gap-1 text-[10px]\">\n                <BookOpen className=\"h-3 w-3\" />\n                {pathCourses.length} courses\n              </Badge>\n              <Badge variant=\"outline\" className=\"inline-flex items-center gap-1 text-[10px]\">\n                <Users className=\"h-3 w-3\" />\n                {path.enrolled} enrolled\n              </Badge>\n            </div>\n            {steps.length > 0 ? (\n              <PathSteps steps={steps} />\n            ) : (\n              <p className=\"text-sm text-text-secondary\">\n                No courses have been added to this path yet.\n              </p>\n            )}\n          </div>\n        </CardContent>\n      </Card>\n\n      <EmphasisPanel>\n        <div className=\"text-lg font-semibold\">Courses in this Path</div>\n        <p className=\"mb-4 text-sm text-text-secondary\">\n          {pathCourses.length} courses · {formatEnumLabel(path.level)}\n        </p>\n        <div className=\"space-y-3\">\n          {pathCourses.length === 0 ? (\n            <IllustratedEmptyState\n              illustration=\"empty-generic\"\n              title=\"No courses in this path yet\"\n              description=\"Courses added to this path will appear here in order.\"\n            />\n          ) : (\n            pathCourses.map((course, idx) => {\n              const done = idx < completedCount;\n              const isCurrent = idx === completedCount;\n              return (\n                <button\n                  key={course.id}\n                  type=\"button\"\n                  onClick={() => openPlayer(course.id)}\n                  className=\"flex w-full items-center gap-3 rounded-lg border border-border-subtle p-4 text-left transition-colors hover:border-border-strong hover:bg-bg-sunken\"\n                >\n                  <span\n                    className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold ${\n                      done\n                        ? 'border-transparent bg-status-success-bg text-status-success-text'\n                        : isCurrent\n                          ? 'border-action-primary-bg text-action-primary-bg'\n                          : 'border-border-default text-text-secondary'\n                    }`}\n                  >\n                    {done ? <Check className=\"h-4 w-4\" /> : idx + 1}\n                  </span>\n                  <div className=\"min-w-0 flex-1\">\n                    <p className=\"truncate text-sm font-medium\">{course.title}</p>\n                    <p className=\"truncate text-xs text-text-secondary\">\n                      {course.instructor} · {course.duration} · {course.modules} modules\n                    </p>\n                  </div>\n                  <div className=\"hidden items-center gap-3 sm:flex\">\n                    <RatingStars value={course.rating} size={13} showValue />\n                    <Badge\n                      variant={\n                        course.level === 'beginner'\n                          ? 'secondary'\n                          : course.level === 'intermediate'\n                            ? 'default'\n                            : 'destructive'\n                      }\n                      className=\"text-[10px]\"\n                    >\n                      {formatEnumLabel(course.level)}\n                    </Badge>\n                  </div>\n                  <ChevronRight className=\"h-4 w-4 shrink-0 text-text-muted\" />\n                </button>\n              );\n            })\n          )}\n        </div>\n      </EmphasisPanel>\n    </div>\n  );\n}\n"],"mappings":"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"}