@anantagnanam/lms 0.1.0 → 0.2.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Ananta Gnanam
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Ananta Gnanam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,13 +1,15 @@
 # @anantagnanam/lms
 
-A native LMS for EmDash 1.4 with Astro 7 and React 19. Version 0.1.0 provides free courses, flexible enrollment, cohorts, lessons, quizzes, assignments, progress, certificates, discussions, moderation, reporting, and notifications.
+A native LMS for EmDash 1.4 with Astro 7 and React 19. Version 0.2.0 provides free courses, flexible enrollment, cohorts, lessons, quizzes, assignments, progress, certificates, discussions, moderation, reporting, notifications, published course editions, learning paths, a private library, and native media resume.
+
+This is a free preview release. Before upgrading from 0.1.0, back up the full host database, rebuild the site, and run **LMS settings → Course edition migration** until complete. Do not downgrade after migration begins. Production database/auth/email verification, backup restoration, accessibility and capacity checks remain operator release gates. Payment processing is deferred.
 
 ## Installation
 
 Install the public npm release in an existing EmDash site:
 
 ```sh
-npm install @anantagnanam/lms
+npm install --save-exact @anantagnanam/lms@0.2.0
 ```
 
 This is a trusted native dependency configured by the site developer. Local builds can also be installed from their release tarball.
@@ -41,11 +43,20 @@ After rebuilding the site, visit:
 
 - `/academy`: course catalog
 - `/academy/my-learning`: learner dashboard
+- `/academy/my-learning/library`: saved courses, joined path progress, preferences and own-data downloads
+- `/academy/paths`: published learning paths
 - `/academy/teach`: instructor course studio
+- `/academy/teach/courses/<courseId>/lessons/<lessonId>`: private saved author preview
 - `/_emdash/admin/plugins/anantagnanam-lms`: administration
 
 The native plugin declares course, enrollment, cohort, certificate, discussion, review, notification, and audit storage. EmDash creates the plugin storage namespace. No LMS SQL migration or separate authentication store is needed.
 
+The lesson editor identifies inline text, imported rich content, or linked published CMS content. Imported rich content is read-only in the studio; linked lessons can be edited and published in EmDash. Author previews show saved content. Quiz drafts expose save/retry/conflict state and use revisions to prevent stale overwrites. Older attempts are revision zero; integrations must send `expectedDraftRevision` after each acknowledged draft save.
+
+Existing courses now have separate saved drafts and published editions. Save a draft, then use **Publish saved draft** to publish for new enrollments. **Saved revision history** can restore earlier material into a draft. Existing learners retain their original curriculum, grading rules, progress and certificates. Linked CMS lesson text is captured at course publication; media URLs remain references. Instructor assignments take effect when saved.
+
+After upgrading, run **LMS settings → Course edition migration** batches until complete. Checkpoints survive interruption; courses also upgrade lazily before editing or enrollment. Keep a full database backup: course exports contain only draft curriculum, and this migration is not a full backup or cross-site import. Publication scheduling, editorial review and moving existing enrollments between editions remain future work.
+
 ## Enrollment and access
 
 `open` courses enroll learners immediately. `approval` courses create pending requests. `invite` courses require administrator enrollment. Cohort membership always requires an administrator decision. Administrators can reject, suspend, restore, cancel, and date access without deleting progress.
@@ -75,4 +86,14 @@ Private HTTP calls use an EmDash session and `X-EmDash-Request: 1`. API routes b
 
 Notifications always appear in the learner dashboard. Email is optional and disabled by default. Configure an EmDash email transport and working cron scheduler before enabling email or inactivity reminders. Certificates use the browser's print/save-as-PDF flow.
 
+Learners can opt out of email from their library; this also suppresses queued email when maintenance next runs. Personal weekly lesson goals are stored targets, not measured activity reports. The library exports the learner's own records in pages of up to five records per section, with quiz answer keys and scoring snapshots removed. Continue through every page and section for a complete download; it is not a full database backup.
+
+Administrators can publish ordered learning paths. Joining saves the path's original course list but does not enroll the learner in its courses or bypass approval, prerequisites or access dates. Course completion contributes to path progress even when access later expires. Course enrollment still pins the actual curriculum edition.
+
+Native audio/video supports resume and playback speed, revision-fenced saves, WebVTT caption tracks and readable transcripts. Captions and media hosted elsewhere require appropriate CORS. YouTube/Vimeo controls and resume remain provider-managed. Playback reports never complete lessons or verify attendance. New caption/transcript fields have compatible defaults; enrollment playback fields are optional for existing records.
+
+The studio can duplicate a saved course as a new draft, duplicate lessons and move lessons between modules. Review copied access/date settings before publishing. **LMS settings → Operational health** shows maintenance freshness, notification backlog/failures and migration status. A healthy heartbeat does not certify the deployment.
+
+See the [release-readiness assessment](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/docs/release-readiness.md), [platform feature matrix](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/docs/platform-feature-matrix.md), and [security policy](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/SECURITY.md) for remaining release gates and capabilities.
+
 Full documentation: [repository](https://github.com/anantagnanam/anantagnanam-emdash-plugins), [installation](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/docs/installation.md), [architecture](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/docs/architecture.md), and [release scope](https://github.com/anantagnanam/anantagnanam-emdash-plugins/blob/main/docs/release-scope.md).

package/astro/client.ts

@@ -1,11 +1,7 @@
 import { API_BASE } from "@anantagnanam/lms";
-import type {
-  Answers,
-  Discussion,
-  Notification,
-  Page,
-  PublicQuizAttempt,
-} from "@anantagnanam/lms/types";
+import { renderQuiz } from "./quiz-player.js";
+import { initializeMedia } from "./media-player.js";
+import type { Discussion, Notification, Page, PublicQuizAttempt } from "@anantagnanam/lms/types";
 
 async function call<T>(route: string, input: Record<string, unknown>, method = "POST"): Promise<T> {
   let url = `${API_BASE}/${route}`;
@@ -18,6 +14,7 @@ async function call<T>(route: string, input: Record<string, unknown>, method = "
   } else headers["Content-Type"] = "application/json";
   const response = await fetch(url, {
     method,
+    signal: AbortSignal.timeout(20_000),
     credentials: "same-origin",
     headers,
     ...(method === "POST" ? { body: JSON.stringify(input) } : {}),
@@ -25,10 +22,13 @@ async function call<T>(route: string, input: Record<string, unknown>, method = "
   const result = (await response.json()) as {
     success: boolean;
     data?: T;
-    error?: { message?: string };
+    error?: { message?: string; code?: string };
   };
   if (!response.ok || !result.success)
-    throw new Error(result.error?.message ?? "Please try again.");
+    throw Object.assign(new Error(result.error?.message ?? "Please try again."), {
+      code: result.error?.code,
+      status: response.status,
+    });
   return result.data as T;
 }
 function node<K extends keyof HTMLElementTagNameMap>(
@@ -65,6 +65,16 @@ function forms() {
       const input: Record<string, unknown> = Object.fromEntries(new FormData(form));
       if ("rating" in input) input.rating = Number(input.rating);
       if ("shared" in input) input.shared = input.shared === "true";
+      if ("saved" in input) input.saved = input.saved === "true";
+      if (form.dataset.lmsRoute === "learner/preferences/save") {
+        input.data = {
+          emailNotifications: input.emailNotifications === "true",
+          weeklyGoalLessons: Number(input.weeklyGoalLessons),
+        };
+        input.expectedRevision = input.expectedRevision || null;
+        delete input.emailNotifications;
+        delete input.weeklyGoalLessons;
+      }
       if ("attachmentUrl" in input && input.attachmentUrl === "") input.attachmentUrl = null;
       if ("parentId" in input && input.parentId === "") input.parentId = null;
       const buttons = [...form.querySelectorAll<HTMLButtonElement>('button[type="submit"]')];
@@ -172,147 +182,6 @@ async function renderDiscussions(root: HTMLElement, cursor?: string, append = fa
   }
 }
 
-function readAnswers(form: HTMLFormElement, attempt: PublicQuizAttempt): Answers {
-  const answers: Answers = {};
-  const values = new FormData(form);
-  for (const question of attempt.questions) {
-    const picked = values.getAll(question.id).map(String);
-    if (question.type === "multiple") answers[question.id] = picked;
-    else if (picked[0]) answers[question.id] = picked[0];
-  }
-  return answers;
-}
-function renderQuiz(root: HTMLElement, attempt: PublicQuizAttempt) {
-  const content = root.querySelector<HTMLElement>("[data-lms-quiz-content]")!;
-  content.replaceChildren();
-  const form = node("form");
-  const timer = node("p", "", "lms-quiz-timer");
-  timer.setAttribute("aria-live", "off");
-  form.append(timer);
-  for (const question of attempt.questions) {
-    const fieldset = node("fieldset", undefined, "lms-quiz-question");
-    fieldset.append(node("legend", question.prompt));
-    if (question.type === "short") {
-      const input = node("input");
-      input.name = question.id;
-      input.type = "text";
-      input.maxLength = 2000;
-      input.setAttribute("aria-label", "Your answer");
-      const saved = attempt.answers?.[question.id];
-      if (typeof saved === "string") input.value = saved;
-      fieldset.append(input);
-    } else
-      for (const option of question.options) {
-        const label = node("label", undefined, "lms-quiz-option");
-        const input = node("input");
-        input.name = question.id;
-        input.type = question.type === "multiple" ? "checkbox" : "radio";
-        input.value = option.id;
-        const saved = attempt.answers?.[question.id];
-        input.checked = Array.isArray(saved) ? saved.includes(option.id) : saved === option.id;
-        label.append(input, node("span", option.text));
-        fieldset.append(label);
-      }
-    form.append(fieldset);
-  }
-  const button = node("button", "Submit answers", "lms-btn");
-  button.type = "submit";
-  form.append(button);
-  content.append(form);
-  let interval: ReturnType<typeof setInterval> | undefined;
-  let saving: ReturnType<typeof setTimeout> | undefined;
-  let submitting = false;
-  const stop = () => {
-    if (interval) clearInterval(interval);
-    if (saving) clearTimeout(saving);
-  };
-  form.addEventListener("input", () => {
-    if (saving) clearTimeout(saving);
-    saving = setTimeout(() => {
-      if (!submitting && form.isConnected)
-        void call("learner/quiz/draft", {
-          ...data(root),
-          attemptId: attempt.id,
-          answers: readAnswers(form, attempt),
-        }).catch(() => {});
-    }, 700);
-  });
-  form.addEventListener("submit", async (event) => {
-    event.preventDefault();
-    if (submitting) return;
-    submitting = true;
-    button.disabled = true;
-    stop();
-    feedback(root, "Checking your answers…");
-    try {
-      const result = await call<{ attempt: PublicQuizAttempt }>("learner/quiz/submit", {
-        ...data(root),
-        attemptId: attempt.id,
-        answers: readAnswers(form, attempt),
-      });
-      feedback(
-        root,
-        `${result.attempt.passed ? "Passed" : "Not passed yet"} · ${result.attempt.percent}%`,
-      );
-      const outcome = node("div");
-      for (const item of result.attempt.feedback) {
-        const section = node("div", undefined, "lms-notice");
-        const question = attempt.questions.find((entry) => entry.id === item.questionId);
-        section.append(
-          node("strong", `${item.correct ? "✓" : "○"} ${question?.prompt ?? "Question"}`),
-        );
-        if (item.explanation) section.append(node("p", item.explanation));
-        outcome.append(section);
-      }
-      content.replaceChildren(outcome);
-      const start = root.querySelector<HTMLButtonElement>("[data-lms-quiz-start]");
-      if (start) {
-        start.hidden = result.attempt.passed;
-        start.disabled = false;
-        start.textContent = "Try another attempt";
-      }
-      if (result.attempt.passed) {
-        const continueLink = node("a", "Continue learning →", "lms-btn");
-        continueLink.href = root.dataset.nextUrl ?? window.location.pathname;
-        content.append(continueLink);
-      }
-    } catch (cause) {
-      feedback(
-        root,
-        cause instanceof Error ? cause.message : "Could not submit your answers.",
-        true,
-      );
-      button.disabled = false;
-      submitting = false;
-      const start = root.querySelector<HTMLButtonElement>("[data-lms-quiz-start]");
-      if (start) {
-        start.disabled = false;
-        start.hidden = false;
-        start.textContent = "Start a new attempt";
-      }
-    }
-  });
-  if (attempt.expiresAt) {
-    const tick = () => {
-      if (!form.isConnected) {
-        stop();
-        return;
-      }
-      const remaining = Math.max(
-        0,
-        Math.ceil((Date.parse(attempt.expiresAt!) - Date.now()) / 1000),
-      );
-      timer.textContent = `Time remaining ${Math.floor(remaining / 60)}:${String(remaining % 60).padStart(2, "0")}`;
-      if (!remaining) {
-        stop();
-        form.requestSubmit();
-      }
-    };
-    interval = setInterval(tick, 1000);
-    tick();
-  } else timer.textContent = "Take your time. This quiz is untimed.";
-}
-
 function quizzes() {
   for (const root of document.querySelectorAll<HTMLElement>(
     "[data-lms-quiz]:not([data-lms-bound])",
@@ -327,7 +196,7 @@ function quizzes() {
         const attempt = await call<PublicQuizAttempt>("learner/quiz/start", data(root));
         start.hidden = true;
         feedback(root, "Your attempt has started.");
-        renderQuiz(root, attempt);
+        renderQuiz(root, attempt, call);
       } catch (cause) {
         start.disabled = false;
         feedback(root, cause instanceof Error ? cause.message : "Could not start quiz.", true);
@@ -382,6 +251,59 @@ async function updates(root: HTMLElement, cursor?: string, append = false) {
 function initialize() {
   forms();
   quizzes();
+  initializeMedia(call);
+  for (const root of document.querySelectorAll<HTMLElement>(
+    "[data-lms-export]:not([data-lms-bound])",
+  )) {
+    root.dataset.lmsBound = "true";
+    const select = root.querySelector<HTMLSelectElement>("[data-lms-export-section]")!;
+    const button = root.querySelector<HTMLButtonElement>("[data-lms-export-download]")!;
+    let cursor: string | undefined;
+    let pageNumber = 1;
+    select.addEventListener("change", () => {
+      cursor = undefined;
+      pageNumber = 1;
+      button.disabled = false;
+      button.textContent = "Download first page";
+      feedback(root, "");
+    });
+    button.addEventListener("click", async () => {
+      button.disabled = true;
+      select.disabled = true;
+      try {
+        const page = await call<Page<unknown>>(
+          "learner/export",
+          { section: select.value, cursor, limit: 5 },
+          "GET",
+        );
+        const url = URL.createObjectURL(
+          new Blob([JSON.stringify(page, null, 2)], { type: "application/json" }),
+        );
+        const link = node("a");
+        link.href = url;
+        link.download = `lms-${select.value}-${pageNumber}.json`;
+        document.body.append(link);
+        link.click();
+        link.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+        cursor = page.cursor;
+        pageNumber++;
+        button.disabled = !page.hasMore;
+        button.textContent = page.hasMore ? "Download next page" : "Section downloaded";
+        feedback(
+          root,
+          page.hasMore
+            ? "Page downloaded. Download the next page to continue."
+            : "All pages in this section downloaded. Choose another section to continue.",
+        );
+      } catch (error) {
+        button.disabled = false;
+        feedback(root, error instanceof Error ? error.message : "Export failed.", true);
+      } finally {
+        select.disabled = false;
+      }
+    });
+  }
   for (const root of document.querySelectorAll<HTMLElement>(
     "[data-lms-lesson]:not([data-lms-started])",
   )) {

package/astro/components/CourseOverview.astro

@@ -1,5 +1,6 @@
 ---
 import { Image } from "emdash/ui";
+import LessonAvailabilityNote from "./LessonAvailabilityNote.astro";
 import type {
   CourseDetail,
   PublicEnrollment,
@@ -26,12 +27,17 @@ const {
   cohortId,
   cohortMembership = null,
 } = Astro.props;
-const firstLesson = course.modules.flatMap((module) => module.lessons)[0];
 const active =
   enrollment &&
   ["active", "completed"].includes(enrollment.status) &&
   enrollment.effectiveAccess === "granted";
-const next = progress?.nextLessonId ?? firstLesson?.id;
+const next = progress?.nextLessonId;
+const revisit =
+  !next && enrollment?.status === "completed"
+    ? course.modules
+        .flatMap((module) => module.lessons)
+        .find((lesson) => progress?.availability[lesson.id]?.available)
+    : undefined;
 ---
 
 <nav class="lms-breadcrumbs" aria-label="Breadcrumb">
@@ -73,6 +79,14 @@ const next = progress?.nextLessonId ?? firstLesson?.id;
             {enrollment.status === "completed" ? "Revisit lessons" : "Continue learning"} →
           </a>
         )}
+        {revisit && (
+          <a class="lms-btn" href={lessonUrl(basePath, course.slug, revisit.id)}>
+            Revisit lessons →
+          </a>
+        )}
+        {!next && progress.blockedLessonId && (
+          <LessonAvailabilityNote availability={progress.availability[progress.blockedLessonId]} />
+        )}
         {enrollment.certificate && (
           <a
             class="lms-btn lms-btn-outline"
@@ -97,6 +111,9 @@ const next = progress?.nextLessonId ?? firstLesson?.id;
             : enrollment.decisionReason || "Contact an administrator to manage your access."}
         </p>
         <a href={`${basePath}/my-learning`}>Open My Learning →</a>
+        {progress?.blockedLessonId && (
+          <LessonAvailabilityNote availability={progress.availability[progress.blockedLessonId]} />
+        )}
       </div>
     ) : !Astro.locals.user ? (
       <a class="lms-btn" href={loginUrl(loginPath, Astro.url.pathname + Astro.url.search)}>
@@ -222,7 +239,11 @@ const next = progress?.nextLessonId ?? firstLesson?.id;
                     : String(index + 1).padStart(2, "0")}
                 </span>
                 <div>
-                  {active || lesson.preview ? (
+                  {(
+                    enrollment && ["active", "completed"].includes(enrollment.status)
+                      ? progress?.availability[lesson.id]?.available
+                      : lesson.preview
+                  ) ? (
                     <a href={lessonUrl(basePath, course.slug, lesson.id)}>{lesson.title}</a>
                   ) : (
                     <strong>{lesson.title}</strong>
@@ -231,6 +252,7 @@ const next = progress?.nextLessonId ?? firstLesson?.id;
                     {lesson.kind} · {lesson.durationMinutes} min
                     {!lesson.required ? " · optional" : ""}
                   </small>
+                  <LessonAvailabilityNote availability={progress?.availability[lesson.id]} />
                 </div>
                 {lesson.preview && <span class="lms-badge">Preview</span>}
               </li>

package/astro/components/LearnerDashboard.astro

@@ -2,6 +2,7 @@
 import type { CourseCard, PublicEnrollment, ProgressSummary, Page } from "@anantagnanam/lms/types";
 import { courseUrl, lessonUrl, certificateUrl } from "@anantagnanam/lms/server";
 import { basePath } from "virtual:anantagnanam-lms/config";
+import LessonAvailabilityNote from "./LessonAvailabilityNote.astro";
 interface Props {
   page: Page<{ course: CourseCard; enrollment: PublicEnrollment; progress: ProgressSummary }>;
   error?: string;
@@ -66,6 +67,11 @@ next.searchParams.set("cursor", page.cursor ?? "");
           </p>
         )}
         <div class="lms-actions">
+          {!progress.nextLessonId && progress.blockedLessonId && (
+            <LessonAvailabilityNote
+              availability={progress.availability[progress.blockedLessonId]}
+            />
+          )}
           {["active", "completed"].includes(enrollment.status) &&
             enrollment.effectiveAccess === "granted" &&
             progress.nextLessonId && (

package/astro/components/LearningShell.astro

@@ -9,9 +9,18 @@ const path = Astro.url.pathname;
     <a href={basePath} aria-current={path === basePath ? "page" : undefined}>
       Explore courses
     </a>
+    <a href={`${basePath}/paths`} aria-current={path === `${basePath}/paths` ? "page" : undefined}>
+      Learning paths
+    </a>
+    <a
+      href={`${basePath}/my-learning/library`}
+      aria-current={path === `${basePath}/my-learning/library` ? "page" : undefined}
+    >
+      My library &amp; preferences
+    </a>
     <a
       href={`${basePath}/my-learning`}
-      aria-current={path.includes("/my-learning") ? "page" : undefined}
+      aria-current={path === `${basePath}/my-learning` ? "page" : undefined}
     >
       My learning
     </a>

package/astro/components/LessonAvailabilityNote.astro

@@ -0,0 +1,26 @@
+---
+import type { LessonAvailability } from "@anantagnanam/lms/types";
+interface Props {
+  availability?: LessonAvailability;
+}
+const { availability } = Astro.props;
+---
+
+{availability && !availability.available && (
+  <small class="lms-lock-note">
+    {availability.reason}
+    {availability.releaseAt && (
+      <span>
+        {" "}
+        Available from{" "}
+        <time datetime={availability.releaseAt}>
+          {new Date(availability.releaseAt).toLocaleString("en-IN", {
+            timeZone: "UTC",
+            timeZoneName: "short",
+          })}
+        </time>
+        .
+      </span>
+    )}
+  </small>
+)}

package/astro/components/LessonContent.astro

@@ -0,0 +1,53 @@
+---
+import { PortableText, type TypedObject } from "emdash/ui";
+import MediaPlayer from "./MediaPlayer.astro";
+import type { PublicLesson } from "@anantagnanam/lms/types";
+interface Props {
+  lesson: PublicLesson;
+}
+const { lesson } = Astro.props;
+---
+
+{lesson.mediaUrl && ["video", "audio", "live"].includes(lesson.kind) && (
+  <MediaPlayer
+    url={lesson.mediaUrl}
+    kind={lesson.kind as "video" | "audio" | "live"}
+    title={lesson.title}
+    startsAt={lesson.liveStartsAt}
+    captions={lesson.captions ?? []}
+  />
+)}
+{lesson.transcript && (
+  <details class="lms-resources">
+    <summary>Read transcript</summary>
+    <p class="lms-text">{lesson.transcript}</p>
+  </details>
+)}
+<div class="lms-lesson-body">
+  {lesson.portableText.length > 0 ? (
+    <PortableText value={lesson.portableText as TypedObject[]} />
+  ) : (
+    lesson.body
+      .split(/\n\s*\n/)
+      .filter(Boolean)
+      .map((paragraph) => <p class="lms-text">{paragraph}</p>)
+  )}
+</div>
+{lesson.resources.length > 0 && (
+  <section class="lms-resources">
+    <h2>Keep exploring</h2>
+    <ul>
+      {lesson.resources.map((resource) => (
+        <li>
+          <a href={resource.url} target="_blank" rel="noopener noreferrer">
+            <span aria-hidden="true">↗</span>
+            <span>
+              {resource.title}
+              {resource.description && <small>{resource.description}</small>}
+            </span>
+          </a>
+        </li>
+      ))}
+    </ul>
+  </section>
+)}