@geml/geml 1.4.6 → 1.5.1

package/dist/render.js

@@ -11,12 +11,19 @@
 // exception. They load from a CDN, and only when the document actually uses them,
 // so a document of prose, tables and charts is fully self-contained with zero
 // network. Bundling those two engines offline is the next step (roadmap P0 #6).
+import { projectableInlines } from "./geml.js";
+import { isSafeUrl } from "./inline.js";
 const PALETTE = ["#2563eb", "#dc2626", "#059669", "#d97706", "#7c3aed", "#db2777", "#0891b2", "#ea580c"];
 // ---------------------------------------------------------------------------
 // Escaping
 // ---------------------------------------------------------------------------
 export function esc(s) {
-    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    // C0 controls other than tab/LF/CR are not valid in HTML text and, passed
+    // through verbatim, can desynchronize a downstream sanitizer, proxy or log
+    // pipeline. §0.4 only normalizes NUL; a document can still carry the rest, and a
+    // transclusion of a `.geml`-named binary carries a lot of them.
+    return s.replace(/[\x01-\x08\x0b\x0c\x0e-\x1f\x7f]/g, "�")
+        .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 export function escAttr(s) {
     return esc(s).replace(/"/g, "&quot;");
@@ -39,6 +46,97 @@ const MAX_NESTING = 256;
 // ---------------------------------------------------------------------------
 // Render context
 // ---------------------------------------------------------------------------
+// S5: how deep transclusions may nest before the renderer stops expanding and
+// degrades to the reference link instead.
+const EMBED_DEPTH_CAP = 8;
+// Depth and cycle detection bound the SHAPE of a transclusion graph, never its
+// total. A diamond is not a cycle, and the cycle key is `path#fragment`, so eight
+// sections each embedding the next N times is eight distinct keys and N^8
+// expansions: 1.5KB of input reached 402MB of output, and one step further died on
+// an uncaught RangeError from string concatenation. These are the global budgets
+// that actually bound it, checked before every expansion.
+const EMBED_TOTAL_CAP = 1000; // expansions per render
+const EMBED_BYTES_CAP = 8 * 1024 * 1024; // expanded bytes per render
+const EMBED_DOC_BYTES_CAP = 4 * 1024 * 1024; // a single loaded document
+// §9.5 requires a class token to be REDUCED to the identifier charset, not escaped
+// — escaping keeps whatever was there. Only literals reach these call sites today,
+// so this is about not letting that invariant rest on the caller.
+function classAttrToken(s) {
+    return s.replace(/[^A-Za-z0-9_-]/g, "-");
+}
+// Compose a target that is relative to `base` — itself relative to the rendered
+// host file — into a path relative to that host. Pure string work on purpose:
+// render.ts is bundled for the browser (the playground), so no node:path here.
+// A scheme-bearing, protocol-relative or root-relative target is already
+// absolute and passes through untouched.
+function relJoin(base, target) {
+    if (base === "" || target === "" || target.startsWith("/") || /^[a-z][a-z0-9+.-]*:/i.test(target))
+        return target;
+    const out = [];
+    for (const s of (base + "/" + target).split("/")) {
+        if (s === "" || s === ".")
+            continue;
+        if (s === ".." && out.length > 0 && out[out.length - 1] !== "..")
+            out.pop();
+        else
+            out.push(s);
+    }
+    return out.join("/");
+}
+function relDir(p) {
+    const i = p.lastIndexOf("/");
+    return i < 0 ? "" : p.slice(0, i);
+}
+// S2: which blocks a fragment selects. No fragment is the whole document body
+// (meta is frontmatter, not content). A heading id selects its whole SECTION —
+// the heading plus everything up to the next heading at the same or a higher
+// level, the same boundary `geml get` uses — and any other id selects its own
+// block. Nested children are searched too: an id can live inside a flow block.
+function selectEmbed(children, anchor) {
+    if (anchor === undefined)
+        return children.filter((b) => !(b.kind === "block" && b.type === "meta"));
+    return findEmbedTarget(children, anchor);
+}
+function findEmbedTarget(blocks, id) {
+    for (let i = 0; i < blocks.length; i++) {
+        const b = blocks[i];
+        if (b.kind === "heading" && b.id === id) {
+            const out = [b];
+            for (let j = i + 1; j < blocks.length; j++) {
+                const next = blocks[j];
+                if (next.kind === "heading" && next.level <= b.level)
+                    break;
+                out.push(next);
+            }
+            return out;
+        }
+        if (b.kind === "block" && b.id === id)
+            return [b];
+        if (b.kind === "block" && b.children) {
+            const inner = findEmbedTarget(b.children, id);
+            if (inner !== null)
+                return inner;
+        }
+    }
+    return null;
+}
+// id -> label: a heading's text, a block's caption, else the id itself. Free of
+// the render context so a TARGET document can be indexed the same way, which is
+// what a cross-document auto-reference needs for its link text (§5.2).
+function indexLabelsInto(blocks, into) {
+    for (const b of blocks) {
+        if (b.kind === "heading")
+            into.set(b.id ?? "", b.text);
+        else if (b.kind === "block") {
+            if (b.id) {
+                const cap = b.attrs["caption"];
+                into.set(b.id, typeof cap === "string" ? cap : (b.table?.caption ?? b.id));
+            }
+            if (b.children)
+                indexLabelsInto(b.children, into);
+        }
+    }
+}
 export class RenderCtx {
     doc;
     opts;
@@ -46,6 +144,40 @@ export class RenderCtx {
     usedMermaid = false;
     usedCodeGraph = false;
     renderDepth = 0;
+    // S5: the (path#fragment) chain currently being expanded, for cycle
+    // detection and the depth cap. `embedDocs` is the chain of documents being
+    // expanded — each with its path relative to the host, so relative targets inside
+    // borrowed content compose through it (S4) and a fragment-only reference
+    // resolves against the document it was written in.
+    embedStack = [];
+    embedDocs = [];
+    // The global budgets, and a memo so a document is read and parsed at most once
+    // per render — without it a 1.1KB corpus produced 21,845 filesystem reads and
+    // 21,845 full re-parses, because every expansion loaded its target again.
+    embedCount = 0;
+    embedBytes = 0;
+    embedCache = new Map();
+    budgetExhausted() {
+        if (this.embedCount >= EMBED_TOTAL_CAP)
+            return `transclusion budget spent (${EMBED_TOTAL_CAP} expansions)`;
+        if (this.embedBytes >= EMBED_BYTES_CAP)
+            return `transclusion budget spent (${EMBED_BYTES_CAP} bytes)`;
+        return null;
+    }
+    // One read and one parse per document per render, and a size ceiling so a huge
+    // target cannot be expanded (or re-expanded) at all.
+    loadChildren(rel) {
+        const hit = this.embedCache.get(rel);
+        if (hit !== undefined)
+            return hit;
+        const { loadDoc, parseDoc } = this.opts;
+        let children = null;
+        const src = loadDoc && parseDoc ? loadDoc(rel) : null;
+        if (src !== null && src !== undefined && src.length <= EMBED_DOC_BYTES_CAP)
+            children = parseDoc(src).children;
+        this.embedCache.set(rel, children);
+        return children;
+    }
     labels = new Map(); // id -> link label for [[#id]] auto-refs
     constructor(doc, opts = {}) {
         this.doc = doc;
@@ -66,18 +198,7 @@ export class RenderCtx {
     }
     // Build the id -> label map: a heading's text, or a block's caption, or its id.
     indexLabels(blocks) {
-        for (const b of blocks) {
-            if (b.kind === "heading")
-                this.labels.set(b.id ?? "", b.text);
-            else if (b.kind === "block") {
-                if (b.id) {
-                    const cap = b.attrs["caption"];
-                    this.labels.set(b.id, typeof cap === "string" ? cap : (b.table?.caption ?? b.id));
-                }
-                if (b.children)
-                    this.indexLabels(b.children);
-            }
-        }
+        indexLabelsInto(blocks, this.labels);
     }
     docTitle() {
         for (const b of this.doc.children) {
@@ -108,15 +229,220 @@ export class RenderCtx {
             case "image": return this.media(n);
             case "link": return this.link(n);
             case "autoref": {
-                const href = n.doc ? `${n.doc.replace(/\.geml$/, ".html")}#${n.anchor}` : `#${n.anchor}`;
-                const label = n.doc ? (n.anchor ?? n.doc) : (this.labels.get(n.anchor) ?? n.anchor);
+                const href = n.doc ? `${relJoin(relDir(this.currentDocRel), n.doc).replace(/\.geml$/, ".html")}#${n.anchor}` : this.fragmentHref(n.anchor);
+                // §5.2: an auto-reference takes its text from the target's caption or
+                // heading. Across documents that means reading the target — which the
+                // build can do, since an embed pulls whole sections through the same hook.
+                // Inside borrowed content a fragment-only reference means an id of the
+                // BORROWED document, so its label has to come from there too. Taking it
+                // from `this.labels` showed the host's caption on a link whose destination
+                // is the source document's block — a text/target mismatch the host controls.
+                const label = n.doc
+                    ? (this.remoteLabel(n.doc, n.anchor) ?? n.anchor ?? n.doc)
+                    : (this.currentLabels().get(n.anchor) ?? n.anchor);
                 return `<a href="${escAttr(href)}">${esc(label)}</a>`;
             }
-            case "footnote": return `<sup class="fn"><a href="#${escAttr(n.ref)}">${esc(n.ref)}</a></sup>`;
+            case "project": return this.projectInline(n);
+            // Through fragmentHref like every other fragment-only reference: borrowed
+            // content owns no anchors, so a bare `#ref` here landed on a same-named
+            // footnote of the HOST — letting the host author choose what a borrowed
+            // sentence's citation says.
+            case "footnote": return `<sup class="fn"><a href="${escAttr(this.fragmentHref(n.ref))}">${esc(n.ref)}</a></sup>`;
+        }
+    }
+    // S2/S3/S5: expand a transclusion in place, wrapped in a container carrying its
+    // provenance. Every path that cannot expand falls back to a link to the target
+    // with the reason visible — never silently blank, never a broken image.
+    transclude(b, idAttr) {
+        const written = typeof b.attrs["src"] === "string" ? b.attrs["src"].trim() : "";
+        if (written === "")
+            return this.transclusionFallback("", idAttr, "invalid", "embed: missing `src=`");
+        const hash = written.indexOf("#");
+        const docPath = hash < 0 ? written : written.slice(0, hash);
+        const anchor = hash < 0 ? undefined : written.slice(hash + 1);
+        const { loadDoc, parseDoc } = this.opts;
+        // A same-document target (`src=#id`) selects from the document CURRENTLY being
+        // expanded, which inside borrowed content is the borrowed document, not the
+        // host. And it takes a cycle key like any other: the slice a heading id
+        // selects contains the embed that selected it, which is the smallest cycle
+        // there is. Skipping the key here is what let a 7-line document expand into
+        // 256 copies of itself, stopped only by the generic block-nesting guard.
+        const rel = docPath === "" ? this.currentDocRel : relJoin(relDir(this.currentDocRel), docPath);
+        const key = anchor === undefined ? rel : `${rel}#${anchor}`;
+        if (this.embedStack.includes(key)) {
+            return `<div class="transclusion transclusion-error"${idAttr} data-src="${escAttr(written)}">transclusion cycle: ${esc([...this.embedStack, key].join(" → "))}</div>`;
+        }
+        if (this.embedStack.length >= EMBED_DEPTH_CAP) {
+            return this.transclusionFallback(written, idAttr, "too-deep", `transclusion depth cap (${EMBED_DEPTH_CAP}) reached`);
+        }
+        const spent = this.budgetExhausted();
+        if (spent !== null)
+            return this.transclusionFallback(written, idAttr, "too-large", spent);
+        let children;
+        if (docPath !== "" && !/\.geml$/i.test(docPath)) {
+            // Same constraint the parser reports: an embed stands for a GEML document.
+            // Parsing whatever else the target happens to contain injected its bytes
+            // into the page as prose.
+            return this.transclusionFallback(written, idAttr, "invalid", `\`${docPath}\` is not a GEML document`);
+        }
+        if (docPath === "") {
+            children = this.currentDocChildren;
+        }
+        else {
+            if (!loadDoc || !parseDoc)
+                return this.transclusionFallback(written, idAttr, "unexpanded", "no document resolver");
+            // Parsed on its own, so S4 holds for free: `{{key}}` inside borrowed content
+            // interpolates against the SOURCE document's meta, never the host's. Read
+            // through the cache: the same target is otherwise re-read and re-parsed once
+            // per expansion.
+            const loaded = this.loadChildren(rel);
+            if (loaded === null)
+                return this.transclusionFallback(written, idAttr, "unresolved", `cannot resolve document \`${docPath}\`, or it is too large`);
+            children = loaded;
+        }
+        const picked = selectEmbed(children, anchor);
+        if (picked === null) {
+            const what = docPath === "" ? `no \`${written}\` in this document` : `no \`#${anchor}\` in \`${docPath}\``;
+            return this.transclusionFallback(written, idAttr, "unresolved", what);
+        }
+        this.embedStack.push(key);
+        this.embedDocs.push({ rel, children });
+        try {
+            return this.transclusionWrap(written, idAttr, picked);
+        }
+        finally {
+            this.embedDocs.pop();
+            this.embedStack.pop();
+        }
+    }
+    // An inline projection: the target block's body, rendered here. Deliberately the
+    // same machinery as the block form — the cycle stack, the depth cap, and the
+    // document chain that drives S4 rebasing and the fragment-only rewrite — rather
+    // than a second path that would have to be kept in step with it. A projected
+    // phrase carrying a link is the normal case, so that rewrite matters more here.
+    projectInline(n) {
+        const written = n.doc === undefined ? `#${n.anchor}` : `${n.doc}#${n.anchor}`;
+        const { loadDoc, parseDoc } = this.opts;
+        const rel = n.doc === undefined ? this.currentDocRel : relJoin(relDir(this.currentDocRel), n.doc);
+        const key = `${rel}#${n.anchor}`;
+        if (this.embedStack.includes(key))
+            return this.projectFallback(written, "error", "transclusion cycle");
+        if (this.embedStack.length >= EMBED_DEPTH_CAP)
+            return this.projectFallback(written, "too-deep", `depth cap (${EMBED_DEPTH_CAP})`);
+        const spentHere = this.budgetExhausted();
+        if (spentHere !== null)
+            return this.projectFallback(written, "too-large", spentHere);
+        let children;
+        if (n.doc === undefined)
+            children = this.currentDocChildren;
+        else {
+            if (!loadDoc || !parseDoc)
+                return this.projectFallback(written, "unexpanded", "no document resolver");
+            const loaded = this.loadChildren(rel);
+            if (loaded === null)
+                return this.projectFallback(written, "unresolved", "unresolvable document, or too large");
+            children = loaded;
+        }
+        const got = projectableInlines(children, n.anchor);
+        if (got === null || got === "not-inline")
+            return this.projectFallback(written, "unresolved", "not inline content");
+        this.embedStack.push(key);
+        this.embedDocs.push({ rel, children });
+        try {
+            this.embedCount++;
+            const inner = this.inlines(got.inlines);
+            this.embedBytes += inner.length;
+            return `<span class="transclusion-inline" data-src="${escAttr(written)}">${inner}</span>`;
+        }
+        finally {
+            this.embedDocs.pop();
+            this.embedStack.pop();
         }
     }
+    projectFallback(written, why, note) {
+        const hash = written.indexOf("#");
+        const docPath = written.slice(0, hash);
+        const href = docPath === "" ? written : relJoin(relDir(this.currentDocRel), docPath).replace(/\.geml$/, ".html") + written.slice(hash);
+        const safe = isSafeUrl(href) ? href : "#";
+        return `<span class="transclusion-inline transclusion-${classAttrToken(why)}" data-src="${escAttr(written)}" title="${escAttr(note)}">`
+            + `<a href="${escAttr(safe)}">${esc(written)}</a></span>`;
+    }
+    // The document a transclusion is currently selecting from — the host until an
+    // expansion is in progress. `rel` is its path relative to the rendered host, so
+    // everything relative inside it composes through `relDir(rel)` (S4), and any
+    // fragment-only reference resolves against that document's own page.
+    get currentDocRel() {
+        return this.embedDocs.length === 0 ? "" : this.embedDocs[this.embedDocs.length - 1].rel;
+    }
+    get currentDocChildren() {
+        return this.embedDocs.length === 0 ? this.doc.children : this.embedDocs[this.embedDocs.length - 1].children;
+    }
+    // Labels of the document currently being expanded, built on first use per frame.
+    currentLabels() {
+        if (this.embedDocs.length === 0)
+            return this.labels;
+        const frame = this.embedDocs[this.embedDocs.length - 1];
+        if (frame.labels === undefined) {
+            frame.labels = new Map();
+            indexLabelsInto(frame.children, frame.labels);
+        }
+        return frame.labels;
+    }
+    // S9: borrowed content contributes no anchors to the host page. Two ids named
+    // the same is invalid HTML, and an in-page link to one of them would land on
+    // whichever the browser picked. The host keeps its own ids; a borrowed copy has
+    // none, and references into it resolve against its source document instead.
+    idAttr(id) {
+        return id === undefined || this.embedDocs.length > 0 ? "" : ` id="${escAttr(id)}"`;
+    }
+    // A fragment-only reference (`#id`, `[[#id]]`) inside borrowed content means an
+    // id of the BORROWED document. On the host page that anchor does not exist — or,
+    // worse, a same-named host block silently answers for it — so it points at the
+    // source document's page.
+    // The label a target document gives an id, for a cross-document auto-reference.
+    // Memoized per document: one page can reference the same document many times.
+    remoteLabels = new Map();
+    remoteLabel(doc, anchor) {
+        const { loadDoc, parseDoc } = this.opts;
+        if (!loadDoc || !parseDoc)
+            return undefined;
+        const rel = relJoin(relDir(this.currentDocRel), doc);
+        let labels = this.remoteLabels.get(rel);
+        if (labels === undefined) {
+            labels = new Map();
+            const src = loadDoc(rel);
+            if (src !== null)
+                indexLabelsInto(parseDoc(src).children, labels);
+            this.remoteLabels.set(rel, labels);
+        }
+        return labels.get(anchor);
+    }
+    fragmentHref(anchor) {
+        const rel = this.currentDocRel;
+        return rel === "" ? `#${anchor}` : `${rel.replace(/\.geml$/, ".html")}#${anchor}`;
+    }
+    transclusionWrap(written, idAttr, picked) {
+        this.embedCount++;
+        const inner = picked.map((x) => this.block(x)).filter((s) => s !== "").join("\n");
+        this.embedBytes += inner.length;
+        return `<section class="transclusion"${idAttr} data-src="${escAttr(written)}">${inner}</section>`;
+    }
+    transclusionFallback(written, idAttr, why, note) {
+        const hash = written.indexOf("#");
+        const docPath = hash < 0 ? written : written.slice(0, hash);
+        const frag = hash < 0 ? "" : written.slice(hash);
+        const href = docPath === "" ? frag : relJoin(relDir(this.currentDocRel), docPath).replace(/\.geml$/, ".html") + frag;
+        // Defence in depth: the parse layer already blanks an unsafe scheme (§9.5), so
+        // this should be unreachable. It is here because a fallback that composes an
+        // href from document text is exactly where a missed filter upstream becomes a
+        // live `javascript:` link — the shape of the one Critical finding in review.
+        const safe = isSafeUrl(href) ? href : "#";
+        const link = written === "" ? "" : `<a href="${escAttr(safe)}">${esc(written)}</a> `;
+        return `<div class="transclusion transclusion-${classAttrToken(why)}"${idAttr} data-src="${escAttr(written)}" title="${escAttr(note)}">`
+            + `${link}<span class="transclusion-note">${esc(note)}</span></div>`;
+    }
     media(n) {
-        const src = escAttr(n.src);
+        const src = escAttr(relJoin(relDir(this.currentDocRel), n.src));
         if (n.as === "video")
             return `<video class="media" src="${src}" controls></video>`;
         if (n.as === "audio")
@@ -128,9 +454,9 @@ export class RenderCtx {
         if (n.href)
             href = n.href;
         else if (n.doc)
-            href = `${n.doc.replace(/\.geml$/, ".html")}${n.anchor ? "#" + n.anchor : ""}`;
+            href = `${relJoin(relDir(this.currentDocRel), n.doc).replace(/\.geml$/, ".html")}${n.anchor ? "#" + n.anchor : ""}`;
         else if (n.anchor)
-            href = `#${n.anchor}`;
+            href = this.fragmentHref(n.anchor);
         const rel = typeof n.attrs["rel"] === "string" ? ` rel="${escAttr(n.attrs["rel"])}"` : "";
         const target = typeof n.attrs["target"] === "string" ? ` target="${escAttr(n.attrs["target"])}"` : "";
         return `<a href="${escAttr(href)}"${rel}${target}>${this.inlines(n.children)}</a>`;
@@ -156,7 +482,7 @@ export class RenderCtx {
             case "heading": {
                 if (b.hidden)
                     return "";
-                const id = b.id ? ` id="${escAttr(b.id)}"` : "";
+                const id = this.idAttr(b.id);
                 const lvl = Math.min(6, Math.max(1, b.level));
                 return `<h${lvl}${id}>${this.inlines(b.inlines)}</h${lvl}>`;
             }
@@ -188,7 +514,7 @@ export class RenderCtx {
             return ""; // {hidden}: in the model, never rendered
         const raw = (b.raw ?? []).join("\n");
         const caption = typeof b.attrs["caption"] === "string" ? b.attrs["caption"] : undefined;
-        const idAttr = b.id ? ` id="${escAttr(b.id)}"` : "";
+        const idAttr = this.idAttr(b.id);
         switch (b.type) {
             case "meta": return ""; // header metadata, not body content
             case "code": {
@@ -196,8 +522,7 @@ export class RenderCtx {
                 const cls = lang ? ` class="language-${escAttr(lang)}"` : "";
                 return `<pre${idAttr}><code${cls}>${esc(raw)}</code></pre>`;
             }
-            case "output":
-                return `<pre class="output"${idAttr}><code>${esc(raw)}</code></pre>`;
+            case "embed": return this.transclude(b, idAttr);
             case "math":
                 this.usedMath = true;
                 return `<div class="math-block"${idAttr}>\\[${esc(raw)}\\]</div>`;
@@ -225,7 +550,7 @@ export class RenderCtx {
         }
     }
     diagram(b, raw, caption) {
-        const idAttr = b.id ? ` id="${escAttr(b.id)}"` : "";
+        const idAttr = this.idAttr(b.id);
         const fmt = typeof b.attrs["format"] === "string" ? b.attrs["format"] : "";
         const cap = caption ? `<figcaption>${esc(caption)}</figcaption>` : "";
         if (fmt === "geml-chart") {
@@ -286,35 +611,14 @@ export class RenderCtx {
         const maxRows = this.isCodemapDoc && id === "modules" ? Infinity : (this.opts.tableRows ?? 500);
         const allRows = t.rows;
         const rows = allRows.length > maxRows ? allRows.slice(0, maxRows) : allRows;
-        // Coverage grid for declared spans, so cells a span covers are not emitted.
-        const covered = rows.map((r) => r.map(() => false));
-        rows.forEach((row, r) => row.forEach((cell, c) => {
-            if (!cell.span)
-                return;
-            // Bound the sweep to the rendered grid regardless of the declared span, so
-            // an oversized span can never drive an O(hugerows×hugecols) loop (DoS).
-            const spanRows = Math.min(cell.span.rows, rows.length - r);
-            const spanCols = Math.min(cell.span.cols, row.length - c);
-            for (let dr = 0; dr < spanRows; dr++)
-                for (let dc = 0; dc < spanCols; dc++) {
-                    if (dr === 0 && dc === 0)
-                        continue;
-                    const rr = r + dr, cc = c + dc;
-                    if (covered[rr]?.[cc] !== undefined)
-                        covered[rr][cc] = true;
-                }
-        }));
         const thead = t.header
             ? `<thead><tr>${t.columns.map((col, c) => `<th${alignStyle(t.align[c])}>${esc(col)}</th>`).join("")}</tr></thead>`
             : "";
         const bodyRows = rows.map((row, r) => {
             const cells = row.map((cell, c) => {
-                if (covered[r]?.[c])
-                    return "";
-                const span = cell.span ? `${cell.span.rows > 1 ? ` rowspan="${cell.span.rows}"` : ""}${cell.span.cols > 1 ? ` colspan="${cell.span.cols}"` : ""}` : "";
                 const cls = cell.computed ? ' class="computed"' : "";
                 const sortVal = typeof cell.value === "number" ? ` data-sort="${cell.value}"` : "";
-                return `<td${alignStyle(cell.align ?? t.align[c])}${span}${cls}${sortVal}>${this.inlines(cell.inlines)}</td>`;
+                return `<td${alignStyle(cell.align ?? t.align[c])}${cls}${sortVal}>${this.inlines(cell.inlines)}</td>`;
             }).join("");
             return `<tr>${cells}</tr>`;
         }).join("\n");
@@ -925,143 +1229,143 @@ function trunc(s, n) {
 // ---------------------------------------------------------------------------
 // Page shell, inline CSS, inline interactivity JS
 // ---------------------------------------------------------------------------
-export const CSS = `
-:root { --fg:#1f2328; --muted:#656d76; --bd:#d0d7de; --bg:#fff; --accent:#2563eb; --code-bg:#f6f8fa; }
-* { box-sizing: border-box; }
-body { margin:0; color:var(--fg); background:#fafbfc; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"PingFang SC","Microsoft Yahei",sans-serif; }
-main { max-width: 860px; margin: 0 auto; padding: 48px 24px 96px; background:var(--bg); }
-h1,h2,h3,h4,h5,h6 { line-height:1.25; margin:1.6em 0 .6em; scroll-margin-top:16px; }
-h1 { font-size:2em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }
-h2 { font-size:1.5em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }
-h3 { font-size:1.25em; } h4 { font-size:1em; }
-p { margin:.7em 0; }
-a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
-code { background:var(--code-bg); padding:.15em .35em; border-radius:6px; font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
-pre { background:var(--code-bg); padding:14px 16px; border-radius:8px; overflow:auto; }
-pre code { background:none; padding:0; font-size:.85em; }
-pre.output { background:#0d1117; color:#e6edf3; }
-pre.output code { color:inherit; }
-ul,ol { padding-left:1.6em; } li { margin:.2em 0; }
-ul.task-list { list-style:none; padding-left:.2em; }
-li.task input[type=checkbox] { appearance:none; -webkit-appearance:none; width:1.1em; height:1.1em; margin:0 .5em 0 0; vertical-align:-.2em; border:1.5px solid #c8ccd0; border-radius:4px; background:#fff; position:relative; opacity:1; cursor:default; box-sizing:border-box; }
-li.task input[type=checkbox]:checked { background-color:#1f883d; border-color:#1f883d; }
-li.task input[type=checkbox]:checked::after { content:"✓"; position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8em; line-height:1; font-weight:700; }
-aside.callout { border-left:4px solid var(--accent); background:#f0f6ff; padding:.4em 16px; border-radius:0 8px 8px 0; margin:1em 0; }
-aside.aside { border-left-color:#8b949e; background:#f6f8fa; }
-aside.warning { border-left-color:#d97706; background:#fff8f0; }
-aside.callout > :first-child { margin-top:0; } aside.callout > :last-child { margin-bottom:0; }
-figure { margin:1.2em 0; }
-figcaption { color:var(--muted); font-size:.86em; text-align:center; margin-top:.5em; }
-table.geml-table { border-collapse:collapse; width:100%; font-size:.92em; }
-table.geml-table th, table.geml-table td { border:1px solid var(--bd); padding:6px 12px; }
-table.geml-table thead th { background:var(--code-bg); cursor:pointer; user-select:none; white-space:nowrap; }
-table.geml-table thead th::after { content:" \\2195"; color:var(--muted); font-size:.8em; }
-table.geml-table thead th.asc::after { content:" \\2191"; color:var(--accent); }
-table.geml-table thead th.desc::after { content:" \\2193"; color:var(--accent); }
-table.geml-table tbody tr:nth-child(2n) { background:#fafbfc; }
-table.geml-table td.computed { color:#0a7c52; }
-table.geml-table tfoot td { background:var(--code-bg); font-weight:600; border-top:2px solid var(--bd); }
-.table-tools { margin-bottom:6px; } .table-filter { width:240px; max-width:100%; padding:5px 9px; border:1px solid var(--bd); border-radius:7px; font-size:.85em; }
-.table-figure details > summary { cursor:pointer; color:var(--muted); font-size:.86em; padding:4px 0; }
-.table-note { color:var(--muted); font-size:.82em; margin:6px 0 0; }
-.geml-chart { width:100%; height:auto; background:var(--bg); border:1px solid var(--bd); border-radius:8px; }
-.c-title { font-size:15px; font-weight:600; fill:var(--fg); }
-.c-grid { stroke:#eaecef; } .c-axis { stroke:#aab1b8; } .c-tick { font-size:11px; fill:var(--muted); } .c-legend { font-size:12px; fill:var(--fg); }
-.media { max-width:100%; border-radius:8px; }
-.diagram-src { color:var(--muted); } .render-error { color:#cf222e; }
-.math-block { overflow-x:auto; padding:.4em 0; }
-sup.fn a { font-size:.75em; }
-.geml-footer { max-width:860px; margin:0 auto; padding:16px 24px 40px; color:var(--muted); font-size:.82em; }
-.geml-footer code { font-size:.95em; }
-.code-graph { margin:1.4em 0; }
-.cg-mount { border:1px solid var(--bd); border-radius:8px; padding:10px 12px; background:var(--bg); }
-.cg-scroll { overflow:auto; min-height:52vh; max-height:72vh; }
-.cg-svg { display:block; }
-.cg-search-wrap { position:relative; display:inline-block; }
-.cg-search { font:12px/1.4 inherit; padding:2px 7px; border:1px solid var(--bd); border-radius:4px; background:var(--bg); color:var(--fg); min-width:13ch; }
-.cg-search-menu { position:absolute; z-index:30; top:calc(100% + 2px); left:0; min-width:24ch; max-width:52ch; max-height:52vh; overflow:auto; background:var(--bg); border:1px solid var(--bd); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
-.cg-search-row { display:block; width:100%; text-align:left; padding:4px 9px 4px 18px; border:0; background:none; color:var(--fg); cursor:pointer; font:12px/1.4 inherit; }
-.cg-search-row:hover { background:var(--bd); }
-.cg-search-count { position:sticky; top:0; padding:4px 9px; font-size:11px; opacity:.65; background:var(--bg); border-bottom:1px solid var(--bd); }
-.cg-search-grp { padding:6px 9px 2px; font-size:11px; font-weight:600; opacity:.7; border-top:1px solid var(--bd); }
-.cg-search-grp:first-of-type { border-top:0; }
-.cg-stage { display:flex; gap:10px; align-items:flex-start; }
-.cg-stage .cg-scroll { flex:1 1 auto; min-width:0; }
-.cg-src { flex:0 0 42%; max-width:46%; display:flex; flex-direction:column; border:1px solid var(--bd); border-radius:6px; overflow:hidden; background:var(--bg); }
-.cg-src-hd { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:4px 8px; border-bottom:1px solid var(--bd); color:var(--muted); font:.76em ui-monospace,Consolas,monospace; word-break:break-all; }
-.cg-src-hd button { font:inherit; border:1px solid var(--bd); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; padding:0 6px; }
-.cg-src-body { margin:0; padding:8px 10px; overflow:auto; max-height:72vh; color:var(--fg); font:12px/1.5 ui-monospace,Consolas,monospace; white-space:pre; }
-.cg-src-note { color:var(--muted); font-style:italic; white-space:pre-wrap; }
-.cg-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.82em; color:var(--muted); margin-bottom:6px; }
-.cg-bar button { font:inherit; padding:1px 8px; border:1px solid var(--bd); border-radius:5px; background:transparent; cursor:pointer; }
-.cg-crumb .cg-seg { border:0; border-radius:0; padding:0; background:none; color:var(--accent); cursor:pointer; font:inherit; }
-.cg-crumb .cg-seg:hover { text-decoration:underline; }
-.cg-frame { display:block; width:100%; height:72vh; border:0; background:var(--bg); }
-.cg-flash { color:#b42318; }
-.cg-legend { display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:.75em; color:var(--muted); margin-top:6px; }
-.cg-upbtn { cursor:pointer; }
-.cg-upbtn circle { fill:#fff; stroke:#94a3b8; }
-.cg-upbtn text { font-size:11px; fill:#57606a; }
-.cg-upbtn:hover circle { stroke:var(--accent); stroke-width:1.6; }
-.cg-upbtn:hover text { fill:var(--accent); }
-.cg-uplink { fill:none; stroke:#94a3b8; stroke-dasharray:3 2.5; pointer-events:none; }
-.cg-groups { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:.75em; color:var(--muted); }
-.cg-chip { display:inline-flex; align-items:center; gap:4px; }
-.cg-chip i { width:10px; height:10px; border-radius:2px; border:1px solid #94a3b8; display:inline-block; }
-.cg-note { font-size:.8em; color:#9a6700; }
-.cg-n rect { fill:#eef2f7; stroke:#94a3b8; }
-.cg-n text { font-size:12px; fill:var(--fg); font-family:ui-monospace,Consolas,monospace; }
-.cg-n { cursor:pointer; }
-.cg-n.root rect { fill:#dbeafe; stroke:#2563eb; stroke-width:2; }
-.cg-n.leaf { opacity:.45; }
-.cg-n.test rect { stroke-dasharray:3 2; }
-.cg-n.grp rect { stroke-width:1.8; }
-.cg-e { fill:none; stroke:#94a3b8; stroke-width:.9; }
-.cg-e.cand { stroke-dasharray:2 3; }
-.cg-e.back { stroke:#dc2626; stroke-dasharray:5 3; }
-.cg-e.http { stroke:#0891b2; stroke-width:1.5; stroke-dasharray:5 2; } /* cross-stack API link */
-.cg-e.soft { opacity:.55; }
-.cg-svg.hl .cg-n { opacity:.22; }
-.cg-svg.hl .cg-e { opacity:.1; }
-.cg-svg.hl .cg-n.hl { opacity:1; }
-.cg-svg.hl .cg-e.hl { opacity:1; stroke-width:1.6; }
+export const CSS = `
+:root { --fg:#1f2328; --muted:#656d76; --bd:#d0d7de; --bg:#fff; --accent:#2563eb; --code-bg:#f6f8fa; }
+* { box-sizing: border-box; }
+body { margin:0; color:var(--fg); background:#fafbfc; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"PingFang SC","Microsoft Yahei",sans-serif; }
+main { max-width: 860px; margin: 0 auto; padding: 48px 24px 96px; background:var(--bg); }
+h1,h2,h3,h4,h5,h6 { line-height:1.25; margin:1.6em 0 .6em; scroll-margin-top:16px; }
+h1 { font-size:2em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }
+h2 { font-size:1.5em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }
+h3 { font-size:1.25em; } h4 { font-size:1em; }
+p { margin:.7em 0; }
+a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
+code { background:var(--code-bg); padding:.15em .35em; border-radius:6px; font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
+pre { background:var(--code-bg); padding:14px 16px; border-radius:8px; overflow:auto; }
+pre code { background:none; padding:0; font-size:.85em; }
+pre.output { background:#0d1117; color:#e6edf3; }
+pre.output code { color:inherit; }
+ul,ol { padding-left:1.6em; } li { margin:.2em 0; }
+ul.task-list { list-style:none; padding-left:.2em; }
+li.task input[type=checkbox] { appearance:none; -webkit-appearance:none; width:1.1em; height:1.1em; margin:0 .5em 0 0; vertical-align:-.2em; border:1.5px solid #c8ccd0; border-radius:4px; background:#fff; position:relative; opacity:1; cursor:default; box-sizing:border-box; }
+li.task input[type=checkbox]:checked { background-color:#1f883d; border-color:#1f883d; }
+li.task input[type=checkbox]:checked::after { content:"✓"; position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8em; line-height:1; font-weight:700; }
+aside.callout { border-left:4px solid var(--accent); background:#f0f6ff; padding:.4em 16px; border-radius:0 8px 8px 0; margin:1em 0; }
+aside.aside { border-left-color:#8b949e; background:#f6f8fa; }
+aside.warning { border-left-color:#d97706; background:#fff8f0; }
+aside.callout > :first-child { margin-top:0; } aside.callout > :last-child { margin-bottom:0; }
+figure { margin:1.2em 0; }
+figcaption { color:var(--muted); font-size:.86em; text-align:center; margin-top:.5em; }
+table.geml-table { border-collapse:collapse; width:100%; font-size:.92em; }
+table.geml-table th, table.geml-table td { border:1px solid var(--bd); padding:6px 12px; }
+table.geml-table thead th { background:var(--code-bg); cursor:pointer; user-select:none; white-space:nowrap; }
+table.geml-table thead th::after { content:" \\2195"; color:var(--muted); font-size:.8em; }
+table.geml-table thead th.asc::after { content:" \\2191"; color:var(--accent); }
+table.geml-table thead th.desc::after { content:" \\2193"; color:var(--accent); }
+table.geml-table tbody tr:nth-child(2n) { background:#fafbfc; }
+table.geml-table td.computed { color:#0a7c52; }
+table.geml-table tfoot td { background:var(--code-bg); font-weight:600; border-top:2px solid var(--bd); }
+.table-tools { margin-bottom:6px; } .table-filter { width:240px; max-width:100%; padding:5px 9px; border:1px solid var(--bd); border-radius:7px; font-size:.85em; }
+.table-figure details > summary { cursor:pointer; color:var(--muted); font-size:.86em; padding:4px 0; }
+.table-note { color:var(--muted); font-size:.82em; margin:6px 0 0; }
+.geml-chart { width:100%; height:auto; background:var(--bg); border:1px solid var(--bd); border-radius:8px; }
+.c-title { font-size:15px; font-weight:600; fill:var(--fg); }
+.c-grid { stroke:#eaecef; } .c-axis { stroke:#aab1b8; } .c-tick { font-size:11px; fill:var(--muted); } .c-legend { font-size:12px; fill:var(--fg); }
+.media { max-width:100%; border-radius:8px; }
+.diagram-src { color:var(--muted); } .render-error { color:#cf222e; }
+.math-block { overflow-x:auto; padding:.4em 0; }
+sup.fn a { font-size:.75em; }
+.geml-footer { max-width:860px; margin:0 auto; padding:16px 24px 40px; color:var(--muted); font-size:.82em; }
+.geml-footer code { font-size:.95em; }
+.code-graph { margin:1.4em 0; }
+.cg-mount { border:1px solid var(--bd); border-radius:8px; padding:10px 12px; background:var(--bg); }
+.cg-scroll { overflow:auto; min-height:52vh; max-height:72vh; }
+.cg-svg { display:block; }
+.cg-search-wrap { position:relative; display:inline-block; }
+.cg-search { font:12px/1.4 inherit; padding:2px 7px; border:1px solid var(--bd); border-radius:4px; background:var(--bg); color:var(--fg); min-width:13ch; }
+.cg-search-menu { position:absolute; z-index:30; top:calc(100% + 2px); left:0; min-width:24ch; max-width:52ch; max-height:52vh; overflow:auto; background:var(--bg); border:1px solid var(--bd); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
+.cg-search-row { display:block; width:100%; text-align:left; padding:4px 9px 4px 18px; border:0; background:none; color:var(--fg); cursor:pointer; font:12px/1.4 inherit; }
+.cg-search-row:hover { background:var(--bd); }
+.cg-search-count { position:sticky; top:0; padding:4px 9px; font-size:11px; opacity:.65; background:var(--bg); border-bottom:1px solid var(--bd); }
+.cg-search-grp { padding:6px 9px 2px; font-size:11px; font-weight:600; opacity:.7; border-top:1px solid var(--bd); }
+.cg-search-grp:first-of-type { border-top:0; }
+.cg-stage { display:flex; gap:10px; align-items:flex-start; }
+.cg-stage .cg-scroll { flex:1 1 auto; min-width:0; }
+.cg-src { flex:0 0 42%; max-width:46%; display:flex; flex-direction:column; border:1px solid var(--bd); border-radius:6px; overflow:hidden; background:var(--bg); }
+.cg-src-hd { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:4px 8px; border-bottom:1px solid var(--bd); color:var(--muted); font:.76em ui-monospace,Consolas,monospace; word-break:break-all; }
+.cg-src-hd button { font:inherit; border:1px solid var(--bd); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; padding:0 6px; }
+.cg-src-body { margin:0; padding:8px 10px; overflow:auto; max-height:72vh; color:var(--fg); font:12px/1.5 ui-monospace,Consolas,monospace; white-space:pre; }
+.cg-src-note { color:var(--muted); font-style:italic; white-space:pre-wrap; }
+.cg-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.82em; color:var(--muted); margin-bottom:6px; }
+.cg-bar button { font:inherit; padding:1px 8px; border:1px solid var(--bd); border-radius:5px; background:transparent; cursor:pointer; }
+.cg-crumb .cg-seg { border:0; border-radius:0; padding:0; background:none; color:var(--accent); cursor:pointer; font:inherit; }
+.cg-crumb .cg-seg:hover { text-decoration:underline; }
+.cg-frame { display:block; width:100%; height:72vh; border:0; background:var(--bg); }
+.cg-flash { color:#b42318; }
+.cg-legend { display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:.75em; color:var(--muted); margin-top:6px; }
+.cg-upbtn { cursor:pointer; }
+.cg-upbtn circle { fill:#fff; stroke:#94a3b8; }
+.cg-upbtn text { font-size:11px; fill:#57606a; }
+.cg-upbtn:hover circle { stroke:var(--accent); stroke-width:1.6; }
+.cg-upbtn:hover text { fill:var(--accent); }
+.cg-uplink { fill:none; stroke:#94a3b8; stroke-dasharray:3 2.5; pointer-events:none; }
+.cg-groups { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:.75em; color:var(--muted); }
+.cg-chip { display:inline-flex; align-items:center; gap:4px; }
+.cg-chip i { width:10px; height:10px; border-radius:2px; border:1px solid #94a3b8; display:inline-block; }
+.cg-note { font-size:.8em; color:#9a6700; }
+.cg-n rect { fill:#eef2f7; stroke:#94a3b8; }
+.cg-n text { font-size:12px; fill:var(--fg); font-family:ui-monospace,Consolas,monospace; }
+.cg-n { cursor:pointer; }
+.cg-n.root rect { fill:#dbeafe; stroke:#2563eb; stroke-width:2; }
+.cg-n.leaf { opacity:.45; }
+.cg-n.test rect { stroke-dasharray:3 2; }
+.cg-n.grp rect { stroke-width:1.8; }
+.cg-e { fill:none; stroke:#94a3b8; stroke-width:.9; }
+.cg-e.cand { stroke-dasharray:2 3; }
+.cg-e.back { stroke:#dc2626; stroke-dasharray:5 3; }
+.cg-e.http { stroke:#0891b2; stroke-width:1.5; stroke-dasharray:5 2; } /* cross-stack API link */
+.cg-e.soft { opacity:.55; }
+.cg-svg.hl .cg-n { opacity:.22; }
+.cg-svg.hl .cg-e { opacity:.1; }
+.cg-svg.hl .cg-n.hl { opacity:1; }
+.cg-svg.hl .cg-e.hl { opacity:1; stroke-width:1.6; }
 `;
-export const JS = `
-(function () {
-  function cmp(a, b) {
-    var na = a.dataset.sort, nb = b.dataset.sort;
-    if (na !== undefined && nb !== undefined) return parseFloat(na) - parseFloat(nb);
-    return (a.textContent || "").localeCompare(b.textContent || "");
-  }
-  document.querySelectorAll("table.geml-table").forEach(function (table) {
-    var tbody = table.tBodies[0];
-    if (!tbody) return;
-    // Sort on header click.
-    var ths = table.tHead ? table.tHead.rows[0].cells : [];
-    Array.prototype.forEach.call(ths, function (th, col) {
-      th.addEventListener("click", function () {
-        var dir = th.classList.contains("asc") ? "desc" : "asc";
-        Array.prototype.forEach.call(ths, function (h) { h.classList.remove("asc", "desc"); });
-        th.classList.add(dir);
-        var rows = Array.prototype.slice.call(tbody.rows);
-        rows.sort(function (r1, r2) {
-          var c = cmp(r1.cells[col], r2.cells[col]);
-          return dir === "asc" ? c : -c;
-        });
-        rows.forEach(function (r) { tbody.appendChild(r); });
-      });
-    });
-    // Filter rows.
-    var fig = table.closest(".table-figure");
-    var input = fig ? fig.querySelector(".table-filter") : null;
-    if (input) input.addEventListener("input", function () {
-      var q = input.value.toLowerCase();
-      Array.prototype.forEach.call(tbody.rows, function (r) {
-        r.style.display = (r.textContent || "").toLowerCase().indexOf(q) >= 0 ? "" : "none";
-      });
-    });
-  });
-})();
+export const JS = `
+(function () {
+  function cmp(a, b) {
+    var na = a.dataset.sort, nb = b.dataset.sort;
+    if (na !== undefined && nb !== undefined) return parseFloat(na) - parseFloat(nb);
+    return (a.textContent || "").localeCompare(b.textContent || "");
+  }
+  document.querySelectorAll("table.geml-table").forEach(function (table) {
+    var tbody = table.tBodies[0];
+    if (!tbody) return;
+    // Sort on header click.
+    var ths = table.tHead ? table.tHead.rows[0].cells : [];
+    Array.prototype.forEach.call(ths, function (th, col) {
+      th.addEventListener("click", function () {
+        var dir = th.classList.contains("asc") ? "desc" : "asc";
+        Array.prototype.forEach.call(ths, function (h) { h.classList.remove("asc", "desc"); });
+        th.classList.add(dir);
+        var rows = Array.prototype.slice.call(tbody.rows);
+        rows.sort(function (r1, r2) {
+          var c = cmp(r1.cells[col], r2.cells[col]);
+          return dir === "asc" ? c : -c;
+        });
+        rows.forEach(function (r) { tbody.appendChild(r); });
+      });
+    });
+    // Filter rows.
+    var fig = table.closest(".table-figure");
+    var input = fig ? fig.querySelector(".table-filter") : null;
+    if (input) input.addEventListener("input", function () {
+      var q = input.value.toLowerCase();
+      Array.prototype.forEach.call(tbody.rows, function (r) {
+        r.style.display = (r.textContent || "").toLowerCase().indexOf(q) >= 0 ? "" : "none";
+      });
+    });
+  });
+})();
 `;
 // geml-code-graph runtime: layered layout AT DRAW TIME (GEP-0003 / v2-D8) so
 // clicking a node re-roots the view inside the embedded slice. Algorithm as