orz-paged 0.1.0

package/assets/themes/light-neat-3.css

@@ -0,0 +1,91 @@
+/* ==========================================================================
+   orz-paged · light-neat-3.css — "Orchard"
+   Calm brand-green accent on warm off-white paper, characterful headings.
+   Tinted leafy blockquote card, accent list markers, light harmonic code,
+   generous spacing. Adapted from the Orchard web theme for light / print.
+
+   Theme contract:
+   - :root sets the page-managed tokens (--accent, --page-bg, --font-*) DIRECTLY
+     so they apply by default; an explicit font_preset / decoration_color /
+     page_background overrides them (page CSS is added last & only emits when set).
+   - .orz-doc.markdown-body sets the content-only palette + construct tokens that
+     base.css consumes, plus this theme's signature construct styling.
+   ========================================================================== */
+
+:root {
+  --accent: #5f9e44;
+  --page-bg: #fbfbf8;
+  --font-body: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-heading: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.orz-doc.markdown-body {
+  --text-main: #1b1d1a;
+  --text-muted: #6c7064;
+  --heading-color: #18211a;
+  --border-soft: #e7e7df;
+  --code-bg: #f3f6ee;
+  --table-head-bg: #f1f7ec;
+  --toc-leader: #c3d3b5;
+  --mark-bg: #fdeb9c;
+  --surface-2: #f7f8f3;
+  --ins-color: #1d7a36;
+
+  --span-red: #c0392b;  --span-yellow: #b07d12;  --span-green: #2e8b3d;  --span-blue: #2e6db5;
+  --success-bg: #eaf6ec; --success-text: #1d7a36; --success-border: #c5e6cb;
+  --info-bg: #eef4fb;    --info-text: #1f5fa6;    --info-border: #cfe0f3;
+  --warning-bg: #fdf6e3; --warning-text: #8a6411; --warning-border: #efe2bf;
+  --danger-bg: #fbecec;  --danger-text: #b03030;  --danger-border: #f1cfcf;
+}
+
+/* Headings — characterful display face, firm weight, tight tracking. */
+.orz-doc.markdown-body h1,
+.orz-doc.markdown-body h2,
+.orz-doc.markdown-body h3,
+.orz-doc.markdown-body h4,
+.orz-doc.markdown-body h5,
+.orz-doc.markdown-body h6 { font-weight: 700; letter-spacing: -0.015em; }
+
+.orz-doc.markdown-body h1 { font-size: 2.05em; color: var(--accent); padding-bottom: 0.35em; border-bottom: 1px solid var(--border-soft); }
+.orz-doc.markdown-body h2 { font-size: 1.5em; }
+.orz-doc.markdown-body h3 { font-size: 1.22em; color: color-mix(in srgb, var(--accent) 70%, #1b3514); }
+.orz-doc.markdown-body h6 { text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
+
+.orz-doc.markdown-body a {
+  color: color-mix(in srgb, var(--accent) 70%, #1b3514);
+  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
+}
+
+/* Blockquote — leafy tinted card with an accent edge. */
+.orz-doc.markdown-body blockquote {
+  border-left: 3px solid var(--accent);
+  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--page-bg)), transparent 90%);
+  color: var(--text-muted);
+  padding: 0.55em 1.1em;
+  border-radius: 0 8px 8px 0;
+}
+
+/* Tables — gridded with a washed, accent-underlined header. */
+.orz-doc.markdown-body th {
+  background: var(--table-head-bg);
+  color: var(--heading-color);
+  border-bottom: 2px solid var(--accent);
+}
+.orz-doc.markdown-body tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
+
+.orz-doc.markdown-body ul > li::marker,
+.orz-doc.markdown-body ol > li::marker { color: var(--accent); }
+
+/* Code — light & harmonic panel, code sits flat on the tint. */
+.orz-doc.markdown-body pre,
+.orz-doc.markdown-body :not(pre) > code { background: var(--code-bg); border-color: var(--border-soft); }
+.orz-doc.markdown-body :not(pre) > code { color: #2f5226; }
+
+.orz-doc.markdown-body hr { height: 1px; background: color-mix(in srgb, var(--accent) 32%, transparent); }
+
+.orz-toc { --toc-leader: color-mix(in srgb, var(--accent) 42%, transparent); }
+
+/* Title-block elements — accent baseline rule. (cv-header / letterhead draw
+   their own rule via the element's `border` field, so they're excluded here.) */
+.orz-element.orz-el-report-title,
+.orz-element.orz-el-article-title { padding-bottom: 0.6em; border-bottom: 2px solid var(--accent); }

package/dist/browser-entry.js

@@ -0,0 +1,302 @@
+/**
+ * Browser entry for orz-paged — the in-file paged-document engine (A2).
+ *
+ * esbuild bundles this (+ orz-markdown, paged.js, the document layer and
+ * assembler) into `dist/orz-paged.browser.js`, exposing `window.orzpaged`.
+ *
+ * Flow (DESIGN §6 — the critical sequencing): read the embedded Markdown →
+ * `assemble()` it → render async content (mermaid/smiles/chart) on a hidden
+ * stage and **await it + `document.fonts.ready`** (pagination depends on final
+ * heights) → paginate with paged.js into `.orz-pages` → fill TOC page numbers.
+ * Export = the browser's own print.
+ */
+import { assemble } from './render-paged.js';
+import { paginate, printDocument } from './paged.js';
+import { fontPreset } from './doc/fonts.js';
+import { THEME_FONTS } from './doc/theme-fonts.js';
+import { applyDynamicChoices, collectDynamicChoices } from './doc/dynamic.js';
+const VERSION = typeof __ORZPAGED_VERSION__ !== 'undefined' ? __ORZPAGED_VERSION__ : '0.0.0';
+function cfg() {
+    return window.__ORZ_PAGED__ || {};
+}
+/* ---------- helpers ---------- */
+function sourceText() {
+    const el = document.getElementById('orz-src');
+    return (el ? el.textContent || '' : '').replace(/^\n/, '').replace(/\n\s*$/, '');
+}
+function pagesContainer() {
+    let el = document.getElementById('orz-pages');
+    if (!el) {
+        el = document.createElement('div');
+        el.id = 'orz-pages';
+        // paged.js reflows the .markdown-body content into page boxes, dropping that
+        // wrapper; mark the container so the orz runtime's copy-as-Markdown handler
+        // still fires for a selection in the rendered pages.
+        el.setAttribute('data-orz-copy', '');
+        document.body.appendChild(el);
+    }
+    return el;
+}
+function loadScript(src) {
+    return new Promise((resolve, reject) => {
+        if (!src)
+            return resolve();
+        if (document.querySelector(`script[data-lib="${src}"]`))
+            return resolve();
+        const s = document.createElement('script');
+        s.src = src;
+        s.async = true;
+        s.setAttribute('data-lib', src);
+        s.setAttribute('data-orz-runtime', '1'); // stripped before save (self-reproducing)
+        s.onload = () => resolve();
+        s.onerror = () => reject(new Error('failed to load ' + src));
+        document.head.appendChild(s);
+    });
+}
+function ensureLink(href, id) {
+    if (!href)
+        return;
+    if (id && document.getElementById(id))
+        return;
+    if (!id && document.querySelector(`link[href="${href}"]`))
+        return;
+    const l = document.createElement('link');
+    l.rel = 'stylesheet';
+    l.href = href;
+    if (id)
+        l.id = id;
+    l.setAttribute('data-orz-runtime', '1'); // stripped before save (self-reproducing)
+    document.head.appendChild(l);
+}
+/** Turn a drawn <canvas> into an <img> so it survives HTML serialization for paged.js. */
+function canvasToImg(canvas) {
+    try {
+        const img = document.createElement('img');
+        img.src = canvas.toDataURL('image/png');
+        img.className = canvas.className;
+        img.style.maxWidth = '100%';
+        const dm = canvas.getAttribute('data-md');
+        if (dm != null)
+            img.setAttribute('data-md', dm); // preserve copy-as-Markdown breadcrumb
+        canvas.replaceWith(img);
+    }
+    catch { /* tainted/empty canvas — leave as-is */ }
+}
+/** Load (on demand) and run mermaid / smiles / chart on `root`, then settle to static HTML. */
+async function renderEnhancers(root) {
+    const e = cfg().enhancers || {};
+    const w = window;
+    const jobs = [];
+    // Syntax-highlight code on the stage before pagination, so the highlighted
+    // markup flows into the pages (and prints).
+    if (e.hljsJs && root.querySelector('pre code')) {
+        await loadScript(e.hljsJs);
+        if (w.hljs) {
+            root.querySelectorAll('pre code:not(.hljs)').forEach((b) => {
+                try {
+                    w.hljs.highlightElement(b);
+                }
+                catch { /* ignore */ }
+            });
+        }
+    }
+    if (e.mermaidJs && root.querySelector('.mermaid')) {
+        await loadScript(e.mermaidJs);
+        if (w.mermaid) {
+            w.mermaid.initialize({ startOnLoad: false });
+            jobs.push(Promise.resolve(w.mermaid.run({ nodes: root.querySelectorAll('.mermaid') })).catch(() => undefined));
+        }
+    }
+    if (e.smilesJs && root.querySelector('canvas[data-smiles]')) {
+        await loadScript(e.smilesJs);
+        if (w.SmilesDrawer) {
+            root.querySelectorAll('canvas[data-smiles]').forEach((c) => {
+                const drawer = new w.SmilesDrawer.Drawer({ width: c.width, height: c.height });
+                jobs.push(new Promise((res) => {
+                    w.SmilesDrawer.parse(c.getAttribute('data-smiles'), (tree) => {
+                        try {
+                            drawer.draw(tree, c, 'light', false);
+                        }
+                        catch { /* ignore */ }
+                        res();
+                    }, () => res());
+                }));
+            });
+        }
+    }
+    if (e.chartJs && root.querySelector('canvas.orz-chart[data-chart]')) {
+        await loadScript(e.chartJs);
+        if (w.Chart) {
+            root.querySelectorAll('canvas.orz-chart[data-chart]').forEach((c) => {
+                try {
+                    const conf = JSON.parse(c.getAttribute('data-chart') || '{}');
+                    conf.options = { ...(conf.options || {}), responsive: false, animation: false };
+                    new w.Chart(c, conf);
+                }
+                catch { /* ignore */ }
+            });
+        }
+    }
+    await Promise.all(jobs);
+    // Freeze canvases (smiles/chart) to images so paginating from innerHTML keeps them.
+    root.querySelectorAll('canvas').forEach((c) => canvasToImg(c));
+}
+/* ---------- render ---------- */
+let lastAssembly = null;
+let themeOverride = null; // editor theme picker; null = the document's theme
+// Dynamic switch: the document's `dynamic_choices` is the single source of truth
+// (the editor's switcher writes back to it), so there's no separate override here.
+let lastDynChoices = {}; // choices last applied (from the source)
+let lastDynOptions = {}; // key → values seen (for the switcher UI)
+function stylesheetsFor(a) {
+    const c = cfg();
+    const theme = themeOverride || a.theme;
+    const sheets = [];
+    if (c.mode === 'cdn') {
+        if (c.baseUrl)
+            sheets.push(c.baseUrl);
+        if (theme !== 'none' && c.themeUrls && c.themeUrls[theme])
+            sheets.push(c.themeUrls[theme]);
+    }
+    else {
+        if (c.baseCss)
+            sheets.push({ 'orz-base.css': c.baseCss });
+        if (theme !== 'none' && c.themes && c.themes[theme])
+            sheets.push({ 'orz-theme.css': c.themes[theme] });
+    }
+    // NOTE: do NOT push KaTeX (a URL) here — paged.js' polisher would XHR-fetch it,
+    // which file:// blocks (cross-origin from an opaque origin), breaking pagination
+    // offline. KaTeX is loaded as a <head> <link> in render(), which styles the
+    // .pagedjs_page math globally — no fetch needed. (In --inline mode every entry
+    // below is inline CSS, so pagination needs no network at all.)
+    sheets.push({ 'orz-page.css': a.css }); // @page rules + element CSS — last so it wins
+    return sheets;
+}
+/** Assemble `source`, render async content, and paginate into `.orz-pages`. */
+async function render(source) {
+    const a = assemble(source);
+    lastAssembly = a;
+    // Stylesheets the document needs in <head> for fonts + math (and staging measurement).
+    // The active theme owns the document font: load its webfonts (lazily — only the
+    // active theme's, so a theme switch loads the new font, then re-paginates after
+    // document.fonts.ready). An explicit font_preset in the source still wins (its
+    // URL is in a.fontCssUrls and page CSS emits --font-body to override the theme).
+    const activeTheme = (themeOverride || a.theme);
+    const tf = THEME_FONTS[activeTheme];
+    if (tf) {
+        ensureLink(fontPreset(tf.body).cssUrl);
+        ensureLink(fontPreset(tf.heading).cssUrl);
+    }
+    a.fontCssUrls.forEach((u) => ensureLink(u));
+    if (cfg().katexCss)
+        ensureLink(cfg().katexCss, 'orz-katex');
+    if (cfg().hljsCss)
+        ensureLink(cfg().hljsCss, 'orz-hljs');
+    // Stage off-screen so diagrams render (and get real sizes) before pagination.
+    const stage = document.createElement('div');
+    stage.className = 'orz-stage';
+    stage.style.cssText = 'position:absolute;left:-99999px;top:0;width:680px;';
+    stage.innerHTML = a.bodyHtml;
+    document.body.appendChild(stage);
+    // Dynamic switch: collect the available choices (for the editor's live
+    // switcher) BEFORE resolving, then remove conditional content that doesn't
+    // match the effective choices (source `dynamic_choices` + live overrides).
+    lastDynOptions = collectDynamicChoices(stage);
+    lastDynChoices = { ...a.settings.dynamicChoices };
+    applyDynamicChoices(stage, lastDynChoices);
+    // Double-buffer: paginate into an off-screen container, then swap it in. The old
+    // pages stay visible until the swap, so a re-render never flashes to the top —
+    // and we restore the scroll position across the swap.
+    const out = document.createElement('div');
+    out.style.cssText = 'position:absolute;left:-99999px;top:0;width:900px;';
+    document.body.appendChild(out);
+    try {
+        await renderEnhancers(stage.querySelector('.orz-doc') || stage);
+        if (document.fonts && document.fonts.ready) {
+            try {
+                await document.fonts.ready;
+            }
+            catch { /* ignore */ }
+        }
+        await paginate(stage.innerHTML, stylesheetsFor(a), out);
+        const pages = pagesContainer();
+        const prevScroll = pages.scrollTop;
+        pages.replaceChildren(...Array.prototype.slice.call(out.childNodes));
+        pages.scrollTop = prevScroll;
+        // Clean front matter: renumber the body in JS (paged.js' page counter is
+        // unreliable across later page breaks). Each non-front page gets a sequential
+        // --orz-pageno (1, 2, …) that its page-number box reads; --orz-body-pages is
+        // the body total. Quote them — content var() interpolation needs a <string>.
+        if (a.settings.frontMatterClean) {
+            const allPages = Array.prototype.slice.call(pages.querySelectorAll('.pagedjs_page'));
+            const bodyPages = allPages.filter((p) => !p.classList.contains('pagedjs_orz-front_page'));
+            document.documentElement.style.setProperty('--orz-body-pages', `"${bodyPages.length}"`);
+            bodyPages.forEach((p, i) => p.style.setProperty('--orz-pageno', `"${i + 1}"`));
+        }
+        fillToc();
+        // let the editor re-fit the preview zoom to the pane (it owns the layout)
+        const hook = window.__orzPagedAfterRender;
+        if (hook) {
+            try {
+                hook();
+            }
+            catch { /* ignore */ }
+        }
+    }
+    finally {
+        stage.remove();
+        out.remove();
+    }
+}
+/** After pagination, fill `.orz-toc` placeholders with heading links + page numbers. */
+function fillToc() {
+    const pages = pagesContainer();
+    const tocNav = pages.querySelector('.orz-toc');
+    if (!tocNav)
+        return;
+    const maxLevel = Number(tocNav.getAttribute('data-max-level') || '3');
+    const items = [];
+    pages.querySelectorAll('.pagedjs_page h1, .pagedjs_page h2, .pagedjs_page h3, .pagedjs_page h4').forEach((h) => {
+        const level = Number(h.tagName.slice(1));
+        if (level > maxLevel)
+            return;
+        const page = h.closest('.pagedjs_page');
+        const pageNum = page ? page.getAttribute('data-page-number') || '' : '';
+        items.push(`<li class="orz-toc-item orz-toc-l${level}"><span class="orz-toc-text">${h.textContent || ''}</span>` +
+            `<span class="orz-toc-page">${pageNum}</span></li>`);
+    });
+    if (items.length)
+        tocNav.innerHTML = `<ol class="orz-toc-list">${items.join('')}</ol>`;
+}
+/* ---------- public API ---------- */
+const api = {
+    version: VERSION,
+    assemble,
+    /** Re-render from a (possibly edited) source. */
+    render: (source) => render(source),
+    /** Re-render from the embedded source. */
+    refresh: () => render(sourceText()),
+    /** Export to PDF via browser print. */
+    exportPdf: () => printDocument(),
+    /** Force a theme (editor picker); '' / 'none' clears the override. */
+    setTheme: (id) => { themeOverride = id && id !== 'none' ? id : null; return render(sourceText()); },
+    /** The theme currently in effect (the override, or the document's own theme). */
+    getTheme: () => themeOverride || (lastAssembly ? lastAssembly.theme : null),
+    /** Dynamic switch: the keys/values available + the effective choices (from the
+     *  source's `dynamic_choices`). The editor's switcher writes back to the source
+     *  so the dropdown and the nyml block always agree. */
+    getDynamicState: () => ({
+        options: lastDynOptions,
+        choices: lastDynChoices,
+    }),
+    /** The last assembly (resolved settings etc.) for the editor's settings panel. */
+    get assembly() { return lastAssembly; },
+    /** Read the embedded source. */
+    source: sourceText,
+};
+window.orzpaged = api;
+function boot() { render(sourceText()).catch((err) => console.error('[orz-paged]', err)); }
+if (document.readyState === 'loading')
+    document.addEventListener('DOMContentLoaded', boot);
+else
+    boot();

package/dist/cli.js

@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+/**
+ * orz-paged CLI (A5) — generate a self-contained `.paged.html` from Markdown.
+ *
+ *   orz-paged <input.md> [-o out.paged.html] [--inline|--cdn] [--title t]
+ *
+ * `--inline` (default) embeds the engine bundle + base/theme CSS; `--cdn`
+ * references the published `orz-paged-browser` on jsDelivr. Fonts, images, and the
+ * math/diagram libs always load from CDN at view time (DESIGN §4).
+ */
+import { readFileSync, writeFileSync, readdirSync, existsSync } from 'node:fs';
+import { dirname, join, basename, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { getBrowserRuntimeScript } from 'orz-markdown/runtime';
+import { PREVIEW_CDN } from 'orz-markdown/preview-frame';
+import { buildHtml } from './template.js';
+import { templateList } from './doc/templates.js';
+const HERE = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(HERE, '..');
+const selfVersion = JSON.parse(readFileSync(join(ROOT, 'package.json'), 'utf8')).version || '0.0.0';
+/** Pinned CDN assets used at view time — sourced from orz-markdown's shared
+ *  preview-frame helper so every host app loads identical, tested versions.
+ *  Paged is light-only, so highlight.js uses the light (github) stylesheet. */
+const CDN = {
+    katexCss: PREVIEW_CDN.katexCss,
+    mermaidJs: PREVIEW_CDN.mermaidJs,
+    smilesJs: PREVIEW_CDN.smilesJs,
+    chartJs: PREVIEW_CDN.chartJs,
+    hljsJs: PREVIEW_CDN.hljsJs,
+    hljsCss: PREVIEW_CDN.hljsLightCss,
+};
+function findAsset(rel) {
+    const p = join(ROOT, rel);
+    if (!existsSync(p))
+        throw new Error('missing asset: ' + rel + ' (run `npm run build` first)');
+    return p;
+}
+/** Drop a theme's `@import url("./base.css")` — base is inlined separately, so the
+ *  relative import points nowhere (404 on http; a fetch hazard on file://). */
+function stripBaseImport(css) {
+    return css.replace(/@import\s+url\(\s*['"]?\.\/base\.css['"]?\s*\)\s*;?/gi, '');
+}
+function loadThemes() {
+    const dir = findAsset('assets/themes');
+    const baseCss = readFileSync(join(dir, 'base.css'), 'utf8');
+    const themes = readdirSync(dir)
+        .filter((f) => f.endsWith('.css') && f !== 'base.css')
+        .map((f) => ({ id: f.replace(/\.css$/, ''), css: stripBaseImport(readFileSync(join(dir, f), 'utf8')) }));
+    return { baseCss, themes };
+}
+/** Load every template's starter skeleton from `assets/templates/<stem>.md`. */
+function loadTemplates() {
+    const dir = findAsset('assets/templates');
+    return templateList().map((t) => ({
+        id: t.id,
+        label: t.label,
+        description: t.description,
+        group: t.group,
+        skeleton: readFileSync(join(dir, t.skeleton + '.md'), 'utf8'),
+    }));
+}
+function parseArgs(argv) {
+    const a = { mode: 'inline' };
+    for (let i = 0; i < argv.length; i++) {
+        const arg = argv[i];
+        if (arg === '-o' || arg === '--out')
+            a.out = argv[++i];
+        else if (arg === '--inline')
+            a.mode = 'inline';
+        else if (arg === '--cdn')
+            a.mode = 'cdn';
+        else if (arg === '--title')
+            a.title = argv[++i];
+        else if (arg === '--template')
+            a.template = argv[++i];
+        else if (arg === '--new')
+            a.newDoc = argv[++i];
+        else if (arg === '--list-templates')
+            a.list = true;
+        else if (!arg.startsWith('-'))
+            a.input = arg;
+    }
+    return a;
+}
+/** Resolve a (possibly legacy) template name to its loaded skeleton, or exit. */
+function skeletonOrExit(name, templates) {
+    const t = templates.find((x) => x.id === name)
+        ?? templates.find((x) => x.id === name + '-section'); // legacy: article→article-section
+    if (!t) {
+        console.error(`Unknown template: ${name}\nKnown: ${templates.map((x) => x.id).join(', ')}`);
+        process.exit(1);
+    }
+    return t;
+}
+function main() {
+    const args = parseArgs(process.argv.slice(2));
+    const templates = loadTemplates();
+    // `--list-templates` — print the catalog and exit.
+    if (args.list) {
+        console.log('Templates (use --template <name> or --new <name>):\n');
+        let group = '';
+        for (const t of templates) {
+            if (t.group !== group) {
+                group = t.group;
+                console.log(`  ${group}`);
+            }
+            console.log(`    ${t.id.padEnd(16)} ${t.description}`);
+        }
+        return;
+    }
+    // `--new <name>` — scaffold the starter Markdown to a .md file (then edit it).
+    if (args.newDoc) {
+        const t = skeletonOrExit(args.newDoc, templates);
+        const outMd = args.out ? resolve(args.out) : resolve(t.id + '.md');
+        writeFileSync(outMd, t.skeleton, 'utf8');
+        console.log(`Wrote ${outMd} (starter for "${t.label}")`);
+        return;
+    }
+    // Source = an input file, or a template skeleton via `--template <name>`.
+    let source;
+    let base;
+    if (args.input) {
+        source = readFileSync(resolve(args.input), 'utf8');
+        base = basename(resolve(args.input)).replace(/\.(md|markdown)$/i, '');
+    }
+    else if (args.template) {
+        const t = skeletonOrExit(args.template, templates);
+        source = t.skeleton;
+        base = t.id;
+    }
+    else {
+        console.error('Usage: orz-paged <input.md> [-o out.paged.html] [--inline|--cdn] [--title t]\n' +
+            '       orz-paged --template <name> [-o out.paged.html]   # scaffold + render a starter\n' +
+            '       orz-paged --new <name> [-o out.md]                # write a starter .md to edit\n' +
+            '       orz-paged --list-templates');
+        process.exit(1);
+    }
+    const inDir = args.input ? dirname(resolve(args.input)) : process.cwd();
+    const outPath = args.out ? resolve(args.out) : join(inDir, base + '.paged.html');
+    const title = args.title || base;
+    const { baseCss, themes } = loadThemes();
+    const appJs = readFileSync(findAsset('assets/app.js'), 'utf8');
+    const runtime = getBrowserRuntimeScript(); // copy-as-Markdown (+ qr) from orz-markdown
+    let renderer;
+    if (args.mode === 'cdn') {
+        renderer = { mode: 'cdn', src: `https://cdn.jsdelivr.net/npm/orz-paged-browser@${selfVersion}/orz-paged.browser.js` };
+    }
+    else {
+        renderer = { mode: 'inline', js: readFileSync(findAsset('dist/orz-paged.browser.js'), 'utf8') };
+    }
+    const html = buildHtml({
+        source,
+        title,
+        rendererVersion: selfVersion,
+        renderer,
+        baseCss,
+        themes,
+        defaultTheme: themes.some((t) => t.id === 'light-neat-1') ? 'light-neat-1' : (themes[0]?.id ?? 'none'),
+        templates,
+        cdn: CDN,
+        appJs,
+        runtime,
+    });
+    writeFileSync(outPath, html, 'utf8');
+    console.log(`Wrote ${outPath} (${args.mode}, ${themes.length} themes)`);
+}
+main();

package/dist/doc/dynamic.js

@@ -0,0 +1,57 @@
+/**
+ * Dynamic switch — conditional content driven by the `dynamic_choices` document
+ * setting. Elements carry `data-show-when="key=value"` / `data-hide-when="key=value"`;
+ * at render time non-matching ones are removed and the attribute is stripped from
+ * those that stay. One source can then print several versions (e.g. an exam with
+ * `answer-key: hide` for students and `show` for the instructor key).
+ *
+ * Operates on a live DOM (browser render) so nested removals are correct.
+ */
+/** Normalize a choice key: lowercase, hyphens → underscores (matches settings). */
+export function normalizeChoiceKey(key) {
+    return key.trim().toLowerCase().replace(/-/g, '_');
+}
+function parseCond(raw) {
+    const eq = raw.indexOf('=');
+    if (eq < 0)
+        return { key: normalizeChoiceKey(raw), value: '' };
+    return { key: normalizeChoiceKey(raw.slice(0, eq)), value: raw.slice(eq + 1).trim() };
+}
+/**
+ * Resolve every `data-show-when` / `data-hide-when` under `root` against
+ * `choices`, mutating the DOM in place: drop non-matching elements, strip the
+ * attribute from the rest.
+ */
+export function applyDynamicChoices(root, choices) {
+    Array.prototype.forEach.call(root.querySelectorAll('[data-show-when]'), (el) => {
+        const { key, value } = parseCond(el.getAttribute('data-show-when') || '');
+        if (choices[key] === value)
+            el.removeAttribute('data-show-when');
+        else
+            el.remove();
+    });
+    Array.prototype.forEach.call(root.querySelectorAll('[data-hide-when]'), (el) => {
+        const { key, value } = parseCond(el.getAttribute('data-hide-when') || '');
+        if (choices[key] === value)
+            el.remove();
+        else
+            el.removeAttribute('data-hide-when');
+    });
+}
+/**
+ * Collect the dynamic keys present under `root` and the set of values each is
+ * used with — for building a live switcher UI. Returns key → sorted values.
+ */
+export function collectDynamicChoices(root) {
+    const sets = {};
+    for (const attr of ['data-show-when', 'data-hide-when']) {
+        Array.prototype.forEach.call(root.querySelectorAll('[' + attr + ']'), (el) => {
+            const { key, value } = parseCond(el.getAttribute(attr) || '');
+            (sets[key] = sets[key] || new Set()).add(value);
+        });
+    }
+    const out = {};
+    for (const k of Object.keys(sets))
+        out[k] = Array.from(sets[k]).sort();
+    return out;
+}