mr-md 2.0.0-beta → 2.1.1-beta

package/src/builder.ts

@@ -31,6 +31,10 @@ import type {
 	YouTubeOptions,
 } from "./types.js";
 
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 function getCallerDir(): string | undefined {
 	const err = new Error();
 	const stack = err.stack?.split("\n");
@@ -47,24 +51,76 @@ function getCallerDir(): string | undefined {
 				p = p.replace(/^file:\/\//, "");
 			}
 			if (p.startsWith("/") && p[2] === ":") {
-				p = p.substring(1); // Handle Windows paths like /C:/
+				p = p.substring(1);
 			}
-			
 			if (!builderFilePath) {
 				builderFilePath = p;
 				continue;
 			}
-			
 			if (p === builderFilePath) {
 				continue;
 			}
-			
 			return path.dirname(p);
 		}
 	}
 	return undefined;
 }
 
+
+
+function copyAssets(outDir: string) {
+	const assetsDir = path.join(outDir, "assets");
+	if (!fs.existsSync(assetsDir)) fs.mkdirSync(assetsDir, { recursive: true });
+
+	const srcStylesDir = path.join(__dirname, "styles");
+	const srcClientDir = path.join(__dirname, "client");
+	
+	const fallbackStylesDir = path.join(__dirname, "../src/styles");
+	const fallbackClientDir = path.join(__dirname, "../src/client");
+
+	const copyDir = (src: string, dest: string) => {
+		if (!fs.existsSync(src)) return;
+		if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
+		for (const file of fs.readdirSync(src)) {
+			const srcFile = path.join(src, file);
+			const destFile = path.join(dest, file);
+			if (fs.statSync(srcFile).isDirectory()) {
+				copyDir(srcFile, destFile);
+			} else {
+				fs.copyFileSync(srcFile, destFile);
+			}
+		}
+	};
+
+	if (fs.existsSync(srcStylesDir)) copyDir(srcStylesDir, assetsDir);
+	else copyDir(fallbackStylesDir, assetsDir);
+
+	if (fs.existsSync(srcClientDir)) copyDir(srcClientDir, assetsDir);
+	else copyDir(fallbackClientDir, assetsDir);
+}
+
+function mergeOptions(options: BuildOptions, callerDir?: string): BuildOptions {
+	const merged: BuildOptions = {
+		outDir: options.outDir ?? (callerDir ? path.join(callerDir, "out") : path.join(process.cwd(), "out")),
+		contentBase: options.contentBase ?? callerDir ?? process.cwd(),
+		theme: options.theme ?? "auto",
+		palette: options.palette ?? "ink",
+		strict: options.strict ?? process.env.NODE_ENV !== "development",
+		standalone: options.standalone ?? true,
+	};
+	for (const [k, v] of Object.entries(options)) {
+		if (v !== undefined && k !== "preset") {
+			(merged as any)[k] = v;
+		}
+	}
+	merged.preset = {
+		layout: options.preset?.layout ?? "lesson",
+		density: options.preset?.density ?? "comfortable",
+		tone: options.preset?.tone ?? "scholarly",
+	};
+	return merged;
+}
+
 // ─── LessonBuilder ────────────────────────────────────────────────────────────
 
 export class LessonBuilder {
@@ -86,20 +142,7 @@ export class LessonBuilder {
 			title,
 			slug,
 		};
-		this.options = {
-			outDir: options.outDir ?? (callerDir ? path.join(callerDir, "out") : "./out"),
-			contentBase: options.contentBase ?? callerDir ?? ".",
-			theme: options.theme ?? "auto",
-			palette: options.palette ?? "ink",
-			strict: options.strict ?? process.env.NODE_ENV !== "development",
-			preset: {
-				layout: "lesson",
-				density: "comfortable",
-				tone: "scholarly",
-				...options.preset,
-			},
-			...options,
-		};
+		this.options = mergeOptions(options, callerDir);
 	}
 
 	// ── Meta setters ────────────────────────────────────────────────────────────
@@ -489,11 +532,17 @@ export class LessonBuilder {
 		const html = render(lesson, this.options);
 
 		const outDir = path.resolve(this.options.outDir as string);
-		if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
-
 		const outPath = path.join(outDir, `${this.meta.slug}.html`);
+		const outPathDir = path.dirname(outPath);
+		
+		if (!fs.existsSync(outPathDir)) fs.mkdirSync(outPathDir, { recursive: true });
+
 		fs.writeFileSync(outPath, html, "utf-8");
 
+		if (this.options.standalone === false) {
+			copyAssets(outDir);
+		}
+
 		const relPath = path.relative(process.cwd(), outPath);
 		console.log(`  ✓ Built lesson (${this.blocks.length} blocks) → ${relPath}`);
 		return outPath;
@@ -658,20 +707,7 @@ export class ChapterBuilder {
 			title,
 			slug,
 		};
-		this.options = {
-			outDir: options.outDir ?? (callerDir ? path.join(callerDir, "out") : "./out"),
-			contentBase: options.contentBase ?? callerDir ?? ".",
-			theme: options.theme ?? "auto",
-			palette: options.palette ?? "ink",
-			strict: options.strict ?? process.env.NODE_ENV !== "development",
-			preset: {
-				layout: "lesson",
-				density: "comfortable",
-				tone: "scholarly",
-				...options.preset,
-			},
-			...options,
-		};
+		this.options = mergeOptions(options, callerDir);
 	}
 
 	slug(slug: string): this {
@@ -723,11 +759,17 @@ export class ChapterBuilder {
 		const html = renderChapter(chapterData, this.options);
 
 		const outDir = path.resolve(this.options.outDir as string);
-		if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
-
 		const outPath = path.join(outDir, `${this.meta.slug}.html`);
+		const outPathDir = path.dirname(outPath);
+		
+		if (!fs.existsSync(outPathDir)) fs.mkdirSync(outPathDir, { recursive: true });
+
 		fs.writeFileSync(outPath, html, "utf-8");
 
+		if (this.options.standalone === false) {
+			copyAssets(outDir);
+		}
+
 		const relPath = path.relative(process.cwd(), outPath);
 		console.log(
 			`  ✓ Built chapter (${this.lessonBuilders.length} lessons) → ${relPath}`,

package/src/cli/dev.ts

@@ -18,7 +18,7 @@ export async function runDev(args: string[]) {
 		for (const entry of entryPoints) {
 			const entryPath = path.join(dir, entry);
 			if (fs.existsSync(entryPath)) {
-				exec(`NODE_ENV=development bun ${entryPath}`, (err, stdout, stderr) => {
+				exec(`NODE_ENV=development bun "${entryPath}"`, (err, stdout, stderr) => {
 					if (err) console.error("Build failed:", stderr);
 					else {
 						console.log("Build successful.");
@@ -53,9 +53,10 @@ export async function runDev(args: string[]) {
 			if (srv.upgrade(req)) return;
 
 			const url = new URL(req.url);
-			let filePath = path.join(outDir, url.pathname);
+			const decodedPath = decodeURIComponent(url.pathname);
+			let filePath = path.resolve(outDir, "." + decodedPath);
 			
-			if (filePath.endsWith("/")) {
+			if (filePath.endsWith(path.sep)) {
 				const files = fs.existsSync(outDir) ? fs.readdirSync(outDir) : [];
 				const htmlFiles = files.filter(f => f.endsWith(".html"));
 				if (htmlFiles.includes("index.html")) {
@@ -67,26 +68,34 @@ export async function runDev(args: string[]) {
 					} else if (htmlFiles.length > 0) {
 						filePath = path.join(outDir, htmlFiles[0]);
 					} else {
-						filePath += "index.html";
+						filePath = path.join(outDir, "index.html");
 					}
 				}
 			}
 
+			if (!filePath.startsWith(outDir + path.sep) && filePath !== outDir) {
+				return new Response("Forbidden", { status: 403 });
+			}
+
 			if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
 				if (filePath.endsWith(".html")) {
 					const file = Bun.file(filePath);
 					let text = await file.text();
-					text = text.replace("</body>", `<script>
+					const lastBodyIndex = text.lastIndexOf("</body>");
+					if (lastBodyIndex !== -1) {
+						text = text.slice(0, lastBodyIndex) + `<script>
 						const ws = new WebSocket("ws://localhost:3000/");
 						ws.onmessage = (e) => { if (e.data === "reload") location.reload(); };
-					</script></body>`);
+					</script></body>` + text.slice(lastBodyIndex + 7);
+					}
 					return new Response(text, { headers: { "Content-Type": "text/html" } });
 				}
 				return new Response(Bun.file(filePath));
 			}
 
-			const srcPath = path.join(process.cwd(), dir, url.pathname);
-			if (fs.existsSync(srcPath) && fs.statSync(srcPath).isFile()) {
+			const baseDir = path.resolve(process.cwd(), dir);
+			const srcPath = path.resolve(baseDir, "." + decodedPath);
+			if (srcPath.startsWith(baseDir + path.sep) && fs.existsSync(srcPath) && fs.statSync(srcPath).isFile()) {
 				return new Response(Bun.file(srcPath));
 			}
 

package/src/cli/generate.ts

@@ -32,7 +32,7 @@ export async function runGenerate(args: string[]) {
 		process.exit(1);
 	}
 	
-	const name = rawName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+	const name = rawName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || "item";
 	const cwd = process.cwd();
 	
 	switch (type) {

package/src/client/app.js

@@ -15,11 +15,10 @@ function bkSimDoc(js, props, loop, dependencies) {
 		";window.bkSetupCalled=false;" +
 		'window.bkCanvasPoint=function(e,c){const r=(c||e.currentTarget||e.target).getBoundingClientRect(),w=(c&&c.__bkLogicalW)||800,h=(c&&c.__bkLogicalH)||500;return{x:(e.clientX-r.left)*w/r.width,y:(e.clientY-r.top)*h/r.height}};' +
 		'window.bkFitCanvas=function(c,reqW,reqH,o){if(!c)return{scale:1,width:reqW,height:reqH,cssScale:1};const d=window.devicePixelRatio||1;const w=reqW;const h=reqH;c.__bkLogicalW=w;c.__bkLogicalH=h;c.style.width=w+"px";c.style.height=h+"px";c.style.position="relative";c.style.left="auto";c.style.top="auto";c.style.transformOrigin="center center";const sx=window.innerWidth/w,sy=window.innerHeight/h,cssS=Math.max(sx,sy);c.style.transform="scale("+cssS+")";const pw=Math.max(1,Math.round(w*d)),ph=Math.max(1,Math.round(h*d));if(!o||o.bitmap!==false){if(c.width!==pw||c.height!==ph){c.width=pw;c.height=ph}}return{scale:d,width:w,height:h,cssScale:cssS}};' +
-		'window.bkSetup=function(w,h,f){window.bkSetupCalled=true;const c=document.getElementById("c");if(!c)return;const ctx=c.getContext("2d");let loopId=null;let fit=window.bkFitCanvas(c,w,h);function l(){if(window.innerWidth>=32&&window.innerHeight>=32){ctx.save();ctx.scale(fit.scale,fit.scale);f(ctx,fit.width,fit.height);ctx.restore()}if(window.__loop){loopId=requestAnimationFrame(l)}else{loopId=null}}function i(){if(window.innerWidth>=32&&window.innerHeight>=32){fit=window.bkFitCanvas(c,w,h);l()}else{requestAnimationFrame(i)}}i();window.addEventListener("resize",function(){fit=window.bkFitCanvas(c,w,h);if(!window.__loop&&window.innerWidth>=32&&window.innerHeight>=32&&!loopId){ctx.save();ctx.scale(fit.scale,fit.scale);f(ctx,fit.width,fit.height);ctx.restore()}});window.addEventListener("message",function(event){if(!event.data)return;if(event.data.type==="bk:play"){window.__loop=true;if(!loopId)loopId=requestAnimationFrame(l)}else if(event.data.type==="bk:pause"){window.__loop=false}});};' +
-		'window.addEventListener("message",function(event){if(!event.data||event.data.type!=="bk:set-props")return;window.__simProps=Object.assign({},window.__simProps,event.data.props);window.dispatchEvent(new CustomEvent("bk:props",{detail:window.__simProps}));});' +
+		'window.bkSetup=function(w,h,f){window.bkSetupCalled=true;const c=document.getElementById("c");if(!c)return;const ctx=c.getContext("2d");let loopId=null;let fit=window.bkFitCanvas(c,w,h);function l(){if(window.innerWidth>=32&&window.innerHeight>=32){ctx.save();ctx.scale(fit.scale,fit.scale);f(ctx,fit.width,fit.height);ctx.restore()}if(window.__loop){loopId=requestAnimationFrame(l)}else{loopId=null}}function i(){if(window.innerWidth>=32&&window.innerHeight>=32){fit=window.bkFitCanvas(c,w,h);l()}else{requestAnimationFrame(i)}}i();window.addEventListener("resize",function(){fit=window.bkFitCanvas(c,w,h);if(!window.__loop&&window.innerWidth>=32&&window.innerHeight>=32&&!loopId){ctx.save();ctx.scale(fit.scale,fit.scale);f(ctx,fit.width,fit.height);ctx.restore()}});window.addEventListener("message",function(event){if(event.source!==window.parent)return;if(!event.data)return;if(event.data.type==="bk:play"){window.__loop=true;if(!loopId)loopId=requestAnimationFrame(l)}else if(event.data.type==="bk:pause"){window.__loop=false}else if(event.data.type==="bk:set-props"){window.__simProps=Object.assign({},window.__simProps,event.data.props);window.dispatchEvent(new CustomEvent("bk:props",{detail:window.__simProps}));}});};' +
 		"try{" +
 		js +
-		'}catch(e){console.error("Simulation Error:",e);document.body.innerHTML="<div style=\'padding: 20px; color: red; font-family: monospace;\'>Error: "+e.message+"</div>"}' +
+		'}catch(e){console.error("Simulation Error:",e);const d=document.createElement("div");d.style.cssText="padding:20px;color:red;font-family:monospace";d.textContent="Error: "+e.message;document.body.innerHTML="";document.body.appendChild(d);}' +
 		"if(!window.bkSetupCalled){function fallbackScale(){window.bkFitCanvas(document.getElementById('c'),800,500,{bitmap:false});}fallbackScale();window.addEventListener('resize', fallbackScale);}" +
 		"</" + "script></body></html>"
 	);
@@ -76,27 +75,14 @@ function bkWireMaximizeControls() {
 }
 
 function bkWireInteractiveFrames() {
-	const activate = (e) => {
+	const interactiveHandler = (e) => {
 		const obj = e.target.closest?.(".bk-object");
-		if (!obj) return;
-		const frame = obj.querySelector(".bk-embed-interactive");
-		if (frame) {
-			frame.classList.add("is-interactive");
-			const iframe = frame.querySelector("iframe");
-			if (iframe && iframe.contentWindow) {
-				iframe.contentWindow.postMessage({ type: "bk:play" }, "*");
-			}
-		}
-	};
-	document.addEventListener("pointerdown", activate, { passive: true });
-	document.addEventListener("focusin", activate, { passive: true });
+		const activateFrame = obj ? obj.querySelector(".bk-embed-interactive") : null;
 
-	const exitInteractive = (e) => {
 		document
 			.querySelectorAll(".bk-embed-interactive.is-interactive")
 			.forEach((frame) => {
-				const container = frame.closest(".bk-object") || frame;
-				if (!container.contains(e.target)) {
+				if (frame !== activateFrame) {
 					frame.classList.remove("is-interactive");
 					const iframe = frame.querySelector("iframe");
 					if (iframe && iframe.contentWindow) {
@@ -104,9 +90,17 @@ function bkWireInteractiveFrames() {
 					}
 				}
 			});
+
+		if (activateFrame && !activateFrame.classList.contains("is-interactive")) {
+			activateFrame.classList.add("is-interactive");
+			const iframe = activateFrame.querySelector("iframe");
+			if (iframe && iframe.contentWindow) {
+				iframe.contentWindow.postMessage({ type: "bk:play" }, "*");
+			}
+		}
 	};
-	document.addEventListener("pointerdown", exitInteractive, { passive: true });
-	document.addEventListener("focusin", exitInteractive, { passive: true });
+	document.addEventListener("pointerdown", interactiveHandler, { passive: true });
+	document.addEventListener("focusin", interactiveHandler, { passive: true });
 
 	const obs = new IntersectionObserver((entries) => {
 		entries.forEach((e) => {
@@ -192,6 +186,9 @@ function bkBroadcastTheme(targetWindow) {
 }
 
 window.addEventListener("message", function(e) {
+	const isValidSource = Array.from(document.querySelectorAll("iframe")).some(f => f.contentWindow === e.source);
+	if (!isValidSource) return;
+
 	if (e.data && e.data.type === "bk:request-theme") {
 		// Small delay to ensure CSS has applied if this happens right on load
 		requestAnimationFrame(() => bkBroadcastTheme(e.source));
@@ -266,13 +263,16 @@ function bkWireThemeControls() {
 
 	if (savedTheme) {
 		updateThemeBtn(savedTheme);
+		root.setAttribute("data-theme", savedTheme);
 	}
 	if (savedPalette) {
 		const normalizedPalette = savedPalette === "green" ? "field" : savedPalette;
 		updatePaletteBtn(normalizedPalette);
+		root.setAttribute("data-palette", normalizedPalette);
 	}
 	if (savedUi) {
 		updateUiBtn(savedUi);
+		root.setAttribute("data-ui", savedUi);
 	}
 
 	button &&
@@ -344,15 +344,44 @@ function bkWireThemeControls() {
 }
 
 // Quiz interaction
-// biome-ignore lint/correctness/noUnusedVariables: Used in generated HTML
 function bkAnswer(btn, qid) {
-	// biome-ignore lint/correctness/noUnusedVariables: Kept for clarity
-	const isCorrect = btn.dataset.correct === "true";
 	const question = document.getElementById(qid);
+	if (!question) return;
+	const quiz = question.closest(".bk-quiz");
+	const dataEl = quiz ? quiz.querySelector(".bk-quiz-data") : null;
+	let isCorrect = false;
+	
+	if (dataEl) {
+		try {
+			const answers = JSON.parse(dataEl.textContent || "[]");
+			// qid is format "quiz-IDX-qQI"
+			const match = qid.match(/-q(\d+)$/);
+			if (match) {
+				const qi = parseInt(match[1], 10);
+				const optIdx = parseInt(btn.dataset.optIdx, 10);
+				isCorrect = answers[qi] === optIdx;
+			}
+		} catch(e) {}
+	}
+
 	question.querySelectorAll(".bk-opt").forEach((b) => {
-		if (b.dataset.correct === "true") {
+		b.disabled = true; // Disable buttons for screen readers
+		const optIdx = parseInt(b.dataset.optIdx, 10);
+		// If we know the answer, highlight it
+		if (dataEl) {
+			try {
+				const answers = JSON.parse(dataEl.textContent || "[]");
+				const match = qid.match(/-q(\d+)$/);
+				if (match && answers[parseInt(match[1], 10)] === optIdx) {
+					b.classList.add("correct");
+					return;
+				}
+			} catch(e) {}
+		}
+		
+		if (b === btn && isCorrect) {
 			b.classList.add("correct");
-		} else if (b === btn) {
+		} else if (b === btn && !isCorrect) {
 			b.classList.add("wrong");
 		} else {
 			b.classList.add("disabled");

package/src/renderer/blocks.ts

@@ -234,7 +234,17 @@ function renderBlockInner(
               loading="lazy"
               style="width:100%;height:100%;border:none;display:block;">
             </iframe>
-          </div>`,
+          </div>
+          <script>
+            if (!window._bkYtBlurSetup) {
+              window._bkYtBlurSetup = true;
+              window.addEventListener('mousemove', function() {
+                if (document.activeElement && document.activeElement.tagName === 'IFRAME') {
+                  document.activeElement.blur();
+                }
+              }, { passive: true });
+            }
+          </script>`,
 					"neutral",
 				),
 			};
@@ -264,7 +274,7 @@ function renderBlockInner(
 					block.label,
 					block.caption,
 					`<div class="bk-columns" style="grid-template-columns:${block.columns
-						.map((column) => column.width ?? "minmax(0, 1fr)")
+						.map((column) => escAttr(column.width ?? "minmax(0, 1fr)"))
 						.join(" ")}">
             ${block.columns
 							.map((column) => {
@@ -316,6 +326,7 @@ function renderBlockInner(
           <div class="bk-quiz-body">
             ${quiz.questions.map((q, qi) => renderQuestion(q, `quiz-${idx}`, qi)).join("\n")}
           </div>
+          <script type="application/json" class="bk-quiz-data">${escapeScriptJson(quiz.questions.map(q => q.answer))}</script>
         </div>`,
 				navItems: [{
 					id: `quiz-${idx}`,
@@ -338,7 +349,7 @@ function renderQuestion(q: QuizQuestion, quizId: string, qi: number): string {
 	const options = q.options
 		.map(
 			(opt, oi) => `
-    <button class="bk-opt" data-correct="${oi === q.answer}" onclick="bkAnswer(this,'${qid}')">
+    <button class="bk-opt" data-opt-idx="${oi}" onclick="bkAnswer(this,'${escAttr(qid)}')">
       <span class="bk-opt-dot"></span><span class="bk-opt-text">${mdInline(opt)}</span>
     </button>`,
 		)
@@ -511,10 +522,14 @@ window.addEventListener("message", (event) => {
   window.dispatchEvent(new CustomEvent("bk:props", { detail: window.__simProps }));
 });
 try {
-  ${js}
+  ${js.replace(/<\/script>/gi, "<\\/script>")}
 } catch (e) {
   console.error("Simulation Error:", e);
-  document.body.innerHTML = '<div style="padding:20px;color:red;font-family:monospace">Error: ' + e.message + '</div>';
+  const errDiv = document.createElement('div');
+  errDiv.style.cssText = "padding:20px;color:red;font-family:monospace";
+  errDiv.textContent = 'Error: ' + e.message;
+  document.body.innerHTML = '';
+  document.body.appendChild(errDiv);
 }
 if (!window.bkSetupCalled) {
   function fallbackScale() {
@@ -525,13 +540,7 @@ if (!window.bkSetupCalled) {
 }
 </script>
 </body></html>`;
-	// We use double quotes for the srcdoc attribute, so we must escape them.
-	return doc
-		.replace(/&/g, "&amp;")
-		.replace(/"/g, "&quot;")
-		.replace(/'/g, "&#39;")
-		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;");
+	return escAttr(doc);
 }
 
 export { blockChrome, renderBlock, renderBlockInner };

package/src/renderer/html.ts

@@ -42,11 +42,13 @@ function renderEndNav(lesson: Lesson): string {
   </nav>`;
 }
 
-function renderPage(
-	lesson: Lesson,
-	navItems: NavItem[],
-	bodyHtml: string,
+export function renderLayout(
+	title: string,
+	description: string | undefined,
+	navHtml: string,
+	contentHtml: string,
 	opts: BuildOptions,
+	extraSidebar: string = "",
 ): string {
 	const theme = opts.theme ?? "light";
 	const schemeAttr = `data-theme="${theme}"`;
@@ -56,8 +58,7 @@ function renderPage(
 	const tone = preset.tone ?? "scholarly";
 	const palette = opts.palette ?? "ink";
 	const ui = opts.ui ?? "standard";
-	const navHtml = navItems.map(renderNavItem).join("\n");
-	const endNavHtml = renderEndNav(lesson);
+	const safeFont = opts.font ? opts.font.replace(/[;{}<>\\]/g, "") : "";
 
 	return `<!DOCTYPE html>
 <html lang="en" data-palette="${palette}" data-ui="${ui}" ${schemeAttr}>
@@ -75,26 +76,21 @@ function renderPage(
 </script>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${escHtml(lesson.meta.title)}</title>
-${lesson.meta.description ? `<meta name="description" content="${escHtml(lesson.meta.description)}">` : ""}
+<title>${escHtml(title)}</title>
+${description ? `<meta name="description" content="${escHtml(description)}">` : ""}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.47/dist/katex.min.css">
 <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,650;9..144,760&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Syne:wght@600;700;800&family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.11.1/styles/github-dark.min.css">
 ${opts.head ?? ""}
-<style>
-${opts.font ? `:root { --font-sans: ${opts.font}, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }` : ""}
-${pageCSS()}
-</style>
+${opts.standalone === false ? `<link rel="stylesheet" href="assets/theme.css?v=${Date.now()}">` : `<style>\n${safeFont ? `:root { --font-sans: ${safeFont}, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }` : ""}\n${pageCSS()}\n</style>`}
 </head>
 <body class="bk-layout-${layout} bk-density-${density} bk-tone-${tone}">
 <div class="bk-shell">
   <aside class="bk-sidebar">
     <div class="bk-sidebar-inner">
       <div class="bk-sidebar-header">
-        ${lesson.meta.parentSlug ? `<div style="margin-top: 8px;"><a href="${lesson.meta.parentSlug}.html" class="bk-back-link" aria-label="Back to Chapter" style="margin-bottom: 12px;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>Back to Chapter</a></div>` : `<div style="margin-top: 8px;"></div>`}
-        <div class="bk-sidebar-title">${escHtml(lesson.meta.title)}</div>
-        ${lesson.meta.author ? `<div class="bk-sidebar-author">By ${escHtml(lesson.meta.author)}</div>` : ""}
-        ${lesson.meta.tags?.length ? `<div class="bk-tag-row">${lesson.meta.tags.map((tag) => `<span>${escHtml(tag)}</span>`).join("")}</div>` : ""}
+        ${extraSidebar}
+        <div class="bk-sidebar-title">${escHtml(title)}</div>
       </div>
       <nav class="bk-nav">${navHtml}</nav>
       <div class="bk-sidebar-footer">
@@ -156,6 +152,30 @@ ${pageCSS()}
     <button class="bk-sidebar-expand" id="bk-sidebar-expand" type="button" aria-label="Expand sidebar">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
     </button>
+    ${contentHtml}
+  </main>
+</div>
+${opts.standalone === false ? `<script src="assets/app.js?v=${Date.now()}"></script>` : `<script>\n${clientScript()}\n</script>`}
+</body>
+</html>`;
+}
+
+function renderPage(
+	lesson: Lesson,
+	navItems: NavItem[],
+	bodyHtml: string,
+	opts: BuildOptions,
+): string {
+	const navHtml = navItems.map(renderNavItem).join("\n");
+	const endNavHtml = renderEndNav(lesson);
+
+	const extraSidebar = `
+		${lesson.meta.parentSlug ? `<div style="margin-top: 8px;"><a href="${lesson.meta.parentSlug}.html" class="bk-back-link" aria-label="Back to Chapter" style="margin-bottom: 12px;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>Back to Chapter</a></div>` : `<div style="margin-top: 8px;"></div>`}
+	`;
+	const authorHtml = lesson.meta.author ? `<div class="bk-sidebar-author">By ${escHtml(lesson.meta.author)}</div>` : "";
+	const tagsHtml = lesson.meta.tags?.length ? `<div class="bk-tag-row">${lesson.meta.tags.map((tag) => `<span>${escHtml(tag)}</span>`).join("")}</div>` : "";
+
+	const contentHtml = `
     <article class="bk-content">
       <header class="bk-hero">
         <p class="bk-eyebrow">Interactive Lesson</p>
@@ -165,13 +185,16 @@ ${pageCSS()}
       ${bodyHtml}
       ${endNavHtml}
     </article>
-  </main>
-</div>
-<script>
-${clientScript()}
-</script>
-</body>
-</html>`;
+	`;
+
+	return renderLayout(
+		lesson.meta.title,
+		lesson.meta.description,
+		navHtml,
+		contentHtml,
+		opts,
+		extraSidebar + authorHtml + tagsHtml
+	);
 }
 
 // ─── CSS ──────────────────────────────────────────────────────────────────────