@geml/geml 1.0.0 → 1.1.1

package/dist/render.js

@@ -26,13 +26,28 @@ function escAttr(s) {
 // ---------------------------------------------------------------------------
 class RenderCtx {
     doc;
+    opts;
     usedMath = false;
     usedMermaid = false;
+    usedCodeGraph = false;
     labels = new Map(); // id -> link label for [[#id]] auto-refs
-    constructor(doc) {
+    constructor(doc, opts = {}) {
         this.doc = doc;
+        this.opts = opts;
         this.indexLabels(doc.children);
     }
+    // Codemap documents (meta declares module= / container=) are machine data:
+    // their oversized tables fold shut by default. Everywhere else a big table
+    // is still the document's CONTENT — it truncates for the DOM's sake but
+    // stays visible.
+    get isCodemapDoc() {
+        for (const b of this.doc.children) {
+            if (b.kind === "block" && b.type === "meta" && b.data) {
+                return b.data["module"] !== undefined || b.data["container"] !== undefined;
+            }
+        }
+        return false;
+    }
     // Build the id -> label map: a heading's text, or a block's caption, or its id.
     indexLabels(blocks) {
         for (const b of blocks) {
@@ -156,8 +171,7 @@ class RenderCtx {
             case "math":
                 this.usedMath = true;
                 return `<div class="math-block"${idAttr}>\\[${esc(raw)}\\]</div>`;
-            case "note":
-            case "aside": {
+            case "note": {
                 const classes = ["callout", b.type, ...b.classes].join(" ");
                 const inner = (b.children ?? []).map((c) => this.block(c)).filter((s) => s).join("\n");
                 return `<aside class="${classes}"${idAttr}>\n${inner}\n</aside>`;
@@ -182,6 +196,10 @@ class RenderCtx {
                 return `<figure class="chart"${idAttr}>${chartSvg(b.chart, caption)}${cap}</figure>`;
             return `<figure${idAttr}><p class="render-error">chart could not be built (see diagnostics)</p>${cap}</figure>`;
         }
+        if (fmt === "geml-code-graph") {
+            const src = typeof b.attrs["src"] === "string" ? b.attrs["src"] : "";
+            return this.codeGraphFigure(src, idAttr, cap);
+        }
         if (fmt === "mermaid") {
             this.usedMermaid = true;
             return `<figure${idAttr}><pre class="mermaid">${esc(raw)}</pre>${cap}</figure>`;
@@ -190,12 +208,47 @@ class RenderCtx {
         return `<figure${idAttr}><pre class="diagram-src" data-format="${escAttr(fmt)}">${esc(raw)}</pre>` +
             `<figcaption>${caption ? esc(caption) + " — " : ""}<code>${esc(fmt || "diagram")}</code> (no bundled renderer in this build)</figcaption></figure>`;
     }
+    // geml-code-graph embed (GEP-0003): build the call-graph slice from the
+    // codemap document `src` points at (roots/depth from ITS meta), embed the
+    // data, and let the in-page runtime lay it out at draw time — that is what
+    // makes click-to-re-root possible.
+    codeGraphFigure(src, idAttr, cap) {
+        if (!src) {
+            return `<figure class="code-graph"${idAttr}><p class="render-error">geml-code-graph: missing <code>src=</code></p>${cap}</figure>`;
+        }
+        if (this.opts.graphSidecar) {
+            // Sidecar mode (served pages): don't build the slice here at all — the
+            // page ships without the payload and the runtime fetches it from the
+            // sidecar route after first paint. Errors surface in the mount then.
+            this.usedCodeGraph = true;
+            return `<figure class="code-graph"${idAttr}><div class="cg-mount" data-start="${escAttr(src)}"` +
+                ` data-graph-src="${escAttr(this.opts.graphSidecar + encodeURIComponent(src))}"></div>${cap}</figure>`;
+        }
+        const r = buildCodeGraph(src, this.opts);
+        if (r.error !== undefined) {
+            return `<figure class="code-graph"${idAttr}><p class="render-error">geml-code-graph: ${esc(r.error)}</p>${cap}</figure>`;
+        }
+        this.usedCodeGraph = true;
+        const note = r.truncated ? `<p class="cg-note">graph data capped at ${CG_MAX_NODES} nodes for this embed — the codemap documents themselves are complete</p>` : "";
+        // data-start carries the slice's own document path so a live module
+        // script (opts.liveGraph) can hook the mount without re-parsing the
+        // multi-MB payload attribute.
+        return `<figure class="code-graph"${idAttr}><div class="cg-mount" data-start="${escAttr(r.data.start)}" data-graph="${escAttr(JSON.stringify(r.data))}"></div>${note}${cap}</figure>`;
+    }
     table(t, id, caption) {
         const idAttr = id ? ` id="${escAttr(id)}"` : "";
         const alignStyle = (a) => (a ? ` style="text-align:${a}"` : "");
+        // Parsing + laying out tens of thousands of <table> rows freezes the
+        // page for seconds, so the HTML view renders a bounded preview (the
+        // model keeps every row: charts, computed summaries and the code-graph
+        // never read the HTML). Codemap edge tables additionally fold shut —
+        // they are machine data; elsewhere the table is content and stays open.
+        const maxRows = 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 = t.rows.map((r) => r.map(() => false));
-        t.rows.forEach((row, r) => row.forEach((cell, c) => {
+        const covered = rows.map((r) => r.map(() => false));
+        rows.forEach((row, r) => row.forEach((cell, c) => {
             if (!cell.span)
                 return;
             for (let dr = 0; dr < cell.span.rows; dr++)
@@ -210,7 +263,7 @@ class RenderCtx {
         const thead = t.header
             ? `<thead><tr>${t.columns.map((col, c) => `<th${alignStyle(t.align[c])}>${esc(col)}</th>`).join("")}</tr></thead>`
             : "";
-        const bodyRows = t.rows.map((row, r) => {
+        const bodyRows = rows.map((row, r) => {
             const cells = row.map((cell, c) => {
                 if (covered[r]?.[c])
                     return "";
@@ -229,6 +282,16 @@ class RenderCtx {
             : "";
         const cap = caption ? `<figcaption>${esc(caption)}</figcaption>` : "";
         const tools = `<div class="table-tools"><input class="table-filter" type="search" placeholder="Filter rows…" aria-label="Filter table rows"></div>`;
+        if (allRows.length > maxRows) {
+            const note = `<p class="table-note">showing the first ${maxRows} of ${allRows.length} rows — the complete table is in the document source</p>`;
+            if (this.isCodemapDoc) {
+                const summary = `${esc(id ? "#" + id : "table")} · ${allRows.length} rows (preview: first ${maxRows})`;
+                return `<figure class="table-figure"${idAttr}><details><summary>${summary}</summary>${tools}` +
+                    `<table class="geml-table">${thead}<tbody>\n${bodyRows}\n</tbody>${tfoot}</table>${note}</details>${cap}</figure>`;
+            }
+            return `<figure class="table-figure"${idAttr}>${tools}` +
+                `<table class="geml-table">${thead}<tbody>\n${bodyRows}\n</tbody>${tfoot}</table>${note}${cap}</figure>`;
+        }
         return `<figure class="table-figure"${idAttr}>${tools}` +
             `<table class="geml-table">${thead}<tbody>\n${bodyRows}\n</tbody>${tfoot}</table>${cap}</figure>`;
     }
@@ -244,6 +307,392 @@ function niceMax(v) {
     const nice = f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10;
     return nice * pow;
 }
+// ---------------------------------------------------------------------------
+// geml-code-graph (GEP-0003) — slice builder. Traverses the codemap profile's
+// #calls tables from the target document's meta `entry`, across documents,
+// depth-limited; the layered LAYOUT happens in the page runtime (draw time).
+// ---------------------------------------------------------------------------
+// Hard payload ceiling only — the VIEW paces itself: the runtime draws the
+// first 400 by BFS order and offers "+400"/"all" to walk deeper. The data in
+// the codemap documents is always complete regardless.
+const CG_MAX_NODES = 4000;
+// Tiny posix-path helpers (no node:path dependency in the renderer).
+function cgDir(p) { const i = p.lastIndexOf("/"); return i < 0 ? "" : p.slice(0, i); }
+function cgJoin(dir, rel) {
+    const parts = (dir ? dir.split("/") : []).concat(rel.split("/"));
+    const out = [];
+    for (const seg of parts) {
+        if (seg === "" || seg === ".")
+            continue;
+        if (seg === "..")
+            out.pop();
+        else
+            out.push(seg);
+    }
+    return out.join("/");
+}
+function buildCodeGraph(startRel, opts, view) {
+    if (!opts.loadDoc || !opts.parseDoc)
+        return { error: "no document loader in this build (render via the geml CLI)" };
+    const cache = new Map();
+    const loadParsed = (rel) => {
+        if (!cache.has(rel)) {
+            const s = opts.loadDoc(rel);
+            cache.set(rel, s === null ? null : opts.parseDoc(s));
+        }
+        return cache.get(rel);
+    };
+    const metaOf = (d) => {
+        for (const b of d.children)
+            if (b.kind === "block" && b.type === "meta" && b.data)
+                return b.data;
+        return {};
+    };
+    const start = cgJoin("", startRel);
+    const doc0 = loadParsed(start);
+    if (!doc0)
+        return { error: `cannot load \`${startRel}\`` };
+    const meta0 = metaOf(doc0);
+    const entries = String(meta0["entry"] ?? "").split(/\s+/).filter(Boolean);
+    // A codemap INDEX (meta declares container=) renders the MODULE-level
+    // aggregation. The payload carries the RAW module rows and module edges;
+    // the runtime derives every view of the grouping tree from them (one tree
+    // node's children per view, single-child chains tunnelled) — so drilling
+    // through packages costs no refetch and old data needs no rebuild.
+    if (meta0["container"] !== undefined && !(view && view.node)) {
+        const findTable = (d, id) => {
+            for (const b of d.children)
+                if (b.kind === "block" && b.type === "table" && b.id === id && b.table)
+                    return b.table;
+            return undefined;
+        };
+        const mods = findTable(doc0, "modules");
+        if (mods) {
+            const mi = mods.columns.indexOf("module"), di = mods.columns.indexOf("doc");
+            const mc = mods.columns.indexOf("methods");
+            if (mi < 0 || di < 0)
+                return { error: "#modules table lacks module/doc columns" };
+            const list = [];
+            for (const r of mods.rows) {
+                const name = r[mi]?.text ?? "", doc = r[di]?.text ?? "";
+                if (name && doc)
+                    list.push({ p: name, doc, m: mc >= 0 ? Number(r[mc]?.text ?? "") || 0 : 0 });
+            }
+            const em = [];
+            const medges = findTable(doc0, "module-edges");
+            if (medges) {
+                const fi = medges.columns.indexOf("from"), ti = medges.columns.indexOf("to"), ci = medges.columns.indexOf("calls");
+                for (const r of medges.rows) {
+                    const f = r[fi]?.text ?? "", t = r[ti]?.text ?? "";
+                    if (f && t)
+                        em.push([f, t, ci >= 0 ? Number(r[ci]?.text ?? "") || 1 : 1]);
+                }
+            }
+            // Containers holding app entries — every derived view marks the child
+            // that contains one of these as a root.
+            const entryDocs = [];
+            for (const e of entries) {
+                const h = e.indexOf("#");
+                if (h > 0) {
+                    const d = cgJoin(cgDir(start), e.slice(0, h));
+                    if (!entryDocs.includes(d))
+                        entryDocs.push(d);
+                }
+            }
+            return { data: { start, depth: 99, roots: [], nodes: {}, edges: [], mode: "modules", mods: list, medges: em, entryDocs } };
+        }
+    }
+    if (!(view && view.node)) {
+        // A container view roots at its meta `entry` PLUS its in-degree-zero
+        // methods. `entry` = called from OUTSIDE the container; in-degree-zero =
+        // NO static caller at all — a JVM/agent entry point (`premain`), an AOP
+        // advice the instrumentation invokes, a reflective handler, or dead code.
+        // Such framework hooks have no in-repo caller, so seeding only from
+        // `entry` drops them (and everything they reach) from their OWN
+        // container's view. Union keeps a container's methods visible in it —
+        // symmetric with the module overview's entry ∪ in-degree-zero roots.
+        const ids = [];
+        const anchorOf = {};
+        const leaf = new Set();
+        const called = new Set();
+        for (const b of doc0.children) {
+            if (b.kind !== "block")
+                continue;
+            if (b.type === "code" && b.id) {
+                ids.push(b.id);
+                if (typeof b.attrs["anchor"] === "string")
+                    anchorOf[b.id] = b.attrs["anchor"];
+                if (b.classes.includes("leaf"))
+                    leaf.add(b.id);
+            }
+            if (b.type === "table" && b.table && (b.id === "calls" || b.id === "called-by")) {
+                const ti = b.table.columns.indexOf("to");
+                if (ti >= 0)
+                    for (const r of b.table.rows) {
+                        const t = r[ti]?.text ?? "";
+                        if (t.startsWith("#"))
+                            called.add(t.slice(1));
+                    }
+            }
+        }
+        const have = new Set(entries.map((e) => e.replace(/^#/, "")));
+        // Synthetic methods — constructors (`<init>`/`<clinit>`), lambdas
+        // (`<lambda>`), and anonymous-class / unresolved-signature methods — are
+        // implementation artifacts, never entry points. Their in-degree is zero
+        // only because no static edge names them (fluent-API / reflective / lambda
+        // callers go unresolved), so seeding roots from them floods the view. Keep
+        // them out of the in-degree-zero roots; they still appear when a real root
+        // reaches them.
+        const synthetic = (id) => /<(?:init|clinit|lambda)>|<unresolvedSignature>/.test(anchorOf[id] || "");
+        // `.leaf` = zero out-edges: an in-degree-zero leaf is an ISOLATED node (no
+        // caller, nothing to expand) — a bean getter/setter, a constant, dead code.
+        // As a root it is pure clutter, so it never seeds one; it still appears if a
+        // real root reaches it. (An in-degree-zero method WITH out-edges — premain,
+        // an AOP advice — is a genuine entry and does seed a root.)
+        for (const id of ids)
+            if (!called.has(id) && !have.has(id) && !synthetic(id) && !leaf.has(id))
+                entries.push(`#${id}`);
+    }
+    if (!(view && view.node) && !entries.length)
+        return { error: `\`${startRel}\` declares no \`entry\` in its meta` };
+    const depth = Number(meta0["graph-depth"]) > 0 ? Number(meta0["graph-depth"]) : 6;
+    const resolveRef = (fromDoc, ref) => {
+        const h = ref.indexOf("#");
+        if (h < 0)
+            return null;
+        const id = ref.slice(h + 1);
+        return { doc: h === 0 ? fromDoc : cgJoin(cgDir(fromDoc), ref.slice(0, h)), id };
+    };
+    const nodes = {};
+    const edges = [];
+    const roots = [];
+    let truncated = false;
+    // Per-document indexes, built once on first touch. The BFS re-enters the
+    // same documents for every node it expands — a linear scan of a 30k-row
+    // #calls table per node turns the whole walk quadratic (seconds per page
+    // on a large codemap).
+    const blockIdxOf = (() => {
+        const cache = new Map();
+        return (docRel) => {
+            let idx = cache.get(docRel);
+            if (idx)
+                return idx;
+            idx = new Map();
+            const d = loadParsed(docRel);
+            if (d)
+                for (const b of d.children) {
+                    if (b.kind !== "block" || !b.id || idx.has(b.id))
+                        continue;
+                    // Label with the real display name when the block carries one — the
+                    // id is the sanitised form ("RenderCtx-block" for "RenderCtx.block").
+                    const node = { n: typeof b.attrs["name"] === "string" ? b.attrs["name"] : b.id, doc: docRel };
+                    if (typeof b.attrs["src"] === "string")
+                        node.src = b.attrs["src"];
+                    if (b.classes.includes("leaf"))
+                        node.leaf = true;
+                    if (b.classes.includes("test"))
+                        node.test = true;
+                    if (b.classes.includes("accessor"))
+                        node.acc = true;
+                    idx.set(b.id, node);
+                }
+            cache.set(docRel, idx);
+            return idx;
+        };
+    })();
+    const blockInfo = (docRel, id) => blockIdxOf(docRel).get(id) ?? { n: id, doc: docRel };
+    const callIdxOf = (() => {
+        const cache = new Map();
+        return (docRel) => {
+            let idx = cache.get(docRel);
+            if (idx)
+                return idx;
+            idx = new Map();
+            const d = loadParsed(docRel);
+            if (d)
+                for (const b of d.children) {
+                    if (b.kind === "block" && b.type === "table" && b.id === "calls" && b.table) {
+                        const cols = b.table.columns;
+                        const fi = cols.indexOf("from"), ti = cols.indexOf("to"), ki = cols.indexOf("kind"), ci = cols.indexOf("confidence");
+                        if (fi < 0 || ti < 0)
+                            break;
+                        for (const r of b.table.rows) {
+                            const from = r[fi]?.text ?? "";
+                            if (!from.startsWith("#"))
+                                continue;
+                            let list = idx.get(from.slice(1));
+                            if (!list) {
+                                list = [];
+                                idx.set(from.slice(1), list);
+                            }
+                            list.push({ to: r[ti]?.text ?? "", kind: r[ki]?.text || "call", conf: ci >= 0 ? (r[ci]?.text ?? "") : "" });
+                        }
+                        break;
+                    }
+                }
+            cache.set(docRel, idx);
+            return idx;
+        };
+    })();
+    const callRows = (docRel, id) => callIdxOf(docRel).get(id) ?? [];
+    // A caller-direction view (the runtime's ⊕ handle through a live loader):
+    // BFS over #called-by tables from one node. Edges are emitted REVERSED
+    // (callee -> caller), so roots=[focus] lets the standard layering flow from
+    // the method out to its ultimate callers — cycles fall out as back edges.
+    if (view && view.node && view.dir === "up") {
+        const hi = view.node.lastIndexOf("#");
+        if (hi <= 0)
+            return { error: `bad view node \`${view.node}\`` };
+        // Same once-per-document indexing as callRows — the upward BFS crosses
+        // documents through their #called-by tables just as hot.
+        const calledByIdxOf = (() => {
+            const cache = new Map();
+            return (docRel) => {
+                let idx = cache.get(docRel);
+                if (idx)
+                    return idx;
+                idx = new Map();
+                const d = loadParsed(docRel);
+                if (d)
+                    for (const b of d.children) {
+                        if (b.kind === "block" && b.type === "table" && b.id === "called-by" && b.table) {
+                            const cols = b.table.columns;
+                            const fi = cols.indexOf("from"), ti = cols.indexOf("to"), ki = cols.indexOf("kind");
+                            if (fi < 0 || ti < 0)
+                                break;
+                            for (const r of b.table.rows) {
+                                const to = r[ti]?.text ?? "";
+                                if (!to.startsWith("#"))
+                                    continue;
+                                let list = idx.get(to.slice(1));
+                                if (!list) {
+                                    list = [];
+                                    idx.set(to.slice(1), list);
+                                }
+                                list.push({ from: r[fi]?.text ?? "", kind: r[ki]?.text || "call" });
+                            }
+                            break;
+                        }
+                    }
+                cache.set(docRel, idx);
+                return idx;
+            };
+        })();
+        const calledByRows = (docRel, id) => calledByIdxOf(docRel).get(id) ?? [];
+        const focus = view.node;
+        nodes[focus] = blockInfo(focus.slice(0, hi), focus.slice(hi + 1));
+        roots.push(focus);
+        let fr = [{ doc: focus.slice(0, hi), id: focus.slice(hi + 1) }];
+        const seenUp = new Set([focus]);
+        // The caller chain is not depth-limited: its whole point is reaching the
+        // app entry. The node cap (with its visible note) is the only guard.
+        const upDepth = 99;
+        for (let d = 0; d < upDepth && fr.length; d++) {
+            const next = [];
+            for (const cur of fr) {
+                const toKey = `${cur.doc}#${cur.id}`;
+                for (const row of calledByRows(cur.doc, cur.id)) {
+                    const c = resolveRef(cur.doc, row.from);
+                    if (!c)
+                        continue;
+                    const callerKey = `${c.doc}#${c.id}`;
+                    if (!nodes[callerKey]) {
+                        if (Object.keys(nodes).length >= CG_MAX_NODES) {
+                            truncated = true;
+                            continue;
+                        }
+                        nodes[callerKey] = blockInfo(c.doc, c.id);
+                    }
+                    edges.push([toKey, callerKey, row.kind, ""]);
+                    if (!seenUp.has(callerKey)) {
+                        seenUp.add(callerKey);
+                        next.push(c);
+                    }
+                }
+            }
+            fr = next;
+        }
+        return { data: { start, depth: upDepth, roots, nodes, edges, module: String(meta0["module"] ?? "") || undefined, dir: "up", focus }, truncated };
+    }
+    // BFS from the target document's entries, depth-limited (+1 ring of stubs so
+    // the horizon is visible as "more" markers rather than silently missing).
+    // A directed callee view (node-body click through a live loader) seeds from
+    // that one node key instead of the meta entries.
+    let frontier = [];
+    if (view && view.node) {
+        const hi = view.node.lastIndexOf("#");
+        if (hi <= 0)
+            return { error: `bad view node \`${view.node}\`` };
+        roots.push(view.node);
+        frontier.push({ doc: view.node.slice(0, hi), id: view.node.slice(hi + 1) });
+    }
+    else {
+        const seeds = entries.map((e) => resolveRef(start, e)).filter(Boolean);
+        // A `.leaf` root has no callees to expand, so it renders as an ISOLATED dot
+        // — a getter/setter/constant called from another container, or dead code.
+        // Seed roots only from non-leaf entries so the view is call chains, not a
+        // field of dots; a leaf still appears when a real chain reaches it. Fall
+        // back to all seeds if EVERY entry is a leaf (a pure data container — a DTO
+        // of getters — must not come out blank).
+        const nonLeaf = seeds.filter((r) => !blockInfo(r.doc, r.id).leaf);
+        for (const r of (nonLeaf.length ? nonLeaf : seeds)) {
+            roots.push(`${r.doc}#${r.id}`);
+            frontier.push(r);
+        }
+    }
+    const seen = new Set(roots);
+    for (const r of frontier)
+        nodes[`${r.doc}#${r.id}`] = blockInfo(r.doc, r.id);
+    for (let d = 0; d < depth && frontier.length; d++) {
+        const next = [];
+        for (const cur of frontier) {
+            const fromKey = `${cur.doc}#${cur.id}`;
+            for (const row of callRows(cur.doc, cur.id)) {
+                const t = resolveRef(cur.doc, row.to);
+                if (!t)
+                    continue;
+                const toKey = `${t.doc}#${t.id}`;
+                if (!nodes[toKey]) {
+                    if (Object.keys(nodes).length >= CG_MAX_NODES) {
+                        truncated = true;
+                        continue;
+                    }
+                    nodes[toKey] = blockInfo(t.doc, t.id);
+                }
+                edges.push([fromKey, toKey, row.kind, row.conf]);
+                if (!seen.has(toKey)) {
+                    seen.add(toKey);
+                    next.push(t);
+                }
+            }
+        }
+        frontier = next;
+    }
+    // Horizon markers: anything still in the frontier that has further callees.
+    for (const cur of frontier) {
+        if (callRows(cur.doc, cur.id).length > 0)
+            nodes[`${cur.doc}#${cur.id}`].more = true;
+    }
+    // Drop ISOLATED nodes: a seeded root that ends up with no edge at all (no
+    // resolved callee to expand, no in-view caller) is a lone dot — a getter/
+    // setter/constant called only from elsewhere, or a method whose only calls
+    // were unresolved. They are clutter in a flow view. Keep them only if the
+    // WHOLE view is isolated dots (a pure data container mustn't come out blank).
+    const touched = new Set();
+    for (const e of edges) {
+        touched.add(e[0]);
+        touched.add(e[1]);
+    }
+    const connected = roots.filter((r) => touched.has(r));
+    let finalRoots = roots;
+    if (connected.length) {
+        for (const r of roots)
+            if (!touched.has(r))
+                delete nodes[r];
+        finalRoots = connected;
+    }
+    return { data: { start, depth, roots: finalRoots, nodes, edges, module: String(meta0["module"] ?? "") || undefined }, truncated };
+}
 function chartSvg(m, title) {
     if (m.type === "pie")
         return pieSvg(m, title);
@@ -403,7 +852,10 @@ 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 { margin-right:.5em; }
+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; }
@@ -420,6 +872,8 @@ 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); }
@@ -429,6 +883,49 @@ table.geml-table tfoot td { background:var(--code-bg); font-weight:600; border-t
 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; max-height:72vh; }
+.cg-svg { display:block; }
+.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.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; }
 `;
 const JS = `
 (function () {
@@ -467,6 +964,1136 @@ const JS = `
   });
 })();
 `;
+// 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
+// specified: BFS slice from roots -> DFS back-edge marking -> longest-path
+// layering over forward edges -> stable in-layer order. O(V+E) per redraw.
+//
+// ONE implementation, two consumers: the CLI inlines `codeGraphRuntime`
+// verbatim (Function.prototype.toString) into the self-contained HTML; the
+// browser extension / playground import it and call it after their async
+// upgrade step has attached data-graph payloads. Browser-only code — it must
+// stay self-contained (no captured module-scope identifiers).
+export function codeGraphRuntime(root) {
+    function h(tag, attrs) {
+        var el = document.createElementNS("http://www.w3.org/2000/svg", tag);
+        for (var k in attrs)
+            el.setAttribute(k, String(attrs[k]));
+        return el;
+    }
+    // Arrow-marker ids must be unique per drawn svg — several mounts share one
+    // document, and duplicate ids would make every graph point at the first.
+    var arrowSeq = 0;
+    function boot(mount, data0) {
+        var data, out;
+        function setData(d) {
+            data = d;
+            out = {};
+            data.edges.forEach(function (e) { (out[e[0]] = out[e[0]] || []).push(e); });
+        }
+        // Grouped module navigation (GEP-0003 §4): a SHALLOW two-tier model.
+        // Tier 1 (gpath = []) is one node per top path segment — the module-ish
+        // roots. Tier 2 (gpath = [seg]) is that segment's containers FLAT, labelled
+        // by their intra-module path; clicking a container opens its methods. At
+        // most ONE grouping level, so a method is always two clicks from the top —
+        // a deep package chain (core/service/impl) reads as a flat label, never a
+        // click-through. Calls leaving the subtree aggregate into dimmed external
+        // stubs so no dependency is hidden.
+        function deriveView(gpath) {
+            function first(p) { var c = p.indexOf("/"); return c < 0 ? p : p.slice(0, c); }
+            var pByDoc = {}, docByP = {};
+            data0.mods.forEach(function (m) { pByDoc[m.doc] = m.p; docByP[m.p] = m.doc; });
+            // A single top segment (one-module repo) is ceremony: land straight on
+            // its containers, with the breadcrumb still at root — a lone top node is
+            // never worth a click. `reported` keeps the crumb showing `modules`.
+            var reported = gpath;
+            if (!gpath.length) {
+                var tops = {};
+                data0.mods.forEach(function (m) { var s = first(m.p); tops[s] = (tops[s] || 0) + 1; });
+                var tk = Object.keys(tops);
+                if (tk.length === 1) {
+                    var whole = false;
+                    data0.mods.forEach(function (m) { if (m.p === tk[0])
+                        whole = true; });
+                    if (!(tops[tk[0]] === 1 && whole))
+                        gpath = [tk[0]]; // descend past the sole group
+                }
+            }
+            var nodes = {}, keyOf;
+            if (!gpath.length) {
+                // Tier 1: one node per top segment. A segment that is a single whole
+                // container (its path IS the segment) is a leaf — one click to methods.
+                var segCount = {}, segWhole = {};
+                data0.mods.forEach(function (m) {
+                    var s = first(m.p);
+                    segCount[s] = (segCount[s] || 0) + 1;
+                    if (m.p === s)
+                        segWhole[s] = m.doc;
+                });
+                Object.keys(segCount).sort().forEach(function (s) {
+                    if (segCount[s] === 1 && segWhole[s])
+                        nodes[segWhole[s]] = { n: s, doc: segWhole[s] };
+                    else
+                        nodes["g:" + s] = { n: s, grp: [s] };
+                });
+                keyOf = function (p) { var s = first(p); return (segCount[s] === 1 && segWhole[s]) ? segWhole[s] : "g:" + s; };
+            }
+            else {
+                // Tier 2: every container under this segment, FLAT.
+                var mod = gpath.join("/"), pre = mod + "/";
+                data0.mods.forEach(function (m) {
+                    if (m.p !== mod && m.p.indexOf(pre) !== 0)
+                        return;
+                    var label = m.p === mod ? (mod.indexOf("/") < 0 ? mod : mod.slice(mod.lastIndexOf("/") + 1)) : m.p.slice(pre.length);
+                    nodes[m.doc] = { n: label, doc: m.doc };
+                });
+                keyOf = function (p) {
+                    if (p === mod || p.indexOf(pre) === 0)
+                        return docByP[p] || null;
+                    return "x:" + first(p);
+                };
+            }
+            var agg = {};
+            data0.medges.forEach(function (e) {
+                var a = keyOf(e[0]), b = keyOf(e[1]);
+                if (!a || !b || a === b)
+                    return;
+                if (a.indexOf("x:") === 0 && b.indexOf("x:") === 0)
+                    return;
+                [a, b].forEach(function (kk) { if (kk.indexOf("x:") === 0 && !nodes[kk])
+                    nodes[kk] = { n: "↗ " + kk.slice(2), ext: 1, leaf: 1 }; });
+                agg[a + ">" + b] = (agg[a + ">" + b] || 0) + (Number(e[2]) || 1);
+            });
+            var edges = [];
+            for (var ek in agg) {
+                var i2 = ek.indexOf(">");
+                edges.push([ek.slice(0, i2), ek.slice(i2 + 1), "call", String(agg[ek])]);
+            }
+            // roots: nodes holding app entries, plus in-degree-zero nodes
+            var roots = [];
+            (data0.entryDocs || []).forEach(function (d) {
+                var p = pByDoc[d];
+                if (!p)
+                    return;
+                var kk = keyOf(p);
+                if (kk && kk.indexOf("x:") !== 0 && roots.indexOf(kk) < 0)
+                    roots.push(kk);
+            });
+            var hasIn = {};
+            edges.forEach(function (e) { hasIn[e[1]] = 1; });
+            for (var nk in nodes)
+                if (!hasIn[nk] && !nodes[nk].ext && roots.indexOf(nk) < 0)
+                    roots.push(nk);
+            if (!roots.length)
+                for (var nk2 in nodes)
+                    roots.push(nk2);
+            return { start: data0.start, depth: 99, mode: "modules", gpath: reported, roots: roots, nodes: nodes, edges: edges };
+        }
+        function homeData() {
+            return data0.mode === "modules" && data0.mods ? deriveView([]) : data0;
+        }
+        setData(homeData());
+        // scale null = fit-to-width on first draw. Left-right is the default —
+        // call flow reads with the text; the toggle persists per reader.
+        var state = { roots: data.roots.slice(), trail: [], scale: null, dir: "LR", frame: null, cap: 400, showAcc: false };
+        // Direction survives module -> container navigation (each page is a fresh
+        // document); best-effort only — file:// or the DOM stub may lack storage.
+        try {
+            var sd = window.localStorage.getItem("geml-cg-dir");
+            if (sd === "TB" || sd === "LR")
+                state.dir = sd;
+        }
+        catch (e) { /* no storage */ }
+        function slice(roots) {
+            var keep = {}, layer = {}, q = [], qi = 0, order = [];
+            // Accessor noise (bean get/set/is leaves, .accessor) is hidden unless
+            // toggled on; the walk COUNTS what it hides so the toolbar can say so.
+            var hideAcc = data.mode !== "modules" && !state.showAcc;
+            var accSeen = {}, accHidden = 0;
+            roots.forEach(function (r) { if (data.nodes[r] && !(r in keep)) {
+                keep[r] = 1;
+                layer[r] = 0;
+                q.push([r, 0]);
+                order.push(r);
+            } });
+            while (qi < q.length) {
+                var cur = q[qi][0], d = q[qi][1];
+                qi++;
+                if (d >= data.depth)
+                    continue;
+                (out[cur] || []).forEach(function (e) {
+                    var t = e[1];
+                    if (!data.nodes[t] || (t in keep) || accSeen[t])
+                        return;
+                    if (hideAcc && data.nodes[t].acc) {
+                        accSeen[t] = 1;
+                        accHidden++;
+                        return;
+                    }
+                    keep[t] = 1;
+                    layer[t] = d + 1;
+                    q.push([t, d + 1]);
+                    order.push(t);
+                });
+            }
+            // The VIEW paces itself: draw the first `cap` in BFS order, tell the
+            // reader how much is beyond, let +400/all walk deeper. Data is complete.
+            var total = order.length, capped = 0;
+            if (data.mode !== "modules" && total > state.cap) {
+                for (var oi = state.cap; oi < total; oi++)
+                    delete keep[order[oi]];
+                capped = total - state.cap;
+            }
+            // Module overview: every module stays visible — the ones unreachable
+            // from the roots (vendored deps etc.) park on one extra bottom layer.
+            if (data.mode === "modules") {
+                var park = 0;
+                for (var kk in keep)
+                    if (layer[kk] > park)
+                        park = layer[kk];
+                for (var nk in data.nodes)
+                    if (!(nk in keep)) {
+                        keep[nk] = 1;
+                        layer[nk] = park + 1;
+                    }
+            }
+            var color = {}, back = {};
+            function dfs(u) {
+                color[u] = 1;
+                (out[u] || []).forEach(function (e) {
+                    var v = e[1];
+                    if (!keep[v])
+                        return;
+                    if (color[v] === 1)
+                        back[e[0] + ">" + e[1]] = 1;
+                    else if (!color[v])
+                        dfs(v);
+                });
+                color[u] = 2;
+            }
+            roots.forEach(function (r) { if (keep[r] && !color[r])
+                dfs(r); });
+            var changed = true, guard = 0;
+            while (changed && guard++ < 80) {
+                changed = false;
+                data.edges.forEach(function (e) {
+                    if (!keep[e[0]] || !keep[e[1]] || back[e[0] + ">" + e[1]])
+                        return;
+                    if (layer[e[0]] + 1 > layer[e[1]]) {
+                        layer[e[1]] = layer[e[0]] + 1;
+                        changed = true;
+                    }
+                });
+            }
+            return { keep: keep, layer: layer, back: back, accHidden: accHidden, total: total, capped: capped };
+        }
+        // Nested-browser view (static pages): the clicked document's pre-rendered
+        // sibling .html shown INSIDE the graph area — an in-mount iframe, never a
+        // whole-page navigation. "back" restores the graph exactly as it was.
+        function drawFrame() {
+            mount.replaceChildren();
+            var bar = document.createElement("div");
+            bar.className = "cg-bar";
+            var crumb = document.createElement("span");
+            crumb.className = "cg-crumb";
+            var backBtn = document.createElement("button");
+            backBtn.className = "cg-seg";
+            backBtn.textContent = "◂ back";
+            backBtn.onclick = function () { state.frame = null; draw(); };
+            crumb.appendChild(backBtn);
+            var sp = document.createElement("span");
+            sp.textContent = " / " + String(state.frame.rel).replace(/\.geml$/, "");
+            crumb.appendChild(sp);
+            bar.appendChild(crumb);
+            var open = document.createElement("a");
+            open.href = state.frame.html;
+            open.textContent = "open standalone ↗";
+            bar.appendChild(open);
+            mount.appendChild(bar);
+            var fr = document.createElement("iframe");
+            fr.className = "cg-frame";
+            fr.setAttribute("src", state.frame.html);
+            fr.setAttribute("title", state.frame.rel);
+            mount.appendChild(fr);
+        }
+        function draw() {
+            if (state.frame) {
+                drawFrame();
+                return;
+            }
+            var s = slice(state.roots);
+            // The callers view reads in TRUE call order — app entry first, the
+            // focused method at the far end. Its slice is built from the focus
+            // outward (edges callee -> caller), so flip the layers and swap edge
+            // endpoints at draw time: call direction stays left->right (top->down)
+            // in every view.
+            var isUp = data.dir === "up";
+            if (isUp) {
+                var maxL = 0, fk;
+                for (fk in s.layer)
+                    if (s.layer[fk] > maxL)
+                        maxL = s.layer[fk];
+                for (fk in s.layer)
+                    s.layer[fk] = maxL - s.layer[fk];
+            }
+            // Group tint: front-end and back-end (and any other top-level module)
+            // stopped being distinguishable once merged into one map — colour by
+            // top path segment (module overview) / owning document (method view).
+            var PALETTE = ["#e3f2fd", "#e8f5e9", "#fff3e0", "#f3e5f5", "#e0f7fa", "#fce4ec", "#f1f8e9", "#ede7f6", "#fff8e1", "#e0f2f1", "#efebe9", "#f9fbe7"];
+            function groupOf(k) {
+                return (data.mode === "modules"
+                    ? (data.nodes[k].tg || String(data.nodes[k].n).split("/")[0])
+                    : String(k).split("#")[0]) || "";
+            }
+            var gnames = [];
+            Object.keys(s.keep).forEach(function (k) { var gn = groupOf(k); if (gnames.indexOf(gn) < 0)
+                gnames.push(gn); });
+            gnames.sort();
+            var rows = [];
+            Object.keys(s.keep).forEach(function (k) {
+                (rows[s.layer[k]] = rows[s.layer[k]] || []).push(k);
+            });
+            rows = rows.filter(function (r) { return r && r.length; });
+            // In-layer order: group first (same-tint nodes sit together), name
+            // second — and the layout leaves a small extra gap where the group
+            // changes, so the colour runs read as blocks.
+            rows.forEach(function (r) {
+                r.sort(function (a, b) {
+                    var ga = groupOf(a), gb = groupOf(b);
+                    if (ga !== gb)
+                        return ga < gb ? -1 : 1;
+                    return data.nodes[a].n < data.nodes[b].n ? -1 : 1;
+                });
+            });
+            var NH = 26, GY = 44, GX = 14, GYL = 12, GXL = 70, GG = 22, pos = {}, W = 320, H = 0;
+            var LR = state.dir === "LR";
+            var isMethod = data.mode !== "modules";
+            // Box width follows the DISPLAYED label, and the label is truncated to
+            // fit the box — long dir-path module names used to overflow their 220px
+            // cap and stack onto their neighbours. Modules keep the TAIL (the
+            // informative end of a path), methods keep the head. The ⊕ direction
+            // handle is now its OWN node beside the box (drawn below), so the box
+            // width no longer reserves room for it.
+            function label(k) {
+                var n = data.nodes[k];
+                var full = n.n + (n.more ? " ›" : "");
+                if (full.length <= 32)
+                    return full;
+                return data.mode === "modules" ? "…" + full.slice(full.length - 31) : full.slice(0, 31) + "…";
+            }
+            // The ⊕ callers handle sits only on the current view's ROOTS: a
+            // mid-graph node's callers are already drawn as its in-edges — the
+            // entry is the one place the upstream is invisible. In the callers
+            // view the focused method (far end) carries the mirrored handle that
+            // flips back to its callee chain.
+            function hasUp(k) { return isMethod && !isUp && state.roots.indexOf(k) >= 0; }
+            function hasDown(k) { return isUp && k === data.focus; }
+            function bw(k) { return Math.max(56, label(k).length * 7.2 + 18); }
+            if (!LR) {
+                rows.forEach(function (r, ri) {
+                    var x = 0;
+                    r.forEach(function (k, i) {
+                        if (i > 0 && groupOf(r[i - 1]) !== groupOf(k))
+                            x += GG;
+                        var w = bw(k);
+                        pos[k] = { x: x, y: ri * (NH + GY), w: w };
+                        x += w + GX;
+                    });
+                    W = Math.max(W, x - GX);
+                });
+                rows.forEach(function (r) {
+                    var rw = pos[r[r.length - 1]].x + pos[r[r.length - 1]].w;
+                    var off = (W - rw) / 2;
+                    r.forEach(function (k) { pos[k].x += off; });
+                });
+                H = rows.length * (NH + GY) - GY;
+            }
+            else {
+                // Left-to-right: layers become columns, flow reads with the text.
+                var cx = 0, colHs = [];
+                rows.forEach(function (r, ci) {
+                    var cw = 0, y = 0;
+                    r.forEach(function (k, i) {
+                        if (i > 0 && groupOf(r[i - 1]) !== groupOf(k))
+                            y += GG;
+                        var w = bw(k);
+                        pos[k] = { x: cx, y: y, w: w };
+                        y += NH + GYL;
+                        if (w > cw)
+                            cw = w;
+                    });
+                    colHs[ci] = y - GYL;
+                    if (colHs[ci] > H)
+                        H = colHs[ci];
+                    cx += cw + GXL;
+                });
+                W = Math.max(320, cx - GXL);
+                rows.forEach(function (r, ci) {
+                    var off = (H - colHs[ci]) / 2;
+                    r.forEach(function (k) { pos[k].y += off; });
+                });
+            }
+            // The standalone ⊕ node sits just OUTSIDE the box on the direction it
+            // points — reserve a margin so it never clips the canvas edge or a
+            // neighbour. It rides the caller side of a callee-view entry (left in
+            // LR, top in TB) and the callee side of the callers-view focus (right /
+            // bottom). Only one side is ever active in a given view.
+            var UBOFF = 17, UBPAD = 24;
+            var anyUp = false, anyDown = false;
+            Object.keys(s.keep).forEach(function (k) { if (hasUp(k))
+                anyUp = true;
+            else if (hasDown(k))
+                anyDown = true; });
+            var padL = anyUp && LR ? UBPAD : 0, padT = anyUp && !LR ? UBPAD : 0;
+            var padR = anyDown && LR ? UBPAD : 0, padB = anyDown && !LR ? UBPAD : 0;
+            if (padL || padT)
+                for (var pk in pos) {
+                    pos[pk].x += padL;
+                    pos[pk].y += padT;
+                }
+            W += padL + padR;
+            H += padT + padB;
+            var svg = h("svg", { viewBox: "0 0 " + W + " " + (H + 8), class: "cg-svg", role: "img" });
+            // Small arrowheads, always pointing at the CALLEE — two fixed markers
+            // (normal grey, back-edge red) rather than context-stroke, which not
+            // every engine paints yet.
+            var arrId = "cg-arr-" + arrowSeq++;
+            var defs = h("defs", {});
+            [["", "#94a3b8"], ["-b", "#dc2626"]].forEach(function (mdef) {
+                var mk = h("marker", { id: arrId + mdef[0], viewBox: "0 0 10 10", refX: 8.5, refY: 5, markerWidth: 5.5, markerHeight: 5.5, orient: "auto" });
+                mk.appendChild(h("path", { d: "M0 1.2 L8.5 5 L0 8.8 z", fill: mdef[1] }));
+                defs.appendChild(mk);
+            });
+            svg.appendChild(defs);
+            // Hover: light up the CALLER CONE of the node under the pointer —
+            // every upstream node and edge in the current view — and dim the rest.
+            // upAdj maps each node to its callers within the drawn slice (in the
+            // callers view the data edges already point callee -> caller).
+            var upAdj = {};
+            var nodeEls = {}, nodeBase = {};
+            var edgeEls = {}, edgeBase = {};
+            data.edges.forEach(function (e) {
+                var a = pos[isUp ? e[1] : e[0]], b = pos[isUp ? e[0] : e[1]];
+                if (!a || !b)
+                    return;
+                var isBack = s.back[e[0] + ">" + e[1]] || (e[0] === e[1]);
+                var cls = "cg-e" + (e[2] === "candidate" ? " cand" : "") + (isBack ? " back" : "") + (e[3] === "medium" || e[3] === "low" ? " soft" : "");
+                var p;
+                if (e[0] === e[1]) {
+                    p = LR
+                        ? "M" + (a.x + 8) + " " + (a.y + NH) + " c 0 16 16 16 16 0"
+                        : "M" + (a.x + a.w) + " " + (a.y + 8) + " c 18 0 18 " + (NH - 16) + " 0 " + (NH - 16);
+                }
+                else if (isBack) {
+                    if (LR) {
+                        var yb = Math.max(a.y, b.y) + NH + 24;
+                        p = "M" + (a.x + a.w / 2) + " " + (a.y + NH) + " C " + (a.x + a.w / 2) + " " + yb + " " + (b.x + b.w / 2) + " " + yb + " " + (b.x + b.w / 2) + " " + (b.y + NH);
+                    }
+                    else {
+                        var xr = Math.max(a.x + a.w, b.x + b.w) + 22;
+                        p = "M" + (a.x + a.w) + " " + (a.y + NH / 2) + " C " + xr + " " + (a.y + NH / 2) + " " + xr + " " + (b.y + NH / 2) + " " + (b.x + b.w) + " " + (b.y + NH / 2);
+                    }
+                }
+                else if (LR) {
+                    var lx1 = a.x + a.w, ly1 = a.y + NH / 2, lx2 = b.x, ly2 = b.y + NH / 2;
+                    p = "M" + lx1 + " " + ly1 + " C " + (lx1 + GXL / 2) + " " + ly1 + " " + (lx2 - GXL / 2) + " " + ly2 + " " + lx2 + " " + ly2;
+                }
+                else {
+                    var x1 = a.x + a.w / 2, y1 = a.y + NH, x2 = b.x + b.w / 2, y2 = b.y;
+                    p = "M" + x1 + " " + y1 + " C " + x1 + " " + (y1 + GY / 2) + " " + x2 + " " + (y2 - GY / 2) + " " + x2 + " " + y2;
+                }
+                var pathEl = h("path", { d: p, class: cls, "marker-end": "url(#" + arrId + (isBack ? "-b" : "") + ")" });
+                var ek = e[0] + ">" + e[1];
+                edgeEls[ek] = pathEl;
+                edgeBase[ek] = cls;
+                var callee = isUp ? e[0] : e[1], caller = isUp ? e[1] : e[0];
+                (upAdj[callee] = upAdj[callee] || []).push({ n: caller, k: ek });
+                if (data.mode === "modules" && e[3]) {
+                    var et = h("title", {});
+                    et.textContent = e[3] + " call(s)";
+                    pathEl.appendChild(et);
+                }
+                svg.appendChild(pathEl);
+            });
+            Object.keys(s.keep).forEach(function (k) {
+                var n = data.nodes[k], a = pos[k];
+                var ncls = "cg-n" + (n.leaf ? " leaf" : "") + (n.test ? " test" : "") + (n.grp ? " grp" : "") + (state.roots.indexOf(k) >= 0 ? " root" : "");
+                var g = h("g", { class: ncls, "data-k": k, transform: "translate(" + a.x + "," + a.y + ")" });
+                nodeEls[k] = g;
+                nodeBase[k] = ncls;
+                g.appendChild(h("rect", { width: a.w, height: NH, rx: 6, style: "fill:" + PALETTE[gnames.indexOf(groupOf(k)) % PALETTE.length] }));
+                var t = h("text", { x: hasUp(k) ? a.w / 2 + 8 : hasDown(k) ? a.w / 2 - 8 : a.w / 2, y: NH / 2 + 4, "text-anchor": "middle" });
+                t.textContent = label(k);
+                g.appendChild(t);
+                var tip = h("title", {});
+                tip.textContent = data.mode === "modules"
+                    ? (n.grp ? (n.grp.join("/") + "\nclick: open this group")
+                        : n.ext ? ("external dependency: " + n.n.replace(/^↗ /, ""))
+                            : n.n + "\nclick: open this module")
+                    : k + (n.src ? "\n" + n.src : "") + "\nclick = view source";
+                g.appendChild(tip);
+                svg.appendChild(g);
+                if (hasUp(k) || hasDown(k)) {
+                    // The ⊕ handle (GEP-0003 caller direction) is now its OWN node
+                    // beside the box — no longer a child glued inside the box edge.
+                    // Same data-k / data-act / click: it focuses this node and TOGGLES
+                    // direction. It sits on the LEFT of a callee-view entry (expand
+                    // callers) and mirrors to the RIGHT of the callers-view focus (flip
+                    // back down); in top-down those become above / below. The reserved
+                    // margin above keeps it clear of the canvas edge and neighbours.
+                    var up = hasUp(k), ubx, uby;
+                    if (up) {
+                        if (LR) {
+                            ubx = a.x - UBOFF;
+                            uby = a.y + NH / 2;
+                        }
+                        else {
+                            ubx = a.x + a.w / 2;
+                            uby = a.y - UBOFF;
+                        }
+                    }
+                    else {
+                        if (LR) {
+                            ubx = a.x + a.w + UBOFF;
+                            uby = a.y + NH / 2;
+                        }
+                        else {
+                            ubx = a.x + a.w / 2;
+                            uby = a.y + NH + UBOFF;
+                        }
+                    }
+                    // Dashed connector ties the handle to its node and shows which way
+                    // the hidden chain flows: callers flow INTO the node (⊕ -> box),
+                    // callees flow OUT of it (box -> ⊕). Same grey + arrowhead as real
+                    // edges; dashed = "not expanded yet"; never a click target.
+                    var R = 6.5, TIP = 1.5, lx1, ly1, lx2, ly2;
+                    if (up) {
+                        if (LR) {
+                            lx1 = ubx + R;
+                            ly1 = uby;
+                            lx2 = a.x - TIP;
+                            ly2 = uby;
+                        }
+                        else {
+                            lx1 = ubx;
+                            ly1 = uby + R;
+                            lx2 = ubx;
+                            ly2 = a.y - TIP;
+                        }
+                    }
+                    else if (LR) {
+                        lx1 = a.x + a.w + TIP;
+                        ly1 = uby;
+                        lx2 = ubx - R - TIP;
+                        ly2 = uby;
+                    }
+                    else {
+                        lx1 = ubx;
+                        ly1 = a.y + NH + TIP;
+                        lx2 = ubx;
+                        ly2 = uby - R - TIP;
+                    }
+                    svg.appendChild(h("path", { class: "cg-uplink", d: "M" + lx1 + " " + ly1 + " L" + lx2 + " " + ly2, "marker-end": "url(#" + arrId + ")" }));
+                    var ub = h("g", { class: "cg-upbtn", "data-k": k, "data-act": up ? "up" : "down", transform: "translate(" + ubx + "," + uby + ")" });
+                    ub.appendChild(h("circle", { r: 6.5 }));
+                    var ut = h("text", { x: 0, y: 3.5, "text-anchor": "middle" });
+                    ut.textContent = "+";
+                    ub.appendChild(ut);
+                    var utip = h("title", {});
+                    utip.textContent = up ? "⊕ expand the full caller chain" : "⊕ back to its callee chain";
+                    ub.appendChild(utip);
+                    svg.appendChild(ub);
+                }
+            });
+            // Natural pixel size; only the inner .cg-scroll pane scrolls, so the
+            // toolbar (crumb/zoom/back) and the footer stay visible however big the
+            // canvas gets. Squeezing a 16,000px canvas into the column made 1px
+            // text — never again.
+            svg.setAttribute("width", String(W));
+            svg.setAttribute("height", String(H + 8));
+            // Rendered pages sit next to their codemap documents: a live mount
+            // (viewer/playground) carries data-src, a CLI embed carries the src
+            // path in data.start — either directory anchors doc-relative links.
+            var navBase = String(mount.getAttribute("data-src") || data.start || "").replace(/[^\/]*$/, "");
+            // A live mount (viewer/playground/served page) navigates IN PLACE over
+            // the geml documents through this loader; only truly static pages fall
+            // back to their pre-rendered sibling .html pages. Read LAZILY on every
+            // use: a served page attaches the hook from an async module script that
+            // loads after the first draw, and late binding must still take effect
+            // on the very next interaction — no redraw, no lost state.
+            var live = function () { return mount._cgView; };
+            mount.replaceChildren();
+            var bar = document.createElement("div");
+            bar.className = "cg-bar";
+            // Breadcrumb: modules / <container> / <state> — the hierarchy is
+            // entry -> module -> method view, and both upper levels are clickable.
+            var crumb = document.createElement("span");
+            crumb.className = "cg-crumb";
+            function seg(txt, fn) {
+                var el = document.createElement(fn ? "button" : "span");
+                if (fn) {
+                    el.className = "cg-seg";
+                    el.onclick = fn;
+                }
+                el.textContent = txt;
+                crumb.appendChild(el);
+            }
+            function sepEl() { var sp = document.createElement("span"); sp.textContent = " / "; crumb.appendChild(sp); }
+            // A transient in-bar error — the "don't jump, say why" half of the
+            // contract: an unloadable target reports here and the view stays put.
+            function flash(msg) {
+                var f = document.createElement("span");
+                f.className = "cg-flash";
+                f.textContent = msg;
+                bar.appendChild(f);
+                try {
+                    setTimeout(function () { if (f.parentNode)
+                        f.parentNode.removeChild(f); }, 5000);
+                }
+                catch (e) { /* stub */ }
+            }
+            function openDoc(rel) {
+                var lv = live();
+                if (lv) {
+                    Promise.resolve(lv({ doc: rel })).then(function (nd) {
+                        if (!nd) {
+                            flash("cannot load " + rel);
+                            return;
+                        }
+                        // A module index ships RAW rows — its nodes come from deriveView,
+                        // which is bound to a document's own data0. Re-boot on the loaded
+                        // payload so its grouping tree derives; pushView alone would draw
+                        // the empty raw payload (nodes come out {}).
+                        if (nd.mode === "modules" && nd.mods)
+                            boot(mount, nd);
+                        else
+                            pushView(nd);
+                    }, function () { flash("cannot load " + rel); });
+                    return;
+                }
+                var html = rel.replace(/\.geml$/, ".html");
+                // Inside the nested frame the frame IS the browser — navigate it
+                // plainly instead of stacking frame-in-frame.
+                var framed = false;
+                try {
+                    framed = window.self !== window.top;
+                }
+                catch (e) { /* no window: top */ }
+                if (framed) {
+                    window.location.href = html;
+                    return;
+                }
+                function embed() { state.frame = { rel: rel, html: html }; draw(); }
+                // Served over http(s): probe first, so a missing page reports in
+                // place and nothing navigates. file:// cannot probe (fetch is
+                // blocked) — embed directly; the frame contains any error itself.
+                try {
+                    if (/^https?:$/.test(window.location.protocol)) {
+                        fetch(html, { method: "HEAD" }).then(function (r) {
+                            if (r.ok)
+                                embed();
+                            else
+                                flash("page missing: " + html + " — re-run the codemap render");
+                        }).catch(function () { flash("cannot reach " + html); });
+                        return;
+                    }
+                }
+                catch (e) { /* no fetch/location — treat like file:// */ }
+                embed();
+            }
+            if (data.mode === "modules") {
+                // Breadcrumb over the grouping tree. Tunnelled runs (levels with a
+                // single child — Java package ceremony) merge into ONE hop, labelled
+                // first/…/last, so the crumb shows only the steps a reader chose.
+                var gp = data.gpath || [];
+                seg("modules", gp.length ? function () { pushView(deriveView([])); } : null);
+                var hops = [];
+                var cur = [];
+                for (var hi = 0; hi < gp.length; hi++) {
+                    var hpre = hi === 0 ? "" : gp.slice(0, hi).join("/") + "/";
+                    var seen = {}, branches = 0;
+                    data0.mods.forEach(function (m) {
+                        if (hpre && m.p.indexOf(hpre) !== 0)
+                            return;
+                        var rest = m.p.slice(hpre.length);
+                        var c = rest.indexOf("/");
+                        var s2 = c < 0 ? rest : rest.slice(0, c);
+                        if (!seen[s2]) {
+                            seen[s2] = 1;
+                            branches++;
+                        }
+                    });
+                    if (branches > 1 || hi === 0) {
+                        if (cur.length)
+                            hops.push(cur);
+                        cur = [hi];
+                    }
+                    else
+                        cur.push(hi);
+                }
+                if (cur.length)
+                    hops.push(cur);
+                hops.forEach(function (hop, oi) {
+                    sepEl();
+                    var lbl = hop.length === 1 ? gp[hop[0]]
+                        : hop.length === 2 ? gp[hop[0]] + "/" + gp[hop[hop.length - 1]]
+                            : gp[hop[0]] + "/…/" + gp[hop[hop.length - 1]];
+                    var endIdx = hop[hop.length - 1];
+                    seg(lbl, oi < hops.length - 1 ? function () { pushView(deriveView(gp.slice(0, endIdx + 1))); } : null);
+                });
+            }
+            else {
+                seg("modules", function () { openDoc(navBase + "index.geml"); });
+                sepEl();
+                var modName = String(data.module || String(data.start || "").replace(/^.*\//, "").replace(/\.geml$/, "") || "container");
+                seg(modName, function () {
+                    if (live())
+                        openDoc(String(data.start));
+                    else {
+                        state.trail = [];
+                        setData(homeData());
+                        state.roots = data.roots.slice();
+                        draw();
+                    }
+                });
+                sepEl();
+                seg(data.dir === "up"
+                    ? "callers of " + (data.nodes[data.focus] ? data.nodes[data.focus].n : "") + (data.partial ? " (in-slice)" : "") + (Object.keys(data.nodes).length <= 1 ? " — none recorded" : "")
+                    : state.trail.length ? "root: " + state.roots.map(function (k) { return data.nodes[k].n; }).join(", ")
+                        : "roots: entry", null);
+            }
+            bar.appendChild(crumb);
+            var scroller = document.createElement("div");
+            scroller.className = "cg-scroll";
+            scroller.appendChild(svg);
+            // The graph and the source panel sit side by side in a flex stage; the
+            // panel is empty (hidden) until a method node is clicked, so the graph
+            // uses the full width until then.
+            var srcPanel = document.createElement("div");
+            srcPanel.className = "cg-src";
+            srcPanel.style.display = "none";
+            var stage = document.createElement("div");
+            stage.className = "cg-stage";
+            stage.appendChild(scroller);
+            stage.appendChild(srcPanel);
+            // The scroll pane is capped at 72vh by CSS; before first layout its
+            // clientHeight is the unconstrained content height, so derive the cap
+            // from the viewport. Guards keep a collapsed pane (mid-layout measure)
+            // from producing a negative or zero scale — invalid CSS would silently
+            // keep the previous size.
+            function paneSize() {
+                var mw = scroller.clientWidth || mount.clientWidth || 0;
+                var mh = 0;
+                try {
+                    mh = Math.floor(window.innerHeight * 0.72);
+                }
+                catch (e) { /* no window (stub) */ }
+                return { w: mw, h: mh };
+            }
+            // The fit BUTTON: whole-graph preview, both axes visible, no floor.
+            function fitScale() {
+                var p = paneSize(), s = 1;
+                if (p.w > 60 && W)
+                    s = Math.min(s, (p.w - 26) / W);
+                if (p.h > 60 && H)
+                    s = Math.min(s, (p.h - 10) / (H + 8));
+                return Math.max(s, 0.05);
+            }
+            // The INITIAL view fits the CROSS axis only — height in left-right,
+            // width in top-down; the reading axis is meant to scroll — clamped to
+            // [2/3, 1] so text never drops below ~8px. Small and medium graphs
+            // land on exactly 1:1; the overview stays one "fit" click away.
+            function initialScale() {
+                var p = paneSize(), s = 1;
+                if (LR) {
+                    if (p.h > 60 && H)
+                        s = (p.h - 10) / (H + 8);
+                }
+                else if (p.w > 60 && W)
+                    s = (p.w - 26) / W;
+                return Math.min(1, Math.max(2 / 3, s));
+            }
+            function applyScale() {
+                svg.style.width = Math.round(W * state.scale) + "px";
+                svg.style.height = Math.round((H + 8) * state.scale) + "px";
+                svg.style.maxWidth = "none";
+            }
+            function zoomBtn(label, fn) {
+                var b = document.createElement("button");
+                b.textContent = label;
+                b.onclick = function () { fn(); applyScale(); };
+                bar.appendChild(b);
+            }
+            zoomBtn("−", function () { state.scale = Math.max(0.1, state.scale * 0.75); });
+            zoomBtn("+", function () { state.scale = Math.min(4, state.scale / 0.75); });
+            zoomBtn("fit", function () { state.scale = fitScale(); });
+            zoomBtn("1:1", function () { state.scale = 1; });
+            var dirBtn = document.createElement("button");
+            dirBtn.textContent = LR ? "top-down" : "left-right";
+            dirBtn.onclick = function () {
+                state.dir = LR ? "TB" : "LR";
+                try {
+                    window.localStorage.setItem("geml-cg-dir", state.dir);
+                }
+                catch (e) { /* no storage */ }
+                draw();
+            };
+            bar.appendChild(dirBtn);
+            // Accessor noise: hidden by default, one honest button to bring it back.
+            if (s.accHidden > 0 || state.showAcc) {
+                var accBtn = document.createElement("button");
+                accBtn.textContent = state.showAcc ? "hide accessors" : s.accHidden + " accessors hidden";
+                accBtn.onclick = function () { state.showAcc = !state.showAcc; draw(); };
+                bar.appendChild(accBtn);
+            }
+            // View pacing: the slice beyond the cap is one click away, never lost.
+            if (s.capped > 0) {
+                var capInfo = document.createElement("span");
+                capInfo.className = "cg-note";
+                capInfo.textContent = "showing " + (s.total - s.capped) + " of " + s.total + " reachable";
+                bar.appendChild(capInfo);
+                var moreBtn = document.createElement("button");
+                moreBtn.textContent = "+400";
+                moreBtn.onclick = function () { state.cap += 400; draw(); };
+                bar.appendChild(moreBtn);
+                var allBtn = document.createElement("button");
+                allBtn.textContent = "all";
+                allBtn.onclick = function () { state.cap = 1e9; draw(); };
+                bar.appendChild(allBtn);
+            }
+            if (state.trail.length) {
+                var backBtn = document.createElement("button");
+                backBtn.textContent = "back";
+                backBtn.onclick = function () { var tr = state.trail.pop(); setData(tr.data); state.roots = tr.roots; draw(); };
+                bar.appendChild(backBtn);
+                var resetBtn = document.createElement("button");
+                resetBtn.textContent = "reset";
+                resetBtn.onclick = function () { state.trail = []; setData(homeData()); state.roots = data.roots.slice(); draw(); };
+                bar.appendChild(resetBtn);
+            }
+            mount.appendChild(bar);
+            mount.appendChild(stage);
+            if (state.scale === null)
+                state.scale = initialScale();
+            applyScale();
+            if (isUp) {
+                // The focused method sits at the FAR end of the callers chain —
+                // scroll it into view instead of opening on the app-entry end.
+                if (LR)
+                    scroller.scrollLeft = 1e6;
+                else
+                    scroller.scrollTop = 1e6;
+            }
+            // Footer: live facts, not a static cheat-sheet (navigation lives in
+            // the breadcrumb above).
+            var footer = document.createElement("div");
+            footer.className = "cg-legend";
+            var info = document.createElement("span");
+            info.textContent = data.mode === "modules"
+                ? Object.keys(s.keep).length + " modules · " + data.edges.length + " edges · click a module to open it"
+                : isUp && Object.keys(data.nodes).length <= 1
+                    ? "no recorded callers — framework/reflective entry points and dead code have none · ⊕ at the end = back to callees"
+                    : Object.keys(s.keep).length + "/" + Object.keys(data.nodes).length + " methods in view · click = view source · " + (isUp ? "⊕ at the end = back to callees" : "⊕ on an entry = full caller chain");
+            footer.appendChild(info);
+            mount.appendChild(footer);
+            // Colour key — one chip per group (skip when it would be noise).
+            if (gnames.length > 1 && gnames.length <= 14) {
+                var chips = document.createElement("div");
+                chips.className = "cg-groups";
+                gnames.forEach(function (gn) {
+                    var chip = document.createElement("span");
+                    chip.className = "cg-chip";
+                    var sw = document.createElement("i");
+                    sw.style.background = PALETTE[gnames.indexOf(gn) % PALETTE.length] || "";
+                    chip.appendChild(sw);
+                    var lbl = document.createElement("span");
+                    lbl.textContent = gn || "(root)";
+                    chip.appendChild(lbl);
+                    chips.appendChild(chip);
+                });
+                mount.appendChild(chips);
+            }
+            function pushView(nd) {
+                state.trail.push({ data: data, roots: state.roots });
+                setData(nd);
+                state.roots = nd.roots.slice();
+                draw();
+            }
+            // Caller direction (GEP-0003): a live mount rebuilds through its
+            // document loader (mount._cgView, attached by the upgrade step); a
+            // static CLI page reverses its in-slice edges — partial but honest,
+            // and labelled as such in the crumb.
+            function showCallers(k) {
+                var lv = live();
+                if (lv) {
+                    Promise.resolve(lv({ dir: "up", node: k })).then(function (nd) {
+                        // In-degree-zero entry (agent/AOP hook, app top): it has no callers,
+                        // so "up" means the module page — not an empty caller view.
+                        if (nd && Object.keys(nd.nodes).length > 1)
+                            pushView(nd);
+                        else
+                            openDoc(navBase + "index.geml");
+                    });
+                    return;
+                }
+                var rin = {};
+                data0.edges.forEach(function (e) { (rin[e[1]] = rin[e[1]] || []).push(e[0]); });
+                var keep = {};
+                keep[k] = 1;
+                var q = [k], qi = 0;
+                while (qi < q.length) {
+                    var c = q[qi++];
+                    (rin[c] || []).forEach(function (p) { if (!keep[p]) {
+                        keep[p] = 1;
+                        q.push(p);
+                    } });
+                }
+                if (Object.keys(keep).length <= 1) {
+                    openDoc(navBase + "index.geml");
+                    return;
+                } // no callers -> module page
+                var nodes = {}, edges = [];
+                for (var nk in keep)
+                    nodes[nk] = data0.nodes[nk];
+                data0.edges.forEach(function (e) { if (keep[e[0]] && keep[e[1]])
+                    edges.push([e[1], e[0], e[2], e[3]]); });
+                pushView({ start: data0.start, depth: 99, roots: [k], nodes: nodes, edges: edges, dir: "up", focus: k, partial: 1 });
+            }
+            function showCallees(k) {
+                var lv = live();
+                if (lv) {
+                    Promise.resolve(lv({ dir: "down", node: k })).then(function (nd) { if (nd)
+                        pushView(nd); });
+                    return;
+                }
+                pushView({ start: data0.start, depth: data0.depth, roots: [k], nodes: data0.nodes, edges: data0.edges });
+            }
+            // A method node's `src` is a route (like a table's `src` / a chart's
+            // `data`): "<path>#L<start>-<end>". Resolve it relative to navBase
+            // (overridable via the mount's data-src-base), fetch the file, slice the
+            // line range, and show it in the side panel — the graph stays live, so
+            // clicking another node updates the panel. Unreachable (offline, a
+            // static embed, or a server scoped away from the sources) DEGRADES to
+            // the path, never throws.
+            function showSource(k) {
+                var n = data.nodes[k] || {};
+                var ref = n.src ? String(n.src) : "";
+                srcPanel.replaceChildren();
+                srcPanel.style.display = "";
+                var hd = document.createElement("div");
+                hd.className = "cg-src-hd";
+                var ttl = document.createElement("span");
+                ttl.textContent = ref || (n.n || k);
+                hd.appendChild(ttl);
+                var cls = document.createElement("button");
+                cls.textContent = "✕";
+                cls.onclick = function () { srcPanel.style.display = "none"; srcPanel.replaceChildren(); };
+                hd.appendChild(cls);
+                srcPanel.appendChild(hd);
+                var body = document.createElement("pre");
+                body.className = "cg-src-body";
+                srcPanel.appendChild(body);
+                if (!ref) {
+                    body.textContent = "no source location recorded for this node";
+                    return;
+                }
+                var hp = ref.indexOf("#");
+                var path = hp < 0 ? ref : ref.slice(0, hp);
+                var rng = /L(\d+)(?:-L?(\d+))?/.exec(hp < 0 ? "" : ref.slice(hp + 1));
+                var a0 = rng ? parseInt(rng[1], 10) : 0;
+                var b0 = rng && rng[2] ? parseInt(rng[2], 10) : a0;
+                body.textContent = "loading " + path + " …";
+                var base = mount.getAttribute("data-src-base");
+                if (base === null || base === undefined)
+                    base = navBase;
+                var degrade = function () {
+                    body.textContent = "";
+                    var note = document.createElement("div");
+                    note.className = "cg-src-note";
+                    note.textContent = ref + "\nsource not reachable here";
+                    body.appendChild(note);
+                };
+                var render = function (text) {
+                    var lines = String(text).split(/\r?\n/);
+                    var out = (a0 >= 1 && a0 <= lines.length) ? lines.slice(a0 - 1, b0 >= a0 ? b0 : a0) : lines;
+                    body.textContent = out.join("\n");
+                };
+                var fetchFn = (typeof fetch === "function") ? fetch : null;
+                if (!fetchFn) {
+                    degrade();
+                    return;
+                }
+                try {
+                    Promise.resolve(fetchFn(base + path)).then(function (r) {
+                        if (!r || r.ok === false) {
+                            degrade();
+                            return null;
+                        }
+                        return Promise.resolve(r.text ? r.text() : r).then(render);
+                    }).catch(degrade);
+                }
+                catch (e) {
+                    degrade();
+                }
+            }
+            svg.addEventListener("click", function (ev) {
+                var tgt = ev.target;
+                var ub = tgt && tgt.closest ? tgt.closest(".cg-upbtn") : null;
+                if (ub) {
+                    if (ub.getAttribute("data-act") === "down") {
+                        // The mirrored handle flips back to the callee chain — the up
+                        // view was pushed from there, so this is exactly one step back.
+                        if (state.trail.length) {
+                            var tr0 = state.trail.pop();
+                            setData(tr0.data);
+                            state.roots = tr0.roots;
+                            draw();
+                        }
+                        else
+                            showCallees(ub.getAttribute("data-k"));
+                    }
+                    else
+                        showCallers(ub.getAttribute("data-k"));
+                    return;
+                }
+                var g = tgt && tgt.closest ? tgt.closest(".cg-n") : null;
+                if (!g)
+                    return;
+                var k = g.getAttribute("data-k");
+                if (data.mode === "modules") {
+                    var nd = data.nodes[k];
+                    if (nd && nd.grp) {
+                        pushView(deriveView(nd.grp));
+                        return;
+                    }
+                    if (nd && nd.ext)
+                        return; // external stub: informational
+                    if (nd && nd.doc)
+                        openDoc(navBase + String(nd.doc));
+                    return;
+                }
+                // Method mode: the node body now VIEWS the method's source. All chain
+                // navigation (callers / flip back) lives on the standalone ⊕ node.
+                showSource(k);
+            });
+            // Hover highlight: BFS the caller cone over upAdj, mark nodes/edges
+            // with .hl and flag the svg so everything else dims. Class strings are
+            // rebuilt from the recorded bases — no classList dependency.
+            function clearHl() {
+                svg.setAttribute("class", "cg-svg");
+                for (var nk in nodeEls)
+                    nodeEls[nk].setAttribute("class", nodeBase[nk]);
+                for (var ekk in edgeEls)
+                    edgeEls[ekk].setAttribute("class", edgeBase[ekk]);
+            }
+            svg.addEventListener("mouseover", function (ev) {
+                var tgt = ev.target;
+                var g = tgt && tgt.closest ? tgt.closest(".cg-n") : null;
+                if (!g)
+                    return;
+                var k = g.getAttribute("data-k");
+                var seen = {};
+                seen[k] = 1;
+                var hlE = {};
+                var q = [k], qi = 0;
+                while (qi < q.length) {
+                    var cur = q[qi++];
+                    (upAdj[cur] || []).forEach(function (p) {
+                        hlE[p.k] = 1;
+                        if (!seen[p.n]) {
+                            seen[p.n] = 1;
+                            q.push(p.n);
+                        }
+                    });
+                }
+                svg.setAttribute("class", "cg-svg hl");
+                for (var nk in nodeEls)
+                    nodeEls[nk].setAttribute("class", nodeBase[nk] + (seen[nk] ? " hl" : ""));
+                for (var ekk in edgeEls)
+                    edgeEls[ekk].setAttribute("class", edgeBase[ekk] + (hlE[ekk] ? " hl" : ""));
+            });
+            svg.addEventListener("mouseout", function (ev) {
+                var tgt = ev.target;
+                if (tgt && tgt.closest && !tgt.closest(".cg-n"))
+                    return;
+                clearHl();
+            });
+        }
+        draw();
+    }
+    Array.prototype.forEach.call(root.querySelectorAll(".cg-mount"), function (mount) {
+        var payload = mount.getAttribute("data-graph");
+        if (payload) {
+            boot(mount, JSON.parse(payload));
+            return;
+        }
+        var side = mount.getAttribute("data-graph-src");
+        if (!side)
+            return; // not (yet) upgraded, or its build failed
+        // Sidecar payload (served pages): the page shipped without the multi-MB
+        // inline attribute — fetch it after first paint, then boot normally.
+        fetch(side).then(function (r) { return r.json(); }).then(function (j) {
+            if (!j || j.error !== undefined) {
+                mount.textContent = "geml-code-graph: " + ((j && j.error) || "cannot load graph data");
+                return;
+            }
+            if (j.truncated && mount.parentNode) {
+                var note = document.createElement("p");
+                note.className = "cg-note";
+                note.textContent = "slice truncated — narrow the entry set or lower graph-depth";
+                mount.parentNode.insertBefore(note, mount.nextSibling);
+            }
+            boot(mount, j.data);
+        }).catch(function () { mount.textContent = "geml-code-graph: cannot load graph data"; });
+    });
+}
+// CLI inlining: the compiled runtime function, verbatim, run against document.
+const CODE_GRAPH_JS = `(${codeGraphRuntime.toString()})(document);`;
+// Browser-side wave builder: the slice builder is synchronous with a
+// synchronous loader, but a browser fetches documents asynchronously — so
+// run the build in WAVES: every pass records the documents it needed but did
+// not have, those are fetched, and the build re-runs (builds are
+// milliseconds; the wave count is bounded by graph-depth). ONE
+// implementation, two consumers: the viewer's upgrade step and the live
+// module script injected into served pages.
+export function codeGraphWaves(fetchDoc, parseFn) {
+    const cache = new Map();
+    const failed = new Set();
+    return {
+        seed: (name, text) => { cache.set(name, text); },
+        build: async (src, view) => {
+            let result;
+            for (;;) {
+                const pending = [];
+                result = buildCodeGraph(src, {
+                    loadDoc: (p) => {
+                        if (cache.has(p))
+                            return cache.get(p);
+                        if (!failed.has(p))
+                            pending.push(p);
+                        return null;
+                    },
+                    parseDoc: parseFn,
+                }, view);
+                if (!pending.length)
+                    break;
+                await Promise.all(pending.map(async (p) => {
+                    try {
+                        const text = await fetchDoc(p);
+                        cache.set(p, text);
+                        if (text === null)
+                            failed.add(p);
+                    }
+                    catch {
+                        cache.set(p, null);
+                        failed.add(p);
+                    }
+                }));
+            }
+            return result;
+        },
+    };
+}
 function page(title, body, ctx, source) {
     const mathHead = ctx.usedMath
         ? `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">\n` +
@@ -479,6 +2106,40 @@ function page(title, body, ctx, source) {
     const footer = source
         ? `<footer class="geml-footer">Rendered from <code>${esc(source)}</code> by the GEML runtime. Tables are sortable and filterable; the chart is inline SVG drawn from its bound table.</footer>`
         : "";
+    // Live enhancement for served pages: attach _cgView loaders after the
+    // static bootstrap has drawn. The runtime reads the hook lazily, so late
+    // binding works with no redraw; if this module never loads (offline copy,
+    // old browser), the page simply stays static. The parser dist imports
+    // node:* for its CLI paths — an import map points those at the served stub
+    // (same trick as the viewer's esbuild alias), and the process shim must be
+    // in place BEFORE the modules evaluate, hence the dynamic import().
+    const wantLive = ctx.usedCodeGraph && !!ctx.opts.liveGraph;
+    const lg = wantLive ? escAttr(ctx.opts.liveGraph) : "";
+    const importMap = wantLive
+        ? `<script type="importmap">{"imports":{"node:fs":"${lg}_node-stub.js","node:path":"${lg}_node-stub.js","node:crypto":"${lg}_node-stub.js","node:url":"${lg}_node-stub.js","node:child_process":"${lg}_node-stub.js"}}</script>\n`
+        : "";
+    const liveJs = wantLive
+        ? `<script type="module">
+globalThis.process ??= { argv: [], env: {} };
+const { parse } = await import("${lg}geml.js");
+const { codeGraphWaves } = await import("${lg}render.js");
+const w = codeGraphWaves(async (rel) => {
+  try { const r = await fetch(rel, { cache: "no-cache" }); return r.ok ? await r.text() : null; } catch { return null; }
+}, parse);
+for (const m of document.querySelectorAll(".cg-mount[data-start]")) {
+  const start = m.getAttribute("data-start");
+  m._cgView = async (view) => {
+    // A directed view builds from the node's OWN document (its meta names the
+    // module and graph-depth); {doc} opens that document; else the mount's.
+    const src = view && view.doc ? view.doc
+      : view && view.node ? view.node.slice(0, view.node.lastIndexOf("#"))
+      : start;
+    const r = await w.build(src, view && view.doc ? undefined : view);
+    return r.error !== undefined ? null : r.data;
+  };
+}
+</script>\n`
+        : "";
     return `<!doctype html>
 <html lang="en">
 <head>
@@ -486,23 +2147,36 @@ function page(title, body, ctx, source) {
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>${esc(title)}</title>
 <style>${CSS}</style>
-${mathHead}${mermaidHead}</head>
+${importMap}${mathHead}${mermaidHead}</head>
 <body>
 <main>
 ${body}
 </main>
 ${footer}
 <script>${JS}</script>
-</body>
+${ctx.usedCodeGraph ? `<script>${CODE_GRAPH_JS}</script>\n` : ""}${liveJs}</body>
 </html>
 `;
 }
 // ---------------------------------------------------------------------------
 // Public entry
 // ---------------------------------------------------------------------------
+export { buildCodeGraph };
 export function renderHtml(doc, opts = {}) {
-    const ctx = new RenderCtx(doc);
-    const body = doc.children.map((b) => ctx.block(b)).filter((s) => s !== "").join("\n");
+    const ctx = new RenderCtx(doc, opts);
+    let body = doc.children.map((b) => ctx.block(b)).filter((s) => s !== "").join("\n");
+    // Codemap scenario ① (GEP-0003): a codemap document (meta declares module=
+    // or container=, plus an entry surface) IS the graph data — offer the layered
+    // method-flow view at the top, an implicit self-embed.
+    const meta = doc.children.find((b) => b.kind === "block" && b.type === "meta" && b.data);
+    const md = meta?.data ?? {};
+    if ((md["module"] !== undefined || md["container"] !== undefined)
+        && opts.loadDoc && opts.parseDoc && opts.source) {
+        const cap = md["entry"] !== undefined || md["container"] !== undefined
+            ? `layered method flow — roots from this document's <code>entry</code>`
+            : `layered method flow — roots: in-degree-zero methods (no <code>entry</code> declared)`;
+        body = ctx.codeGraphFigure(opts.source, "", `<figcaption>${cap}</figcaption>`) + "\n" + body;
+    }
     const title = opts.title ?? ctx.docTitle() ?? "GEML document";
     return page(title, body, ctx, opts.source);
 }