@geml/geml 1.8.2 → 1.8.3

package/dist/geml.js

@@ -1135,33 +1135,49 @@ function gatherIds(source) {
     scanBlocks(normalizeSource(source).split("\n"), 0, ctx);
     return new Set(ctx.ids.keys());
 }
-// Pre-scan for `=== meta` blocks (at any fence depth) and merge their
-// `key=val` lines, so `{{key}}` interpolation can resolve forward references.
+// Pre-scan for `=== meta` blocks and merge their `key=val` lines, so `{{key}}`
+// interpolation can resolve forward references.
+//
+// The walk descends exactly as scanBlocks/collectSpans do — into FLOW bodies
+// only, because a raw or data body is opaque (§3). This used to be a flat regex
+// sweep over every line, which read a `=== meta` shown as an EXAMPLE inside a
+// longer-fenced `==== code` as a real definition: its keys supplied live
+// `{{key}}` values (`geml check` clean, so nothing said so), and a key the
+// document also defined at top level warned `duplicate-meta-key` against a
+// definition that does not exist. Closing is fenceClose's job too now, so a
+// `=== meta {#m}` may close on its labeled fence `=== #m` like any other block.
 function collectMeta(lines, diags) {
     const meta = new Map();
     const firstLine = new Map(); // key → 1-based line of the defining fence
-    for (let i = 0; i < lines.length; i++) {
-        const open = FENCE_OPEN.exec(lines[i]);
-        if (!open || open[2] !== "meta")
-            continue;
-        const len = open[1].length;
-        const body = [];
-        let j = i + 1;
-        for (; j < lines.length && !isCloseFence(lines[j], len); j++)
-            body.push(lines[j]);
-        for (const [k, v] of Object.entries(parseData(body))) {
-            if (meta.has(k)) {
-                diags?.push({ severity: "warning", code: "duplicate-meta-key",
-                    message: `meta key \`${k}\` already defined at line ${firstLine.get(k)}; later definition at line ${i + 1} is ignored`,
-                    line: i + 1 });
+    const walk = (ls, base, depth) => {
+        for (let i = 0; i < ls.length; i++) {
+            const open = FENCE_OPEN.exec(ls[i]);
+            if (!open)
+                continue;
+            const type = open[2];
+            const { end, closed } = fenceClose(ls, i, open);
+            const body = ls.slice(i + 1, closed ? end - 1 : end);
+            if (type === "meta") {
+                const line = base + i + 1; // 1-based, in the original stream
+                for (const [k, v] of Object.entries(parseData(body))) {
+                    if (meta.has(k)) {
+                        diags?.push({ severity: "warning", code: "duplicate-meta-key",
+                            message: `meta key \`${k}\` already defined at line ${firstLine.get(k)}; later definition at line ${line} is ignored`,
+                            line });
+                    }
+                    else {
+                        meta.set(k, String(v));
+                        firstLine.set(k, line);
+                    }
+                }
             }
-            else {
-                meta.set(k, String(v));
-                firstLine.set(k, i + 1);
+            else if ((REGISTRY.get(type) ?? "raw") === "flow" && depth < MAX_NESTING) {
+                walk(body, base + i + 1, depth + 1);
             }
+            i = end - 1; // the loop's ++ lands on `end`
         }
-        i = j;
-    }
+    };
+    walk(lines, 0, 0);
     return meta;
 }
 // §8: resolve every discovered reference. Internal/autoref/footnote anchors

package/dist/mcp.js

@@ -769,25 +769,25 @@ export function handleLine(line, write = (s) => process.stdout.write(s)) {
 // ---------------------------------------------------------------------------
 // Entry
 // ---------------------------------------------------------------------------
-export const MCP_USAGE = `usage: geml mcp --root <dir> [--graph <dir>] [--no-history]
-
-  Serve GEML document CRUD over the MCP stdio transport (JSON-RPC 2.0), plus the
-  read-only code-graph tools when the root holds a code graph.
-
-  --root <dir>        REQUIRED. Root directory holding the .geml documents.
-                      Relative paths resolve against the server process's CWD,
-                      which the CLIENT chooses — pass an absolute path.
-                      Every path a client names is confined to this directory;
-                      a client cannot widen or override it.
-  --graph <dir>       Code-graph directory, inside --root. Defaults to
-                      <root>/.geml-code-graph when that holds an index.geml.
-                      With no graph, the code-graph tools are not served
-                      at all (a client sees only the document tools).
-  --no-history        Do not save a .gemlhistory revision before each
-                      write. Default is to save one, so geml_revert always
-                      has a revision to undo to.
-
-  Register with a client:
+export const MCP_USAGE = `usage: geml mcp --root <dir> [--graph <dir>] [--no-history]
+
+  Serve GEML document CRUD over the MCP stdio transport (JSON-RPC 2.0), plus the
+  read-only code-graph tools when the root holds a code graph.
+
+  --root <dir>        REQUIRED. Root directory holding the .geml documents.
+                      Relative paths resolve against the server process's CWD,
+                      which the CLIENT chooses — pass an absolute path.
+                      Every path a client names is confined to this directory;
+                      a client cannot widen or override it.
+  --graph <dir>       Code-graph directory, inside --root. Defaults to
+                      <root>/.geml-code-graph when that holds an index.geml.
+                      With no graph, the code-graph tools are not served
+                      at all (a client sees only the document tools).
+  --no-history        Do not save a .gemlhistory revision before each
+                      write. Default is to save one, so geml_revert always
+                      has a revision to undo to.
+
+  Register with a client:
     claude mcp add geml -- geml mcp --root /abs/path/to/repo`;
 export function parseArgs(args) {
     let root;

package/dist/render-html.js

@@ -36,43 +36,43 @@ function page(title, body, ctx, source) {
         ? `<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","node:os":"${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 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>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${esc(title)}</title>
-<style>${CSS}</style>
-${importMap}${mathHead}${mermaidHead}</head>
-<body>
-<main>
-${body}
-</main>
-${footer}
-<script>${JS}</script>
-${ctx.usedCodeGraph ? `<script>${CODE_GRAPH_JS}</script>\n` : ""}${liveJs}</body>
-</html>
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(title)}</title>
+<style>${CSS}</style>
+${importMap}${mathHead}${mermaidHead}</head>
+<body>
+<main>
+${body}
+</main>
+${footer}
+<script>${JS}</script>
+${ctx.usedCodeGraph ? `<script>${CODE_GRAPH_JS}</script>\n` : ""}${liveJs}</body>
+</html>
 `;
 }
 export function renderHtml(doc, opts = {}) {

package/dist/render.js

@@ -1273,164 +1273,164 @@ 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; }
-/* A table wider than the column scrolls INSIDE its own box — the page itself
-   must never scroll sideways. Only the table is in here: the filter box above
-   and the caption below stay put instead of sliding out of view with it. */
-.table-scroll { overflow-x:auto; max-width:100%; }
-.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; }
-/* The graph is the widest artifact on the page: let it break out of main's
-   860px reading column and take the viewport, centred, leaving the prose
-   around it untouched. Negative inline margins, NOT transform — a transform
-   would become the containing block for the fullscreen overlay below. */
-@media (min-width:900px) { .code-graph { margin-inline: calc((100% - min(96vw, 1600px)) / 2); } }
-.cg-mount { border:1px solid var(--bd); border-radius:8px; padding:10px 12px; background:var(--bg); }
-.cg-scroll { overflow:auto; min-height:60vh; max-height:84vh; }
-.cg-svg { display:block; }
-/* Fullscreen: one class drives the layout, whether the native Fullscreen API
-   took (mount is in the top layer) or we fell back to a fixed overlay. The
-   :fullscreen pseudo-class is deliberately NOT in these selectors — a browser
-   that doesn't know it would drop the whole rule; the runtime keeps the class
-   in sync with fullscreenchange instead. Toolbar/legend keep their height,
-   the stage eats the rest. */
-.cg-mount.cg-full { position:fixed; inset:0; z-index:9999; margin:0; border:0; border-radius:0; padding:10px 14px; background:var(--bg); display:flex; flex-direction:column; }
-.cg-mount.cg-full > .cg-bar, .cg-mount.cg-full > .cg-legend, .cg-mount.cg-full > .cg-groups { flex:0 0 auto; }
-.cg-mount.cg-full .cg-stage { flex:1 1 auto; min-height:0; }
-.cg-mount.cg-full .cg-scroll { min-height:0; max-height:none; height:100%; }
-.cg-mount.cg-full .cg-src-body { max-height:none; }
-.cg-mount.cg-full .cg-frame { flex:1 1 auto; height:auto; }
-.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:84vh; 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:84vh; border:0; background:var(--bg); }
-.cg-flash { color:#b42318; }
-.cg-legend { display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:.75em; color:var(--muted); margin-top:6px; }
-.cg-upbtn { cursor:pointer; }
-.cg-upbtn circle { fill:#fff; stroke:#94a3b8; }
-.cg-upbtn text { font-size:11px; fill:#57606a; }
-.cg-upbtn:hover circle { stroke:var(--accent); stroke-width:1.6; }
-.cg-upbtn:hover text { fill:var(--accent); }
-.cg-uplink { fill:none; stroke:#94a3b8; stroke-dasharray:3 2.5; pointer-events:none; }
-.cg-groups { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:.75em; color:var(--muted); }
-.cg-chip { display:inline-flex; align-items:center; gap:4px; }
-.cg-chip i { width:10px; height:10px; border-radius:2px; border:1px solid #94a3b8; display:inline-block; }
-.cg-note { font-size:.8em; color:#9a6700; }
-.cg-n rect { fill:#eef2f7; stroke:#94a3b8; }
-.cg-n text { font-size:12px; fill:var(--fg); font-family:ui-monospace,Consolas,monospace; }
-.cg-n { cursor:pointer; }
-.cg-n.root rect { fill:#dbeafe; stroke:#2563eb; stroke-width:2; }
-.cg-n.leaf { opacity:.45; }
-.cg-n.test rect { stroke-dasharray:3 2; }
-.cg-n.grp rect { stroke-width:1.8; }
-.cg-e { fill:none; stroke:#94a3b8; stroke-width:.9; }
-.cg-e.cand { stroke-dasharray:2 3; }
-.cg-e.back { stroke:#dc2626; stroke-dasharray:5 3; }
-.cg-e.http { stroke:#0891b2; stroke-width:1.5; stroke-dasharray:5 2; } /* cross-stack API link */
-.cg-e.soft { opacity:.55; }
-.cg-svg.hl .cg-n { opacity:.22; }
-.cg-svg.hl .cg-e { opacity:.1; }
-.cg-svg.hl .cg-n.hl { opacity:1; }
-.cg-svg.hl .cg-e.hl { opacity:1; stroke-width:1.6; }
+export const CSS = `
+:root { --fg:#1f2328; --muted:#656d76; --bd:#d0d7de; --bg:#fff; --accent:#2563eb; --code-bg:#f6f8fa; }
+* { box-sizing: border-box; }
+body { margin:0; color:var(--fg); background:#fafbfc; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"PingFang SC","Microsoft Yahei",sans-serif; }
+main { max-width: 860px; margin: 0 auto; padding: 48px 24px 96px; background:var(--bg); }
+h1,h2,h3,h4,h5,h6 { line-height:1.25; margin:1.6em 0 .6em; scroll-margin-top:16px; }
+h1 { font-size:2em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }
+h2 { font-size:1.5em; border-bottom:1px solid var(--bd); padding-bottom:.3em; }
+h3 { font-size:1.25em; } h4 { font-size:1em; }
+p { margin:.7em 0; }
+a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
+code { background:var(--code-bg); padding:.15em .35em; border-radius:6px; font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
+pre { background:var(--code-bg); padding:14px 16px; border-radius:8px; overflow:auto; }
+pre code { background:none; padding:0; font-size:.85em; }
+pre.output { background:#0d1117; color:#e6edf3; }
+pre.output code { color:inherit; }
+ul,ol { padding-left:1.6em; } li { margin:.2em 0; }
+ul.task-list { list-style:none; padding-left:.2em; }
+li.task input[type=checkbox] { appearance:none; -webkit-appearance:none; width:1.1em; height:1.1em; margin:0 .5em 0 0; vertical-align:-.2em; border:1.5px solid #c8ccd0; border-radius:4px; background:#fff; position:relative; opacity:1; cursor:default; box-sizing:border-box; }
+li.task input[type=checkbox]:checked { background-color:#1f883d; border-color:#1f883d; }
+li.task input[type=checkbox]:checked::after { content:"✓"; position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8em; line-height:1; font-weight:700; }
+aside.callout { border-left:4px solid var(--accent); background:#f0f6ff; padding:.4em 16px; border-radius:0 8px 8px 0; margin:1em 0; }
+aside.aside { border-left-color:#8b949e; background:#f6f8fa; }
+aside.warning { border-left-color:#d97706; background:#fff8f0; }
+aside.callout > :first-child { margin-top:0; } aside.callout > :last-child { margin-bottom:0; }
+figure { margin:1.2em 0; }
+figcaption { color:var(--muted); font-size:.86em; text-align:center; margin-top:.5em; }
+table.geml-table { border-collapse:collapse; width:100%; font-size:.92em; }
+table.geml-table th, table.geml-table td { border:1px solid var(--bd); padding:6px 12px; }
+table.geml-table thead th { background:var(--code-bg); cursor:pointer; user-select:none; white-space:nowrap; }
+table.geml-table thead th::after { content:" \\2195"; color:var(--muted); font-size:.8em; }
+table.geml-table thead th.asc::after { content:" \\2191"; color:var(--accent); }
+table.geml-table thead th.desc::after { content:" \\2193"; color:var(--accent); }
+table.geml-table tbody tr:nth-child(2n) { background:#fafbfc; }
+table.geml-table td.computed { color:#0a7c52; }
+table.geml-table tfoot td { background:var(--code-bg); font-weight:600; border-top:2px solid var(--bd); }
+.table-tools { margin-bottom:6px; } .table-filter { width:240px; max-width:100%; padding:5px 9px; border:1px solid var(--bd); border-radius:7px; font-size:.85em; }
+/* A table wider than the column scrolls INSIDE its own box — the page itself
+   must never scroll sideways. Only the table is in here: the filter box above
+   and the caption below stay put instead of sliding out of view with it. */
+.table-scroll { overflow-x:auto; max-width:100%; }
+.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; }
+/* The graph is the widest artifact on the page: let it break out of main's
+   860px reading column and take the viewport, centred, leaving the prose
+   around it untouched. Negative inline margins, NOT transform — a transform
+   would become the containing block for the fullscreen overlay below. */
+@media (min-width:900px) { .code-graph { margin-inline: calc((100% - min(96vw, 1600px)) / 2); } }
+.cg-mount { border:1px solid var(--bd); border-radius:8px; padding:10px 12px; background:var(--bg); }
+.cg-scroll { overflow:auto; min-height:60vh; max-height:84vh; }
+.cg-svg { display:block; }
+/* Fullscreen: one class drives the layout, whether the native Fullscreen API
+   took (mount is in the top layer) or we fell back to a fixed overlay. The
+   :fullscreen pseudo-class is deliberately NOT in these selectors — a browser
+   that doesn't know it would drop the whole rule; the runtime keeps the class
+   in sync with fullscreenchange instead. Toolbar/legend keep their height,
+   the stage eats the rest. */
+.cg-mount.cg-full { position:fixed; inset:0; z-index:9999; margin:0; border:0; border-radius:0; padding:10px 14px; background:var(--bg); display:flex; flex-direction:column; }
+.cg-mount.cg-full > .cg-bar, .cg-mount.cg-full > .cg-legend, .cg-mount.cg-full > .cg-groups { flex:0 0 auto; }
+.cg-mount.cg-full .cg-stage { flex:1 1 auto; min-height:0; }
+.cg-mount.cg-full .cg-scroll { min-height:0; max-height:none; height:100%; }
+.cg-mount.cg-full .cg-src-body { max-height:none; }
+.cg-mount.cg-full .cg-frame { flex:1 1 auto; height:auto; }
+.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:84vh; 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:84vh; 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