@rse/specbook 1.2.15 → 1.3.0

package/dst/specbook-export-html.js

@@ -11,10 +11,11 @@ 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, embeddingMimeType, embeddingThemes, embeddingVariants } from "./specbook-parse-common.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 { 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  */
@@ -44,13 +45,18 @@ const templates = {
                         <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">
-                        <div class="fold-diagrams" title="fold/unfold all 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>
-                        <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>
+                        {% 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 }}
@@ -109,7 +115,7 @@ const templates = {
             <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 }}" data-info-id="{{ entry.specid }}" data-info-path="{{ entry.specpath }}"{% 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>
+                <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>
@@ -132,7 +138,7 @@ const templates = {
     "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 }}" data-info-id="{{ entry.specid }}" data-info-path="{{ entry.specpath }}"{% endif %}>{{ entry.name }}</span></span></a>{{ entry.children }}</li>
+            <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>
     `,
@@ -140,7 +146,7 @@ const templates = {
     "Doc": textframe `
         <nav class="doc" id="doc">
             <h1>Diagram of Contents</h1>
-            <div class="diagram">{{ Doc.diagram }}</div>
+            {{ Doc.diagram }}
         </nav>
     `,
     /*  <Artifact/>  */
@@ -152,7 +158,7 @@ const templates = {
     /*  <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 }}" data-info-id="{{ Object.specid }}" data-info-path="{{ Object.specpath }}"{% 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 }}>
+            <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 }}
@@ -207,7 +213,7 @@ const templates = {
             <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 }}" data-info-id="{{ row.specid }}" data-info-path="{{ row.specpath }}"{% 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><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>
@@ -221,17 +227,17 @@ const templates = {
             <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</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 }}" data-info-id="{{ row.specid }}" data-info-path="{{ row.specpath }}"{% 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><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.specpath }}" data-info-prop="{{ cell.key }}"{% endif %}>{{ cell.key }}</span></th>{% endfor %}</tr>
+                            <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>
@@ -306,17 +312,17 @@ const realtimeScript = textframe `
             /*  a superseded update (an overlapping newer one started
                 meanwhile) is dropped, as its stale page could arrive last  */
             const mine = ++seq
-            let response
+            let html
             try {
-                response = await fetch(window.location.pathname, { cache: "no-store" })
+                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 (!response.ok)
-                return
-            const html = await response.text()
             if (mine !== seq)
                 return
             const doc = new DOMParser().parseFromString(html, "text/html")
@@ -328,6 +334,9 @@ const realtimeScript = textframe `
             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
@@ -408,25 +417,37 @@ const scrollProgressScript = textframe `
 `;
 /*  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 two
-    controls of the fold tab fold and unfold all diagrams and all cell
-    texts at once, with their state persisted across page loads and
-    their icons (plus the tab icon) marked while anything of their kind
-    is folded. 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  */
-const foldScript = textframe `
+    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 = { diagram: tab.querySelector("div.fold-diagrams"),
-            text: tab.querySelector("div.fold-texts") }
+        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 two controls out of the tab (and
+        /*  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  */ }
@@ -465,23 +486,29 @@ const foldScript = textframe `
 
         /*  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 tab
-            control  */
-        const folds = { diagram: [], text: [] }
+            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 fold = document.createElement("div")
+            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.diagram.querySelector("svg").cloneNode(true))
+            label.appendChild(controls[type].querySelector("svg").cloneNode(true))
             fold.append(chevron, label, el)
             chevron.addEventListener("click", () => {
                 fold.classList.toggle("folded")
                 sync()
             })
-            folds.diagram.push(fold)
+            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
@@ -525,31 +552,6 @@ const foldScript = textframe `
             && cell.querySelector("div.diagram") === null
             && (cell.textContent.trim() !== "" || cell.querySelector("img") !== null)
 
-        /*  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] })
-            })
-        })
-
         /*  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) => {
@@ -557,102 +559,215 @@ const foldScript = textframe `
                 node.classList.add("fold-rest")
             else if (node.nodeType === Node.TEXT_NODE) {
                 const span = document.createElement("span")
-                span.className = "fold-rest"
+                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 = 25
 
-        /*  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
+        /*  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
                 }
-                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, which the chevron
-                alone has to leave behind, as the hidden remainder stays
-                inert without the class -- which a kept fold sheds
-                again, too, as every cell starts out unfolded  */
-            cut.cell.classList.add("folded")
-            const gained = height(cut.cell) <= cut.full * (1 - cellGain / 100)
-            cut.cell.classList.remove("folded")
-            if (!gained) {
-                chevron.remove()
-                continue
+                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()
+                })
             }
-            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 control of a kind while anything of that kind is
-            folded, and the tab itself while any kind at all is  */
+        /*  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 = () => {
-            let any = false
-            for (const kind of Object.keys(folds)) {
-                const folded = folds[kind].some((fold) => fold.classList.contains("folded"))
-                controls[kind].classList.toggle("folded", folded)
-                any ||= folded
-            }
-            tab.classList.toggle("folded", any)
+            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"))))
         }
-        for (const kind of Object.keys(folds)) {
-            /*  without a stored state the rendered one stands, which is
-                everything unfolded  */
-            let stored = null
-            try { stored = localStorage.getItem("specbook-fold-" + kind) }
+
+        /*  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 !== null)
-                folds[kind].forEach((fold) => { fold.classList.toggle("folded", stored === "folded") })
+        }
+        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" && folds[kind] !== undefined)
+                .forEach((kind) => { active.add(kind) })
+            apply()
+        }
+        for (const kind of Object.keys(folds)) {
             controls[kind].addEventListener("click", () => {
-                const all = !folds[kind].every((fold) => fold.classList.contains("folded"))
-                folds[kind].forEach((fold) => { fold.classList.toggle("folded", all) })
-                try { localStorage.setItem("specbook-fold-" + kind, all ? "folded" : "unfolded") }
+                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
@@ -714,14 +829,14 @@ const maximizeScript = textframe `
             overlay.classList.add("open")
             document.documentElement.classList.add("maximized")
             if (fullscreen)
-                overlay.requestFullscreen().catch(() => {})
+                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(() => {})
+                document.exitFullscreen().catch(() => { /*  a fullscreen left already needs no exit  */ })
         }
         close.addEventListener("click", shut)
         overlay.addEventListener("click", (event) => {
@@ -865,10 +980,16 @@ const tocPanelScript = textframe `
     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 "data-info-path" object
-    path (an instance popup trailing the "data-info-id" anchor id of
-    the object) and fed from the injected INFO/SPEC maps of pre-rendered
-    description HTML; the popup is capped at 40% viewport width and
+    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  */
@@ -919,6 +1040,14 @@ const infoPopupScript = textframe `
                     return
             }
             current = el
+
+            /*  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 key   = source.getAttribute("data-info")
             const spec  = source.getAttribute("data-info-spec")
             const prop  = source.getAttribute("data-info-prop")
@@ -933,7 +1062,9 @@ const infoPopupScript = textframe `
                 span.textContent = "▷"
                 return span
             }
-            const segments = (source.getAttribute("data-info-path") ?? key ?? spec).split(" . ")
+            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())
@@ -967,10 +1098,9 @@ const infoPopupScript = textframe `
             }
 
             /*  the anchor id of an object instance (explicit or derived
-                from its name, carried by the "data-info-id" key) trails
-                the last segment  */
-            const anchor = source.getAttribute("data-info-id")
-            if (spec !== null && anchor !== null) {
+                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")
@@ -989,8 +1119,8 @@ const infoPopupScript = textframe `
             popup.replaceChildren(title)
             const entry = key !== null ? INFO[key] : undefined
             const desc  = prop !== null ? entry?.p?.[prop] :
-                (spec !== null ? SPEC[spec] : entry?.d)
-            if (desc !== undefined) {
+                (spec !== null ? SPEC[spec]?.[4] : entry?.d)
+            if (desc !== undefined && desc !== "") {
                 const text = document.createElement("div")
                 text.className = "info-desc"
                 text.innerHTML = desc
@@ -1114,17 +1244,20 @@ const render = (name, context) => {
 };
 /*  the active per-document reference expander, fully-qualified
     anchor paths, member-carrying property value constraints, object
-    schema nodes, pre-rendered diagram SVGs, reference coverages,
-    description popup keys of the schema nodes, and object parents of
-    the description popup title paths (all set during HTML rendering)  */
+    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 infoParents = 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  */
@@ -1141,49 +1274,43 @@ const scoped = (object, body) => {
 };
 /*  determine the fully-qualified anchor path of an object  */
 const anchorOf = (object) => anchors?.get(object) ?? object.id;
-/*  determine the description popup key of an object (the qualified
-    title path of its schema node)  */
+/*  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 description popup title path of an object: the chain
-    of "KIND: Name" segments from the artifact down to the object
-    (arbitrarily deep), where "named = false" keeps the last segment
-    kind-only, as the kind popups (and the group headers of the compact
-    tables) describe the object class instead of the single instance  */
-const infoPathOf = (object, named = true) => {
-    const parent = infoParents?.get(object);
-    const prefix = parent !== undefined ? `${infoPathOf(parent)} . ` : "";
-    const name = named ? plainText(object.name).trim() : "";
-    const segment = name !== "" && object.kind !== "" ? `${object.kind}: ${name}` :
-        (name !== "" ? name : object.kind);
-    return prefix + segment;
+/*  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
-    of an object as "data-info" attributes for the manually assembled
-    hyperlink markup (the kind popup of the full hyperlinks)  */
+    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);
-    return key !== undefined ?
-        ` data-info="${escapeHtml(key)}" data-info-path="${escapeHtml(infoPathOf(object, false))}"` : "";
+    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}"` : "";
 };
-/*  render the corpus description popup key (the fully-qualified anchor
-    path), anchor id, and name-ending title path of an object as
-    "data-info-spec" attributes for the manually assembled hyperlink markup (the
-    instance popup of the compact and full hyperlinks)  */
-const specAttr = (object) => infoParents !== null ?
-    ` data-info-spec="${escapeHtml(anchorOf(object))}" data-info-id="${escapeHtml(object.id)}"` +
-        ` data-info-path="${escapeHtml(infoPathOf(object))}"` : "";
-/*  collect the description popup map and the qualified title paths of
-    the schema nodes (the artifact kind leading its name, the nested
-    kinds appended), with the description Markdown of the objects and
-    properties pre-rendered to HTML  */
-const collectInfo = (nodes, prefix, keys, info) => {
+/*  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) {
-        const path = prefix !== "" ? `${prefix} . ${schema.kind}` :
-            (schema.name !== undefined ? `${schema.kind}: ${schema.name}` : schema.kind);
-        keys.set(schema, path);
+        keys.set(schema, String(info.length));
         const entry = {};
         if (schema.desc !== undefined)
             entry.d = marked.parse(schema.desc, { async: false }).trim();
@@ -1193,17 +1320,17 @@ const collectInfo = (nodes, prefix, keys, info) => {
             entry.p ??= {};
             entry.p[property.name] = marked.parse(property.desc, { async: false }).trim();
         }
-        if (entry.d !== undefined || entry.p !== undefined)
-            info[path] = entry;
-        collectInfo(schema.children ?? [], path, keys, info);
+        info.push(entry);
+        collectInfo(schema.children ?? [], keys, info);
     }
 };
-/*  inject the description popup maps into their client-side script ("<"
+/*  inject the description popup tables into their client-side script ("<"
     escaped, so no embedded HTML can close the surrounding <script>
-    element)  */
+    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("@INFO@", () => JSON.stringify(info).replace(/</g, "\\u003c"))
-    .replace("@SPEC@", () => JSON.stringify(spec).replace(/</g, "\\u003c"));
+    .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)  */
@@ -1217,11 +1344,12 @@ 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 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 = (content, alt) => {
+/*  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)}"/>`;
@@ -1229,7 +1357,7 @@ const renderImage = (content, 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 = (images) => images.map((image, i) => `<span class="theme-${embeddingThemes[i]}-only">${image}</span>`).join("");
+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
@@ -1238,18 +1366,17 @@ const renderEmbeddings = (text, embedding) => {
     const result = new Array();
     let i = 0;
     for (const m of text.matchAll(embeddingRegex)) {
-        const reference = m[2].trim();
-        if (embeddingMimeType(reference) === undefined)
+        const count = embeddingCount(m[2]);
+        if (count === 0)
             continue;
-        const variants = embeddingVariants(reference);
-        const contents = embedding.slice(i, i + variants.length);
-        const images = contents.filter((content) => content !== "")
+        const contents = embedding.slice(i, i + count);
+        const variants = contents.filter((content) => content !== "")
             .map((content) => renderImage(content, m[1].trim()));
-        i += variants.length;
-        if (variants.length > 1 && images.length === variants.length)
-            result.push(renderThemed(images));
+        i += count;
+        if (count > 1 && variants.length === count)
+            result.push(renderThemed(variants));
         else
-            result.push(...images);
+            result.push(...variants);
     }
     return result;
 };
@@ -1260,7 +1387,7 @@ const embeddingMarkup = new RegExp(`[ \\t]*${embeddingRegex.source}`, "g");
     moving the file embeddings to the end of the description  */
 const renderDescription = (description) => {
     const text = description.description
-        .replace(embeddingMarkup, (markup, _alt, reference) => embeddingMimeType(reference.trim()) !== undefined ? "" : markup)
+        .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);
@@ -1272,17 +1399,18 @@ const renderDescription = (description) => {
             embeddings
         } });
 };
-/*  collect the description popup map of the object instances: the
-    corpus description Markdown of every object, pre-rendered to HTML
-    and keyed by the fully-qualified anchor path (the embedded images
-    and the rationale are left out, as the popup shows the prose alone)  */
+/*  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) => embeddingMimeType(reference.trim()) !== undefined ? "" : markup)
+            .replace(embeddingMarkup, (markup, _alt, reference) => embeddingCount(reference) > 0 ? "" : markup)
             .trim();
-        if (text !== "")
-            spec[anchorOf(object)] = scoped(object, () => block(text, true).toString().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);
     }
 };
@@ -1325,7 +1453,7 @@ const inlineValue = (kind, property) => {
     const { key, value, embedding } = property;
     const expr = members?.get(`${kind} ${key}`);
     const text = value
-        .replace(embeddingMarkup, (markup, _alt, reference) => embeddingMimeType(reference.trim()) !== undefined ? "" : markup)
+        .replace(embeddingMarkup, (markup, _alt, reference) => embeddingCount(reference) > 0 ? "" : markup)
         .trim();
     const embeddings = renderEmbeddings(value, embedding ?? [])
         .map((content) => `<div class="embedding">${content}</div>`).join("");
@@ -1344,7 +1472,7 @@ const inlineValue = (kind, property) => {
     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: infoPathOf(object),
+    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;
@@ -1427,7 +1555,7 @@ const renderCell = (child) => {
     (empty for an object without a configured or renderable diagram)  */
 const diagramOf = (object) => {
     const diagram = diagrams?.get(object);
-    return diagram !== undefined ? safe(`<div class="diagram">${diagram}</div>`) : "";
+    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,
@@ -1453,6 +1581,59 @@ const coverageOf = (object) => {
             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 limit = Math.floor(Math.max(...lines.filter((_, j) => j !== i)) *
+            (1 + (percent > 0 ? percent : 40) / 100)) * chars[i] - " [...]".length;
+        if (lines[i] === 0 || limit > lengths[i] * 0.75)
+            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|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
@@ -1462,31 +1643,33 @@ const coverageOf = (object) => {
     headers of a plain table  */
 const renderTable = (children, maxColumns) => {
     const { keys, desc } = tableShape(children);
-    const diagrammed = children.some((child) => diagramOf(child) !== "");
+    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: infoPathOf(children[0], false),
+                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, () => ({
-                    id: anchorOf(child),
-                    anchor: child.anchor,
-                    paren: child.paren,
-                    primary: child.primary,
-                    spec: infoParents !== null ? anchorOf(child) : undefined,
-                    specid: child.id,
-                    specpath: infoPathOf(child),
-                    name: inline(child.name),
-                    even: i % 2 === 1,
-                    values: keys.map((key) => inlineValue(child.kind, child.properties.find((property) => property.key === key))),
-                    description: safe(renderCell(child))
-                })))
+                rows: children.map((child, i) => scoped(child, () => {
+                    const cells = omitLong([...keys.map((key) => inlineValue(child.kind, child.properties.find((property) => property.key === key))),
+                        safe(renderCell(child))].slice(0, keys.length + (desc ? 1 : 0)), [...keys.map(() => 1), 2].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),
@@ -1495,7 +1678,8 @@ const renderTable = (children, maxColumns) => {
     return render("TableChunked", { Table: {
             head: children[0].kind !== "" ? children[0].kind : "Name",
             info: infoKeyOf(children[0]),
-            infopath: infoPathOf(children[0], false),
+            infopath: infoRefOf(children[0], false),
+            desc,
             fold: formatOf(children[0])?.maxCellHeight,
             width: Math.round(100 / maxColumns),
             rows: children.map((child, i) => scoped(child, () => {
@@ -1511,6 +1695,9 @@ const renderTable = (children, maxColumns) => {
                     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);
@@ -1521,9 +1708,7 @@ const renderTable = (children, maxColumns) => {
                     anchor: child.anchor,
                     paren: child.paren,
                     primary: child.primary,
-                    spec: infoParents !== null ? anchorOf(child) : undefined,
-                    specid: child.id,
-                    specpath: infoPathOf(child),
+                    spec: infoRefOf(child),
                     name: inline(child.name),
                     even: i % 2 === 1,
                     chunks
@@ -1538,10 +1723,8 @@ const renderObject = (object, level, concise) => {
             level: Math.min(level, 6),
             kind: object.kind,
             info: infoKeyOf(object),
-            infopath: infoPathOf(object, false),
-            spec: infoParents !== null ? anchorOf(object) : undefined,
-            specid: object.id,
-            specpath: infoPathOf(object),
+            infopath: infoRefOf(object, false),
+            spec: infoRefOf(object),
             id: anchorOf(object),
             anchor: object.anchor,
             paren: object.paren,
@@ -1611,8 +1794,7 @@ const tocEntries = (objects, pages) => {
         for (const object of objects) {
             const id = anchorOf(object);
             entries.push({ id, kind: object.kind,
-                info: infoKeyOf(object), infopath: infoPathOf(object, false),
-                spec: infoParents !== null ? id : undefined, specid: object.id, specpath: infoPathOf(object),
+                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);
         }
@@ -1630,10 +1812,8 @@ const renderTocPanel = (objects, title, doc) => {
             id: anchorOf(object),
             kind: object.kind,
             info: infoKeyOf(object),
-            infopath: infoPathOf(object, false),
-            spec: infoParents !== null ? anchorOf(object) : undefined,
-            specid: object.id,
-            specpath: infoPathOf(object),
+            infopath: infoRefOf(object, false),
+            spec: infoRefOf(object),
             name: inline(object.name),
             children: safe(entries(headingChildren(object)))
         })) });
@@ -1668,24 +1848,43 @@ export const titlePageObject = (specification) => {
 /*  pre-render the configured diagrams as embeddable SVGs, displayed
     at a reduced coordinate scale, as the Gradia geometry (node
     boxes, font sizes) is dimensioned for a stand-alone canvas and
-    would dwarf the document text at 1:1  */
-const scaledDiagrams = async (specification, config, verbose) => {
-    const scale = 0.75;
+    would dwarf the document text at 1:1: the scale renders the node
+    names (30 units) at 15px, about the size of the document text, so a
+    diagram narrower than its container is no longer blown up beyond
+    the zoom level of the diagrams the container width caps anyway. The
+    <style> elements are stripped off the diagrams and the union of
+    their CSS rules is returned for the document stylesheet instead, as
+    Gradia names a class after its declarations and hence hundreds of
+    diagrams repeat the very same few rules (which are XML-escaped
+    inside an SVG, but plain text inside the HTML <style> element,
+    which no unescaped "</" of a configured value may close)  */
+const scaledDiagrams = async (specification, config, verbose, omit) => {
+    const scale = 0.5;
     const rendered = new Map();
-    for (const [object, result] of await renderDiagrams(specification, config, verbose)) {
+    const rules = new Set();
+    const entities = { amp: "&", lt: "<", gt: ">", quot: "\"" };
+    for (const [object, result] of await renderDiagrams(specification, config, verbose, omit)) {
+        const svg = result.svg.replace(/<style>([\s\S]*?)<\/style>\s*/g, (_, css) => {
+            for (const rule of css.split("\n"))
+                if (rule.trim() !== "")
+                    rules.add(rule.trim()
+                        .replace(/&(amp|lt|gt|quot);/g, (_, name) => entities[name])
+                        .replace(/<\//g, "<\\/"));
+            return "";
+        });
         /*  a "hub" diagram is capped to the width share it would
             occupy on its full three-column canvas (padded by the
             minimum widths of the absent columns and their channels),
             so all hub diagrams share the zoom level of the
-            three-column ones and are centered in the leftover space  */
+            three-column ones, the leftover space splitting evenly, as
+            the stylesheet centers every diagram  */
         const absent = result.columns !== undefined ? 3 - result.columns : 0;
         const pad = absent * ((result.config?.["size-node-width-min"] ?? Gradia.config["size-node-width-min"]) +
             (result.config?.["hub-channel-width-min"] ?? Gradia.config["hub-channel-width-min"]));
-        rendered.set(object, result.svg.replace(/(<svg[^>]*) width="([0-9.]+)" height="([0-9.]+)"/, (_, head, w, h) => `${head} width="${Number(w) * scale}" height="${Number(h) * scale}"` +
-            (result.columns !== undefined ? " class=\"hub\"" : "") +
+        rendered.set(object, svg.replace(/(<svg[^>]*) width="([0-9.]+)" height="([0-9.]+)"/, (_, head, w, h) => `${head} width="${Number(w) * scale}" height="${Number(h) * scale}"` +
             (absent > 0 ? ` style="max-width: ${(Number(w) / (Number(w) + pad) * 100).toFixed(2)}%"` : "")));
     }
-    return rendered;
+    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
@@ -1724,12 +1923,38 @@ export const renderPlaceholder = (message) => render("Placeholder", { Placeholde
 /*  render the entire specification into a self-contained HTML document,
     with the build-time pre-assembled stylesheet embedded inline, the
     artifact timestamps aggregated into min(Created)/max(Modified),
-    optional per-anchor page numbers attached to the ToC entries, and
-    optionally the client-side script of the live preview injected  */
-export const renderHtml = async (specification, config, tocPages, css, realtime = false, verbose) => {
-    /*  pre-render the configured diagrams as scaled embeddable SVGs  */
+    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)  */
+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)  */
+    const omit = options.omit ?? new Set();
     const rendered = config !== undefined ?
-        await scaledDiagrams(specification, config, verbose) : null;
+        await scaledDiagrams(specification, config, verbose, omit) : null;
+    /*  the fold controls of the omitted aspects leave 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), and
+        the omitted long texts bring the style of their "[...]" mark  */
+    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 omitCss = (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 }" : "");
+    /*  pre-optimize the embedded images (downscaled and re-encoded)  */
+    const optimized = await optimizeImages(specification, print, verbose);
     /*  the document language selects the smart typography quote style  */
     const lang = documentLang(specification);
     quotes = quoteStyles[lang?.toLowerCase().split(/[-_]/)[0] ?? "en"] ?? quoteStyles.en;
@@ -1740,31 +1965,45 @@ export const renderHtml = async (specification, config, tocPages, css, realtime
         anchors = anchorPaths(index);
         members = config !== undefined ? collectMembers(config, new Map()) : null;
         schemas = config !== undefined ? collectSchemas(specification, config) : null;
-        diagrams = rendered;
+        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 ? new Map() : null;
+        for (const node of index) {
+            const svg = rendered?.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";
+            diagrams?.set(node.object, `<div class="diagram" data-type="${type}" data-level="${level}">${svg}</div>`);
+        }
         /*  collect the schema descriptions for the description popups,
-            plus the object parents composing their title paths  */
+            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 parents = new Map();
+            info = [];
+            collectInfo(config, infoKeys, info);
+            const objects = new Map();
             for (const node of index)
-                if (node.parent !== undefined)
-                    parents.set(node.object, node.parent.object);
-            infoParents = parents;
+                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,
+                    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)  */
-        let spec = null;
-        if (info !== null) {
-            spec = {};
+        if (info !== null)
             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())));
@@ -1775,23 +2014,24 @@ export const renderHtml = async (specification, config, tocPages, css, realtime
         const artifacts = specification.artifacts
             .filter((artifact) => !artifact.objects.some(isTitleObject));
         const meta = titleObject(specification);
-        const doc = meta !== undefined ? rendered?.get(meta) : undefined;
+        const doc = meta !== undefined ? diagrams?.get(meta) : undefined;
         const objects = artifacts.flatMap((artifact) => artifact.objects);
         const entries = tocEntries(objects, tocPages);
         return render("Document", { Document: {
                 title: documentTitle(specification).title,
                 lang,
                 theme: documentThemeStyle(specification)?.toLowerCase(),
-                css: safe(css ?? stylesheet()),
+                css: safe((css ?? stylesheet()) + (rendered !== null ? `\n${rendered.css}` : "") + omitCss),
                 themescript: safe(themeScript),
                 titlepage: title !== undefined ?
                     safe(renderTitlePage(title, formatDate(created), formatDate(modified))) : "",
                 search: safe(searchScript()),
                 progress: safe(scrollProgressScript),
-                fold: safe(foldScript),
+                omitted,
+                fold: safe(foldScript(omit.size > 0, omitted.text)),
                 maximize: safe(maximizeScript),
-                info: info !== null ? safe(infoScript(info, spec ?? {})) : "",
-                realtime: realtime ? safe(realtimeScript) : "",
+                info: info !== null ? safe(infoScript(info, spec)) : "",
+                realtime: options.realtime === true ? safe(realtimeScript) : "",
                 toc: entries.length > 0 ? safe(render("Toc", { Toc: { entries } })) : "",
                 tocpanel: entries.length > 0 ?
                     safe(renderTocPanel(objects, title !== undefined, doc !== undefined)) : "",
@@ -1809,8 +2049,10 @@ export const renderHtml = async (specification, config, tocPages, css, realtime
         members = null;
         schemas = null;
         diagrams = null;
+        images = null;
         coverages = null;
         infoKeys = null;
-        infoParents = null;
+        infoObjects = null;
+        omits = null;
     }
 };