@datajaddah/course 0.0.2

package/lib/preview.js

@@ -0,0 +1,1617 @@
+import { createServer } from "node:http";
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+import process from "node:process";
+import { fileURLToPath } from "node:url";
+
+import {
+  RepoContractError,
+  buildValidationSummary,
+  parseCourseRepository,
+} from "./repo-contract.js";
+import { replaceSlotImagesForPreview } from "./slide-markdown.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PREVIEW_DIST = path.join(__dirname, "../preview-dist");
+
+const MIME_TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".ico": "image/x-icon",
+};
+
+function serveStaticFile(filePath, response) {
+  try {
+    const content = readFileSync(filePath);
+    const ext = path.extname(filePath);
+    const contentType = MIME_TYPES[ext] || "application/octet-stream";
+    response.writeHead(200, { "content-type": contentType });
+    response.end(content);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function hasPreviewDist() {
+  return existsSync(path.join(PREVIEW_DIST, "index.html"));
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/\"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function renderInlineMarkdown(text) {
+  const placeholders = [];
+  let html = escapeHtml(text);
+
+  html = html.replace(/`([^`]+)`/g, (_, code) => {
+    const placeholder = `__INLINE_CODE_${placeholders.length}__`;
+    placeholders.push(`<code>${escapeHtml(code)}</code>`);
+    return placeholder;
+  });
+
+  html = html.replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (_, alt, src) => {
+    const safeUrl = escapeHtml(src);
+    return `<img src="${safeUrl}" alt="${escapeHtml(alt)}" />`;
+  });
+
+  html = html.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_, label, url) => {
+    const safeUrl = escapeHtml(url);
+    return `<a href="${safeUrl}" target="_blank" rel="noreferrer">${escapeHtml(label)}</a>`;
+  });
+  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, "$1<em>$2</em>");
+
+  placeholders.forEach((placeholder, index) => {
+    html = html.replace(`__INLINE_CODE_${index}__`, placeholder);
+  });
+
+  return html;
+}
+
+function renderMarkdown(markdown) {
+  const normalized = (markdown || "").replace(/\r\n/g, "\n").trim();
+  if (!normalized) {
+    return '<p class="text-muted">No content provided.</p>';
+  }
+
+  const lines = normalized.split("\n");
+  const blocks = [];
+  let index = 0;
+
+  while (index < lines.length) {
+    const line = lines[index];
+    const trimmed = line.trim();
+
+    if (!trimmed) {
+      index += 1;
+      continue;
+    }
+
+    if (trimmed.startsWith("```")) {
+      const language = trimmed.slice(3).trim();
+      const codeLines = [];
+      index += 1;
+      while (index < lines.length && !lines[index].trim().startsWith("```")) {
+        codeLines.push(lines[index]);
+        index += 1;
+      }
+      if (index < lines.length) {
+        index += 1;
+      }
+      const langLabel = language ? `<span class="code-lang-label">${escapeHtml(language)}</span>` : "";
+      const className = language ? ` class="language-${escapeHtml(language)}"` : "";
+      blocks.push(`<div class="code-block-wrapper">${langLabel}<pre class="code-block"><code${className}>${escapeHtml(codeLines.join("\n"))}</code></pre></div>`);
+      continue;
+    }
+
+    const headingMatch = /^(#{1,6})\s+(.*)$/.exec(trimmed);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      blocks.push(`<h${level}>${renderInlineMarkdown(headingMatch[2])}</h${level}>`);
+      index += 1;
+      continue;
+    }
+
+    if (/^(\|.+\|)\s*$/.test(trimmed)) {
+      const tableLines = [];
+      while (index < lines.length && /^\|.+\|/.test(lines[index].trim())) {
+        tableLines.push(lines[index].trim());
+        index += 1;
+      }
+      if (tableLines.length >= 2) {
+        const headerCells = tableLines[0].split("|").filter(Boolean).map((c) => c.trim());
+        const hasDelimiter = /^\|[\s:|-]+\|$/.test(tableLines[1]);
+        const dataStart = hasDelimiter ? 2 : 1;
+        let tableHtml = "<table><thead><tr>";
+        for (const cell of headerCells) {
+          tableHtml += `<th>${renderInlineMarkdown(cell)}</th>`;
+        }
+        tableHtml += "</tr></thead><tbody>";
+        for (let r = dataStart; r < tableLines.length; r++) {
+          const cells = tableLines[r].split("|").filter(Boolean).map((c) => c.trim());
+          tableHtml += "<tr>";
+          for (const cell of cells) {
+            tableHtml += `<td>${renderInlineMarkdown(cell)}</td>`;
+          }
+          tableHtml += "</tr>";
+        }
+        tableHtml += "</tbody></table>";
+        blocks.push(tableHtml);
+        continue;
+      }
+    }
+
+    if (/^(-|\*)\s+\[[ xX]\]\s/.test(trimmed)) {
+      const items = [];
+      while (index < lines.length && /^(-|\*)\s+\[[ xX]\]\s/.test(lines[index].trim())) {
+        const taskMatch = /^(-|\*)\s+\[([ xX])\]\s+(.*)$/.exec(lines[index].trim());
+        if (taskMatch) {
+          const checked = taskMatch[2] !== " ";
+          items.push(`<li class="task-item"><input type="checkbox" disabled ${checked ? "checked" : ""} />${renderInlineMarkdown(taskMatch[3])}</li>`);
+        }
+        index += 1;
+      }
+      blocks.push(`<ul class="task-list">${items.join("")}</ul>`);
+      continue;
+    }
+
+    if (/^(-|\*)\s+/.test(trimmed)) {
+      const items = [];
+      while (index < lines.length && /^(-|\*)\s+/.test(lines[index].trim())) {
+        items.push(`<li>${renderInlineMarkdown(lines[index].trim().replace(/^(-|\*)\s+/, ""))}</li>`);
+        index += 1;
+      }
+      blocks.push(`<ul>${items.join("")}</ul>`);
+      continue;
+    }
+
+    if (/^\d+\.\s+/.test(trimmed)) {
+      const items = [];
+      while (index < lines.length && /^\d+\.\s+/.test(lines[index].trim())) {
+        items.push(`<li>${renderInlineMarkdown(lines[index].trim().replace(/^\d+\.\s+/, ""))}</li>`);
+        index += 1;
+      }
+      blocks.push(`<ol>${items.join("")}</ol>`);
+      continue;
+    }
+
+    if (/^>\s?/.test(trimmed)) {
+      const quoteLines = [];
+      while (index < lines.length && /^>\s?/.test(lines[index].trim())) {
+        quoteLines.push(lines[index].trim().replace(/^>\s?/, ""));
+        index += 1;
+      }
+      blocks.push(`<blockquote>${renderMarkdown(quoteLines.join("\n"))}</blockquote>`);
+      continue;
+    }
+
+    if (/^---+$/.test(trimmed) || /^\*\*\*+$/.test(trimmed)) {
+      blocks.push("<hr />");
+      index += 1;
+      continue;
+    }
+
+    const paragraphLines = [];
+    while (index < lines.length) {
+      const paragraphLine = lines[index];
+      const paragraphTrimmed = paragraphLine.trim();
+      if (!paragraphTrimmed) {
+        break;
+      }
+      if (
+        paragraphTrimmed.startsWith("```") ||
+        /^(#{1,6})\s+/.test(paragraphTrimmed) ||
+        /^(-|\*)\s+/.test(paragraphTrimmed) ||
+        /^\d+\.\s+/.test(paragraphTrimmed) ||
+        /^>\s?/.test(paragraphTrimmed) ||
+        /^---+$/.test(paragraphTrimmed) ||
+        /^\|.+\|/.test(paragraphTrimmed)
+      ) {
+        break;
+      }
+      paragraphLines.push(paragraphTrimmed);
+      index += 1;
+    }
+    blocks.push(`<p>${renderInlineMarkdown(paragraphLines.join(" "))}</p>`);
+  }
+
+  return blocks.join("\n");
+}
+
+function safeJson(value) {
+  return JSON.stringify(value)
+    .replace(/</g, "\\u003c")
+    .replace(/>/g, "\\u003e")
+    .replace(/&/g, "\\u0026")
+    .replace(/\u2028/g, "\\u2028")
+    .replace(/\u2029/g, "\\u2029");
+}
+
+function readUtf8(filePath) {
+  return readFileSync(filePath, "utf8").replace(/\r\n/g, "\n");
+}
+
+function detectVideoEmbed(videoUrl) {
+  try {
+    const url = new URL(videoUrl);
+    if (url.hostname === "youtu.be") {
+      const videoId = url.pathname.replace(/^\//, "");
+      return videoId ? { type: "youtube", url: `https://www.youtube.com/embed/${videoId}` } : null;
+    }
+    if (url.hostname.includes("youtube.com")) {
+      const videoId = url.searchParams.get("v");
+      return videoId ? { type: "youtube", url: `https://www.youtube.com/embed/${videoId}` } : null;
+    }
+    if (/\.(mp4|webm|ogg)$/i.test(url.pathname)) {
+      return { type: "html5", url: videoUrl };
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+
+function buildQuizQuestionPreview(question, index) {
+  return {
+    id: question.repoKey || `question-${index + 1}`,
+    title: question.title,
+    promptHtml: renderMarkdown(question.questionMarkdown),
+    correctFeedback: question.correctFeedback,
+    randomizeChoices: question.randomizeChoices,
+    isMultipleChoice: question.isMultipleChoice,
+    choices: question.choices.map((choice, choiceIndex) => ({
+      id: `${question.repoKey || `question-${index + 1}`}-choice-${choiceIndex + 1}`,
+      title: choice.title,
+      bodyHtml: renderMarkdown(choice.bodyMarkdown),
+      correct: choice.correct,
+      feedback: choice.feedback,
+    })),
+  };
+}
+
+function buildLessonPreview(rootPath, lesson) {
+  const base = {
+    repoKey: lesson.repoKey,
+    repoPath: lesson.repoPath,
+    title: lesson.title,
+    kind: lesson.kind,
+    summaryHtml: renderMarkdown(lesson.summaryMarkdown),
+  };
+
+  if (lesson.resource.type === "slides") {
+    return {
+      ...base,
+      resource: {
+        type: "slides",
+        title: lesson.resource.title,
+        slides: lesson.resource.slides.map((slide) => ({
+          title: slide.title,
+          repoPath: slide.repoPath,
+          contentHtml: replaceSlotImagesForPreview(slide.contentHtml || renderMarkdown(slide.contentMarkdown)),
+          script: slide.script,
+        })),
+      },
+    };
+  }
+
+  if (lesson.resource.type === "video") {
+    return {
+      ...base,
+      resource: {
+        type: "video",
+        title: lesson.resource.title,
+        videoUrl: lesson.resource.videoUrl,
+        notesHtml: renderMarkdown(lesson.resource.notesMarkdown),
+        embed: detectVideoEmbed(lesson.resource.videoUrl),
+      },
+    };
+  }
+
+  if (lesson.resource.type === "quiz") {
+    return {
+      ...base,
+      resource: {
+        type: "quiz",
+        title: lesson.resource.title,
+        descriptionHtml: renderMarkdown(lesson.resource.description),
+        questions: lesson.resource.questions.map((question, index) =>
+          buildQuizQuestionPreview(question, index)
+        ),
+      },
+    };
+  }
+
+  if (lesson.resource.type === "spreadsheet_lab") {
+    return {
+      ...base,
+      resource: {
+        type: "spreadsheet_lab",
+        title: lesson.resource.title,
+        engine: lesson.resource.engine,
+        promptHtml: renderMarkdown(lesson.resource.bodyMarkdown),
+        workbookPath: lesson.resource.workbookPath,
+        solutionPath: lesson.resource.solutionPath,
+        checksPath: lesson.resource.checksPath,
+        checks: lesson.resource.checks,
+        starterWorkbook: lesson.resource.starterWorkbook || null,
+        solutionWorkbook: lesson.resource.solutionWorkbook || null,
+      },
+    };
+  }
+
+  return {
+    ...base,
+    resource: {
+      type: "coding_exercise",
+      title: lesson.resource.title,
+      language: lesson.resource.language,
+      promptHtml: renderMarkdown(lesson.resource.bodyMarkdown),
+      starterCode: readUtf8(path.join(rootPath, lesson.resource.starterPath)),
+      solutionCode: readUtf8(path.join(rootPath, lesson.resource.solutionPath)),
+      starterPath: lesson.resource.starterPath,
+      solutionPath: lesson.resource.solutionPath,
+    },
+  };
+}
+
+export function buildPreviewModel(rootPath) {
+  const parsedRepo = parseCourseRepository(rootPath);
+  const summary = buildValidationSummary(rootPath, parsedRepo);
+
+  return {
+    summary,
+    warnings: parsedRepo.warnings,
+    course: {
+      title: parsedRepo.course.title,
+      descriptionHtml: renderMarkdown(parsedRepo.course.description),
+      duration: parsedRepo.course.duration,
+      thumbnail: parsedRepo.course.thumbnail,
+      tags: parsedRepo.course.tags,
+    },
+    chapters: parsedRepo.chapters.map((chapter) => ({
+      repoKey: chapter.repoKey,
+      repoPath: chapter.repoPath,
+      title: chapter.title,
+      descriptionHtml: renderMarkdown(chapter.description),
+      lessons: chapter.lessons.map((lesson) => buildLessonPreview(rootPath, lesson)),
+    })),
+  };
+}
+
+/* ---------------------------------------------------------------------------
+   Client-side application script (embedded in the HTML page)
+   --------------------------------------------------------------------------- */
+
+function renderPreviewAppScript(previewData) {
+  return `
+const previewData = ${safeJson(previewData)};
+const state = {
+  chapterIndex: 0,
+  lessonIndex: 0,
+  slideIndexes: {},
+  quizSelections: {},
+  quizChecked: {},
+  codeTab: {},
+  spreadsheetTab: {},
+};
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/\\"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function getActiveLesson() {
+  const chapter = previewData.chapters[state.chapterIndex];
+  return chapter?.lessons?.[state.lessonIndex] || null;
+}
+
+function setActiveLesson(chapterIndex, lessonIndex) {
+  state.chapterIndex = chapterIndex;
+  state.lessonIndex = lessonIndex;
+  render();
+}
+
+function kindLabel(kind) {
+  const labels = {
+    slides: 'Slides',
+    video: 'Video',
+    quiz: 'Quiz',
+    coding_exercise: 'Coding Exercise',
+    spreadsheet_lab: 'Spreadsheet Lab',
+  };
+  return labels[kind] || kind;
+}
+
+function kindIcon(kind) {
+  const icons = {
+    slides: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8M12 17v4" /></svg>',
+    video: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3" /></svg>',
+    quiz: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><line x1="12" y1="17" x2="12.01" y2="17" /></svg>',
+    coding_exercise: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg>',
+    spreadsheet_lab: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" /><line x1="3" y1="9" x2="21" y2="9" /><line x1="3" y1="15" x2="21" y2="15" /><line x1="9" y1="3" x2="9" y2="21" /><line x1="15" y1="3" x2="15" y2="21" /></svg>',
+  };
+  return icons[kind] || '';
+}
+
+/* ---- Outline ---- */
+
+function renderOutline() {
+  const container = document.getElementById("outline");
+  container.innerHTML = previewData.chapters
+    .map((chapter, ci) => {
+      const lessonsHtml = chapter.lessons
+        .map((lesson, li) => {
+          const active = ci === state.chapterIndex && li === state.lessonIndex;
+          return (
+            '<button class="outline-lesson' + (active ? ' is-active' : '') + '" data-ci="' + ci + '" data-li="' + li + '">' +
+              '<span class="outline-lesson-icon">' + kindIcon(lesson.kind) + '</span>' +
+              '<span class="outline-lesson-info">' +
+                '<span class="outline-lesson-title">' + escapeHtml(lesson.title) + '</span>' +
+                '<span class="outline-lesson-kind">' + kindLabel(lesson.kind) + '</span>' +
+              '</span>' +
+            '</button>'
+          );
+        })
+        .join("");
+      return (
+        '<div class="outline-chapter">' +
+          '<div class="outline-chapter-title">' + escapeHtml(chapter.title) + '</div>' +
+          '<div class="outline-chapter-lessons">' + lessonsHtml + '</div>' +
+        '</div>'
+      );
+    })
+    .join("");
+
+  container.querySelectorAll("[data-ci][data-li]").forEach((el) => {
+    el.addEventListener("click", () => {
+      setActiveLesson(Number(el.dataset.ci), Number(el.dataset.li));
+    });
+  });
+}
+
+/* ---- Slides ---- */
+
+function renderSlides(resource, lessonId) {
+  const idx = state.slideIndexes[lessonId] || 0;
+  const slide = resource.slides[idx] || resource.slides[0];
+  const total = resource.slides.length;
+
+  return (
+    '<div class="slide-container">' +
+      '<div class="slide-toolbar">' +
+        '<span class="badge badge-blue">' + kindIcon('slides') + ' Slide ' + (idx + 1) + ' of ' + total + '</span>' +
+        '<div class="slide-nav">' +
+          '<button class="btn btn-sm" data-slide-nav="prev" data-lid="' + lessonId + '"' + (idx === 0 ? ' disabled' : '') + '>&larr; Prev</button>' +
+          '<button class="btn btn-sm" data-slide-nav="next" data-lid="' + lessonId + '"' + (idx >= total - 1 ? ' disabled' : '') + '>Next &rarr;</button>' +
+        '</div>' +
+      '</div>' +
+      '<div class="slide-stage">' + slide.contentHtml + '</div>' +
+      '<div class="slide-meta">' +
+        '<div class="card card-inset">' +
+          '<div class="card-label">Slide Title</div>' +
+          '<div class="card-value">' + escapeHtml(slide.title) + '</div>' +
+          '<div class="text-muted text-xs">' + escapeHtml(slide.repoPath) + '</div>' +
+        '</div>' +
+        '<div class="card card-inset">' +
+          '<div class="card-label">Narration Script</div>' +
+          (slide.script
+            ? '<div class="narration-text">' + escapeHtml(slide.script).replace(/\\n/g, '<br />') + '</div>'
+            : '<div class="text-muted">No narration script.</div>') +
+        '</div>' +
+      '</div>' +
+    '</div>'
+  );
+}
+
+/* ---- Video ---- */
+
+function renderVideo(resource) {
+  let player = '<div class="video-link"><a href="' + escapeHtml(resource.videoUrl) + '" target="_blank" rel="noreferrer">' + escapeHtml(resource.videoUrl) + '</a></div>';
+  if (resource.embed?.type === 'youtube') {
+    player = '<div class="video-frame"><iframe src="' + escapeHtml(resource.embed.url) + '" title="' + escapeHtml(resource.title) + '" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
+  } else if (resource.embed?.type === 'html5') {
+    player = '<div class="video-frame"><video controls src="' + escapeHtml(resource.embed.url) + '"></video></div>';
+  }
+
+  return (
+    '<div class="video-container">' +
+      player +
+      (resource.notesHtml ? '<div class="card card-inset"><div class="card-label">Notes</div>' + resource.notesHtml + '</div>' : '') +
+    '</div>'
+  );
+}
+
+/* ---- Quiz ---- */
+
+function arraysEqual(a, b) {
+  if (a.length !== b.length) return false;
+  return a.every((v) => b.includes(v));
+}
+
+function renderQuiz(resource, lessonId) {
+  const total = resource.questions.length;
+  const questionsHtml = resource.questions
+    .map((q, qi) => {
+      const sel = state.quizSelections[q.id] || [];
+      const checked = state.quizChecked[q.id] || false;
+      const correctIds = q.choices.filter((c) => c.correct).map((c) => c.id);
+      const isCorrect = checked && arraysEqual(sel, correctIds);
+      const inputType = q.isMultipleChoice ? 'checkbox' : 'radio';
+
+      const choicesHtml = q.choices
+        .map((c) => {
+          const isSelected = sel.includes(c.id);
+          const checkedAttr = isSelected ? ' checked' : '';
+          const disabledAttr = checked ? ' disabled' : '';
+          let statusClass = '';
+          if (checked) {
+            if (c.correct) statusClass = ' choice-correct';
+            else if (isSelected) statusClass = ' choice-wrong';
+          }
+          const fb = checked && isSelected && c.feedback ? '<div class="choice-feedback">' + escapeHtml(c.feedback) + '</div>' : '';
+          return (
+            '<label class="choice' + statusClass + '">' +
+              '<input type="' + inputType + '" name="' + escapeHtml(q.id) + '" value="' + escapeHtml(c.id) + '" data-quiz-choice="true" data-qid="' + escapeHtml(q.id) + '"' + checkedAttr + disabledAttr + ' />' +
+              '<div class="choice-body">' + c.bodyHtml + fb + '</div>' +
+              (checked && c.correct ? '<span class="badge badge-green">Correct</span>' : '') +
+            '</label>'
+          );
+        })
+        .join('');
+
+      const feedbackBlock = checked
+        ? '<div class="quiz-result ' + (isCorrect ? 'quiz-result-correct' : 'quiz-result-wrong') + '">' +
+            (isCorrect ? 'Correct!' : 'Not quite.') +
+            (isCorrect && q.correctFeedback ? ' ' + escapeHtml(q.correctFeedback) : '') +
+          '</div>'
+        : '';
+
+      return (
+        '<div class="question-card">' +
+          '<div class="question-header">' +
+            '<span class="question-counter">Q' + (qi + 1) + '/' + total + '</span>' +
+            '<span class="badge">' + (q.isMultipleChoice ? 'Multi-select' : 'Single choice') + '</span>' +
+          '</div>' +
+          '<h3>' + escapeHtml(q.title) + '</h3>' +
+          '<div class="question-prompt">' + q.promptHtml + '</div>' +
+          '<div class="separator">POSSIBLE ANSWERS</div>' +
+          '<div class="choices-grid">' + choicesHtml + '</div>' +
+          '<div class="question-actions">' +
+            '<button class="btn" data-quiz-check="' + escapeHtml(q.id) + '"' + (checked ? ' disabled' : '') + '>Check</button>' +
+            '<button class="btn btn-ghost" data-quiz-reset="' + escapeHtml(q.id) + '">Reset</button>' +
+          '</div>' +
+          feedbackBlock +
+        '</div>'
+      );
+    })
+    .join('');
+
+  return (
+    '<div class="quiz-container">' +
+      (resource.descriptionHtml ? '<div class="card card-inset">' + resource.descriptionHtml + '</div>' : '') +
+      questionsHtml +
+    '</div>'
+  );
+}
+
+/* ---- Coding Exercise ---- */
+
+function renderExercise(resource, lessonId) {
+  const tab = state.codeTab[lessonId] || 'starter';
+  const isStarter = tab === 'starter';
+  return (
+    '<div class="exercise-split">' +
+      '<div class="exercise-left">' +
+        '<div class="card-label">Instructions</div>' +
+        '<div class="exercise-prompt">' + resource.promptHtml + '</div>' +
+      '</div>' +
+      '<div class="exercise-right">' +
+        '<div class="code-toolbar">' +
+          '<div class="tab-bar">' +
+            '<button class="tab' + (isStarter ? ' tab-active' : '') + '" data-code-tab="starter" data-lid="' + lessonId + '">' + escapeHtml(resource.starterPath.split('/').pop()) + '</button>' +
+            '<button class="tab' + (!isStarter ? ' tab-active' : '') + '" data-code-tab="solution" data-lid="' + lessonId + '">' + escapeHtml(resource.solutionPath.split('/').pop()) + '</button>' +
+          '</div>' +
+          '<span class="badge badge-blue">' + escapeHtml(resource.language) + '</span>' +
+        '</div>' +
+        '<pre class="code-block"><code>' + escapeHtml(isStarter ? resource.starterCode : resource.solutionCode) + '</code></pre>' +
+      '</div>' +
+    '</div>'
+  );
+}
+
+/* ---- Spreadsheet Lab ---- */
+
+function renderWorkbookTable(workbook) {
+  if (!workbook || !workbook.sheets) return '<div class="text-muted">No workbook data.</div>';
+  const sheetNames = Object.keys(workbook.sheets);
+  if (sheetNames.length === 0) return '<div class="text-muted">Empty workbook.</div>';
+  let html = '';
+  for (const sheetName of sheetNames) {
+    const sheet = workbook.sheets[sheetName];
+    const cellData = sheet.cellData || {};
+    const rowKeys = Object.keys(cellData).map(Number).sort((a, b) => a - b);
+    if (rowKeys.length === 0) {
+      html += '<div class="text-muted">Sheet "' + escapeHtml(sheetName) + '" is empty.</div>';
+      continue;
+    }
+    let maxCol = 0;
+    for (const r of rowKeys) {
+      const cols = Object.keys(cellData[r] || {}).map(Number);
+      for (const c of cols) { if (c > maxCol) maxCol = c; }
+    }
+    html += '<div class="sheet-label">' + escapeHtml(sheetName) + '</div>';
+    html += '<div class="table-scroll"><table class="wb-table"><thead><tr><th></th>';
+    for (let c = 0; c <= maxCol; c++) {
+      html += '<th>' + String.fromCharCode(65 + c) + '</th>';
+    }
+    html += '</tr></thead><tbody>';
+    for (const r of rowKeys) {
+      html += '<tr><td class="row-num">' + (r + 1) + '</td>';
+      for (let c = 0; c <= maxCol; c++) {
+        const cell = cellData[r]?.[c];
+        const val = cell ? (cell.f ? escapeHtml(cell.f) : (cell.v != null ? escapeHtml(String(cell.v)) : '')) : '';
+        const cls = cell?.f ? ' class="cell-formula"' : '';
+        html += '<td' + cls + '>' + val + '</td>';
+      }
+      html += '</tr>';
+    }
+    html += '</tbody></table></div>';
+  }
+  return html;
+}
+
+function renderSpreadsheetLab(resource, lessonId) {
+  const tab = state.spreadsheetTab[lessonId] || 'instructions';
+  const wbTab = state.codeTab[lessonId] || 'starter';
+
+  const checksHtml = resource.checks.length
+    ? resource.checks.map((c) =>
+        '<div class="check-item">' +
+          '<div class="check-label">' + escapeHtml(c.label) + '</div>' +
+          '<div class="check-meta">' +
+            '<span class="badge">' + escapeHtml(c.type.replace(/_/g, ' ')) + '</span>' +
+            '<span class="text-muted">Cell ' + escapeHtml(c.cell) + '</span>' +
+            (c.value != null ? '<span class="text-muted">= ' + escapeHtml(String(c.value)) + '</span>' : '') +
+          '</div>' +
+        '</div>'
+      ).join('')
+    : '<div class="text-muted">No checks defined.</div>';
+
+  return (
+    '<div class="exercise-split">' +
+      '<div class="exercise-left">' +
+        '<div class="tab-bar">' +
+          '<button class="tab' + (tab === 'instructions' ? ' tab-active' : '') + '" data-ss-tab="instructions" data-lid="' + lessonId + '">Instructions</button>' +
+          '<button class="tab' + (tab === 'requirements' ? ' tab-active' : '') + '" data-ss-tab="requirements" data-lid="' + lessonId + '">Requirements</button>' +
+        '</div>' +
+        (tab === 'instructions'
+          ? '<div class="exercise-prompt">' + resource.promptHtml + '</div>'
+          : '<div class="checks-list">' + checksHtml + '</div>') +
+      '</div>' +
+      '<div class="exercise-right">' +
+        '<div class="code-toolbar">' +
+          '<div class="tab-bar">' +
+            '<button class="tab' + (wbTab === 'starter' ? ' tab-active' : '') + '" data-code-tab="starter" data-lid="' + lessonId + '">Starter Workbook</button>' +
+            '<button class="tab' + (wbTab !== 'starter' ? ' tab-active' : '') + '" data-code-tab="solution" data-lid="' + lessonId + '">Solution Workbook</button>' +
+          '</div>' +
+          '<span class="badge badge-blue">' + escapeHtml(resource.engine) + '</span>' +
+        '</div>' +
+        '<div class="wb-container">' +
+          renderWorkbookTable(wbTab === 'starter' ? resource.starterWorkbook : resource.solutionWorkbook) +
+        '</div>' +
+      '</div>' +
+    '</div>'
+  );
+}
+
+/* ---- Main render ---- */
+
+function renderLesson() {
+  const lesson = getActiveLesson();
+  const container = document.getElementById('lesson-content');
+  if (!lesson) {
+    container.innerHTML = '<div class="card card-inset text-muted">Select a lesson from the outline.</div>';
+    return;
+  }
+
+  let resourceHtml = '';
+  if (lesson.resource.type === 'slides') {
+    resourceHtml = renderSlides(lesson.resource, lesson.repoKey);
+  } else if (lesson.resource.type === 'video') {
+    resourceHtml = renderVideo(lesson.resource);
+  } else if (lesson.resource.type === 'quiz') {
+    resourceHtml = renderQuiz(lesson.resource, lesson.repoKey);
+  } else if (lesson.resource.type === 'spreadsheet_lab') {
+    resourceHtml = renderSpreadsheetLab(lesson.resource, lesson.repoKey);
+  } else {
+    resourceHtml = renderExercise(lesson.resource, lesson.repoKey);
+  }
+
+  container.innerHTML =
+    '<div class="lesson-header">' +
+      '<div>' +
+        '<h1 class="lesson-title">' + escapeHtml(lesson.title) + '</h1>' +
+        '<span class="text-muted text-xs">' + escapeHtml(lesson.repoPath) + '</span>' +
+      '</div>' +
+      '<span class="badge badge-kind">' + kindIcon(lesson.kind) + ' ' + kindLabel(lesson.kind) + '</span>' +
+    '</div>' +
+    (lesson.summaryHtml && lesson.summaryHtml !== '<p class="text-muted">No content provided.</p>'
+      ? '<div class="card card-inset lesson-summary">' + lesson.summaryHtml + '</div>'
+      : '') +
+    resourceHtml;
+
+  wireLessonInteractions();
+}
+
+function wireLessonInteractions() {
+  document.querySelectorAll('[data-slide-nav]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const lid = btn.dataset.lid;
+      const lesson = getActiveLesson();
+      const total = lesson?.resource?.slides?.length || 0;
+      const cur = state.slideIndexes[lid] || 0;
+      if (btn.dataset.slideNav === 'prev' && cur > 0) state.slideIndexes[lid] = cur - 1;
+      if (btn.dataset.slideNav === 'next' && cur < total - 1) state.slideIndexes[lid] = cur + 1;
+      renderLesson();
+    });
+  });
+
+  document.querySelectorAll('[data-code-tab]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      state.codeTab[btn.dataset.lid] = btn.dataset.codeTab;
+      renderLesson();
+    });
+  });
+
+  document.querySelectorAll('[data-ss-tab]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      state.spreadsheetTab[btn.dataset.lid] = btn.dataset.ssTab;
+      renderLesson();
+    });
+  });
+
+  document.querySelectorAll('[data-quiz-choice="true"]').forEach((input) => {
+    input.addEventListener('change', () => {
+      const qid = input.dataset.qid;
+      const lesson = getActiveLesson();
+      const question = lesson?.resource?.questions?.find((q) => q.id === qid);
+      if (!question) return;
+      const current = new Set(state.quizSelections[qid] || []);
+      if (question.isMultipleChoice) {
+        if (input.checked) current.add(input.value);
+        else current.delete(input.value);
+      } else {
+        current.clear();
+        if (input.checked) current.add(input.value);
+      }
+      state.quizSelections[qid] = Array.from(current);
+    });
+  });
+
+  document.querySelectorAll('[data-quiz-check]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      state.quizChecked[btn.dataset.quizCheck] = true;
+      renderLesson();
+    });
+  });
+
+  document.querySelectorAll('[data-quiz-reset]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const qid = btn.dataset.quizReset;
+      delete state.quizSelections[qid];
+      delete state.quizChecked[qid];
+      renderLesson();
+    });
+  });
+}
+
+function renderWarnings() {
+  const container = document.getElementById('warnings');
+  if (!previewData.warnings.length) { container.innerHTML = ''; return; }
+  container.innerHTML =
+    '<div class="warnings-bar">' +
+      '<strong>Warnings (' + previewData.warnings.length + ')</strong>' +
+      '<ul>' + previewData.warnings.map((w) => '<li>' + escapeHtml(w) + '</li>').join('') + '</ul>' +
+    '</div>';
+}
+
+function render() {
+  renderOutline();
+  renderWarnings();
+  renderLesson();
+}
+
+render();
+`;
+}
+
+/* ---------------------------------------------------------------------------
+   HTML template
+   --------------------------------------------------------------------------- */
+
+export function renderPreviewHtml(previewData) {
+  const s = previewData.summary;
+  const tags = previewData.course.tags.length
+    ? previewData.course.tags.map((t) => `<span class="badge">${escapeHtml(t)}</span>`).join(" ")
+    : "";
+  const statsLine = [
+    `${s.chapterCount} chapter${s.chapterCount === 1 ? "" : "s"}`,
+    `${s.lessonCount} lesson${s.lessonCount === 1 ? "" : "s"}`,
+    s.resourceCounts.slides ? `${s.resourceCounts.slides} slide deck${s.resourceCounts.slides === 1 ? "" : "s"}` : null,
+    s.resourceCounts.video ? `${s.resourceCounts.video} video${s.resourceCounts.video === 1 ? "" : "s"}` : null,
+    s.resourceCounts.quiz ? `${s.resourceCounts.quiz} quiz${s.resourceCounts.quiz === 1 ? "" : "zes"}` : null,
+    s.resourceCounts.coding_exercise ? `${s.resourceCounts.coding_exercise} coding exercise${s.resourceCounts.coding_exercise === 1 ? "" : "s"}` : null,
+    s.resourceCounts.spreadsheet_lab ? `${s.resourceCounts.spreadsheet_lab} spreadsheet lab${s.resourceCounts.spreadsheet_lab === 1 ? "" : "s"}` : null,
+  ].filter(Boolean).join(" &middot; ");
+
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${escapeHtml(previewData.course.title)} · Datajaddah Preview</title>
+    <style>
+/* ---- Reset & base ---- */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 15px; -webkit-font-smoothing: antialiased; }
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  color: #111827;
+  background: #f9fafb;
+  line-height: 1.6;
+}
+a { color: #2563eb; text-decoration: none; }
+a:hover { text-decoration: underline; }
+code {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  background: #f3f4f6;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  font-size: 0.875em;
+}
+pre { margin: 0; }
+pre code { background: transparent; padding: 0; border-radius: 0; font-size: 0.875em; }
+img { max-width: 100%; }
+table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
+th, td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; }
+th { background: #f9fafb; font-weight: 600; }
+blockquote {
+  border-left: 3px solid #d1d5db;
+  padding-left: 1rem;
+  color: #6b7280;
+  margin: 0.75rem 0;
+}
+hr { border: none; border-top: 1px solid #e5e7eb; margin: 1rem 0; }
+h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin-bottom: 0.5rem; }
+h1 { font-size: 1.5rem; font-weight: 700; }
+h2 { font-size: 1.25rem; font-weight: 600; }
+h3 { font-size: 1.1rem; font-weight: 600; }
+p { margin-bottom: 0.5rem; }
+p:last-child { margin-bottom: 0; }
+ul, ol { margin: 0.5rem 0; padding-left: 1.5rem; }
+li { margin-bottom: 0.25rem; }
+
+/* ---- Layout shell ---- */
+.app {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-height: 100vh;
+}
+.topbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1.25rem;
+  background: #fff;
+  border-bottom: 1px solid #e5e7eb;
+}
+.topbar-title {
+  font-weight: 700;
+  font-size: 1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.topbar-meta {
+  font-size: 0.8rem;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.sidebar {
+  grid-row: 2 / 4;
+  border-right: 1px solid #e5e7eb;
+  background: #fff;
+  overflow-y: auto;
+  padding: 0.75rem;
+}
+.main {
+  grid-row: 2;
+  padding: 1.25rem;
+  overflow-y: auto;
+}
+.footer {
+  grid-column: 2;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.8rem;
+  color: #6b7280;
+  border-top: 1px solid #e5e7eb;
+  background: #fff;
+}
+
+/* ---- Outline ---- */
+.outline-chapter + .outline-chapter { margin-top: 0.75rem; }
+.outline-chapter-title {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #6b7280;
+  padding: 0.25rem 0.5rem;
+}
+.outline-chapter-lessons { display: flex; flex-direction: column; gap: 2px; }
+.outline-lesson {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: transparent;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  transition: background 0.1s;
+}
+.outline-lesson:hover { background: #f3f4f6; }
+.outline-lesson.is-active { background: #eff6ff; color: #1d4ed8; }
+.outline-lesson-icon {
+  flex-shrink: 0;
+  width: 28px; height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: #f3f4f6;
+  color: #6b7280;
+}
+.outline-lesson.is-active .outline-lesson-icon { background: #dbeafe; color: #2563eb; }
+.outline-lesson-info { display: flex; flex-direction: column; min-width: 0; }
+.outline-lesson-title {
+  font-size: 0.85rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.outline-lesson-kind { font-size: 0.7rem; color: #9ca3af; }
+.outline-lesson.is-active .outline-lesson-kind { color: #60a5fa; }
+
+/* ---- Cards ---- */
+.card {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+.card-inset { padding: 1rem; }
+.card-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #6b7280;
+  margin-bottom: 0.5rem;
+}
+.card-value { font-weight: 500; }
+
+/* ---- Badges ---- */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  background: #f3f4f6;
+  color: #374151;
+  white-space: nowrap;
+}
+.badge-blue { background: #eff6ff; color: #2563eb; }
+.badge-green { background: #ecfdf5; color: #059669; }
+.badge-kind { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
+
+/* ---- Buttons ---- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font: inherit;
+  font-size: 0.85rem;
+  font-weight: 500;
+  padding: 0.45rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  background: #fff;
+  color: #111827;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.btn:hover { background: #f9fafb; }
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
+.btn-ghost { border-color: transparent; background: transparent; color: #6b7280; }
+.btn-ghost:hover { background: #f3f4f6; }
+
+/* ---- Tabs ---- */
+.tab-bar { display: flex; gap: 2px; background: #f3f4f6; border-radius: 0.5rem; padding: 2px; }
+.tab {
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 500;
+  padding: 0.35rem 0.75rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.tab:hover { color: #111827; }
+.tab-active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
+
+/* ---- Lesson content ---- */
+.lesson-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.lesson-title { margin-bottom: 0.15rem; }
+.lesson-summary { margin-bottom: 1rem; }
+.text-muted { color: #6b7280; }
+.text-xs { font-size: 0.75rem; }
+
+/* ---- Slides ---- */
+.slide-container { display: flex; flex-direction: column; gap: 0.75rem; }
+.slide-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.slide-nav { display: flex; gap: 0.35rem; align-items: center; }
+.slide-stage {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  padding: 2rem;
+  min-height: 280px;
+  aspect-ratio: 16 / 9;
+  overflow: auto;
+}
+.slide-stage h1, .slide-stage h2, .slide-stage h3 { margin-top: 0; }
+.slide-stage [data-type="columns"] { display: grid; gap: 1.5rem; }
+.slide-stage [data-type="columns"].layout-two-column { grid-template-columns: 1fr 1fr; }
+.slide-stage [data-type="columns"].layout-sidebar-left { grid-template-columns: 40fr 60fr; }
+.slide-stage [data-type="columns"].layout-sidebar-right { grid-template-columns: 60fr 40fr; }
+.slide-stage img { max-width: 100%; border-radius: 0.5rem; display: block; margin: 1rem auto; }
+.slide-stage .slide-image-slot {
+  border: 2px dashed #d1d5db;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background: #f9fafb;
+}
+.slide-stage .slide-image-slot__badge {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #6b7280;
+  margin-bottom: 0.25rem;
+}
+.slide-stage .slide-image-slot__ref { font-weight: 600; }
+.slide-stage .slide-image-slot__alt,
+.slide-stage .slide-image-slot__title { color: #6b7280; margin-top: 0.25rem; }
+.slide-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
+.narration-text {
+  font-style: italic;
+  color: #374151;
+  line-height: 1.7;
+}
+
+/* ---- Video ---- */
+.video-container { display: flex; flex-direction: column; gap: 0.75rem; }
+.video-frame {
+  border-radius: 0.75rem;
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  background: #111;
+}
+.video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; display: block; }
+.video-link {
+  padding: 2rem;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  text-align: center;
+}
+
+/* ---- Quiz ---- */
+.quiz-container { display: flex; flex-direction: column; gap: 1rem; }
+.question-card {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.question-header { display: flex; align-items: center; gap: 0.5rem; }
+.question-counter { font-size: 0.8rem; font-weight: 600; color: #6b7280; }
+.question-prompt { color: #374151; }
+.separator {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #9ca3af;
+  border-top: 1px solid #e5e7eb;
+  padding-top: 0.75rem;
+}
+.choices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
+.choice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  padding: 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background: #fff;
+  cursor: pointer;
+  transition: border-color 0.1s;
+}
+.choice:hover { border-color: #93c5fd; }
+.choice input { margin-top: 0.2rem; flex-shrink: 0; }
+.choice-body { flex: 1; min-width: 0; }
+.choice-feedback { margin-top: 0.35rem; font-size: 0.85rem; color: #6b7280; }
+.choice-correct { border-color: #86efac; background: #f0fdf4; }
+.choice-wrong { border-color: #fca5a5; background: #fef2f2; }
+.question-actions { display: flex; gap: 0.5rem; }
+.quiz-result {
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+.quiz-result-correct { background: #ecfdf5; color: #065f46; }
+.quiz-result-wrong { background: #fef2f2; color: #991b1b; }
+
+/* ---- Coding Exercise + Spreadsheet Lab ---- */
+.exercise-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  min-height: 400px;
+}
+.exercise-left {
+  padding: 1rem;
+  overflow-y: auto;
+  border-right: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.exercise-right {
+  display: flex;
+  flex-direction: column;
+  background: #fafafa;
+}
+.exercise-prompt { flex: 1; }
+.code-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  background: #fff;
+}
+.code-block {
+  flex: 1;
+  padding: 1rem;
+  overflow: auto;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  font-size: 0.85rem;
+  line-height: 1.6;
+  border-radius: 0;
+  margin: 0;
+}
+.code-block-wrapper { position: relative; }
+.code-block-wrapper .code-lang-label {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  font-size: 0.7rem;
+  color: #6b7280;
+  background: rgba(255,255,255,0.08);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+}
+.code-block-wrapper .code-block {
+  border-radius: 0.5rem;
+}
+
+/* ---- Spreadsheet lab extras ---- */
+.checks-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.check-item {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  background: #fff;
+}
+.check-label { font-weight: 500; margin-bottom: 0.25rem; }
+.check-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
+.wb-container { flex: 1; overflow: auto; padding: 0.75rem; }
+.wb-table { font-size: 0.8rem; border-collapse: collapse; }
+.wb-table th, .wb-table td { border: 1px solid #e5e7eb; padding: 0.25rem 0.5rem; min-width: 60px; }
+.wb-table th { background: #f3f4f6; text-align: center; font-weight: 600; color: #6b7280; font-size: 0.75rem; }
+.wb-table .row-num { background: #f3f4f6; text-align: center; font-weight: 600; color: #6b7280; font-size: 0.75rem; width: 32px; }
+.wb-table .cell-formula { color: #2563eb; font-family: ui-monospace, monospace; font-size: 0.8rem; }
+.sheet-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 0.25rem; }
+.sheet-label + .table-scroll { margin-bottom: 0.75rem; }
+.table-scroll { overflow-x: auto; }
+
+/* ---- Warnings ---- */
+.warnings-bar {
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  font-size: 0.85rem;
+  color: #92400e;
+}
+.warnings-bar ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
+
+/* ---- Task list ---- */
+.task-list { list-style: none; padding-left: 0; }
+.task-item { display: flex; align-items: baseline; gap: 0.4rem; }
+.task-item input { flex-shrink: 0; }
+
+/* ---- Responsive ---- */
+@media (max-width: 860px) {
+  .app { grid-template-columns: 1fr; }
+  .sidebar {
+    grid-row: auto;
+    border-right: 0;
+    border-bottom: 1px solid #e5e7eb;
+    max-height: 240px;
+  }
+  .footer { grid-column: 1; }
+  .slide-meta { grid-template-columns: 1fr; }
+  .exercise-split { grid-template-columns: 1fr; }
+  .exercise-left { border-right: 0; border-bottom: 1px solid #e5e7eb; }
+  .choices-grid { grid-template-columns: 1fr; }
+}
+
+/* ---- Print ---- */
+@media print {
+  .sidebar, .topbar, .footer { display: none; }
+  .app { display: block; }
+  .main { padding: 0; }
+  .card, .question-card, .exercise-split { break-inside: avoid; }
+}
+    </style>
+  </head>
+  <body>
+    <div class="app">
+      <header class="topbar">
+        <span class="topbar-title">${escapeHtml(previewData.course.title)}</span>
+        <span class="topbar-meta">
+          ${previewData.course.duration ? `${previewData.course.duration} min` : ""}
+          ${tags ? `&middot; ${tags}` : ""}
+          &middot; schema v${previewData.summary.contract === "repo_tree_v1" ? "1" : "?"}
+        </span>
+      </header>
+      <nav class="sidebar">
+        <div id="outline"></div>
+      </nav>
+      <main class="main">
+        <div id="warnings"></div>
+        <div id="lesson-content"></div>
+      </main>
+      <footer class="footer">${statsLine}</footer>
+    </div>
+    <script>${renderPreviewAppScript(previewData)}</script>
+  </body>
+</html>`;
+}
+
+/* ---------------------------------------------------------------------------
+   Error page
+   --------------------------------------------------------------------------- */
+
+export function renderPreviewErrorHtml(rootPath, error) {
+  const message = error instanceof Error ? error.message : String(error);
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Preview error · Datajaddah</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        background: #f9fafb;
+        color: #111827;
+        font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+      }
+      article {
+        width: min(680px, calc(100vw - 2rem));
+        background: #fff;
+        border: 1px solid #e5e7eb;
+        border-radius: 0.75rem;
+        padding: 2rem;
+      }
+      h1 { font-size: 1.25rem; margin: 0.5rem 0; }
+      pre {
+        white-space: pre-wrap;
+        word-break: break-word;
+        background: #1e1e2e;
+        color: #cdd6f4;
+        border-radius: 0.5rem;
+        padding: 1rem;
+        font-size: 0.85rem;
+        margin: 1rem 0;
+      }
+      p { color: #6b7280; margin: 0.5rem 0; }
+      code { font-family: ui-monospace, monospace; }
+    </style>
+  </head>
+  <body>
+    <article>
+      <p>Datajaddah course preview</p>
+      <h1>Repository contract error</h1>
+      <p>Fix the repo tree, then refresh the page.</p>
+      <pre>${escapeHtml(message)}</pre>
+      <p><strong>Path:</strong> <code>${escapeHtml(path.resolve(rootPath))}</code></p>
+    </article>
+  </body>
+</html>`;
+}
+
+/* ---------------------------------------------------------------------------
+   Preview server
+   --------------------------------------------------------------------------- */
+
+function parsePreviewArgs(args, cwd) {
+  const normalizedArgs = [];
+  let positionalOnly = false;
+  for (const arg of args) {
+    if (!positionalOnly && arg === "--") {
+      positionalOnly = true;
+      continue;
+    }
+    normalizedArgs.push(arg);
+  }
+
+  let targetArg = ".";
+  let seenPath = false;
+  let port = 4310;
+  let host = "127.0.0.1";
+  let dev = false;
+
+  for (let index = 0; index < normalizedArgs.length; index += 1) {
+    const arg = normalizedArgs[index];
+    if (arg === "--port") {
+      index += 1;
+      if (index >= normalizedArgs.length) {
+        throw new Error("Missing value for --port");
+      }
+      port = Number(normalizedArgs[index]);
+      continue;
+    }
+    if (arg.startsWith("--port=")) {
+      port = Number(arg.slice("--port=".length));
+      continue;
+    }
+    if (arg === "--host") {
+      index += 1;
+      if (index >= normalizedArgs.length) {
+        throw new Error("Missing value for --host");
+      }
+      host = normalizedArgs[index];
+      continue;
+    }
+    if (arg.startsWith("--host=")) {
+      host = arg.slice("--host=".length);
+      continue;
+    }
+    if (arg === "--dev") {
+      dev = true;
+      continue;
+    }
+    if (arg.startsWith("-")) {
+      throw new Error(`Unknown option: ${arg}`);
+    }
+    if (!seenPath) {
+      targetArg = arg;
+      seenPath = true;
+      continue;
+    }
+    throw new Error(`Unexpected argument: ${arg}`);
+  }
+
+  if (!Number.isInteger(port) || port <= 0 || port > 65535) {
+    throw new Error("--port must be an integer between 1 and 65535");
+  }
+  if (!host.trim()) {
+    throw new Error("--host cannot be empty");
+  }
+
+  return {
+    rootPath: path.resolve(cwd, targetArg),
+    port,
+    host,
+    dev,
+  };
+}
+
+async function createViteMiddleware() {
+  const PREVIEW_APP = path.join(__dirname, "../preview-app");
+  try {
+    // Resolve Vite from preview-app's own node_modules
+    const vitePath = path.join(PREVIEW_APP, "node_modules/vite/dist/node/index.js");
+    const reactPluginPath = path.join(PREVIEW_APP, "node_modules/@vitejs/plugin-react/dist/index.js");
+
+    const viteModule = await import(/* @vite-ignore */ "file://" + vitePath);
+    const createViteServer = viteModule.createServer;
+    const reactModule = await import(/* @vite-ignore */ "file://" + reactPluginPath);
+    const react = reactModule.default;
+
+    const vite = await createViteServer({
+      root: PREVIEW_APP,
+      plugins: [react()],
+      server: { middlewareMode: true },
+      appType: "spa",
+    });
+    return vite;
+  } catch (err) {
+    if (process.env.DEBUG) console.error("Vite init error:", err);
+    return null;
+  }
+}
+
+function handleApiRequest(options, response) {
+  try {
+    const previewData = buildPreviewModel(options.rootPath);
+    response.writeHead(200, { "content-type": "application/json; charset=utf-8" });
+    response.end(JSON.stringify(previewData));
+  } catch (error) {
+    const status = error instanceof RepoContractError ? 422 : 500;
+    response.writeHead(status, { "content-type": "application/json; charset=utf-8" });
+    response.end(JSON.stringify({ error: error.message }));
+  }
+}
+
+export async function startPreviewServer(args, cwd = process.cwd()) {
+  const options = parsePreviewArgs(args, cwd);
+  const initialPreview = buildPreviewModel(options.rootPath);
+
+  let vite = null;
+  let mode;
+
+  if (options.dev) {
+    vite = await createViteMiddleware();
+    if (!vite) {
+      console.error("Could not start Vite dev server. Make sure dependencies are installed:");
+      console.error("  cd preview-app && npm install");
+      console.error("Falling back to built preview or inline HTML.");
+    }
+  }
+
+  if (vite) {
+    mode = "dev (Vite HMR)";
+  } else if (hasPreviewDist()) {
+    mode = "React app";
+  } else {
+    mode = "inline HTML (run npm run build:preview to enable React)";
+  }
+
+  const server = createServer((request, response) => {
+    const url = (request.url || "/").split("?")[0];
+
+    // Health check
+    if (url === "/health") {
+      response.writeHead(200, { "content-type": "application/json; charset=utf-8" });
+      response.end(JSON.stringify({ ok: true }));
+      return;
+    }
+
+    // JSON API — always available
+    if (url === "/api/data") {
+      handleApiRequest(options, response);
+      return;
+    }
+
+    // Dev mode — Vite middleware handles everything else (HMR, module serving, SPA fallback)
+    if (vite) {
+      vite.middlewares(request, response);
+      return;
+    }
+
+    // Production React app — serve built static files
+    if (hasPreviewDist()) {
+      if (url !== "/" && url !== "/index.html") {
+        const filePath = path.join(PREVIEW_DIST, url);
+        if (filePath.startsWith(PREVIEW_DIST) && serveStaticFile(filePath, response)) {
+          return;
+        }
+      }
+      serveStaticFile(path.join(PREVIEW_DIST, "index.html"), response);
+      return;
+    }
+
+    // Inline fallback — no React build available
+    try {
+      const previewData = buildPreviewModel(options.rootPath);
+      response.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+      response.end(renderPreviewHtml(previewData));
+    } catch (error) {
+      const status = error instanceof RepoContractError ? 422 : 500;
+      response.writeHead(status, { "content-type": "text/html; charset=utf-8" });
+      response.end(renderPreviewErrorHtml(options.rootPath, error));
+    }
+  });
+
+  await new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(options.port, options.host, resolve);
+  });
+
+  const serverUrl = `http://${options.host}:${options.port}`;
+  console.error(`Preview server running at ${serverUrl}`);
+  console.error(`Path: ${path.resolve(options.rootPath)}`);
+  console.error(`Course: ${initialPreview.course.title}`);
+  console.error(`Mode: ${mode}`);
+  console.error("Refresh the page after editing repo files to reparse from disk.");
+
+  const shutdown = () => {
+    if (vite) vite.close();
+    server.close(() => process.exit(0));
+    setTimeout(() => process.exit(1), 3000);
+  };
+  process.once("SIGINT", shutdown);
+  process.once("SIGTERM", shutdown);
+
+  return { server, url: serverUrl, options };
+}