@burdenoff/microfe-technospam 2026.1031.1 → 2026.1031.2

package/dist/technospam/pages/CoursesCourseDetailsPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesCourseDetailsPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCourseDetailsPagePage.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { useSearchParams } from 'react-router';\nimport {\n  ArrowRight,\n  Award,\n  BookOpen,\n  CheckCircle2,\n  ChevronDown,\n  Clock,\n  Eye,\n  FileText,\n  Lock,\n  PlayCircle,\n  Layers,\n  ShieldCheck,\n  Sparkles,\n  Trophy,\n  TrendingUp,\n  Users,\n  type LucideIcon,\n} from 'lucide-react';\nimport { Button, GlassCard, Skeleton } from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  MediaCover,\n  PageLayout,\n  PremiumBadge,\n  StatCard,\n  TagStrip,\n  UpgradeGate,\n  topicIcon,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  useCourseQuery,\n  useEnroll,\n  useIssueCertificate,\n  useMyCertificatesQuery,\n  type TecCertificate,\n  type TecLesson,\n  type TecEnrollment,\n} from '../api/technospamApi';\nimport { formatDate, formatDuration, humanizeEnum } from '../utils/format';\nimport { notify } from '../lib/toast';\nimport { cn } from '../utils/cn';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport { useFocusedRecordParam } from '../hooks/useFocusedRecordParam';\nimport { FOCUS_PARAMS } from '../utils/pageContext';\nimport { lessonPlayerPath } from '../utils/lessonPath';\n\n/** Per-lesson-kind icon + on-theme tint (chip) and pill (badge) classes. */\nconst KIND_META: Record<string, { icon: LucideIcon; chip: string; badge: string }> = {\n  VIDEO: {\n    icon: PlayCircle,\n    chip: 'bg-accent-primary/15 text-accent-primary',\n    badge: 'border-accent-primary/25 bg-accent-primary/10 text-accent-primary',\n  },\n  ARTICLE: {\n    icon: FileText,\n    chip: 'bg-accent-indigo/15 text-accent-indigo',\n    badge: 'border-accent-indigo/25 bg-accent-indigo/10 text-accent-indigo',\n  },\n  INTERACTIVE: {\n    icon: Sparkles,\n    chip: 'bg-accent-teal/15 text-accent-teal',\n    badge: 'border-accent-teal/25 bg-accent-teal/10 text-accent-teal',\n  },\n  QUIZ: {\n    icon: CheckCircle2,\n    chip: 'bg-accent-purple/15 text-accent-purple',\n    badge: 'border-accent-purple/25 bg-accent-purple/10 text-accent-purple',\n  },\n  PROJECT: {\n    icon: Layers,\n    chip: 'bg-status-warning-bg-subtle text-status-warning-text',\n    badge: 'border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text',\n  },\n};\n\nfunction HeroBadge({ icon: Icon, children }: { icon?: LucideIcon; children: ReactNode }) {\n  return (\n    <span className=\"inline-flex items-center gap-1 rounded-full bg-white/15 px-2.5 py-1 text-xs font-medium text-white ring-1 ring-white/25 backdrop-blur-sm\">\n      {Icon ? <Icon size={12} /> : null}\n      {children}\n    </span>\n  );\n}\n\n/**\n * One curriculum row. Expands in place to reveal the lesson body.\n *\n * `TecLesson.content` is the only lesson body this service exposes to a\n * learner, and the API nulls it server-side whenever `isLocked` is true\n * (BOFF-4416), so the three states below are exhaustive and never guessed:\n * locked → upgrade note, content present → the body, content null on an\n * unlocked lesson → the author simply hasn't written it yet.\n */\nfunction LessonRow({\n  lesson,\n  index,\n  done,\n  open,\n  onToggle,\n  onStart,\n}: {\n  lesson: TecLesson;\n  index: number;\n  done: boolean;\n  /** The open lesson is the focused one (`?lessonId=`), so the assistant can name it. */\n  open: boolean;\n  onToggle: () => void;\n  /** Opens the lesson in the lesson player (BOFF-4107). */\n  onStart: () => void;\n}) {\n  const meta = KIND_META[lesson.kind] ?? KIND_META.ARTICLE!;\n  const Icon = meta.icon;\n  const bodyId = `tec-lesson-body-${lesson.id}`;\n\n  return (\n    <div className=\"border-b border-border-seam last:border-b-0\">\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={bodyId}\n        className=\"group flex w-full items-center gap-3 rounded-xl px-2 py-3 text-left transition-colors hover:bg-bg-sunken/60\"\n      >\n        <span className=\"hidden w-6 shrink-0 text-center text-sm font-medium tabular-nums text-text-muted sm:block\">\n          {index + 1}\n        </span>\n        <span\n          className={cn(\n            'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg',\n            done ? 'bg-status-success-bg-subtle text-status-success-text' : meta.chip\n          )}\n        >\n          {done ? <CheckCircle2 size={17} /> : <Icon size={17} />}\n        </span>\n        <div className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-sm font-medium text-text-primary\">\n            {lesson.title}\n          </span>\n          <div className=\"mt-1 flex flex-wrap items-center gap-2\">\n            <span\n              className={cn(\n                'inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium',\n                meta.badge\n              )}\n            >\n              {humanizeEnum(lesson.kind)}\n            </span>\n            <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n              <Clock size={12} /> {formatDuration(lesson.estimatedMinutes)}\n            </span>\n          </div>\n        </div>\n        <div className=\"flex shrink-0 items-center gap-2\">\n          {done ? (\n            <CheckCircle2 size={18} className=\"text-status-success-text\" />\n          ) : lesson.isPreview ? (\n            <span className=\"inline-flex items-center gap-1 rounded-full border border-accent-primary/30 bg-accent-primary/10 px-2 py-0.5 text-[11px] font-medium text-accent-primary\">\n              <Eye size={12} /> Preview\n            </span>\n          ) : lesson.isLocked ? (\n            // BOFF-4416: distinct from the plain \"not completed yet\" Lock icon\n            // below — this lesson's content is gated behind a paid plan, not\n            // just not-yet-watched. The API already nulled `content`/`file`.\n            <span className=\"inline-flex items-center gap-1 rounded-full border border-status-warning-border/60 bg-status-warning-bg-subtle px-2 py-0.5 text-[11px] font-medium text-status-warning-text\">\n              <Lock size={12} /> Upgrade to unlock\n            </span>\n          ) : (\n            <Lock size={15} className=\"text-text-muted\" />\n          )}\n          <ChevronDown\n            size={16}\n            aria-hidden\n            className={cn(\n              'text-text-muted transition-transform duration-200',\n              open ? 'rotate-180' : ''\n            )}\n          />\n        </div>\n      </button>\n\n      {open ? (\n        <div id={bodyId} className=\"px-2 pb-4 sm:pl-11\">\n          {lesson.isLocked ? (\n            <UpgradeGate\n              compact\n              description=\"This lesson is part of a paid TechnoSpam plan — its content unlocks once your workspace upgrades.\"\n            />\n          ) : (\n            <div className=\"space-y-3\">\n              {lesson.content ? (\n                <div className=\"rounded-xl border border-border-seam bg-bg-sunken p-4\">\n                  <p className=\"line-clamp-6 whitespace-pre-wrap text-sm leading-relaxed text-text-secondary\">\n                    {lesson.content}\n                  </p>\n                </div>\n              ) : null}\n              <Button size=\"sm\" onClick={onStart} data-testid={`open-lesson-${lesson.id}`}>\n                <PlayCircle size={15} /> {done ? 'Review lesson' : 'Start lesson'}\n              </Button>\n            </div>\n          )}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Verifiable certificate face for an already-issued certificate. Every value\n * shown is a real field on the TecCertificate row (`serial`, `score`,\n * `issuedAt`, `status`) plus the course title it was issued against — the\n * learner name comes from the signed-in actor the shell handed us, and is\n * simply omitted when the shell did not supply one.\n */\nfunction CertificatePreview({\n  certificate,\n  learnerName,\n  courseTitle,\n}: {\n  certificate: TecCertificate;\n  learnerName?: string;\n  courseTitle: string;\n}) {\n  const revoked = certificate.status === 'REVOKED';\n  return (\n    <GlassCard className=\"overflow-hidden p-0\">\n      <div className=\"border-b border-border-seam px-5 py-3\">\n        <span className=\"text-xs font-semibold uppercase tracking-wide text-text-muted\">\n          Certificate preview\n        </span>\n      </div>\n      <div className=\"space-y-4 bg-bg-sunken/50 px-5 py-6 text-center\">\n        <div className=\"flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-text-muted\">\n          <Award size={14} className=\"text-status-warning-text\" /> Certificate of completion\n        </div>\n        <h3 className=\"text-lg font-bold text-text-primary\">{courseTitle}</h3>\n        {learnerName ? (\n          <p className=\"text-sm text-text-secondary\">\n            Awarded to <span className=\"font-semibold text-text-primary\">{learnerName}</span>\n          </p>\n        ) : null}\n        <div className=\"grid grid-cols-1 gap-3 border-t border-border-seam pt-4 text-left sm:grid-cols-3\">\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Serial number\n            </div>\n            <div className=\"truncate font-mono text-sm text-text-primary\">{certificate.serial}</div>\n          </div>\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Score\n            </div>\n            <div className=\"text-sm font-semibold text-text-primary\">{certificate.score}</div>\n          </div>\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Issued on\n            </div>\n            <div className=\"text-sm text-text-primary\">{formatDate(certificate.issuedAt)}</div>\n          </div>\n        </div>\n        {revoked ? (\n          <div className=\"rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-left text-xs text-status-error-text\">\n            This certificate was revoked\n            {certificate.revokedAt ? ` on ${formatDate(certificate.revokedAt)}` : ''}\n            {certificate.revokeReason ? ` — ${certificate.revokeReason}` : '.'}\n          </div>\n        ) : (\n          <span className=\"inline-flex items-center gap-1 rounded-full border border-status-success-border bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text\">\n            <ShieldCheck size={13} /> Verified\n          </span>\n        )}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCourseDetailsPagePage() {\n  const [params] = useSearchParams();\n  const id = params.get('id') ?? '';\n  // The expanded lesson lives in `?lessonId=` so the assistant's page context\n  // names it (\"explain this lesson\") and a reload reopens it.\n  const [openLessonId, setOpenLessonId] = useFocusedRecordParam(FOCUS_PARAMS.lesson);\n  const { currentUser, workspaceId } = useTechnoSpam();\n  const navigate = useTechnoSpamNavigate();\n  const { emit } = useTechnoSpamAnalytics();\n  const { data, loading, error, refetch } = useCourseQuery(id);\n\n  useEffect(() => {\n    if (id) {\n      emit('technospam.course.viewed', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_COURSE',\n      });\n    }\n  }, [id, workspaceId, emit]);\n\n  const [enroll, { loading: enrolling }] = useEnroll();\n  // Self-scoped read: `tecMyCertificates` filters by the authenticated actor\n  // server-side. `tecListCertificates` (the previous call) is gated behind the\n  // cross-learner \"list-all\" action, which a plain learner does not hold — so\n  // an already-claimed certificate came back empty and the page kept offering\n  // \"Claim certificate\" instead of showing it.\n  const { data: certData, refetch: refetchCerts } = useMyCertificatesQuery(\n    id ? { courseId: id } : {}\n  );\n  const [issueCertificate, { loading: claiming }] = useIssueCertificate();\n\n  const course = data?.tecCourse ?? null;\n  const lessons = [...(course?.lessons ?? [])].sort((a, b) => a.position - b.position);\n  const myEnrollment: TecEnrollment | undefined = (course?.enrollments ?? []).find(\n    (e) => e.learnerId === currentUser?.id\n  );\n  const myCertificates = certData?.tecMyCertificates ?? [];\n  const myCertificate = myCertificates.find((c) => c.status === 'ISSUED') ?? myCertificates[0];\n  const isComplete = !!myEnrollment && myEnrollment.progressPct >= 100;\n\n  const handleClaimCertificate = async () => {\n    if (!id || !currentUser?.id) return;\n    emit('technospam.course.certificate_claimed', {\n      workspaceId,\n      entityId: id,\n      entityType: 'TEC_COURSE',\n    });\n    const res = await issueCertificate({\n      variables: { courseId: id, learnerId: currentUser.id, score: 100 },\n    });\n    if (res.data?.tecIssueCertificate) {\n      notify.success('Certificate issued', 'Your verifiable certificate is ready in My Learning.');\n      await refetchCerts();\n    }\n  };\n\n  const handleEnroll = async () => {\n    if (!id) return;\n    emit('technospam.course.enroll_clicked', {\n      workspaceId,\n      entityId: id,\n      entityType: 'TEC_COURSE',\n    });\n    const res = await enroll({ variables: { input: { courseId: id } } });\n    if (res.data?.tecEnroll) {\n      emit('technospam.course.enrolled', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_COURSE',\n      });\n      notify.success('Enrolled', `You're enrolled in \"${course?.title}\".`);\n      await refetch();\n    }\n  };\n\n  if (loading && !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        <Skeleton className=\"mb-4 h-40 w-full rounded-2xl\" />\n        <Skeleton className=\"h-64 w-full rounded-xl\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        {error ? (\n          <ErrorView title=\"Couldn't load course\" error={error} />\n        ) : (\n          <EmptyView\n            title=\"Course not found\"\n            description=\"This course may have been unpublished.\"\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  const completedLessons = myEnrollment?.lessonsCompleted ?? 0;\n  // BOFF-4107: \"Continue\" lands on the first lesson the learner has not\n  // finished (per-lesson completions from the API), or the first lesson to\n  // review once everything is done.\n  const nextLesson = lessons.find((l) => !l.completedByMe) ?? lessons[0];\n  const allDone = lessons.length > 0 && lessons.every((l) => l.completedByMe);\n  const openLesson = (lessonId: string) => navigate(lessonPlayerPath(id, lessonId));\n  const remaining = Math.max(0, lessons.length - completedLessons);\n  const milestone =\n    myEnrollment && myEnrollment.progressPct >= 100\n      ? 'Course complete — claim your certificate below.'\n      : remaining === 1\n        ? '1 lesson to go — almost there!'\n        : `${remaining} lessons to go — keep it up!`;\n  const heroSeed = `${course.topic ?? ''} ${course.title}`;\n\n  return (\n    <PageLayout\n      backPath=\"/courses/courses-page\"\n      title={course.title}\n      description={course.summary ?? undefined}\n      actions={\n        myEnrollment ? (\n          nextLesson ? (\n            <Button onClick={() => openLesson(nextLesson.id)} data-testid=\"continue-learning\">\n              {allDone ? <CheckCircle2 size={16} /> : <ArrowRight size={16} />}\n              {allDone\n                ? 'Review course'\n                : completedLessons > 0\n                  ? 'Continue learning'\n                  : 'Start course'}\n            </Button>\n          ) : null\n        ) : (\n          <Button onClick={handleEnroll} disabled={enrolling}>\n            <BookOpen size={16} /> {enrolling ? 'Enrolling…' : 'Enroll'}\n          </Button>\n        )\n      }\n    >\n      {/* Bold hero banner */}\n      <MediaCover\n        height=\"h-40\"\n        seed={heroSeed}\n        icon={topicIcon(course.topic ?? course.title)}\n        className=\"mb-5 rounded-2xl\"\n      >\n        <div className=\"flex w-full flex-col gap-2\">\n          <span className=\"text-xs font-medium uppercase tracking-wide text-white/80\">\n            {course.topic ?? 'Course'}\n          </span>\n          <h2 className=\"text-2xl font-bold leading-tight text-white drop-shadow-sm sm:text-3xl\">\n            {course.title}\n          </h2>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <HeroBadge icon={TrendingUp}>{humanizeEnum(course.level)}</HeroBadge>\n            <HeroBadge icon={CheckCircle2}>{humanizeEnum(course.status)}</HeroBadge>\n            {course.topic ? <HeroBadge icon={Layers}>{course.topic}</HeroBadge> : null}\n            {course.isPremiumOnly ? <HeroBadge icon={Lock}>Premium</HeroBadge> : null}\n          </div>\n        </div>\n      </MediaCover>\n\n      <TagStrip tags={course.tags} className=\"mb-5\" />\n\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Lessons\" value={lessons.length} icon={FileText} tone=\"blue\" />\n        <StatCard\n          label=\"Duration\"\n          value={formatDuration(course.estimatedMinutes)}\n          icon={Clock}\n          tone=\"teal\"\n        />\n        <StatCard\n          label=\"Enrolled\"\n          value={course.enrollments?.length ?? 0}\n          icon={Users}\n          tone=\"indigo\"\n        />\n        <StatCard\n          label=\"Your progress\"\n          value={myEnrollment ? `${myEnrollment.progressPct}%` : 'Not started'}\n          icon={TrendingUp}\n          tone=\"purple\"\n        />\n      </div>\n\n      {myEnrollment ? (\n        <GlassCard className=\"mb-6 p-5\">\n          <div className=\"mb-3 flex items-center gap-2\">\n            <span className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-accent-primary/15 text-accent-primary\">\n              <TrendingUp size={16} />\n            </span>\n            <span className=\"text-sm font-semibold text-text-primary\">Your progress</span>\n            <span className=\"ml-auto text-sm text-text-secondary\">\n              {completedLessons}/{lessons.length} lessons · {myEnrollment.progressPct}%\n            </span>\n          </div>\n          <div className=\"h-2.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n            <div\n              className=\"h-full rounded-full bg-gradient-to-r from-accent-primary via-accent-indigo to-accent-purple transition-all duration-500\"\n              style={{ width: `${myEnrollment.progressPct}%` }}\n            />\n          </div>\n          <p className=\"mt-2 text-xs text-text-muted\">{milestone}</p>\n        </GlassCard>\n      ) : null}\n\n      {myCertificate ? (\n        <div className=\"mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2\">\n          <GlassCard\n            className={cn(\n              'flex items-center gap-4 border p-5',\n              myCertificate.status === 'REVOKED'\n                ? 'border-status-error-border/60 bg-status-error-bg-subtle/20'\n                : 'border-status-success-border/60 bg-status-success-bg-subtle/30'\n            )}\n          >\n            <span className=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40\">\n              <Trophy size={26} />\n            </span>\n            <div className=\"min-w-0\">\n              <div className=\"text-base font-semibold text-text-primary\">\n                {myCertificate.status === 'REVOKED'\n                  ? 'Your certificate was revoked'\n                  : 'You finished this course'}\n              </div>\n              <div className=\"text-sm text-text-muted\">\n                {myCertificate.status === 'REVOKED'\n                  ? 'Contact a workspace admin if you believe this was a mistake.'\n                  : 'Your verifiable certificate of completion is issued — it also appears in My Learning.'}\n              </div>\n            </div>\n          </GlassCard>\n          <CertificatePreview\n            certificate={myCertificate}\n            learnerName={currentUser?.name ?? undefined}\n            courseTitle={myCertificate.course?.title ?? course.title}\n          />\n        </div>\n      ) : isComplete ? (\n        <GlassCard className=\"mb-6 flex flex-col items-start gap-4 border border-status-success-border/60 bg-status-success-bg-subtle/40 p-5 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-4\">\n            <span className=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40\">\n              <Trophy size={26} />\n            </span>\n            <div>\n              <div className=\"text-base font-semibold text-text-primary\">\n                You finished this course\n              </div>\n              <div className=\"text-sm text-text-muted\">\n                Claim your verifiable certificate of completion.\n              </div>\n            </div>\n          </div>\n          <Button onClick={handleClaimCertificate} disabled={claiming}>\n            <Award size={16} /> {claiming ? 'Issuing…' : 'Claim certificate'}\n          </Button>\n        </GlassCard>\n      ) : null}\n\n      <GlassCard className=\"p-5\">\n        <div className=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 className=\"flex items-center gap-2 text-base font-semibold text-text-primary\">\n            <BookOpen size={18} className=\"text-accent-primary\" /> Curriculum\n            {course.isPremiumOnly ? <PremiumBadge locked={course.isLocked} /> : null}\n          </h2>\n          {lessons.length ? (\n            <span className=\"rounded-full bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text\">\n              {completedLessons}/{lessons.length} completed\n            </span>\n          ) : null}\n        </div>\n        {course.isLocked ? (\n          <div className=\"mb-4\">\n            <UpgradeGate\n              compact\n              description=\"This course is on a paid TechnoSpam plan. Preview lessons below stay free — the rest unlock once your workspace upgrades.\"\n            />\n          </div>\n        ) : null}\n        {lessons.length === 0 ? (\n          <p className=\"py-6 text-center text-sm text-text-muted\">\n            Lessons for this course are being prepared.\n          </p>\n        ) : (\n          <div className=\"flex flex-col\">\n            {lessons.map((lesson, i) => (\n              <LessonRow\n                key={lesson.id}\n                lesson={lesson}\n                index={i}\n                done={!!lesson.completedByMe}\n                open={openLessonId === lesson.id}\n                onToggle={() => setOpenLessonId(openLessonId === lesson.id ? null : lesson.id)}\n                onStart={() => openLesson(lesson.id)}\n              />\n            ))}\n          </div>\n        )}\n      </GlassCard>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqDA,IAAM,IAA+E;CACnF,OAAO;EACL,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACF;AAED,SAAS,EAAU,EAAE,MAAM,GAAM,eAAwD;AACvF,QACE,kBAAC,QAAD;EAAM,WAAU;YAAhB,CACG,IAAO,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,GAAG,MAC5B,EACI;;;AAaX,SAAS,GAAU,EACjB,WACA,UACA,SACA,SACA,aACA,cAUC;CACD,IAAM,IAAO,EAAU,EAAO,SAAS,EAAU,SAC3C,IAAO,EAAK,MACZ,IAAS,mBAAmB,EAAO;AAEzC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,iBAAe;GACf,iBAAe;GACf,WAAU;aALZ;IAOE,kBAAC,QAAD;KAAM,WAAU;eACb,IAAQ;KACJ,CAAA;IACP,kBAAC,QAAD;KACE,WAAW,EACT,gEACA,IAAO,yDAAyD,EAAK,KACtE;eAEO,EAAP,IAAQ,IAA6B,GAA9B,EAAc,MAAM,IAAM,CAAqB;KAClD,CAAA;IACP,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAO;MACH,CAAA,EACP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OACE,WAAW,EACT,oFACA,EAAK,MACN;iBAEA,EAAa,EAAO,KAAK;OACrB,CAAA,EACP,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACE,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;;QAAE,EAAe,EAAO,iBAAiB;QACvD;SACH;QACF;;IACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,IACC,kBAAC,GAAD;MAAc,MAAM;MAAI,WAAU;MAA6B,CAAA,GAC7D,EAAO,YACT,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA,EAAA,WACZ;UACL,EAAO,WAIT,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EAAA,qBACb;UAEP,kBAAC,GAAD;MAAM,MAAM;MAAI,WAAU;MAAoB,CAAA,EAEhD,kBAAC,GAAD;MACE,MAAM;MACN,eAAA;MACA,WAAW,EACT,qDACA,IAAO,eAAe,GACvB;MACD,CAAA,CACE;;IACC;MAER,IACC,kBAAC,OAAD;GAAK,IAAI;GAAQ,WAAU;aACxB,EAAO,WACN,kBAAC,GAAD;IACE,SAAA;IACA,aAAY;IACZ,CAAA,GAEF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAO,UACN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAO;MACN,CAAA;KACA,CAAA,GACJ,MACJ,kBAAC,GAAD;KAAQ,MAAK;KAAK,SAAS;KAAS,eAAa,eAAe,EAAO;eAAvE;MACE,kBAAC,GAAD,EAAY,MAAM,IAAM,CAAA;;MAAE,IAAO,kBAAkB;MAC5C;OACL;;GAEJ,CAAA,GACJ,KACA;;;AAWV,SAAS,GAAmB,EAC1B,gBACA,gBACA,kBAKC;CACD,IAAM,IAAU,EAAY,WAAW;AACvC,QACE,kBAAC,GAAD;EAAW,WAAU;YAArB,CACE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,QAAD;IAAM,WAAU;cAAgE;IAEzE,CAAA;GACH,CAAA,EACN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAO,MAAM;MAAI,WAAU;MAA6B,CAAA,EAAA,6BACpD;;IACN,kBAAC,MAAD;KAAI,WAAU;eAAuC;KAAiB,CAAA;IACrE,IACC,kBAAC,KAAD;KAAG,WAAU;eAAb,CAA2C,eAC9B,kBAAC,QAAD;MAAM,WAAU;gBAAmC;MAAmB,CAAA,CAC/E;SACF;IACJ,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAkE;OAE3E,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAAgD,EAAY;OAAa,CAAA,CACpF,EAAA,CAAA;MACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAkE;OAE3E,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAA2C,EAAY;OAAY,CAAA,CAC9E,EAAA,CAAA;MACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAkE;OAE3E,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAA6B,EAAW,EAAY,SAAS;OAAO,CAAA,CAC/E,EAAA,CAAA;MACF;;IACL,IACC,kBAAC,OAAD;KAAK,WAAU;eAAf;MAA2I;MAExI,EAAY,YAAY,OAAO,EAAW,EAAY,UAAU,KAAK;MACrE,EAAY,eAAe,MAAM,EAAY,iBAAiB;MAC3D;SAEN,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,GAAD,EAAa,MAAM,IAAM,CAAA,EAAA,YACpB;;IAEL;KACI;;;AAIhB,SAAgB,IAA+B;CAC7C,IAAM,CAAC,KAAU,IAAiB,EAC5B,IAAK,EAAO,IAAI,KAAK,IAAI,IAGzB,CAAC,GAAc,KAAmB,GAAsB,GAAa,OAAO,EAC5E,EAAE,gBAAa,mBAAgB,GAAe,EAC9C,IAAW,GAAuB,EAClC,EAAE,YAAS,GAAwB,EACnC,EAAE,SAAM,YAAS,UAAO,gBAAY,GAAe,EAAG;AAE5D,UAAgB;AACd,EAAI,KACF,EAAK,4BAA4B;GAC/B;GACA,UAAU;GACV,YAAY;GACb,CAAC;IAEH;EAAC;EAAI;EAAa;EAAK,CAAC;CAE3B,IAAM,CAAC,IAAQ,EAAE,SAAS,OAAe,IAAW,EAM9C,EAAE,MAAM,IAAU,SAAS,OAAiB,GAChD,IAAK,EAAE,UAAU,GAAI,GAAG,EAAE,CAC3B,EACK,CAAC,IAAkB,EAAE,SAAS,OAAc,IAAqB,EAEjE,IAAS,GAAM,aAAa,MAC5B,IAAU,CAAC,GAAI,GAAQ,WAAW,EAAE,CAAE,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS,EAC9E,KAA2C,GAAQ,eAAe,EAAE,EAAE,MACzE,MAAM,EAAE,cAAc,GAAa,GACrC,EACK,IAAiB,IAAU,qBAAqB,EAAE,EAClD,IAAgB,EAAe,MAAM,MAAM,EAAE,WAAW,SAAS,IAAI,EAAe,IACpF,KAAa,CAAC,CAAC,KAAgB,EAAa,eAAe,KAE3D,KAAyB,YAAY;AACrC,GAAC,KAAM,CAAC,GAAa,OACzB,EAAK,yCAAyC;GAC5C;GACA,UAAU;GACV,YAAY;GACb,CAAC,GACU,MAAM,GAAiB,EACjC,WAAW;GAAE,UAAU;GAAI,WAAW,EAAY;GAAI,OAAO;GAAK,EACnE,CAAC,EACM,MAAM,wBACZ,EAAO,QAAQ,sBAAsB,uDAAuD,EAC5F,MAAM,IAAc;IAIlB,KAAe,YAAY;AAC1B,QACL,EAAK,oCAAoC;GACvC;GACA,UAAU;GACV,YAAY;GACb,CAAC,GACU,MAAM,GAAO,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,GAAI,EAAE,EAAE,CAAC,EAC5D,MAAM,cACZ,EAAK,8BAA8B;GACjC;GACA,UAAU;GACV,YAAY;GACb,CAAC,EACF,EAAO,QAAQ,YAAY,uBAAuB,GAAQ,MAAM,IAAI,EACpE,MAAM,IAAS;;AAInB,KAAI,KAAW,CAAC,EACd,QACE,kBAAC,GAAD;EAAY,OAAM;EAAS,UAAS;YAApC,CACE,kBAAC,GAAD,EAAU,WAAU,gCAAiC,CAAA,EACrD,kBAAC,GAAD,EAAU,WAAU,0BAA2B,CAAA,CACpC;;AAIjB,KAAI,KAAS,CAAC,EACZ,QACE,kBAAC,GAAD;EAAY,OAAM;EAAS,UAAS;YACjC,IACC,kBAAC,IAAD;GAAW,OAAM;GAA8B;GAAS,CAAA,GAExD,kBAAC,GAAD;GACE,OAAM;GACN,aAAY;GACZ,CAAA;EAEO,CAAA;CAIjB,IAAM,IAAmB,GAAc,oBAAoB,GAIrD,IAAa,EAAQ,MAAM,MAAM,CAAC,EAAE,cAAc,IAAI,EAAQ,IAC9D,IAAU,EAAQ,SAAS,KAAK,EAAQ,OAAO,MAAM,EAAE,cAAc,EACrE,KAAc,MAAqB,EAAS,GAAiB,GAAI,EAAS,CAAC,EAC3E,IAAY,KAAK,IAAI,GAAG,EAAQ,SAAS,EAAiB,EAC1D,KACJ,KAAgB,EAAa,eAAe,MACxC,oDACA,MAAc,IACZ,mCACA,GAAG,EAAU,+BACf,KAAW,GAAG,EAAO,SAAS,GAAG,GAAG,EAAO;AAEjD,QACE,kBAAC,GAAD;EACE,UAAS;EACT,OAAO,EAAO;EACd,aAAa,EAAO,WAAW,KAAA;EAC/B,SACE,IACE,IACE,kBAAC,GAAD;GAAQ,eAAe,EAAW,EAAW,GAAG;GAAE,eAAY;aAA9D,CACa,EAAV,IAAW,IAA6B,GAA9B,EAAc,MAAM,IAAM,CAA2B,EAC/D,IACG,kBACA,IAAmB,IACjB,sBACA,eACC;OACP,OAEJ,kBAAC,GAAD;GAAQ,SAAS;GAAc,UAAU;aAAzC;IACE,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA;;IAAE,IAAY,eAAe;IAC5C;;YAnBf;GAwBE,kBAAC,GAAD;IACE,QAAO;IACP,MAAM;IACN,MAAM,EAAU,EAAO,SAAS,EAAO,MAAM;IAC7C,WAAU;cAEV,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAO,SAAS;OACZ,CAAA;MACP,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAO;OACL,CAAA;MACL,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,GAAD;SAAW,MAAM;mBAAa,EAAa,EAAO,MAAM;SAAa,CAAA;QACrE,kBAAC,GAAD;SAAW,MAAM;mBAAe,EAAa,EAAO,OAAO;SAAa,CAAA;QACvE,EAAO,QAAQ,kBAAC,GAAD;SAAW,MAAM;mBAAS,EAAO;SAAkB,CAAA,GAAG;QACrE,EAAO,gBAAgB,kBAAC,GAAD;SAAW,MAAM;mBAAM;SAAmB,CAAA,GAAG;QACjE;;MACF;;IACK,CAAA;GAEb,kBAAC,GAAD;IAAU,MAAM,EAAO;IAAM,WAAU;IAAS,CAAA;GAEhD,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAU,OAAM;MAAU,OAAO,EAAQ;MAAQ,MAAM;MAAU,MAAK;MAAS,CAAA;KAC/E,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,EAAe,EAAO,iBAAiB;MAC9C,MAAM;MACN,MAAK;MACL,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,EAAO,aAAa,UAAU;MACrC,MAAM;MACN,MAAK;MACL,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,IAAe,GAAG,EAAa,YAAY,KAAK;MACvD,MAAM;MACN,MAAK;MACL,CAAA;KACE;;GAEL,IACC,kBAAC,GAAD;IAAW,WAAU;cAArB;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,QAAD;QAAM,WAAU;kBACd,kBAAC,GAAD,EAAY,MAAM,IAAM,CAAA;QACnB,CAAA;OACP,kBAAC,QAAD;QAAM,WAAU;kBAA0C;QAAoB,CAAA;OAC9E,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG;SAAiB;SAAE,EAAQ;SAAO;SAAY,EAAa;SAAY;SACnE;;OACH;;KACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OACE,WAAU;OACV,OAAO,EAAE,OAAO,GAAG,EAAa,YAAY,IAAI;OAChD,CAAA;MACE,CAAA;KACN,kBAAC,KAAD;MAAG,WAAU;gBAAgC;MAAc,CAAA;KACjD;QACV;GAEH,IACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,WAAW,EACT,sCACA,EAAc,WAAW,YACrB,+DACA,iEACL;eANH,CAQE,kBAAC,QAAD;MAAM,WAAU;gBACd,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA;MACf,CAAA,EACP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAc,WAAW,YACtB,iCACA;OACA,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAc,WAAW,YACtB,iEACA;OACA,CAAA,CACF;QACI;QACZ,kBAAC,IAAD;KACE,aAAa;KACb,aAAa,GAAa,QAAQ,KAAA;KAClC,aAAa,EAAc,QAAQ,SAAS,EAAO;KACnD,CAAA,CACE;QACJ,KACF,kBAAC,GAAD;IAAW,WAAU;cAArB,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBACd,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA;MACf,CAAA,EACP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;gBAA4C;MAErD,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAA0B;MAEnC,CAAA,CACF,EAAA,CAAA,CACF;QACN,kBAAC,GAAD;KAAQ,SAAS;KAAwB,UAAU;eAAnD;MACE,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;;MAAE,IAAW,aAAa;MACtC;OACC;QACV;GAEJ,kBAAC,GAAD;IAAW,WAAU;cAArB;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBAAd;QACE,kBAAC,GAAD;SAAU,MAAM;SAAI,WAAU;SAAwB,CAAA;;QACrD,EAAO,gBAAgB,kBAAC,IAAD,EAAc,QAAQ,EAAO,UAAY,CAAA,GAAG;QACjE;UACJ,EAAQ,SACP,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACG;QAAiB;QAAE,EAAQ;QAAO;QAC9B;WACL,KACA;;KACL,EAAO,WACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OACE,SAAA;OACA,aAAY;OACZ,CAAA;MACE,CAAA,GACJ;KACH,EAAQ,WAAW,IAClB,kBAAC,KAAD;MAAG,WAAU;gBAA2C;MAEpD,CAAA,GAEJ,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAQ,KAAK,GAAQ,MACpB,kBAAC,IAAD;OAEU;OACR,OAAO;OACP,MAAM,CAAC,CAAC,EAAO;OACf,MAAM,MAAiB,EAAO;OAC9B,gBAAgB,EAAgB,MAAiB,EAAO,KAAK,OAAO,EAAO,GAAG;OAC9E,eAAe,EAAW,EAAO,GAAG;OACpC,EAPK,EAAO,GAOZ,CACF;MACE,CAAA;KAEE;;GACD"}
+{"version":3,"file":"CoursesCourseDetailsPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCourseDetailsPagePage.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { useSearchParams } from 'react-router';\nimport {\n  ArrowRight,\n  Award,\n  BookOpen,\n  CheckCircle2,\n  ChevronDown,\n  Clock,\n  Eye,\n  FileText,\n  Lock,\n  PlayCircle,\n  Layers,\n  ShieldCheck,\n  Sparkles,\n  Trophy,\n  TrendingUp,\n  Users,\n  type LucideIcon,\n} from 'lucide-react';\nimport { Button, GlassCard, Skeleton } from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  MediaCover,\n  PageLayout,\n  PremiumBadge,\n  StatCard,\n  TagStrip,\n  UpgradeGate,\n  topicIcon,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  useCourseQuery,\n  useEnroll,\n  useIssueCertificate,\n  useMyCertificatesQuery,\n  type TecCertificate,\n  type TecLesson,\n  type TecEnrollment,\n} from '../api/technospamApi';\nimport { formatDate, formatDuration, humanizeEnum } from '../utils/format';\nimport { notify } from '../lib/toast';\nimport { cn } from '../utils/cn';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport { useFocusedRecordParam } from '../hooks/useFocusedRecordParam';\nimport { FOCUS_PARAMS } from '../utils/pageContext';\nimport { lessonPlayerPath } from '../utils/lessonPath';\n\n/** Per-lesson-kind icon + on-theme tint (chip) and pill (badge) classes. */\nconst KIND_META: Record<string, { icon: LucideIcon; chip: string; badge: string }> = {\n  VIDEO: {\n    icon: PlayCircle,\n    chip: 'bg-accent-primary/15 text-accent-primary',\n    badge: 'border-accent-primary/25 bg-accent-primary/6 text-accent-primary',\n  },\n  ARTICLE: {\n    icon: FileText,\n    chip: 'bg-accent-indigo/15 text-accent-indigo',\n    badge: 'border-accent-indigo/25 bg-accent-indigo/10 text-accent-indigo',\n  },\n  INTERACTIVE: {\n    icon: Sparkles,\n    chip: 'bg-accent-teal/15 text-accent-teal',\n    badge: 'border-accent-teal/25 bg-accent-teal/10 text-accent-teal',\n  },\n  QUIZ: {\n    icon: CheckCircle2,\n    chip: 'bg-accent-purple/15 text-accent-purple',\n    badge: 'border-accent-purple/25 bg-accent-purple/10 text-accent-purple',\n  },\n  PROJECT: {\n    icon: Layers,\n    chip: 'bg-status-warning-bg-subtle text-status-warning-text',\n    badge: 'border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text',\n  },\n};\n\nfunction HeroBadge({ icon: Icon, children }: { icon?: LucideIcon; children: ReactNode }) {\n  return (\n    <span className=\"inline-flex items-center gap-1 rounded-full bg-white/15 px-2.5 py-1 text-xs font-medium text-white ring-1 ring-white/25 backdrop-blur-sm\">\n      {Icon ? <Icon size={12} /> : null}\n      {children}\n    </span>\n  );\n}\n\n/**\n * One curriculum row. Expands in place to reveal the lesson body.\n *\n * `TecLesson.content` is the only lesson body this service exposes to a\n * learner, and the API nulls it server-side whenever `isLocked` is true\n * (BOFF-4416), so the three states below are exhaustive and never guessed:\n * locked → upgrade note, content present → the body, content null on an\n * unlocked lesson → the author simply hasn't written it yet.\n */\nfunction LessonRow({\n  lesson,\n  index,\n  done,\n  open,\n  onToggle,\n  onStart,\n}: {\n  lesson: TecLesson;\n  index: number;\n  done: boolean;\n  /** The open lesson is the focused one (`?lessonId=`), so the assistant can name it. */\n  open: boolean;\n  onToggle: () => void;\n  /** Opens the lesson in the lesson player (BOFF-4107). */\n  onStart: () => void;\n}) {\n  const meta = KIND_META[lesson.kind] ?? KIND_META.ARTICLE!;\n  const Icon = meta.icon;\n  const bodyId = `tec-lesson-body-${lesson.id}`;\n\n  return (\n    <div className=\"border-b border-border-seam last:border-b-0\">\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={bodyId}\n        className=\"group flex w-full items-center gap-3 rounded-xl px-2 py-3 text-left transition-colors hover:bg-bg-sunken/60\"\n      >\n        <span className=\"hidden w-6 shrink-0 text-center text-sm font-medium tabular-nums text-text-muted sm:block\">\n          {index + 1}\n        </span>\n        <span\n          className={cn(\n            'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg',\n            done ? 'bg-status-success-bg-subtle text-status-success-text' : meta.chip\n          )}\n        >\n          {done ? <CheckCircle2 size={17} /> : <Icon size={17} />}\n        </span>\n        <div className=\"min-w-0 flex-1\">\n          <span className=\"block truncate text-sm font-medium text-text-primary\">\n            {lesson.title}\n          </span>\n          <div className=\"mt-1 flex flex-wrap items-center gap-2\">\n            <span\n              className={cn(\n                'inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium',\n                meta.badge\n              )}\n            >\n              {humanizeEnum(lesson.kind)}\n            </span>\n            <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n              <Clock size={12} /> {formatDuration(lesson.estimatedMinutes)}\n            </span>\n          </div>\n        </div>\n        <div className=\"flex shrink-0 items-center gap-2\">\n          {done ? (\n            <CheckCircle2 size={18} className=\"text-status-success-text\" />\n          ) : lesson.isPreview ? (\n            <span className=\"inline-flex items-center gap-1 rounded-full border border-accent-primary/30 bg-accent-primary/6 px-2 py-0.5 text-[11px] font-medium text-accent-primary\">\n              <Eye size={12} /> Preview\n            </span>\n          ) : lesson.isLocked ? (\n            // BOFF-4416: distinct from the plain \"not completed yet\" Lock icon\n            // below — this lesson's content is gated behind a paid plan, not\n            // just not-yet-watched. The API already nulled `content`/`file`.\n            <span className=\"inline-flex items-center gap-1 rounded-full border border-status-warning-border/60 bg-status-warning-bg-subtle px-2 py-0.5 text-[11px] font-medium text-status-warning-text\">\n              <Lock size={12} /> Upgrade to unlock\n            </span>\n          ) : (\n            <Lock size={15} className=\"text-text-muted\" />\n          )}\n          <ChevronDown\n            size={16}\n            aria-hidden\n            className={cn(\n              'text-text-muted transition-transform duration-200',\n              open ? 'rotate-180' : ''\n            )}\n          />\n        </div>\n      </button>\n\n      {open ? (\n        <div id={bodyId} className=\"px-2 pb-4 sm:pl-11\">\n          {lesson.isLocked ? (\n            <UpgradeGate\n              compact\n              description=\"This lesson is part of a paid TechnoSpam plan — its content unlocks once your workspace upgrades.\"\n            />\n          ) : (\n            <div className=\"space-y-3\">\n              {lesson.content ? (\n                <div className=\"rounded-xl border border-border-seam bg-bg-sunken p-4\">\n                  <p className=\"line-clamp-6 whitespace-pre-wrap text-sm leading-relaxed text-text-secondary\">\n                    {lesson.content}\n                  </p>\n                </div>\n              ) : null}\n              <Button size=\"sm\" onClick={onStart} data-testid={`open-lesson-${lesson.id}`}>\n                <PlayCircle size={15} /> {done ? 'Review lesson' : 'Start lesson'}\n              </Button>\n            </div>\n          )}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Verifiable certificate face for an already-issued certificate. Every value\n * shown is a real field on the TecCertificate row (`serial`, `score`,\n * `issuedAt`, `status`) plus the course title it was issued against — the\n * learner name comes from the signed-in actor the shell handed us, and is\n * simply omitted when the shell did not supply one.\n */\nfunction CertificatePreview({\n  certificate,\n  learnerName,\n  courseTitle,\n}: {\n  certificate: TecCertificate;\n  learnerName?: string;\n  courseTitle: string;\n}) {\n  const revoked = certificate.status === 'REVOKED';\n  return (\n    <GlassCard className=\"overflow-hidden p-0\">\n      <div className=\"border-b border-border-seam px-5 py-3\">\n        <span className=\"text-xs font-semibold uppercase tracking-wide text-text-muted\">\n          Certificate preview\n        </span>\n      </div>\n      <div className=\"space-y-4 bg-bg-sunken/50 px-5 py-6 text-center\">\n        <div className=\"flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-text-muted\">\n          <Award size={14} className=\"text-status-warning-text\" /> Certificate of completion\n        </div>\n        <h3 className=\"text-lg font-bold text-text-primary\">{courseTitle}</h3>\n        {learnerName ? (\n          <p className=\"text-sm text-text-secondary\">\n            Awarded to <span className=\"font-semibold text-text-primary\">{learnerName}</span>\n          </p>\n        ) : null}\n        <div className=\"grid grid-cols-1 gap-3 border-t border-border-seam pt-4 text-left sm:grid-cols-3\">\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Serial number\n            </div>\n            <div className=\"truncate font-mono text-sm text-text-primary\">{certificate.serial}</div>\n          </div>\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Score\n            </div>\n            <div className=\"text-sm font-semibold text-text-primary\">{certificate.score}</div>\n          </div>\n          <div>\n            <div className=\"text-[11px] font-medium uppercase tracking-wide text-text-muted\">\n              Issued on\n            </div>\n            <div className=\"text-sm text-text-primary\">{formatDate(certificate.issuedAt)}</div>\n          </div>\n        </div>\n        {revoked ? (\n          <div className=\"rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-left text-xs text-status-error-text\">\n            This certificate was revoked\n            {certificate.revokedAt ? ` on ${formatDate(certificate.revokedAt)}` : ''}\n            {certificate.revokeReason ? ` — ${certificate.revokeReason}` : '.'}\n          </div>\n        ) : (\n          <span className=\"inline-flex items-center gap-1 rounded-full border border-status-success-border bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text\">\n            <ShieldCheck size={13} /> Verified\n          </span>\n        )}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCourseDetailsPagePage() {\n  const [params] = useSearchParams();\n  const id = params.get('id') ?? '';\n  // The expanded lesson lives in `?lessonId=` so the assistant's page context\n  // names it (\"explain this lesson\") and a reload reopens it.\n  const [openLessonId, setOpenLessonId] = useFocusedRecordParam(FOCUS_PARAMS.lesson);\n  const { currentUser, workspaceId } = useTechnoSpam();\n  const navigate = useTechnoSpamNavigate();\n  const { emit } = useTechnoSpamAnalytics();\n  const { data, loading, error, refetch } = useCourseQuery(id);\n\n  useEffect(() => {\n    if (id) {\n      emit('technospam.course.viewed', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_COURSE',\n      });\n    }\n  }, [id, workspaceId, emit]);\n\n  const [enroll, { loading: enrolling }] = useEnroll();\n  // Self-scoped read: `tecMyCertificates` filters by the authenticated actor\n  // server-side. `tecListCertificates` (the previous call) is gated behind the\n  // cross-learner \"list-all\" action, which a plain learner does not hold — so\n  // an already-claimed certificate came back empty and the page kept offering\n  // \"Claim certificate\" instead of showing it.\n  const { data: certData, refetch: refetchCerts } = useMyCertificatesQuery(\n    id ? { courseId: id } : {}\n  );\n  const [issueCertificate, { loading: claiming }] = useIssueCertificate();\n\n  const course = data?.tecCourse ?? null;\n  const lessons = [...(course?.lessons ?? [])].sort((a, b) => a.position - b.position);\n  const myEnrollment: TecEnrollment | undefined = (course?.enrollments ?? []).find(\n    (e) => e.learnerId === currentUser?.id\n  );\n  const myCertificates = certData?.tecMyCertificates ?? [];\n  const myCertificate = myCertificates.find((c) => c.status === 'ISSUED') ?? myCertificates[0];\n  const isComplete = !!myEnrollment && myEnrollment.progressPct >= 100;\n\n  const handleClaimCertificate = async () => {\n    if (!id || !currentUser?.id) return;\n    emit('technospam.course.certificate_claimed', {\n      workspaceId,\n      entityId: id,\n      entityType: 'TEC_COURSE',\n    });\n    const res = await issueCertificate({\n      variables: { courseId: id, learnerId: currentUser.id, score: 100 },\n    });\n    if (res.data?.tecIssueCertificate) {\n      notify.success('Certificate issued', 'Your verifiable certificate is ready in My Learning.');\n      await refetchCerts();\n    }\n  };\n\n  const handleEnroll = async () => {\n    if (!id) return;\n    emit('technospam.course.enroll_clicked', {\n      workspaceId,\n      entityId: id,\n      entityType: 'TEC_COURSE',\n    });\n    const res = await enroll({ variables: { input: { courseId: id } } });\n    if (res.data?.tecEnroll) {\n      emit('technospam.course.enrolled', {\n        workspaceId,\n        entityId: id,\n        entityType: 'TEC_COURSE',\n      });\n      notify.success('Enrolled', `You're enrolled in \"${course?.title}\".`);\n      await refetch();\n    }\n  };\n\n  if (loading && !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        <Skeleton className=\"mb-4 h-40 w-full rounded-2xl\" />\n        <Skeleton className=\"h-64 w-full rounded-xl\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !course) {\n    return (\n      <PageLayout title=\"Course\" backPath=\"/courses/courses-page\">\n        {error ? (\n          <ErrorView title=\"Couldn't load course\" error={error} />\n        ) : (\n          <EmptyView\n            title=\"Course not found\"\n            description=\"This course may have been unpublished.\"\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  const completedLessons = myEnrollment?.lessonsCompleted ?? 0;\n  // BOFF-4107: \"Continue\" lands on the first lesson the learner has not\n  // finished (per-lesson completions from the API), or the first lesson to\n  // review once everything is done.\n  const nextLesson = lessons.find((l) => !l.completedByMe) ?? lessons[0];\n  const allDone = lessons.length > 0 && lessons.every((l) => l.completedByMe);\n  const openLesson = (lessonId: string) => navigate(lessonPlayerPath(id, lessonId));\n  const remaining = Math.max(0, lessons.length - completedLessons);\n  const milestone =\n    myEnrollment && myEnrollment.progressPct >= 100\n      ? 'Course complete — claim your certificate below.'\n      : remaining === 1\n        ? '1 lesson to go — almost there!'\n        : `${remaining} lessons to go — keep it up!`;\n  const heroSeed = `${course.topic ?? ''} ${course.title}`;\n\n  return (\n    <PageLayout\n      backPath=\"/courses/courses-page\"\n      title={course.title}\n      description={course.summary ?? undefined}\n      actions={\n        myEnrollment ? (\n          nextLesson ? (\n            <Button onClick={() => openLesson(nextLesson.id)} data-testid=\"continue-learning\">\n              {allDone ? <CheckCircle2 size={16} /> : <ArrowRight size={16} />}\n              {allDone\n                ? 'Review course'\n                : completedLessons > 0\n                  ? 'Continue learning'\n                  : 'Start course'}\n            </Button>\n          ) : null\n        ) : (\n          <Button onClick={handleEnroll} disabled={enrolling}>\n            <BookOpen size={16} /> {enrolling ? 'Enrolling…' : 'Enroll'}\n          </Button>\n        )\n      }\n    >\n      {/* Bold hero banner */}\n      <MediaCover\n        height=\"h-40\"\n        seed={heroSeed}\n        icon={topicIcon(course.topic ?? course.title)}\n        className=\"mb-5 rounded-2xl\"\n      >\n        <div className=\"flex w-full flex-col gap-2\">\n          <span className=\"text-xs font-medium uppercase tracking-wide text-white/80\">\n            {course.topic ?? 'Course'}\n          </span>\n          <h2 className=\"text-2xl font-bold leading-tight text-white drop-shadow-sm sm:text-3xl\">\n            {course.title}\n          </h2>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <HeroBadge icon={TrendingUp}>{humanizeEnum(course.level)}</HeroBadge>\n            <HeroBadge icon={CheckCircle2}>{humanizeEnum(course.status)}</HeroBadge>\n            {course.topic ? <HeroBadge icon={Layers}>{course.topic}</HeroBadge> : null}\n            {course.isPremiumOnly ? <HeroBadge icon={Lock}>Premium</HeroBadge> : null}\n          </div>\n        </div>\n      </MediaCover>\n\n      <TagStrip tags={course.tags} className=\"mb-5\" />\n\n      <div className=\"mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard label=\"Lessons\" value={lessons.length} icon={FileText} tone=\"blue\" />\n        <StatCard\n          label=\"Duration\"\n          value={formatDuration(course.estimatedMinutes)}\n          icon={Clock}\n          tone=\"teal\"\n        />\n        <StatCard\n          label=\"Enrolled\"\n          value={course.enrollments?.length ?? 0}\n          icon={Users}\n          tone=\"indigo\"\n        />\n        <StatCard\n          label=\"Your progress\"\n          value={myEnrollment ? `${myEnrollment.progressPct}%` : 'Not started'}\n          icon={TrendingUp}\n          tone=\"purple\"\n        />\n      </div>\n\n      {myEnrollment ? (\n        <GlassCard className=\"mb-6 p-5\">\n          <div className=\"mb-3 flex items-center gap-2\">\n            <span className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-accent-primary/15 text-accent-primary\">\n              <TrendingUp size={16} />\n            </span>\n            <span className=\"text-sm font-semibold text-text-primary\">Your progress</span>\n            <span className=\"ml-auto text-sm text-text-secondary\">\n              {completedLessons}/{lessons.length} lessons · {myEnrollment.progressPct}%\n            </span>\n          </div>\n          <div className=\"h-2.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n            <div\n              className=\"h-full rounded-full bg-gradient-to-r from-accent-primary via-accent-indigo to-accent-purple transition-all duration-500\"\n              style={{ width: `${myEnrollment.progressPct}%` }}\n            />\n          </div>\n          <p className=\"mt-2 text-xs text-text-muted\">{milestone}</p>\n        </GlassCard>\n      ) : null}\n\n      {myCertificate ? (\n        <div className=\"mb-6 grid grid-cols-1 gap-4 lg:grid-cols-2\">\n          <GlassCard\n            className={cn(\n              'flex items-center gap-4 border p-5',\n              myCertificate.status === 'REVOKED'\n                ? 'border-status-error-border/60 bg-status-error-bg-subtle/20'\n                : 'border-status-success-border/60 bg-status-success-bg-subtle/30'\n            )}\n          >\n            <span className=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40\">\n              <Trophy size={26} />\n            </span>\n            <div className=\"min-w-0\">\n              <div className=\"text-base font-semibold text-text-primary\">\n                {myCertificate.status === 'REVOKED'\n                  ? 'Your certificate was revoked'\n                  : 'You finished this course'}\n              </div>\n              <div className=\"text-sm text-text-muted\">\n                {myCertificate.status === 'REVOKED'\n                  ? 'Contact a workspace admin if you believe this was a mistake.'\n                  : 'Your verifiable certificate of completion is issued — it also appears in My Learning.'}\n              </div>\n            </div>\n          </GlassCard>\n          <CertificatePreview\n            certificate={myCertificate}\n            learnerName={currentUser?.name ?? undefined}\n            courseTitle={myCertificate.course?.title ?? course.title}\n          />\n        </div>\n      ) : isComplete ? (\n        <GlassCard className=\"mb-6 flex flex-col items-start gap-4 border border-status-success-border/60 bg-status-success-bg-subtle/40 p-5 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-4\">\n            <span className=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-status-warning-bg-subtle text-status-warning-text ring-1 ring-status-warning-border/40\">\n              <Trophy size={26} />\n            </span>\n            <div>\n              <div className=\"text-base font-semibold text-text-primary\">\n                You finished this course\n              </div>\n              <div className=\"text-sm text-text-muted\">\n                Claim your verifiable certificate of completion.\n              </div>\n            </div>\n          </div>\n          <Button onClick={handleClaimCertificate} disabled={claiming}>\n            <Award size={16} /> {claiming ? 'Issuing…' : 'Claim certificate'}\n          </Button>\n        </GlassCard>\n      ) : null}\n\n      <GlassCard className=\"p-5\">\n        <div className=\"mb-3 flex items-center justify-between gap-2\">\n          <h2 className=\"flex items-center gap-2 text-base font-semibold text-text-primary\">\n            <BookOpen size={18} className=\"text-accent-primary\" /> Curriculum\n            {course.isPremiumOnly ? <PremiumBadge locked={course.isLocked} /> : null}\n          </h2>\n          {lessons.length ? (\n            <span className=\"rounded-full bg-status-success-bg-subtle px-2.5 py-1 text-xs font-medium text-status-success-text\">\n              {completedLessons}/{lessons.length} completed\n            </span>\n          ) : null}\n        </div>\n        {course.isLocked ? (\n          <div className=\"mb-4\">\n            <UpgradeGate\n              compact\n              description=\"This course is on a paid TechnoSpam plan. Preview lessons below stay free — the rest unlock once your workspace upgrades.\"\n            />\n          </div>\n        ) : null}\n        {lessons.length === 0 ? (\n          <p className=\"py-6 text-center text-sm text-text-muted\">\n            Lessons for this course are being prepared.\n          </p>\n        ) : (\n          <div className=\"flex flex-col\">\n            {lessons.map((lesson, i) => (\n              <LessonRow\n                key={lesson.id}\n                lesson={lesson}\n                index={i}\n                done={!!lesson.completedByMe}\n                open={openLessonId === lesson.id}\n                onToggle={() => setOpenLessonId(openLessonId === lesson.id ? null : lesson.id)}\n                onStart={() => openLesson(lesson.id)}\n              />\n            ))}\n          </div>\n        )}\n      </GlassCard>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqDA,IAAM,IAA+E;CACnF,OAAO;EACL,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,MAAM;EACN,OAAO;EACR;CACF;AAED,SAAS,EAAU,EAAE,MAAM,GAAM,eAAwD;AACvF,QACE,kBAAC,QAAD;EAAM,WAAU;YAAhB,CACG,IAAO,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,GAAG,MAC5B,EACI;;;AAaX,SAAS,GAAU,EACjB,WACA,UACA,SACA,SACA,aACA,cAUC;CACD,IAAM,IAAO,EAAU,EAAO,SAAS,EAAU,SAC3C,IAAO,EAAK,MACZ,IAAS,mBAAmB,EAAO;AAEzC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,iBAAe;GACf,iBAAe;GACf,WAAU;aALZ;IAOE,kBAAC,QAAD;KAAM,WAAU;eACb,IAAQ;KACJ,CAAA;IACP,kBAAC,QAAD;KACE,WAAW,EACT,gEACA,IAAO,yDAAyD,EAAK,KACtE;eAEO,EAAP,IAAQ,IAA6B,GAA9B,EAAc,MAAM,IAAM,CAAqB;KAClD,CAAA;IACP,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAO;MACH,CAAA,EACP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OACE,WAAW,EACT,oFACA,EAAK,MACN;iBAEA,EAAa,EAAO,KAAK;OACrB,CAAA,EACP,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACE,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;;QAAE,EAAe,EAAO,iBAAiB;QACvD;SACH;QACF;;IACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,IACC,kBAAC,GAAD;MAAc,MAAM;MAAI,WAAU;MAA6B,CAAA,GAC7D,EAAO,YACT,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA,EAAA,WACZ;UACL,EAAO,WAIT,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EAAA,qBACb;UAEP,kBAAC,GAAD;MAAM,MAAM;MAAI,WAAU;MAAoB,CAAA,EAEhD,kBAAC,GAAD;MACE,MAAM;MACN,eAAA;MACA,WAAW,EACT,qDACA,IAAO,eAAe,GACvB;MACD,CAAA,CACE;;IACC;MAER,IACC,kBAAC,OAAD;GAAK,IAAI;GAAQ,WAAU;aACxB,EAAO,WACN,kBAAC,GAAD;IACE,SAAA;IACA,aAAY;IACZ,CAAA,GAEF,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAO,UACN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAO;MACN,CAAA;KACA,CAAA,GACJ,MACJ,kBAAC,GAAD;KAAQ,MAAK;KAAK,SAAS;KAAS,eAAa,eAAe,EAAO;eAAvE;MACE,kBAAC,GAAD,EAAY,MAAM,IAAM,CAAA;;MAAE,IAAO,kBAAkB;MAC5C;OACL;;GAEJ,CAAA,GACJ,KACA;;;AAWV,SAAS,GAAmB,EAC1B,gBACA,gBACA,kBAKC;CACD,IAAM,IAAU,EAAY,WAAW;AACvC,QACE,kBAAC,GAAD;EAAW,WAAU;YAArB,CACE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,QAAD;IAAM,WAAU;cAAgE;IAEzE,CAAA;GACH,CAAA,EACN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAO,MAAM;MAAI,WAAU;MAA6B,CAAA,EAAA,6BACpD;;IACN,kBAAC,MAAD;KAAI,WAAU;eAAuC;KAAiB,CAAA;IACrE,IACC,kBAAC,KAAD;KAAG,WAAU;eAAb,CAA2C,eAC9B,kBAAC,QAAD;MAAM,WAAU;gBAAmC;MAAmB,CAAA,CAC/E;SACF;IACJ,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAkE;OAE3E,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAAgD,EAAY;OAAa,CAAA,CACpF,EAAA,CAAA;MACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAkE;OAE3E,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAA2C,EAAY;OAAY,CAAA,CAC9E,EAAA,CAAA;MACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAkE;OAE3E,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAA6B,EAAW,EAAY,SAAS;OAAO,CAAA,CAC/E,EAAA,CAAA;MACF;;IACL,IACC,kBAAC,OAAD;KAAK,WAAU;eAAf;MAA2I;MAExI,EAAY,YAAY,OAAO,EAAW,EAAY,UAAU,KAAK;MACrE,EAAY,eAAe,MAAM,EAAY,iBAAiB;MAC3D;SAEN,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,GAAD,EAAa,MAAM,IAAM,CAAA,EAAA,YACpB;;IAEL;KACI;;;AAIhB,SAAgB,IAA+B;CAC7C,IAAM,CAAC,KAAU,IAAiB,EAC5B,IAAK,EAAO,IAAI,KAAK,IAAI,IAGzB,CAAC,GAAc,KAAmB,GAAsB,GAAa,OAAO,EAC5E,EAAE,gBAAa,mBAAgB,GAAe,EAC9C,IAAW,GAAuB,EAClC,EAAE,YAAS,GAAwB,EACnC,EAAE,SAAM,YAAS,UAAO,gBAAY,GAAe,EAAG;AAE5D,UAAgB;AACd,EAAI,KACF,EAAK,4BAA4B;GAC/B;GACA,UAAU;GACV,YAAY;GACb,CAAC;IAEH;EAAC;EAAI;EAAa;EAAK,CAAC;CAE3B,IAAM,CAAC,IAAQ,EAAE,SAAS,OAAe,IAAW,EAM9C,EAAE,MAAM,IAAU,SAAS,OAAiB,GAChD,IAAK,EAAE,UAAU,GAAI,GAAG,EAAE,CAC3B,EACK,CAAC,IAAkB,EAAE,SAAS,OAAc,IAAqB,EAEjE,IAAS,GAAM,aAAa,MAC5B,IAAU,CAAC,GAAI,GAAQ,WAAW,EAAE,CAAE,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS,EAC9E,KAA2C,GAAQ,eAAe,EAAE,EAAE,MACzE,MAAM,EAAE,cAAc,GAAa,GACrC,EACK,IAAiB,IAAU,qBAAqB,EAAE,EAClD,IAAgB,EAAe,MAAM,MAAM,EAAE,WAAW,SAAS,IAAI,EAAe,IACpF,KAAa,CAAC,CAAC,KAAgB,EAAa,eAAe,KAE3D,KAAyB,YAAY;AACrC,GAAC,KAAM,CAAC,GAAa,OACzB,EAAK,yCAAyC;GAC5C;GACA,UAAU;GACV,YAAY;GACb,CAAC,GACU,MAAM,GAAiB,EACjC,WAAW;GAAE,UAAU;GAAI,WAAW,EAAY;GAAI,OAAO;GAAK,EACnE,CAAC,EACM,MAAM,wBACZ,EAAO,QAAQ,sBAAsB,uDAAuD,EAC5F,MAAM,IAAc;IAIlB,KAAe,YAAY;AAC1B,QACL,EAAK,oCAAoC;GACvC;GACA,UAAU;GACV,YAAY;GACb,CAAC,GACU,MAAM,GAAO,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,GAAI,EAAE,EAAE,CAAC,EAC5D,MAAM,cACZ,EAAK,8BAA8B;GACjC;GACA,UAAU;GACV,YAAY;GACb,CAAC,EACF,EAAO,QAAQ,YAAY,uBAAuB,GAAQ,MAAM,IAAI,EACpE,MAAM,IAAS;;AAInB,KAAI,KAAW,CAAC,EACd,QACE,kBAAC,GAAD;EAAY,OAAM;EAAS,UAAS;YAApC,CACE,kBAAC,GAAD,EAAU,WAAU,gCAAiC,CAAA,EACrD,kBAAC,GAAD,EAAU,WAAU,0BAA2B,CAAA,CACpC;;AAIjB,KAAI,KAAS,CAAC,EACZ,QACE,kBAAC,GAAD;EAAY,OAAM;EAAS,UAAS;YACjC,IACC,kBAAC,IAAD;GAAW,OAAM;GAA8B;GAAS,CAAA,GAExD,kBAAC,GAAD;GACE,OAAM;GACN,aAAY;GACZ,CAAA;EAEO,CAAA;CAIjB,IAAM,IAAmB,GAAc,oBAAoB,GAIrD,IAAa,EAAQ,MAAM,MAAM,CAAC,EAAE,cAAc,IAAI,EAAQ,IAC9D,IAAU,EAAQ,SAAS,KAAK,EAAQ,OAAO,MAAM,EAAE,cAAc,EACrE,KAAc,MAAqB,EAAS,GAAiB,GAAI,EAAS,CAAC,EAC3E,IAAY,KAAK,IAAI,GAAG,EAAQ,SAAS,EAAiB,EAC1D,KACJ,KAAgB,EAAa,eAAe,MACxC,oDACA,MAAc,IACZ,mCACA,GAAG,EAAU,+BACf,KAAW,GAAG,EAAO,SAAS,GAAG,GAAG,EAAO;AAEjD,QACE,kBAAC,GAAD;EACE,UAAS;EACT,OAAO,EAAO;EACd,aAAa,EAAO,WAAW,KAAA;EAC/B,SACE,IACE,IACE,kBAAC,GAAD;GAAQ,eAAe,EAAW,EAAW,GAAG;GAAE,eAAY;aAA9D,CACa,EAAV,IAAW,IAA6B,GAA9B,EAAc,MAAM,IAAM,CAA2B,EAC/D,IACG,kBACA,IAAmB,IACjB,sBACA,eACC;OACP,OAEJ,kBAAC,GAAD;GAAQ,SAAS;GAAc,UAAU;aAAzC;IACE,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA;;IAAE,IAAY,eAAe;IAC5C;;YAnBf;GAwBE,kBAAC,GAAD;IACE,QAAO;IACP,MAAM;IACN,MAAM,EAAU,EAAO,SAAS,EAAO,MAAM;IAC7C,WAAU;cAEV,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAO,SAAS;OACZ,CAAA;MACP,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAO;OACL,CAAA;MACL,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,GAAD;SAAW,MAAM;mBAAa,EAAa,EAAO,MAAM;SAAa,CAAA;QACrE,kBAAC,GAAD;SAAW,MAAM;mBAAe,EAAa,EAAO,OAAO;SAAa,CAAA;QACvE,EAAO,QAAQ,kBAAC,GAAD;SAAW,MAAM;mBAAS,EAAO;SAAkB,CAAA,GAAG;QACrE,EAAO,gBAAgB,kBAAC,GAAD;SAAW,MAAM;mBAAM;SAAmB,CAAA,GAAG;QACjE;;MACF;;IACK,CAAA;GAEb,kBAAC,GAAD;IAAU,MAAM,EAAO;IAAM,WAAU;IAAS,CAAA;GAEhD,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAU,OAAM;MAAU,OAAO,EAAQ;MAAQ,MAAM;MAAU,MAAK;MAAS,CAAA;KAC/E,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,EAAe,EAAO,iBAAiB;MAC9C,MAAM;MACN,MAAK;MACL,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,EAAO,aAAa,UAAU;MACrC,MAAM;MACN,MAAK;MACL,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,IAAe,GAAG,EAAa,YAAY,KAAK;MACvD,MAAM;MACN,MAAK;MACL,CAAA;KACE;;GAEL,IACC,kBAAC,GAAD;IAAW,WAAU;cAArB;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,QAAD;QAAM,WAAU;kBACd,kBAAC,GAAD,EAAY,MAAM,IAAM,CAAA;QACnB,CAAA;OACP,kBAAC,QAAD;QAAM,WAAU;kBAA0C;QAAoB,CAAA;OAC9E,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG;SAAiB;SAAE,EAAQ;SAAO;SAAY,EAAa;SAAY;SACnE;;OACH;;KACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD;OACE,WAAU;OACV,OAAO,EAAE,OAAO,GAAG,EAAa,YAAY,IAAI;OAChD,CAAA;MACE,CAAA;KACN,kBAAC,KAAD;MAAG,WAAU;gBAAgC;MAAc,CAAA;KACjD;QACV;GAEH,IACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,WAAW,EACT,sCACA,EAAc,WAAW,YACrB,+DACA,iEACL;eANH,CAQE,kBAAC,QAAD;MAAM,WAAU;gBACd,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA;MACf,CAAA,EACP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAc,WAAW,YACtB,iCACA;OACA,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAc,WAAW,YACtB,iEACA;OACA,CAAA,CACF;QACI;QACZ,kBAAC,IAAD;KACE,aAAa;KACb,aAAa,GAAa,QAAQ,KAAA;KAClC,aAAa,EAAc,QAAQ,SAAS,EAAO;KACnD,CAAA,CACE;QACJ,KACF,kBAAC,GAAD;IAAW,WAAU;cAArB,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBACd,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA;MACf,CAAA,EACP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;gBAA4C;MAErD,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAA0B;MAEnC,CAAA,CACF,EAAA,CAAA,CACF;QACN,kBAAC,GAAD;KAAQ,SAAS;KAAwB,UAAU;eAAnD;MACE,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;;MAAE,IAAW,aAAa;MACtC;OACC;QACV;GAEJ,kBAAC,GAAD;IAAW,WAAU;cAArB;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBAAd;QACE,kBAAC,GAAD;SAAU,MAAM;SAAI,WAAU;SAAwB,CAAA;;QACrD,EAAO,gBAAgB,kBAAC,IAAD,EAAc,QAAQ,EAAO,UAAY,CAAA,GAAG;QACjE;UACJ,EAAQ,SACP,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACG;QAAiB;QAAE,EAAQ;QAAO;QAC9B;WACL,KACA;;KACL,EAAO,WACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OACE,SAAA;OACA,aAAY;OACZ,CAAA;MACE,CAAA,GACJ;KACH,EAAQ,WAAW,IAClB,kBAAC,KAAD;MAAG,WAAU;gBAA2C;MAEpD,CAAA,GAEJ,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAQ,KAAK,GAAQ,MACpB,kBAAC,IAAD;OAEU;OACR,OAAO;OACP,MAAM,CAAC,CAAC,EAAO;OACf,MAAM,MAAiB,EAAO;OAC9B,gBAAgB,EAAgB,MAAiB,EAAO,KAAK,OAAO,EAAO,GAAG;OAC9E,eAAe,EAAW,EAAO,GAAG;OACpC,EAPK,EAAO,GAOZ,CACF;MACE,CAAA;KAEE;;GACD"}

package/dist/technospam/pages/CoursesCoursesPagePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesCoursesPagePage.d.ts","sourceRoot":"","sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"names":[],"mappings":"AAmFA,wBAAgB,sBAAsB,gCAwKrC"}
+{"version":3,"file":"CoursesCoursesPagePage.d.ts","sourceRoot":"","sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"names":[],"mappings":"AAoFA,wBAAgB,sBAAsB,gCAqLrC"}

package/dist/technospam/pages/CoursesCoursesPagePage.js

@@ -14,9 +14,9 @@ import "../components/index.js";
 import { useMemo as v, useState as y } from "react";
 import { BookOpen as b, Clock as x, GraduationCap as S, Layers as C, Search as w, Sparkles as T } from "lucide-react";
 import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { Badge as O, Button as k, GlassCard as A, Input as j, Tabs as M, TabsList as N, TabsTrigger as P } from "@burdenoff/fe-libs/ui";
+import { Badge as O, Button as k, GlassCard as A, Input as j, Tabs as M, TabsContent as N, TabsList as P, TabsTrigger as F } from "@burdenoff/fe-libs/ui";
 //#region src/technospam/pages/CoursesCoursesPagePage.tsx
-function F({ course: e, onOpen: t }) {
+function I({ course: e, onOpen: t }) {
 	return /* @__PURE__ */ D(A, {
 		className: "group flex cursor-pointer flex-col overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg",
 		onClick: t,
@@ -73,8 +73,8 @@ function F({ course: e, onOpen: t }) {
 		})]
 	});
 }
-function I() {
-	let o = t(), { workspaceId: s } = e(), { emit: l } = n(), m = r(), [C, O] = y("ALL"), [A, I] = y(""), L = v(() => [
+function L() {
+	let o = t(), { workspaceId: s } = e(), { emit: l } = n(), m = r(), [C, O] = y("ALL"), [A, L] = y(""), R = v(() => [
 		{
 			value: "ALL",
 			label: m("technospam.courses.filterAllLevels", "All levels")
@@ -95,14 +95,14 @@ function I() {
 			value: "EXPERT",
 			label: m("technospam.courses.filterExpert", "Expert")
 		}
-	], [m]), { limit: R, more: z } = _(), { data: B, loading: V, error: H } = g({
+	], [m]), { limit: z, more: B } = _(), { data: V, loading: H, error: U } = g({
 		status: "PUBLISHED",
-		pagination: h(R),
+		pagination: h(z),
 		...C === "ALL" ? {} : { level: C }
-	}), U = B?.tecListCourses?.items ?? [], W = B?.tecListCourses?.pageInfo?.hasMore ?? !1, G = v(() => {
+	}), W = V?.tecListCourses?.items ?? [], G = V?.tecListCourses?.pageInfo?.hasMore ?? !1, K = v(() => {
 		let e = A.trim().toLowerCase();
-		return e ? U.filter((t) => t.title.toLowerCase().includes(e) || (t.topic ?? "").toLowerCase().includes(e) || t.tags.some((t) => t.toLowerCase().includes(e))) : U;
-	}, [U, A]);
+		return e ? W.filter((t) => t.title.toLowerCase().includes(e) || (t.topic ?? "").toLowerCase().includes(e) || t.tags.some((t) => t.toLowerCase().includes(e))) : W;
+	}, [W, A]);
 	return /* @__PURE__ */ D(i, {
 		hero: !0,
 		title: m("technospam.courses.title", "Course Catalog"),
@@ -116,55 +116,54 @@ function I() {
 				m("technospam.common.myLearning", "My Learning")
 			]
 		}),
-		children: [
-			/* @__PURE__ */ D("div", {
-				className: "mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4",
-				children: [
-					/* @__PURE__ */ E(a, {
-						label: m("technospam.courses.statCourses", "Courses"),
-						value: U.length,
-						icon: b,
-						tone: "blue"
-					}),
-					/* @__PURE__ */ E(a, {
-						label: m("technospam.courses.statBeginnerFriendly", "Beginner-friendly"),
-						value: U.filter((e) => e.level === "BEGINNER").length,
-						icon: T,
-						tone: "green"
-					}),
-					/* @__PURE__ */ E(a, {
-						label: m("technospam.courses.statAdvancedPlus", "Advanced+"),
-						value: U.filter((e) => e.level === "ADVANCED" || e.level === "EXPERT").length,
-						icon: S,
-						tone: "purple"
-					}),
-					/* @__PURE__ */ E(a, {
-						label: m("technospam.courses.statTotalContent", "Total content"),
-						value: c(U.reduce((e, t) => e + t.estimatedMinutes, 0)),
-						icon: x,
-						tone: "teal"
-					})
-				]
-			}),
-			/* @__PURE__ */ D("div", {
+		children: [/* @__PURE__ */ D("div", {
+			className: "mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4",
+			children: [
+				/* @__PURE__ */ E(a, {
+					label: m("technospam.courses.statCourses", "Courses"),
+					value: W.length,
+					icon: b,
+					tone: "blue"
+				}),
+				/* @__PURE__ */ E(a, {
+					label: m("technospam.courses.statBeginnerFriendly", "Beginner-friendly"),
+					value: W.filter((e) => e.level === "BEGINNER").length,
+					icon: T,
+					tone: "green"
+				}),
+				/* @__PURE__ */ E(a, {
+					label: m("technospam.courses.statAdvancedPlus", "Advanced+"),
+					value: W.filter((e) => e.level === "ADVANCED" || e.level === "EXPERT").length,
+					icon: S,
+					tone: "purple"
+				}),
+				/* @__PURE__ */ E(a, {
+					label: m("technospam.courses.statTotalContent", "Total content"),
+					value: c(W.reduce((e, t) => e + t.estimatedMinutes, 0)),
+					icon: x,
+					tone: "teal"
+				})
+			]
+		}), /* @__PURE__ */ D(M, {
+			className: "gap-0",
+			value: C,
+			onValueChange: (e) => O(e),
+			children: [/* @__PURE__ */ D("div", {
 				className: "mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ E(M, {
-					value: C,
-					onValueChange: (e) => O(e),
-					children: /* @__PURE__ */ E(N, { children: L.map((e) => /* @__PURE__ */ E(P, {
-						value: e.value,
-						children: e.label
-					}, e.value)) })
-				}), /* @__PURE__ */ D("div", {
+				children: [/* @__PURE__ */ E(P, { children: R.map((e) => /* @__PURE__ */ E(F, {
+					value: e.value,
+					children: e.label
+				}, e.value)) }), /* @__PURE__ */ D("div", {
 					className: "relative w-full sm:w-72",
 					children: [/* @__PURE__ */ E(w, {
 						className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted",
 						size: 16
 					}), /* @__PURE__ */ E(j, {
 						className: "pl-9",
+						"aria-label": m("technospam.courses.searchLabel", "Search courses"),
 						placeholder: m("technospam.courses.searchPlaceholder", "Search courses…"),
 						value: A,
-						onChange: (e) => I(e.target.value),
+						onChange: (e) => L(e.target.value),
 						onBlur: () => {
 							let e = A.trim();
 							e && l("technospam.search.performed", {
@@ -175,36 +174,37 @@ function I() {
 						}
 					})]
 				})]
-			}),
-			V && !U.length ? /* @__PURE__ */ E(p, {}) : H ? /* @__PURE__ */ E(f, {
-				title: m("technospam.common.errorLoadCourses", "Couldn't load courses"),
-				error: H
-			}) : G.length === 0 ? /* @__PURE__ */ E(d, {
-				icon: /* @__PURE__ */ E(b, { size: 26 }),
-				title: A || C !== "ALL" ? m("technospam.courses.emptySearchTitle", "No matching courses") : m("technospam.courses.emptyDefaultTitle", "No courses published yet"),
-				description: A || C !== "ALL" ? m("technospam.courses.emptySearchDesc", "Try a different search or level filter.") : m("technospam.courses.emptyDefaultDesc", "Published courses will appear here. Check back soon — TechnoSpam is pre-launch.")
-			}) : /* @__PURE__ */ E("div", {
-				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: G.map((e) => /* @__PURE__ */ E(F, {
-					course: e,
-					onOpen: () => {
-						l("technospam.course.viewed", {
-							workspaceId: s,
-							entityId: e.id,
-							entityType: "TEC_COURSE"
-						}), o(`/courses/course-details-page?id=${e.id}`);
-					}
-				}, e.id))
-			}),
-			/* @__PURE__ */ E(u, {
-				hasMore: W,
-				loading: V,
-				onClick: z
-			})
-		]
+			}), /* @__PURE__ */ D(N, {
+				value: C,
+				children: [H && !W.length ? /* @__PURE__ */ E(p, {}) : U ? /* @__PURE__ */ E(f, {
+					title: m("technospam.common.errorLoadCourses", "Couldn't load courses"),
+					error: U
+				}) : K.length === 0 ? /* @__PURE__ */ E(d, {
+					icon: /* @__PURE__ */ E(b, { size: 26 }),
+					title: A || C !== "ALL" ? m("technospam.courses.emptySearchTitle", "No matching courses") : m("technospam.courses.emptyDefaultTitle", "No courses published yet"),
+					description: A || C !== "ALL" ? m("technospam.courses.emptySearchDesc", "Try a different search or level filter.") : m("technospam.courses.emptyDefaultDesc", "Published courses will appear here. Check back soon — TechnoSpam is pre-launch.")
+				}) : /* @__PURE__ */ E("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+					children: K.map((e) => /* @__PURE__ */ E(I, {
+						course: e,
+						onOpen: () => {
+							l("technospam.course.viewed", {
+								workspaceId: s,
+								entityId: e.id,
+								entityType: "TEC_COURSE"
+							}), o(`/courses/course-details-page?id=${e.id}`);
+						}
+					}, e.id))
+				}), /* @__PURE__ */ E(u, {
+					hasMore: G,
+					loading: H,
+					onClick: B
+				})]
+			})]
+		})]
 	});
 }
 //#endregion
-export { I as CoursesCoursesPagePage };
+export { L as CoursesCoursesPagePage };
 
 //# sourceMappingURL=CoursesCoursesPagePage.js.map

package/dist/technospam/pages/CoursesCoursesPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesCoursesPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { BookOpen, Clock, GraduationCap, Layers, Search, Sparkles } from 'lucide-react';\nimport {\n  Badge,\n  Button,\n  GlassCard,\n  Input,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadMore,\n  LoadingGrid,\n  MediaCover,\n  PageLayout,\n  PremiumBadge,\n  StatCard,\n  StatusBadge,\n  topicIcon,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  pageArg,\n  useCoursesQuery,\n  usePageLimit,\n  type TecCourse,\n  type TecCourseLevel,\n} from '../api/technospamApi';\nimport { formatDuration } from '../utils/format';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport { useTr } from '../hooks/useTr';\n\nfunction CourseCard({ course, onOpen }: { course: TecCourse; onOpen: () => void }) {\n  return (\n    <GlassCard\n      className=\"group flex cursor-pointer flex-col overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg\"\n      onClick={onOpen}\n    >\n      <MediaCover\n        seed={`${course.topic ?? ''} ${course.title}`}\n        icon={topicIcon(course.topic ?? course.title)}\n      >\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          <StatusBadge status={course.level} kind=\"level\" />\n          {course.isPremiumOnly ? <PremiumBadge locked={course.isLocked} /> : null}\n        </div>\n      </MediaCover>\n      <div className=\"flex flex-1 flex-col gap-3 p-4\">\n        <div className=\"min-w-0\">\n          <h3 className=\"truncate text-base font-semibold text-text-primary group-hover:text-accent-primary\">\n            {course.title}\n          </h3>\n          {course.summary ? (\n            <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{course.summary}</p>\n          ) : null}\n        </div>\n        <div className=\"mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted\">\n          {course.topic ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Layers size={13} /> {course.topic}\n            </span>\n          ) : null}\n          <span className=\"inline-flex items-center gap-1\">\n            <Clock size={13} /> {formatDuration(course.estimatedMinutes)}\n          </span>\n        </div>\n        {course.tags.length ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {course.tags.slice(0, 3).map((t) => (\n              <Badge key={t} variant=\"secondary\" className=\"text-[11px]\">\n                {t}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCoursesPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const { workspaceId } = useTechnoSpam();\n  const { emit } = useTechnoSpamAnalytics();\n  const tr = useTr();\n  const [level, setLevel] = useState<'ALL' | TecCourseLevel>('ALL');\n  const [search, setSearch] = useState('');\n\n  const levels = useMemo(\n    () => [\n      { value: 'ALL' as const, label: tr('technospam.courses.filterAllLevels', 'All levels') },\n      {\n        value: 'BEGINNER' as TecCourseLevel,\n        label: tr('technospam.courses.filterBeginner', 'Beginner'),\n      },\n      {\n        value: 'INTERMEDIATE' as TecCourseLevel,\n        label: tr('technospam.courses.filterIntermediate', 'Intermediate'),\n      },\n      {\n        value: 'ADVANCED' as TecCourseLevel,\n        label: tr('technospam.courses.filterAdvanced', 'Advanced'),\n      },\n      { value: 'EXPERT' as TecCourseLevel, label: tr('technospam.courses.filterExpert', 'Expert') },\n    ],\n    [tr]\n  );\n\n  const { limit, more } = usePageLimit();\n  const { data, loading, error } = useCoursesQuery({\n    status: 'PUBLISHED',\n    pagination: pageArg(limit),\n    ...(level !== 'ALL' ? { level } : {}),\n  });\n\n  const courses = data?.tecListCourses?.items ?? [];\n  const hasMore = data?.tecListCourses?.pageInfo?.hasMore ?? false;\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return courses;\n    return courses.filter(\n      (c) =>\n        c.title.toLowerCase().includes(q) ||\n        (c.topic ?? '').toLowerCase().includes(q) ||\n        c.tags.some((t) => t.toLowerCase().includes(q))\n    );\n  }, [courses, search]);\n\n  return (\n    <PageLayout\n      hero\n      title={tr('technospam.courses.title', 'Course Catalog')}\n      description={tr(\n        'technospam.courses.description',\n        'Learn technology by doing — practical, project-based courses across the stack.'\n      )}\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/my-learning-page')}>\n          <GraduationCap size={16} /> {tr('technospam.common.myLearning', 'My Learning')}\n        </Button>\n      }\n    >\n      <div className=\"mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard\n          label={tr('technospam.courses.statCourses', 'Courses')}\n          value={courses.length}\n          icon={BookOpen}\n          tone=\"blue\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statBeginnerFriendly', 'Beginner-friendly')}\n          value={courses.filter((c) => c.level === 'BEGINNER').length}\n          icon={Sparkles}\n          tone=\"green\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statAdvancedPlus', 'Advanced+')}\n          value={courses.filter((c) => c.level === 'ADVANCED' || c.level === 'EXPERT').length}\n          icon={GraduationCap}\n          tone=\"purple\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statTotalContent', 'Total content')}\n          value={formatDuration(courses.reduce((s, c) => s + c.estimatedMinutes, 0))}\n          icon={Clock}\n          tone=\"teal\"\n        />\n      </div>\n\n      <div className=\"mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <Tabs value={level} onValueChange={(v) => setLevel(v as 'ALL' | TecCourseLevel)}>\n          <TabsList>\n            {levels.map((l) => (\n              <TabsTrigger key={l.value} value={l.value}>\n                {l.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </Tabs>\n        <div className=\"relative w-full sm:w-72\">\n          <Search\n            className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted\"\n            size={16}\n          />\n          <Input\n            className=\"pl-9\"\n            placeholder={tr('technospam.courses.searchPlaceholder', 'Search courses…')}\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            onBlur={() => {\n              const value = search.trim();\n              if (value) {\n                emit('technospam.search.performed', {\n                  workspaceId,\n                  entityType: 'course',\n                  queryLength: value.length,\n                });\n              }\n            }}\n          />\n        </div>\n      </div>\n\n      {loading && !courses.length ? (\n        <LoadingGrid />\n      ) : error ? (\n        <ErrorView\n          title={tr('technospam.common.errorLoadCourses', \"Couldn't load courses\")}\n          error={error}\n        />\n      ) : filtered.length === 0 ? (\n        <EmptyView\n          icon={<BookOpen size={26} />}\n          title={\n            search || level !== 'ALL'\n              ? tr('technospam.courses.emptySearchTitle', 'No matching courses')\n              : tr('technospam.courses.emptyDefaultTitle', 'No courses published yet')\n          }\n          description={\n            search || level !== 'ALL'\n              ? tr('technospam.courses.emptySearchDesc', 'Try a different search or level filter.')\n              : tr(\n                  'technospam.courses.emptyDefaultDesc',\n                  'Published courses will appear here. Check back soon — TechnoSpam is pre-launch.'\n                )\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {filtered.map((course) => (\n            <CourseCard\n              key={course.id}\n              course={course}\n              onOpen={() => {\n                emit('technospam.course.viewed', {\n                  workspaceId,\n                  entityId: course.id,\n                  entityType: 'TEC_COURSE',\n                });\n                navigate(`/courses/course-details-page?id=${course.id}`);\n              }}\n            />\n          ))}\n        </div>\n      )}\n      <LoadMore hasMore={hasMore} loading={loading} onClick={more} />\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CoursesCoursesPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesCoursesPagePage.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { BookOpen, Clock, GraduationCap, Layers, Search, Sparkles } from 'lucide-react';\nimport {\n  Badge,\n  Button,\n  GlassCard,\n  Input,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  EmptyView,\n  ErrorView,\n  LoadMore,\n  LoadingGrid,\n  MediaCover,\n  PageLayout,\n  PremiumBadge,\n  StatCard,\n  StatusBadge,\n  topicIcon,\n} from '../components';\nimport { useTechnoSpam, useTechnoSpamNavigate } from '../providers/TechnoSpamProvider';\nimport {\n  pageArg,\n  useCoursesQuery,\n  usePageLimit,\n  type TecCourse,\n  type TecCourseLevel,\n} from '../api/technospamApi';\nimport { formatDuration } from '../utils/format';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport { useTr } from '../hooks/useTr';\n\nfunction CourseCard({ course, onOpen }: { course: TecCourse; onOpen: () => void }) {\n  return (\n    <GlassCard\n      className=\"group flex cursor-pointer flex-col overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg\"\n      onClick={onOpen}\n    >\n      <MediaCover\n        seed={`${course.topic ?? ''} ${course.title}`}\n        icon={topicIcon(course.topic ?? course.title)}\n      >\n        <div className=\"flex flex-wrap items-center gap-1.5\">\n          <StatusBadge status={course.level} kind=\"level\" />\n          {course.isPremiumOnly ? <PremiumBadge locked={course.isLocked} /> : null}\n        </div>\n      </MediaCover>\n      <div className=\"flex flex-1 flex-col gap-3 p-4\">\n        <div className=\"min-w-0\">\n          <h3 className=\"truncate text-base font-semibold text-text-primary group-hover:text-accent-primary\">\n            {course.title}\n          </h3>\n          {course.summary ? (\n            <p className=\"mt-1 line-clamp-2 text-sm text-text-secondary\">{course.summary}</p>\n          ) : null}\n        </div>\n        <div className=\"mt-auto flex flex-wrap items-center gap-3 text-xs text-text-muted\">\n          {course.topic ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Layers size={13} /> {course.topic}\n            </span>\n          ) : null}\n          <span className=\"inline-flex items-center gap-1\">\n            <Clock size={13} /> {formatDuration(course.estimatedMinutes)}\n          </span>\n        </div>\n        {course.tags.length ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {course.tags.slice(0, 3).map((t) => (\n              <Badge key={t} variant=\"secondary\" className=\"text-[11px]\">\n                {t}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function CoursesCoursesPagePage() {\n  const navigate = useTechnoSpamNavigate();\n  const { workspaceId } = useTechnoSpam();\n  const { emit } = useTechnoSpamAnalytics();\n  const tr = useTr();\n  const [level, setLevel] = useState<'ALL' | TecCourseLevel>('ALL');\n  const [search, setSearch] = useState('');\n\n  const levels = useMemo(\n    () => [\n      { value: 'ALL' as const, label: tr('technospam.courses.filterAllLevels', 'All levels') },\n      {\n        value: 'BEGINNER' as TecCourseLevel,\n        label: tr('technospam.courses.filterBeginner', 'Beginner'),\n      },\n      {\n        value: 'INTERMEDIATE' as TecCourseLevel,\n        label: tr('technospam.courses.filterIntermediate', 'Intermediate'),\n      },\n      {\n        value: 'ADVANCED' as TecCourseLevel,\n        label: tr('technospam.courses.filterAdvanced', 'Advanced'),\n      },\n      { value: 'EXPERT' as TecCourseLevel, label: tr('technospam.courses.filterExpert', 'Expert') },\n    ],\n    [tr]\n  );\n\n  const { limit, more } = usePageLimit();\n  const { data, loading, error } = useCoursesQuery({\n    status: 'PUBLISHED',\n    pagination: pageArg(limit),\n    ...(level !== 'ALL' ? { level } : {}),\n  });\n\n  const courses = data?.tecListCourses?.items ?? [];\n  const hasMore = data?.tecListCourses?.pageInfo?.hasMore ?? false;\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return courses;\n    return courses.filter(\n      (c) =>\n        c.title.toLowerCase().includes(q) ||\n        (c.topic ?? '').toLowerCase().includes(q) ||\n        c.tags.some((t) => t.toLowerCase().includes(q))\n    );\n  }, [courses, search]);\n\n  return (\n    <PageLayout\n      hero\n      title={tr('technospam.courses.title', 'Course Catalog')}\n      description={tr(\n        'technospam.courses.description',\n        'Learn technology by doing — practical, project-based courses across the stack.'\n      )}\n      actions={\n        <Button variant=\"outline\" onClick={() => navigate('/courses/my-learning-page')}>\n          <GraduationCap size={16} /> {tr('technospam.common.myLearning', 'My Learning')}\n        </Button>\n      }\n    >\n      <div className=\"mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4\">\n        <StatCard\n          label={tr('technospam.courses.statCourses', 'Courses')}\n          value={courses.length}\n          icon={BookOpen}\n          tone=\"blue\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statBeginnerFriendly', 'Beginner-friendly')}\n          value={courses.filter((c) => c.level === 'BEGINNER').length}\n          icon={Sparkles}\n          tone=\"green\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statAdvancedPlus', 'Advanced+')}\n          value={courses.filter((c) => c.level === 'ADVANCED' || c.level === 'EXPERT').length}\n          icon={GraduationCap}\n          tone=\"purple\"\n        />\n        <StatCard\n          label={tr('technospam.courses.statTotalContent', 'Total content')}\n          value={formatDuration(courses.reduce((s, c) => s + c.estimatedMinutes, 0))}\n          icon={Clock}\n          tone=\"teal\"\n        />\n      </div>\n\n      {/* The tabs filter one list, so that list is their tab panel: Radix points every\n          trigger's aria-controls at a panel id, and without a TabsContent the id\n          resolved to nothing (axe aria-valid-attr-value, critical; BOFF-3157). */}\n      <Tabs\n        className=\"gap-0\"\n        value={level}\n        onValueChange={(v) => setLevel(v as 'ALL' | TecCourseLevel)}\n      >\n        <div className=\"mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <TabsList>\n            {levels.map((l) => (\n              <TabsTrigger key={l.value} value={l.value}>\n                {l.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          <div className=\"relative w-full sm:w-72\">\n            <Search\n              className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-muted\"\n              size={16}\n            />\n            <Input\n              className=\"pl-9\"\n              aria-label={tr('technospam.courses.searchLabel', 'Search courses')}\n              placeholder={tr('technospam.courses.searchPlaceholder', 'Search courses…')}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onBlur={() => {\n                const value = search.trim();\n                if (value) {\n                  emit('technospam.search.performed', {\n                    workspaceId,\n                    entityType: 'course',\n                    queryLength: value.length,\n                  });\n                }\n              }}\n            />\n          </div>\n        </div>\n\n        <TabsContent value={level}>\n          {loading && !courses.length ? (\n            <LoadingGrid />\n          ) : error ? (\n            <ErrorView\n              title={tr('technospam.common.errorLoadCourses', \"Couldn't load courses\")}\n              error={error}\n            />\n          ) : filtered.length === 0 ? (\n            <EmptyView\n              icon={<BookOpen size={26} />}\n              title={\n                search || level !== 'ALL'\n                  ? tr('technospam.courses.emptySearchTitle', 'No matching courses')\n                  : tr('technospam.courses.emptyDefaultTitle', 'No courses published yet')\n              }\n              description={\n                search || level !== 'ALL'\n                  ? tr(\n                      'technospam.courses.emptySearchDesc',\n                      'Try a different search or level filter.'\n                    )\n                  : tr(\n                      'technospam.courses.emptyDefaultDesc',\n                      'Published courses will appear here. Check back soon — TechnoSpam is pre-launch.'\n                    )\n              }\n            />\n          ) : (\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n              {filtered.map((course) => (\n                <CourseCard\n                  key={course.id}\n                  course={course}\n                  onOpen={() => {\n                    emit('technospam.course.viewed', {\n                      workspaceId,\n                      entityId: course.id,\n                      entityType: 'TEC_COURSE',\n                    });\n                    navigate(`/courses/course-details-page?id=${course.id}`);\n                  }}\n                />\n              ))}\n            </div>\n          )}\n          <LoadMore hasMore={hasMore} loading={loading} onClick={more} />\n        </TabsContent>\n      </Tabs>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoCA,SAAS,EAAW,EAAE,WAAQ,aAAqD;AACjF,QACE,kBAAC,GAAD;EACE,WAAU;EACV,SAAS;YAFX,CAIE,kBAAC,GAAD;GACE,MAAM,GAAG,EAAO,SAAS,GAAG,GAAG,EAAO;GACtC,MAAM,EAAU,EAAO,SAAS,EAAO,MAAM;aAE7C,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAa,QAAQ,EAAO;KAAO,MAAK;KAAU,CAAA,EACjD,EAAO,gBAAgB,kBAAC,GAAD,EAAc,QAAQ,EAAO,UAAY,CAAA,GAAG,KAChE;;GACK,CAAA,EACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAO;MACL,CAAA,EACJ,EAAO,UACN,kBAAC,KAAD;MAAG,WAAU;gBAAiD,EAAO;MAAY,CAAA,GAC/E,KACA;;IACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,EAAO,QACN,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA;;OAAE,EAAO;OACxB;UACL,MACJ,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;;OAAE,EAAe,EAAO,iBAAiB;OACvD;QACH;;IACL,EAAO,KAAK,SACX,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAO,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,MAC5B,kBAAC,GAAD;MAAe,SAAQ;MAAY,WAAU;gBAC1C;MACK,EAFI,EAEJ,CACR;KACE,CAAA,GACJ;IACA;KACI;;;AAIhB,SAAgB,IAAyB;CACvC,IAAM,IAAW,GAAuB,EAClC,EAAE,mBAAgB,GAAe,EACjC,EAAE,YAAS,GAAwB,EACnC,IAAK,GAAO,EACZ,CAAC,GAAO,KAAY,EAAiC,MAAM,EAC3D,CAAC,GAAQ,KAAa,EAAS,GAAG,EAElC,IAAS,QACP;EACJ;GAAE,OAAO;GAAgB,OAAO,EAAG,sCAAsC,aAAa;GAAE;EACxF;GACE,OAAO;GACP,OAAO,EAAG,qCAAqC,WAAW;GAC3D;EACD;GACE,OAAO;GACP,OAAO,EAAG,yCAAyC,eAAe;GACnE;EACD;GACE,OAAO;GACP,OAAO,EAAG,qCAAqC,WAAW;GAC3D;EACD;GAAE,OAAO;GAA4B,OAAO,EAAG,mCAAmC,SAAS;GAAE;EAC9F,EACD,CAAC,EAAG,CACL,EAEK,EAAE,UAAO,YAAS,GAAc,EAChC,EAAE,SAAM,YAAS,aAAU,EAAgB;EAC/C,QAAQ;EACR,YAAY,EAAQ,EAAM;EAC1B,GAAI,MAAU,QAAoB,EAAE,GAAd,EAAE,UAAO;EAChC,CAAC,EAEI,IAAU,GAAM,gBAAgB,SAAS,EAAE,EAC3C,IAAU,GAAM,gBAAgB,UAAU,WAAW,IACrD,IAAW,QAAc;EAC7B,IAAM,IAAI,EAAO,MAAM,CAAC,aAAa;AAErC,SADK,IACE,EAAQ,QACZ,MACC,EAAE,MAAM,aAAa,CAAC,SAAS,EAAE,KAChC,EAAE,SAAS,IAAI,aAAa,CAAC,SAAS,EAAE,IACzC,EAAE,KAAK,MAAM,MAAM,EAAE,aAAa,CAAC,SAAS,EAAE,CAAC,CAClD,GANc;IAOd,CAAC,GAAS,EAAO,CAAC;AAErB,QACE,kBAAC,GAAD;EACE,MAAA;EACA,OAAO,EAAG,4BAA4B,iBAAiB;EACvD,aAAa,EACX,kCACA,iFACD;EACD,SACE,kBAAC,GAAD;GAAQ,SAAQ;GAAU,eAAe,EAAS,4BAA4B;aAA9E;IACE,kBAAC,GAAD,EAAe,MAAM,IAAM,CAAA;;IAAE,EAAG,gCAAgC,cAAc;IACvE;;YAVb,CAaE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,OAAO,EAAG,kCAAkC,UAAU;KACtD,OAAO,EAAQ;KACf,MAAM;KACN,MAAK;KACL,CAAA;IACF,kBAAC,GAAD;KACE,OAAO,EAAG,2CAA2C,oBAAoB;KACzE,OAAO,EAAQ,QAAQ,MAAM,EAAE,UAAU,WAAW,CAAC;KACrD,MAAM;KACN,MAAK;KACL,CAAA;IACF,kBAAC,GAAD;KACE,OAAO,EAAG,uCAAuC,YAAY;KAC7D,OAAO,EAAQ,QAAQ,MAAM,EAAE,UAAU,cAAc,EAAE,UAAU,SAAS,CAAC;KAC7E,MAAM;KACN,MAAK;KACL,CAAA;IACF,kBAAC,GAAD;KACE,OAAO,EAAG,uCAAuC,gBAAgB;KACjE,OAAO,EAAe,EAAQ,QAAQ,GAAG,MAAM,IAAI,EAAE,kBAAkB,EAAE,CAAC;KAC1E,MAAM;KACN,MAAK;KACL,CAAA;IACE;MAKN,kBAAC,GAAD;GACE,WAAU;GACV,OAAO;GACP,gBAAgB,MAAM,EAAS,EAA4B;aAH7D,CAKE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAA,UACG,EAAO,KAAK,MACX,kBAAC,GAAD;KAA2B,OAAO,EAAE;eACjC,EAAE;KACS,EAFI,EAAE,MAEN,CACd,EACO,CAAA,EACX,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MACE,WAAU;MACV,MAAM;MACN,CAAA,EACF,kBAAC,GAAD;MACE,WAAU;MACV,cAAY,EAAG,kCAAkC,iBAAiB;MAClE,aAAa,EAAG,wCAAwC,kBAAkB;MAC1E,OAAO;MACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;MAC1C,cAAc;OACZ,IAAM,IAAQ,EAAO,MAAM;AAC3B,OAAI,KACF,EAAK,+BAA+B;QAClC;QACA,YAAY;QACZ,aAAa,EAAM;QACpB,CAAC;;MAGN,CAAA,CACE;OACF;OAEN,kBAAC,GAAD;IAAa,OAAO;cAApB,CACG,KAAW,CAAC,EAAQ,SACnB,kBAAC,GAAD,EAAe,CAAA,GACb,IACF,kBAAC,GAAD;KACE,OAAO,EAAG,sCAAsC,wBAAwB;KACjE;KACP,CAAA,GACA,EAAS,WAAW,IACtB,kBAAC,GAAD;KACE,MAAM,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA;KAC5B,OACE,KAAU,MAAU,QAChB,EAAG,uCAAuC,sBAAsB,GAChE,EAAG,wCAAwC,2BAA2B;KAE5E,aACE,KAAU,MAAU,QAChB,EACE,sCACA,0CACD,GACD,EACE,uCACA,kFACD;KAEP,CAAA,GAEF,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAS,KAAK,MACb,kBAAC,GAAD;MAEU;MACR,cAAc;AAMZ,OALA,EAAK,4BAA4B;QAC/B;QACA,UAAU,EAAO;QACjB,YAAY;QACb,CAAC,EACF,EAAS,mCAAmC,EAAO,KAAK;;MAE1D,EAVK,EAAO,GAUZ,CACF;KACE,CAAA,EAER,kBAAC,GAAD;KAAmB;KAAkB;KAAS,SAAS;KAAQ,CAAA,CACnD;MACT;KACI"}

package/dist/technospam/pages/CoursesLessonPlayerPagePage.js

@@ -149,7 +149,7 @@ function I() {
 						className: "flex flex-wrap items-center gap-2 text-xs text-text-muted",
 						children: [
 							/* @__PURE__ */ O("span", {
-								className: "inline-flex items-center gap-1 rounded-full bg-accent-primary/10 px-2 py-0.5 font-medium text-accent-primary",
+								className: "inline-flex items-center gap-1 rounded-full bg-accent-primary/6 px-2 py-0.5 font-medium text-accent-primary",
 								children: [
 									/* @__PURE__ */ D(se, { size: 12 }),
 									" ",
@@ -256,7 +256,7 @@ function I() {
 								type: "button",
 								"aria-current": i ? "page" : void 0,
 								onClick: () => T(g(v, e.id)),
-								className: r("flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors hover:bg-bg-sunken", i && "bg-accent-primary/10 font-medium text-accent-primary"),
+								className: r("flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors hover:bg-bg-sunken", i && "bg-accent-primary/6 font-medium text-accent-primary"),
 								children: [
 									/* @__PURE__ */ D("span", {
 										className: "w-5 shrink-0 text-center text-xs tabular-nums text-text-muted",

package/dist/technospam/pages/CoursesLessonPlayerPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoursesLessonPlayerPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesLessonPlayerPagePage.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { Markdown } from '@burdenoff/fe-libs/shared/components/Markdown';\nimport {\n  ArrowLeft,\n  ArrowRight,\n  BookOpen,\n  CheckCircle2,\n  Clock,\n  FileText,\n  Layers,\n  Lock,\n  PlayCircle,\n  Sparkles,\n  type LucideIcon,\n} from 'lucide-react';\nimport { Button, GlassCard, Skeleton } from '@burdenoff/fe-libs/ui';\nimport { EmptyView, ErrorView, PageLayout, UpgradeGate } from '../components';\nimport { InteractiveWorkspace } from '../components/lesson/InteractiveWorkspace';\nimport { QuizLesson } from '../components/lesson/QuizLesson';\nimport { useTechnoSpamNavigate, useTechnoSpam } from '../providers/TechnoSpamProvider';\nimport {\n  useCompleteLesson,\n  useEnroll,\n  useLessonPlayerQuery,\n  type TecLesson,\n  type TecLessonKind,\n} from '../api/technospamApi';\nimport { formatDuration, humanizeEnum } from '../utils/format';\nimport { notify } from '../lib/toast';\nimport { cn } from '../utils/cn';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport { FOCUS_PARAMS } from '../utils/pageContext';\nimport { courseDetailsPath, lessonPlayerPath } from '../utils/lessonPath';\n\nconst KIND_ICON: Record<TecLessonKind, LucideIcon> = {\n  VIDEO: PlayCircle,\n  ARTICLE: FileText,\n  INTERACTIVE: Sparkles,\n  QUIZ: CheckCircle2,\n  PROJECT: Layers,\n};\n\n/** Lessons whose completion is earned (a passed quiz, a matching run) rather than self-reported. */\nfunction completesByCheck(lesson: TecLesson): boolean {\n  if (lesson.kind === 'QUIZ') return (lesson.quizQuestions?.length ?? 0) > 0;\n  if (lesson.kind === 'INTERACTIVE') return !!lesson.expectedOutput;\n  return false;\n}\n\nfunction LessonBody({ lesson, onProgress }: { lesson: TecLesson; onProgress: () => void }) {\n  const notes = lesson.content ? (\n    <Markdown className=\"prose prose-sm max-w-none text-text-secondary dark:prose-invert\">\n      {lesson.content}\n    </Markdown>\n  ) : null;\n\n  switch (lesson.kind) {\n    case 'VIDEO': {\n      const src = lesson.file?.downloadUrl;\n      const isVideo = !lesson.file?.mimeType || lesson.file.mimeType.startsWith('video/');\n      return (\n        <div className=\"space-y-4\">\n          {src && isVideo ? (\n            <video\n              controls\n              preload=\"metadata\"\n              src={src}\n              className=\"aspect-video w-full rounded-xl bg-bg-sunken\"\n              data-testid=\"lesson-video\"\n            >\n              <track kind=\"captions\" />\n            </video>\n          ) : (\n            <p className=\"rounded-xl border border-dashed border-border-seam px-4 py-3 text-sm text-text-muted\">\n              The video for this lesson has not been uploaded yet.\n            </p>\n          )}\n          {notes}\n        </div>\n      );\n    }\n    case 'QUIZ':\n      return (\n        <div className=\"space-y-4\">\n          {notes}\n          <QuizLesson key={lesson.id} lesson={lesson} onPassed={onProgress} />\n        </div>\n      );\n    case 'INTERACTIVE':\n      return (\n        <div className=\"grid grid-cols-1 gap-5 xl:grid-cols-2\">\n          <div className=\"min-w-0\">\n            {notes ?? (\n              <p className=\"text-sm text-text-muted\">\n                Edit the code, run it, and compare the output with what the lesson expects.\n              </p>\n            )}\n          </div>\n          <div className=\"min-w-0\">\n            <InteractiveWorkspace key={lesson.id} lesson={lesson} onCompleted={onProgress} />\n          </div>\n        </div>\n      );\n    case 'PROJECT':\n    case 'ARTICLE':\n    default:\n      return (\n        notes ?? (\n          <p className=\"rounded-xl border border-dashed border-border-seam px-4 py-3 text-sm text-text-muted\">\n            No content published for this lesson yet.\n          </p>\n        )\n      );\n  }\n}\n\n/**\n * Lesson player (BOFF-4107): renders one lesson of a course by kind — article\n * and project briefs as markdown, video through the federated File, quizzes\n * graded server-side, and a runnable sandbox workspace for INTERACTIVE\n * lessons — with the curriculum alongside and per-lesson progress tracking.\n * URL: `/courses/lesson-player-page?id=<courseId>&lessonId=<lessonId>`.\n */\nexport function CoursesLessonPlayerPagePage() {\n  const [params] = useSearchParams();\n  const courseId = params.get(FOCUS_PARAMS.id) ?? '';\n  const lessonId = params.get(FOCUS_PARAMS.lesson) ?? '';\n  const navigate = useTechnoSpamNavigate();\n  const { workspaceId } = useTechnoSpam();\n  const { emit } = useTechnoSpamAnalytics();\n  const { data, loading, error, refetch } = useLessonPlayerQuery(courseId, lessonId);\n  const [completeLesson, { loading: completing }] = useCompleteLesson();\n  const [enroll, { loading: enrolling }] = useEnroll();\n\n  useEffect(() => {\n    if (lessonId) {\n      emit('technospam.lesson.viewed', {\n        workspaceId,\n        entityId: lessonId,\n        entityType: 'TEC_LESSON',\n      });\n    }\n  }, [lessonId, workspaceId, emit]);\n\n  const lesson = data?.tecLesson ?? null;\n  const course = data?.tecCourse ?? null;\n  const enrollment = data?.tecMyEnrollments?.items?.[0] ?? null;\n  const lessons = [...(course?.lessons ?? [])].sort((a, b) => a.position - b.position);\n  const index = lessons.findIndex((l) => l.id === lessonId);\n  const prev = index > 0 ? lessons[index - 1] : undefined;\n  const next = index >= 0 && index < lessons.length - 1 ? lessons[index + 1] : undefined;\n  const backPath = courseDetailsPath(courseId);\n\n  const refreshProgress = (): void => {\n    void refetch();\n  };\n\n  const handleComplete = async (): Promise<void> => {\n    if (!lesson) return;\n    const res = await completeLesson({ variables: { lessonId: lesson.id } });\n    const updated = res.data?.tecCompleteLesson;\n    if (!updated) return;\n    emit('technospam.lesson.completed', {\n      workspaceId,\n      entityId: lesson.id,\n      entityType: 'TEC_LESSON',\n    });\n    notify.success('Lesson completed', `${updated.progressPct}% of the course done`);\n    if (next) navigate(lessonPlayerPath(courseId, next.id));\n    else await refetch();\n  };\n\n  const handleEnroll = async (): Promise<void> => {\n    const res = await enroll({ variables: { input: { courseId } } });\n    if (res.data?.tecEnroll) {\n      notify.success(\n        'Enrolled',\n        `Your progress in \"${course?.title ?? 'this course'}\" is now tracked.`\n      );\n      await refetch();\n    }\n  };\n\n  if (!courseId || !lessonId) {\n    return (\n      <PageLayout title=\"Lesson\" backPath=\"/courses/courses-page\">\n        <EmptyView\n          title=\"No lesson selected\"\n          description=\"Open a lesson from a course curriculum.\"\n        />\n      </PageLayout>\n    );\n  }\n\n  if (loading && !lesson) {\n    return (\n      <PageLayout title=\"Lesson\" backPath={backPath}>\n        <Skeleton className=\"mb-4 h-10 w-1/2 rounded-xl\" />\n        <Skeleton className=\"h-80 w-full rounded-xl\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !lesson || !course || lesson.courseId !== course.id) {\n    return (\n      <PageLayout title=\"Lesson\" backPath={backPath}>\n        {error ? (\n          <ErrorView title=\"Couldn't load lesson\" error={error} />\n        ) : (\n          <EmptyView title=\"Lesson not found\" description=\"This lesson may have been removed.\" />\n        )}\n      </PageLayout>\n    );\n  }\n\n  const Icon = KIND_ICON[lesson.kind] ?? FileText;\n  const done = !!lesson.completedByMe;\n  const byCheck = completesByCheck(lesson);\n\n  return (\n    <PageLayout\n      backPath={backPath}\n      title={lesson.title}\n      description={`${course.title} · Lesson ${index + 1} of ${lessons.length}`}\n      actions={\n        done ? (\n          <span className=\"inline-flex items-center gap-1.5 rounded-full border border-status-success-border bg-status-success-bg-subtle px-3 py-1.5 text-sm font-medium text-status-success-text\">\n            <CheckCircle2 size={15} /> Completed\n          </span>\n        ) : null\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_280px]\">\n        <div className=\"min-w-0 space-y-4\">\n          <div className=\"flex flex-wrap items-center gap-2 text-xs text-text-muted\">\n            <span className=\"inline-flex items-center gap-1 rounded-full bg-accent-primary/10 px-2 py-0.5 font-medium text-accent-primary\">\n              <Icon size={12} /> {humanizeEnum(lesson.kind)}\n            </span>\n            <span className=\"inline-flex items-center gap-1\">\n              <Clock size={12} /> {formatDuration(lesson.estimatedMinutes)}\n            </span>\n            {lesson.isPreview ? (\n              <span className=\"rounded-full border border-accent-primary/30 px-2 py-0.5\">\n                Free preview\n              </span>\n            ) : null}\n          </div>\n\n          {!enrollment ? (\n            <GlassCard className=\"flex flex-col items-start gap-3 p-4 sm:flex-row sm:items-center sm:justify-between\">\n              <p className=\"text-sm text-text-secondary\">\n                Enroll in this course to save your progress and earn a certificate.\n              </p>\n              <Button size=\"sm\" onClick={() => void handleEnroll()} disabled={enrolling}>\n                <BookOpen size={14} /> {enrolling ? 'Enrolling…' : 'Enroll'}\n              </Button>\n            </GlassCard>\n          ) : null}\n\n          <GlassCard className=\"p-5\" data-testid=\"lesson-player-body\">\n            {lesson.isLocked ? (\n              <UpgradeGate description=\"This lesson is part of a paid TechnoSpam plan. Its content unlocks once your workspace upgrades.\" />\n            ) : (\n              <LessonBody lesson={lesson} onProgress={refreshProgress} />\n            )}\n          </GlassCard>\n\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <Button\n              variant=\"outline\"\n              disabled={!prev}\n              onClick={() => prev && navigate(lessonPlayerPath(courseId, prev.id))}\n            >\n              <ArrowLeft size={15} /> Previous\n            </Button>\n            <div className=\"flex flex-wrap items-center gap-2\">\n              {enrollment && !done && !byCheck && !lesson.isLocked ? (\n                <Button onClick={() => void handleComplete()} disabled={completing}>\n                  <CheckCircle2 size={15} /> {completing ? 'Saving…' : 'Mark complete'}\n                </Button>\n              ) : null}\n              {enrollment && !done && byCheck && !lesson.isLocked ? (\n                <span className=\"text-xs text-text-muted\">\n                  {lesson.kind === 'QUIZ'\n                    ? 'Pass the quiz to complete this lesson.'\n                    : 'Run code that prints the expected output to complete this lesson.'}\n                </span>\n              ) : null}\n              <Button\n                variant={done || !enrollment ? 'default' : 'outline'}\n                disabled={!next}\n                onClick={() => next && navigate(lessonPlayerPath(courseId, next.id))}\n              >\n                Next <ArrowRight size={15} />\n              </Button>\n            </div>\n          </div>\n        </div>\n\n        <GlassCard className=\"h-fit p-4\">\n          <div className=\"mb-2 flex items-center justify-between\">\n            <span className=\"text-xs font-semibold uppercase tracking-wide text-text-muted\">\n              Curriculum\n            </span>\n            {enrollment ? (\n              <span className=\"text-xs text-text-secondary\" data-testid=\"lesson-player-progress\">\n                {enrollment.progressPct}% complete\n              </span>\n            ) : null}\n          </div>\n          {enrollment ? (\n            <div className=\"mb-3 h-1.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n              <div\n                className=\"h-full rounded-full bg-accent-primary transition-all duration-500\"\n                style={{ width: `${enrollment.progressPct}%` }}\n              />\n            </div>\n          ) : null}\n          <ol className=\"space-y-1\">\n            {lessons.map((l, i) => {\n              const LIcon = KIND_ICON[l.kind] ?? FileText;\n              const current = l.id === lesson.id;\n              return (\n                <li key={l.id}>\n                  <button\n                    type=\"button\"\n                    aria-current={current ? 'page' : undefined}\n                    onClick={() => navigate(lessonPlayerPath(courseId, l.id))}\n                    className={cn(\n                      'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors hover:bg-bg-sunken',\n                      current && 'bg-accent-primary/10 font-medium text-accent-primary'\n                    )}\n                  >\n                    <span className=\"w-5 shrink-0 text-center text-xs tabular-nums text-text-muted\">\n                      {i + 1}\n                    </span>\n                    {l.completedByMe ? (\n                      <CheckCircle2 size={14} className=\"shrink-0 text-status-success-text\" />\n                    ) : l.isLocked ? (\n                      <Lock size={14} className=\"shrink-0 text-text-muted\" />\n                    ) : (\n                      <LIcon size={14} className=\"shrink-0 text-text-muted\" />\n                    )}\n                    <span className=\"min-w-0 flex-1 truncate\">{l.title}</span>\n                  </button>\n                </li>\n              );\n            })}\n          </ol>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CoursesLessonPlayerPagePage.js","names":[],"sources":["../../../src/technospam/pages/CoursesLessonPlayerPagePage.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { Markdown } from '@burdenoff/fe-libs/shared/components/Markdown';\nimport {\n  ArrowLeft,\n  ArrowRight,\n  BookOpen,\n  CheckCircle2,\n  Clock,\n  FileText,\n  Layers,\n  Lock,\n  PlayCircle,\n  Sparkles,\n  type LucideIcon,\n} from 'lucide-react';\nimport { Button, GlassCard, Skeleton } from '@burdenoff/fe-libs/ui';\nimport { EmptyView, ErrorView, PageLayout, UpgradeGate } from '../components';\nimport { InteractiveWorkspace } from '../components/lesson/InteractiveWorkspace';\nimport { QuizLesson } from '../components/lesson/QuizLesson';\nimport { useTechnoSpamNavigate, useTechnoSpam } from '../providers/TechnoSpamProvider';\nimport {\n  useCompleteLesson,\n  useEnroll,\n  useLessonPlayerQuery,\n  type TecLesson,\n  type TecLessonKind,\n} from '../api/technospamApi';\nimport { formatDuration, humanizeEnum } from '../utils/format';\nimport { notify } from '../lib/toast';\nimport { cn } from '../utils/cn';\nimport { useTechnoSpamAnalytics } from '../hooks/useTechnoSpamAnalytics';\nimport { FOCUS_PARAMS } from '../utils/pageContext';\nimport { courseDetailsPath, lessonPlayerPath } from '../utils/lessonPath';\n\nconst KIND_ICON: Record<TecLessonKind, LucideIcon> = {\n  VIDEO: PlayCircle,\n  ARTICLE: FileText,\n  INTERACTIVE: Sparkles,\n  QUIZ: CheckCircle2,\n  PROJECT: Layers,\n};\n\n/** Lessons whose completion is earned (a passed quiz, a matching run) rather than self-reported. */\nfunction completesByCheck(lesson: TecLesson): boolean {\n  if (lesson.kind === 'QUIZ') return (lesson.quizQuestions?.length ?? 0) > 0;\n  if (lesson.kind === 'INTERACTIVE') return !!lesson.expectedOutput;\n  return false;\n}\n\nfunction LessonBody({ lesson, onProgress }: { lesson: TecLesson; onProgress: () => void }) {\n  const notes = lesson.content ? (\n    <Markdown className=\"prose prose-sm max-w-none text-text-secondary dark:prose-invert\">\n      {lesson.content}\n    </Markdown>\n  ) : null;\n\n  switch (lesson.kind) {\n    case 'VIDEO': {\n      const src = lesson.file?.downloadUrl;\n      const isVideo = !lesson.file?.mimeType || lesson.file.mimeType.startsWith('video/');\n      return (\n        <div className=\"space-y-4\">\n          {src && isVideo ? (\n            <video\n              controls\n              preload=\"metadata\"\n              src={src}\n              className=\"aspect-video w-full rounded-xl bg-bg-sunken\"\n              data-testid=\"lesson-video\"\n            >\n              <track kind=\"captions\" />\n            </video>\n          ) : (\n            <p className=\"rounded-xl border border-dashed border-border-seam px-4 py-3 text-sm text-text-muted\">\n              The video for this lesson has not been uploaded yet.\n            </p>\n          )}\n          {notes}\n        </div>\n      );\n    }\n    case 'QUIZ':\n      return (\n        <div className=\"space-y-4\">\n          {notes}\n          <QuizLesson key={lesson.id} lesson={lesson} onPassed={onProgress} />\n        </div>\n      );\n    case 'INTERACTIVE':\n      return (\n        <div className=\"grid grid-cols-1 gap-5 xl:grid-cols-2\">\n          <div className=\"min-w-0\">\n            {notes ?? (\n              <p className=\"text-sm text-text-muted\">\n                Edit the code, run it, and compare the output with what the lesson expects.\n              </p>\n            )}\n          </div>\n          <div className=\"min-w-0\">\n            <InteractiveWorkspace key={lesson.id} lesson={lesson} onCompleted={onProgress} />\n          </div>\n        </div>\n      );\n    case 'PROJECT':\n    case 'ARTICLE':\n    default:\n      return (\n        notes ?? (\n          <p className=\"rounded-xl border border-dashed border-border-seam px-4 py-3 text-sm text-text-muted\">\n            No content published for this lesson yet.\n          </p>\n        )\n      );\n  }\n}\n\n/**\n * Lesson player (BOFF-4107): renders one lesson of a course by kind — article\n * and project briefs as markdown, video through the federated File, quizzes\n * graded server-side, and a runnable sandbox workspace for INTERACTIVE\n * lessons — with the curriculum alongside and per-lesson progress tracking.\n * URL: `/courses/lesson-player-page?id=<courseId>&lessonId=<lessonId>`.\n */\nexport function CoursesLessonPlayerPagePage() {\n  const [params] = useSearchParams();\n  const courseId = params.get(FOCUS_PARAMS.id) ?? '';\n  const lessonId = params.get(FOCUS_PARAMS.lesson) ?? '';\n  const navigate = useTechnoSpamNavigate();\n  const { workspaceId } = useTechnoSpam();\n  const { emit } = useTechnoSpamAnalytics();\n  const { data, loading, error, refetch } = useLessonPlayerQuery(courseId, lessonId);\n  const [completeLesson, { loading: completing }] = useCompleteLesson();\n  const [enroll, { loading: enrolling }] = useEnroll();\n\n  useEffect(() => {\n    if (lessonId) {\n      emit('technospam.lesson.viewed', {\n        workspaceId,\n        entityId: lessonId,\n        entityType: 'TEC_LESSON',\n      });\n    }\n  }, [lessonId, workspaceId, emit]);\n\n  const lesson = data?.tecLesson ?? null;\n  const course = data?.tecCourse ?? null;\n  const enrollment = data?.tecMyEnrollments?.items?.[0] ?? null;\n  const lessons = [...(course?.lessons ?? [])].sort((a, b) => a.position - b.position);\n  const index = lessons.findIndex((l) => l.id === lessonId);\n  const prev = index > 0 ? lessons[index - 1] : undefined;\n  const next = index >= 0 && index < lessons.length - 1 ? lessons[index + 1] : undefined;\n  const backPath = courseDetailsPath(courseId);\n\n  const refreshProgress = (): void => {\n    void refetch();\n  };\n\n  const handleComplete = async (): Promise<void> => {\n    if (!lesson) return;\n    const res = await completeLesson({ variables: { lessonId: lesson.id } });\n    const updated = res.data?.tecCompleteLesson;\n    if (!updated) return;\n    emit('technospam.lesson.completed', {\n      workspaceId,\n      entityId: lesson.id,\n      entityType: 'TEC_LESSON',\n    });\n    notify.success('Lesson completed', `${updated.progressPct}% of the course done`);\n    if (next) navigate(lessonPlayerPath(courseId, next.id));\n    else await refetch();\n  };\n\n  const handleEnroll = async (): Promise<void> => {\n    const res = await enroll({ variables: { input: { courseId } } });\n    if (res.data?.tecEnroll) {\n      notify.success(\n        'Enrolled',\n        `Your progress in \"${course?.title ?? 'this course'}\" is now tracked.`\n      );\n      await refetch();\n    }\n  };\n\n  if (!courseId || !lessonId) {\n    return (\n      <PageLayout title=\"Lesson\" backPath=\"/courses/courses-page\">\n        <EmptyView\n          title=\"No lesson selected\"\n          description=\"Open a lesson from a course curriculum.\"\n        />\n      </PageLayout>\n    );\n  }\n\n  if (loading && !lesson) {\n    return (\n      <PageLayout title=\"Lesson\" backPath={backPath}>\n        <Skeleton className=\"mb-4 h-10 w-1/2 rounded-xl\" />\n        <Skeleton className=\"h-80 w-full rounded-xl\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !lesson || !course || lesson.courseId !== course.id) {\n    return (\n      <PageLayout title=\"Lesson\" backPath={backPath}>\n        {error ? (\n          <ErrorView title=\"Couldn't load lesson\" error={error} />\n        ) : (\n          <EmptyView title=\"Lesson not found\" description=\"This lesson may have been removed.\" />\n        )}\n      </PageLayout>\n    );\n  }\n\n  const Icon = KIND_ICON[lesson.kind] ?? FileText;\n  const done = !!lesson.completedByMe;\n  const byCheck = completesByCheck(lesson);\n\n  return (\n    <PageLayout\n      backPath={backPath}\n      title={lesson.title}\n      description={`${course.title} · Lesson ${index + 1} of ${lessons.length}`}\n      actions={\n        done ? (\n          <span className=\"inline-flex items-center gap-1.5 rounded-full border border-status-success-border bg-status-success-bg-subtle px-3 py-1.5 text-sm font-medium text-status-success-text\">\n            <CheckCircle2 size={15} /> Completed\n          </span>\n        ) : null\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_280px]\">\n        <div className=\"min-w-0 space-y-4\">\n          <div className=\"flex flex-wrap items-center gap-2 text-xs text-text-muted\">\n            <span className=\"inline-flex items-center gap-1 rounded-full bg-accent-primary/6 px-2 py-0.5 font-medium text-accent-primary\">\n              <Icon size={12} /> {humanizeEnum(lesson.kind)}\n            </span>\n            <span className=\"inline-flex items-center gap-1\">\n              <Clock size={12} /> {formatDuration(lesson.estimatedMinutes)}\n            </span>\n            {lesson.isPreview ? (\n              <span className=\"rounded-full border border-accent-primary/30 px-2 py-0.5\">\n                Free preview\n              </span>\n            ) : null}\n          </div>\n\n          {!enrollment ? (\n            <GlassCard className=\"flex flex-col items-start gap-3 p-4 sm:flex-row sm:items-center sm:justify-between\">\n              <p className=\"text-sm text-text-secondary\">\n                Enroll in this course to save your progress and earn a certificate.\n              </p>\n              <Button size=\"sm\" onClick={() => void handleEnroll()} disabled={enrolling}>\n                <BookOpen size={14} /> {enrolling ? 'Enrolling…' : 'Enroll'}\n              </Button>\n            </GlassCard>\n          ) : null}\n\n          <GlassCard className=\"p-5\" data-testid=\"lesson-player-body\">\n            {lesson.isLocked ? (\n              <UpgradeGate description=\"This lesson is part of a paid TechnoSpam plan. Its content unlocks once your workspace upgrades.\" />\n            ) : (\n              <LessonBody lesson={lesson} onProgress={refreshProgress} />\n            )}\n          </GlassCard>\n\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <Button\n              variant=\"outline\"\n              disabled={!prev}\n              onClick={() => prev && navigate(lessonPlayerPath(courseId, prev.id))}\n            >\n              <ArrowLeft size={15} /> Previous\n            </Button>\n            <div className=\"flex flex-wrap items-center gap-2\">\n              {enrollment && !done && !byCheck && !lesson.isLocked ? (\n                <Button onClick={() => void handleComplete()} disabled={completing}>\n                  <CheckCircle2 size={15} /> {completing ? 'Saving…' : 'Mark complete'}\n                </Button>\n              ) : null}\n              {enrollment && !done && byCheck && !lesson.isLocked ? (\n                <span className=\"text-xs text-text-muted\">\n                  {lesson.kind === 'QUIZ'\n                    ? 'Pass the quiz to complete this lesson.'\n                    : 'Run code that prints the expected output to complete this lesson.'}\n                </span>\n              ) : null}\n              <Button\n                variant={done || !enrollment ? 'default' : 'outline'}\n                disabled={!next}\n                onClick={() => next && navigate(lessonPlayerPath(courseId, next.id))}\n              >\n                Next <ArrowRight size={15} />\n              </Button>\n            </div>\n          </div>\n        </div>\n\n        <GlassCard className=\"h-fit p-4\">\n          <div className=\"mb-2 flex items-center justify-between\">\n            <span className=\"text-xs font-semibold uppercase tracking-wide text-text-muted\">\n              Curriculum\n            </span>\n            {enrollment ? (\n              <span className=\"text-xs text-text-secondary\" data-testid=\"lesson-player-progress\">\n                {enrollment.progressPct}% complete\n              </span>\n            ) : null}\n          </div>\n          {enrollment ? (\n            <div className=\"mb-3 h-1.5 w-full overflow-hidden rounded-full bg-bg-sunken\">\n              <div\n                className=\"h-full rounded-full bg-accent-primary transition-all duration-500\"\n                style={{ width: `${enrollment.progressPct}%` }}\n              />\n            </div>\n          ) : null}\n          <ol className=\"space-y-1\">\n            {lessons.map((l, i) => {\n              const LIcon = KIND_ICON[l.kind] ?? FileText;\n              const current = l.id === lesson.id;\n              return (\n                <li key={l.id}>\n                  <button\n                    type=\"button\"\n                    aria-current={current ? 'page' : undefined}\n                    onClick={() => navigate(lessonPlayerPath(courseId, l.id))}\n                    className={cn(\n                      'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors hover:bg-bg-sunken',\n                      current && 'bg-accent-primary/6 font-medium text-accent-primary'\n                    )}\n                  >\n                    <span className=\"w-5 shrink-0 text-center text-xs tabular-nums text-text-muted\">\n                      {i + 1}\n                    </span>\n                    {l.completedByMe ? (\n                      <CheckCircle2 size={14} className=\"shrink-0 text-status-success-text\" />\n                    ) : l.isLocked ? (\n                      <Lock size={14} className=\"shrink-0 text-text-muted\" />\n                    ) : (\n                      <LIcon size={14} className=\"shrink-0 text-text-muted\" />\n                    )}\n                    <span className=\"min-w-0 flex-1 truncate\">{l.title}</span>\n                  </button>\n                </li>\n              );\n            })}\n          </ol>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/technospam/pages/HackathonsHackathonDetailsPagePage.js

@@ -191,7 +191,7 @@ function A() {
 							}), /* @__PURE__ */ C("div", {
 								className: "min-w-0",
 								children: [/* @__PURE__ */ S("div", {
-									className: "text-xs text-text-muted",
+									className: "text-xs text-text-secondary",
 									children: "Starts"
 								}), /* @__PURE__ */ S("div", {
 									className: "truncate text-sm font-medium text-text-primary",
@@ -207,7 +207,7 @@ function A() {
 							}), /* @__PURE__ */ C("div", {
 								className: "min-w-0",
 								children: [/* @__PURE__ */ S("div", {
-									className: "text-xs text-text-muted",
+									className: "text-xs text-text-secondary",
 									children: "Ends"
 								}), /* @__PURE__ */ S("div", {
 									className: "truncate text-sm font-medium text-text-primary",
@@ -223,7 +223,7 @@ function A() {
 							}), /* @__PURE__ */ C("div", {
 								className: "min-w-0",
 								children: [/* @__PURE__ */ S("div", {
-									className: "text-xs text-text-muted",
+									className: "text-xs text-text-secondary",
 									children: "Submission deadline"
 								}), /* @__PURE__ */ S("div", {
 									className: "truncate text-sm font-medium text-text-primary",