@geml/geml 1.3.2 → 1.4.2

package/dist/render.d.ts

@@ -52,7 +52,7 @@ interface CGData {
     depth: number;
     roots: string[];
     nodes: Record<string, CGNode>;
-    edges: [string, string, string, string][];
+    edges: [string, string, string, string, string?][];
     mode?: "modules";
     module?: string;
     dir?: "up";
@@ -75,7 +75,7 @@ declare function buildCodeGraph(startRel: string, opts: RenderOptions, view?: {
     error?: string;
     truncated?: boolean;
 };
-export declare const CSS = "\n:root { --fg:#1f2328; --muted:#656d76; --bd:#d0d7de; --bg:#fff; --accent:#2563eb; --code-bg:#f6f8fa; }\n* { box-sizing: border-box; }\nbody { margin:0; color:var(--fg); background:#fafbfc; font:16px/1.6 -apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,\"PingFang SC\",\"Microsoft Yahei\",sans-serif; }\nmain { max-width: 860px; margin: 0 auto; padding: 48px 24px 96px; background:var(--bg); }\nh1,h2,h3,h4,h5,h6 { line-height:1.25; margin:1.6em 0 .6em; scroll-margin-top:16px; }\nh1 { font-size:2em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }\nh2 { font-size:1.5em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }\nh3 { font-size:1.25em; } h4 { font-size:1em; }\np { margin:.7em 0; }\na { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }\ncode { background:var(--code-bg); padding:.15em .35em; border-radius:6px; font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }\npre { background:var(--code-bg); padding:14px 16px; border-radius:8px; overflow:auto; }\npre code { background:none; padding:0; font-size:.85em; }\npre.output { background:#0d1117; color:#e6edf3; }\npre.output code { color:inherit; }\nul,ol { padding-left:1.6em; } li { margin:.2em 0; }\nul.task-list { list-style:none; padding-left:.2em; }\nli.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; }\nli.task input[type=checkbox]:checked { background-color:#1f883d; border-color:#1f883d; }\nli.task input[type=checkbox]:checked::after { content:\"\u2713\"; 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; }\naside.callout { border-left:4px solid var(--accent); background:#f0f6ff; padding:.4em 16px; border-radius:0 8px 8px 0; margin:1em 0; }\naside.aside { border-left-color:#8b949e; background:#f6f8fa; }\naside.warning { border-left-color:#d97706; background:#fff8f0; }\naside.callout > :first-child { margin-top:0; } aside.callout > :last-child { margin-bottom:0; }\nfigure { margin:1.2em 0; }\nfigcaption { color:var(--muted); font-size:.86em; text-align:center; margin-top:.5em; }\ntable.geml-table { border-collapse:collapse; width:100%; font-size:.92em; }\ntable.geml-table th, table.geml-table td { border:1px solid var(--bd); padding:6px 12px; }\ntable.geml-table thead th { background:var(--code-bg); cursor:pointer; user-select:none; white-space:nowrap; }\ntable.geml-table thead th::after { content:\" \\2195\"; color:var(--muted); font-size:.8em; }\ntable.geml-table thead th.asc::after { content:\" \\2191\"; color:var(--accent); }\ntable.geml-table thead th.desc::after { content:\" \\2193\"; color:var(--accent); }\ntable.geml-table tbody tr:nth-child(2n) { background:#fafbfc; }\ntable.geml-table td.computed { color:#0a7c52; }\ntable.geml-table tfoot td { background:var(--code-bg); font-weight:600; border-top:2px solid var(--bd); }\n.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; }\n.table-figure details > summary { cursor:pointer; color:var(--muted); font-size:.86em; padding:4px 0; }\n.table-note { color:var(--muted); font-size:.82em; margin:6px 0 0; }\n.geml-chart { width:100%; height:auto; background:var(--bg); border:1px solid var(--bd); border-radius:8px; }\n.c-title { font-size:15px; font-weight:600; fill:var(--fg); }\n.c-grid { stroke:#eaecef; } .c-axis { stroke:#aab1b8; } .c-tick { font-size:11px; fill:var(--muted); } .c-legend { font-size:12px; fill:var(--fg); }\n.media { max-width:100%; border-radius:8px; }\n.diagram-src { color:var(--muted); } .render-error { color:#cf222e; }\n.math-block { overflow-x:auto; padding:.4em 0; }\nsup.fn a { font-size:.75em; }\n.geml-footer { max-width:860px; margin:0 auto; padding:16px 24px 40px; color:var(--muted); font-size:.82em; }\n.geml-footer code { font-size:.95em; }\n.code-graph { margin:1.4em 0; }\n.cg-mount { border:1px solid var(--bd); border-radius:8px; padding:10px 12px; background:var(--bg); }\n.cg-scroll { overflow:auto; min-height:52vh; max-height:72vh; }\n.cg-svg { display:block; }\n.cg-search-wrap { position:relative; display:inline-block; }\n.cg-search { font:12px/1.4 inherit; padding:2px 7px; border:1px solid var(--bd); border-radius:4px; background:var(--bg); color:var(--fg); min-width:13ch; }\n.cg-search-menu { position:absolute; z-index:30; top:calc(100% + 2px); left:0; min-width:24ch; max-width:52ch; max-height:52vh; overflow:auto; background:var(--bg); border:1px solid var(--bd); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.18); }\n.cg-search-row { display:block; width:100%; text-align:left; padding:4px 9px 4px 18px; border:0; background:none; color:var(--fg); cursor:pointer; font:12px/1.4 inherit; }\n.cg-search-row:hover { background:var(--bd); }\n.cg-search-count { position:sticky; top:0; padding:4px 9px; font-size:11px; opacity:.65; background:var(--bg); border-bottom:1px solid var(--bd); }\n.cg-search-grp { padding:6px 9px 2px; font-size:11px; font-weight:600; opacity:.7; border-top:1px solid var(--bd); }\n.cg-search-grp:first-of-type { border-top:0; }\n.cg-stage { display:flex; gap:10px; align-items:flex-start; }\n.cg-stage .cg-scroll { flex:1 1 auto; min-width:0; }\n.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); }\n.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; }\n.cg-src-hd button { font:inherit; border:1px solid var(--bd); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; padding:0 6px; }\n.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; }\n.cg-src-note { color:var(--muted); font-style:italic; white-space:pre-wrap; }\n.cg-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.82em; color:var(--muted); margin-bottom:6px; }\n.cg-bar button { font:inherit; padding:1px 8px; border:1px solid var(--bd); border-radius:5px; background:transparent; cursor:pointer; }\n.cg-crumb .cg-seg { border:0; border-radius:0; padding:0; background:none; color:var(--accent); cursor:pointer; font:inherit; }\n.cg-crumb .cg-seg:hover { text-decoration:underline; }\n.cg-frame { display:block; width:100%; height:72vh; border:0; background:var(--bg); }\n.cg-flash { color:#b42318; }\n.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; }\n.cg-upbtn { cursor:pointer; }\n.cg-upbtn circle { fill:#fff; stroke:#94a3b8; }\n.cg-upbtn text { font-size:11px; fill:#57606a; }\n.cg-upbtn:hover circle { stroke:var(--accent); stroke-width:1.6; }\n.cg-upbtn:hover text { fill:var(--accent); }\n.cg-uplink { fill:none; stroke:#94a3b8; stroke-dasharray:3 2.5; pointer-events:none; }\n.cg-groups { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:.75em; color:var(--muted); }\n.cg-chip { display:inline-flex; align-items:center; gap:4px; }\n.cg-chip i { width:10px; height:10px; border-radius:2px; border:1px solid #94a3b8; display:inline-block; }\n.cg-note { font-size:.8em; color:#9a6700; }\n.cg-n rect { fill:#eef2f7; stroke:#94a3b8; }\n.cg-n text { font-size:12px; fill:var(--fg); font-family:ui-monospace,Consolas,monospace; }\n.cg-n { cursor:pointer; }\n.cg-n.root rect { fill:#dbeafe; stroke:#2563eb; stroke-width:2; }\n.cg-n.leaf { opacity:.45; }\n.cg-n.test rect { stroke-dasharray:3 2; }\n.cg-n.grp rect { stroke-width:1.8; }\n.cg-e { fill:none; stroke:#94a3b8; stroke-width:.9; }\n.cg-e.cand { stroke-dasharray:2 3; }\n.cg-e.back { stroke:#dc2626; stroke-dasharray:5 3; }\n.cg-e.soft { opacity:.55; }\n.cg-svg.hl .cg-n { opacity:.22; }\n.cg-svg.hl .cg-e { opacity:.1; }\n.cg-svg.hl .cg-n.hl { opacity:1; }\n.cg-svg.hl .cg-e.hl { opacity:1; stroke-width:1.6; }\n";
+export declare const CSS = "\n:root { --fg:#1f2328; --muted:#656d76; --bd:#d0d7de; --bg:#fff; --accent:#2563eb; --code-bg:#f6f8fa; }\n* { box-sizing: border-box; }\nbody { margin:0; color:var(--fg); background:#fafbfc; font:16px/1.6 -apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,\"PingFang SC\",\"Microsoft Yahei\",sans-serif; }\nmain { max-width: 860px; margin: 0 auto; padding: 48px 24px 96px; background:var(--bg); }\nh1,h2,h3,h4,h5,h6 { line-height:1.25; margin:1.6em 0 .6em; scroll-margin-top:16px; }\nh1 { font-size:2em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }\nh2 { font-size:1.5em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }\nh3 { font-size:1.25em; } h4 { font-size:1em; }\np { margin:.7em 0; }\na { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }\ncode { background:var(--code-bg); padding:.15em .35em; border-radius:6px; font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }\npre { background:var(--code-bg); padding:14px 16px; border-radius:8px; overflow:auto; }\npre code { background:none; padding:0; font-size:.85em; }\npre.output { background:#0d1117; color:#e6edf3; }\npre.output code { color:inherit; }\nul,ol { padding-left:1.6em; } li { margin:.2em 0; }\nul.task-list { list-style:none; padding-left:.2em; }\nli.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; }\nli.task input[type=checkbox]:checked { background-color:#1f883d; border-color:#1f883d; }\nli.task input[type=checkbox]:checked::after { content:\"\u2713\"; 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; }\naside.callout { border-left:4px solid var(--accent); background:#f0f6ff; padding:.4em 16px; border-radius:0 8px 8px 0; margin:1em 0; }\naside.aside { border-left-color:#8b949e; background:#f6f8fa; }\naside.warning { border-left-color:#d97706; background:#fff8f0; }\naside.callout > :first-child { margin-top:0; } aside.callout > :last-child { margin-bottom:0; }\nfigure { margin:1.2em 0; }\nfigcaption { color:var(--muted); font-size:.86em; text-align:center; margin-top:.5em; }\ntable.geml-table { border-collapse:collapse; width:100%; font-size:.92em; }\ntable.geml-table th, table.geml-table td { border:1px solid var(--bd); padding:6px 12px; }\ntable.geml-table thead th { background:var(--code-bg); cursor:pointer; user-select:none; white-space:nowrap; }\ntable.geml-table thead th::after { content:\" \\2195\"; color:var(--muted); font-size:.8em; }\ntable.geml-table thead th.asc::after { content:\" \\2191\"; color:var(--accent); }\ntable.geml-table thead th.desc::after { content:\" \\2193\"; color:var(--accent); }\ntable.geml-table tbody tr:nth-child(2n) { background:#fafbfc; }\ntable.geml-table td.computed { color:#0a7c52; }\ntable.geml-table tfoot td { background:var(--code-bg); font-weight:600; border-top:2px solid var(--bd); }\n.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; }\n.table-figure details > summary { cursor:pointer; color:var(--muted); font-size:.86em; padding:4px 0; }\n.table-note { color:var(--muted); font-size:.82em; margin:6px 0 0; }\n.geml-chart { width:100%; height:auto; background:var(--bg); border:1px solid var(--bd); border-radius:8px; }\n.c-title { font-size:15px; font-weight:600; fill:var(--fg); }\n.c-grid { stroke:#eaecef; } .c-axis { stroke:#aab1b8; } .c-tick { font-size:11px; fill:var(--muted); } .c-legend { font-size:12px; fill:var(--fg); }\n.media { max-width:100%; border-radius:8px; }\n.diagram-src { color:var(--muted); } .render-error { color:#cf222e; }\n.math-block { overflow-x:auto; padding:.4em 0; }\nsup.fn a { font-size:.75em; }\n.geml-footer { max-width:860px; margin:0 auto; padding:16px 24px 40px; color:var(--muted); font-size:.82em; }\n.geml-footer code { font-size:.95em; }\n.code-graph { margin:1.4em 0; }\n.cg-mount { border:1px solid var(--bd); border-radius:8px; padding:10px 12px; background:var(--bg); }\n.cg-scroll { overflow:auto; min-height:52vh; max-height:72vh; }\n.cg-svg { display:block; }\n.cg-search-wrap { position:relative; display:inline-block; }\n.cg-search { font:12px/1.4 inherit; padding:2px 7px; border:1px solid var(--bd); border-radius:4px; background:var(--bg); color:var(--fg); min-width:13ch; }\n.cg-search-menu { position:absolute; z-index:30; top:calc(100% + 2px); left:0; min-width:24ch; max-width:52ch; max-height:52vh; overflow:auto; background:var(--bg); border:1px solid var(--bd); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.18); }\n.cg-search-row { display:block; width:100%; text-align:left; padding:4px 9px 4px 18px; border:0; background:none; color:var(--fg); cursor:pointer; font:12px/1.4 inherit; }\n.cg-search-row:hover { background:var(--bd); }\n.cg-search-count { position:sticky; top:0; padding:4px 9px; font-size:11px; opacity:.65; background:var(--bg); border-bottom:1px solid var(--bd); }\n.cg-search-grp { padding:6px 9px 2px; font-size:11px; font-weight:600; opacity:.7; border-top:1px solid var(--bd); }\n.cg-search-grp:first-of-type { border-top:0; }\n.cg-stage { display:flex; gap:10px; align-items:flex-start; }\n.cg-stage .cg-scroll { flex:1 1 auto; min-width:0; }\n.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); }\n.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; }\n.cg-src-hd button { font:inherit; border:1px solid var(--bd); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; padding:0 6px; }\n.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; }\n.cg-src-note { color:var(--muted); font-style:italic; white-space:pre-wrap; }\n.cg-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.82em; color:var(--muted); margin-bottom:6px; }\n.cg-bar button { font:inherit; padding:1px 8px; border:1px solid var(--bd); border-radius:5px; background:transparent; cursor:pointer; }\n.cg-crumb .cg-seg { border:0; border-radius:0; padding:0; background:none; color:var(--accent); cursor:pointer; font:inherit; }\n.cg-crumb .cg-seg:hover { text-decoration:underline; }\n.cg-frame { display:block; width:100%; height:72vh; border:0; background:var(--bg); }\n.cg-flash { color:#b42318; }\n.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; }\n.cg-upbtn { cursor:pointer; }\n.cg-upbtn circle { fill:#fff; stroke:#94a3b8; }\n.cg-upbtn text { font-size:11px; fill:#57606a; }\n.cg-upbtn:hover circle { stroke:var(--accent); stroke-width:1.6; }\n.cg-upbtn:hover text { fill:var(--accent); }\n.cg-uplink { fill:none; stroke:#94a3b8; stroke-dasharray:3 2.5; pointer-events:none; }\n.cg-groups { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:.75em; color:var(--muted); }\n.cg-chip { display:inline-flex; align-items:center; gap:4px; }\n.cg-chip i { width:10px; height:10px; border-radius:2px; border:1px solid #94a3b8; display:inline-block; }\n.cg-note { font-size:.8em; color:#9a6700; }\n.cg-n rect { fill:#eef2f7; stroke:#94a3b8; }\n.cg-n text { font-size:12px; fill:var(--fg); font-family:ui-monospace,Consolas,monospace; }\n.cg-n { cursor:pointer; }\n.cg-n.root rect { fill:#dbeafe; stroke:#2563eb; stroke-width:2; }\n.cg-n.leaf { opacity:.45; }\n.cg-n.test rect { stroke-dasharray:3 2; }\n.cg-n.grp rect { stroke-width:1.8; }\n.cg-e { fill:none; stroke:#94a3b8; stroke-width:.9; }\n.cg-e.cand { stroke-dasharray:2 3; }\n.cg-e.back { stroke:#dc2626; stroke-dasharray:5 3; }\n.cg-e.http { stroke:#0891b2; stroke-width:1.5; stroke-dasharray:5 2; } /* cross-stack API link */\n.cg-e.soft { opacity:.55; }\n.cg-svg.hl .cg-n { opacity:.22; }\n.cg-svg.hl .cg-e { opacity:.1; }\n.cg-svg.hl .cg-n.hl { opacity:1; }\n.cg-svg.hl .cg-e.hl { opacity:1; stroke-width:1.6; }\n";
 export declare const JS = "\n(function () {\n  function cmp(a, b) {\n    var na = a.dataset.sort, nb = b.dataset.sort;\n    if (na !== undefined && nb !== undefined) return parseFloat(na) - parseFloat(nb);\n    return (a.textContent || \"\").localeCompare(b.textContent || \"\");\n  }\n  document.querySelectorAll(\"table.geml-table\").forEach(function (table) {\n    var tbody = table.tBodies[0];\n    if (!tbody) return;\n    // Sort on header click.\n    var ths = table.tHead ? table.tHead.rows[0].cells : [];\n    Array.prototype.forEach.call(ths, function (th, col) {\n      th.addEventListener(\"click\", function () {\n        var dir = th.classList.contains(\"asc\") ? \"desc\" : \"asc\";\n        Array.prototype.forEach.call(ths, function (h) { h.classList.remove(\"asc\", \"desc\"); });\n        th.classList.add(dir);\n        var rows = Array.prototype.slice.call(tbody.rows);\n        rows.sort(function (r1, r2) {\n          var c = cmp(r1.cells[col], r2.cells[col]);\n          return dir === \"asc\" ? c : -c;\n        });\n        rows.forEach(function (r) { tbody.appendChild(r); });\n      });\n    });\n    // Filter rows.\n    var fig = table.closest(\".table-figure\");\n    var input = fig ? fig.querySelector(\".table-filter\") : null;\n    if (input) input.addEventListener(\"input\", function () {\n      var q = input.value.toLowerCase();\n      Array.prototype.forEach.call(tbody.rows, function (r) {\n        r.style.display = (r.textContent || \"\").toLowerCase().indexOf(q) >= 0 ? \"\" : \"none\";\n      });\n    });\n  });\n})();\n";
 export declare function codeGraphRuntime(root: {
     querySelectorAll(sel: string): ArrayLike<Element>;

package/dist/render.js

@@ -561,26 +561,42 @@ function buildCodeGraph(startRel, opts, view) {
             if (idx)
                 return idx;
             idx = new Map();
+            const add = (from, rec) => {
+                if (!from.startsWith("#"))
+                    return;
+                let list = idx.get(from.slice(1));
+                if (!list) {
+                    list = [];
+                    idx.set(from.slice(1), list);
+                }
+                list.push(rec);
+            };
+            // Honor only the FIRST table of each id — a crafted second #calls/#api-calls
+            // must not inject edges (pinned by render-html tests).
+            let sawCalls = false, sawApi = false;
             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;
+                    if (b.kind !== "block" || b.type !== "table" || !b.table)
+                        continue;
+                    const cols = b.table.columns;
+                    const fi = cols.indexOf("from"), ti = cols.indexOf("to");
+                    if (fi < 0 || ti < 0)
+                        continue;
+                    if (b.id === "calls" && !sawCalls) {
+                        sawCalls = true;
+                        const ki = cols.indexOf("kind"), ci = cols.indexOf("confidence");
+                        for (const r of b.table.rows)
+                            add(r[fi]?.text ?? "", { to: r[ti]?.text ?? "", kind: r[ki]?.text || "call", conf: ci >= 0 ? (r[ci]?.text ?? "") : "" });
+                    }
+                    else if (b.id === "api-calls" && !sawApi) {
+                        sawApi = true;
+                        // cross-stack link: a frontend function → its backend handler,
+                        // labelled with the endpoint (METHOD path). Rendered as a distinct
+                        // `http` edge; the handler is a boundary node (not auto-expanded).
+                        const ei = cols.indexOf("endpoint");
+                        for (const r of b.table.rows)
+                            add(r[fi]?.text ?? "", { to: r[ti]?.text ?? "", kind: "http", conf: "", endpoint: ei >= 0 ? (r[ei]?.text ?? "") : "" });
                     }
                 }
             cache.set(docRel, idx);
@@ -596,8 +612,6 @@ function buildCodeGraph(startRel, opts, view) {
         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) => {
@@ -605,26 +619,38 @@ function buildCodeGraph(startRel, opts, view) {
                 if (idx)
                     return idx;
                 idx = new Map();
+                const add = (to, rec) => {
+                    if (!to.startsWith("#"))
+                        return;
+                    let list = idx.get(to.slice(1));
+                    if (!list) {
+                        list = [];
+                        idx.set(to.slice(1), list);
+                    }
+                    list.push(rec);
+                };
+                let sawCb = false, sawApi = false; // first-of-each-id only (see callIdxOf)
                 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;
+                        if (b.kind !== "block" || b.type !== "table" || !b.table)
+                            continue;
+                        const cols = b.table.columns;
+                        const fi = cols.indexOf("from"), ti = cols.indexOf("to");
+                        if (fi < 0 || ti < 0)
+                            continue;
+                        if (b.id === "called-by" && !sawCb) {
+                            sawCb = true;
+                            const ki = cols.indexOf("kind");
+                            for (const r of b.table.rows)
+                                add(r[ti]?.text ?? "", { from: r[fi]?.text ?? "", kind: r[ki]?.text || "call" });
+                        }
+                        else if (b.id === "api-served-by" && !sawApi) {
+                            sawApi = true;
+                            // cross-stack: a backend handler ← its frontend caller.
+                            const ei = cols.indexOf("endpoint");
+                            for (const r of b.table.rows)
+                                add(r[ti]?.text ?? "", { from: r[fi]?.text ?? "", kind: "http", endpoint: ei >= 0 ? (r[ei]?.text ?? "") : "" });
                         }
                     }
                 cache.set(docRel, idx);
@@ -656,8 +682,13 @@ function buildCodeGraph(startRel, opts, view) {
                         }
                         nodes[callerKey] = blockInfo(c.doc, c.id);
                     }
-                    edges.push([toKey, callerKey, row.kind, ""]);
-                    if (!seenUp.has(callerKey)) {
+                    if (row.endpoint)
+                        edges.push([toKey, callerKey, row.kind, "", row.endpoint]);
+                    else
+                        edges.push([toKey, callerKey, row.kind, ""]);
+                    // Don't expand the frontend caller's subtree into a backend-rooted
+                    // callers view across the http boundary; it's a boundary node.
+                    if (row.kind !== "http" && !seenUp.has(callerKey)) {
                         seenUp.add(callerKey);
                         next.push(c);
                     }
@@ -712,8 +743,14 @@ function buildCodeGraph(startRel, opts, view) {
                     }
                     nodes[toKey] = blockInfo(t.doc, t.id);
                 }
-                edges.push([fromKey, toKey, row.kind, row.conf]);
-                if (!seen.has(toKey)) {
+                if (row.endpoint)
+                    edges.push([fromKey, toKey, row.kind, row.conf, row.endpoint]);
+                else
+                    edges.push([fromKey, toKey, row.kind, row.conf]);
+                // Cross-stack `http` links reach into the OTHER tree — pull the handler
+                // in as a boundary node but don't expand its (backend) subtree into a
+                // frontend view; the user clicks through to open it in its own flow.
+                if (row.kind !== "http" && !seen.has(toKey)) {
                     seen.add(toKey);
                     next.push(t);
                 }
@@ -888,142 +925,143 @@ function trunc(s, n) {
 // ---------------------------------------------------------------------------
 // Page shell, inline CSS, inline interactivity JS
 // ---------------------------------------------------------------------------
-export const CSS = `
-:root { --fg:#1f2328; --muted:#656d76; --bd:#d0d7de; --bg:#fff; --accent:#2563eb; --code-bg:#f6f8fa; }
-* { box-sizing: border-box; }
-body { margin:0; color:var(--fg); background:#fafbfc; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"PingFang SC","Microsoft Yahei",sans-serif; }
-main { max-width: 860px; margin: 0 auto; padding: 48px 24px 96px; background:var(--bg); }
-h1,h2,h3,h4,h5,h6 { line-height:1.25; margin:1.6em 0 .6em; scroll-margin-top:16px; }
-h1 { font-size:2em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }
-h2 { font-size:1.5em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }
-h3 { font-size:1.25em; } h4 { font-size:1em; }
-p { margin:.7em 0; }
-a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
-code { background:var(--code-bg); padding:.15em .35em; border-radius:6px; font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
-pre { background:var(--code-bg); padding:14px 16px; border-radius:8px; overflow:auto; }
-pre code { background:none; padding:0; font-size:.85em; }
-pre.output { background:#0d1117; color:#e6edf3; }
-pre.output code { color:inherit; }
-ul,ol { padding-left:1.6em; } li { margin:.2em 0; }
-ul.task-list { list-style:none; padding-left:.2em; }
-li.task input[type=checkbox] { appearance:none; -webkit-appearance:none; width:1.1em; height:1.1em; margin:0 .5em 0 0; vertical-align:-.2em; border:1.5px solid #c8ccd0; border-radius:4px; background:#fff; position:relative; opacity:1; cursor:default; box-sizing:border-box; }
-li.task input[type=checkbox]:checked { background-color:#1f883d; border-color:#1f883d; }
-li.task input[type=checkbox]:checked::after { content:"✓"; position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8em; line-height:1; font-weight:700; }
-aside.callout { border-left:4px solid var(--accent); background:#f0f6ff; padding:.4em 16px; border-radius:0 8px 8px 0; margin:1em 0; }
-aside.aside { border-left-color:#8b949e; background:#f6f8fa; }
-aside.warning { border-left-color:#d97706; background:#fff8f0; }
-aside.callout > :first-child { margin-top:0; } aside.callout > :last-child { margin-bottom:0; }
-figure { margin:1.2em 0; }
-figcaption { color:var(--muted); font-size:.86em; text-align:center; margin-top:.5em; }
-table.geml-table { border-collapse:collapse; width:100%; font-size:.92em; }
-table.geml-table th, table.geml-table td { border:1px solid var(--bd); padding:6px 12px; }
-table.geml-table thead th { background:var(--code-bg); cursor:pointer; user-select:none; white-space:nowrap; }
-table.geml-table thead th::after { content:" \\2195"; color:var(--muted); font-size:.8em; }
-table.geml-table thead th.asc::after { content:" \\2191"; color:var(--accent); }
-table.geml-table thead th.desc::after { content:" \\2193"; color:var(--accent); }
-table.geml-table tbody tr:nth-child(2n) { background:#fafbfc; }
-table.geml-table td.computed { color:#0a7c52; }
-table.geml-table tfoot td { background:var(--code-bg); font-weight:600; border-top:2px solid var(--bd); }
-.table-tools { margin-bottom:6px; } .table-filter { width:240px; max-width:100%; padding:5px 9px; border:1px solid var(--bd); border-radius:7px; font-size:.85em; }
-.table-figure details > summary { cursor:pointer; color:var(--muted); font-size:.86em; padding:4px 0; }
-.table-note { color:var(--muted); font-size:.82em; margin:6px 0 0; }
-.geml-chart { width:100%; height:auto; background:var(--bg); border:1px solid var(--bd); border-radius:8px; }
-.c-title { font-size:15px; font-weight:600; fill:var(--fg); }
-.c-grid { stroke:#eaecef; } .c-axis { stroke:#aab1b8; } .c-tick { font-size:11px; fill:var(--muted); } .c-legend { font-size:12px; fill:var(--fg); }
-.media { max-width:100%; border-radius:8px; }
-.diagram-src { color:var(--muted); } .render-error { color:#cf222e; }
-.math-block { overflow-x:auto; padding:.4em 0; }
-sup.fn a { font-size:.75em; }
-.geml-footer { max-width:860px; margin:0 auto; padding:16px 24px 40px; color:var(--muted); font-size:.82em; }
-.geml-footer code { font-size:.95em; }
-.code-graph { margin:1.4em 0; }
-.cg-mount { border:1px solid var(--bd); border-radius:8px; padding:10px 12px; background:var(--bg); }
-.cg-scroll { overflow:auto; min-height:52vh; max-height:72vh; }
-.cg-svg { display:block; }
-.cg-search-wrap { position:relative; display:inline-block; }
-.cg-search { font:12px/1.4 inherit; padding:2px 7px; border:1px solid var(--bd); border-radius:4px; background:var(--bg); color:var(--fg); min-width:13ch; }
-.cg-search-menu { position:absolute; z-index:30; top:calc(100% + 2px); left:0; min-width:24ch; max-width:52ch; max-height:52vh; overflow:auto; background:var(--bg); border:1px solid var(--bd); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
-.cg-search-row { display:block; width:100%; text-align:left; padding:4px 9px 4px 18px; border:0; background:none; color:var(--fg); cursor:pointer; font:12px/1.4 inherit; }
-.cg-search-row:hover { background:var(--bd); }
-.cg-search-count { position:sticky; top:0; padding:4px 9px; font-size:11px; opacity:.65; background:var(--bg); border-bottom:1px solid var(--bd); }
-.cg-search-grp { padding:6px 9px 2px; font-size:11px; font-weight:600; opacity:.7; border-top:1px solid var(--bd); }
-.cg-search-grp:first-of-type { border-top:0; }
-.cg-stage { display:flex; gap:10px; align-items:flex-start; }
-.cg-stage .cg-scroll { flex:1 1 auto; min-width:0; }
-.cg-src { flex:0 0 42%; max-width:46%; display:flex; flex-direction:column; border:1px solid var(--bd); border-radius:6px; overflow:hidden; background:var(--bg); }
-.cg-src-hd { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:4px 8px; border-bottom:1px solid var(--bd); color:var(--muted); font:.76em ui-monospace,Consolas,monospace; word-break:break-all; }
-.cg-src-hd button { font:inherit; border:1px solid var(--bd); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; padding:0 6px; }
-.cg-src-body { margin:0; padding:8px 10px; overflow:auto; max-height:72vh; color:var(--fg); font:12px/1.5 ui-monospace,Consolas,monospace; white-space:pre; }
-.cg-src-note { color:var(--muted); font-style:italic; white-space:pre-wrap; }
-.cg-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.82em; color:var(--muted); margin-bottom:6px; }
-.cg-bar button { font:inherit; padding:1px 8px; border:1px solid var(--bd); border-radius:5px; background:transparent; cursor:pointer; }
-.cg-crumb .cg-seg { border:0; border-radius:0; padding:0; background:none; color:var(--accent); cursor:pointer; font:inherit; }
-.cg-crumb .cg-seg:hover { text-decoration:underline; }
-.cg-frame { display:block; width:100%; height:72vh; border:0; background:var(--bg); }
-.cg-flash { color:#b42318; }
-.cg-legend { display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:.75em; color:var(--muted); margin-top:6px; }
-.cg-upbtn { cursor:pointer; }
-.cg-upbtn circle { fill:#fff; stroke:#94a3b8; }
-.cg-upbtn text { font-size:11px; fill:#57606a; }
-.cg-upbtn:hover circle { stroke:var(--accent); stroke-width:1.6; }
-.cg-upbtn:hover text { fill:var(--accent); }
-.cg-uplink { fill:none; stroke:#94a3b8; stroke-dasharray:3 2.5; pointer-events:none; }
-.cg-groups { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:.75em; color:var(--muted); }
-.cg-chip { display:inline-flex; align-items:center; gap:4px; }
-.cg-chip i { width:10px; height:10px; border-radius:2px; border:1px solid #94a3b8; display:inline-block; }
-.cg-note { font-size:.8em; color:#9a6700; }
-.cg-n rect { fill:#eef2f7; stroke:#94a3b8; }
-.cg-n text { font-size:12px; fill:var(--fg); font-family:ui-monospace,Consolas,monospace; }
-.cg-n { cursor:pointer; }
-.cg-n.root rect { fill:#dbeafe; stroke:#2563eb; stroke-width:2; }
-.cg-n.leaf { opacity:.45; }
-.cg-n.test rect { stroke-dasharray:3 2; }
-.cg-n.grp rect { stroke-width:1.8; }
-.cg-e { fill:none; stroke:#94a3b8; stroke-width:.9; }
-.cg-e.cand { stroke-dasharray:2 3; }
-.cg-e.back { stroke:#dc2626; stroke-dasharray:5 3; }
-.cg-e.soft { opacity:.55; }
-.cg-svg.hl .cg-n { opacity:.22; }
-.cg-svg.hl .cg-e { opacity:.1; }
-.cg-svg.hl .cg-n.hl { opacity:1; }
-.cg-svg.hl .cg-e.hl { opacity:1; stroke-width:1.6; }
+export const CSS = `
+:root { --fg:#1f2328; --muted:#656d76; --bd:#d0d7de; --bg:#fff; --accent:#2563eb; --code-bg:#f6f8fa; }
+* { box-sizing: border-box; }
+body { margin:0; color:var(--fg); background:#fafbfc; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"PingFang SC","Microsoft Yahei",sans-serif; }
+main { max-width: 860px; margin: 0 auto; padding: 48px 24px 96px; background:var(--bg); }
+h1,h2,h3,h4,h5,h6 { line-height:1.25; margin:1.6em 0 .6em; scroll-margin-top:16px; }
+h1 { font-size:2em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }
+h2 { font-size:1.5em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }
+h3 { font-size:1.25em; } h4 { font-size:1em; }
+p { margin:.7em 0; }
+a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
+code { background:var(--code-bg); padding:.15em .35em; border-radius:6px; font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
+pre { background:var(--code-bg); padding:14px 16px; border-radius:8px; overflow:auto; }
+pre code { background:none; padding:0; font-size:.85em; }
+pre.output { background:#0d1117; color:#e6edf3; }
+pre.output code { color:inherit; }
+ul,ol { padding-left:1.6em; } li { margin:.2em 0; }
+ul.task-list { list-style:none; padding-left:.2em; }
+li.task input[type=checkbox] { appearance:none; -webkit-appearance:none; width:1.1em; height:1.1em; margin:0 .5em 0 0; vertical-align:-.2em; border:1.5px solid #c8ccd0; border-radius:4px; background:#fff; position:relative; opacity:1; cursor:default; box-sizing:border-box; }
+li.task input[type=checkbox]:checked { background-color:#1f883d; border-color:#1f883d; }
+li.task input[type=checkbox]:checked::after { content:"✓"; position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8em; line-height:1; font-weight:700; }
+aside.callout { border-left:4px solid var(--accent); background:#f0f6ff; padding:.4em 16px; border-radius:0 8px 8px 0; margin:1em 0; }
+aside.aside { border-left-color:#8b949e; background:#f6f8fa; }
+aside.warning { border-left-color:#d97706; background:#fff8f0; }
+aside.callout > :first-child { margin-top:0; } aside.callout > :last-child { margin-bottom:0; }
+figure { margin:1.2em 0; }
+figcaption { color:var(--muted); font-size:.86em; text-align:center; margin-top:.5em; }
+table.geml-table { border-collapse:collapse; width:100%; font-size:.92em; }
+table.geml-table th, table.geml-table td { border:1px solid var(--bd); padding:6px 12px; }
+table.geml-table thead th { background:var(--code-bg); cursor:pointer; user-select:none; white-space:nowrap; }
+table.geml-table thead th::after { content:" \\2195"; color:var(--muted); font-size:.8em; }
+table.geml-table thead th.asc::after { content:" \\2191"; color:var(--accent); }
+table.geml-table thead th.desc::after { content:" \\2193"; color:var(--accent); }
+table.geml-table tbody tr:nth-child(2n) { background:#fafbfc; }
+table.geml-table td.computed { color:#0a7c52; }
+table.geml-table tfoot td { background:var(--code-bg); font-weight:600; border-top:2px solid var(--bd); }
+.table-tools { margin-bottom:6px; } .table-filter { width:240px; max-width:100%; padding:5px 9px; border:1px solid var(--bd); border-radius:7px; font-size:.85em; }
+.table-figure details > summary { cursor:pointer; color:var(--muted); font-size:.86em; padding:4px 0; }
+.table-note { color:var(--muted); font-size:.82em; margin:6px 0 0; }
+.geml-chart { width:100%; height:auto; background:var(--bg); border:1px solid var(--bd); border-radius:8px; }
+.c-title { font-size:15px; font-weight:600; fill:var(--fg); }
+.c-grid { stroke:#eaecef; } .c-axis { stroke:#aab1b8; } .c-tick { font-size:11px; fill:var(--muted); } .c-legend { font-size:12px; fill:var(--fg); }
+.media { max-width:100%; border-radius:8px; }
+.diagram-src { color:var(--muted); } .render-error { color:#cf222e; }
+.math-block { overflow-x:auto; padding:.4em 0; }
+sup.fn a { font-size:.75em; }
+.geml-footer { max-width:860px; margin:0 auto; padding:16px 24px 40px; color:var(--muted); font-size:.82em; }
+.geml-footer code { font-size:.95em; }
+.code-graph { margin:1.4em 0; }
+.cg-mount { border:1px solid var(--bd); border-radius:8px; padding:10px 12px; background:var(--bg); }
+.cg-scroll { overflow:auto; min-height:52vh; max-height:72vh; }
+.cg-svg { display:block; }
+.cg-search-wrap { position:relative; display:inline-block; }
+.cg-search { font:12px/1.4 inherit; padding:2px 7px; border:1px solid var(--bd); border-radius:4px; background:var(--bg); color:var(--fg); min-width:13ch; }
+.cg-search-menu { position:absolute; z-index:30; top:calc(100% + 2px); left:0; min-width:24ch; max-width:52ch; max-height:52vh; overflow:auto; background:var(--bg); border:1px solid var(--bd); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
+.cg-search-row { display:block; width:100%; text-align:left; padding:4px 9px 4px 18px; border:0; background:none; color:var(--fg); cursor:pointer; font:12px/1.4 inherit; }
+.cg-search-row:hover { background:var(--bd); }
+.cg-search-count { position:sticky; top:0; padding:4px 9px; font-size:11px; opacity:.65; background:var(--bg); border-bottom:1px solid var(--bd); }
+.cg-search-grp { padding:6px 9px 2px; font-size:11px; font-weight:600; opacity:.7; border-top:1px solid var(--bd); }
+.cg-search-grp:first-of-type { border-top:0; }
+.cg-stage { display:flex; gap:10px; align-items:flex-start; }
+.cg-stage .cg-scroll { flex:1 1 auto; min-width:0; }
+.cg-src { flex:0 0 42%; max-width:46%; display:flex; flex-direction:column; border:1px solid var(--bd); border-radius:6px; overflow:hidden; background:var(--bg); }
+.cg-src-hd { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:4px 8px; border-bottom:1px solid var(--bd); color:var(--muted); font:.76em ui-monospace,Consolas,monospace; word-break:break-all; }
+.cg-src-hd button { font:inherit; border:1px solid var(--bd); border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; padding:0 6px; }
+.cg-src-body { margin:0; padding:8px 10px; overflow:auto; max-height:72vh; color:var(--fg); font:12px/1.5 ui-monospace,Consolas,monospace; white-space:pre; }
+.cg-src-note { color:var(--muted); font-style:italic; white-space:pre-wrap; }
+.cg-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.82em; color:var(--muted); margin-bottom:6px; }
+.cg-bar button { font:inherit; padding:1px 8px; border:1px solid var(--bd); border-radius:5px; background:transparent; cursor:pointer; }
+.cg-crumb .cg-seg { border:0; border-radius:0; padding:0; background:none; color:var(--accent); cursor:pointer; font:inherit; }
+.cg-crumb .cg-seg:hover { text-decoration:underline; }
+.cg-frame { display:block; width:100%; height:72vh; border:0; background:var(--bg); }
+.cg-flash { color:#b42318; }
+.cg-legend { display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:.75em; color:var(--muted); margin-top:6px; }
+.cg-upbtn { cursor:pointer; }
+.cg-upbtn circle { fill:#fff; stroke:#94a3b8; }
+.cg-upbtn text { font-size:11px; fill:#57606a; }
+.cg-upbtn:hover circle { stroke:var(--accent); stroke-width:1.6; }
+.cg-upbtn:hover text { fill:var(--accent); }
+.cg-uplink { fill:none; stroke:#94a3b8; stroke-dasharray:3 2.5; pointer-events:none; }
+.cg-groups { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:.75em; color:var(--muted); }
+.cg-chip { display:inline-flex; align-items:center; gap:4px; }
+.cg-chip i { width:10px; height:10px; border-radius:2px; border:1px solid #94a3b8; display:inline-block; }
+.cg-note { font-size:.8em; color:#9a6700; }
+.cg-n rect { fill:#eef2f7; stroke:#94a3b8; }
+.cg-n text { font-size:12px; fill:var(--fg); font-family:ui-monospace,Consolas,monospace; }
+.cg-n { cursor:pointer; }
+.cg-n.root rect { fill:#dbeafe; stroke:#2563eb; stroke-width:2; }
+.cg-n.leaf { opacity:.45; }
+.cg-n.test rect { stroke-dasharray:3 2; }
+.cg-n.grp rect { stroke-width:1.8; }
+.cg-e { fill:none; stroke:#94a3b8; stroke-width:.9; }
+.cg-e.cand { stroke-dasharray:2 3; }
+.cg-e.back { stroke:#dc2626; stroke-dasharray:5 3; }
+.cg-e.http { stroke:#0891b2; stroke-width:1.5; stroke-dasharray:5 2; } /* cross-stack API link */
+.cg-e.soft { opacity:.55; }
+.cg-svg.hl .cg-n { opacity:.22; }
+.cg-svg.hl .cg-e { opacity:.1; }
+.cg-svg.hl .cg-n.hl { opacity:1; }
+.cg-svg.hl .cg-e.hl { opacity:1; stroke-width:1.6; }
 `;
-export const JS = `
-(function () {
-  function cmp(a, b) {
-    var na = a.dataset.sort, nb = b.dataset.sort;
-    if (na !== undefined && nb !== undefined) return parseFloat(na) - parseFloat(nb);
-    return (a.textContent || "").localeCompare(b.textContent || "");
-  }
-  document.querySelectorAll("table.geml-table").forEach(function (table) {
-    var tbody = table.tBodies[0];
-    if (!tbody) return;
-    // Sort on header click.
-    var ths = table.tHead ? table.tHead.rows[0].cells : [];
-    Array.prototype.forEach.call(ths, function (th, col) {
-      th.addEventListener("click", function () {
-        var dir = th.classList.contains("asc") ? "desc" : "asc";
-        Array.prototype.forEach.call(ths, function (h) { h.classList.remove("asc", "desc"); });
-        th.classList.add(dir);
-        var rows = Array.prototype.slice.call(tbody.rows);
-        rows.sort(function (r1, r2) {
-          var c = cmp(r1.cells[col], r2.cells[col]);
-          return dir === "asc" ? c : -c;
-        });
-        rows.forEach(function (r) { tbody.appendChild(r); });
-      });
-    });
-    // Filter rows.
-    var fig = table.closest(".table-figure");
-    var input = fig ? fig.querySelector(".table-filter") : null;
-    if (input) input.addEventListener("input", function () {
-      var q = input.value.toLowerCase();
-      Array.prototype.forEach.call(tbody.rows, function (r) {
-        r.style.display = (r.textContent || "").toLowerCase().indexOf(q) >= 0 ? "" : "none";
-      });
-    });
-  });
-})();
+export const JS = `
+(function () {
+  function cmp(a, b) {
+    var na = a.dataset.sort, nb = b.dataset.sort;
+    if (na !== undefined && nb !== undefined) return parseFloat(na) - parseFloat(nb);
+    return (a.textContent || "").localeCompare(b.textContent || "");
+  }
+  document.querySelectorAll("table.geml-table").forEach(function (table) {
+    var tbody = table.tBodies[0];
+    if (!tbody) return;
+    // Sort on header click.
+    var ths = table.tHead ? table.tHead.rows[0].cells : [];
+    Array.prototype.forEach.call(ths, function (th, col) {
+      th.addEventListener("click", function () {
+        var dir = th.classList.contains("asc") ? "desc" : "asc";
+        Array.prototype.forEach.call(ths, function (h) { h.classList.remove("asc", "desc"); });
+        th.classList.add(dir);
+        var rows = Array.prototype.slice.call(tbody.rows);
+        rows.sort(function (r1, r2) {
+          var c = cmp(r1.cells[col], r2.cells[col]);
+          return dir === "asc" ? c : -c;
+        });
+        rows.forEach(function (r) { tbody.appendChild(r); });
+      });
+    });
+    // Filter rows.
+    var fig = table.closest(".table-figure");
+    var input = fig ? fig.querySelector(".table-filter") : null;
+    if (input) input.addEventListener("input", function () {
+      var q = input.value.toLowerCase();
+      Array.prototype.forEach.call(tbody.rows, function (r) {
+        r.style.display = (r.textContent || "").toLowerCase().indexOf(q) >= 0 ? "" : "none";
+      });
+    });
+  });
+})();
 `;
 // geml-code-graph runtime: layered layout AT DRAW TIME (GEP-0003 / v2-D8) so
 // clicking a node re-roots the view inside the embedded slice. Algorithm as
@@ -1042,6 +1080,30 @@ export function codeGraphRuntime(root) {
             el.setAttribute(k, String(attrs[k]));
         return el;
     }
+    // Same-origin confinement for every URL the runtime fetches or loads.
+    // navBase is derived from the mount's document-controlled `data-src`, so a
+    // crafted codemap doc could otherwise aim a fetch / HEAD probe / <script src>
+    // at a third-party host (silent beacon, SSRF, or remote-code load) or read an
+    // out-of-directory local file. Resolve the candidate against the page and
+    // require the SAME origin (and, on file://, the same directory). With no
+    // location context (unit tests / non-browser) there is nothing to confine to,
+    // so allow — the browser/CLI callers always have one.
+    function cgSameOrigin(u) {
+        try {
+            var here = (typeof location !== "undefined" && location.href) ? location.href : "";
+            if (!here)
+                return true;
+            var abs = new URL(String(u), here), cur = new URL(here);
+            if (abs.protocol !== cur.protocol)
+                return false;
+            if (cur.protocol === "file:")
+                return abs.pathname.indexOf(cur.pathname.replace(/[^\/]*$/, "")) === 0;
+            return abs.origin === cur.origin;
+        }
+        catch (e) {
+            return false;
+        }
+    }
     // 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;
@@ -1446,7 +1508,7 @@ export function codeGraphRuntime(root) {
                 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 cls = "cg-e" + (e[2] === "candidate" ? " cand" : "") + (e[2] === "http" ? " http" : "") + (isBack ? " back" : "") + (e[3] === "medium" || e[3] === "low" ? " soft" : "");
                 var p;
                 if (e[0] === e[1]) {
                     p = LR
@@ -1472,6 +1534,11 @@ export function codeGraphRuntime(root) {
                     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" : "") + ")" });
+                if (e[2] === "http" && e[4]) {
+                    var tt = h("title", {});
+                    tt.textContent = e[4];
+                    pathEl.appendChild(tt);
+                } // endpoint on hover
                 var ek = e[0] + ">" + e[1];
                 edgeEls[ek] = pathEl;
                 edgeBase[ek] = cls;
@@ -1658,7 +1725,11 @@ export function codeGraphRuntime(root) {
                 // blocked) — embed directly; the frame contains any error itself.
                 try {
                     if (/^https?:$/.test(window.location.protocol)) {
-                        fetch(html, { method: "HEAD" }).then(function (r) {
+                        if (!cgSameOrigin(html)) {
+                            flash("cannot reach " + html + " (cross-origin blocked)");
+                            return;
+                        }
+                        fetch(html, { method: "HEAD", credentials: "omit" }).then(function (r) {
                             if (r.ok)
                                 embed();
                             else
@@ -1872,6 +1943,10 @@ export function codeGraphRuntime(root) {
                 function withIndex(cb) {
                     if (window.__gemlSearch)
                         return cb(window.__gemlSearch);
+                    if (!cgSameOrigin(navBase + "_index/search-index.js")) {
+                        cb([]);
+                        return;
+                    }
                     var s = document.createElement("script");
                     s.src = navBase + "_index/search-index.js";
                     s.onload = function () { cb(window.__gemlSearch || []); };
@@ -2191,8 +2266,16 @@ export function codeGraphRuntime(root) {
                     degrade();
                     return;
                 }
+                // `path` is the node's document-controlled `src=` route and `base` may
+                // be empty (@self / bare-filename mounts), so an absolute or //-relative
+                // src would fetch a third-party host (beacon / SSRF). Confine to the
+                // page's origin and never send credentials.
+                if (!cgSameOrigin(base + path)) {
+                    degrade();
+                    return;
+                }
                 try {
-                    Promise.resolve(fetchFn(base + path)).then(function (r) {
+                    Promise.resolve(fetchFn(base + path, { credentials: "omit" })).then(function (r) {
                         if (!r || r.ok === false) {
                             degrade();
                             return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geml/geml",
-  "version": "1.3.2",
+  "version": "1.4.2",
   "publishConfig": {
     "access": "public"
   },
@@ -48,7 +48,6 @@
   "scripts": {
     "build": "tsc",
     "test": "tsc && node test/all.mjs",
-    "convert": "node dist/geml.js convert",
     "parse": "node dist/geml.js",
     "coverage": "tsc && c8 --all --include=dist/**/*.js --include=codemap/**/*.mjs --reporter=text --reporter=text-summary node test/all.mjs",
     "coverage:check": "tsc && c8 --all --include=dist/**/*.js --include=codemap/**/*.mjs --check-coverage --lines 95 --statements 95 --functions 95 --branches 95 node test/all.mjs",