@curio-sd/e-module-builder 0.3.1 → 0.5.0

package/build.mjs

@@ -24,8 +24,52 @@ const marked = new Marked(
   })
 )
 
+const SECTION_RE = /^([a-zA-Z]+)(\d+)$/
+
+function sectionLabel(prefix, num) {
+  return `${prefix.charAt(0).toUpperCase()}${prefix.slice(1)} ${num}`
+}
+
 // ─── helpers ────────────────────────────────────────────────────────────────
 
+function rewriteAssetPaths(html, basePath) {
+  if (!basePath || !html) return html
+  const prefix = `../${basePath}/`
+  html = html.replace(
+    /(<img\s[^>]*\bsrc=")(?!https?:\/\/|\/|data:|\.\.)([^"]+)(")/g,
+    `$1${prefix}$2$3`
+  )
+  html = html.replace(
+    /(<a\s[^>]*\bhref=")(?!https?:\/\/|\/|#|mailto:|\.\.)([^"]+)(")/g,
+    `$1${prefix}$2$3`
+  )
+  return html
+}
+
+function copyStaticAssets() {
+  const PUBLIC_DIR = path.join(PROJECT_DIR, 'public')
+
+  const pkgPublic = path.join(PKG_DIR, 'public')
+  if (fs.existsSync(pkgPublic)) {
+    fs.cpSync(pkgPublic, PUBLIC_DIR, { recursive: true })
+  }
+
+  function walkAndCopy(srcDir, relPath) {
+    for (const entry of fs.readdirSync(srcDir, { withFileTypes: true })) {
+      const srcPath = path.join(srcDir, entry.name)
+      const destRel = relPath ? `${relPath}/${entry.name}` : entry.name
+      if (entry.isDirectory()) {
+        walkAndCopy(srcPath, destRel)
+      } else if (!entry.name.endsWith('.md') && !entry.name.endsWith('.html')) {
+        const destPath = path.join(PUBLIC_DIR, destRel)
+        fs.mkdirSync(path.dirname(destPath), { recursive: true })
+        fs.copyFileSync(srcPath, destPath)
+      }
+    }
+  }
+  walkAndCopy(CONTENT, '')
+}
+
 function readMd(filePath) {
   const raw = fs.readFileSync(filePath, 'utf8')
   return matter(raw)
@@ -70,8 +114,8 @@ const mod = moduleMd.data
 
 const weekDirs = fs
   .readdirSync(CONTENT)
-  .filter(d => /^week\d+$/.test(d) && fs.statSync(path.join(CONTENT, d)).isDirectory())
-  .sort((a, b) => parseInt(a.slice(4)) - parseInt(b.slice(4)))
+  .filter(d => SECTION_RE.test(d) && fs.statSync(path.join(CONTENT, d)).isDirectory())
+  .sort((a, b) => parseInt(a.match(SECTION_RE)[2]) - parseInt(b.match(SECTION_RE)[2]))
 
 const weekCount = mod.weeks > 0 ? mod.weeks : weekDirs.length
 const activeWeeks = weekDirs.slice(0, weekCount)
@@ -81,7 +125,8 @@ const activeWeeks = weekDirs.slice(0, weekCount)
 const weeksData = []
 
 for (const weekDir of activeWeeks) {
-  const weekNum = parseInt(weekDir.slice(4))
+  const [, sectionPrefix, sectionNumStr] = weekDir.match(SECTION_RE)
+  const weekNum = parseInt(sectionNumStr)
   const dir = path.join(CONTENT, weekDir)
 
   // theory.md → src/data/theory-weekN.json
@@ -91,18 +136,18 @@ for (const weekDir of activeWeeks) {
     title: theoryMd.data.title,
     goal: theoryMd.data.goal,
     accent: theoryMd.data.accent,
-    html: marked.parse(theoryMd.content ?? ''),
+    html: rewriteAssetPaths(marked.parse(theoryMd.content ?? ''), `week${weekNum}`),
   }
   writeJson(SRC_DATA, `theory-week${weekNum}.json`, theoryOut)
 
-  // quiz.md → src/data/tussentoets-weekN.json
+  // quiz.md → src/data/meetmoment-quiz-weekN.json
   const quizMd = readMd(path.join(dir, 'quiz.md'))
   const quizOut = {
     title: quizMd.data.title,
     passScore: quizMd.data.passScore ?? 70,
     questions: quizMd.data.questions ?? [],
   }
-  writeJson(SRC_DATA, `tussentoets-week${weekNum}.json`, quizOut)
+  writeJson(SRC_DATA, `meetmoment-quiz-week${weekNum}.json`, quizOut)
 
   // exercises/ subfolder → src/data/exercises/weekN.json
   const exDir = path.join(dir, 'exercises')
@@ -111,9 +156,16 @@ for (const weekDir of activeWeeks) {
     .filter(f => f.endsWith('.md') && f !== '_meta.md')
     .sort((a, b) => parseInt(a) - parseInt(b))
   const exercises = exerciseFiles.map(f => {
-    const ex = readMd(path.join(exDir, f)).data
+    const { data: ex, content } = readMd(path.join(exDir, f))
     if (!ex.type || ex.type === 'text') {
-      ex.descriptionHtml = marked.parse(ex.description ?? '')
+      const src = content?.trim() ? content : (ex.description ?? '')
+      ex.descriptionHtml = rewriteAssetPaths(marked.parse(src), `week${weekNum}/exercises`)
+    }
+    ex.descriptionInlineHtml = marked.parseInline(ex.description ?? '')
+    if (ex.type === 'external') {
+      if (ex.task)     ex.taskHtml     = marked.parseInline(ex.task)
+      if (ex.hint)     ex.hintHtml     = marked.parse(ex.hint)
+      if (ex.solution) ex.solutionHtml = marked.parse(ex.solution)
     }
     return ex
   })
@@ -132,32 +184,78 @@ for (const weekDir of activeWeeks) {
     week: hwMd.data.week ?? weekNum,
     title: hwMd.data.title,
     subtitle: hwMd.data.subtitle ?? '',
-    html: marked.parse(hwMd.content ?? ''),
+    html: rewriteAssetPaths(marked.parse(hwMd.content ?? ''), `week${weekNum}`),
     deliverables: hwMd.data.deliverables ?? [],
     criteria: hwMd.data.criteria ?? [],
     maxPoints: hwMd.data.maxPoints ?? 0,
     tips: hwMd.data.tips ?? [],
+    ...(hwMd.data.linked_theory ? { linked_theory: hwMd.data.linked_theory } : {}),
   }
   writeJson(SRC_DATA, `inleveropdracht-week${weekNum}.json`, hwOut)
 
   weeksData.push({
     week: weekNum,
+    dirName: weekDir,
+    prefix: sectionPrefix,
     title: theoryMd.data.title,
-    summary: theoryMd.data.summary ?? '',
+    summary: marked.parseInline(theoryMd.data.summary ?? ''),
     goal: theoryMd.data.goal,
     leeruitkomsten: theoryMd.data.leeruitkomsten ?? [],
     color: theoryMd.data.accent,
     pages: [
-      { key: 'theorie', href: `/pages/week${weekNum}-theorie.html`, label: 'Theorie' },
-      { key: 'oefeningen', href: `/pages/week${weekNum}-oefeningen.html`, label: 'Oefeningen' },
-      { key: 'toets', href: `/pages/week${weekNum}-toets.html`, label: 'Tussentoets' },
-      { key: 'oefening', href: `/pages/week${weekNum}-oefening.html`, label: 'Oefening' },
-      { key: 'inleveropdracht', href: `/pages/week${weekNum}-inleveropdracht.html`, label: 'Inleveropdracht' },
+      { key: 'theorie', href: `/pages/${weekDir}-theorie.html`, label: 'Theorie' },
+      { key: 'oefeningen', href: `/pages/${weekDir}-oefeningen.html`, label: 'Oefeningen' },
+      { key: 'meetmoment', href: `/pages/${weekDir}-meetmoment.html`, label: 'Meetmoment' },
+      { key: 'oefening', href: `/pages/${weekDir}-oefening.html`, label: 'Oefening' },
+      { key: 'inleveropdracht', href: `/pages/${weekDir}-inleveropdracht.html`, label: 'Inleveropdracht' },
     ],
   })
 }
 
-// ─── 4. manifest.json ────────────────────────────────────────────────────────
+// ─── 4. assessment data (parsed early so navLabel is available for manifest) ───────
+
+const ASSESSMENTS_DIR = path.join(CONTENT, 'assessments')
+
+function buildAssessmentData(filePath, fallbackTitle, fallbackNavLabel, fallbackDescription) {
+  if (fs.existsSync(filePath)) {
+    const md = readMd(filePath)
+    return {
+      title: md.data.title ?? fallbackTitle,
+      navLabel: md.data.navLabel ?? fallbackNavLabel,
+      description: marked.parseInline(md.data.description ?? fallbackDescription),
+      passScore: md.data.passScore ?? 70,
+      questions: md.data.questions ?? [],
+    }
+  }
+  return { title: fallbackTitle, navLabel: fallbackNavLabel, description: marked.parseInline(fallbackDescription), passScore: 70, questions: [] }
+}
+
+function buildPracticalAssessmentData(filePath, fallbackTitle, fallbackNavLabel) {
+  if (fs.existsSync(filePath)) {
+    const md = readMd(filePath)
+    return {
+      title: md.data.title ?? fallbackTitle,
+      navLabel: md.data.navLabel ?? fallbackNavLabel,
+      description: marked.parseInline(md.data.description ?? ''),
+      html: marked.parse(md.content ?? ''),
+    }
+  }
+  return { title: fallbackTitle, navLabel: fallbackNavLabel, description: '', html: '' }
+}
+
+const theoryAssessmentData = buildAssessmentData(
+  path.join(ASSESSMENTS_DIR, 'theory-assessment.md'),
+  `Meetmoment theorie — ${mod.name}`,
+  'Meetmoment Theorie',
+  'Meerkeuzevragen over de module. Minimaal 70% om te slagen.'
+)
+const practicalAssessmentData = buildPracticalAssessmentData(
+  path.join(ASSESSMENTS_DIR, 'practical-assessment.md'),
+  `Meetmoment praktijk — ${mod.name}`,
+  'Meetmoment Praktijk'
+)
+
+// ─── 5. manifest.json ────────────────────────────────────────────────────────
 
 const manifest = {
   module: {
@@ -166,7 +264,7 @@ const manifest = {
     youtube: mod.youtube ?? null,
     weeks: weekCount,
     language: mod.language ?? 'nl',
-    description: mod.description ?? '',
+    description: marked.parseInline(mod.description ?? ''),
     logoAlt: mod.logoAlt ?? mod.name,
     exerciseMode: mod.exerciseMode ?? 'external',
   },
@@ -174,34 +272,37 @@ const manifest = {
   nav: {
     home: { href: '/index.html', label: 'Home' },
     weeks: weeksData.map(wk => ({
-      label: `Week ${wk.week}`,
+      label: sectionLabel(wk.prefix, wk.week),
       title: wk.title,
       children: [
-        { href: `/pages/week${wk.week}-theorie.html`, label: 'Theorie' },
-        { href: `/pages/week${wk.week}-oefeningen.html`, label: 'Oefeningen' },
-        { href: `/pages/week${wk.week}-toets.html`, label: 'Tussentoets' },
-        { href: `/pages/week${wk.week}-inleveropdracht.html`, label: 'Inleveropdracht' },
+        { href: `/pages/${wk.dirName}-theorie.html`, label: 'Theorie' },
+        { href: `/pages/${wk.dirName}-oefeningen.html`, label: 'Oefeningen' },
+        { href: `/pages/${wk.dirName}-meetmoment.html`, label: 'Quiz' },
+        { href: `/pages/${wk.dirName}-inleveropdracht.html`, label: 'Inleveropdracht' },
       ],
     })),
-    examPages: [
-      { href: '/pages/checklist.html', label: 'Checklist' },
-      { href: '/pages/toets-theorie.html', label: 'Eindtoets theorie' },
-      { href: '/pages/toets-praktijk.html', label: 'Eindtoets praktijk' },
-    ],
+    assessmentSection: {
+      label: mod.assessmentSectionLabel ?? 'Afronding',
+      children: [
+        { href: '/pages/checklist.html', label: 'Checklist' },
+        { href: '/pages/meetmoment-theorie.html', label: theoryAssessmentData.navLabel },
+        { href: '/pages/meetmoment-praktijk.html', label: practicalAssessmentData.navLabel },
+      ],
+    },
   },
   pages: {
     static: [
       'index.html',
       'pages/checklist.html',
-      'pages/toets-theorie.html',
-      'pages/toets-praktijk.html',
+      'pages/meetmoment-theorie.html',
+      'pages/meetmoment-praktijk.html',
     ],
     week: weeksData.flatMap(wk => [
-      `pages/week${wk.week}-theorie.html`,
-      `pages/week${wk.week}-oefeningen.html`,
-      `pages/week${wk.week}-toets.html`,
-      `pages/week${wk.week}-oefening.html`,
-      `pages/week${wk.week}-inleveropdracht.html`,
+      `pages/${wk.dirName}-theorie.html`,
+      `pages/${wk.dirName}-oefeningen.html`,
+      `pages/${wk.dirName}-meetmoment.html`,
+      `pages/${wk.dirName}-oefening.html`,
+      `pages/${wk.dirName}-inleveropdracht.html`,
     ]),
   },
   content: {
@@ -215,12 +316,13 @@ writeJson(SRC_DATA, 'manifest.json', manifest)
 // ─── 5. checklist.json ───────────────────────────────────────────────────────
 
 const checklistGroups = weeksData.map(wk => ({
-  id: `week${wk.week}`,
-  title: `Week ${wk.week} — ${wk.title}`,
+  id: wk.dirName,
+  title: `${sectionLabel(wk.prefix, wk.week)} — ${wk.title}`,
   color: wk.color,
   items: (wk.leeruitkomsten ?? []).map((text, i) => ({
-    id: `week${wk.week}-item-${i}`,
+    id: `${wk.dirName}-item-${i}`,
     text,
+    textHtml: marked.parseInline(text),
   })),
 }))
 
@@ -229,37 +331,16 @@ if (mod.algemeen?.length) {
     id: 'algemeen',
     title: 'Algemeen',
     color: 'slate',
-    items: mod.algemeen.map((text, i) => ({ id: `algemeen-item-${i}`, text })),
+    items: mod.algemeen.map((text, i) => ({ id: `algemeen-item-${i}`, text, textHtml: marked.parseInline(text) })),
   })
 }
 
 writeJson(SRC_DATA, 'checklist.json', { groups: checklistGroups })
 
-// ─── 5b. exam data files (optional content/exams/*.md, else empty placeholder) ─
-
-function buildExamData(filePath, fallbackTitle) {
-  if (fs.existsSync(filePath)) {
-    const md = readMd(filePath)
-    return {
-      title: md.data.title ?? fallbackTitle,
-      passScore: md.data.passScore ?? 70,
-      questions: md.data.questions ?? [],
-    }
-  }
-  return { title: fallbackTitle, passScore: 70, questions: [] }
-}
+// ─── 5b. write assessment data JSON files ──────────────────────────────────────────
 
-const EXAMS_DIR = path.join(CONTENT, 'exams')
-writeJson(
-  SRC_DATA,
-  'toets-theorie.json',
-  buildExamData(path.join(EXAMS_DIR, 'theory-exam.md'), `Eindtoets theorie — ${mod.name}`)
-)
-writeJson(
-  SRC_DATA,
-  'toets-praktijk.json',
-  buildExamData(path.join(EXAMS_DIR, 'practical-exam.md'), `Eindtoets praktijk — ${mod.name}`)
-)
+writeJson(SRC_DATA, 'meetmoment-theorie.json', theoryAssessmentData)
+writeJson(SRC_DATA, 'meetmoment-praktijk.json', practicalAssessmentData)
 
 // ─── 6. generate per-week page stubs ─────────────────────────────────────────
 
@@ -267,27 +348,27 @@ const PAGE_TYPES = [
   {
     tplFile: 'theorie.html',
     suffix: 'theorie',
-    pageTitle: wk => `Theorie Week ${wk.week} — ${wk.title}`,
+    pageTitle: wk => `Theorie ${sectionLabel(wk.prefix, wk.week)} — ${wk.title}`,
   },
   {
-    tplFile: 'toets.html',
-    suffix: 'toets',
-    pageTitle: wk => `Tussentoets Week ${wk.week} — ${wk.title}`,
+    tplFile: 'meetmoment.html',
+    suffix: 'meetmoment',
+    pageTitle: wk => `Meetmoment ${sectionLabel(wk.prefix, wk.week)} — ${wk.title}`,
   },
   {
     tplFile: 'oefeningen.html',
     suffix: 'oefeningen',
-    pageTitle: wk => `Oefeningen Week ${wk.week} — ${wk.title}`,
+    pageTitle: wk => `Oefeningen ${sectionLabel(wk.prefix, wk.week)} — ${wk.title}`,
   },
   {
     tplFile: 'oefening.html',
     suffix: 'oefening',
-    pageTitle: wk => `Oefening — Week ${wk.week}`,
+    pageTitle: wk => `Oefening — ${sectionLabel(wk.prefix, wk.week)}`,
   },
   {
     tplFile: 'inleveropdracht.html',
     suffix: 'inleveropdracht',
-    pageTitle: wk => `Inleveropdracht Week ${wk.week} — ${wk.title}`,
+    pageTitle: wk => `Inleveropdracht ${sectionLabel(wk.prefix, wk.week)} — ${wk.title}`,
   },
 ]
 
@@ -302,21 +383,31 @@ for (const { tplFile, suffix, pageTitle } of PAGE_TYPES) {
       weekTitle: wk.title,
       pageTitle: pageTitle(wk),
     })
-    fs.writeFileSync(path.join(PAGES, `week${wk.week}-${suffix}.html`), out)
+    fs.writeFileSync(path.join(PAGES, `${wk.dirName}-${suffix}.html`), out)
   }
 }
 
-// ─── 7. copy static pages (checklist, exams) with title substitution ─────────
+// ─── 7. copy static pages (checklist, assessments) with title substitution ─────────
 
 const STATIC_PAGES = [
   { src: 'checklist.html', pageTitle: `Checklist — ${mod.name}` },
-  { src: 'toets-theorie.html', pageTitle: `Eindtoets theorie — ${mod.name}` },
-  { src: 'toets-praktijk.html', pageTitle: `Eindtoets praktijk — ${mod.name}` },
+  {
+    src: 'meetmoment-theorie.html',
+    pageTitle: `${theoryAssessmentData.navLabel} — ${mod.name}`,
+    assessmentTitle: theoryAssessmentData.navLabel,
+    assessmentDescription: theoryAssessmentData.description,
+  },
+  {
+    src: 'meetmoment-praktijk.html',
+    pageTitle: `${practicalAssessmentData.navLabel} — ${mod.name}`,
+    assessmentTitle: practicalAssessmentData.navLabel,
+    assessmentDescription: practicalAssessmentData.description,
+  },
 ]
 
-for (const { src, pageTitle } of STATIC_PAGES) {
+for (const { src, pageTitle, assessmentTitle, assessmentDescription } of STATIC_PAGES) {
   const tpl = fs.readFileSync(path.join(TEMPLATES, src), 'utf8')
-  const out = applyTemplate(tpl, { pageTitle })
+  const out = applyTemplate(tpl, { pageTitle, assessmentTitle, assessmentDescription })
   fs.writeFileSync(path.join(PAGES, src), out)
 }
 
@@ -332,4 +423,6 @@ for (const f of htmlFiles) {
 const indexTpl = fs.readFileSync(path.join(PKG_DIR, 'templates/index.html'), 'utf8')
 fs.writeFileSync(path.join(PROJECT_DIR, 'index.html'), applyTemplate(indexTpl, { pageTitle: mod.name }))
 
+copyStaticAssets()
+
 console.log(`Build complete: ${weekCount} weeks → src/data/ and pages/`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curio-sd/e-module-builder",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "type": "module",
   "description": "A tool for building e-modules for Curio SD",
   "license": "MIT",
@@ -11,6 +11,7 @@
     "templates",
     "public",
     "build.mjs",
+    "build-pdf.mjs",
     "vite.config.js",
     "vite-plugin-html-includes.js"
   ],
@@ -30,6 +31,7 @@
     "marked": "^18.0.5",
     "marked-highlight": "^2.2.4",
     "monaco-editor": "^0.53.0",
+    "pdfkit": "^0.19.1",
     "tailwindcss": "^4.1.8",
     "vite": "^8.0.16",
     "yaml": "^2.9.0"

package/src/css/main.css

@@ -23,39 +23,6 @@
   body {
     @apply text-zinc-800;
   }
-
-  /* Given that markdown is placed inside main, we want some basic styling for headings */
-  main h2 {
-    @apply mt-8 text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400;
-  }
-
-  main h3 {
-    @apply mt-4 text-base font-bold text-zinc-900
-  }
-
-  main h4 {
-    @apply mt-3 text-sm font-semibold text-zinc-900
-  }
-
-  main h5 {
-    @apply mt-2 text-sm font-normal uppercase text-zinc-900
-  }
-
-  main h6 {
-    @apply mt-2 text-sm font-light uppercase text-zinc-900
-  }
-
-  main p {
-    @apply mt-2 text-sm leading-relaxed text-zinc-700;
-  }
-
-  main ul {
-    @apply mt-2 text-sm list-inside list-disc space-y-1.5 pl-1;
-  }
-
-  main ol {
-    @apply mt-2 text-sm list-inside list-decimal space-y-1.5 pl-1;
-  }
 }
 
 @layer components {
@@ -189,73 +156,103 @@
     @apply mx-3 mb-2 mt-1 flex items-center gap-2 border border-zinc-600 bg-zinc-900 px-3 py-2.5 text-[13px] font-medium text-zinc-100 transition hover:border-zinc-500 hover:bg-zinc-800 hover:text-white;
   }
 
+  .nav-group-toggle {
+    @apply flex w-full items-start justify-between px-3 pb-1 pt-4 text-left;
+  }
+
+  .nav-group-chevron {
+    @apply mt-0.5 h-3 w-3 shrink-0 text-zinc-500 transition-transform duration-200;
+  }
+
+  .nav-group-children {
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows 0.2s ease;
+  }
+
+  .nav-group-children.collapsed {
+    grid-template-rows: 0fr;
+  }
+
+  .nav-group-inner {
+    overflow: hidden;
+  }
+
   /* ── Theory prose typography ─────────────────────────────────────────────── */
 
-  .prose-theory {
+  main {
     @apply space-y-6 text-zinc-700;
   }
 
-  .prose-theory h2 {
+  main h2 {
     @apply mt-8 text-xl font-semibold text-zinc-900 first:mt-0;
   }
 
-  .prose-theory h3 {
+  main h3 {
     @apply mt-4 text-base font-semibold text-zinc-900;
   }
 
-  .prose-theory p {
+  main p {
     @apply leading-relaxed;
   }
 
-  .prose-theory ul {
+  main ul {
     @apply list-inside list-disc space-y-1.5 pl-1;
   }
 
-  .prose-theory ol {
+  main ol {
     @apply list-inside list-decimal space-y-1.5 pl-1;
   }
 
-  .prose-theory li {
+  main li {
     @apply leading-relaxed;
   }
 
-  .prose-theory a {
+  main a {
     @apply font-medium text-zinc-900 underline decoration-zinc-300 underline-offset-4 transition hover:decoration-zinc-900;
   }
 
-  .prose-theory code {
+  main code {
     @apply rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-sm text-zinc-800;
   }
 
-  .prose-theory pre {
+  main pre {
     @apply overflow-x-auto bg-zinc-950 p-5 font-mono text-[13px] leading-relaxed text-zinc-300;
   }
 
-  .prose-theory pre code {
+  main pre code {
     @apply bg-transparent p-0 text-inherit;
   }
 
-  .prose-theory blockquote {
+  main blockquote {
     @apply border-l-4 border-zinc-300 pl-4 italic text-zinc-500;
   }
 
-  .prose-theory table {
+  main table {
     @apply w-full text-left text-sm;
   }
 
-  .prose-theory thead tr {
+  main thead tr {
     @apply border-b border-zinc-200 text-zinc-500;
   }
 
-  .prose-theory tbody tr {
+  main tbody tr {
     @apply border-b border-zinc-100 last:border-0;
   }
 
-  .prose-theory th,
-  .prose-theory td {
+  main th,
+  main td {
     @apply py-2 pr-4;
   }
 
+  main details {
+    @apply rounded bg-zinc-100 p-4;
+  }
+
+  main details summary {
+    @apply cursor-pointer font-medium text-zinc-900 underline decoration-zinc-300 underline-offset-4 transition hover:decoration-zinc-900;
+  }
+
   /* ── Custom components ───────────────────────────────────────────────────── */
 
   x-card {
@@ -313,4 +310,81 @@
   x-nav>p>a:last-child {
     @apply border-transparent bg-zinc-900 text-white hover:border-transparent hover:bg-zinc-800 focus-visible:ring-zinc-900;
   }
+
+  /* ── Theory side panel ───────────────────────────────────────────────────── */
+
+  .theory-panel {
+    @apply fixed inset-y-0 right-0 z-40 flex w-[480px] max-w-[90vw] flex-col border-l border-zinc-200 bg-white shadow-xl;
+  }
+
+  .theory-panel.panel-ready {
+    @apply transition-transform duration-300 ease-out;
+  }
+
+  .theory-panel.panel-hidden {
+    @apply translate-x-full;
+  }
+
+  .theory-panel-header {
+    @apply flex shrink-0 items-center border-b border-zinc-200 bg-zinc-50;
+  }
+
+  .theory-panel-tabs {
+    @apply flex flex-1 overflow-x-auto;
+    scrollbar-width: none;
+  }
+
+  .theory-panel-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .theory-tab {
+    @apply whitespace-nowrap border-b-2 border-transparent px-4 py-3 text-sm font-medium text-zinc-500 transition hover:text-zinc-900;
+  }
+
+  .theory-tab-active {
+    @apply border-zinc-900 text-zinc-900;
+  }
+
+  .theory-panel-close {
+    @apply shrink-0 p-3 text-zinc-400 transition hover:text-zinc-700;
+  }
+
+  .theory-panel-body {
+    @apply relative min-h-0 flex-1 flex flex-col;
+  }
+
+  .theory-panel-loader {
+    @apply absolute inset-0 z-10 flex items-center justify-center bg-white/80 backdrop-blur-sm;
+  }
+
+  .theory-panel-loader-hidden {
+    @apply hidden;
+  }
+
+  .theory-panel-spinner {
+    @apply h-8 w-8 animate-spin rounded-full border-2 border-zinc-200 border-t-zinc-700;
+  }
+
+  .theory-panel-iframe {
+    @apply min-h-0 flex-1 w-full border-0;
+  }
+
+  .theory-panel-toggle {
+    @apply fixed bottom-6 right-6 shadow z-50 flex items-center gap-2 bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white shadow-lg transition hover:bg-zinc-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 focus-visible:ring-offset-2;
+  }
+
+  /* ── Embedded theory mode (inside iframe) ────────────────────────────────── */
+
+  [data-embedded] {
+    @apply bg-white;
+  }
+
+  [data-embedded] [data-theory] {
+    @apply px-6 py-8;
+  }
+
+  [data-embedded] main {
+    @apply !p-0;
+  }
 }

package/src/js/checklist.js

@@ -20,7 +20,7 @@ export function initChecklist() {
                 class="mt-0.5 h-4 w-4 border-zinc-300 text-zinc-900 focus:ring-zinc-900"
                 ${checked ? 'checked' : ''}
               />
-              <span class="text-sm leading-relaxed ${checked ? 'text-zinc-400 line-through' : 'text-zinc-700'}">${item.text}</span>
+              <span class="text-sm leading-relaxed ${checked ? 'text-zinc-400 line-through' : 'text-zinc-700'}">${item.textHtml ?? item.text}</span>
             </label>
           `
         })