mr-md 1.0.4 → 2.0.0-beta

package/dist/renderer/blocks.js

@@ -37,8 +37,8 @@ function renderBlockInner(block, idx, options) {
     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>`,
@@ -51,14 +51,14 @@ function renderBlockInner(block, idx, options) {
             const navItems = 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>`,
@@ -115,6 +115,8 @@ function renderBlockInner(block, idx, options) {
             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", block.label, block.caption, `${renderSimulationControls(block)}
           <div class="bk-embed-frame bk-embed-interactive">
@@ -123,21 +125,24 @@ function renderBlockInner(block, idx, options) {
             </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"),
+          <script type="application/json" class="bk-sim-config">${escapeScriptJson(simConfig)}</script>`, block.accent ?? "blue", true, id),
+                navItems: [{ id, label, kind: "simulation" }],
             };
         }
         case "animation": {
             const animSrc = resolveContent(block.src, options, "js");
             return {
-                html: blockChrome("Animation", block.label, block.caption, `<div class="bk-embed-frame bk-embed-interactive">
+                html: blockChrome("Animation", block.label, block.caption, `<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>`, block.accent ?? "neutral"),
@@ -210,8 +215,7 @@ function renderBlockInner(block, idx, options) {
                 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);
@@ -266,7 +270,7 @@ function renderQuestion(q, quizId, qi) {
 }
 // Wraps a JS string in a minimal iframe document
 function iframeDoc(js, props, loop, dependencies) {
-    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>
@@ -280,6 +284,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();
@@ -330,19 +354,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) => {
@@ -359,9 +431,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/dist/renderer/html-neo.d.ts

@@ -0,0 +1,7 @@
+import type { BuildOptions, Lesson } from "../types.js";
+import type { NavItem } from "./utils.js";
+declare function renderNavItem(item: NavItem): string;
+declare function renderPage(lesson: Lesson, navItems: NavItem[], bodyHtml: string, opts: BuildOptions): string;
+declare function copyCoreAssets(outDir: string): void;
+export { copyCoreAssets, renderNavItem, renderPage };
+//# sourceMappingURL=html-neo.d.ts.map

package/dist/renderer/html-neo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-neo.d.ts","sourceRoot":"","sources":["../../src/renderer/html-neo.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAI1C,iBAAS,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAU5C;AAsBD,iBAAS,UAAU,CAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,OAAO,EAAE,EACnB,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,YAAY,GAChB,MAAM,CA0HR;AAID,iBAAS,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAa5C;AAED,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC"}

package/dist/renderer/html-neo.js

@@ -0,0 +1,173 @@
+import * as fs from "fs";
+import * as path from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+import { escHtml } from "./blocks.js";
+// ─── Page shell ───────────────────────────────────────────────────────────────
+function renderNavItem(item) {
+    const kindClass = item.kind === "heading"
+        ? "bk-nav-heading"
+        : item.kind === "quiz"
+            ? "bk-nav-quiz"
+            : 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>`;
+}
+function renderEndNav(lesson) {
+    const { prevSlug, prevTitle, nextSlug, nextTitle } = lesson.meta;
+    if (!prevSlug && !nextSlug)
+        return "";
+    return `<nav class="bk-end-nav" aria-label="Lesson navigation" style="grid-template-columns: repeat(2, minmax(0, 1fr));">
+    ${prevSlug ? `
+    <a class="bk-end-link bk-end-link--prev" href="${prevSlug}.html">
+      <span>Previous Lesson</span>
+      <strong>${escHtml(prevTitle || "Previous")}</strong>
+    </a>
+    ` : `<div class="bk-end-link" style="visibility:hidden"></div>`}
+    ${nextSlug ? `
+    <a class="bk-end-link bk-end-link--next" href="${nextSlug}.html">
+      <span>Next Lesson</span>
+      <strong>${escHtml(nextTitle || "Next")}</strong>
+    </a>
+    ` : `<div class="bk-end-link" style="visibility:hidden"></div>`}
+  </nav>`;
+}
+function renderPage(lesson, navItems, bodyHtml, opts) {
+    const theme = opts.theme ?? "auto";
+    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 navHtml = navItems.map(renderNavItem).join("\n");
+    const endNavHtml = renderEndNav(lesson);
+    return `<!DOCTYPE html>
+<html lang="en" data-palette="${palette}" ${schemeAttr}>
+<head>
+<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="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Syne:wght@600;700;800&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.47/dist/katex.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.11.1/styles/github-dark.min.css">
+${opts.head ?? ""}
+<link rel="stylesheet" href="assets/theme.css">
+<style>
+${opts.font ? `:root { --font-sans: ${opts.font}, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }` : ""}
+</style>
+<script type="speculationrules">
+{
+  "prefetch": [{
+    "where": { "href_matches": "/*" },
+    "eagerness": "eager"
+  }],
+  "prerender": [{
+    "where": { "href_matches": "/*" },
+    "eagerness": "moderate"
+  }]
+}
+</script>
+<link rel="expect" href="#bk-content" blocking="render">
+<script blocking="render">
+  const savedTheme = localStorage.getItem("bk-theme");
+  const savedPalette = localStorage.getItem("bk-palette");
+  if (savedTheme) document.documentElement.setAttribute("data-theme", savedTheme);
+  if (savedPalette) {
+    const normalizedPalette = savedPalette === "green" ? "field" : savedPalette;
+    document.documentElement.setAttribute("data-palette", normalizedPalette);
+  }
+</script>
+</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>` : ""}
+      </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 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>
+      </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>
+    <article class="bk-content" id="bk-content">
+      <header class="bk-hero">
+        <p class="bk-eyebrow">Interactive Lesson</p>
+        <h1 style="view-transition-name: title-${lesson.meta.slug}">${escHtml(lesson.meta.title)}</h1>
+        ${lesson.meta.description ? `<p class="bk-deck">${escHtml(lesson.meta.description)}</p>` : ""}
+      </header>
+      ${bodyHtml}
+      ${endNavHtml}
+    </article>
+  </main>
+</div>
+<script src="assets/app.js" defer></script>
+</body>
+</html>`;
+}
+// ─── Core Assets ────────────────────────────────────────────────────────────────
+function copyCoreAssets(outDir) {
+    const assetsDir = path.join(outDir, "assets");
+    if (!fs.existsSync(assetsDir))
+        fs.mkdirSync(assetsDir, { recursive: true });
+    const cssPath = path.join(__dirname, "../styles/theme.css");
+    if (fs.existsSync(cssPath)) {
+        fs.copyFileSync(cssPath, path.join(assetsDir, "theme.css"));
+    }
+    const jsPath = path.join(__dirname, "../client/app.js");
+    if (fs.existsSync(jsPath)) {
+        fs.copyFileSync(jsPath, path.join(assetsDir, "app.js"));
+    }
+}
+export { copyCoreAssets, renderNavItem, renderPage };

package/dist/renderer/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../src/renderer/html.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAI1C,iBAAS,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAQ5C;AAsBD,iBAAS,UAAU,CAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,OAAO,EAAE,EACnB,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,YAAY,GAChB,MAAM,CAkGR;AAID,iBAAS,OAAO,IAAI,MAAM,CAKzB;AAID,iBAAS,YAAY,IAAI,MAAM,CAE9B;AAED,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../src/renderer/html.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAI1C,iBAAS,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAU5C;AAsBD,iBAAS,UAAU,CAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,OAAO,EAAE,EACnB,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,YAAY,GAChB,MAAM,CA6HR;AAID,iBAAS,OAAO,IAAI,MAAM,CAKzB;AAID,iBAAS,YAAY,IAAI,MAAM,CAE9B;AAED,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC"}

package/dist/renderer/html.js

@@ -10,7 +10,9 @@ function renderNavItem(item) {
         ? "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>`;
 }
 function renderEndNav(lesson) {
@@ -33,23 +35,36 @@ function renderEndNav(lesson) {
   </nav>`;
 }
 function renderPage(lesson, navItems, bodyHtml, opts) {
-    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>
@@ -80,12 +95,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">
@@ -102,6 +117,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>

package/dist/renderer/index-neo.d.ts

@@ -0,0 +1,4 @@
+import type { BuildOptions, Chapter, Lesson } from "../types.js";
+export declare function render(lesson: Lesson, opts?: BuildOptions): string;
+export declare function renderChapter(chapter: Chapter, opts?: BuildOptions): string;
+//# sourceMappingURL=index-neo.d.ts.map

package/dist/renderer/index-neo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-neo.d.ts","sourceRoot":"","sources":["../../src/renderer/index-neo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAOjE,wBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,GAAE,YAAiB,GAAG,MAAM,CAatE;AAID,wBAAgB,aAAa,CAC5B,OAAO,EAAE,OAAO,EAChB,IAAI,GAAE,YAAiB,GACrB,MAAM,CA6cR"}