@rse/specbook 1.2.3 → 1.2.5

package/dst/specbook-export-html.js

@@ -43,6 +43,13 @@ const templates = {
                         <span class="search-clear" id="search-clear" title="clear search">&#x00D7;</span>
                     </div>
                 </div>
+                <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>
+                    </div>
+                </div>
                 <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 }}
@@ -51,6 +58,7 @@ const templates = {
                 {{ Document.artifacts }}
                 {% if Document.search %}<script>{{ Document.search }}</script>{% endif %}
                 <script>{{ Document.progress }}</script>
+                <script>{{ Document.fold }}</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 %}
@@ -122,7 +130,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-path="{{ entry.specpath }}"{% endif %}>{{ entry.name }}</span></span></a>{{ entry.childs }}</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 }}" data-info-path="{{ entry.specpath }}"{% endif %}>{{ entry.name }}</span></span></a>{{ entry.children }}</li>
             {% endfor %}
         </ul>
     `,
@@ -146,12 +154,12 @@ const templates = {
             {{ Object.diagram }}
             {{ Object.properties }}
             {{ Object.description }}
-            {{ Object.childs }}
+            {{ Object.children }}
         </section>
     `,
     /*  <Properties/>  */
     "Properties": textframe `
-        <table class="props">
+        <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 %}
@@ -172,7 +180,7 @@ const templates = {
     `,
     /*  <Table/>  */
     "Table": textframe `
-        <table class="objects">
+        <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>
@@ -193,7 +201,7 @@ const templates = {
     `,
     /*  <TableChunked/>  */
     "TableChunked": textframe `
-        <table class="objects">
+        <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>
@@ -382,6 +390,255 @@ const scrollProgressScript = textframe `
         update()
     })()
 `;
+/*  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 `
+    (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") }
+
+        /*  let the fold icon slide the two 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 = 40
+
+        /*  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 tab
+            control  */
+        const folds = { diagram: [], text: [] }
+        document.querySelectorAll("article div.diagram, nav.doc div.diagram").forEach((el) => {
+            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))
+            fold.append(chevron, label, el)
+            chevron.addEventListener("click", () => {
+                fold.classList.toggle("folded")
+                sync()
+            })
+            folds.diagram.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)
+
+        /*  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) => {
+            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"
+                node.parentNode.insertBefore(span, node)
+                span.appendChild(node)
+            }
+        }
+
+        /*  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
+                }
+                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
+            }
+            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()
+            })
+        }
+
+        /*  mark the control of a kind while anything of that kind is
+            folded, and the tab itself while any kind at all is  */
+        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)) {
+            /*  without a stored state the rendered one stands, which is
+                everything unfolded  */
+            let stored = null
+            try { stored = localStorage.getItem("specbook-fold-" + kind) }
+            catch { /*  an inaccessible storage just means no stored state  */ }
+            if (stored !== null)
+                folds[kind].forEach((fold) => { fold.classList.toggle("folded", stored === "folded") })
+            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") }
+                catch { /*  an inaccessible storage just loses the state  */ }
+                sync()
+            })
+        }
+        sync()
+
+    })()
+`;
 /*  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
@@ -470,6 +727,7 @@ const tocPanelScript = textframe `
                 && 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)
         }
@@ -800,7 +1058,7 @@ const collectInfo = (nodes, prefix, keys, info) => {
         }
         if (entry.d !== undefined || entry.p !== undefined)
             info[path] = entry;
-        collectInfo(schema.childs ?? [], path, keys, info);
+        collectInfo(schema.children ?? [], path, keys, info);
     }
 };
 /*  inject the description popup maps into their client-side script ("<"
@@ -888,7 +1146,7 @@ const collectSpec = (objects, spec) => {
             .trim();
         if (text !== "")
             spec[anchorOf(object)] = scoped(object, () => block(text, true).toString().trim());
-        collectSpec(object.childs, spec);
+        collectSpec(object.children, spec);
     }
 };
 /*  the literal members of an "enum(...)"/"tags(...)" expression, or
@@ -913,7 +1171,7 @@ const collectMembers = (nodes, result) => {
                 /*  an invalid expression is the concern of lint  */
             }
         }
-        collectMembers(schema.childs ?? [], result);
+        collectMembers(schema.children ?? [], result);
     }
     return result;
 };
@@ -976,20 +1234,20 @@ const effectiveProperties = (object) => {
     order (unknown keys appended in occurrence order), with
     "withUnusedProps" injecting the defined but still unused schema
     properties as additional columns  */
-const tableShape = (childs) => {
-    const used = [...new Set(childs.flatMap((child) => child.properties.map((property) => property.key)))];
-    const schema = schemas?.get(childs[0]);
+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: childs.some((child) => child.description !== undefined || child.childs.length > 0) };
+    return { keys, desc: children.some((child) => child.description !== undefined || child.children.length > 0) };
 };
-/*  provide the childs of an object taking part in the regular document
+/*  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 flowChilds = (object) => object.childs.filter((child) => !isTitleObject(child));
-/*  decide whether a single-kind group of childs collapses into the
+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  */
@@ -997,12 +1255,12 @@ 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.childs.length === 0);
+    return concise || group.every((child) => child.children.length === 0);
 };
-/*  group the childs of an object by their kind, preserving order  */
-const groupChilds = (childs) => {
+/*  group the children of an object by their kind, preserving order  */
+const groupChildren = (children) => {
     const groups = new Map();
-    for (const child of childs) {
+    for (const child of children) {
         const group = groups.get(child.kind);
         if (group === undefined)
             groups.set(child.kind, [child]);
@@ -1011,21 +1269,21 @@ const groupChilds = (childs) => {
     }
     return [...groups.values()];
 };
-/*  render the childs of an object group-wise by kind: a concise group
+/*  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 renderChilds = (object, level, concise) => groupChilds(flowChilds(object)).map((group) => conciseGroup(group, schemas, concise) ?
+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 childs (implicitly or
+    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 += renderChilds(child, 6, true);
+    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
@@ -1034,27 +1292,28 @@ const diagramOf = (object) => {
     const diagram = diagrams?.get(object);
     return diagram !== undefined ? safe(`<div class="diagram">${diagram}</div>`) : "";
 };
-/*  render a single-kind group of childs into one compact table:
+/*  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 = (childs, maxColumns) => {
-    const { keys, desc } = tableShape(childs);
-    const diagrammed = childs.some((child) => diagramOf(child) !== "");
+const renderTable = (children, maxColumns) => {
+    const { keys, desc } = tableShape(children);
+    const diagrammed = children.some((child) => diagramOf(child) !== "");
     if (!diagrammed && 1 + keys.length + (desc ? 1 : 0) <= maxColumns)
         return render("Table", { Table: {
-                head: childs[0].kind !== "" ? childs[0].kind : "Name",
-                info: infoKeyOf(childs[0]),
-                infopath: infoPathOf(childs[0], false),
+                head: children[0].kind !== "" ? children[0].kind : "Name",
+                info: infoKeyOf(children[0]),
+                infopath: infoPathOf(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: childs.map((child, i) => scoped(child, () => ({
+                rows: children.map((child, i) => scoped(child, () => ({
                     id: anchorOf(child),
                     paren: child.paren,
                     primary: child.primary,
@@ -1071,11 +1330,12 @@ const renderTable = (childs, maxColumns) => {
         with the last cell spanning the leftover columns of the final row  */
     const size = Math.max(1, maxColumns - 1);
     return render("TableChunked", { Table: {
-            head: childs[0].kind !== "" ? childs[0].kind : "Name",
-            info: infoKeyOf(childs[0]),
-            infopath: infoPathOf(childs[0], false),
+            head: children[0].kind !== "" ? children[0].kind : "Name",
+            info: infoKeyOf(children[0]),
+            infopath: infoPathOf(children[0], false),
+            fold: formatOf(children[0])?.maxCellHeight,
             width: Math.round(100 / maxColumns),
-            rows: childs.map((child, i) => scoped(child, () => {
+            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)
@@ -1122,10 +1382,11 @@ const renderObject = (object, level, concise) => {
             name: inline(object.name),
             diagram: diagramOf(object),
             properties: properties.length > 0 ?
-                safe(render("Properties", { Properties: inlineProperties(object, properties) })) : "",
+                safe(render("Properties", { Properties: inlineProperties(object, properties),
+                    Fold: formatOf(object)?.maxCellHeight })) : "",
             description: object.description !== undefined ?
                 safe(renderDescription(object.description)) : "",
-            childs: safe(renderChilds(object, level + 1, concise))
+            children: safe(renderChildren(object, level + 1, concise))
         } }));
 };
 /*  format a timestamp as its calendar date in local time (the
@@ -1167,10 +1428,10 @@ const renderTitlePage = (object, created, modified) => {
 const renderArtifact = (artifact) => render("Artifact", { Artifact: {
         objects: safe(artifact.objects.map((object) => renderObject(object, 1, false)).join(""))
     } });
-/*  provide the childs of an object rendered with headings of their own
+/*  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 headingChilds = (object) => groupChilds(flowChilds(object))
+const headingChildren = (object) => groupChildren(flowChildren(object))
     .filter((group) => !conciseGroup(group, schemas, false))
     .flat();
 /*  flatten the hierarchy of the rendered object headings (exactly like
@@ -1185,7 +1446,7 @@ const tocEntries = (objects, pages) => {
                 info: infoKeyOf(object), infopath: infoPathOf(object, false),
                 spec: infoParents !== null ? id : undefined, specpath: infoPathOf(object),
                 name: inline(object.name), level: Math.min(level, 6), page: pages?.get(id) });
-            collect(headingChilds(object), level + 1);
+            collect(headingChildren(object), level + 1);
         }
     };
     collect(objects, 1);
@@ -1205,7 +1466,7 @@ const renderTocPanel = (objects, title, doc) => {
             spec: infoParents !== null ? anchorOf(object) : undefined,
             specpath: infoPathOf(object),
             name: inline(object.name),
-            childs: safe(entries(headingChilds(object)))
+            children: safe(entries(headingChildren(object)))
         })) });
     return render("TocPanel", { TocPanel: { title, doc, entries: safe(entries(objects)) } });
 };
@@ -1217,7 +1478,7 @@ export const htmlOutline = (specification, config) => {
     const entry = (object) => ({
         title: (object.kind !== "" ? `${object.kind}: ` : "") + plainText(object.name),
         anchor: paths.get(object) ?? object.id,
-        childs: groupChilds(flowChilds(object))
+        children: groupChildren(flowChildren(object))
             .filter((group) => !conciseGroup(group, schemaMap, false))
             .flatMap((group) => group.map(entry))
     });
@@ -1357,6 +1618,7 @@ export const renderHtml = async (specification, config, tocPages, css, realtime
                     safe(renderTitlePage(title, formatDate(created), formatDate(modified))) : "",
                 search: safe(searchScript()),
                 progress: safe(scrollProgressScript),
+                fold: safe(foldScript),
                 info: info !== null ? safe(infoScript(info, spec ?? {})) : "",
                 realtime: realtime ? safe(realtimeScript) : "",
                 toc: entries.length > 0 ? safe(render("Toc", { Toc: { entries } })) : "",

package/dst/specbook-export-md.js

@@ -39,11 +39,11 @@ const nameSuffixMd = (object) => (object.primary === true ? " (*)" : "") +
     code block, an ordered list, a blockquote, or multiple paragraphs) or
     one carrying a ";", as only a ";"-free description stays a single
     segment on re-parsing instead of splitting off a spurious property  */
-const complexBelowMd = (object) => object.childs.some((child) => child.name.includes(";")
+const complexBelowMd = (object) => object.children.some((child) => child.name.includes(";")
     || (child.description !== undefined
         && /[\n;]/.test(renderDescriptionMd(child.description))) || complexBelowMd(child));
 /*  render an object in the Concise Format as a list item of the
-    given nesting depth, with its childs as nested list items  */
+    given nesting depth, with its children as nested list items  */
 const renderConciseMd = (object, depth = 0) => {
     const indent = " ".repeat(depth * 4);
     const segments = [`${object.kind}: ${object.name}${nameSuffixMd(object)}`];
@@ -62,14 +62,14 @@ const renderConciseMd = (object, depth = 0) => {
         `${indent}-   ${segments.join("; ").replace(/\.?$/, ".")}` :
         `${indent}-   ${segments.join("; ")};`;
     return [item, renderKeyValuesMd(wrapped, `${indent}    `),
-        ...object.childs.map((child) => renderConciseMd(child, depth + 1))]
+        ...object.children.map((child) => renderConciseMd(child, depth + 1))]
         .filter((part) => part !== "").join("\n");
 };
-/*  render an object in the Complex Format (levels 1-3), with childs from
+/*  render an object in the Complex Format (levels 1-3), with children from
     level 4 upwards in the Concise Format -- unless a descendant carries
-    a description no concise item can carry, so all childs (as siblings
+    a description no concise item can carry, so all children (as siblings
     have to share the format) stay in the Complex Format down to heading
-    level 6, the deepest one Markdown knows, below which the childs are
+    level 6, the deepest one Markdown knows, below which the children are
     concise regardless -- and the optionally derived Gradia diagram spec
     embedded as a "gradia" fenced code block below the heading  */
 const renderObjectMd = (object, level, diagrams) => {
@@ -83,12 +83,12 @@ const renderObjectMd = (object, level, diagrams) => {
         parts.push(renderKeyValuesMd(object.properties));
     if (object.description !== undefined)
         parts.push(renderDescriptionMd(object.description));
-    /*  the childs share one format, as a concise item following
+    /*  the children share one format, as a concise item following
         a heading would attach to the heading's object instead  */
     if (level >= 6 || (level >= 3 && !complexBelowMd(object)))
-        parts.push(object.childs.map((child) => renderConciseMd(child)).join("\n"));
+        parts.push(object.children.map((child) => renderConciseMd(child)).join("\n"));
     else
-        parts.push(...object.childs.map((child) => renderObjectMd(child, level + 1, diagrams)));
+        parts.push(...object.children.map((child) => renderObjectMd(child, level + 1, diagrams)));
     return parts.filter((part) => part !== "").join("\n\n");
 };
 /*  render the entire specification into normalized Markdown  */