mr-md 1.0.4 → 2.0.0-beta

package/src/renderer/blocks.ts

@@ -62,8 +62,8 @@ function renderBlockInner(
 	switch (block.type) {
 		case "heading": {
 			const md = resolveContent(block.src, options, "md");
-			const { html, title, headings } = mdToHtml(md);
-			const label = block.title || title || headings[0]?.text || (typeof block.src === "string" && !block.src.includes(".md") ? block.src.replace(/^#+\s*/, '') : "Heading");
+			const { html, title } = mdToHtml(md);
+			const label = block.title || title || (typeof block.src === "string" && !block.src.includes(".md") ? block.src : "Heading");
 			const id = `heading-${idx}`;
 			return {
 				html: `<section id="${id}" class="bk-section bk-heading">${html}</section>`,
@@ -77,15 +77,15 @@ function renderBlockInner(
 			const navItems: NavItem[] = headings.map(h => ({
 				id: h.id,
 				label: h.text,
-				kind: h.level === 2 ? "heading" : "section"
+				kind: h.level === 1 ? "heading" : "section"
 			}));
 			return { html: `<div class="bk-markdown">${html}</div>`, navItems: navItems.length > 0 ? navItems : undefined };
 		}
 
 		case "section": {
 			const md = resolveContent(block.src, options, "md");
-			const { html, title, headings } = mdToHtml(md);
-			const label = block.label || title || headings[0]?.text || (typeof block.src === "string" && !block.src.includes(".md") ? block.src.replace(/^#+\s*/, '') : "Section");
+			const { html, title } = mdToHtml(md);
+			const label = block.label || title || (typeof block.src === "string" && !block.src.includes(".md") ? block.src : "Section");
 			const id = `section-${idx}`;
 			return {
 				html: `<section id="${id}" class="bk-section bk-subsection">${html}</section>`,
@@ -145,6 +145,8 @@ function renderBlockInner(
 			const propsJson = escapeScriptJson(block.props ?? {});
 			const simSrc = resolveContent(block.src, options, "js");
 			const simConfig = { js: simSrc, loop: false, dependencies: block.dependencies };
+			const id = `sim-${idx}`;
+			const label = block.label || "Interactive Simulation";
 			return {
 				html: blockChrome(
 					block.controls === "observe" ? "Simulation" : "Interactive Lab",
@@ -157,12 +159,16 @@ function renderBlockInner(
             </div>
             <iframe srcdoc="${iframeDoc(simSrc, propsJson, false, block.dependencies)}"
               sandbox="allow-scripts"
+              loading="lazy"
               style="width:100%;height:100%;border:none;display:block;">
             </iframe>
           </div>
           <script type="application/json" class="bk-sim-config">${escapeScriptJson(simConfig)}</script>`,
 					block.accent ?? "blue",
+					true,
+					id
 				),
+				navItems: [{ id, label, kind: "simulation" }],
 			};
 		}
 
@@ -173,12 +179,13 @@ function renderBlockInner(
 					"Animation",
 					block.label,
 					block.caption,
-					`<div class="bk-embed-frame bk-embed-interactive">
+					`<div class="bk-embed-frame bk-embed-interactive" data-is-animation="true">
             <div class="bk-embed-overlay" tabindex="0" role="button" aria-label="Activate interactive animation">
               <span class="bk-embed-overlay-text">Click to interact</span>
             </div>
             <iframe srcdoc="${iframeDoc(animSrc, "{}", block.loop)}"
               sandbox="allow-scripts"
+              loading="lazy"
               style="width:100%;height:100%;border:none;display:block;">
             </iframe>
           </div>`,
@@ -288,8 +295,7 @@ function renderBlockInner(
 				if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) {
 					throw new Error("Quiz file not found or invalid JSON format");
 				}
-				const parsed = JSON.parse(trimmed);
-				quiz = Array.isArray(parsed) ? { questions: parsed } : parsed;
+				quiz = JSON.parse(trimmed);
 			} catch (e) {
 				const msg = e instanceof Error ? e.message : String(e);
 				if (options.strict !== false) {
@@ -352,7 +358,7 @@ function renderQuestion(q: QuizQuestion, quizId: string, qi: number): string {
 
 // Wraps a JS string in a minimal iframe document
 function iframeDoc(js: string, props: string, loop?: boolean, dependencies?: string[]): string {
-	const scriptTags = (dependencies ?? []).map((url) => `<script src="${escAttr(url)}"></script>`).join("\n");
+	const scriptTags = (dependencies ?? []).map((url) => `<script src="${escAttr(url)}"></script>`).join("\\n");
 	const doc = `<!DOCTYPE html><html><head>
 ${scriptTags}
 <style>
@@ -366,6 +372,26 @@ ${scriptTags}
 window.__simProps=${props};
 window.__loop=${loop ?? false};
 window.bkSetupCalled = false;
+window.__bkTheme = { colors: {}, theme: "light", palette: "ink", ui: "standard" };
+window.bkColor = function(name) { return window.__bkTheme.colors[name] || "#000000"; };
+window.bkUi = function() { return window.__bkTheme.ui; };
+window.bkThemeMode = function() {
+  const rootTheme = window.__bkTheme.theme;
+  if (rootTheme === "auto") {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
+  }
+  return rootTheme;
+};
+window.addEventListener("message", function(e) {
+  if (e.data && e.data.type === "bk:theme-sync") {
+    window.__bkTheme = e.data.state;
+    window.dispatchEvent(new CustomEvent("bk:theme-changed", { detail: window.__bkTheme }));
+  }
+});
+if (window.parent && window.parent !== window) {
+  window.parent.postMessage({ type: "bk:request-theme" }, "*");
+}
+
 window.bkCanvasPoint = function(event, canvas) {
   const c = canvas || event.currentTarget || event.target;
   const rect = c.getBoundingClientRect();
@@ -416,19 +442,67 @@ window.bkSetup = function(requestedW, requestedH, loopFn) {
   if (!canvas) return;
   const ctx = canvas.getContext("2d");
   
+  let loopId = null;
+  let cachedFit = window.bkFitCanvas(canvas, requestedW, requestedH);
+
   function loop() {
-    const fit = window.bkFitCanvas(canvas, requestedW, requestedH);
     if (window.innerWidth >= 32 && window.innerHeight >= 32) {
       ctx.save();
-      ctx.scale(fit.scale, fit.scale);
+      ctx.scale(cachedFit.scale, cachedFit.scale);
       
-      loopFn(ctx, fit.width, fit.height);
+      loopFn(ctx, cachedFit.width, cachedFit.height);
       
       ctx.restore();
     }
-    requestAnimationFrame(loop);
+    if (window.__loop) {
+      loopId = requestAnimationFrame(loop);
+    } else {
+      loopId = null;
+    }
   }
-  loop();
+  
+  function initDraw() {
+    if (window.innerWidth >= 32 && window.innerHeight >= 32) {
+      cachedFit = window.bkFitCanvas(canvas, requestedW, requestedH);
+      loop();
+    } else {
+      requestAnimationFrame(initDraw);
+    }
+  }
+  initDraw();
+  
+  window.addEventListener("resize", () => {
+    cachedFit = window.bkFitCanvas(canvas, requestedW, requestedH);
+    if (!window.__loop && window.innerWidth >= 32 && window.innerHeight >= 32) {
+      if (!loopId) {
+        ctx.save();
+        ctx.scale(cachedFit.scale, cachedFit.scale);
+        loopFn(ctx, cachedFit.width, cachedFit.height);
+        ctx.restore();
+      }
+    }
+  });
+  
+  window.addEventListener("bk:theme-changed", () => {
+    if (!window.__loop && window.innerWidth >= 32 && window.innerHeight >= 32) {
+      if (!loopId) {
+        ctx.save();
+        ctx.scale(cachedFit.scale, cachedFit.scale);
+        loopFn(ctx, cachedFit.width, cachedFit.height);
+        ctx.restore();
+      }
+    }
+  });
+  
+  window.addEventListener("message", (event) => {
+    if (!event.data) return;
+    if (event.data.type === "bk:play") {
+      window.__loop = true;
+      if (!loopId) loopId = requestAnimationFrame(loop);
+    } else if (event.data.type === "bk:pause") {
+      window.__loop = false; // will stop at next frame
+    }
+  });
 };
 
 window.addEventListener("message", (event) => {
@@ -445,9 +519,9 @@ try {
 if (!window.bkSetupCalled) {
   function fallbackScale() {
     window.bkFitCanvas(document.getElementById("c"), 800, 500, { bitmap: false });
-    requestAnimationFrame(fallbackScale);
   }
   fallbackScale();
+  window.addEventListener("resize", fallbackScale);
 }
 </script>
 </body></html>`;

package/src/renderer/html.ts

@@ -16,7 +16,9 @@ function renderNavItem(item: NavItem): string {
 			? "bk-nav-heading"
 			: item.kind === "quiz"
 				? "bk-nav-quiz"
-				: "bk-nav-sub";
+				: item.kind === "simulation"
+					? "bk-nav-sim"
+					: "bk-nav-sub";
 	return `<a href="#${item.id}" class="bk-nav-item ${kindClass}" data-id="${item.id}">${escHtml(item.label)}</a>`;
 }
 
@@ -46,24 +48,37 @@ function renderPage(
 	bodyHtml: string,
 	opts: BuildOptions,
 ): string {
-	const theme = opts.theme ?? "auto";
-	const schemeAttr = theme === "auto" ? "" : `data-theme="${theme}"`;
+	const theme = opts.theme ?? "light";
+	const schemeAttr = `data-theme="${theme}"`;
 	const preset = opts.preset ?? {};
 	const layout = preset.layout ?? "lesson";
 	const density = preset.density ?? "comfortable";
 	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);
 
 	return `<!DOCTYPE html>
-<html lang="en" data-palette="${palette}" ${schemeAttr}>
+<html lang="en" data-palette="${palette}" data-ui="${ui}" ${schemeAttr}>
 <head>
+<script>
+(function() {
+	var t = localStorage.getItem("bk-theme");
+	var p = localStorage.getItem("bk-palette");
+	var u = localStorage.getItem("bk-ui");
+	var root = document.documentElement;
+	if (t) root.setAttribute("data-theme", t);
+	if (p) root.setAttribute("data-palette", p === "green" ? "field" : p);
+	if (u) root.setAttribute("data-ui", u);
+})();
+</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)}">` : ""}
 <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>
@@ -94,12 +109,12 @@ ${pageCSS()}
                <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>
-               <button type="button" class="bk-segment-btn ${theme === "auto" ? "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>
             </div>
           </div>
           <div class="bk-theme-row">
@@ -116,6 +131,20 @@ ${pageCSS()}
                </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>