@rse/specbook 1.3.1 → 1.4.0

package/dst/specbook-export-html.js

@@ -3,1840 +3,19 @@
 **  Copyright (c) 2026 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Licensed under Apache 2.0 <https://spdx.org/licenses/Apache-2.0>
 */
-import { Marked } from "marked";
-import { markedSmartypants } from "marked-smartypants";
-import nunjucks from "nunjucks";
-import nunjucksAddons from "@rse/nunjucks-addons";
-import textframe from "textframe";
 import { Gradia } from "@rse/gradia";
-import { buildLinkIndex, resolveUnique, expandReferences, anchorPaths, plainText } from "./specbook-link.js";
-import { compileValueExpr, splitItems } from "./specbook-parse-value.js";
-import { embeddingRegex, embeddingCount, embeddingThemes } from "./specbook-parse-common.js";
-import { escapeHtml, stylesheet, searchScript, fallbackLogo, isTitleObject, titleObject, documentTitle, documentLang, documentThemeStyle } from "./specbook-export-common.js";
+import { buildLinkIndex, anchorPaths, plainText } from "./specbook-link.js";
+import { stylesheet, searchScript, isTitleObject, titleObject, documentTitle, documentLang, documentThemeStyle } from "./specbook-export-common.js";
 import { collectSchemas } from "./specbook-parse-semantic.js";
 import { renderDiagrams } from "./specbook-diagram.js";
-import { optimizeImages } from "./specbook-export-image.js";
-import { specCoverage, coverageRatio } from "./specbook-coverage.js";
-/*  ==== Templates ====  */
-/*  the built-in Nunjucks templates for the HTML export  */
-const templates = {
-    /*  <Document/>  */
-    "Document": textframe `
-        <!DOCTYPE html>
-        <html{% if Document.lang %} lang="{{ Document.lang }}"{% endif %}{% if Document.theme %} class="theme-{{ Document.theme }}"{% endif %}>
-            <head>
-                <meta charset="utf-8"/>
-                <title>{{ Document.title }}</title>
-                <style>
-                    {{ Document.css }}
-                </style>
-                <script>
-                    {{ Document.themescript }}
-                </script>
-            </head>
-            <body>
-                {% if Document.realtime %}<div class="realtime-status disconnected" title="live preview connection"><svg class="realtime-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/><path d="M12 22v-5"/></svg></div>{% endif %}
-                <div class="theme-switch" onclick="themeSwitch()" title="switch color theme"><svg class="theme-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 3.5 A 8.5 8.5 0 0 0 12 20.5 Z" fill="currentColor" stroke="none"/></svg></div>
-                {% if Document.info %}<div class="info-switch" title="toggle description popups"><svg class="info-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="8.5"/><line x1="12" y1="11" x2="12" y2="16"/><line x1="12" y1="7.75" x2="12.01" y2="7.75"/></svg></div>{% endif %}
-                <div class="search" id="search">
-                    <div class="search-toggle" id="search-toggle" title="toggle search field"><svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="3.5,4.5 20.5,4.5 14,12.5 14,20 10,17.5 10,12.5"/></svg></div>
-                    <div class="search-field">
-                        <input type="text" id="search-input" placeholder="Filter&hellip; (fuzzy matched keywords)" autocomplete="off" spellcheck="false"/>
-                        <span class="search-clear" id="search-clear" title="clear search">&#x00D7;</span>
-                    </div>
-                </div>
-                {%- if not Document.omitted.all %}
-                <div class="fold-switch">
-                    <div class="fold-toggle" title="toggle folding controls"><svg class="fold-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3.5l5 5 5-5"/><path d="M7 20.5l5-5 5 5"/></svg></div>
-                    <div class="fold-controls">
-                        {% if not Document.omitted.graph %}<div class="fold-graphs" title="fold/unfold all graph diagrams"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="5.5" cy="5.5" r="3"/><circle cx="18.5" cy="5.5" r="3"/><circle cx="12" cy="18.5" r="3"/><path d="M7.3 8.1 10.6 15.9"/><path d="M16.7 8.1 13.4 15.9"/></svg></div>{% endif %}
-                        {% if not Document.omitted.hub %}<div class="fold-hubs" title="fold/unfold all hub diagrams"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3.5"/><circle cx="3.5" cy="4.5" r="2"/><circle cx="3.5" cy="19.5" r="2"/><circle cx="20.5" cy="4.5" r="2"/><circle cx="20.5" cy="19.5" r="2"/><path d="M5.5 4.5H10V9.1"/><path d="M18.5 4.5H14V9.1"/><path d="M5.5 19.5H10V14.9"/><path d="M18.5 19.5H14V14.9"/></svg></div>{% endif %}
-                        {% if not Document.omitted.grid %}<div class="fold-grids" title="fold/unfold all grid diagrams"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1"/><rect x="13.5" y="3.5" width="7" height="7" rx="1"/><rect x="3.5" y="13.5" width="7" height="7" rx="1"/><rect x="13.5" y="13.5" width="7" height="7" rx="1"/></svg></div>{% endif %}
-                        {% for level in [ 1, 2, 3 ] %}{% if not Document.omitted["level" ~ level] %}<div class="fold-level{{ level }}" title="fold/unfold all diagrams from nesting level {{ level }} on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="2.5" width="11" height="11" rx="1.5"/><rect x="6.5" y="6.5" width="3" height="3" rx="0.5"/><text x="19.5" y="23" text-anchor="middle" font-size="14.5" font-weight="bold" fill="currentColor" stroke="none">{{ level }}</text></svg></div>{% endif %}{% endfor %}
-                        {% if not Document.omitted.text %}<div class="fold-texts" title="fold/unfold all cell texts"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 7V4.5h15V7"/><path d="M12 4.5v15"/><path d="M8.5 19.5h7"/></svg></div>{% endif %}
-                    </div>
-                </div>
-                {%- endif %}
-                <div class="scroll-progress" title="scroll to top"><svg class="scroll-ring" viewBox="0 0 44 44" fill="none" stroke-width="2.5"><circle class="scroll-todo" cx="22" cy="22" r="20"/><circle class="scroll-done" cx="22" cy="22" r="20" stroke-linecap="round" pathLength="1" stroke-dasharray="1" stroke-dashoffset="1"/></svg><svg class="scroll-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5"/><path d="M5 12l7-7 7 7"/></svg></div>
-                {{ Document.tocpanel }}
-                {{ Document.titlepage }}
-                {{ Document.toc }}
-                {{ Document.doc }}
-                {{ Document.artifacts }}
-                {% if Document.search %}<script>{{ Document.search }}</script>{% endif %}
-                <script>{{ Document.progress }}</script>
-                <script>{{ Document.fold }}</script>
-                <script>{{ Document.maximize }}</script>
-                {% if Document.tocpanel %}<script>{{ Document.tocscript }}</script>{% endif %}
-                {% if Document.info %}<script>{{ Document.info }}</script>{% endif %}
-                {% if Document.realtime %}<script class="realtime">{{ Document.realtime }}</script>{% endif %}
-            </body>
-        </html>
-    `,
-    /*  <Placeholder/>  */
-    "Placeholder": textframe `
-        <!DOCTYPE html>
-        <html>
-            <head>
-                <meta charset="utf-8"/>
-                <title>{{ Placeholder.title }}</title>
-                <style>
-                    {{ Placeholder.css }}
-                </style>
-                <script>
-                    {{ Placeholder.themescript }}
-                </script>
-            </head>
-            <body>
-                <div class="placeholder">{{ Placeholder.message }}</div>
-                <script class="realtime">{{ Placeholder.realtime }}</script>
-            </body>
-        </html>
-    `,
-    /*  <TitlePage/>  */
-    "TitlePage": textframe `
-        <div class="titlepage" id="titlepage">
-            {% if TitlePage.logo %}<div class="logo">{{ TitlePage.logo }}</div>{% endif %}
-            <div class="title">{{ TitlePage.title }}</div>
-            {% if TitlePage.subtitle %}<div class="subtitle">{{ TitlePage.subtitle }}</div>{% endif %}
-            {% if TitlePage.author %}<div class="author">{{ TitlePage.author }}</div>{% endif %}
-            <table class="meta">
-                {% if TitlePage.version %}<tr><td class="label">Version:</td><td>{{ TitlePage.version }}</td></tr>{% endif %}
-                <tr><td class="label">Created:</td><td>{{ TitlePage.created }}</td></tr>
-                <tr><td class="label">Modified:</td><td>{{ TitlePage.modified }}</td></tr>
-            </table>
-            {{ TitlePage.description }}
-            {{ TitlePage.properties }}
-        </div>
-    `,
-    /*  <Toc/>  */
-    "Toc": textframe `
-        <nav class="toc" id="toc">
-            <h1>Table of Contents</h1>
-            <table>
-                {% for entry in Toc.entries %}
-                <tr class="level-{{ entry.level }}"><td><a href="#{{ entry.id }}"><span class="object-kind"{% if entry.info %} data-info="{{ entry.info }}" data-info-path="{{ entry.infopath }}"{% endif %}>{{ entry.kind }}:</span> <span class="object-name"{% if entry.spec %} data-info-spec="{{ entry.spec }}"{% endif %}>{{ entry.name }}</span> <span class="link-symbol">&#x26AD;</span></a></td>{% if entry.page %}<td class="page"><a href="#{{ entry.id }}">{{ entry.page }}</a></td>{% endif %}</tr>
-                {% endfor %}
-            </table>
-        </nav>
-    `,
-    /*  <TocPanel/>  */
-    "TocPanel": textframe `
-        <nav class="toc-panel">
-            <div class="toc-tab" title="toggle table of contents"><svg class="toc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></div>
-            <div class="toc-list">
-                <ul class="extra">
-                    {% if TocPanel.title %}<li><a href="#titlepage"><span class="entry">Title</span></a></li>{% endif %}
-                    <li><a href="#toc"><span class="entry">Table of Contents</span></a></li>
-                    {% if TocPanel.doc %}<li><a href="#doc"><span class="entry">Diagram of Contents</span></a></li>{% endif %}
-                </ul>
-                {{ TocPanel.entries }}
-            </div>
-        </nav>
-    `,
-    /*  <TocPanelEntries/>  */
-    "TocPanelEntries": textframe `
-        <ul>
-            {% for entry in Entries %}
-            <li><a href="#{{ entry.id }}"><span class="entry"><span class="object-kind"{% if entry.info %} data-info="{{ entry.info }}" data-info-path="{{ entry.infopath }}"{% endif %}>{{ entry.kind }}:</span> <span class="object-name"{% if entry.spec %} data-info-spec="{{ entry.spec }}"{% endif %}>{{ entry.name }}</span></span></a>{{ entry.children }}</li>
-            {% endfor %}
-        </ul>
-    `,
-    /*  <Doc/>  */
-    "Doc": textframe `
-        <nav class="doc" id="doc">
-            <h1>Diagram of Contents</h1>
-            {{ Doc.diagram }}
-        </nav>
-    `,
-    /*  <Artifact/>  */
-    "Artifact": textframe `
-        <article>
-            {{ Artifact.objects }}
-        </article>
-    `,
-    /*  <Object/>  */
-    "Object": textframe `
-        <section>
-            <h{{ Object.level }} id="{{ Object.id }}"{% if Object.anchor %} data-id="{{ Object.anchor }}"{% endif %}><span class="object-kind"{% if Object.info %} data-info="{{ Object.info }}" data-info-path="{{ Object.infopath }}"{% endif %}>{{ Object.kind }}:</span> <span class="object-name"{% if Object.spec %} data-info-spec="{{ Object.spec }}"{% endif %}>{{ Object.name }}</span>{% if Object.primary %} <span class="primary-marker">&#x2318;</span>{% endif %}{% if Object.paren %} <span class="anchor-paren">({{ Object.paren }})</span>{% endif %} <a href="#{{ Object.id }}"><span class="anchor-symbol">&#x2693;&#xFE0E;</span></a></h{{ Object.level }}>
-            {{ Object.diagram }}
-            {{ Object.properties }}
-            {{ Object.description }}
-            {{ Object.coverage }}
-            {{ Object.children }}
-        </section>
-    `,
-    /*  <Coverage/>  */
-    "Coverage": textframe `
-        <table class="coverage">
-            <thead>
-                <tr><th>Coverage</th><th>Covered</th><th>Total</th><th class="ratio">Ratio</th></tr>
-            </thead>
-            <tbody>
-                {% for entry in Coverage %}
-                <tr{% if entry.even %} class="even"{% endif %}><td>{{ entry.label }}</td><td>{{ entry.covered }}</td><td>{{ entry.total }}</td><td class="ratio"><span class="bar"><span style="width: {{ entry.ratio }}%"></span></span> {{ entry.ratio }}%</td></tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    `,
-    /*  <Properties/>  */
-    "Properties": textframe `
-        <table class="props"{% if Fold %} data-fold-height="{{ Fold }}"{% endif %}>
-            {% for property in Properties %}
-            <tr><td class="key property-name"><span{% if property.info %} data-info="{{ property.info }}" data-info-path="{{ property.infopath }}" data-info-prop="{{ property.key }}"{% endif %}>{{ property.key }}</span></td><td>{{ property.value }}</td></tr>
-            {% endfor %}
-        </table>
-    `,
-    /*  <Description/>  */
-    "Description": textframe `
-        {%- if Description.block %}
-        <div class="description">{{ Description.description }}{% if Description.rationale %}
-            <p class="rationale">&mdash; <span class="keyword">BECAUSE</span> {{ Description.rationale }}</p>{% endif %}</div>
-        {%- elif Description.description or Description.rationale %}
-        <p class="description">{{ Description.description }}{% if Description.rationale %}
-            <span class="rationale">&mdash; <span class="keyword">BECAUSE</span> {{ Description.rationale }}</span>{% endif %}</p>
-        {%- endif %}
-        {%- for embedding in Description.embeddings %}
-        <div class="embedding">{{ embedding }}</div>
-        {%- endfor %}
-    `,
-    /*  <Table/>  */
-    "Table": textframe `
-        <table class="objects"{% if Table.fold %} data-fold-height="{{ Table.fold }}"{% endif %}>
-            <thead>
-                <tr>
-                    <th class="object-kind"><span{% if Table.info %} data-info="{{ Table.info }}" data-info-path="{{ Table.infopath }}"{% endif %}>{{ Table.head }}</span></th>
-                    {%- for key in Table.keys %}<th class="property-name"><span{% if Table.info %} data-info="{{ Table.info }}" data-info-path="{{ Table.infopath }}" data-info-prop="{{ key }}"{% endif %}>{{ key }}</span></th>{% endfor %}
-                    {%- if Table.desc %}<th class="description" style="width: {{ Table.width }}%">Description</th>{% endif %}
-                </tr>
-            </thead>
-            <tbody>
-                {% for row in Table.rows %}
-                <tr id="{{ row.id }}"{% if row.anchor %} data-id="{{ row.anchor }}"{% endif %}{% if row.even %} class="even"{% endif %}>
-                    <td><span{% if row.spec %} data-info-spec="{{ row.spec }}"{% endif %}>{{ row.name }}</span>{% if row.primary %} <span class="primary-marker">&#x2318;</span>{% endif %}{% if row.paren %} <span class="anchor-paren">({{ row.paren }})</span>{% endif %} <a href="#{{ row.id }}"><span class="anchor-symbol">&#x2693;&#xFE0E;</span></a></td>
-                    {%- for value in row.values %}<td>{{ value }}</td>{% endfor %}
-                    {%- if Table.desc %}<td>{{ row.description }}</td>{% endif %}
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    `,
-    /*  <TableChunked/>  */
-    "TableChunked": textframe `
-        <table class="objects"{% if Table.fold %} data-fold-height="{{ Table.fold }}"{% endif %}>
-            <thead>
-                <tr>
-                    <th class="object-kind" style="width: {{ Table.width }}%"><span{% if Table.info %} data-info="{{ Table.info }}" data-info-path="{{ Table.infopath }}"{% endif %}>{{ Table.head }}</span></th>
-                    <th class="description">Properties{% if Table.desc %} &amp; Description{% endif %}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for row in Table.rows %}
-                <tr id="{{ row.id }}"{% if row.anchor %} data-id="{{ row.anchor }}"{% endif %}{% if row.even %} class="even"{% endif %}>
-                    <td><span{% if row.spec %} data-info-spec="{{ row.spec }}"{% endif %}>{{ row.name }}</span>{% if row.primary %} <span class="primary-marker">&#x2318;</span>{% endif %}{% if row.paren %} <span class="anchor-paren">({{ row.paren }})</span>{% endif %} <a href="#{{ row.id }}"><span class="anchor-symbol">&#x2693;&#xFE0E;</span></a></td>
-                    <td class="chunks">
-                        <table class="chunks">
-                            {% for chunk in row.chunks %}
-                            <tr>{% for cell in chunk %}<th{% if not cell.desc %} class="property-name"{% endif %}{% if cell.span > 1 %} colspan="{{ cell.span }}"{% endif %}><span{% if not cell.desc and Table.info %} data-info="{{ Table.info }}" data-info-path="{{ row.spec }}" data-info-prop="{{ cell.key }}"{% endif %}>{{ cell.key }}</span></th>{% endfor %}</tr>
-                            <tr>{% for cell in chunk %}<td{% if cell.span > 1 %} colspan="{{ cell.span }}"{% endif %}>{{ cell.value }}</td>{% endfor %}</tr>
-                            {% endfor %}
-                        </table>
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    `
-};
-/*  the client-side script of the color theme: it applies the stored
-    choice (or, without one, the document default and finally the system
-    preference) before the first paint and toggles it on demand. The
-    live preview placeholder page carries it, too, as an in-place
-    document update never re-executes a head script  */
-const themeScript = textframe `
-    (function () {
-        let style = null
-        try { style = localStorage.getItem("specbook-theme") }
-        catch { /*  an inaccessible storage just means no stored choice  */ }
-        const html = document.documentElement.classList
-        if (style === null)
-            style = html.contains("theme-dark") ? "dark" : (html.contains("theme-light") ? "light" : null)
-        if (style === null)
-            style = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-        html.remove("theme-light", "theme-dark")
-        html.add("theme-" + style)
-    })()
-    function themeSwitch () {
-        const html  = document.documentElement.classList
-        const style = html.contains("theme-dark") ? "light" : "dark"
-        html.remove("theme-light", "theme-dark")
-        html.add("theme-" + style)
-        try { localStorage.setItem("specbook-theme", style) }
-        catch { /*  an inaccessible storage just loses the choice  */ }
-    }
-`;
-/*  the minimal stylesheet of the live preview placeholder page: it also
-    provides the <style> element the in-place document update swaps with
-    the real stylesheet, so it carries the centered message only  */
-const placeholderStylesheet = textframe `
-    html.theme-light body { color: #333333; background-color: #ffffff }
-    html.theme-dark  body { color: #cccccc; background-color: #1a1a1a }
-    body { font-family: sans-serif; margin: 0 }
-    div.placeholder { position: absolute; top: 50%; left: 0; right: 0;
-        transform: translateY(-50%); text-align: center; opacity: 0.6 }
-`;
-/*  the client-side script of the live preview: it connects back to
-    its own page over WebSocket (the URL scheme "http"/"https" replaced with
-    "ws"/"wss"), re-connects every second after a lost connection, and
-    updates the page on a received "RELOAD" command as well as on every
-    re-established connection (as the server was restarted meanwhile).
-    The update fetches the fresh page and replaces the document in place
-    -- instead of reloading the page -- so the scroll position and the
-    theme choice survive: the title, the stylesheet (if changed), and
-    the body are swapped, and the scripts of the fresh body re-executed
-    through clones (as parsed scripts never execute), except this
-    realtime script itself, whose connection stays alive. The status
-    icon (re-created by every body swap) reflects the connection state
-    and blinks for 2s after every update, unless the connection is
-    lost meanwhile  */
-const realtimeScript = textframe `
-    (function () {
-        const url = window.location.protocol.replace(/^http/, "ws") + "//" +
-            window.location.host + window.location.pathname
-        const status = (state) => {
-            const icon = document.querySelector("div.realtime-status")
-            if (icon !== null)
-                icon.className = "realtime-status " + state
-        }
-        let blink = 0
-        let seq   = 0
-        const update = async () => {
-            /*  a superseded update (an overlapping newer one started
-                meanwhile) is dropped, as its stale page could arrive last  */
-            const mine = ++seq
-            let html
-            try {
-                const response = await fetch(window.location.pathname, { cache: "no-store" })
-                if (!response.ok)
-                    return
-                html = await response.text()
-            }
-            catch {
-                /*  an unreachable server just skips the update  */
-                return
-            }
-            if (mine !== seq)
-                return
-            const doc = new DOMParser().parseFromString(html, "text/html")
-            const x = window.scrollX
-            const y = window.scrollY
-            document.title = doc.title
-            const style = document.head.querySelector("style")
-            const fresh = doc.head.querySelector("style")
-            if (style !== null && fresh !== null && style.textContent !== fresh.textContent)
-                style.replaceWith(fresh)
-            document.body.replaceWith(doc.body)
-
-            /*  a swapped-out maximization overlay can no longer unlock the scrolling  */
-            document.documentElement.classList.remove("maximized")
-            for (const script of document.body.querySelectorAll("script:not(.realtime)")) {
-                const clone = document.createElement("script")
-                clone.textContent = script.textContent
-                script.replaceWith(clone)
-            }
-            window.scrollTo(x, y)
-            status("reloaded")
-            clearTimeout(blink)
-            blink = setTimeout(() => { status("connected") }, 2000)
-        }
-        let lost = false
-        const connect = () => {
-            const ws = new WebSocket(url)
-            ws.onopen = () => {
-                status("connected")
-                if (lost) {
-                    console.log("specbook: live preview connection re-established")
-                    lost = false
-                    update()
-                }
-            }
-            ws.onmessage = (event) => {
-                if (event.data === "RELOAD")
-                    update()
-            }
-            ws.onclose = () => {
-                clearTimeout(blink)
-                status("disconnected")
-                if (!lost)
-                    console.log("specbook: live preview connection lost")
-                lost = true
-                setTimeout(connect, 1000)
-            }
-        }
-        connect()
-    })()
-`;
-/*  the client-side script of the scroll progress meter: it drives the
-    DONE arc of the ring (through the dash offset of its unit-length
-    circle) with the scrolled fraction of the document, shows the meter
-    once the page is scrolled beyond 400px, and scrolls the page back
-    to the top on a click (stripping the URL hash, so a later reload
-    stays at the top). The updates are throttled onto animation frames,
-    and the window-bound listeners retire themselves once a live preview
-    body swap replaced the meter (whose fresh script re-attaches)  */
-const scrollProgressScript = textframe `
-    (function () {
-        const meter = document.querySelector("div.scroll-progress")
-        const ring  = meter.querySelector("circle.scroll-done")
-        let ticking = false
-        const update = () => {
-            ticking = false
-            if (!meter.isConnected) {
-                window.removeEventListener("scroll", schedule)
-                window.removeEventListener("resize", schedule)
-                return
-            }
-            const doc = document.documentElement
-            const max = doc.scrollHeight - doc.clientHeight
-            ring.setAttribute("stroke-dashoffset", String(1 - (max > 0 ? doc.scrollTop / max : 0)))
-            meter.classList.toggle("shown", doc.scrollTop > 400)
-        }
-        const schedule = () => {
-            if (!ticking) {
-                ticking = true
-                requestAnimationFrame(update)
-            }
-        }
-        meter.addEventListener("click", () => {
-            window.scrollTo({ top: 0, behavior: "smooth" })
-            if (window.location.hash)
-                history.replaceState(null, "", window.location.pathname + window.location.search)
-        })
-        window.addEventListener("scroll", schedule, { passive: true })
-        window.addEventListener("resize", schedule)
-        update()
-    })()
-`;
-/*  the default percentage by which the text of a table cell may exceed
-    the height of every other cell of its row before it folds (or is
-    omitted), overridden per object kind by "maxCellHeight", and the
-    minimum percentage of its own height a cell has to gain by that,
-    shared by the client-side folding and the server-side omitting  */
-const cellHeightDefault = 40;
-const cellGainMin = 25;
-/*  the client-side script of the folding: it wraps every diagram of the
-    content into a fold container carrying a chevron mark at its top
-    left corner, folds the text of every table cell towering over the
-    other cells of its row behind a chevron mark of its own, and lets
-    the controls of the fold tab fold and unfold all diagrams of a type
-    ("graph", "hub", "grid"), all diagrams from an object tree nesting
-    level on (1, 2, 3), and all cell texts at once, with their state
-    persisted across page loads and their icons marked while they are
-    active (the diagram ones, OR-combined) or any cell text is folded
-    (the tab icon while anything at all is). The script runs at
-    the end of the body, as the content it wraps has to exist already,
-    and a live preview body swap replaces the containers and their
-    listeners along with the body. An export omitting aspects lacks
-    their controls ("standins" lets detached elements take their place)
-    and, with the long texts omitted, folds no cell text ("textless")  */
-const foldScript = (standins, textless) => textframe `
-    (function () {
-        const tab = document.querySelector("div.fold-switch")
-        if (tab === null)
-            return
-        const controls = {
-            graph:  tab.querySelector("div.fold-graphs"),
-            hub:    tab.querySelector("div.fold-hubs"),
-            grid:   tab.querySelector("div.fold-grids"),
-            level1: tab.querySelector("div.fold-level1"),
-            level2: tab.querySelector("div.fold-level2"),
-            level3: tab.querySelector("div.fold-level3"),
-            text:   tab.querySelector("div.fold-texts")
-        }${standins ? `
-        for (const kind of Object.keys(controls))
-            controls[kind] ??= document.createElement("div")` : ""}
-
-        /*  let the fold icon slide the controls out of the tab (and
-            back in again), remembering the choice across page loads  */
-        try { if (localStorage.getItem("specbook-fold") === "open") tab.classList.add("open") }
-        catch { /*  an inaccessible storage just means no stored state  */ }
-        tab.querySelector("div.fold-toggle").addEventListener("click", () => {
-            tab.classList.toggle("open")
-            try { localStorage.setItem("specbook-fold", tab.classList.contains("open") ? "open" : "closed") }
-            catch { /*  an inaccessible storage just loses the state  */ }
-        })
-
-        /*  the default percentage by which the text of a table cell may
-            exceed the height of every other cell of its row before it
-            folds, overridden per object kind by the "data-fold-height"
-            attribute the schema configuration puts onto its table  */
-        const cellHeight = ${cellHeightDefault}
-
-        /*  the chevron mark of a foldable element, rotated by the
-            stylesheet while the element is folded  */
-        const svgNS = "http://www.w3.org/2000/svg"
-        const mark = (name, title) => {
-            const span = document.createElement("span")
-            span.className = name
-            span.title = title
-            const svg = document.createElementNS(svgNS, "svg")
-            svg.setAttribute("viewBox", "0 0 24 24")
-            svg.setAttribute("fill", "none")
-            svg.setAttribute("stroke", "currentColor")
-            svg.setAttribute("stroke-width", "2.5")
-            svg.setAttribute("stroke-linecap", "round")
-            svg.setAttribute("stroke-linejoin", "round")
-            const path = document.createElementNS(svgNS, "path")
-            path.setAttribute("d", "M5 9l7 7 7-7")
-            svg.appendChild(path)
-            span.appendChild(svg)
-            return span
-        }
-
-        /*  wrap every diagram into its fold container, carrying the
-            chevron mark plus the muted placeholder the diagram leaves
-            behind while folded, which is the very icon of its type
-            control; a diagram joins the set of its type plus the sets
-            of all nesting levels up to its own one (3 standing for all
-            deeper ones), so the sets of the controls overlap  */
-        const folds = { graph: [], hub: [], grid: [], level1: [], level2: [], level3: [], text: [] }
-        document.querySelectorAll("article div.diagram, nav.doc div.diagram").forEach((el) => {
-            const type  = el.getAttribute("data-type") ?? "graph"
-            const level = Math.min(Number(el.getAttribute("data-level")) || 1, 3)
-            const fold  = document.createElement("div")
-            fold.className = "fold"
-            el.parentNode.insertBefore(fold, el)
-            const chevron = mark("fold-mark", "fold/unfold this diagram")
-            const label   = document.createElement("span")
-            label.className = "fold-label"
-            label.appendChild(controls[type].querySelector("svg").cloneNode(true))
-            fold.append(chevron, label, el)
-            chevron.addEventListener("click", () => {
-                fold.classList.toggle("folded")
-                sync()
-            })
-            folds[type].push(fold)
-            for (let n = 1; n <= level; n++)
-                folds["level" + n].push(fold)
-        })
-
-        /*  the rendered height of the content of a table cell, or of its
-            leading part up to a word position: a cell box itself always
-            spans the whole row, so only a range over the content
-            measures the text  */
-        const range = document.createRange()
-        const height = (cell, upto) => {
-            if (upto === undefined)
-                range.selectNodeContents(cell)
-            else {
-                range.setStart(cell, 0)
-                range.setEnd(upto.node, upto.offset)
-            }
-            return range.getBoundingClientRect().height
-        }
-
-        /*  the word positions of a table cell, each right behind one word  */
-        const positions = (cell) => {
-            const walker = document.createTreeWalker(cell, NodeFilter.SHOW_TEXT)
-            const list = []
-            let node
-            while ((node = walker.nextNode()) !== null) {
-                const regex = /\\S+/g
-                let m
-                while ((m = regex.exec(node.nodeValue ?? "")) !== null)
-                    list.push({ node, offset: m.index + m[0].length })
-            }
-            return list
-        }
-
-        /*  a cell taking part in the comparison of its row: one with
-            content of its own, i.e. neither empty (a not given property
-            draws its marker through the stylesheet alone) nor holding
-            further cells (a chunked or nested table, whose own cells are
-            compared instead) nor a diagram (which folds on its own and
-            whose SVG text cannot carry the wrapper of a hidden
-            remainder)  */
-        const candidate = (cell) =>
-            cell.querySelector("td") === null
-            && cell.querySelector("div.diagram") === null
-            && (cell.textContent.trim() !== "" || cell.querySelector("img") !== null)
-
-        /*  hide a node of the folded remainder of a table cell: an
-            element carries the class itself, a text node gets wrapped  */
-        const rest = (node) => {
-            if (node.nodeType === Node.ELEMENT_NODE)
-                node.classList.add("fold-rest")
-            else if (node.nodeType === Node.TEXT_NODE) {
-                const span = document.createElement("span")
-                span.className = "fold-rest fold-wrap"
-                node.parentNode.insertBefore(span, node)
-                span.appendChild(node)
-            }
-        }
-
-        /*  take the cut of a table cell back again: the chevron mark
-            leaves, the remainder sheds its class or wrapper, and the
-            split text nodes merge  */
-        const uncut = (cell) => {
-            cell.classList.remove("folded")
-            cell.querySelectorAll("span.fold-more").forEach((el) => { el.remove() })
-            cell.querySelectorAll(".fold-rest").forEach((el) => {
-                if (el.classList.contains("fold-wrap"))
-                    el.replaceWith(...el.childNodes)
-                else
-                    el.classList.remove("fold-rest")
-            })
-            cell.normalize()
-        }
-
-        /*  the minimum percentage of its own height a cell has to gain
-            by folding, as hiding less than that is no visible relief
-            and only costs the reader a chevron to click (measured after
-            the cut, as the chevron itself can claim a line of its own)  */
-        const cellGain = ${cellGainMin}
-
-        /*  lay out the text folds, which holds for the current line
-            breaks only and hence is redone on every change of them: the
-            previous cuts are taken back, with their fold state carried
-            over (a cell folding anew follows the others)  */
-        const layout = () => {${textless ? `
-            return` : ""}
-            const all = folds.text.length > 0 && folds.text.every((cell) => cell.classList.contains("folded"))
-            const state = new Map(folds.text.map((cell) => [ cell, cell.classList.contains("folded") ]))
-            folds.text.forEach(uncut)
-            folds.text.length = 0
-
-            /*  decide which table cells fold: one which is taller than the
-                configured percentage above every other cell of its row (the
-                leading name column of a compact table excluded, as it is no
-                text of its own). All rows are measured before the first cut,
-                as every cut shifts the layout of the ones still to come  */
-            const cuts = []
-            document.querySelectorAll("article table tr").forEach((row) => {
-                const table = row.closest("table")
-                let cells = Array.from(row.children).filter((el) => el.tagName === "TD")
-                if (!table.classList.contains("chunks"))
-                    cells = cells.slice(1)
-                cells = cells.filter(candidate)
-                if (cells.length < 2)
-                    return
-                const configured = row.closest("table[data-fold-height]")
-                const percent = Number(configured?.getAttribute("data-fold-height")) || cellHeight
-                const heights = cells.map((cell) => height(cell))
-                cells.forEach((cell, i) => {
-                    const other = Math.max(...heights.filter((_, j) => j !== i))
-                    const limit = other * (1 + percent / 100)
-                    if (heights[i] > limit)
-                        cuts.push({ cell, limit, full: heights[i] })
-                })
-            })
-
-            /*  fold the decided cells back onto their height limit: the last
-                word position still fitting is found by a binary search over
-                the measured word positions, the text node is split there and
-                the chevron mark takes its place, followed by the remainder
-                hidden up the ancestor chain of the cell  */
-            for (const cut of cuts) {
-                const list = positions(cut.cell)
-                if (list.length === 0)
-                    continue
-                let lo = 0
-                let hi = list.length - 1
-                while (lo < hi) {
-                    const mid = Math.ceil((lo + hi) / 2)
-                    if (height(cut.cell, list[mid]) <= cut.limit)
-                        lo = mid
-                    else
-                        hi = mid - 1
-                }
-                const tail    = list[lo].node.splitText(list[lo].offset)
-                const chevron = mark("fold-more", "fold/unfold the remaining text")
-                tail.parentNode.insertBefore(chevron, tail)
-                let current = chevron
-                while (current !== cut.cell) {
-                    let next = current.nextSibling
-                    while (next !== null) {
-                        const following = next.nextSibling
-                        rest(next)
-                        next = following
-                    }
-                    current = current.parentNode
-                }
-
-                /*  the gain is measured on the applied fold, as only that
-                    one tells the real one, and a fold gaining less than the
-                    minimum share is taken back again, while a kept fold
-                    sheds the class again, as every cell starts out unfolded  */
-                cut.cell.classList.add("folded")
-                const gained = height(cut.cell) <= cut.full * (1 - cellGain / 100)
-                if (!gained) {
-                    uncut(cut.cell)
-                    continue
-                }
-                cut.cell.classList.toggle("folded", state.get(cut.cell) ?? all)
-                folds.text.push(cut.cell)
-                chevron.addEventListener("click", (event) => {
-                    /*  the cut can land inside a hyperlink, whose navigation
-                        the chevron has to suppress for its own click alone,
-                        so the remaining link text still follows the link  */
-                    event.preventDefault()
-                    cut.cell.classList.toggle("folded")
-                    sync()
-                })
-            }
-        }
-        layout()
-
-        /*  mark the text control while any cell text is folded, a diagram
-            control while it is active itself (as the sets of the diagram
-            controls overlap, the fold state of their diagrams tells
-            nothing), and the tab itself while anything at all is folded  */
-        const active = new Set()
-        const sync = () => {
-            for (const kind of Object.keys(folds))
-                controls[kind].classList.toggle("folded", kind === "text" ?
-                    folds.text.some((fold) => fold.classList.contains("folded")) : active.has(kind))
-            tab.classList.toggle("folded", Object.keys(folds).some((kind) =>
-                folds[kind].some((fold) => fold.classList.contains("folded"))))
-        }
-
-        /*  fold exactly the diagrams at least one active control covers  */
-        const apply = () => {
-            folds.level1.forEach((fold) => {
-                fold.classList.toggle("folded", Array.from(active).some((kind) => folds[kind].includes(fold)))
-            })
-        }
-
-        /*  without a stored state the rendered one stands, which is
-            everything unfolded: the cell texts store their state as a
-            whole, the diagrams as the list of their active controls  */
-        const stored = { text: null, diagrams: null }
-        for (const name of Object.keys(stored)) {
-            try { stored[name] = localStorage.getItem("specbook-fold-" + name) }
-            catch { /*  an inaccessible storage just means no stored state  */ }
-        }
-        if (stored.text !== null)
-            folds.text.forEach((fold) => { fold.classList.toggle("folded", stored.text === "folded") })
-        if (stored.diagrams !== null) {
-            stored.diagrams.split(",").filter((kind) => kind !== "text" && Object.hasOwn(folds, kind))
-                .forEach((kind) => { active.add(kind) })
-            apply()
-        }
-        for (const kind of Object.keys(folds)) {
-            controls[kind].addEventListener("click", () => {
-                try {
-                    if (kind === "text") {
-                        const all = !folds.text.every((fold) => fold.classList.contains("folded"))
-                        folds.text.forEach((fold) => { fold.classList.toggle("folded", all) })
-                        localStorage.setItem("specbook-fold-text", all ? "folded" : "unfolded")
-                    }
-                    else {
-                        if (!active.delete(kind))
-                            active.add(kind)
-                        apply()
-                        localStorage.setItem("specbook-fold-diagrams", Array.from(active).join(","))
-                    }
-                }
-                catch { /*  an inaccessible storage just loses the state  */ }
-                sync()
-            })
-        }
-        sync()
-
-        /*  redo the text folds once the line breaks change, which a new
-            viewport width and the arrival of the embedded fonts (still
-            loading while this script runs) cause. A running search
-            (which shows the remainders) defers it, and a live preview
-            body swap, which left this script behind, ends it  */
-        let width = document.documentElement.clientWidth
-        let timer = 0
-        const relayout = () => {
-            if (!tab.isConnected)
-                return
-            if (document.body.classList.contains("searching")) {
-                schedule()
-                return
-            }
-            layout()
-            sync()
-        }
-        const schedule = () => {
-            clearTimeout(timer)
-            timer = setTimeout(relayout, 250)
-        }
-        const resized = () => {
-            if (!tab.isConnected)
-                window.removeEventListener("resize", resized)
-            else if (width !== document.documentElement.clientWidth) {
-                width = document.documentElement.clientWidth
-                schedule()
-            }
-        }
-        window.addEventListener("resize", resized)
-        document.fonts.ready.then(() => {
-            if (tab.isConnected)
-                schedule()
-        })
-    })()
-`;
-/*  the client-side script of the diagram maximization: it attaches two
-    controls to the top right corner of every diagram, revealed by the
-    stylesheet while the diagram is hovered, which maximize the diagram
-    temporarily in a single shared overlay covering the viewport (the
-    SVG cloned into it and fitted by the stylesheet), the second one
-    additionally taking the overlay into the browser fullscreen (a
-    refused request leaves the viewport overlay), where the close mark
-    at the top right corner, "Escape", a click beside the diagram, and
-    a jump through a node hyperlink close the overlay again (a browser
-    leaving the fullscreen on its own closes it, too). The script runs
-    at the end of the body, as the diagrams it decorates have to exist
-    already, and a live preview body swap replaces the overlay and the
-    body-bound listeners along with the body, while the document-bound
-    fullscreen listener retires itself  */
-const maximizeScript = textframe `
-    (function () {
-        /*  an icon control drawn like the tab icons  */
-        const svgNS = "http://www.w3.org/2000/svg"
-        const mark = (name, title, paths) => {
-            const span = document.createElement("span")
-            span.className = name
-            span.title = title
-            const svg = document.createElementNS(svgNS, "svg")
-            svg.setAttribute("viewBox", "0 0 24 24")
-            svg.setAttribute("fill", "none")
-            svg.setAttribute("stroke", "currentColor")
-            svg.setAttribute("stroke-width", "2.5")
-            svg.setAttribute("stroke-linecap", "round")
-            svg.setAttribute("stroke-linejoin", "round")
-            for (const d of paths) {
-                const path = document.createElementNS(svgNS, "path")
-                path.setAttribute("d", d)
-                svg.appendChild(path)
-            }
-            span.appendChild(svg)
-            return span
-        }
-
-        /*  the shared overlay: the close mark plus the content holding
-            the clone of the maximized diagram  */
-        const overlay = document.createElement("div")
-        overlay.className = "maximize"
-        const close   = mark("maximize-close", "close the maximized diagram",
-            [ "M18 6 6 18", "M6 6l12 12" ])
-        const content = document.createElement("div")
-        content.className = "maximize-content"
-        overlay.append(close, content)
-        document.body.appendChild(overlay)
-
-        /*  open the overlay onto a diagram, optionally in the browser
-            fullscreen, and close it again (leaving the fullscreen, too),
-            with the document scrolling locked while it is open  */
-        const open = (diagram, fullscreen) => {
-            const svg = diagram.querySelector("svg").cloneNode(true)
-            svg.removeAttribute("style")
-            content.replaceChildren(svg)
-            overlay.classList.add("open")
-            document.documentElement.classList.add("maximized")
-            if (fullscreen)
-                overlay.requestFullscreen().catch(() => { /*  a refused request leaves the viewport overlay  */ })
-        }
-        const shut = () => {
-            overlay.classList.remove("open")
-            document.documentElement.classList.remove("maximized")
-            content.replaceChildren()
-            if (document.fullscreenElement === overlay)
-                document.exitFullscreen().catch(() => { /*  a fullscreen left already needs no exit  */ })
-        }
-        close.addEventListener("click", shut)
-        overlay.addEventListener("click", (event) => {
-            /*  a node hyperlink navigates on its own, the overlay just
-                gets out of its way, while a click beside the diagram
-                closes the overlay alone  */
-            if (event.target.closest("a") !== null || event.target.closest("svg") === null)
-                shut()
-        })
-        document.body.addEventListener("keydown", (event) => {
-            if (event.key === "Escape" && overlay.classList.contains("open"))
-                shut()
-        })
-        const left = () => {
-            if (!overlay.isConnected)
-                document.removeEventListener("fullscreenchange", left)
-            else if (document.fullscreenElement === null && overlay.classList.contains("open"))
-                shut()
-        }
-        document.addEventListener("fullscreenchange", left)
-
-        /*  attach the two controls to every diagram  */
-        document.querySelectorAll("article div.diagram, nav.doc div.diagram").forEach((diagram) => {
-            const controls = document.createElement("span")
-            controls.className = "maximize-controls"
-            const view = mark("maximize-view", "maximize this diagram in the viewport",
-                [ "M15 3h6v6", "M21 3l-7 7", "M9 21H3v-6", "M3 21l7-7" ])
-            const full = mark("maximize-full", "maximize this diagram in fullscreen",
-                [ "M3 7V5a2 2 0 0 1 2-2h2", "M17 3h2a2 2 0 0 1 2 2v2",
-                  "M21 17v2a2 2 0 0 1-2 2h-2", "M7 21H5a2 2 0 0 1-2-2v-2" ])
-            view.addEventListener("click", () => { open(diagram, false) })
-            full.addEventListener("click", () => { open(diagram, true) })
-            controls.append(view, full)
-            diagram.appendChild(controls)
-        })
-    })()
-`;
-/*  the client-side script of the table of contents side panel: it
-    slides the panel out of and back into the viewport edge (closing it
-    also on a jump, on "Escape", and on a click outside), remembers the
-    open state across page loads, and marks the active entry (the first
-    heading visible in the viewport, or, without any, the last heading
-    above the viewport, i.e. the section scrolled into), scrolling it
-    into the middle of the panel whenever it changes and is not visible
-    in the panel already (even while the panel is slid in, so it opens
-    at the right position), plus the anchored entry (the one the URL
-    hash currently addresses, which a jump synchronizes with the active
-    one, while a subsequent scrolling moves the active one only). The
-    script runs at the end of the body, as the headings it targets
-    have to exist already, and a live preview body swap replaces the
-    body-bound listeners along with the panel, while the document- and
-    window-bound ones (the outside click, as the body does not span
-    the viewport margins, plus scroll and hash change) retire
-    themselves  */
-const tocPanelScript = textframe `
-    (function () {
-        const panel   = document.querySelector("nav.toc-panel")
-        const list    = panel.querySelector("div.toc-list")
-        const links   = Array.from(panel.querySelectorAll("a"))
-        const targets = links.map((a) => document.getElementById(decodeURIComponent(a.hash.slice(1))))
-        let active = null
-        const reveal = () => {
-            const top = active.getBoundingClientRect().top - list.getBoundingClientRect().top
-            if (top < 0 || top + active.offsetHeight > list.clientHeight)
-                list.scrollTop += top - (list.clientHeight - active.offsetHeight) / 2
-        }
-        const spy = () => {
-            if (!panel.isConnected) {
-                window.removeEventListener("scroll", spy)
-                return
-            }
-            let current = null
-            for (let i = 0; i < targets.length; i++) {
-                if (targets[i] === null)
-                    continue
-                const top = targets[i].getBoundingClientRect().top
-                if (top >= -1 && top < window.innerHeight) {
-                    current = links[i]
-                    break
-                }
-                if (top < -1)
-                    current = links[i]
-            }
-            if (current === active)
-                return
-            if (active !== null)
-                active.classList.remove("active")
-            active = current
-            if (active !== null) {
-                active.classList.add("active")
-                reveal()
-            }
-        }
-        let anchored = null
-        const anchor = () => {
-            if (!panel.isConnected) {
-                window.removeEventListener("hashchange", anchor)
-                return
-            }
-            const current = links.find((a) => a.hash === window.location.hash) ?? null
-            if (current === anchored)
-                return
-            if (anchored !== null)
-                anchored.classList.remove("anchored")
-            anchored = current
-            if (anchored !== null)
-                anchored.classList.add("anchored")
-        }
-        const toggle = (open) => {
-            panel.classList.toggle("open", open)
-            try { localStorage.setItem("specbook-toc", panel.classList.contains("open") ? "open" : "closed") }
-            catch { /*  an inaccessible storage just loses the state  */ }
-        }
-        try { if (localStorage.getItem("specbook-toc") === "open") panel.classList.add("open") }
-        catch { /*  an inaccessible storage just means no stored state  */ }
-        panel.querySelector("div.toc-tab").addEventListener("click", () => { toggle() })
-        links.forEach((a) => { a.addEventListener("click", () => { toggle(false) }) })
-        document.body.addEventListener("keydown", (event) => { if (event.key === "Escape") toggle(false) })
-        const outside = (event) => {
-            if (!panel.isConnected)
-                document.removeEventListener("click", outside)
-            else if (!panel.contains(event.target)
-                && event.target.closest("div.search")          === null
-                && event.target.closest("div.theme-switch")    === null
-                && event.target.closest("div.info-switch")     === null
-                && event.target.closest("div.fold-switch")     === null
-                && event.target.closest("div.realtime-status") === null)
-                toggle(false)
-        }
-        document.addEventListener("click", outside)
-        window.addEventListener("scroll", spy, { passive: true })
-        window.addEventListener("hashchange", anchor)
-        spy()
-        anchor()
-    })()
-`;
-/*  the client-side script of the description popups: the info tab
-    toggles the popups (off by default, persisted across page loads),
-    and while they are on, a mouse resting 400ms on an element carrying
-    a "data-info" key (plus "data-info-prop" for a property) pops up the
-    schema description of its object kind (or property), while one
-    carrying a "data-info-spec" key pops up the corpus description of
-    the object instance (a diagram node box resolves through its
-    hyperlinked object anchor), titled with the object path (an instance
-    popup trailing the anchor id of the object) and fed from the
-    injected INFO/SPEC tables: as thousands of elements carry those
-    keys, they are just the table indices, and a title path is composed
-    from the SPEC table (the anchor id, parent index, kind, plain name,
-    and pre-rendered description HTML per object) instead of being
-    repeated on every element -- the path of an instance popup is the
-    one of its own object, while "data-info-path" names the object of a
-    schema popup, a trailing "^" keeping its last segment kind-only;
-    the popup is capped at 40% viewport width and
-    attached above or below, whichever side offers more space; the
-    script runs at the end of the body, so a live preview body swap
-    replaces the popup and the body-bound listeners along with it  */
-const infoPopupScript = textframe `
-    (function (INFO, SPEC) {
-        const popup = document.createElement("div")
-        popup.className = "info-popup"
-        document.body.appendChild(popup)
-        let enabled = false
-        try { enabled = localStorage.getItem("specbook-info") === "on" }
-        catch { /*  an inaccessible storage just means no stored choice  */ }
-        let current   = null
-        let pending   = null
-        let pendingId = 0
-        const cancel = () => {
-            clearTimeout(pendingId)
-            pending = null
-        }
-        const hide = () => {
-            popup.classList.remove("open")
-            current = null
-        }
-        const apply = () => {
-            document.body.classList.toggle("info-on", enabled)
-            if (!enabled) {
-                cancel()
-                hide()
-            }
-        }
-        apply()
-        document.querySelector("div.info-switch").addEventListener("click", () => {
-            enabled = !enabled
-            try { localStorage.setItem("specbook-info", enabled ? "on" : "off") }
-            catch { /*  an inaccessible storage just loses the choice  */ }
-            apply()
-        })
-
-        /*  compose the title of a popup: the title path segments of the
-            object (the last one kind-only for a kind popup), the anchor
-            id trailing an instance popup, and the property name trailing
-            a property popup  */
-        const titleOf = (source, spec, prop) => {
-            /*  compose the title path segments of an object  */
-            const pathOf = (n, named) => {
-                const [ , up, kind, title ] = SPEC[n]
-                const name = named ? title : ""
-                return [ ...(up >= 0 ? pathOf(up, true) : []),
-                    name !== "" && kind !== "" ? kind + ": " + name : (name !== "" ? name : kind) ]
-            }
-            const title = document.createElement("div")
-            title.className = "info-title"
-
-            /*  create a pointer, separating the title path segments  */
-            const pointer = () => {
-                const span = document.createElement("span")
-                span.className = "info-pointer"
-                span.textContent = "▷"
-                return span
-            }
-            const ref      = spec ?? source.getAttribute("data-info-path") ?? ""
-            const index    = parseInt(ref, 10)
-            const segments = SPEC[index] !== undefined ? pathOf(index, !ref.endsWith("^")) : []
-            for (const [ i, segment ] of segments.entries()) {
-                if (i > 0)
-                    title.appendChild(pointer())
-                const path = document.createElement("span")
-                path.className = "info-object"
-
-                /*  a segment renders as in the document content (the kind
-                    bold in the path color, the name semi-bold in the
-                    description color), where a segment without a kind
-                    prefix is the kind-only ending of a kind popup or the
-                    name of a kind-less object  */
-                const m    = /^([^\\s:]+): (.*)$/.exec(segment)
-                const bare = i === segments.length - 1 && spec === null && prop === null
-                const name = document.createElement("span")
-                name.className = "info-name"
-                if (m !== null || bare) {
-                    const kind = document.createElement("span")
-                    kind.className = "info-kind"
-                    kind.textContent = m !== null ? m[1] + ":" : segment
-                    path.appendChild(kind)
-                    if (m !== null) {
-                        name.textContent = m[2]
-                        path.append(" ", name)
-                    }
-                }
-                else {
-                    name.textContent = segment
-                    path.appendChild(name)
-                }
-                title.appendChild(path)
-            }
-
-            /*  the anchor id of an object instance (explicit or derived
-                from its name) trails the last segment  */
-            const anchor = spec !== null ? SPEC[spec]?.[0] : undefined
-            if (anchor !== undefined) {
-                const id = document.createElement("span")
-                id.className = "info-id"
-                const name = document.createElement("span")
-                name.className = "info-id-name"
-                name.textContent = anchor
-                id.append(" (#", name, ")")
-                title.appendChild(id)
-            }
-            if (prop !== null) {
-                title.appendChild(pointer())
-                const name = document.createElement("span")
-                name.className = "info-property"
-                name.textContent = prop
-                title.appendChild(name)
-            }
-            return title
-        }
-        const show = (el) => {
-            /*  a diagram node box carries no popup attributes itself, but
-                hyperlinks its object, whose heading name or table row name
-                carries the instance popup attributes  */
-            let source = el
-            if (!el.hasAttribute("data-info") && !el.hasAttribute("data-info-spec")) {
-                const target = document.getElementById(
-                    decodeURIComponent((el.getAttribute("href") ?? "").replace(/^#/, "")))
-                source = target === null ? null :
-                    (target.hasAttribute("data-info-spec") ? target : target.querySelector("[data-info-spec]"))
-                if (source === null)
-                    return
-            }
-            current = el
-            const key   = source.getAttribute("data-info")
-            const spec  = source.getAttribute("data-info-spec")
-            const prop  = source.getAttribute("data-info-prop")
-            popup.classList.toggle("spec", spec !== null)
-            popup.replaceChildren(titleOf(source, spec, prop))
-            const entry = key !== null ? INFO[key] : undefined
-            const desc  = prop !== null ? entry?.p?.[prop] :
-                (spec !== null ? SPEC[spec]?.[4] : entry?.d)
-            if (desc !== undefined && desc !== "") {
-                const text = document.createElement("div")
-                text.className = "info-desc"
-                text.innerHTML = desc
-
-                /*  the origin label leads the description inline, so it is
-                    hoisted into the leading paragraph (if there is one),
-                    with its prefix word in a span of its own for the
-                    rounded box styling  */
-                const label = document.createElement("strong")
-                label.className = "info-label"
-                const origin = document.createElement("span")
-                origin.className = "info-origin"
-                origin.textContent = spec !== null ? "Specification" : "Schema"
-                label.append(origin, " ")
-                const lead = text.firstElementChild
-                if (lead !== null && lead.tagName === "P")
-                    lead.insertBefore(label, lead.firstChild)
-                else
-                    text.insertBefore(label, text.firstChild)
-                popup.appendChild(text)
-            }
-
-            /*  measure the popup at the viewport origin first, as a
-                position near the right or bottom edge would clamp it  */
-            popup.style.left = "0px"
-            popup.style.top  = "0px"
-            popup.classList.add("open")
-            const rect  = el.getBoundingClientRect()
-            const left  = Math.max(8, Math.min(rect.left, window.innerWidth - popup.offsetWidth - 8))
-            const above = rect.top > window.innerHeight - rect.bottom
-            popup.style.left = left + "px"
-            popup.style.top  = (above ? rect.top - popup.offsetHeight - 6 : rect.bottom + 6) + "px"
-        }
-        const targets = "[data-info], [data-info-spec], div.diagram a"
-        document.body.addEventListener("mouseover", (event) => {
-            if (!enabled)
-                return
-            const el = event.target.closest(targets)
-            if (el === null || el === current || el === pending)
-                return
-            cancel()
-            pending   = el
-            pendingId = setTimeout(() => { pending = null; show(el) }, 400)
-        })
-        document.body.addEventListener("mouseout", (event) => {
-            const el = event.target.closest(targets)
-            if (el === null || (event.relatedTarget instanceof Node && el.contains(event.relatedTarget)))
-                return
-            if (el === pending)
-                cancel()
-            if (el === current)
-                hide()
-        })
-    })(@INFO@, @SPEC@)
-`;
-/*  ==== Rendering ====  */
-/*  the per-language double quote styles for the smart typography
-    (single quotes stay curly, as smartypants cannot distinguish a
-    closing single quote from an apostrophe)  */
-const quoteStyles = {
-    "en": ["&#8220;", "&#8221;"], /*  “...”    */
-    "nl": ["&#8220;", "&#8221;"], /*  “...”    */
-    "de": ["&#8222;", "&#8220;"], /*  „...“    */
-    "cs": ["&#8222;", "&#8220;"], /*  „...“    */
-    "sk": ["&#8222;", "&#8220;"], /*  „...“    */
-    "pl": ["&#8222;", "&#8221;"], /*  „...”    */
-    "fr": ["&#171;&#160;", "&#160;&#187;"], /*  « ... »  */
-    "it": ["&#171;", "&#187;"], /*  «...»    */
-    "es": ["&#171;", "&#187;"], /*  «...»    */
-    "pt": ["&#171;", "&#187;"], /*  «...»    */
-    "no": ["&#171;", "&#187;"], /*  «...»    */
-    "da": ["&#187;", "&#171;"], /*  »...«    */
-    "sv": ["&#8221;", "&#8221;"], /*  ”...”    */
-    "fi": ["&#8221;", "&#8221;"] /*  ”...”    */
-};
-/*  the active double quote style (set per document during rendering)  */
-let quotes = quoteStyles.en;
-/*  the private Markdown renderer instance, as the hooks below must not
-    leak into the "marked" singleton shared with the parser and with the
-    application embedding SpecBook as a library  */
-const marked = new Marked();
-/*  improve the typography of all rendered Markdown text (curly quotes,
-    "--" as the em dash, ellipsis); as smartypants requires unescaped text,
-    the extension switches off the text escaping of marked, so the stray
-    ampersands left behind have to be re-escaped afterwards; the English
-    double quotes of smartypants are remapped to the document language;
-    as marked runs later-registered pass-through hooks first, the
-    post-processing hook has to be registered before smartypants  */
-marked.use({ hooks: { postprocess: (html) => html.replace(/&#8220;/g, quotes[0]).replace(/&#8221;/g, quotes[1])
-            .replace(/&(?![a-zA-Z][a-zA-Z0-9]*;|#\d+;|#x[0-9a-fA-F]+;)/g, "&amp;") } });
-marked.use(markedSmartypants({ config: 1 }));
-/*  the switched-off text escaping of marked also leaves the angle
-    brackets of the inline text unescaped, which a browser then takes
-    for tags ("Map<String, Object>"), so they are escaped upfront in
-    the inline text tokenizer (registered after smartypants, as the
-    later-registered tokenizer takes precedence)  */
-marked.use({ tokenizer: { inlineText(src) {
-            const cap = this.rules.inline.text.exec(src);
-            if (cap === null)
-                return undefined;
-            return { type: "text", raw: cap[0], escaped: true,
-                text: cap[0].replace(/</g, "&lt;").replace(/>/g, "&gt;") };
-        } } });
-/*  the Nunjucks environment with the @rse/nunjucks-addons extensions  */
-const env = new nunjucks.Environment(null, { autoescape: true });
-nunjucksAddons(env);
-/*  mark pre-rendered HTML as safe for template interpolation  */
-const safe = (html) => new nunjucks.runtime.SafeString(html);
-/*  the built-in Nunjucks templates compiled on first use, as
-    renderString() would re-compile a template on every single call
-    (i.e. for every rendered object, property table, and description)  */
-const compiled = new Map();
-/*  render one of the built-in Nunjucks templates with a context  */
-const render = (name, context) => {
-    let template = compiled.get(name);
-    if (template === undefined) {
-        template = new nunjucks.Template(templates[name], env, undefined, true);
-        compiled.set(name, template);
-    }
-    return template.render(context);
-};
-/*  the active per-document reference expander, fully-qualified
-    anchor paths, member-carrying property value constraints, object
-    schema nodes, pre-rendered diagram blocks, optimized embedded images,
-    reference coverages, description popup keys of the schema nodes,
-    description popup keys of the objects, and omitted aspects (all set
-    during HTML rendering)  */
-let linker = null;
-let anchors = null;
-let members = null;
-let schemas = null;
-let diagrams = null;
-let images = null;
-let coverages = null;
-let infoKeys = null;
-let infoObjects = null;
-let omits = null;
-/*  the object whose texts are currently rendered, scoping the
-    resolution of the references inside them (nearest object wins),
-    established around every object rendering and restored afterwards  */
-let scope = null;
-const scoped = (object, body) => {
-    const outer = scope;
-    scope = object;
-    try {
-        return body();
-    }
-    finally {
-        scope = outer;
-    }
-};
-/*  determine the fully-qualified anchor path of an object  */
-const anchorOf = (object) => anchors?.get(object) ?? object.id;
-/*  determine the schema description popup key of an object (the
-    INFO table index of its schema node)  */
-const infoKeyOf = (object) => {
-    const schema = schemas?.get(object);
-    return schema !== undefined ? infoKeys?.get(schema) : undefined;
-};
-/*  determine the corpus description popup key of an object (its SPEC
-    table index), which a schema popup references for its title path,
-    too: "named = false" keeps the last path segment kind-only there,
-    as the kind popups (and the group headers of the compact tables)
-    describe the object class instead of the single instance  */
-const infoRefOf = (object, named = true) => {
-    const key = infoObjects?.get(object);
-    return key !== undefined ? key + (named ? "" : "^") : undefined;
-};
-/*  render the schema description popup key and kind-ending title path
-    reference of an object as "data-info" attributes for the manually
-    assembled hyperlink markup (the kind popup of the full hyperlinks)  */
-const infoAttr = (object) => {
-    const key = infoKeyOf(object);
-    const ref = infoRefOf(object, false);
-    return key !== undefined && ref !== undefined ?
-        ` data-info="${key}" data-info-path="${ref}"` : "";
-};
-/*  render the corpus description popup key of an object as the
-    "data-info-spec" attribute for the manually assembled hyperlink
-    markup (the instance popup of the compact and full hyperlinks)  */
-const specAttr = (object) => {
-    const ref = infoRefOf(object);
-    return ref !== undefined ? ` data-info-spec="${ref}"` : "";
-};
-/*  collect the description popup table of the schema nodes and their
-    keys (the table indices), with the description Markdown of the
-    objects and properties pre-rendered to HTML  */
-const collectInfo = (nodes, keys, info) => {
-    for (const schema of nodes) {
-        keys.set(schema, String(info.length));
-        const entry = {};
-        if (schema.desc !== undefined)
-            entry.d = marked.parse(schema.desc, { async: false }).trim();
-        for (const property of schema.props ?? []) {
-            if (property.desc === undefined)
-                continue;
-            entry.p ??= {};
-            entry.p[property.name] = marked.parse(property.desc, { async: false }).trim();
-        }
-        info.push(entry);
-        collectInfo(schema.children ?? [], keys, info);
-    }
-};
-/*  inject the description popup tables into their client-side script ("<"
-    escaped, so no embedded HTML can close the surrounding <script>
-    element, and the trailing table first, so a placeholder text
-    inside an injected table is never taken for the placeholder)  */
-const infoScript = (info, spec) => infoPopupScript
-    .replace("@SPEC@", () => JSON.stringify(spec).replace(/</g, "\\u003c"))
-    .replace("@INFO@", () => JSON.stringify(info).replace(/</g, "\\u003c"));
-/*  expand the inline Markdown of a text (code spans, emphasis, etc.),
-    with Wiki-style references expanded upfront (in their compact form
-    for prose, i.e. descriptions, in their full form otherwise)  */
-const inline = (text, compact = false) => safe(marked.parseInline(linker !== null ? linker(text, compact) : text, { async: false }));
-/*  expand the full Markdown of a text, keeping its block-level
-    constructs (lists, quotes, code blocks, tables) intact  */
-const block = (text, compact = false) => safe(marked.parse(linker !== null ? linker(text, compact) : text, { async: false }));
-/*  check whether a text carries any block-level Markdown, i.e. is
-    anything other than the single paragraph a description usually is  */
-const isBlock = (text) => {
-    const tokens = marked.lexer(text).filter((token) => token.type !== "space");
-    return tokens.length > 0 && !(tokens.length === 1 && tokens[0].type === "paragraph");
-};
-/*  render a single embedded image file (in its optimized form) onto an
-    <img> tag with a self-contained data: URL (converting the SVG text
-    into one, as an SVG inlined as-is would leak its document-global
-    <style> rules into all other inlined SVGs sharing the same class names)  */
-const renderImage = (original, alt) => {
-    const content = images?.get(original) ?? original;
-    const url = content.startsWith("data:") ? content :
-        `data:image/svg+xml;base64,${Buffer.from(content, "utf8").toString("base64")}`;
-    return `<img src="${url}" alt="${escapeHtml(alt)}"/>`;
-};
-/*  wrap the theme variants of an image into their layout-neutral theme
-    containers, of which the stylesheet shows just the one matching the
-    color theme currently active in the document  */
-const renderThemed = (variants) => variants.map((variant, i) => `<span class="theme-${embeddingThemes[i]}-only">${variant}</span>`).join("");
-/*  render the embedded image files of a text into HTML, taking the image
-    alternate texts from the corresponding "![alt](file)" markups and
-    pairing up the consecutive theme variants of a "{theme}" markup
-    (the empty entries of unreadable files are skipped)  */
-const renderEmbeddings = (text, embedding) => {
-    const result = new Array();
-    let i = 0;
-    for (const m of text.matchAll(embeddingRegex)) {
-        const count = embeddingCount(m[2]);
-        if (count === 0)
-            continue;
-        const contents = embedding.slice(i, i + count);
-        const variants = contents.filter((content) => content !== "")
-            .map((content) => renderImage(content, m[1].trim()));
-        i += count;
-        if (count > 1 && variants.length === count)
-            result.push(renderThemed(variants));
-        else
-            result.push(...variants);
-    }
-    return result;
-};
-/*  the image embedding markup including the horizontal whitespace
-    before it, so that its removal leaves no double space behind  */
-const embeddingMarkup = new RegExp(`[ \\t]*${embeddingRegex.source}`, "g");
-/*  render a description into HTML, expanding its inline Markdown and
-    moving the file embeddings to the end of the description  */
-const renderDescription = (description) => {
-    const text = description.description
-        .replace(embeddingMarkup, (markup, _alt, reference) => embeddingCount(reference) > 0 ? "" : markup)
-        .trim();
-    const embeddings = renderEmbeddings(description.description, description.embedding ?? []).map((content) => safe(content));
-    const blocked = isBlock(text);
-    return render("Description", { Description: {
-            block: blocked,
-            description: text !== "" ? (blocked ? block(text, true) : inline(text, true)) : "",
-            rationale: description.rationale !== undefined ?
-                inline(description.rationale, true) : undefined,
-            embeddings
-        } });
-};
-/*  collect the description popups of the object instances: the corpus
-    description Markdown of every object, pre-rendered to HTML into
-    its SPEC table entry (the embedded images and the rationale are
-    left out, as the popup shows the prose alone)  */
-const collectSpec = (objects, spec) => {
-    for (const object of objects) {
-        const text = (object.description?.description ?? "")
-            .replace(embeddingMarkup, (markup, _alt, reference) => embeddingCount(reference) > 0 ? "" : markup)
-            .trim();
-        const key = infoObjects?.get(object);
-        if (key !== undefined && text !== "")
-            spec[Number(key)][4] = scoped(object, () => block(text, true).toString().trim());
-        collectSpec(object.children, spec);
-    }
-};
-/*  the literal members of an "enum(...)"/"tags(...)" expression, or
-    of the "enum(...)"/"tags(...)" alternatives of a "list(...)" one
-    (empty for every other expression)  */
-const literalMembers = (expr) => expr.kind === "enum" || expr.kind === "tags" ? expr.members :
-    expr.kind === "list" ? expr.alternatives.flatMap(literalMembers) : [];
-/*  collect the properties of the schema configuration constrained by
-    literal members (an "enum(...)", a "tags(...)", or a "list(...)"
-    with such alternatives), keyed by object kind and property name  */
-const collectMembers = (nodes, result) => {
-    for (const schema of nodes) {
-        for (const property of schema.props ?? []) {
-            if (property.value === undefined)
-                continue;
-            try {
-                const expr = compileValueExpr(property.value);
-                if (literalMembers(expr).length > 0)
-                    result.set(`${schema.kind} ${property.name}`, expr);
-            }
-            catch {
-                /*  an invalid expression is the concern of lint  */
-            }
-        }
-        collectMembers(schema.children ?? [], result);
-    }
-    return result;
-};
-/*  render a property value, badging the individual members of an
-    "enum(...)" (a single member) or "tags(...)" (a member set) value
-    and the literal member items of a "list(...)" value (the other items,
-    like references, stay prose), moving its image embeddings behind the
-    value, rendered from the embedded image contents (as for a
-    description), not from the markup; an absent property renders as the
-    marker telling it apart from a property given with an empty value  */
-const inlineValue = (kind, property) => {
-    if (property === undefined)
-        return safe("<span class=\"value-absent\"></span>");
-    const { key, value, embedding } = property;
-    const expr = members?.get(`${kind} ${key}`);
-    const text = value
-        .replace(embeddingMarkup, (markup, _alt, reference) => embeddingCount(reference) > 0 ? "" : markup)
-        .trim();
-    const embeddings = renderEmbeddings(value, embedding ?? [])
-        .map((content) => `<div class="embedding">${content}</div>`).join("");
-    if (expr === undefined || text === "")
-        return safe(`${inline(text)}${embeddings}`);
-    const badge = (item) => `<span class="value-member">${inline(item)}</span>`;
-    if (expr.kind === "enum")
-        return safe(badge(text) + embeddings);
-    const items = splitItems(text).filter((item) => item !== "");
-    if (expr.kind === "tags")
-        return safe(items.map(badge).join(" ") + embeddings);
-    const literals = new Set(literalMembers(expr));
-    return safe(items.map((item) => literals.has(item) ? badge(item) : inline(item)).join(", ") + embeddings);
-};
-/*  expand the inline Markdown of the property values, with the
-    entries injected for unused properties (foreign to the object)
-    rendered as absent  */
-const inlineProperties = (object, properties) => properties.map((property) => ({ key: property.key,
-    info: infoKeyOf(object), infopath: infoRefOf(object),
-    value: inlineValue(object.kind, object.properties.includes(property) ? property : undefined) }));
-/*  resolve the format configuration of the kind of an object  */
-const formatOf = (object) => schemas?.get(object)?.format;
-/*  determine the maximum table columns configured on the kind of an
-    object (at least two, as a single column cannot carry a name and a
-    value)  */
-const maxColumnsOf = (object) => Math.max(2, formatOf(object)?.maxTableColumns ?? 4);
-/*  determine the effective properties of an object in schema order
-    (unknown keys appended in document order), with "withUnusedProps"
-    injecting the defined but still unused schema properties as empty
-    key/value entries  */
-const effectiveProperties = (object) => {
-    const schema = schemas?.get(object);
-    if (schema === undefined)
-        return object.properties;
-    const unused = schema.format?.withUnusedProps === true;
-    const merged = (schema.props ?? []).flatMap((prop) => {
-        const present = object.properties.filter((property) => property.key === prop.name);
-        return present.length > 0 ? present : (unused ? [{ key: prop.name, value: "" }] : []);
-    });
-    return [...merged, ...object.properties.filter((property) => !merged.includes(property))];
-};
-/*  determine the column shape of a potential compact table in schema
-    order (unknown keys appended in occurrence order), with
-    "withUnusedProps" injecting the defined but still unused schema
-    properties as additional columns  */
-const tableShape = (children) => {
-    const used = [...new Set(children.flatMap((child) => child.properties.map((property) => property.key)))];
-    const schema = schemas?.get(children[0]);
-    const names = (schema?.props ?? []).map((prop) => prop.name);
-    const known = schema?.format?.withUnusedProps === true ?
-        names : names.filter((name) => used.includes(name));
-    const keys = [...known, ...used.filter((key) => !names.includes(key))];
-    return { keys, desc: children.some((child) => child.description !== undefined || child.children.length > 0) };
-};
-/*  provide the children of an object taking part in the regular document
-    flow: a nested title object leaves the flow, as it is rendered as the
-    title page instead (a top-level one instead removes its whole artifact)  */
-const flowChildren = (object) => object.children.filter((child) => !isTitleObject(child));
-/*  decide whether a single-kind group of children collapses into the
-    concise (tabular) rendering: an explicit "format" type of the kind
-    wins, "auto" collapses the deepest level only, and inside an already
-    concise rendering context "auto" groups implicitly stay concise, too  */
-const conciseGroup = (group, schemaMap, concise) => {
-    const type = schemaMap?.get(group[0])?.format?.type ?? "auto";
-    if (type !== "auto")
-        return type === "concise";
-    return concise || group.every((child) => child.children.length === 0);
-};
-/*  group the children of an object by their kind, preserving order  */
-const groupChildren = (children) => {
-    const groups = new Map();
-    for (const child of children) {
-        const group = groups.get(child.kind);
-        if (group === undefined)
-            groups.set(child.kind, [child]);
-        else
-            group.push(child);
-    }
-    return [...groups.values()];
-};
-/*  render the children of an object group-wise by kind: a concise group
-    as one compact table, a complex group as regular nested object
-    renderings  */
-const renderChildren = (object, level, concise) => groupChildren(flowChildren(object)).map((group) => conciseGroup(group, schemas, concise) ?
-    renderTable(group, maxColumnsOf(group[0])) :
-    group.map((child) => renderObject(child, level, concise)).join("")).join("");
-/*  render the description cell of a table row: the description of the
-    object followed by its recursively rendered children (implicitly or
-    explicitly concise groups as nested sub-tables, explicitly complex
-    ones as regular nested object renderings pressed into the cell);
-    a cell left without any content renders as the absent marker,
-    exactly like a property cell of a not given property  */
-const renderCell = (child) => {
-    let html = child.description !== undefined ? renderDescription(child.description) : "";
-    html += renderChildren(child, 6, true);
-    return html.trim() !== "" ? html : "<span class=\"value-absent\"></span>";
-};
-/*  the pre-rendered diagram of an object as an embeddable block
-    (empty for an object without a configured or renderable diagram)  */
-const diagramOf = (object) => {
-    const diagram = diagrams?.get(object);
-    return diagram !== undefined ? safe(diagram) : "";
-};
-/*  the reference coverage of an object as a table: one row per
-    configured pattern, labeled by the kinds of the matching objects,
-    marked as object kinds and carrying the description popup of the
-    first matching object of each kind (by the bare pattern, if none
-    matches), with the counts and the ratio as a bar (empty for an
-    object without a configured coverage)  */
-const coverageOf = (object) => {
-    const coverage = coverages?.get(object);
-    if (coverage === undefined)
-        return "";
-    const kindLabel = (entry, kind) => {
-        const first = [...entry.covered, ...entry.uncovered].find((target) => target.kind === kind);
-        return `<span class="object-kind"${first !== undefined ? infoAttr(first) : ""}>${escapeHtml(kind)}</span>`;
-    };
-    return safe(render("Coverage", { Coverage: coverage.map((entry, i) => ({
-            label: entry.kinds.length > 0 ?
-                safe(entry.kinds.map((kind) => kindLabel(entry, kind)).join(", ")) :
-                entry.pattern.replace(/^\[\[(.*)\]\]$/s, "$1"),
-            covered: entry.covered.length,
-            total: entry.covered.length + entry.uncovered.length,
-            ratio: coverageRatio(entry.covered.length, entry.covered.length + entry.uncovered.length),
-            even: i % 2 === 1
-        })) }));
-};
-/*  the estimated number of characters a text line spanning the
-    entire content width holds (60rem at the document font)  */
-const lineChars = 140;
-/*  omit the long texts of the comparable cells of a table row, the
-    server-side heuristic counterpart of the client-side cell text
-    folding, judging a cell by its estimated number of text lines (its
-    plain text per block, wrapped at the characters its column width
-    share holds per line) instead of its rendered height: a cell
-    exceeding every other one by more than the "maxCellHeight"
-    percentage is cut back onto the whole lines of that limit (less the
-    room of the mark) at a word boundary, its open elements closed
-    again, and ends in a grey "[...]" mark,
-    unless that hides less than 25% of it, where the empty cells and the
-    ones carrying further cells or a diagram take no part at all  */
-const omitLong = (cells, shares, percent = 0) => {
-    if (omits?.has("text:long") !== true)
-        return cells;
-    const htmls = cells.map(String);
-    const plain = (html) => html.replace(/<[^>]*>/g, "").trim().length;
-    const lengths = htmls.map((html) => (/<td[\s>]|<div class="diagram"/).test(html) ? 0 : plain(html));
-    if (lengths.filter((length) => length > 0).length < 2)
-        return cells;
-    const chars = shares.map((share) => Math.max(1, Math.floor(lineChars * share)));
-    const lines = htmls.map((html, i) => lengths[i] === 0 ? 0 :
-        html.split(/<\/(?:p|li|div|pre)>|<br\s*\/?>/)
-            .reduce((sum, block) => sum + Math.ceil(plain(block) / chars[i]), 0));
-    return htmls.map((html, i) => {
-        const other = Math.max(...lines.filter((_, j) => j !== i)) *
-            (1 + (percent > 0 ? percent : cellHeightDefault) / 100);
-        const limit = Math.floor(other) * chars[i] - " [...]".length;
-        if (lines[i] === 0 || lines[i] <= other || limit > lengths[i] * (1 - cellGainMin / 100))
-            return cells[i];
-        const open = new Array();
-        let out = "";
-        let count = 0;
-        for (const [token] of html.matchAll(/<[^>]*>|[^<]+/g)) {
-            if (token.startsWith("<")) {
-                const tag = (/^<(\/?)([a-zA-Z][^\s/>]*)[^>]*?(\/?)>$/).exec(token);
-                if (tag?.[1] === "/")
-                    open.pop();
-                else if (tag !== null && tag[3] !== "/" && !(/^(?:br|hr|img|input|wbr)$/).test(tag[2]))
-                    open.push(tag[2]);
-            }
-            else if (count + token.length > limit)
-                return safe(out + token.slice(0, limit - count).replace(/\S*$/, "") +
-                    "<span class=\"omit\">[...]</span>" +
-                    open.reverse().map((name) => `</${name}>`).join(""));
-            else
-                count += token.length;
-            out += token;
-        }
-        return cells[i];
-    });
-};
-/*  render a single-kind group of children into one compact table:
-    the name first, then the property columns, then the description;
-    a group wider than maxColumns, or carrying diagrams, instead chunks
-    the property and description cells (and the leading diagram) of
-    every object into an embedded per-object table, as a diagram is
-    identifiable only under a header of its own, not under the column
-    headers of a plain table  */
-const renderTable = (children, maxColumns) => {
-    const { keys, desc } = tableShape(children);
-    const diagrammed = children.some((child) => diagrams?.has(child) === true);
-    if (!diagrammed && 1 + keys.length + (desc ? 1 : 0) <= maxColumns)
-        return render("Table", { Table: {
-                head: children[0].kind !== "" ? children[0].kind : "Name",
-                info: infoKeyOf(children[0]),
-                infopath: infoRefOf(children[0], false),
-                keys,
-                desc,
-                fold: formatOf(children[0])?.maxCellHeight,
-                /*  under the fixed table layout the description column claims
-                    twice the share of a regular column, compressing the others  */
-                width: Math.round(200 / (keys.length + 3)),
-                rows: children.map((child, i) => scoped(child, () => {
-                    const values = keys.map((key) => inlineValue(child.kind, child.properties.find((property) => property.key === key)));
-                    const shares = desc ? [...keys.map(() => 1), 2] : keys.map(() => 1);
-                    const cells = omitLong(desc ? [...values, safe(renderCell(child))] : values, shares.map((share) => share / (keys.length + (desc ? 3 : 1))), formatOf(children[0])?.maxCellHeight);
-                    return {
-                        id: anchorOf(child),
-                        anchor: child.anchor,
-                        paren: child.paren,
-                        primary: child.primary,
-                        spec: infoRefOf(child),
-                        name: inline(child.name),
-                        even: i % 2 === 1,
-                        values: cells.slice(0, keys.length),
-                        description: cells[keys.length]
-                    };
-                }))
-            } });
-    /*  the embedded rows hold at most maxColumns - 1 cells (of the
-        group-wide union of property keys, plus the trailing description),
-        with the last cell spanning the leftover columns of the final row  */
-    const size = Math.max(1, maxColumns - 1);
-    return render("TableChunked", { Table: {
-            head: children[0].kind !== "" ? children[0].kind : "Name",
-            info: infoKeyOf(children[0]),
-            infopath: infoRefOf(children[0], false),
-            desc,
-            fold: formatOf(children[0])?.maxCellHeight,
-            width: Math.round(100 / maxColumns),
-            rows: children.map((child, i) => scoped(child, () => {
-                const cells = keys.map((key) => ({ key, desc: false, span: 1,
-                    value: inlineValue(child.kind, child.properties.find((property) => property.key === key)) }));
-                if (desc)
-                    cells.push({ key: "Description", desc: true, span: 1,
-                        value: safe(renderCell(child)) });
-                const chunks = new Array();
-                for (let pos = 0; pos < cells.length; pos += size)
-                    chunks.push(cells.slice(pos, pos + size));
-                if (chunks.length > 0) {
-                    const last = chunks[chunks.length - 1];
-                    last[last.length - 1].span = size - last.length + 1;
-                }
-                for (const chunk of chunks)
-                    omitLong(chunk.map((cell) => cell.value), chunk.map((cell) => cell.span / maxColumns), formatOf(children[0])?.maxCellHeight)
-                        .forEach((value, k) => { chunk[k].value = value; });
-                /*  the diagram leads the chunks as a full-width chunk of its
-                    own, headed like the description  */
-                const diagram = diagramOf(child);
-                if (diagram !== "")
-                    chunks.unshift([{ key: "Diagram", desc: true, span: size, value: diagram }]);
-                return {
-                    id: anchorOf(child),
-                    anchor: child.anchor,
-                    paren: child.paren,
-                    primary: child.primary,
-                    spec: infoRefOf(child),
-                    name: inline(child.name),
-                    even: i % 2 === 1,
-                    chunks
-                };
-            }))
-        } });
-};
-/*  recursively render an object into HTML  */
-const renderObject = (object, level, concise) => {
-    const properties = effectiveProperties(object);
-    return scoped(object, () => render("Object", { Object: {
-            level: Math.min(level, 6),
-            kind: object.kind,
-            info: infoKeyOf(object),
-            infopath: infoRefOf(object, false),
-            spec: infoRefOf(object),
-            id: anchorOf(object),
-            anchor: object.anchor,
-            paren: object.paren,
-            primary: object.primary,
-            name: inline(object.name),
-            diagram: diagramOf(object),
-            properties: properties.length > 0 ?
-                safe(render("Properties", { Properties: inlineProperties(object, properties),
-                    Fold: formatOf(object)?.maxCellHeight })) : "",
-            description: object.description !== undefined ?
-                safe(renderDescription(object.description)) : "",
-            coverage: coverageOf(object),
-            children: safe(renderChildren(object, level + 1, concise))
-        } }));
-};
-/*  format a timestamp as its calendar date in local time (the
-    frontmatter timestamps are parsed in local time, too, so the UTC
-    date of toISOString() could shift the day)  */
-const formatDate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-` +
-    String(date.getDate()).padStart(2, "0");
-/*  render the title object into a title page  */
-const renderTitlePage = (object, created, modified) => {
-    const prop = (name) => object.properties.find((property) => property.key === name)?.value;
-    const inlineProp = (name) => {
-        const value = prop(name);
-        return value !== undefined && value.trim() !== "" ? inline(value) : "";
-    };
-    const rest = object.properties.filter((property) => !["LOGO", "TITLE", "SUBTITLE", "AUTHOR", "VERSION",
-        "LANG", "CHARSET", "PAPER-SIZE", "THEME-STYLE", "THEME-TONE"].includes(property.key));
-    /*  the logo is rendered above the title, from the embedded image content
-        of the LOGO property or, for a non-embeddable reference, as its inline
-        Markdown; without a (non-empty) LOGO property the built-in SpecBook
-        logo is used, in both its theme variants  */
-    const logo = object.properties.find((property) => property.key === "LOGO" && property.value.trim() !== "");
-    const image = logo !== undefined ? renderEmbeddings(logo.value, logo.embedding ?? []) : [];
-    return scoped(object, () => render("TitlePage", { TitlePage: {
-            logo: logo === undefined ?
-                safe(renderThemed(embeddingThemes.map((theme) => `<img src="${fallbackLogo(theme)}" alt="SpecBook"/>`))) :
-                (image.length > 0 ? safe(image.join("")) : inline(logo.value)),
-            title: inline(prop("TITLE") ?? object.name),
-            subtitle: inlineProp("SUBTITLE"),
-            author: inlineProp("AUTHOR"),
-            version: inlineProp("VERSION"),
-            description: object.description !== undefined ?
-                safe(renderDescription(object.description)) : "",
-            properties: rest.length > 0 ?
-                safe(render("Properties", { Properties: inlineProperties(object, rest) })) : "",
-            created, modified
-        } }));
-};
-/*  render an artifact into HTML  */
-const renderArtifact = (artifact) => render("Artifact", { Artifact: {
-        objects: safe(artifact.objects.map((object) => renderObject(object, 1, false)).join(""))
-    } });
-/*  provide the children of an object rendered with headings of their own
-    (skipping the child groups collapsing into compact tables), which
-    are the ones taking part in the table of contents and its side panel  */
-const headingChildren = (object) => groupChildren(flowChildren(object))
-    .filter((group) => !conciseGroup(group, schemas, false))
-    .flat();
-/*  flatten the hierarchy of the rendered object headings (exactly like
-    the PDF outline) into the entries of the table of contents, each
-    carrying its nesting level and its optional page number  */
-const tocEntries = (objects, pages) => {
-    const entries = [];
-    const collect = (objects, level) => {
-        for (const object of objects) {
-            const id = anchorOf(object);
-            entries.push({ id, kind: object.kind,
-                info: infoKeyOf(object), infopath: infoRefOf(object, false), spec: infoRefOf(object),
-                name: inline(object.name), level: Math.min(level, 6), page: pages?.get(id) });
-            collect(headingChildren(object), level + 1);
-        }
-    };
-    collect(objects, 1);
-    return entries;
-};
-/*  render the side panel of the table of contents (its behavior is
-    driven by the client-side script above): the unnumbered entries of
-    the front matter (title page, table and diagram of contents, as far
-    as present) are followed by the hierarchical entries of the rendered
-    object headings, exactly like the table of contents itself  */
-const renderTocPanel = (objects, title, doc) => {
-    const entries = (objects) => objects.length === 0 ? "" : render("TocPanelEntries", { Entries: objects.map((object) => ({
-            id: anchorOf(object),
-            kind: object.kind,
-            info: infoKeyOf(object),
-            infopath: infoRefOf(object, false),
-            spec: infoRefOf(object),
-            name: inline(object.name),
-            children: safe(entries(headingChildren(object)))
-        })) });
-    return render("TocPanel", { TocPanel: { title, doc, entries: safe(entries(objects)) } });
-};
+import { optimizeImages, analyzeImages } from "./specbook-export-image.js";
+import { renderEmbeddedDiagrams, objectLevels } from "./specbook-export-diagram.js";
+import { prepareListings } from "./specbook-export-code.js";
+import { specCoverage } from "./specbook-coverage.js";
+import { safe, render } from "./specbook-export-html-template.js";
+import { themeScript, placeholderStylesheet, realtimeScript, scrollProgressScript, maximizeScript, tocPanelScript, infoScript } from "./specbook-export-html-widget.js";
+import { foldScript, omittedControls } from "./specbook-export-html-fold.js";
+import { withDocument, makeLinker, collectInfo, collectSpec, collectMembers, conciseGroup, flowChildren, groupChildren, formatDate, renderTitlePage, renderArtifact, tocEntries, renderTocPanel } from "./specbook-export-html-render.js";
 /*  derive the hierarchy of the rendered object headings, skipping the
     title page object and the child groups collapsing into compact tables  */
 export const htmlOutline = (specification, config) => {
@@ -1904,27 +83,6 @@ const scaledDiagrams = async (specification, config, verbose, omit) => {
     }
     return { svgs: rendered, css: Array.from(rules).join("\n") };
 };
-/*  create the reference expander of a document: "[[xxx]]" references
-    expand into hyperlinks (an unresolvable or ambiguous reference stays
-    literal, marked as broken), resolved from the object currently
-    rendered and targeting the fully-qualified anchor paths of the
-    objects: in the full form (kind, name, and link symbol), or in the
-    compact form for prose (the object icon and the name only, via CSS
-    and markup, with the full form shown by the description popups)  */
-const makeLinker = (index) => (text, compact) => expandReferences(text, (reference) => {
-    const target = resolveUnique(index, reference, scope ?? undefined).target;
-    if (target === undefined)
-        return `<span class="link-broken">[[${escapeHtml(reference)}]]</span>`;
-    /*  the full form carries the popup attributes on its kind and
-        name, with the kind bold in the accent color and the name
-        bold in the regular text color (via the stylesheet)  */
-    const full = `<strong class="object-kind"${infoAttr(target)}>${escapeHtml(target.kind)}:</strong>` +
-        ` <span class="object-name"${specAttr(target)}>${target.name}</span>` +
-        " <span class=\"link-symbol\">&#x26AD;</span>";
-    return compact ?
-        `<a href="#${escapeHtml(anchorOf(target))}" class="link-compact"${specAttr(target)}>${target.name}</a>` :
-        `<a href="#${escapeHtml(anchorOf(target))}" class="link-full">${full}</a>`;
-});
 /*  render the placeholder page of the live preview, served instead of
     the document before the first successful export: it carries the very
     same client-side script as the regular export, so the page recovers
@@ -1938,44 +96,15 @@ export const renderPlaceholder = (message) => render("Placeholder", { Placeholde
         realtime: safe(realtimeScript),
         message
     } });
-/*  the fold controls the omitted aspects drop, along with the implied
-    ones (no type control without diagrams of that type, no level
-    control without diagrams from that level on, no fold tab without
-    any control, which lets the tabs below it move up), plus the extra
-    style rules the omission brings (the "[...]" mark of the omitted
-    long texts and the moved-up tabs of a dropped fold tab)  */
-const omittedControls = (omit) => {
-    const none = omit.has("diagram:1")
-        || (omit.has("diagram:graph") && omit.has("diagram:hub") && omit.has("diagram:grid"));
-    const omitted = {
-        graph: none || omit.has("diagram:graph"),
-        hub: none || omit.has("diagram:hub"),
-        grid: none || omit.has("diagram:grid"),
-        level1: none,
-        level2: none || omit.has("diagram:2"),
-        level3: none || omit.has("diagram:2") || omit.has("diagram:3"),
-        text: omit.has("text:long"),
-        all: none && omit.has("text:long")
-    };
-    const css = (omitted.text ? "\nspan.omit { color: var(--theme-color-specbook-muted) }" : "") +
-        (omitted.all ? "\nnav.toc-panel div.toc-tab { top: 10.66rem }" +
-            "\ndiv.realtime-status { top: 13.89rem }" : "");
-    return { omitted, css };
-};
 /*  wrap the pre-rendered diagrams into their blocks, carrying the
     diagram type and the object tree nesting level the folding
     distinguishes (the top-level objects of an artifact being level 1)  */
-const wrapDiagrams = (index, svgs) => {
+const wrapDiagrams = (svgs, schemas, levels) => {
     const blocks = new Map();
-    for (const node of index) {
-        const svg = svgs.get(node.object);
-        if (svg === undefined)
-            continue;
-        let level = 1;
-        for (let parent = node.parent; parent !== undefined; parent = parent.parent)
-            level++;
-        const type = schemas?.get(node.object)?.diagram?.type ?? "graph";
-        blocks.set(node.object, `<div class="diagram" data-type="${type}" data-level="${level}">${svg}</div>`);
+    for (const [object, svg] of svgs) {
+        const level = levels.get(object) ?? 1;
+        const type = schemas?.get(object)?.diagram?.type ?? "graph";
+        blocks.set(object, `<div class="diagram" data-type="${type}" data-level="${level}">${svg}</div>`);
     }
     return blocks;
 };
@@ -1984,8 +113,9 @@ const wrapDiagrams = (index, svgs) => {
     artifact timestamps aggregated into min(Created)/max(Modified),
     optional per-anchor page numbers attached to the ToC entries,
     optionally the client-side script of the live preview injected and
-    aspects omitted (see "ExportOptions"), and the embedded images
-    optimized for the screen or for print (the PDF)  */
+    aspects omitted (see "ExportOptions"), the embedded images
+    optimized for the screen or for print (the PDF), and the embedded
+    Mermaid/D2 diagrams rendered in the theme colors  */
 export const renderHtml = async (specification, config, tocPages, css, options = {}, verbose, print = false) => {
     /*  pre-render the configured diagrams as scaled embeddable SVGs
         (except for the omitted ones, which hence leave no trace at all)  */
@@ -1994,47 +124,63 @@ export const renderHtml = async (specification, config, tocPages, css, options =
         await scaledDiagrams(specification, config, verbose, omit) : null;
     /*  the fold controls and the extra style rules of the omitted aspects  */
     const { omitted, css: omitCss } = omittedControls(omit);
-    /*  pre-optimize the embedded images (downscaled and re-encoded)  */
+    /*  pre-optimize the embedded images (downscaled and re-encoded)
+        and judge the raster ones for their treatment on the dark theme  */
     const optimized = await optimizeImages(specification, print, verbose);
+    const analyzed = await analyzeImages(specification, verbose);
+    /*  pre-render the embedded Mermaid/D2 diagrams (except the omitted ones)
+        and prepare the syntax highlighting of the code listings  */
+    const sources = await renderEmbeddedDiagrams(specification, verbose, omit);
+    const renderer = await prepareListings(specification, verbose);
+    /*  collect the per-document rendering state, where the description
+        popup keys are filled in below, once the state is established  */
+    const index = buildLinkIndex(specification);
+    const schemas = config !== undefined ? collectSchemas(specification, config) : null;
+    const levels = objectLevels(specification);
+    const infoKeys = new Map();
+    const infoObjects = new Map();
+    /*  wrap the diagrams into their blocks, carrying the diagram type
+        and the object tree nesting level the folding distinguishes  */
+    const diagrams = rendered !== null ? wrapDiagrams(rendered.svgs, schemas, levels) : null;
     /*  the document language selects the smart typography quote style  */
     const lang = documentLang(specification);
-    quotes = quoteStyles[lang?.toLowerCase().split(/[-_]/)[0] ?? "en"] ?? quoteStyles.en;
     /*  establish the per-document rendering state (released again
-        below, also on a failure of the collecting or rendering)  */
-    const index = buildLinkIndex(specification);
-    try {
-        anchors = anchorPaths(index);
-        members = config !== undefined ? collectMembers(config, new Map()) : null;
-        schemas = config !== undefined ? collectSchemas(specification, config) : null;
-        images = optimized;
-        coverages = schemas !== null ? specCoverage(index, schemas) : null;
-        omits = omit;
-        /*  wrap the diagrams into their blocks, carrying the diagram type
-            and the object tree nesting level the folding distinguishes  */
-        diagrams = rendered !== null ? wrapDiagrams(index, rendered.svgs) : null;
+        afterwards, also on a failure of the collecting or rendering)  */
+    return withDocument({
+        lang,
+        linker: makeLinker(index),
+        anchors: anchorPaths(index),
+        members: config !== undefined ? collectMembers(config, new Map()) : null,
+        schemas,
+        diagrams,
+        images: optimized,
+        rasters: analyzed,
+        embedded: sources,
+        listings: renderer,
+        levels,
+        coverages: schemas !== null ? specCoverage(index, schemas) : null,
+        infoKeys: config !== undefined ? infoKeys : null,
+        infoObjects: config !== undefined ? infoObjects : null,
+        omits: omit
+    }, () => {
         /*  collect the schema descriptions for the description popups,
             plus the object table composing their title paths  */
         let info = null;
         const spec = [];
         if (config !== undefined) {
-            infoKeys = new Map();
             info = [];
             collectInfo(config, infoKeys, info);
-            const objects = new Map();
-            for (const node of index)
-                objects.set(node.object, String(objects.size));
-            for (const node of index)
-                spec.push([node.object.id, node.parent !== undefined ? Number(objects.get(node.parent.object)) : -1,
+            for (const node of index) {
+                infoObjects.set(node.object, String(node.pos));
+                spec.push([node.object.id, node.parent?.pos ?? -1,
                     node.object.kind, plainText(node.object.name).trim(), ""]);
-            infoObjects = objects;
-        }
-        linker = makeLinker(index);
-        /*  collect the corpus descriptions of the object instances for the
-            description popups (after the linker is in place, as the
-            pre-rendered descriptions expand their references, too)  */
-        if (info !== null)
+            }
+            /*  collect the corpus descriptions of the object instances for the
+                description popups (after the object table, as the
+                pre-rendered descriptions expand their references, too)  */
             for (const artifact of specification.artifacts)
                 collectSpec(artifact.objects, spec);
+        }
         /*  the artifact timestamps aggregate into the earliest creation
             and the latest modification timestamp of the document  */
         const created = new Date(Math.min(...specification.artifacts.map((artifact) => artifact.created.getTime())));
@@ -2070,20 +216,5 @@ export const renderHtml = async (specification, config, tocPages, css, options =
                 doc: doc !== undefined ? safe(render("Doc", { Doc: { diagram: safe(doc) } })) : "",
                 artifacts: safe(artifacts.map((artifact) => renderArtifact(artifact)).join(""))
             } });
-    }
-    finally {
-        /*  release the per-document state (also on a rendering failure),
-            as it would otherwise retain the specification (and its
-            embedded images) until the next rendering  */
-        linker = null;
-        anchors = null;
-        members = null;
-        schemas = null;
-        diagrams = null;
-        images = null;
-        coverages = null;
-        infoKeys = null;
-        infoObjects = null;
-        omits = null;
-    }
+    });
 };