@commentray/render 0.0.5 → 0.0.6

package/dist/code-browser.js

@@ -15,10 +15,29 @@ function renderGeneratorMetaHtml(label) {
         return "";
     return `<meta name="generator" content="${escapeHtml(t)}" />\n    `;
 }
+const META_DESCRIPTION_MAX_LEN = 320;
+function codeBrowserMetaDescription(opts, title) {
+    const custom = opts.metaDescription?.trim();
+    if (custom)
+        return custom.slice(0, META_DESCRIPTION_MAX_LEN);
+    const fallback = `${title} — Side-by-side source and commentray documentation.`;
+    return fallback.slice(0, META_DESCRIPTION_MAX_LEN);
+}
+function renderMetaDescriptionHtml(opts, title) {
+    const content = codeBrowserMetaDescription(opts, title);
+    return `<meta name="description" content="${escapeHtml(content)}" />\n    `;
+}
 /** 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");
 function trimEndSpacesTabs(s) {
-    return s.replace(/[ \t]+$/, "");
+    let end = s.length;
+    while (end > 0) {
+        const c = s[end - 1];
+        if (c !== " " && c !== "\t")
+            break;
+        end--;
+    }
+    return s.slice(0, end);
 }
 function isSetextUnderlineLine(line) {
     const t = trimEndSpacesTabs(line);
@@ -111,6 +130,10 @@ function injectCommentrayDocAnchors(markdown, links) {
 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">' +
     '<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>' +
     "</svg>";
+/** Simple home glyph for same-site hub link (matches Octocat control size). */
+const SITE_HOME_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">' +
+    '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>' +
+    "</svg>";
 function safeExternalHttpUrl(url) {
     const t = url?.trim();
     if (!t)
@@ -119,11 +142,28 @@ function safeExternalHttpUrl(url) {
         return null;
     return t;
 }
-function buildToolbarEndHtml(githubRepoUrl, toolHomeUrl, commentrayRenderSemver) {
+/** Allows relative static browse links (`./browse/…`) and `http(s):` URLs; rejects `javascript:` / `data:`. */
+function safeToolbarNavigationHref(url) {
+    const t = url?.trim();
+    if (!t)
+        return null;
+    if (/^(javascript|data):/i.test(t))
+        return null;
+    return t;
+}
+function buildToolbarSiteHubHtml(siteHubUrl) {
+    const site = safeToolbarNavigationHref(siteHubUrl);
+    if (!site)
+        return "";
+    const se = escapeHtml(site);
+    return `<a class="toolbar-github" href="${se}" aria-label="Documentation home" title="Back to this site (hub)">${SITE_HOME_SVG}</a>`;
+}
+function buildToolbarEndHtml(githubRepoUrl, toolHomeUrl, commentrayRenderSemver, siteHubUrl) {
+    const site = safeToolbarNavigationHref(siteHubUrl);
     const gh = safeExternalHttpUrl(githubRepoUrl);
     const tool = safeExternalHttpUrl(toolHomeUrl);
     const bits = [];
-    if (gh) {
+    if (!site && gh) {
         const he = escapeHtml(gh);
         bits.push(`<a class="toolbar-github" href="${he}" target="_blank" rel="noopener noreferrer" aria-label="View repository on GitHub" title="View repository on GitHub">${GITHUB_MARK_SVG}</a>`);
     }
@@ -160,8 +200,12 @@ function renderToolbarDocHubHtml(opts) {
     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>
+        <summary class="nav-rail__doc-hub-summary">Comment-rayed files</summary>
         <div class="nav-rail__doc-hub-inner">
+          <div class="nav-rail__doc-hub-filter-row">
+            <label class="nav-rail__doc-hub-filter-label" for="documented-files-filter">Filter</label>
+            <input type="search" id="documented-files-filter" class="nav-rail__doc-hub-filter" placeholder="Filter by path…" autocomplete="off" spellcheck="false" />
+          </div>
           <div id="documented-files-tree" class="documented-files-tree" role="tree"></div>
         </div>
       </details>`
@@ -173,19 +217,22 @@ function renderNavRailContextHtml(filePath, commentrayPath, opts) {
     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) {
+    const browseForCr = safeToolbarNavigationHref(opts?.commentrayStaticBrowseUrl);
+    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 = browseForCr !== null
+        ? `<a class="nav-rail__pair-gh" id="toolbar-commentray-github" href="${escapeHtml(browseForCr)}" rel="noopener" aria-label="Open companion pair in the site viewer" title="Open on site">${GITHUB_MARK_SVG}</a>`
+        : 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>`
+            : "";
+    if (fpRaw.length === 0 && crRaw.length === 0 && srcGh === "" && crGh === "") {
         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>
@@ -194,7 +241,7 @@ function renderNavRailContextHtml(filePath, commentrayPath, opts) {
     <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 class="nav-rail__pair-path nav-rail__pair-path--secondary" id="nav-rail-doc-path" title="${cr}">${crDisp}</span>${crGh}
     </span>
   </div>`;
 }
@@ -211,9 +258,60 @@ function loadCodeBrowserClientBundle() {
     throw new Error("Missing code-browser-client.bundle.js. Run `npm run build -w @commentray/render` to bundle the browser client.");
 }
 const CODE_BROWSER_STYLES = `
-      :root { color-scheme: light dark; }
+      :root {
+        color-scheme: light dark;
+        --cr-control-h: 32px;
+        --cr-control-radius: 8px;
+        --cr-icon-inner: 18px;
+        --cr-label-caps-fs: 10px;
+        --cr-label-caps-track: 0.06em;
+        --cr-ui-fs: 12px;
+      }
       * { box-sizing: border-box; }
       body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
+      .skip-link {
+        position: absolute;
+        left: -9999px;
+        top: 0;
+        z-index: 10000;
+        padding: 8px 16px;
+        margin: 0;
+        font: inherit;
+        font-size: 14px;
+        text-decoration: none;
+        border-radius: 8px;
+        border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas);
+        background: Canvas;
+        color: CanvasText;
+      }
+      .skip-link:focus {
+        left: 12px;
+        top: 8px;
+        outline: 2px solid color-mix(in oklab, CanvasText 45%, Canvas);
+        outline-offset: 2px;
+      }
+      .skip-link:focus:not(:focus-visible) {
+        left: -9999px;
+        top: 0;
+        outline: none;
+      }
+      .skip-link:focus-visible {
+        left: 12px;
+        top: 8px;
+        outline: 2px solid color-mix(in oklab, CanvasText 45%, Canvas);
+        outline-offset: 2px;
+      }
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
       .app {
         display: flex;
         flex-direction: column;
@@ -244,10 +342,12 @@ const CODE_BROWSER_STYLES = `
       .chrome__search-row input[type="search"] {
         flex: 1 1 auto;
         min-width: 140px;
-        padding: 8px 10px;
+        min-height: var(--cr-control-h);
+        padding: 0 12px;
         font: inherit;
-        font-size: 14px;
-        border-radius: 8px;
+        font-size: var(--cr-ui-fs);
+        line-height: 1.25;
+        border-radius: var(--cr-control-radius);
         border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas);
         background: Canvas;
         color: CanvasText;
@@ -255,13 +355,21 @@ const CODE_BROWSER_STYLES = `
       .chrome__search-row #search-clear {
         flex: 0 0 auto;
         font: inherit;
-        padding: 6px 14px;
-        border-radius: 8px;
+        font-size: var(--cr-ui-fs);
+        font-weight: 500;
+        min-height: var(--cr-control-h);
+        padding: 0 16px;
+        border-radius: var(--cr-control-radius);
         cursor: pointer;
         border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas);
         background: color-mix(in oklab, CanvasText 6%, Canvas);
         color: CanvasText;
       }
+      .chrome__search-row input[type="search"]:focus-visible,
+      .chrome__search-row #search-clear:focus-visible {
+        outline: 2px solid color-mix(in oklab, CanvasText 45%, Canvas);
+        outline-offset: 2px;
+      }
       .chrome__search-label {
         flex: 0 0 auto;
         white-space: nowrap;
@@ -273,10 +381,10 @@ const CODE_BROWSER_STYLES = `
         align-items: center;
         gap: 6px 10px;
         padding: 5px 10px;
-        border-radius: 8px;
+        border-radius: var(--cr-control-radius);
         border: 1px solid color-mix(in oklab, CanvasText 14%, Canvas);
         background: Canvas;
-        font-size: 12px;
+        font-size: var(--cr-ui-fs);
         line-height: 1.3;
       }
       .nav-rail__pair {
@@ -290,9 +398,9 @@ const CODE_BROWSER_STYLES = `
       }
       .nav-rail__pair-lab {
         flex: 0 0 auto;
-        font-size: 9px;
+        font-size: var(--cr-label-caps-fs);
         font-weight: 700;
-        letter-spacing: 0.06em;
+        letter-spacing: var(--cr-label-caps-track);
         text-transform: uppercase;
         opacity: 0.72;
       }
@@ -300,7 +408,7 @@ const CODE_BROWSER_STYLES = `
         flex: 1 1 auto;
         min-width: 0;
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
-        font-size: 11px;
+        font-size: var(--cr-ui-fs);
         color: CanvasText;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -318,9 +426,9 @@ const CODE_BROWSER_STYLES = `
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 26px;
-        height: 26px;
-        border-radius: 6px;
+        width: var(--cr-control-h);
+        height: var(--cr-control-h);
+        border-radius: var(--cr-control-radius);
         border: 1px solid color-mix(in oklab, CanvasText 20%, Canvas);
         background: color-mix(in oklab, CanvasText 5%, Canvas);
         color: CanvasText;
@@ -333,8 +441,8 @@ const CODE_BROWSER_STYLES = `
         outline-offset: 2px;
       }
       .nav-rail__pair-gh svg {
-        width: 14px;
-        height: 14px;
+        width: var(--cr-icon-inner);
+        height: var(--cr-icon-inner);
         display: block;
       }
       .toolbar .nav-rail__context--compact {
@@ -352,11 +460,11 @@ const CODE_BROWSER_STYLES = `
         max-width: min(44vw, 420px);
       }
       .nav-rail__search-label {
-        font-size: 11px;
+        font-size: var(--cr-label-caps-fs);
         font-weight: 700;
-        letter-spacing: 0.05em;
+        letter-spacing: var(--cr-label-caps-track);
         text-transform: uppercase;
-        opacity: 0.8;
+        opacity: 0.78;
       }
       .nav-rail__search-hint {
         margin: 0;
@@ -374,18 +482,22 @@ const CODE_BROWSER_STYLES = `
         align-self: center;
         display: block;
         border: 1px solid color-mix(in oklab, CanvasText 16%, Canvas);
-        border-radius: 6px;
+        border-radius: var(--cr-control-radius);
         background: Canvas;
         overflow: visible;
       }
       .nav-rail__doc-hub-summary {
         cursor: pointer;
-        font-size: 12px;
+        font-size: var(--cr-ui-fs);
         font-weight: 600;
-        padding: 4px 10px;
+        padding: 0 12px;
+        min-height: var(--cr-control-h);
+        display: inline-flex;
+        align-items: center;
+        box-sizing: border-box;
         list-style: none;
         user-select: none;
-        line-height: 1.35;
+        line-height: 1.25;
       }
       .nav-rail__doc-hub-summary::-webkit-details-marker { display: none; }
       .nav-rail__doc-hub-inner {
@@ -396,7 +508,10 @@ const CODE_BROWSER_STYLES = `
         min-width: min(280px, 78vw);
         max-width: min(440px, 94vw);
         max-height: min(52vh, 400px);
-        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        overflow: hidden;
         padding: 8px 10px;
         font-size: 12px;
         border: 1px solid color-mix(in oklab, CanvasText 16%, Canvas);
@@ -404,6 +519,33 @@ const CODE_BROWSER_STYLES = `
         background: Canvas;
         box-shadow: 0 8px 28px color-mix(in oklab, CanvasText 12%, transparent);
       }
+      .nav-rail__doc-hub-filter-row {
+        flex: 0 0 auto;
+      }
+      .nav-rail__doc-hub-filter-label {
+        display: block;
+        font-size: var(--cr-label-caps-fs);
+        font-weight: 700;
+        letter-spacing: var(--cr-label-caps-track);
+        text-transform: uppercase;
+        opacity: 0.78;
+        margin-bottom: 4px;
+      }
+      .nav-rail__doc-hub-filter {
+        width: 100%;
+        box-sizing: border-box;
+        font: inherit;
+        font-size: 12px;
+        padding: 4px 8px;
+        border-radius: 6px;
+        border: 1px solid color-mix(in oklab, CanvasText 22%, Canvas);
+        background: color-mix(in oklab, CanvasText 4%, Canvas);
+        color: CanvasText;
+      }
+      .nav-rail__doc-hub-filter:focus {
+        outline: 2px solid color-mix(in oklab, CanvasText 40%, Canvas);
+        outline-offset: 1px;
+      }
       .nav-rail__doc-hub-hint {
         margin: 0 0 8px;
         opacity: 0.78;
@@ -429,9 +571,11 @@ const CODE_BROWSER_STYLES = `
       .app__footer-line { margin: 0; }
       .app__footer time { font-variant-numeric: tabular-nums; }
       .toolbar {
+        position: relative;
         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);
-        font-size: 13px; flex: 0 0 auto;
+        font-size: var(--cr-ui-fs);
+        flex: 0 0 auto;
       }
       .toolbar__main {
         display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
@@ -445,22 +589,49 @@ const CODE_BROWSER_STYLES = `
       }
       .toolbar-github {
         display: inline-flex; align-items: center; justify-content: center;
-        width: 34px; height: 34px; border-radius: 8px;
+        width: var(--cr-control-h);
+        height: var(--cr-control-h);
+        border-radius: var(--cr-control-radius);
         border: 1px solid color-mix(in oklab, CanvasText 22%, Canvas);
         background: color-mix(in oklab, CanvasText 6%, Canvas);
         color: CanvasText;
       }
+      .toolbar-github svg {
+        width: var(--cr-icon-inner);
+        height: var(--cr-icon-inner);
+        display: block;
+      }
       .toolbar-github:hover { background: color-mix(in oklab, CanvasText 11%, Canvas); }
       .toolbar-github:focus-visible { outline: 2px solid color-mix(in oklab, CanvasText 45%, Canvas); outline-offset: 2px; }
       .toolbar-attribution {
-        font-size: 11px; line-height: 1.35; opacity: 0.82; max-width: min(360px, 42vw);
-        text-align: right; color: color-mix(in oklab, CanvasText 88%, Canvas);
+        font-size: var(--cr-ui-fs);
+        line-height: 1.35;
+        opacity: 0.85;
+        max-width: min(360px, 42vw);
+        text-align: right;
+        color: color-mix(in oklab, CanvasText 88%, Canvas);
       }
       .toolbar-attribution a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
       .toolbar label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
+      .toolbar__main > label:has(#wrap-lines) {
+        margin: 0;
+        min-height: var(--cr-control-h);
+        padding: 0 12px 0 10px;
+        border-radius: var(--cr-control-radius);
+        border: 1px solid color-mix(in oklab, CanvasText 16%, Canvas);
+        background: color-mix(in oklab, CanvasText 4%, Canvas);
+        font-size: var(--cr-ui-fs);
+        font-weight: 500;
+        gap: 8px;
+      }
+      .toolbar label input:focus-visible {
+        outline: 2px solid color-mix(in oklab, CanvasText 45%, Canvas);
+        outline-offset: 2px;
+      }
       .toolbar .file-path {
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
-        font-size: 13px; font-weight: 500;
+        font-size: var(--cr-ui-fs);
+        font-weight: 500;
         display: inline-flex; align-items: baseline; gap: 0; margin-right: 4px;
         max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
       }
@@ -474,7 +645,9 @@ const CODE_BROWSER_STYLES = `
       .toolbar .file-path--title { font-weight: 600; }
       .toolbar-related {
         display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
-        max-width: min(520px, 90vw); font-size: 12px; line-height: 1.35;
+        max-width: min(520px, 90vw);
+        font-size: var(--cr-ui-fs);
+        line-height: 1.35;
         color: color-mix(in oklab, CanvasText 88%, Canvas);
       }
       .toolbar-related__prefix { font-weight: 600; opacity: 0.85; white-space: nowrap; }
@@ -484,6 +657,11 @@ const CODE_BROWSER_STYLES = `
         word-break: break-word;
       }
       .toolbar-related__sep { opacity: 0.55; user-select: none; }
+      #documented-files-tree {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: auto;
+      }
       .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; }
@@ -504,8 +682,15 @@ const CODE_BROWSER_STYLES = `
         opacity: 0.92;
       }
       .toolbar button {
-        font: inherit; padding: 4px 10px; border-radius: 6px; cursor: pointer;
-        border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas); background: color-mix(in oklab, CanvasText 6%, Canvas);
+        font: inherit;
+        font-size: var(--cr-ui-fs);
+        font-weight: 500;
+        min-height: var(--cr-control-h);
+        padding: 0 12px;
+        border-radius: var(--cr-control-radius);
+        cursor: pointer;
+        border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas);
+        background: color-mix(in oklab, CanvasText 6%, Canvas);
         color: CanvasText;
       }
       .search-results {
@@ -600,8 +785,30 @@ const CODE_BROWSER_STYLES = `
         white-space: pre;
       }
       .gutter {
-        flex: 0 0 8px; cursor: col-resize; background: color-mix(in oklab, CanvasText 12%, Canvas);
+        flex: 0 0 14px; cursor: col-resize; background: color-mix(in oklab, CanvasText 12%, Canvas);
         position: relative;
+        --commentray-ray-accent: #3b7dd8;
+      }
+      @media (prefers-color-scheme: dark) {
+        .gutter { --commentray-ray-accent: #6eb0ff; }
+      }
+      .gutter__rays {
+        position: absolute; inset: 0; pointer-events: none; z-index: 1;
+      }
+      .gutter__rays svg { width: 100%; height: 100%; display: block; overflow: visible; }
+      .gutter__rays-path {
+        fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke;
+        stroke: color-mix(in oklab, var(--commentray-ray-accent) 72%, CanvasText);
+        stroke-width: 1.35px; opacity: 0.26;
+      }
+      .gutter__rays-path--active {
+        stroke-width: 2.4px; opacity: 0.88;
+      }
+      .gutter__rays-path--trail {
+        stroke-dasharray: 3 4; opacity: 0.42;
+      }
+      .gutter__rays-path--active.gutter__rays-path--trail {
+        opacity: 0.72;
       }
       .gutter:hover { background: color-mix(in oklab, CanvasText 22%, Canvas); }
       .gutter::after {
@@ -615,12 +822,33 @@ const CODE_BROWSER_STYLES = `
         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);
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        flex: 0 0 auto;
+        color: color-mix(in oklab, CanvasText 88%, Canvas);
+      }
+      .toolbar-angle-picker > label {
+        font-size: var(--cr-label-caps-fs);
+        font-weight: 700;
+        letter-spacing: var(--cr-label-caps-track);
+        text-transform: uppercase;
+        opacity: 0.72;
       }
       .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;
+        font: inherit;
+        font-size: var(--cr-ui-fs);
+        min-height: var(--cr-control-h);
+        height: var(--cr-control-h);
+        padding: 0 10px;
+        border-radius: var(--cr-control-radius);
+        border: 1px solid color-mix(in oklab, CanvasText 25%, Canvas);
+        background: Canvas;
+        color: CanvasText;
+      }
+      .toolbar-angle-picker select:focus-visible {
+        outline: 2px solid color-mix(in oklab, CanvasText 45%, Canvas);
+        outline-offset: 2px;
       }
       .pane--doc { font-size: 15px; line-height: 1.45; }
       .pane--doc img { max-width: 100%; height: auto; }
@@ -637,7 +865,6 @@ const CODE_BROWSER_STYLES = `
         border-top: 1px solid color-mix(in oklab, CanvasText 22%, Canvas);
         pointer-events: none;
       }
-      .pane h2.pane-title { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
       .shell--stretch-rows {
         flex: 1;
         min-height: 0;
@@ -721,14 +948,6 @@ const CODE_BROWSER_STYLES = `
       .block-stretch.wrap .code-line pre code { white-space: pre-wrap; word-break: break-word; }
       .block-stretch:not(.wrap) .code-line pre,
       .block-stretch:not(.wrap) .code-line pre code { white-space: pre; }
-      .block-stretch-headings {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0 16px;
-        padding: 4px 12px 8px;
-        border-bottom: 1px solid color-mix(in oklab, CanvasText 10%, Canvas);
-      }
-      .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).";
@@ -739,7 +958,7 @@ function buildCodeBrowserPageHtml(p) {
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    ${p.generatorMetaHtml}<title>${escapeHtml(p.title)}</title>
+    ${p.metaDescriptionHtml}${p.generatorMetaHtml}<title>${escapeHtml(p.title)}</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/${escapeHtml(p.hljs)}.min.css" media="(prefers-color-scheme: light)" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/${escapeHtml(p.hljsDark)}.min.css" media="(prefers-color-scheme: dark)" />
     <style>
@@ -747,8 +966,22 @@ ${CODE_BROWSER_STYLES}
     </style>
   </head>
   <body>
+    <a class="skip-link" href="#main-content">Skip to main content</a>
     <div class="app">
-      <header class="app__chrome" role="region" aria-label="Search and navigation">
+      <header class="toolbar" role="banner" aria-label="View options">
+        <h1 class="sr-only">${escapeHtml(p.title)}</h1>
+        <div class="toolbar__main">
+          ${p.toolbarSiteHubHtml}
+          ${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>
+      <header class="app__chrome" role="region" aria-label="Search">
         <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" />
@@ -757,22 +990,11 @@ ${CODE_BROWSER_STYLES}
         <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>
-      <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>
+      <main id="main-content" class="app__main" tabindex="-1">
         <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>
+      </main>
       ${p.pageFooterHtml}
     </div>
     <script type="text/plain" id="commentray-multi-angle-b64">${p.multiAngleScriptBlock}</script>
@@ -783,6 +1005,31 @@ ${loadCodeBrowserClientBundle()}
   </body>
 </html>`;
 }
+async function multiAngleJsonRowAndDocHtml(opts, spec) {
+    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,
+    });
+    return {
+        jsonRow: {
+            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,
+            staticBrowseUrl: spec.staticBrowseUrl,
+        },
+        commentrayHtml,
+        scrollB64,
+    };
+}
 async function buildMultiAngleDualPaneShell(opts, multi) {
     const defaultId = multi.angles.some((a) => a.id === multi.defaultAngleId)
         ? multi.defaultAngleId
@@ -792,34 +1039,24 @@ async function buildMultiAngleDualPaneShell(opts, multi) {
     let defaultScrollB64 = "";
     let defaultPathSearch = (opts.commentrayPathForSearch ?? "").trim();
     let defaultGh = opts.commentrayOnGithubUrl;
+    let defaultStaticBrowse = (opts.commentrayStaticBrowseUrl ?? "").trim();
     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,
-        });
+        const { jsonRow, commentrayHtml, scrollB64 } = await multiAngleJsonRowAndDocHtml(opts, spec);
         if (spec.id === defaultId) {
             defaultMarkdown = spec.markdown;
             defaultScrollB64 = scrollB64;
             defaultPathSearch = spec.commentrayPathRel.trim();
             defaultGh = spec.commentrayOnGithubUrl;
+            {
+                const sb = (spec.staticBrowseUrl ?? "").trim();
+                if (sb.length > 0)
+                    defaultStaticBrowse = sb;
+            }
             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,
-        });
+        jsonAngles.push(jsonRow);
     }
     const selOpts = multi.angles
         .map((a) => {
@@ -829,12 +1066,10 @@ async function buildMultiAngleDualPaneShell(opts, multi) {
         .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` +
@@ -848,6 +1083,7 @@ async function buildMultiAngleDualPaneShell(opts, multi) {
             scrollBlockLinksB64: defaultScrollB64,
             commentrayPathForSearch: defaultPathSearch,
             commentrayOnGithubUrl: defaultGh,
+            ...(defaultStaticBrowse.length > 0 ? { commentrayStaticBrowseUrl: defaultStaticBrowse } : {}),
         },
         angleSelectHtml,
         multiAnglePayloadB64,
@@ -883,13 +1119,7 @@ async function buildCodeBrowserShell(opts, layoutPref) {
         });
         if (stretched) {
             layout = "stretch";
-            shellInner =
-                `        <div class="block-stretch-headings">` +
-                    `<h2 class="pane-title">Code</h2>` +
-                    `<h2 class="pane-title">Commentray</h2>` +
-                    `</div>\n` +
-                    `        ${stretched.preambleHtml}\n` +
-                    `        ${stretched.tableInnerHtml}\n`;
+            shellInner = `        ${stretched.preambleHtml}\n` + `        ${stretched.tableInnerHtml}\n`;
         }
     }
     if (layout === "dual") {
@@ -908,12 +1138,10 @@ async function buildCodeBrowserShell(opts, layoutPref) {
         ]);
         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` +
                 `          ${commentrayHtml}\n` +
                 `          </div>\n` +
@@ -957,6 +1185,12 @@ function codeBrowserHljsThemes(opts) {
 function toolbarCommentrayGithubFromShell(shell, opts) {
     return shell.multiShell?.commentrayOnGithubUrl ?? opts.commentrayOnGithubUrl;
 }
+function toolbarCommentrayStaticBrowseFromShell(shell, opts) {
+    const t = (shell.multiShell?.commentrayStaticBrowseUrl ??
+        opts.commentrayStaticBrowseUrl ??
+        "").trim();
+    return t.length > 0 ? t : undefined;
+}
 function rawMdB64FromShell(shell, opts) {
     return (shell.multiShell?.rawMdB64 ?? Buffer.from(opts.commentrayMarkdown, "utf8").toString("base64"));
 }
@@ -980,9 +1214,11 @@ function shellSearchAttrsWithNavJson(shellSearchAttrsBase, documentedNavJsonUrl)
 export async function renderCodeBrowserHtml(opts) {
     const rawCodeB64 = Buffer.from(opts.code, "utf8").toString("base64");
     const title = codeBrowserPageTitle(opts);
+    const metaDescriptionHtml = renderMetaDescriptionHtml(opts, title);
     const builtAt = opts.builtAt ?? new Date();
     const renderSemver = commentrayRenderVersion();
-    const toolbarEndHtml = buildToolbarEndHtml(opts.githubRepoUrl, opts.toolHomeUrl, renderSemver);
+    const toolbarSiteHubHtml = buildToolbarSiteHubHtml(opts.siteHubUrl);
+    const toolbarEndHtml = buildToolbarEndHtml(opts.githubRepoUrl, opts.toolHomeUrl, renderSemver, opts.siteHubUrl);
     const pageFooterHtml = renderPageFooterHtml(builtAt);
     const { hljs, hljsDark } = codeBrowserHljsThemes(opts);
     const mermaidScript = mermaidRuntimeScriptHtml(opts.includeMermaidRuntime);
@@ -1002,10 +1238,13 @@ export async function renderCodeBrowserHtml(opts) {
     const navRailContextHtml = renderNavRailContextHtml(opts.filePath, navRailCommentrayPathFromShell(shell, opts), {
         sourceOnGithubUrl: opts.sourceOnGithubUrl,
         commentrayOnGithubUrl: toolbarCommentrayGithubFromShell(shell, opts),
+        commentrayStaticBrowseUrl: toolbarCommentrayStaticBrowseFromShell(shell, opts),
     });
     return buildCodeBrowserPageHtml({
         title,
+        metaDescriptionHtml,
         generatorMetaHtml,
+        toolbarSiteHubHtml,
         navRailContextHtml,
         angleSelectHtml: shell.angleSelectHtml,
         toolbarDocHubHtml,