mr-md 2.0.0-beta → 2.1.0-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,69 @@ 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;
+		for (const file of fs.readdirSync(src)) {
+			fs.copyFileSync(path.join(src, file), path.join(dest, file));
+		}
+	};
+
+	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 +135,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 ────────────────────────────────────────────────────────────
@@ -494,6 +530,10 @@ export class LessonBuilder {
 		const outPath = path.join(outDir, `${this.meta.slug}.html`);
 		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 +698,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 {
@@ -728,6 +755,10 @@ export class ChapterBuilder {
 		const outPath = path.join(outDir, `${this.meta.slug}.html`);
 		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/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>`,
 		)
@@ -514,7 +525,11 @@ 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>';
+  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 ──────────────────────────────────────────────────────────────────────

package/src/renderer/index.ts

@@ -1,6 +1,6 @@
 import type { BuildOptions, Chapter, Lesson } from "../types.js";
 import { escAttr, escHtml, renderBlock } from "./blocks.js";
-import { clientScript, pageCSS, renderPage } from "./html.js"; // Used in renderChapter
+import { clientScript, pageCSS, renderPage, renderLayout } from "./html.js"; // Used in renderChapter
 import type { NavItem } from "./utils.js";
 
 // ─── Main render function ─────────────────────────────────────────────────────
@@ -316,89 +316,7 @@ export function renderChapter(
 }
 `;
 
-	return `<!DOCTYPE html>
-<html lang="en" data-palette="${palette}" data-ui="${ui}" ${schemeAttr}>
-<head>
-<meta charset="UTF-8">
-<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">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${escHtml(chapter.meta.title)}</title>
-${chapter.meta.description ? `<meta name="description" content="${escHtml(chapter.meta.description)}">` : ""}
-${opts.head ?? ""}
-<style>
-${opts.font ? `:root { --font-sans: ${opts.font}, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }` : ""}
-${pageCSS()}
-${chapterStyles}
-</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">
-        <div style="margin-top: 8px;"></div>
-        <div class="bk-sidebar-title">${escHtml(chapter.meta.title)}</div>
-      </div>
-      <nav class="bk-nav">${navHtml}</nav>
-      <div class="bk-sidebar-footer">
-        <button class="bk-icon-btn bk-settings-button" id="bk-settings-button" type="button" aria-expanded="false" aria-controls="bk-theme-panel" title="Display settings">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-          <span class="bk-sr-only">Display settings</span>
-        </button>
-        <div class="bk-theme-panel" id="bk-theme-panel" aria-label="Display settings" hidden>
-          <div class="bk-theme-row">
-            <span>Theme</span>
-            <div class="bk-segmented-control" id="bk-theme-icons">
-               <button type="button" class="bk-segment-btn ${theme === "light" ? "active" : ""}" data-theme="light" title="Light" aria-label="Light theme">
-                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-               </button>
-               <button type="button" class="bk-segment-btn ${theme === "auto" ? "active" : (!theme ? "active" : "")}" data-theme="auto" title="System" aria-label="System theme">
-                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
-               </button>
-               <button type="button" class="bk-segment-btn ${theme === "dark" ? "active" : ""}" data-theme="dark" title="Dark" aria-label="Dark theme">
-                 <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="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-               </button>
-            </div>
-          </div>
-          <div class="bk-theme-row">
-            <span>Palette</span>
-            <div class="bk-segmented-control" id="bk-palette-icons">
-               <button type="button" class="bk-segment-btn ${palette === "ink" ? "active" : ""}" data-palette="ink" title="Ink" aria-label="Ink palette">
-                 <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="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path></svg>
-               </button>
-               <button type="button" class="bk-segment-btn ${palette === "field" ? "active" : ""}" data-palette="field" title="Field" aria-label="Field palette">
-                 <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="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 12"></path></svg>
-               </button>
-               <button type="button" class="bk-segment-btn ${palette === "ember" ? "active" : ""}" data-palette="ember" title="Ember" aria-label="Ember palette">
-                 <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="M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 2.5z"></path></svg>
-               </button>
-            </div>
-          </div>
-          <div class="bk-theme-row">
-            <span>UI</span>
-            <div class="bk-segmented-control" id="bk-ui-icons">
-               <button type="button" class="bk-segment-btn ${ui === 'standard' ? 'active' : ''}" data-ui="standard" title="Standard" aria-label="Standard UI">
-                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="4" ry="4"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
-               </button>
-               <button type="button" class="bk-segment-btn ${ui === 'neo' ? 'active' : ''}" data-ui="neo" title="Neo Brutalist" aria-label="Neo UI">
-                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="miter"><rect x="3" y="3" width="18" height="18"></rect><path d="M3 10h18"></path><path d="M10 10v11"></path></svg>
-               </button>
-               <button type="button" class="bk-segment-btn ${ui === 'playful' ? 'active' : ''}" data-ui="playful" title="Playful" aria-label="Playful UI">
-                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="6" ry="6"></rect><circle cx="8.5" cy="8.5" r="1.5" fill="currentColor"></circle><circle cx="15.5" cy="15.5" r="1.5" fill="currentColor"></circle></svg>
-               </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </aside>
-  <button class="bk-sidebar-collapse-floating" id="bk-sidebar-collapse" aria-label="Collapse sidebar">
-    <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="M15 18l-6-6 6-6"/></svg>
-  </button>
-  <main class="bk-main">
-    <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>
+	const contentHtml = `
     <article class="bk-content" style="max-width: 1000px; margin: 0 auto;">
       <header class="bk-hero" style="border-bottom: none;">
         <p class="bk-eyebrow">Chapter</p>
@@ -407,11 +325,15 @@ ${chapterStyles}
       </header>
       ${timelineHtml}
     </article>
-  </main>
-</div>
-<script>
-${clientScript()}
-</script>
-</body>
-</html>`;
+	`;
+
+	const headHtml = `<style>${chapterStyles}</style>`;
+
+	return renderLayout(
+		chapter.meta.title,
+		chapter.meta.description,
+		navHtml,
+		contentHtml,
+		{ ...opts, head: (opts.head ?? "") + headHtml }
+	);
 }