@reblu/site-blocks 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @reblu/site-blocks
 
+## 0.21.0
+
+### Minor Changes
+
+- 76e64f3: Free-preview lessons for the public, and a redesigned course programme (REB-1135).
+  - New RSC-safe `LessonPreview`: the hosted video player in an `<iframe>` plus the lesson body through the sanitising Markdown pipeline, over `getLessonPreview()` from `@reblu/site-next/academy-server`. Spanish copy overridable via `DEFAULT_LESSON_PREVIEW_LABELS`. The SITE's CSP needs `frame-src https://player.mux.com`.
+  - `CourseSyllabus` redesign: rotating chevron icon, a video/reading icon per lesson, lesson durations as «m:ss» / «h:mm:ss» aligned right, the course total in the summary, «Expandir todo / Contraer todo», and «Vista previa gratuita» as a call to action through the new `getPreviewHref`, `previewHrefTemplate` or `onPreview` props. Every existing `data-slot` is kept; new slots: `course-syllabus-header`, `course-syllabus-toggle-all`, `course-syllabus-chevron`, `course-syllabus-lesson-icon`, `course-syllabus-lesson-duration`, `course-syllabus-preview`. New labels: `expandAll`, `collapseAll`, `videoLesson`, `textLesson`. Visible change: lesson durations read «10:00» instead of «10 min».
+
+### Patch Changes
+
+- Updated dependencies [76e64f3]
+  - @reblu/site-contracts@1.21.0
+
 ## 0.20.0
 
 ### Minor Changes

package/README.md

@@ -25,6 +25,7 @@ colour on the red background. See `docs/theming/theming.md`.
 | `sanitizeHtml`                                                                                                | `.`        | Sanitises an HTML string before `dangerouslySetInnerHTML` — the **HTML boundary**. See "Security boundaries" below.          |
 | `MarkdownRenderer`                                                                                            | `.`        | Canonical Blog renderer: `marked` → **hast-util-sanitize** (XSS) → component map, with a YouTube-domain allowlist. RSC-safe. |
 | `CourseDescription`                                                                                           | `.`        | Drop-in for the rich-text course `description` (`client.academy.bySlug()`). Server Component. See "Rich-text descriptions".  |
+| `LessonPreview`, `DEFAULT_LESSON_PREVIEW_LABELS`                                                              | `.`        | A public free-preview lesson: hosted video player + sanitised body (`getLessonPreview()`). Server Component. See "Free-preview lesson".  |
 | `Treatment`, `ParentPage`, `ProfileCard`, `ProductCard`                                                       | `.`        | Presentational organisms over the SITE API contracts. RSC-safe. `Specialty`: deprecated alias, see below.                    |
 | `ProfessionalFields`                                                                                          | `.`        | The tenant's own professional fields (`professional.fields`) on a team card or profile. RSC-safe. See below.                 |
 | `ShopFilters`                                                                                                 | `.`        | Plug-and-play shop filter chrome over `GET /api/site/shop/facets`. RSC-safe. See "Shop filters" below.                       |
@@ -906,40 +907,109 @@ It renders the package's `ProductCard` by default. To use your own card, pass
   `headingClassName` replaces the heading's typography (see the className rule
   above). It renders nothing for an empty list.
 
-## Course programme — `CourseSyllabus` (REB-1134)
+## Course programme — `CourseSyllabus` (REB-1134, redesigned in REB-1135)
 
 The programme of a public course page: every module, and inside each module the
 lessons that make it up. The header reads «Programa» and «3 módulos · 12
-lecciones». Each module row shows its lesson count and, when every lesson in it
-has a duration, the module's total («4 lecciones · 1 h 20 min»). Opening a
-module lists its lessons in order, with each lesson's duration and a «Vista
-previa gratuita» badge on free-preview lessons.
+lecciones · 2 h 40 min», with an «Expandir todo / Contraer todo» control. Each
+module row shows a number badge, its lesson count and, when every lesson in it
+has a duration, the module's total («4 lecciones · 1 h 20 min»), and a chevron
+that rotates when open. Opening a module lists its lessons in order: a video or
+reading icon, the title, the duration right-aligned as «m:ss» / «h:mm:ss», and on
+free-preview lessons «Vista previa gratuita» as a call to action.
 
 ```tsx
 import { CourseSyllabus } from '@reblu/site-blocks/client'
 
 // `course` is an `AcademyCourseDetail` from `client.academy.bySlug(slug)`.
-// It works from a Server Component page: every prop is serialisable.
-<CourseSyllabus modules={course.modules} />
+// From a Server Component page, use the serialisable template:
+<CourseSyllabus
+  modules={course.modules}
+  previewHrefTemplate={`/formacion/${course.slug}/preview/{lessonSlug}`}
+/>
+
+// From a Client Component you can pass functions instead:
+<CourseSyllabus
+  modules={course.modules}
+  getPreviewHref={(lesson) => `/formacion/${course.slug}/preview/${lesson.slug}`}
+  // or: onPreview={(lesson) => openPreviewModal(lesson.slug)}
+/>
 ```
 
+- **Free preview call to action.** `getPreviewHref(lesson)` (or the
+  serialisable `previewHrefTemplate`, with `{lessonSlug}` and `{lessonId}`)
+  renders a link; `onPreview(lesson)` renders a button (e.g. to open a modal).
+  Both apply only to lessons with `isFreePreview`. With neither, the flag is a
+  plain label. The link/button is named «Vista previa gratuita: {título}». Point
+  it at a page that renders `LessonPreview` (see "Free-preview lesson").
 - **Public data only.** It renders what the API serves. The API returns
   published lessons only, and never a video, playback or attachment id, a
   signed URL or the lesson content.
 - **Accessibility.** The block is a `region` named by its heading. A module
   with lessons is a `<button>` with `aria-expanded` and `aria-controls`
-  pointing at its lesson list. Tab reaches it; Enter and Space open and close
-  it. Modules open independently and start closed.
+  pointing at its lesson list. Tab reaches «Expandir todo», then each module;
+  Enter and Space open and close it, and an open module's preview links follow
+  it in the tab order. Modules open independently and start closed. Icons are
+  `aria-hidden`; each lesson's type is announced as «Vídeo» / «Lectura».
+  Durations are `<time datetime="PT10M0S">`.
 - **Modules without lessons** render as a plain row with the title, not a
   button. A payload without `lessons` renders the same way.
 - **Copy.** The defaults are Spanish (`DEFAULT_COURSE_SYLLABUS_LABELS`).
   Override any of them with `labels={{ heading, moduleSingular, modulePlural,
-  lessonSingular, lessonPlural, freePreview, hours, minutes }}`.
-- **Styling.** `headingLevel` (default `2`), `headingClassName` (replaces the
+  lessonSingular, lessonPlural, freePreview, hours, minutes, expandAll,
+  collapseAll, videoLesson, textLesson }}`.
+- **Styling.** Uses only the SDK tokens (`border`, `card`, `muted`, `primary`,
+  `ring`). `headingLevel` (default `2`), `headingClassName` (replaces the
   heading's typography, see the className rule above) and `className`. Style
-  the parts with `[data-slot="course-syllabus"]`, `course-syllabus-module`,
-  `course-syllabus-lessons` and `course-syllabus-lesson`. It renders nothing
-  for a course without modules.
+  the parts with `[data-slot="course-syllabus"]`, `course-syllabus-header`,
+  `course-syllabus-summary`, `course-syllabus-toggle-all`,
+  `course-syllabus-module`, `course-syllabus-chevron`, `course-syllabus-lessons`,
+  `course-syllabus-lesson`, `course-syllabus-lesson-icon` (`data-type="video" |
+  "text"`), `course-syllabus-lesson-title`, `course-syllabus-lesson-duration`
+  and `course-syllabus-preview`. No slot was renamed in REB-1135. It renders
+  nothing for a course without modules.
+
+## Free-preview lesson — `LessonPreview` (REB-1135)
+
+A lesson the owner marked «Vista previa gratuita», for visitors who have not
+paid or enrolled: the video and the lesson body. Fetch it on the server with
+`getLessonPreview` (`@reblu/site-next/academy-server`), which returns `null`
+for any lesson the public may not see.
+
+```tsx
+// app/formacion/[slug]/preview/[lessonSlug]/page.tsx — a Server Component
+import { notFound } from 'next/navigation'
+import { LessonPreview } from '@reblu/site-blocks'
+import { getLessonPreview } from '@reblu/site-next/academy-server'
+import { client } from '@/lib/reblu' // your server-side RebluClient
+
+export const dynamic = 'force-dynamic' // the video token is short-lived: never ISR
+
+export default async function Page({ params }) {
+  const { slug, lessonSlug } = await params
+  const lesson = await getLessonPreview(client, slug, lessonSlug)
+  if (!lesson) notFound()
+  return <LessonPreview lesson={lesson} headingLevel={1} />
+}
+```
+
+- **Player.** `video.embedUrl` is the provider's hosted player, already carrying
+  its short-lived token, rendered in an `<iframe>` named «Vídeo: {título}» —
+  no video library in the SDK. Only `https:` URLs are embedded. Add
+  `frame-src https://player.mux.com` to the SITE's Content-Security-Policy.
+  `video` is `null` for a text-only lesson (no player is rendered).
+- **Body.** `content` is Markdown, rendered through the same sanitising
+  pipeline as `CourseDescription`: no raw HTML, no scripts, no `javascript:`
+  links. Its headings sit one level below the lesson title. An empty body
+  renders nothing.
+- **Semantics.** An `<article>` named by the title; the duration is a
+  `<time>`. Server Component (RSC-safe), from the root entry.
+- **Copy.** Spanish defaults (`DEFAULT_LESSON_PREVIEW_LABELS`), override with
+  `labels={{ badge, player, duration }}`.
+- **Styling.** `headingLevel` (default `2`), `headingId`, `headingClassName`,
+  `contentClassName`, `className`; slots `lesson-preview`,
+  `lesson-preview-badge`, `lesson-preview-duration`, `lesson-preview-player`,
+  `lesson-preview-content`.
 
 ## Page blocks
 

package/dist/client.cjs

@@ -763,42 +763,104 @@ var DEFAULT_COURSE_SYLLABUS_LABELS = {
   lessonPlural: "lecciones",
   freePreview: "Vista previa gratuita",
   hours: "h",
-  minutes: "min"
+  minutes: "min",
+  expandAll: "Expandir todo",
+  collapseAll: "Contraer todo",
+  videoLesson: "V\xEDdeo",
+  textLesson: "Lectura"
 };
 var SEPARATOR = " \xB7 ";
 function count(n, singular, plural) {
   return `${n} ${n === 1 ? singular : plural}`;
 }
-function formatDuration(seconds, labels) {
+function formatTotal(seconds, labels) {
   const totalMinutes = Math.max(1, Math.round(seconds / 60));
   const hours = Math.floor(totalMinutes / 60);
   const minutes = totalMinutes % 60;
   if (hours === 0) return `${minutes} ${labels.minutes}`;
   return minutes === 0 ? `${hours} ${labels.hours}` : `${hours} ${labels.hours} ${minutes} ${labels.minutes}`;
 }
-function moduleSeconds(lessons) {
+function splitSeconds(seconds) {
+  const whole = Math.round(seconds);
+  return [Math.floor(whole / 3600), Math.floor(whole % 3600 / 60), whole % 60];
+}
+function formatClock(seconds) {
+  const [h, m, s] = splitSeconds(seconds);
+  const ss = String(s).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+function isoDuration(seconds) {
+  const [h, m, s] = splitSeconds(seconds);
+  return `PT${h > 0 ? `${h}H` : ""}${m}M${s}S`;
+}
+function hasDuration(lesson) {
+  return typeof lesson.durationSeconds === "number" && lesson.durationSeconds > 0;
+}
+function totalSeconds(lessons) {
+  if (lessons.length === 0) return null;
   let total = 0;
   for (const l of lessons) {
-    if (typeof l.durationSeconds !== "number" || l.durationSeconds <= 0) return null;
+    if (!hasDuration(l)) return null;
     total += l.durationSeconds;
   }
   return total;
 }
+function fillTemplate(template, lesson) {
+  return template.replaceAll("{lessonSlug}", encodeURIComponent(lesson.slug)).replaceAll("{lessonId}", encodeURIComponent(lesson.id));
+}
+var ICON_PROPS = {
+  "aria-hidden": true,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function LessonIcon({ type }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "svg",
+    {
+      ...ICON_PROPS,
+      "data-slot": "course-syllabus-lesson-icon",
+      "data-type": type,
+      className: "size-4 shrink-0 text-muted-foreground",
+      children: type === "video" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m10 8.5 5 3.5-5 3.5z" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M14 3v5h5M9 13h6M9 17h4" })
+      ] })
+    }
+  );
+}
+function PlayIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { ...ICON_PROPS, className: "size-3.5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m7 4 13 8-13 8z", fill: "currentColor" }) });
+}
+var PREVIEW_CTA = "inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary transition-colors hover:bg-primary hover:text-primary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none";
 function CourseSyllabus({
   modules,
   labels: labelOverrides,
   headingLevel = 2,
   headingClassName,
-  className
+  className,
+  getPreviewHref,
+  previewHrefTemplate,
+  onPreview
 }) {
   const labels = { ...DEFAULT_COURSE_SYLLABUS_LABELS, ...labelOverrides };
   const baseId = (0, import_react5.useId)();
   const [open, setOpen] = (0, import_react5.useState)(() => /* @__PURE__ */ new Set());
   if (modules.length === 0) return null;
-  const totalLessons = modules.reduce((sum, m) => sum + (m.lessons?.length ?? 0), 0);
+  const expandable = modules.filter((m) => (m.lessons?.length ?? 0) > 0).map((m) => m.id);
+  const allLessons = modules.flatMap((m) => m.lessons ?? []);
+  const courseSeconds = totalSeconds(allLessons);
   const summary = [count(modules.length, labels.moduleSingular, labels.modulePlural)];
-  if (totalLessons > 0)
-    summary.push(count(totalLessons, labels.lessonSingular, labels.lessonPlural));
+  if (allLessons.length > 0)
+    summary.push(count(allLessons.length, labels.lessonSingular, labels.lessonPlural));
+  if (courseSeconds !== null) summary.push(formatTotal(courseSeconds, labels));
+  const allOpen = expandable.length > 0 && expandable.every((id) => open.has(id));
   const headingId = `${baseId}-heading`;
   const Tag = `h${headingLevel}`;
   function toggle(id) {
@@ -809,6 +871,44 @@ function CourseSyllabus({
       return next;
     });
   }
+  function previewHref(lesson) {
+    if (getPreviewHref) return getPreviewHref(lesson);
+    return previewHrefTemplate ? fillTemplate(previewHrefTemplate, lesson) : void 0;
+  }
+  function renderPreview(lesson) {
+    const name = `${labels.freePreview}: ${lesson.title}`;
+    const href = previewHref(lesson);
+    if (href) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("a", { href, "aria-label": name, "data-slot": "course-syllabus-preview", className: PREVIEW_CTA, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlayIcon, {}),
+        labels.freePreview
+      ] });
+    }
+    if (onPreview) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "button",
+        {
+          type: "button",
+          "aria-label": name,
+          "data-slot": "course-syllabus-preview",
+          onClick: () => onPreview(lesson),
+          className: (0, import_utils8.cn)(PREVIEW_CTA, "cursor-pointer"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlayIcon, {}),
+            labels.freePreview
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "span",
+      {
+        "data-slot": "course-syllabus-preview",
+        className: "rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground",
+        children: labels.freePreview
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "section",
     {
@@ -816,24 +916,43 @@ function CourseSyllabus({
       "aria-labelledby": headingId,
       className: (0, import_utils8.cn)("space-y-4", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            Tag,
-            {
-              id: headingId,
-              className: slotClassName("", "text-xl font-semibold", headingClassName),
-              children: labels.heading
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { "data-slot": "course-syllabus-summary", className: "text-sm text-muted-foreground", children: summary.join(SEPARATOR) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ol", { className: "flex list-none flex-col gap-2.5 p-0", children: modules.map((module2, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            "data-slot": "course-syllabus-header",
+            className: "flex flex-wrap items-end justify-between gap-x-4 gap-y-2",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  Tag,
+                  {
+                    id: headingId,
+                    className: slotClassName("", "text-xl font-semibold", headingClassName),
+                    children: labels.heading
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { "data-slot": "course-syllabus-summary", className: "text-sm text-muted-foreground", children: summary.join(SEPARATOR) })
+              ] }),
+              expandable.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "course-syllabus-toggle-all",
+                  onClick: () => setOpen(allOpen ? /* @__PURE__ */ new Set() : new Set(expandable)),
+                  className: "cursor-pointer rounded-md px-2 py-1 text-sm font-semibold text-primary underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+                  children: allOpen ? labels.collapseAll : labels.expandAll
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ol", { className: "list-none divide-y divide-border overflow-hidden rounded-xl border border-border bg-card p-0", children: modules.map((module2, index) => {
           const lessons = module2.lessons ?? [];
           const number = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "span",
             {
               "aria-hidden": "true",
-              className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-semibold text-primary",
+              className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary tabular-nums",
               children: index + 1
             }
           );
@@ -842,7 +961,7 @@ function CourseSyllabus({
               "li",
               {
                 "data-slot": "course-syllabus-module",
-                className: "flex items-center gap-3.5 rounded-lg border border-border bg-card px-4 py-3.5",
+                className: "flex items-center gap-4 px-4 py-4 sm:px-5",
                 children: [
                   number,
                   /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-semibold leading-snug", children: module2.title })
@@ -853,69 +972,85 @@ function CourseSyllabus({
           }
           const isOpen = open.has(module2.id);
           const panelId = `${baseId}-module-${index}`;
-          const seconds = moduleSeconds(lessons);
+          const seconds = totalSeconds(lessons);
           const meta = [count(lessons.length, labels.lessonSingular, labels.lessonPlural)];
-          if (seconds !== null) meta.push(formatDuration(seconds, labels));
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-            "li",
-            {
-              "data-slot": "course-syllabus-module",
-              className: "rounded-lg border border-border bg-card",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-expanded": isOpen,
-                    "aria-controls": panelId,
-                    onClick: () => toggle(module2.id),
-                    className: "flex w-full cursor-pointer items-center gap-3.5 rounded-lg px-4 py-3.5 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
-                    children: [
-                      number,
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-semibold leading-snug", children: module2.title }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm text-muted-foreground", children: meta.join(SEPARATOR) })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                        "span",
-                        {
-                          "aria-hidden": "true",
-                          className: (0, import_utils8.cn)(
-                            "shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none",
-                            isOpen && "rotate-180"
-                          ),
-                          children: "\u25BE"
-                        }
-                      )
-                    ]
-                  }
+          if (seconds !== null) meta.push(formatTotal(seconds, labels));
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { "data-slot": "course-syllabus-module", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": isOpen,
+                "aria-controls": panelId,
+                onClick: () => toggle(module2.id),
+                className: (0, import_utils8.cn)(
+                  "flex w-full cursor-pointer items-center gap-4 px-4 py-4 text-left transition-colors hover:bg-muted/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none sm:px-5",
+                  isOpen && "bg-muted/40"
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  "ol",
-                  {
-                    id: panelId,
-                    hidden: !isOpen,
-                    "data-slot": "course-syllabus-lessons",
-                    className: "list-none space-y-2 border-t border-border px-4 py-3 pl-[3.75rem]",
-                    children: lessons.map((lesson) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                      "li",
-                      {
-                        "data-slot": "course-syllabus-lesson",
-                        className: "flex flex-wrap items-baseline gap-x-3 gap-y-1 text-sm",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-slot": "course-syllabus-lesson-title", className: "flex-1", children: lesson.title }),
-                          lesson.isFreePreview && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rounded-full bg-muted px-2 py-0.5 text-xs font-medium", children: labels.freePreview }),
-                          typeof lesson.durationSeconds === "number" && lesson.durationSeconds > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-muted-foreground tabular-nums", children: formatDuration(lesson.durationSeconds, labels) })
-                        ]
-                      },
-                      lesson.id
-                    ))
-                  }
-                )
-              ]
-            },
-            module2.id
-          );
+                children: [
+                  number,
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-semibold leading-snug", children: module2.title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm text-muted-foreground", children: meta.join(SEPARATOR) })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "svg",
+                    {
+                      ...ICON_PROPS,
+                      "data-slot": "course-syllabus-chevron",
+                      className: (0, import_utils8.cn)(
+                        "size-5 shrink-0 text-muted-foreground transition-transform duration-200 motion-reduce:transition-none",
+                        isOpen && "rotate-180"
+                      ),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m6 9 6 6 6-6" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "ol",
+              {
+                id: panelId,
+                hidden: !isOpen,
+                "data-slot": "course-syllabus-lessons",
+                className: "list-none border-t border-border p-0 py-1",
+                children: lessons.map((lesson) => {
+                  const type = lesson.hasVideo ? "video" : "text";
+                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    "li",
+                    {
+                      "data-slot": "course-syllabus-lesson",
+                      className: "flex flex-wrap items-center gap-x-3 gap-y-1.5 px-4 py-2.5 text-sm sm:pl-[4.25rem] sm:pr-5",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LessonIcon, { type }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sr-only", children: type === "video" ? labels.videoLesson : labels.textLesson }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          "span",
+                          {
+                            "data-slot": "course-syllabus-lesson-title",
+                            className: "min-w-0 flex-1 leading-snug",
+                            children: lesson.title
+                          }
+                        ),
+                        lesson.isFreePreview && renderPreview(lesson),
+                        hasDuration(lesson) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          "time",
+                          {
+                            "data-slot": "course-syllabus-lesson-duration",
+                            dateTime: isoDuration(lesson.durationSeconds),
+                            className: "ml-auto shrink-0 text-muted-foreground tabular-nums",
+                            children: formatClock(lesson.durationSeconds)
+                          }
+                        )
+                      ]
+                    },
+                    lesson.id
+                  );
+                })
+              }
+            )
+          ] }, module2.id);
         }) })
       ]
     }