@commentray/render 0.0.4 → 0.0.5

package/dist/code-browser.js

@@ -3,78 +3,109 @@ import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { MARKER_ID_BODY, buildBlockScrollLinks, } from "@commentray/core";
 import { tryBuildBlockStretchTableHtml } from "./block-stretch-layout.js";
+import { formatCommentrayBuiltAtLocal } from "./build-stamp.js";
 import { escapeHtml } from "./html-utils.js";
+import { renderHighlightedCodeLineRows } from "./highlighted-code-lines.js";
 import { mermaidRuntimeScriptHtml } from "./mermaid-runtime-html.js";
-import { renderFencedCode, renderMarkdownToHtml, } from "./markdown-pipeline.js";
+import { renderMarkdownToHtml } from "./markdown-pipeline.js";
+import { commentrayRenderVersion } from "./package-version.js";
 function renderGeneratorMetaHtml(label) {
     const t = label?.trim();
     if (!t)
         return "";
     return `<meta name="generator" content="${escapeHtml(t)}" />\n    `;
 }
-function extractPreCodeInner(html) {
-    const m = /<pre(?:\s[^>]*)?>\s*<code(?:\s[^>]*)?>([\s\S]*?)<\/code>\s*<\/pre>/i.exec(html.trim());
-    return m ? m[1] : escapeHtml(html);
-}
 /** Single capture: marker id (avoid a wrapping group around the whole comment — that shifted indices). */
 const BLOCK_MARKER_HTML_LINE = new RegExp(`^<!--\\s*commentray:block\\s+id=(${MARKER_ID_BODY})\\s*-->$`, "i");
-/** Inserts thin separator anchors after each `<!-- commentray:block … -->` line (optional index attrs for scroll sync). */
-function injectCommentrayBlockAnchors(markdown, links) {
-    const byId = links ? new Map(links.map((l) => [l.id, l])) : undefined;
-    return markdown
-        .split("\n")
-        .map((line) => {
-        const m = BLOCK_MARKER_HTML_LINE.exec(line);
-        if (!m?.[1])
-            return line;
-        const id = m[1];
-        const link = byId?.get(id);
-        const attrs = link !== undefined
-            ? ` data-source-start="${String(link.sourceStart)}" data-commentray-line="${String(link.commentrayLine)}"`
-            : "";
-        return `${line}\n\n<div id="commentray-block-${escapeHtml(id)}" class="commentray-block-anchor" aria-hidden="true"${attrs}></div>`;
-    })
-        .join("\n");
+function trimEndSpacesTabs(s) {
+    return s.replace(/[ \t]+$/, "");
 }
-/** One highlighted row per source line so in-page search can scroll to a line. */
-async function renderCodeLineBlocks(code, language) {
-    const lines = code.split("\n");
-    const langAttr = escapeHtml(language);
-    const parts = [];
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i] === "" ? " " : lines[i];
-        const fence = "```" + language + "\n" + line + "\n```\n";
-        const block = await renderFencedCode(fence);
-        const inner = extractPreCodeInner(block);
-        const num = i + 1;
-        parts.push(`<div class="code-line" id="code-line-${i}" data-line="${i}">` +
-            `<span class="ln" aria-hidden="true">${num}</span>` +
-            `<pre><code class="hljs language-${langAttr}">${inner}</code></pre>` +
-            `</div>`);
-    }
-    return parts.join("\n");
+function isSetextUnderlineLine(line) {
+    const t = trimEndSpacesTabs(line);
+    return /^\s{0,3}=+\s*$/.test(t) || /^\s{0,3}-+\s*$/.test(t);
+}
+function isThematicBreakLine(line) {
+    const t = trimEndSpacesTabs(line);
+    return (/^\s{0,3}(?:\*[ \t]*){3,}\s*$/.test(t) ||
+        /^\s{0,3}(?:-[ \t]*){3,}\s*$/.test(t) ||
+        /^\s{0,3}(?:_[ \t]*){3,}\s*$/.test(t));
+}
+function parseFenceDelimiter(line) {
+    const t = trimEndSpacesTabs(line);
+    const m = /^(\s{0,3})(`{3,}|~{3,})(.*)$/.exec(t);
+    if (!m)
+        return null;
+    const run = m[2];
+    const head = run[0];
+    if (head !== "`" && head !== "~")
+        return null;
+    const ch = head === "`" ? "`" : "~";
+    return { ch, runLen: run.length, rest: m[3] ?? "" };
+}
+function isClosingFenceLine(info, open) {
+    if (info.ch !== open.ch || info.runLen < open.len)
+        return false;
+    return info.rest.trim() === "";
 }
-/** Split a repo-relative path into its directory prefix (with trailing slash) and basename. */
-function splitFilePath(p) {
-    const normalized = p.replaceAll("\\", "/").replace(/^\/+/, "");
-    const idx = normalized.lastIndexOf("/");
-    if (idx < 0)
-        return { dir: "", base: normalized };
-    return { dir: normalized.slice(0, idx + 1), base: normalized.slice(idx + 1) };
+function lineAnchorHtml(mdLine0) {
+    const mdLine = String(mdLine0);
+    return `<span class="commentray-line-anchor" data-commentray-md-line="${mdLine}" id="commentray-md-line-${mdLine}" aria-hidden="true"></span>`;
 }
-function renderFilePathLabel(filePath, fallbackTitle) {
-    const shown = (filePath ?? "").trim();
-    if (!shown) {
-        return `<strong class="file-path file-path--title">${escapeHtml(fallbackTitle)}</strong>`;
+function appendMdLineAnchorWhenAllowed(line, mdLine0) {
+    if (isSetextUnderlineLine(line) || isThematicBreakLine(line))
+        return line;
+    /** Blank lines must stay blank: a line that is only `<span …>` breaks CommonMark HTML / paragraph starts after block markers. */
+    if (line === "")
+        return "";
+    return `${line}${lineAnchorHtml(mdLine0)}`;
+}
+/**
+ * Inserts per-line anchors for search / hash jumps and block separator anchors after each
+ * `<!-- commentray:block … -->` line (optional index attrs).
+ *
+ * Anchors are appended to the line when safe. A **leading** `<span>` breaks CommonMark block
+ * recognition (`#` headings, lists, thematic breaks, fences). Fenced code lines must not get a
+ * trailing anchor either (would corrupt fence delimiters or appear inside code).
+ */
+function injectCommentrayDocAnchors(markdown, links) {
+    const byId = links ? new Map(links.map((l) => [l.id, l])) : undefined;
+    const lines = markdown.split("\n");
+    let fence = null;
+    const out = [];
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const delim = parseFenceDelimiter(line);
+        if (fence) {
+            if (delim && isClosingFenceLine(delim, fence)) {
+                fence = null;
+                out.push(line);
+                continue;
+            }
+            out.push(line);
+            continue;
+        }
+        if (delim) {
+            fence = { ch: delim.ch, len: delim.runLen };
+            out.push(line);
+            continue;
+        }
+        const m = BLOCK_MARKER_HTML_LINE.exec(line);
+        if (m?.[1]) {
+            const id = m[1];
+            const link = byId?.get(id);
+            const attrs = link !== undefined
+                ? ` data-source-start="${String(link.sourceStart)}" data-commentray-line="${String(link.commentrayLine)}"`
+                : "";
+            /** One `push` with embedded `\n\n` merged poorly with `join("\\n")`; keep real blank lines around raw `<div>`. */
+            out.push(`${line}${lineAnchorHtml(i)}`);
+            out.push("");
+            out.push(`<div id="commentray-block-${escapeHtml(id)}" class="commentray-block-anchor" aria-hidden="true"${attrs}></div>`);
+            out.push("");
+            continue;
+        }
+        out.push(appendMdLineAnchorWhenAllowed(line, i));
     }
-    const { dir, base } = splitFilePath(shown);
-    const dirHtml = dir
-        ? `<span class="file-path__dir">${escapeHtml(dir)}</span>`
-        : `<span class="file-path__dir file-path__dir--root" title="Repository root">/ </span>`;
-    return (`<strong class="file-path" title="${escapeHtml(shown)}">` +
-        dirHtml +
-        `<span class="file-path__base">${escapeHtml(base)}</span>` +
-        `</strong>`);
+    return out.join("\n");
 }
 /** GitHub “mark” glyph (Octicons-style path), MIT-licensed silhouette. */
 const GITHUB_MARK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="currentColor" aria-hidden="true">' +
@@ -88,7 +119,7 @@ function safeExternalHttpUrl(url) {
         return null;
     return t;
 }
-function buildToolbarEndHtml(githubRepoUrl, toolHomeUrl) {
+function buildToolbarEndHtml(githubRepoUrl, toolHomeUrl, commentrayRenderSemver) {
     const gh = safeExternalHttpUrl(githubRepoUrl);
     const tool = safeExternalHttpUrl(toolHomeUrl);
     const bits = [];
@@ -98,12 +129,20 @@ function buildToolbarEndHtml(githubRepoUrl, toolHomeUrl) {
     }
     if (tool) {
         const te = escapeHtml(tool);
-        bits.push(`<span class="toolbar-attribution" role="note">Rendered with <a href="${te}" target="_blank" rel="noopener noreferrer">Commentray</a></span>`);
+        const ver = escapeHtml(commentrayRenderSemver);
+        bits.push(`<span class="toolbar-attribution" role="note">Rendered with <a href="${te}" target="_blank" rel="noopener noreferrer">Commentray</a> <span class="toolbar-attribution__version" translate="no">v${ver}</span></span>`);
     }
     if (bits.length === 0)
         return "";
     return `<div class="toolbar__end">${bits.join("")}</div>`;
 }
+function renderPageFooterHtml(builtAt) {
+    const iso = builtAt.toISOString();
+    const human = formatCommentrayBuiltAtLocal(builtAt);
+    return (`<footer class="app__footer" role="contentinfo">` +
+        `<p class="app__footer-line">HTML generated <time datetime="${escapeHtml(iso)}">${escapeHtml(human)}</time></p>` +
+        `</footer>`);
+}
 function renderRelatedGithubNavHtml(links) {
     if (links.length === 0)
         return "";
@@ -114,34 +153,50 @@ function renderRelatedGithubNavHtml(links) {
         `</nav>`);
 }
 function renderToolbarDocHubHtml(opts) {
-    const parts = [];
-    const src = safeExternalHttpUrl(opts.sourceOnGithubUrl);
-    const cr = safeExternalHttpUrl(opts.commentrayOnGithubUrl);
     const nav = opts.documentedNavJsonUrl?.trim();
     const hasEmbed = (opts.documentedPairsEmbeddedB64?.trim() ?? "").length > 0;
     const showDocumentedTree = Boolean(nav) || hasEmbed;
-    if (src) {
-        parts.push(`<a class="toolbar-blob-link" href="${escapeHtml(src)}" target="_blank" rel="noopener noreferrer">Source on GitHub</a>`);
-    }
-    if (cr) {
-        parts.push(`<a class="toolbar-blob-link" href="${escapeHtml(cr)}" target="_blank" rel="noopener noreferrer">Commentray on GitHub</a>`);
-    }
-    if (showDocumentedTree) {
-        const navAttr = nav ? escapeHtml(nav) : "";
-        parts.push(`<button type="button" class="toolbar-tree-toggle" id="documented-files-toggle" aria-expanded="false" aria-controls="documented-files-panel" data-nav-json-url="${navAttr}">Documented files</button>`);
-    }
-    const toolbarDocHubHtml = parts.length > 0
-        ? `<div class="toolbar-doc-hub">${parts.join('<span class="toolbar-doc-hub__sep" aria-hidden="true"> · </span>')}</div>`
-        : "";
-    const documentedPanelHtml = showDocumentedTree
-        ? `<div id="documented-files-panel" class="documented-files-panel" hidden>
-        <div class="documented-files-panel__inner">
-          <p class="documented-files-panel__hint">Indexed source ↔ commentray pairs (embedded for offline when available). Links open on GitHub.</p>
+    const toolbarDocHubHtml = "";
+    const navAttr = escapeHtml(nav ?? "");
+    const navRailDocumentedHtml = showDocumentedTree
+        ? `<details class="nav-rail__doc-hub" id="documented-files-hub" data-nav-json-url="${navAttr}">
+        <summary class="nav-rail__doc-hub-summary">Documented files</summary>
+        <div class="nav-rail__doc-hub-inner">
           <div id="documented-files-tree" class="documented-files-tree" role="tree"></div>
         </div>
-      </div>`
+      </details>`
         : "";
-    return { toolbarDocHubHtml, documentedPanelHtml };
+    return { toolbarDocHubHtml, navRailDocumentedHtml };
+}
+function renderNavRailContextHtml(filePath, commentrayPath, opts) {
+    const fpRaw = (filePath ?? "").trim();
+    const crRaw = (commentrayPath ?? "").trim();
+    const srcUrl = safeExternalHttpUrl(opts?.sourceOnGithubUrl);
+    const crUrl = safeExternalHttpUrl(opts?.commentrayOnGithubUrl);
+    if (fpRaw.length === 0 && crRaw.length === 0 && srcUrl === null && crUrl === null) {
+        return "";
+    }
+    const fp = escapeHtml(fpRaw);
+    const cr = escapeHtml(crRaw);
+    const fpDisp = fpRaw.length > 0 ? fp : "—";
+    const crDisp = crRaw.length > 0 ? cr : "—";
+    const srcGh = srcUrl !== null
+        ? `<a class="nav-rail__pair-gh" id="toolbar-source-github" href="${escapeHtml(srcUrl)}" target="_blank" rel="noopener noreferrer" aria-label="Source file on GitHub" title="Open source on GitHub">${GITHUB_MARK_SVG}</a>`
+        : "";
+    const crGh = crUrl !== null
+        ? `<a class="nav-rail__pair-gh" id="toolbar-commentray-github" href="${escapeHtml(crUrl)}" target="_blank" rel="noopener noreferrer" aria-label="Companion commentray on GitHub" title="Open companion Markdown on GitHub">${GITHUB_MARK_SVG}</a>`
+        : "";
+    return `<div class="nav-rail__context nav-rail__context--compact" aria-label="Current documentation pair">
+    <span class="nav-rail__pair">
+      <span class="nav-rail__pair-lab">Src</span>
+      <span class="nav-rail__pair-path" title="${fp}">${fpDisp}</span>${srcGh}
+    </span>
+    <span class="nav-rail__pair-sep" aria-hidden="true">·</span>
+    <span class="nav-rail__pair">
+      <span class="nav-rail__pair-lab">Doc</span>
+      <span class="nav-rail__pair-path nav-rail__pair-path--secondary" title="${cr}">${crDisp}</span>${crGh}
+    </span>
+  </div>`;
 }
 /** IIFE produced by `npm run build -w @commentray/render` (esbuild of `code-browser-client.ts`). */
 function loadCodeBrowserClientBundle() {
@@ -159,6 +214,220 @@ const CODE_BROWSER_STYLES = `
       :root { color-scheme: light dark; }
       * { box-sizing: border-box; }
       body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
+      .app {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        height: 100vh;
+        width: 100%;
+        overflow: hidden;
+      }
+      .app__chrome {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding: 8px 12px 10px;
+        border-bottom: 1px solid color-mix(in oklab, CanvasText 15%, Canvas);
+        background: color-mix(in oklab, CanvasText 4%, Canvas);
+        max-height: min(40vh, 420px);
+        min-height: 0;
+        overflow: auto;
+      }
+      .chrome__search-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: nowrap;
+      }
+      .chrome__search-row input[type="search"] {
+        flex: 1 1 auto;
+        min-width: 140px;
+        padding: 8px 10px;
+        font: inherit;
+        font-size: 14px;
+        border-radius: 8px;
+        border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas);
+        background: Canvas;
+        color: CanvasText;
+      }
+      .chrome__search-row #search-clear {
+        flex: 0 0 auto;
+        font: inherit;
+        padding: 6px 14px;
+        border-radius: 8px;
+        cursor: pointer;
+        border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas);
+        background: color-mix(in oklab, CanvasText 6%, Canvas);
+        color: CanvasText;
+      }
+      .chrome__search-label {
+        flex: 0 0 auto;
+        white-space: nowrap;
+      }
+      .nav-rail__context--compact {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px 10px;
+        padding: 5px 10px;
+        border-radius: 8px;
+        border: 1px solid color-mix(in oklab, CanvasText 14%, Canvas);
+        background: Canvas;
+        font-size: 12px;
+        line-height: 1.3;
+      }
+      .nav-rail__pair {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+        flex: 1 1 140px;
+        max-width: min(48%, 100%);
+      }
+      .nav-rail__pair-lab {
+        flex: 0 0 auto;
+        font-size: 9px;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        opacity: 0.72;
+      }
+      .nav-rail__pair-path {
+        flex: 1 1 auto;
+        min-width: 0;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+        font-size: 11px;
+        color: CanvasText;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .nav-rail__pair-path--secondary { opacity: 0.88; }
+      .nav-rail__pair-sep {
+        flex: 0 0 auto;
+        opacity: 0.45;
+        user-select: none;
+        padding: 0 2px;
+      }
+      .nav-rail__pair-gh {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 6px;
+        border: 1px solid color-mix(in oklab, CanvasText 20%, Canvas);
+        background: color-mix(in oklab, CanvasText 5%, Canvas);
+        color: CanvasText;
+      }
+      .nav-rail__pair-gh:hover {
+        background: color-mix(in oklab, CanvasText 10%, Canvas);
+      }
+      .nav-rail__pair-gh:focus-visible {
+        outline: 2px solid color-mix(in oklab, CanvasText 45%, Canvas);
+        outline-offset: 2px;
+      }
+      .nav-rail__pair-gh svg {
+        width: 14px;
+        height: 14px;
+        display: block;
+      }
+      .toolbar .nav-rail__context--compact {
+        border: 0;
+        background: transparent;
+        padding: 0;
+        flex: 1 1 200px;
+        min-width: 0;
+        max-width: none;
+        gap: 6px 10px;
+      }
+      .toolbar .nav-rail__pair {
+        flex: 1 1 auto;
+        min-width: 0;
+        max-width: min(44vw, 420px);
+      }
+      .nav-rail__search-label {
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        opacity: 0.8;
+      }
+      .nav-rail__search-hint {
+        margin: 0;
+        font-size: 11px;
+        line-height: 1.35;
+        opacity: 0.78;
+      }
+      .nav-rail__code {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+        font-size: 10px;
+      }
+      .nav-rail__doc-hub {
+        position: relative;
+        flex: 0 0 auto;
+        align-self: center;
+        display: block;
+        border: 1px solid color-mix(in oklab, CanvasText 16%, Canvas);
+        border-radius: 6px;
+        background: Canvas;
+        overflow: visible;
+      }
+      .nav-rail__doc-hub-summary {
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 600;
+        padding: 4px 10px;
+        list-style: none;
+        user-select: none;
+        line-height: 1.35;
+      }
+      .nav-rail__doc-hub-summary::-webkit-details-marker { display: none; }
+      .nav-rail__doc-hub-inner {
+        position: absolute;
+        left: 0;
+        top: calc(100% + 4px);
+        z-index: 60;
+        min-width: min(280px, 78vw);
+        max-width: min(440px, 94vw);
+        max-height: min(52vh, 400px);
+        overflow: auto;
+        padding: 8px 10px;
+        font-size: 12px;
+        border: 1px solid color-mix(in oklab, CanvasText 16%, Canvas);
+        border-radius: 8px;
+        background: Canvas;
+        box-shadow: 0 8px 28px color-mix(in oklab, CanvasText 12%, transparent);
+      }
+      .nav-rail__doc-hub-hint {
+        margin: 0 0 8px;
+        opacity: 0.78;
+        line-height: 1.4;
+        font-size: 12px;
+      }
+      .app__main {
+        flex: 1 1 auto;
+        min-width: 0;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+      }
+      .app__footer {
+        flex: 0 0 auto;
+        padding: 6px 12px 10px;
+        border-top: 1px solid color-mix(in oklab, CanvasText 12%, Canvas);
+        background: color-mix(in oklab, CanvasText 3%, Canvas);
+        font-size: 11px;
+        line-height: 1.4;
+        color: color-mix(in oklab, CanvasText 72%, Canvas);
+      }
+      .app__footer-line { margin: 0; }
+      .app__footer time { font-variant-numeric: tabular-nums; }
       .toolbar {
         display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 12px;
         border-bottom: 1px solid color-mix(in oklab, CanvasText 18%, Canvas);
@@ -166,7 +435,7 @@ const CODE_BROWSER_STYLES = `
       }
       .toolbar__main {
         display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
-        flex: 1 1 280px;
+        flex: 0 1 auto;
         min-width: 0;
       }
       .toolbar__end {
@@ -215,45 +484,24 @@ const CODE_BROWSER_STYLES = `
         word-break: break-word;
       }
       .toolbar-related__sep { opacity: 0.55; user-select: none; }
-      .toolbar-doc-hub {
-        display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
-        font-size: 12px; line-height: 1.35;
-        color: color-mix(in oklab, CanvasText 88%, Canvas);
-      }
-      .toolbar-doc-hub__sep { opacity: 0.45; user-select: none; }
-      .toolbar-blob-link {
-        color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px;
-        white-space: nowrap;
-      }
-      .toolbar-tree-toggle {
-        font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px; cursor: pointer;
-        border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas);
-        background: color-mix(in oklab, CanvasText 6%, Canvas); color: CanvasText;
+      .documented-files-tree ul { list-style: none; margin: 0; padding-left: 12px; }
+      .documented-files-tree > ul { padding-left: 0; }
+      .documented-files-tree li { margin: 2px 0; line-height: 1.35; }
+      .documented-files-tree .tree-dir { font-weight: 600; margin-top: 4px; font-size: 12px; }
+      .documented-files-tree .tree-file {
+        margin: 3px 0;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+        font-size: 11px;
       }
-      .toolbar-tree-toggle:hover { background: color-mix(in oklab, CanvasText 11%, Canvas); }
-      .documented-files-panel {
-        flex: 0 0 auto; max-height: min(42vh, 360px); overflow: auto;
-        border-bottom: 1px solid color-mix(in oklab, CanvasText 12%, Canvas);
-        background: color-mix(in oklab, CanvasText 4%, Canvas);
+      .documented-files-tree .tree-file-link {
+        color: inherit;
+        font-weight: 500;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        word-break: break-word;
       }
-      .documented-files-panel__inner { padding: 10px 14px 14px; font-size: 13px; }
-      .documented-files-panel__hint { margin: 0 0 10px; opacity: 0.82; line-height: 1.4; }
-      .documented-files-panel__code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; font-size: 12px; }
-      .documented-files-tree ul { list-style: none; margin: 0; padding-left: 14px; }
-      .documented-files-tree > ul { padding-left: 0; }
-      .documented-files-tree li { margin: 2px 0; line-height: 1.4; }
-      .documented-files-tree .tree-dir { font-weight: 600; margin-top: 6px; }
-      .documented-files-tree .tree-file { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 4px 0; }
-      .documented-files-tree .tree-file-name { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; font-size: 12px; }
-      .documented-files-tree .tree-file-links { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; }
-      .documented-files-tree .tree-file-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
-      .toolbar .search-field {
-        display: inline-flex; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 160px;
-      }
-      .toolbar .search-field input[type="search"] {
-        flex: 1; min-width: 0; padding: 4px 8px; font: inherit; border-radius: 6px;
-        border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas); background: Canvas;
-        color: CanvasText;
+      .documented-files-tree .tree-file-link:hover {
+        opacity: 0.92;
       }
       .toolbar button {
         font: inherit; padding: 4px 10px; border-radius: 6px; cursor: pointer;
@@ -261,23 +509,45 @@ const CODE_BROWSER_STYLES = `
         color: CanvasText;
       }
       .search-results {
-        flex: 0 0 auto; max-height: 160px; overflow: auto; padding: 6px 12px 8px;
-        border-bottom: 1px solid color-mix(in oklab, CanvasText 12%, Canvas);
-        font-size: 12px;
+        flex: 0 1 auto;
+        min-height: 0;
+        max-height: min(320px, 38vh);
+        overflow: auto;
+        padding: 8px 8px 10px;
+        border-radius: 8px;
+        border: 1px solid color-mix(in oklab, CanvasText 12%, Canvas);
+        background: Canvas;
+        font-size: 13px;
       }
       .search-results[hidden] { display: none !important; }
-      .search-results .hint { opacity: 0.75; margin-bottom: 6px; }
+      .search-results .hint { opacity: 0.75; margin-bottom: 8px; line-height: 1.45; }
       .search-results button.hit {
-        display: block; width: 100%; text-align: left; margin: 2px 0; padding: 6px 8px;
+        display: block; width: 100%; text-align: left; margin: 4px 0; padding: 8px 10px;
         border-radius: 6px; border: 1px solid color-mix(in oklab, CanvasText 14%, Canvas);
         background: color-mix(in oklab, CanvasText 5%, Canvas); color: CanvasText; cursor: pointer;
         font: inherit;
       }
       .search-results button.hit:hover { background: color-mix(in oklab, CanvasText 10%, Canvas); }
-      .search-results button.hit .meta { opacity: 0.8; font-size: 11px; }
-      .search-results button.hit .src-tag { opacity: 0.75; font-weight: 500; font-size: 10px; }
-      .search-results button.hit .snippet { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; font-size: 11px; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
+      .search-results button.hit .meta { opacity: 0.8; font-size: 12px; }
+      .search-results button.hit .src-tag { opacity: 0.75; font-weight: 500; font-size: 11px; }
+      .search-results button.hit .snippet {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; font-size: 13px;
+        line-height: 1.45; white-space: pre-wrap; word-break: break-word; margin-top: 4px;
+      }
+      .search-results mark.search-hit {
+        padding: 0 2px; border-radius: 3px; font: inherit;
+        background: color-mix(in oklab, #f5a623 70%, Canvas);
+        color: CanvasText;
+        box-decoration-break: clone;
+        -webkit-box-decoration-break: clone;
+      }
+      @media (prefers-color-scheme: dark) {
+        .search-results mark.search-hit {
+          background: color-mix(in oklab, #c9a227 55%, Canvas);
+        }
+      }
       .shell { display: flex; flex-direction: row; flex: 1; min-height: 0; }
+      .app__main .shell { flex: 1 1 auto; }
       .pane--code {
         flex: 0 0 50%;
         min-width: 120px; overflow: auto; padding: 12px 16px;
@@ -285,12 +555,12 @@ const CODE_BROWSER_STYLES = `
         --code-line-font-size: 13px;
         --code-line-height: 1.5;
       }
+      .pane--code .code-line-stack { --code-ln-min-ch: 3; }
       .pane--code .code-line {
         display: grid;
-        /* max-content: column wide enough for the longest line number (avoids 100+ bleeding into code). */
         grid-template-columns: max-content 1fr;
-        column-gap: 12px;
-        align-items: baseline;
+        column-gap: 10px;
+        align-items: start;
       }
       .pane--code .code-line pre {
         margin: 0;
@@ -316,6 +586,8 @@ const CODE_BROWSER_STYLES = `
         white-space: nowrap;
         font-size: var(--code-line-font-size);
         line-height: var(--code-line-height);
+        min-width: calc(var(--code-ln-min-ch, 3) * 1ch + 0.6ch);
+        box-sizing: content-box;
       }
       .pane--code .code-line:target .ln,
       .pane--code .code-line:hover .ln {
@@ -336,10 +608,27 @@ const CODE_BROWSER_STYLES = `
         content: ""; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px;
       }
       .pane--doc {
-        flex: 1 1 auto; min-width: 120px; overflow: auto; padding: 12px 16px;
+        flex: 1 1 auto; min-width: 0; min-height: 0;
+        display: flex; flex-direction: column; overflow: hidden; padding: 12px 16px;
+      }
+      .doc-pane-body {
+        flex: 1 1 auto; min-height: 0; overflow: auto;
+      }
+      .toolbar-angle-picker {
+        display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
+        font-size: 12px; color: color-mix(in oklab, CanvasText 88%, Canvas);
+      }
+      .toolbar-angle-picker select {
+        font: inherit; font-size: 12px; padding: 3px 8px; border-radius: 6px;
+        border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas); background: Canvas; color: CanvasText;
       }
       .pane--doc { font-size: 15px; line-height: 1.45; }
       .pane--doc img { max-width: 100%; height: auto; }
+      .pane--doc .commentray-line-anchor {
+        display: inline;
+        vertical-align: baseline;
+        scroll-margin-top: 10px;
+      }
       .pane--doc .commentray-block-anchor {
         display: block;
         height: 0;
@@ -349,7 +638,6 @@ const CODE_BROWSER_STYLES = `
         pointer-events: none;
       }
       .pane h2.pane-title { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
-      .app { display: flex; flex-direction: column; height: 100vh; }
       .shell--stretch-rows {
         flex: 1;
         min-height: 0;
@@ -413,6 +701,7 @@ const CODE_BROWSER_STYLES = `
         font-size: var(--code-line-font-size, 13px);
         line-height: var(--code-line-height, 1.5);
       }
+      .block-stretch .code-line-stack { --code-ln-min-ch: 3; }
       .block-stretch .code-line .ln {
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
         font-variant-numeric: tabular-nums;
@@ -425,6 +714,8 @@ const CODE_BROWSER_STYLES = `
         white-space: nowrap;
         font-size: var(--code-line-font-size, 13px);
         line-height: var(--code-line-height, 1.5);
+        min-width: calc(var(--code-ln-min-ch, 3) * 1ch + 0.6ch);
+        box-sizing: content-box;
       }
       .block-stretch.wrap .code-line pre,
       .block-stretch.wrap .code-line pre code { white-space: pre-wrap; word-break: break-word; }
@@ -439,6 +730,8 @@ const CODE_BROWSER_STYLES = `
       }
       .block-stretch-headings .pane-title { margin: 0; }
 `;
+/** Native tooltip on #search-q (short hint is visible under the search row). */
+const CODE_BROWSER_SEARCH_INPUT_TITLE = "Filename, path, or words. Matches this pair (source + commentray lines) first; merges commentray-nav-search.json when the export includes it (indexed paths + commentray lines).";
 function buildCodeBrowserPageHtml(p) {
     const shellClass = p.layout === "stretch" ? "shell shell--stretch-rows" : "shell";
     return `<!doctype html>
@@ -455,26 +748,34 @@ ${CODE_BROWSER_STYLES}
   </head>
   <body>
     <div class="app">
-      <header class="toolbar" aria-label="View options">
-        <div class="toolbar__main">
-          ${p.filePathHtml}
-          ${p.toolbarDocHubHtml}
-          <span class="search-field">
-            <label for="search-q">Search</label>
-            <input type="search" id="search-q" placeholder="${escapeHtml(p.searchPlaceholder)}" autocomplete="off" spellcheck="false" />
-            <button type="button" id="search-clear" title="Clear search">Clear</button>
-          </span>
-          ${p.relatedNavHtml}
-          <label><input type="checkbox" id="wrap-lines" /> Wrap code lines</label>
+      <header class="app__chrome" role="region" aria-label="Search and navigation">
+        <div class="chrome__search-row">
+          <label class="chrome__search-label nav-rail__search-label" for="search-q">Search</label>
+          <input type="search" id="search-q" placeholder="${escapeHtml(p.searchPlaceholder)}" title="${escapeHtml(CODE_BROWSER_SEARCH_INPUT_TITLE)}" autocomplete="off" spellcheck="false" />
+          <button type="button" id="search-clear" title="Clear search">Clear</button>
         </div>
-        ${p.toolbarEndHtml}
+        <div class="search-results" id="search-results" hidden aria-live="polite"></div>
+        <p class="nav-rail__search-hint chrome__search-hint">This pair + merged <code class="nav-rail__code">commentray-nav-search.json</code> when the export ships it.</p>
       </header>
-      ${p.documentedPanelHtml}
-      <div class="search-results" id="search-results" hidden aria-live="polite"></div>
-      <div class="${shellClass}" id="shell" data-layout="${p.layout}" data-raw-code-b64="${escapeHtml(p.rawCodeB64)}" data-raw-md-b64="${escapeHtml(p.rawMdB64)}" data-scroll-block-links-b64="${escapeHtml(p.scrollBlockLinksB64)}"${p.shellDocumentedPairsAttr}${p.shellSearchAttrs}>
+      <div class="app__main">
+        <header class="toolbar" aria-label="View options">
+          <div class="toolbar__main">
+            ${p.navRailContextHtml}
+            ${p.navRailDocumentedHtml}
+            ${p.angleSelectHtml}
+            ${p.toolbarDocHubHtml}
+            ${p.relatedNavHtml}
+            <label><input type="checkbox" id="wrap-lines" /> Wrap code lines</label>
+          </div>
+          ${p.toolbarEndHtml}
+        </header>
+        <div class="${shellClass}" id="shell" data-layout="${p.layout}" data-raw-code-b64="${escapeHtml(p.rawCodeB64)}" data-raw-md-b64="${escapeHtml(p.rawMdB64)}" data-scroll-block-links-b64="${escapeHtml(p.scrollBlockLinksB64)}"${p.shellDocumentedPairsAttr}${p.shellSearchAttrs}>
 ${p.shellInner}
+        </div>
       </div>
+      ${p.pageFooterHtml}
     </div>
+    <script type="text/plain" id="commentray-multi-angle-b64">${p.multiAngleScriptBlock}</script>
     <script>
 ${loadCodeBrowserClientBundle()}
     </script>
@@ -482,10 +783,94 @@ ${loadCodeBrowserClientBundle()}
   </body>
 </html>`;
 }
+async function buildMultiAngleDualPaneShell(opts, multi) {
+    const defaultId = multi.angles.some((a) => a.id === multi.defaultAngleId)
+        ? multi.defaultAngleId
+        : (multi.angles[0]?.id ?? "main");
+    const jsonAngles = [];
+    let defaultMarkdown = opts.commentrayMarkdown;
+    let defaultScrollB64 = "";
+    let defaultPathSearch = (opts.commentrayPathForSearch ?? "").trim();
+    let defaultGh = opts.commentrayOnGithubUrl;
+    let defaultPaneHtml = "";
+    const codeHtml = await renderHighlightedCodeLineRows(opts.code, opts.language);
+    for (const spec of multi.angles) {
+        const rows = spec.blockStretchRows;
+        const links = rows !== undefined
+            ? buildBlockScrollLinks(rows.index, rows.sourceRelative, rows.commentrayPathRel, spec.markdown, opts.code)
+            : [];
+        const mdForDoc = injectCommentrayDocAnchors(spec.markdown, links.length > 0 ? links : undefined);
+        const scrollB64 = links.length > 0 ? Buffer.from(JSON.stringify(links), "utf8").toString("base64") : "";
+        const commentrayHtml = await renderMarkdownToHtml(mdForDoc, {
+            commentrayOutputUrls: opts.commentrayOutputUrls,
+        });
+        if (spec.id === defaultId) {
+            defaultMarkdown = spec.markdown;
+            defaultScrollB64 = scrollB64;
+            defaultPathSearch = spec.commentrayPathRel.trim();
+            defaultGh = spec.commentrayOnGithubUrl;
+            defaultPaneHtml = commentrayHtml;
+        }
+        jsonAngles.push({
+            id: spec.id,
+            title: spec.title?.trim() || spec.id,
+            docInnerHtmlB64: Buffer.from(commentrayHtml, "utf8").toString("base64"),
+            rawMdB64: Buffer.from(spec.markdown, "utf8").toString("base64"),
+            scrollBlockLinksB64: scrollB64,
+            commentrayPathForSearch: spec.commentrayPathRel.trim(),
+            commentrayOnGithubUrl: spec.commentrayOnGithubUrl,
+        });
+    }
+    const selOpts = multi.angles
+        .map((a) => {
+        const lab = escapeHtml(a.title?.trim() || a.id);
+        return `<option value="${escapeHtml(a.id)}"${a.id === defaultId ? " selected" : ""}>${lab}</option>`;
+    })
+        .join("");
+    const angleSelectHtml = `<span class="toolbar-angle-picker"><label for="angle-select">Angle</label><select id="angle-select" aria-label="Commentray angle">${selOpts}</select></span>`;
+    const shellInner = `        <section class="pane--code" id="code-pane" aria-label="Source code">` +
+        `<h2 class="pane-title">Code</h2>\n` +
+        `          ${codeHtml}\n` +
+        `        </section>\n` +
+        `        <div class="gutter" id="gutter" role="separator" aria-orientation="vertical" aria-label="Resize panes"></div>\n` +
+        `        <section class="pane--doc commentray" id="doc-pane" aria-label="Commentray">\n` +
+        `          <h2 class="pane-title">Commentray</h2>\n` +
+        `          <div id="doc-pane-body" class="doc-pane-body">\n` +
+        `          ${defaultPaneHtml}\n` +
+        `          </div>\n` +
+        `        </section>\n`;
+    const payloadObj = { defaultAngleId: defaultId, angles: jsonAngles };
+    const multiAnglePayloadB64 = Buffer.from(JSON.stringify(payloadObj), "utf8").toString("base64");
+    return {
+        shellInner,
+        multiShell: {
+            rawMdB64: Buffer.from(defaultMarkdown, "utf8").toString("base64"),
+            scrollBlockLinksB64: defaultScrollB64,
+            commentrayPathForSearch: defaultPathSearch,
+            commentrayOnGithubUrl: defaultGh,
+        },
+        angleSelectHtml,
+        multiAnglePayloadB64,
+    };
+}
 async function buildCodeBrowserShell(opts, layoutPref) {
     let layout = "dual";
     let shellInner = "";
     let scrollBlockLinksB64 = "";
+    const multi = opts.multiAngleBrowsing;
+    const multiActive = Boolean(multi && multi.angles.length >= 2);
+    if (multiActive && multi) {
+        const built = await buildMultiAngleDualPaneShell(opts, multi);
+        const ms = built.multiShell;
+        return {
+            layout: "dual",
+            shellInner: built.shellInner,
+            scrollBlockLinksB64: ms.scrollBlockLinksB64,
+            angleSelectHtml: built.angleSelectHtml,
+            multiAnglePayloadB64: built.multiAnglePayloadB64,
+            multiShell: ms,
+        };
+    }
     if (opts.blockStretchRows && layoutPref !== "dual") {
         const stretched = await tryBuildBlockStretchTableHtml({
             code: opts.code,
@@ -511,12 +896,12 @@ async function buildCodeBrowserShell(opts, layoutPref) {
         const links = opts.blockStretchRows !== undefined
             ? buildBlockScrollLinks(opts.blockStretchRows.index, opts.blockStretchRows.sourceRelative, opts.blockStretchRows.commentrayPathRel, opts.commentrayMarkdown, opts.code)
             : [];
-        const mdForDoc = injectCommentrayBlockAnchors(opts.commentrayMarkdown, links.length > 0 ? links : undefined);
+        const mdForDoc = injectCommentrayDocAnchors(opts.commentrayMarkdown, links.length > 0 ? links : undefined);
         if (links.length > 0) {
             scrollBlockLinksB64 = Buffer.from(JSON.stringify(links), "utf8").toString("base64");
         }
         const [codeHtml, commentrayHtml] = await Promise.all([
-            renderCodeLineBlocks(opts.code, opts.language),
+            renderHighlightedCodeLineRows(opts.code, opts.language),
             renderMarkdownToHtml(mdForDoc, {
                 commentrayOutputUrls: opts.commentrayOutputUrls,
             }),
@@ -529,20 +914,29 @@ async function buildCodeBrowserShell(opts, layoutPref) {
                 `        <div class="gutter" id="gutter" role="separator" aria-orientation="vertical" aria-label="Resize panes"></div>\n` +
                 `        <section class="pane--doc commentray" id="doc-pane" aria-label="Commentray">\n` +
                 `          <h2 class="pane-title">Commentray</h2>\n` +
+                `          <div id="doc-pane-body" class="doc-pane-body">\n` +
                 `          ${commentrayHtml}\n` +
+                `          </div>\n` +
                 `        </section>\n`;
     }
-    return { layout, shellInner, scrollBlockLinksB64 };
+    return {
+        layout,
+        shellInner,
+        scrollBlockLinksB64,
+        angleSelectHtml: "",
+        multiAnglePayloadB64: "",
+    };
 }
-function searchChromeFromOptions(opts) {
+function searchChromeFromOptions(opts, commentrayPathOverride) {
+    const crPath = (commentrayPathOverride ?? opts.commentrayPathForSearch ?? "").trim();
     if (opts.staticSearchScope === "commentray-and-paths") {
         return {
-            searchPlaceholder: "Commentray + file paths (ordered tokens + fuzzy lines)…",
-            shellSearchAttrs: ` data-search-scope="commentray-and-paths" data-search-file-path="${escapeHtml(opts.filePath ?? "")}" data-search-commentray-path="${escapeHtml((opts.commentrayPathForSearch ?? "").trim())}"`,
+            searchPlaceholder: "Filename, path, or keywords…",
+            shellSearchAttrs: ` data-search-scope="commentray-and-paths" data-search-file-path="${escapeHtml(opts.filePath ?? "")}" data-search-commentray-path="${escapeHtml(crPath)}"`,
         };
     }
     return {
-        searchPlaceholder: "Whole source (ordered tokens + fuzzy lines)…",
+        searchPlaceholder: "Filename, path, or keywords…",
         shellSearchAttrs: "",
     };
 }
@@ -552,6 +946,32 @@ function shellDocumentedPairsAttrFromOptions(opts) {
         return "";
     return ` data-documented-pairs-b64="${escapeHtml(emb)}"`;
 }
+function codeBrowserPageTitle(opts) {
+    return opts.title ?? opts.filePath ?? "Commentray";
+}
+function codeBrowserHljsThemes(opts) {
+    const hljs = opts.hljsTheme ?? "github";
+    const hljsDark = opts.hljsTheme?.includes("dark") ? opts.hljsTheme : "github-dark";
+    return { hljs, hljsDark };
+}
+function toolbarCommentrayGithubFromShell(shell, opts) {
+    return shell.multiShell?.commentrayOnGithubUrl ?? opts.commentrayOnGithubUrl;
+}
+function rawMdB64FromShell(shell, opts) {
+    return (shell.multiShell?.rawMdB64 ?? Buffer.from(opts.commentrayMarkdown, "utf8").toString("base64"));
+}
+function navRailCommentrayPathFromShell(shell, opts) {
+    const trimmed = (shell.multiShell?.commentrayPathForSearch ??
+        opts.commentrayPathForSearch ??
+        "").trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+}
+function shellSearchAttrsWithNavJson(shellSearchAttrsBase, documentedNavJsonUrl) {
+    const navJson = documentedNavJsonUrl?.trim() ?? "";
+    if (navJson.length === 0)
+        return shellSearchAttrsBase;
+    return `${shellSearchAttrsBase} data-nav-search-json-url="${escapeHtml(navJson)}"`;
+}
 /**
  * Static HTML shell for a minimal “code browser”: code + rendered commentray,
  * draggable vertical splitter, togglable line wrap for the code pane, and
@@ -559,35 +979,42 @@ function shellDocumentedPairsAttrFromOptions(opts) {
  */
 export async function renderCodeBrowserHtml(opts) {
     const rawCodeB64 = Buffer.from(opts.code, "utf8").toString("base64");
-    const rawMdB64 = Buffer.from(opts.commentrayMarkdown, "utf8").toString("base64");
-    const title = opts.title ?? opts.filePath ?? "Commentray";
-    const filePathHtml = renderFilePathLabel(opts.filePath, title);
-    const toolbarEndHtml = buildToolbarEndHtml(opts.githubRepoUrl, opts.toolHomeUrl);
-    const hljs = opts.hljsTheme ?? "github";
-    const hljsDark = opts.hljsTheme?.includes("dark") ? opts.hljsTheme : "github-dark";
+    const title = codeBrowserPageTitle(opts);
+    const builtAt = opts.builtAt ?? new Date();
+    const renderSemver = commentrayRenderVersion();
+    const toolbarEndHtml = buildToolbarEndHtml(opts.githubRepoUrl, opts.toolHomeUrl, renderSemver);
+    const pageFooterHtml = renderPageFooterHtml(builtAt);
+    const { hljs, hljsDark } = codeBrowserHljsThemes(opts);
     const mermaidScript = mermaidRuntimeScriptHtml(opts.includeMermaidRuntime);
     const relatedNavHtml = renderRelatedGithubNavHtml(opts.relatedGithubNav ?? []);
     const generatorMetaHtml = renderGeneratorMetaHtml(opts.generatorLabel);
-    const { toolbarDocHubHtml, documentedPanelHtml } = renderToolbarDocHubHtml({
-        sourceOnGithubUrl: opts.sourceOnGithubUrl,
-        commentrayOnGithubUrl: opts.commentrayOnGithubUrl,
+    const layoutPref = opts.codeBrowserLayout ?? "auto";
+    const shell = await buildCodeBrowserShell(opts, layoutPref);
+    const { toolbarDocHubHtml, navRailDocumentedHtml } = renderToolbarDocHubHtml({
         documentedNavJsonUrl: opts.documentedNavJsonUrl,
         documentedPairsEmbeddedB64: opts.documentedPairsEmbeddedB64,
     });
-    const layoutPref = opts.codeBrowserLayout ?? "auto";
-    const { layout, shellInner, scrollBlockLinksB64 } = await buildCodeBrowserShell(opts, layoutPref);
-    const { searchPlaceholder, shellSearchAttrs } = searchChromeFromOptions(opts);
+    const rawMdB64 = rawMdB64FromShell(shell, opts);
+    const scrollBlockLinksB64 = shell.scrollBlockLinksB64;
+    const { searchPlaceholder, shellSearchAttrs: shellSearchAttrsBase } = searchChromeFromOptions(opts, shell.multiShell?.commentrayPathForSearch);
     const shellDocumentedPairsAttr = shellDocumentedPairsAttrFromOptions(opts);
+    const shellSearchAttrs = shellSearchAttrsWithNavJson(shellSearchAttrsBase, opts.documentedNavJsonUrl);
+    const navRailContextHtml = renderNavRailContextHtml(opts.filePath, navRailCommentrayPathFromShell(shell, opts), {
+        sourceOnGithubUrl: opts.sourceOnGithubUrl,
+        commentrayOnGithubUrl: toolbarCommentrayGithubFromShell(shell, opts),
+    });
     return buildCodeBrowserPageHtml({
         title,
         generatorMetaHtml,
-        filePathHtml,
+        navRailContextHtml,
+        angleSelectHtml: shell.angleSelectHtml,
         toolbarDocHubHtml,
-        documentedPanelHtml,
+        navRailDocumentedHtml,
         relatedNavHtml,
         toolbarEndHtml,
-        layout,
-        shellInner,
+        pageFooterHtml,
+        layout: shell.layout,
+        shellInner: shell.shellInner,
         rawCodeB64,
         rawMdB64,
         scrollBlockLinksB64,
@@ -597,6 +1024,7 @@ export async function renderCodeBrowserHtml(opts) {
         mermaidScript,
         searchPlaceholder,
         shellSearchAttrs,
+        multiAngleScriptBlock: shell.multiAnglePayloadB64,
     });
 }
 //# sourceMappingURL=code-browser.js.map