mr-md 1.0.4 → 2.0.0-beta

package/src/cli/init.ts

@@ -0,0 +1,97 @@
+import * as fs from "fs";
+import * as path from "path";
+
+export async function runInit() {
+	console.log("Initializing md project structure...");
+
+	const dirs = [
+		"chapters",
+		"chapters/01-chapter",
+		"chapters/01-chapter/lessons",
+		"chapters/01-chapter/lessons/01-lesson",
+		"chapters/01-chapter/lessons/01-lesson/sims",
+		"chapters/01-chapter/lessons/01-lesson/media",
+		"chapters/01-chapter/lessons/01-lesson/quizzes",
+		"chapters/01-chapter/lessons/01-lesson/content",
+	];
+
+	for (const dir of dirs) {
+		const fullPath = path.resolve(process.cwd(), dir);
+		if (!fs.existsSync(fullPath)) {
+			fs.mkdirSync(fullPath, { recursive: true });
+			console.log(`  Created directory: ${dir}`);
+		}
+	}
+
+	const chapterTsPath = path.resolve(process.cwd(), "chapters/01-chapter/chapter.ts");
+	if (!fs.existsSync(chapterTsPath)) {
+		fs.writeFileSync(chapterTsPath, `import { chapter } from "mr-md";
+import { firstLesson } from "./lessons/01-lesson/lesson.js";
+
+export const firstChapter = chapter("First Chapter", ctx => {
+	ctx.lesson(firstLesson);
+});
+
+if (import.meta.main) {
+	firstChapter.build();
+}
+`, "utf-8");
+		console.log("  Created: chapters/01-chapter/chapter.ts");
+	}
+
+	const lessonTsPath = path.resolve(process.cwd(), "chapters/01-chapter/lessons/01-lesson/lesson.ts");
+	if (!fs.existsSync(lessonTsPath)) {
+		fs.writeFileSync(lessonTsPath, `import { lesson } from "mr-md";
+
+export const firstLesson = lesson("First Lesson", { contentBase: import.meta.dir }, ctx => {
+	ctx.markdown("Welcome to your first lesson!");
+});
+`, "utf-8");
+		console.log("  Created: chapters/01-chapter/lessons/01-lesson/lesson.ts");
+	}
+
+	const packageJsonPath = path.resolve(process.cwd(), "package.json");
+	let pkg: any = {};
+	if (fs.existsSync(packageJsonPath)) {
+		try {
+			pkg = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+		} catch (e) {
+			console.error("  Failed to parse existing package.json, ignoring.");
+		}
+	} else {
+		pkg = {
+			name: "my-md-project",
+			version: "1.0.0",
+			private: true
+		};
+	}
+
+	pkg.scripts = {
+		...(pkg.scripts || {}),
+		build: "bun chapters/01-chapter/chapter.ts",
+		dev: "md dev",
+		g: "md g",
+		generate: "md generate"
+	};
+
+	let mrMdVersion = "latest";
+	try {
+		// Find mr-md's own package.json to get its version
+		const __dirname = path.dirname(new URL(import.meta.url).pathname);
+		const ownPkgPath = path.resolve(__dirname, "../../package.json");
+		const ownPkg = JSON.parse(fs.readFileSync(ownPkgPath, "utf-8"));
+		mrMdVersion = ownPkg.version;
+	} catch (e) {
+		// Fallback if unable to read
+	}
+
+	pkg.dependencies = {
+		...(pkg.dependencies || {}),
+		"mr-md": mrMdVersion
+	};
+
+	fs.writeFileSync(packageJsonPath, JSON.stringify(pkg, null, 2) + "\n", "utf-8");
+	console.log("  Updated: package.json");
+
+	console.log("\nDone! You can now run `npm run dev` or `bun run dev` to start the local development server.");
+}

package/src/cli.ts

@@ -0,0 +1,29 @@
+#!/usr/bin/env bun
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+if (!command) {
+	console.error("Usage: md <command> [args]");
+	console.error("Commands:");
+	console.error("  init       Scaffold a new mr-md project");
+	console.error("  g          Generate resources (ch, lesson, quiz)");
+	console.error("  dev        Start local dev server");
+	process.exit(1);
+}
+
+switch (command) {
+	case "init":
+		import("./cli/init.js").then((m) => m.runInit());
+		break;
+	case "g":
+	case "generate":
+		import("./cli/generate.js").then((m) => m.runGenerate(args.slice(1)));
+		break;
+	case "dev":
+		import("./cli/dev.js").then((m) => m.runDev(args.slice(1)));
+		break;
+	default:
+		console.error(`Unknown command: ${command}`);
+		process.exit(1);
+}

package/src/client/app.js

@@ -1,5 +1,5 @@
 function bkSimDoc(js, props, loop, dependencies) {
-	const scriptTags = (dependencies || []).map(url => '<script src="' + url.replace(/"/g, '&quot;') + '"></' + 'script>').join("\n");
+	const scriptTags = (dependencies || []).map(url => '<script src="' + url.replace(/"/g, '&quot;') + '"></' + 'script>').join("\\n");
 	return (
 		"<!DOCTYPE html><html><head>" +
 		scriptTags +
@@ -15,12 +15,12 @@ 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");function l(){const fit=window.bkFitCanvas(c,w,h);if(window.innerWidth>=32&&window.innerHeight>=32){ctx.save();ctx.scale(fit.scale,fit.scale);f(ctx,fit.width,fit.height);ctx.restore()}requestAnimationFrame(l)}l()};' +
+		'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}));});' +
 		"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>"}' +
-		"if(!window.bkSetupCalled){function fallbackScale(){window.bkFitCanvas(document.getElementById('c'),800,500,{bitmap:false});requestAnimationFrame(fallbackScale)}fallbackScale()}" +
+		"if(!window.bkSetupCalled){function fallbackScale(){window.bkFitCanvas(document.getElementById('c'),800,500,{bitmap:false});}fallbackScale();window.addEventListener('resize', fallbackScale);}" +
 		"</" + "script></body></html>"
 	);
 }
@@ -41,64 +41,55 @@ function bkReadSimProps(figure) {
 	return props;
 }
 
-function bkRestartSim(iframe, config, props) {
-	iframe.srcdoc = bkSimDoc(config.js, props, config.loop, config.dependencies);
-}
-
 function bkWireSimControls() {
-	document.querySelectorAll(".bk-object").forEach((figure) => {
-		const configEl = figure.querySelector(".bk-sim-config");
+	const handler = (e) => {
+		const input = e.target.closest?.("[data-bk-prop]");
+		if (!input) return;
+		const figure = input.closest(".bk-object");
+		if (!figure) return;
 		const iframe = figure.querySelector("iframe");
-		if (!configEl || !iframe) return;
-
-		let config;
-		try {
-			config = JSON.parse(configEl.textContent || "{}");
-		} catch {
-			return;
-		}
-
-		figure.querySelectorAll("[data-bk-prop]").forEach((input) => {
-			input.addEventListener("input", () => {
-				const props = bkReadSimProps(figure);
-				iframe.contentWindow?.postMessage({ type: "bk:set-props", props }, "*");
-			});
-			input.addEventListener("change", () => {
-				const props = bkReadSimProps(figure);
-				iframe.contentWindow?.postMessage({ type: "bk:set-props", props }, "*");
-			});
-		});
-	});
+		if (!iframe) return;
+		const props = bkReadSimProps(figure);
+		iframe.contentWindow?.postMessage({ type: "bk:set-props", props }, "*");
+	};
+	document.addEventListener("input", handler, { passive: true });
+	document.addEventListener("change", handler, { passive: true });
 }
 
 function bkWireMaximizeControls() {
-	document.querySelectorAll(".bk-object-maximize").forEach((btn) => {
-		btn.addEventListener("click", () => {
-			const obj = btn.closest(".bk-object");
-			if (!obj) return;
-			const isMax = obj.classList.toggle("bk-object--maximized");
-			if (isMax) {
-				document.body.style.overflow = "hidden";
-				btn.innerHTML =
-					'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/></svg>';
-			} else {
-				document.body.style.overflow = "";
-				btn.innerHTML =
-					'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
-			}
-		});
+	document.addEventListener("click", (e) => {
+		const btn = e.target.closest?.(".bk-object-maximize");
+		if (!btn) return;
+		const obj = btn.closest(".bk-object");
+		if (!obj) return;
+		const isMax = obj.classList.toggle("bk-object--maximized");
+		if (isMax) {
+			document.body.style.overflow = "hidden";
+			btn.innerHTML =
+				'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/></svg>';
+		} else {
+			document.body.style.overflow = "";
+			btn.innerHTML =
+				'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
+		}
 	});
 }
 
 function bkWireInteractiveFrames() {
-	document.querySelectorAll(".bk-object").forEach((obj) => {
-		const activate = () => {
-			const frame = obj.querySelector(".bk-embed-interactive");
-			if (frame) frame.classList.add("is-interactive");
-		};
-		obj.addEventListener("pointerdown", activate, { passive: true });
-		obj.addEventListener("focusin", activate, { passive: true });
-	});
+	const activate = (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 exitInteractive = (e) => {
 		document
@@ -107,11 +98,56 @@ function bkWireInteractiveFrames() {
 				const container = frame.closest(".bk-object") || frame;
 				if (!container.contains(e.target)) {
 					frame.classList.remove("is-interactive");
+					const iframe = frame.querySelector("iframe");
+					if (iframe && iframe.contentWindow) {
+						iframe.contentWindow.postMessage({ type: "bk:pause" }, "*");
+					}
 				}
 			});
 	};
 	document.addEventListener("pointerdown", exitInteractive, { passive: true });
 	document.addEventListener("focusin", exitInteractive, { passive: true });
+
+	const obs = new IntersectionObserver((entries) => {
+		entries.forEach((e) => {
+			const frame = e.target;
+			const iframe = frame.querySelector("iframe");
+			if (!e.isIntersecting) {
+				if (frame.classList.contains("is-interactive")) {
+					frame.classList.remove("is-interactive");
+				}
+				if (iframe && iframe.contentWindow) {
+					iframe.contentWindow.postMessage({ type: "bk:pause" }, "*");
+				}
+			} else {
+				if (frame.dataset.isAnimation === "true") {
+					if (iframe && iframe.contentWindow) {
+						iframe.contentWindow.postMessage({ type: "bk:play" }, "*");
+					}
+				}
+			}
+		});
+	}, { threshold: 0 });
+
+	document.querySelectorAll(".bk-embed-interactive").forEach((frame) => {
+		obs.observe(frame);
+	});
+
+	document.addEventListener('contentvisibilityautostatechange', (e) => {
+		const frame = e.target;
+		if (frame && frame.classList && frame.classList.contains('bk-embed-interactive')) {
+			const iframe = frame.querySelector('iframe');
+			if (!iframe || !iframe.contentWindow) return;
+			
+			if (e.skipped) {
+				iframe.contentWindow.postMessage({ type: "bk:pause" }, "*");
+			} else {
+				if (frame.dataset.isAnimation === "true" || frame.classList.contains("is-interactive")) {
+					iframe.contentWindow.postMessage({ type: "bk:play" }, "*");
+				}
+			}
+		}
+	}, { capture: true });
 }
 
 function bkWireSidebarToggle() {
@@ -128,14 +164,58 @@ function bkWireSidebarToggle() {
 		);
 }
 
+function bkBroadcastTheme(targetWindow) {
+	const root = document.documentElement;
+	const styles = getComputedStyle(root);
+	const state = {
+		theme: root.dataset.theme || "light",
+		palette: root.dataset.palette || "ink",
+		ui: root.dataset.ui || "standard",
+		colors: {
+			bg: styles.getPropertyValue('--bg').trim(),
+			paper: styles.getPropertyValue('--paper').trim(),
+			line: styles.getPropertyValue('--line').trim(),
+			'line-strong': styles.getPropertyValue('--line-strong').trim(),
+			text: styles.getPropertyValue('--text').trim(),
+			'text-light': styles.getPropertyValue('--text-light').trim(),
+			accent: styles.getPropertyValue('--accent').trim(),
+			'accent-soft': styles.getPropertyValue('--accent-soft').trim()
+		}
+	};
+	if (targetWindow) {
+		targetWindow.postMessage({ type: "bk:theme-sync", state }, "*");
+	} else {
+		document.querySelectorAll(".bk-embed-interactive iframe").forEach(iframe => {
+			if (iframe.contentWindow) iframe.contentWindow.postMessage({ type: "bk:theme-sync", state }, "*");
+		});
+	}
+}
+
+window.addEventListener("message", function(e) {
+	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));
+	}
+});
+
+// Watch for OS theme changes if on auto
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+	if (document.documentElement.dataset.theme === "auto") {
+		bkBroadcastTheme();
+	}
+});
+
 function bkWireThemeControls() {
 	const root = document.documentElement;
 	const button = document.getElementById("bk-settings-button");
 	const panel = document.getElementById("bk-theme-panel");
 	const themeBtns = document.querySelectorAll("#bk-theme-icons button");
-	const paletteBtns = document.querySelectorAll("#bk-palette-icons button");
-	const savedTheme = localStorage.getItem("bk-theme");
+		const paletteBtns = document.querySelectorAll("#bk-palette-icons button");
+	const uiBtns = document.querySelectorAll("#bk-ui-icons button");
+	let savedTheme = localStorage.getItem("bk-theme");
+	if (!savedTheme) savedTheme = "auto";
 	const savedPalette = localStorage.getItem("bk-palette");
+	const savedUi = localStorage.getItem("bk-ui");
 
 	function updateThemeBtn(val) {
 		themeBtns.forEach(b => {
@@ -144,23 +224,55 @@ function bkWireThemeControls() {
 		});
 	}
 
+	const proPalettes = {
+		ink: "elixir",
+		field: "trunk",
+		ember: "lava"
+	};
+
+	const proIcons = {
+		elixir: '<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="M9 3v4.4L4.8 14.5a2.5 2.5 0 0 0 2.2 3.5h10a2.5 2.5 0 0 0 2.2-3.5L15 7.4V3"></path><path d="M9 14h6"></path><path d="M10 3h4"></path></svg>',
+		trunk: '<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 3 4 8 5-5 5 15H2L8 3z"></path></svg>',
+		lava: '<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="m3 21 4.5-9"></path><path d="M16.5 12 21 21"></path><path d="m11 21 1.4-2.8"></path><path d="m15 21-1.4-2.8"></path><path d="M11 6a3 3 0 0 1 2-2 3 3 0 0 1 2 2"></path><path d="M12 12a3 3 0 0 0 3-3"></path><path d="M9 12a3 3 0 0 1-3-3"></path><path d="M12 21v-3.5"></path><path d="M10 18h4"></path></svg>'
+	};
+
+	const normalIcons = {
+		ink: '<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>',
+		field: '<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 13 12"></path></svg>',
+		ember: '<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>'
+	};
+
 	function updatePaletteBtn(val) {
 		paletteBtns.forEach(b => {
-			if(b.dataset.palette === val) b.classList.add("active");
+			const basePalette = b.dataset.palette;
+
+			if (val === proPalettes[basePalette]) {
+				b.innerHTML = proIcons[val];
+			} else {
+				b.innerHTML = normalIcons[basePalette];
+			}
+
+			if(basePalette === val || proPalettes[basePalette] === val) b.classList.add("active");
+			else b.classList.remove("active");
+		});
+	}
+
+		function updateUiBtn(val) {
+		uiBtns.forEach(b => {
+			if(b.dataset.ui === val) b.classList.add("active");
 			else b.classList.remove("active");
 		});
 	}
 
 	if (savedTheme) {
 		updateThemeBtn(savedTheme);
-		savedTheme === "auto"
-			? root.removeAttribute("data-theme")
-			: root.setAttribute("data-theme", savedTheme);
 	}
 	if (savedPalette) {
 		const normalizedPalette = savedPalette === "green" ? "field" : savedPalette;
 		updatePaletteBtn(normalizedPalette);
-		root.setAttribute("data-palette", normalizedPalette);
+	}
+	if (savedUi) {
+		updateUiBtn(savedUi);
 	}
 
 	button &&
@@ -190,18 +302,43 @@ function bkWireThemeControls() {
 			const val = btn.dataset.theme;
 			localStorage.setItem("bk-theme", val);
 			updateThemeBtn(val);
-			val === "auto"
-				? root.removeAttribute("data-theme")
-				: root.setAttribute("data-theme", val);
+			root.setAttribute("data-theme", val);
+			bkBroadcastTheme();
 		});
 	});
 
-	paletteBtns.forEach(btn => {
+		paletteBtns.forEach(btn => {
+		btn.addEventListener("click", (e) => {
+			const baseVal = btn.dataset.palette;
+			let currentVal = root.getAttribute("data-palette") || "ink";
+			let newVal = baseVal;
+
+			if (e.detail === 2) {
+				if (currentVal === proPalettes[baseVal]) {
+					newVal = baseVal;
+				} else {
+					newVal = proPalettes[baseVal];
+				}
+			} else {
+				if (currentVal === proPalettes[baseVal]) {
+					newVal = proPalettes[baseVal];
+				}
+			}
+
+			localStorage.setItem("bk-palette", newVal);
+			updatePaletteBtn(newVal);
+			root.setAttribute("data-palette", newVal);
+			bkBroadcastTheme();
+		});
+	});
+
+	uiBtns.forEach(btn => {
 		btn.addEventListener("click", () => {
-			const val = btn.dataset.palette;
-			localStorage.setItem("bk-palette", val);
-			updatePaletteBtn(val);
-			root.setAttribute("data-palette", val);
+			const val = btn.dataset.ui;
+			localStorage.setItem("bk-ui", val);
+			updateUiBtn(val);
+			root.setAttribute("data-ui", val);
+			bkBroadcastTheme();
 		});
 	});
 }
@@ -251,23 +388,28 @@ function bkWireCodeCopy() {
 		btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
 		btn.setAttribute("aria-label", "Copy code");
 		btn.title = "Copy code";
-
-		btn.addEventListener("click", async () => {
-			try {
-				await navigator.clipboard.writeText(code.textContent || "");
-				btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
-				btn.classList.add("copied");
-				setTimeout(() => {
-					btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
-					btn.classList.remove("copied");
-				}, 2000);
-			} catch (err) {
-				console.error("Failed to copy", err);
-			}
-		});
-
 		container.appendChild(btn);
 	});
+
+	document.addEventListener("click", async (e) => {
+		const btn = e.target.closest?.(".bk-copy-btn");
+		if (!btn) return;
+		const container = btn.closest(".bk-code-block");
+		if (!container) return;
+		const code = container.querySelector("code");
+		if (!code) return;
+		try {
+			await navigator.clipboard.writeText(code.textContent || "");
+			btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+			btn.classList.add("copied");
+			setTimeout(() => {
+				btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+				btn.classList.remove("copied");
+			}, 2000);
+		} catch (err) {
+			console.error("Failed to copy", err);
+		}
+	});
 }
 
 // Active sidebar link on scroll
@@ -279,36 +421,69 @@ document.addEventListener("DOMContentLoaded", () => {
 	bkWireInteractiveFrames();
 	bkWireCodeCopy();
 
-	const sections = document.querySelectorAll(
-		'[id^="heading-"], [id^="section-"], [id^="quiz-"]',
-	);
 	const navLinks = document.querySelectorAll(".bk-nav-item");
+	if (!navLinks.length) return;
 
-	if (!sections.length || !navLinks.length) return;
+	const nav = document.querySelector(".bk-nav");
+	let pill = document.querySelector(".bk-nav-active-pill");
+	if (nav && !pill) {
+		pill = document.createElement("div");
+		pill.className = "bk-nav-active-pill";
+		nav.prepend(pill);
+	}
 
-	const obs = new IntersectionObserver(
-		(entries) => {
-			let activeId = null;
-			entries.forEach((e) => {
-				if (e.isIntersecting) {
-					activeId = e.target.id;
-				}
-			});
+	const sections = [];
+	navLinks.forEach((l) => {
+		const id = l.dataset.id;
+		if (id) {
+			const el = document.getElementById(id);
+			if (el) sections.push({ id, el, link: l, isAbove: false });
+		}
+	});
 
-			if (activeId) {
-				navLinks.forEach((l) => {
-					if (l.dataset.id === activeId) {
-						l.classList.add("active");
-					} else {
-						l.classList.remove("active");
-					}
-				});
+	if (!sections.length) return;
+
+	function setActive(idx) {
+		sections.forEach((s, i) => {
+			if (i === idx) {
+				s.link.classList.add("active");
+				if (pill) {
+					pill.style.top = s.link.offsetTop + "px";
+					pill.style.height = s.link.offsetHeight + "px";
+					pill.style.opacity = "1";
+				}
+			} else {
+				s.link.classList.remove("active");
 			}
-		},
-		{ rootMargin: "-20% 0px -60% 0px", threshold: 0 },
-	);
+		});
+	}
 
-	sections.forEach((s) => {
-		obs.observe(s);
+	function updateActive() {
+		let activeIdx = 0;
+		for (let i = 0; i < sections.length; i++) {
+			if (sections[i].isAbove) activeIdx = i;
+		}
+		setActive(activeIdx);
+	}
+
+	const mainScrollContainer = document.querySelector(".bk-main");
+	const sectionObs = new IntersectionObserver((entries) => {
+		for (const entry of entries) {
+			const section = sections.find(s => s.el === entry.target);
+			if (!section) continue;
+			if (entry.isIntersecting) {
+				section.isAbove = true;
+			} else {
+				section.isAbove = entry.boundingClientRect.top < (entry.rootBounds?.top ?? 0);
+			}
+		}
+		updateActive();
+	}, {
+		root: mainScrollContainer || null,
+		rootMargin: "0px 0px -75% 0px",
+		threshold: 0
 	});
+
+	sections.forEach(s => sectionObs.observe(s.el));
+	setActive(0);
 });

package/src/index.ts

@@ -1,4 +1,4 @@
-export { ChapterBuilder, chapter, CourseBuilder, course, LessonBuilder, lesson } from "./builder.js";
+export { ChapterBuilder, chapter, LessonBuilder, lesson } from "./builder.js";
 export { render } from "./renderer/index.js";
 export type {
 	AnimationBlock,