npm - figdown - Versions diffs - 0.1.0-rc.1 - Mend

figdown 0.1.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/EXPRESSING.md +119 -0
package/LAYOUT-GUIDE.md +367 -0
package/LICENSE +21 -0
package/README.md +201 -0
package/README.zh-tw.md +185 -0
package/SHOWCASE.md +421 -0
package/dist/figdown.js +2239 -0
package/dist/figdown.mjs +2231 -0
package/examples/evpn-fabric.svg +54 -0
package/examples/showcase/arp-resolution.svg +51 -0
package/examples/showcase/ethernet-frame.svg +37 -0
package/examples/showcase/l2-forwarding-logic.svg +42 -0
package/examples/showcase/tcp-handshake.svg +56 -0
package/examples/showcase/tcp-header.svg +47 -0
package/examples/showcase/tcp-state-machine.svg +140 -0
package/package.json +51 -0
package/skill/figdown/build-svg.js +73 -0
package/skill/figdown/figdown.html +3290 -0

package/skill/figdown/figdown.html ADDED Viewed

@@ -0,0 +1,3290 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>FigDown PoC — deterministic text→SVG renderer (draft v0.0)</title>
+<style>
+  :root{
+    --bg:#fcfcfb; --panel:#ffffff; --ink:#1d1d1b; --muted:#6f6e69;
+    --line:#e3e1d9; --hair:#d6d4cc; --code:#f6f5ef; --err:#dc2626;
+    --sans:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
+    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
+  }
+  *{box-sizing:border-box}
+  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5}
+  .wrap{max-width:1400px;margin:0 auto;padding:22px 20px 50px}
+  header h1{font-size:20px;font-weight:600;margin:0 0 3px;letter-spacing:-.01em}
+  header p{margin:0;color:var(--muted);font-size:13px}
+  .bar{display:flex;align-items:center;gap:9px;margin:14px 0 12px;flex-wrap:wrap}
+  .bar label{font-size:13px;color:var(--muted)}
+  select,button{font:inherit;font-size:13.5px;padding:6px 10px;border:1px solid var(--hair);border-radius:8px;background:var(--panel);color:var(--ink);cursor:pointer}
+  button:hover{border-color:var(--muted)}
+  .main{display:grid;grid-template-columns:minmax(340px,0.9fr) minmax(420px,1.1fr);gap:14px;align-items:start}
+  @media (max-width:980px){ .main{grid-template-columns:1fr} }
+  textarea{width:100%;min-height:520px;font-family:var(--mono);font-size:12.8px;line-height:1.55;
+    padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);
+    resize:vertical;white-space:pre;tab-size:4}
+  textarea:focus{outline:2px solid #bfdbfe;outline-offset:-1px}
+  .preview{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;min-height:520px;overflow:auto}
+  .errors{font-family:var(--mono);font-size:12.5px;color:var(--err);white-space:pre-wrap;margin:0}
+  .ok{color:var(--muted);font-size:12px;margin:0 0 8px}
+  svg{max-width:100%;height:auto;display:block}
+  footer{margin-top:18px;color:var(--muted);font-size:12px}
+  a{color:inherit}
+  details#svgbox,details#imgbox{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
+  details#svgbox summary,details#imgbox summary{font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
+  #imgwrap{margin-top:8px;border:1px dashed var(--hair);border-radius:8px;padding:10px;background:#fff}
+  #svgimg{max-width:100%;display:block}
+  #svgsrc{font-family:var(--mono);font-size:11.5px;line-height:1.5;background:var(--code);
+    border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0 0;
+    max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-all}
+  .fname{font-family:var(--mono);font-size:12px;color:var(--muted);padding:0 4px}
+  .sep{display:inline-block;width:1px;height:18px;background:var(--line);margin:0 4px;vertical-align:middle}
+  .errline{cursor:pointer}
+  .errline:hover{text-decoration:underline}
+</style>
+</head>
+<body>
+<div class="wrap">
+<header>
+  <h1>FigDown PoC <span style="color:var(--muted);font-weight:400">— deterministic text→SVG, draft v0.0</span></h1>
+  <p>Figures as text — one source, two readers. Edit left, render right. Same source → same SVG, bit-level.</p>
+</header>
+<div class="bar">
+  <button id="newdoc" title="new blank document">New</button>
+  <button id="open" title="open a .fd (or a generated .svg) — Ctrl+O">Open…</button>
+  <button id="save" title="save the .fd — Ctrl+S (saves back to the opened file)">Save</button>
+  <button id="saveas" title="save the .fd under a new name — Ctrl+Shift+S">As…</button>
+  <button id="dl" title="export the SVG artifact (source + SHA-256 embedded)">SVG ⬇</button>
+  <span id="fname" class="fname"></span>
+  <button id="undobtn" disabled title="undo the last edit — Ctrl+Z (outside the text pane)">↶</button>
+  <button id="redobtn" disabled title="redo — Ctrl+Shift+Z">↷</button>
+  <span class="sep"></span>
+  <label>Example</label>
+  <select id="examples"></select>
+  <select id="newkind" title="shape for new nodes"><option>box</option><option>rounded</option><option>circle</option><option>ellipse</option><option>cloud</option><option>diamond</option><option>cylinder</option></select>
+  <button id="addnode" title="insert a node line (or double-click the canvas)">+ Node</button>
+  <button id="linkmode" title="click two nodes to write an edge line">Link</button>
+  <button id="groupmode" title="drag a box around nodes to write a group line">⬚ Group</button>
+  <button id="pinall" title="materialize all auto positions into pin lines">Pin all</button>
+  <label>fill <input type="color" id="fillpick" value="#ffffff" disabled></label>
+  <button id="raise" disabled title="paint later = move its line down in the text">Raise ↑</button>
+  <button id="lower" disabled title="paint earlier = move its line up in the text">Lower ↓</button>
+  <button id="delnode" disabled title="delete the node and its pins/edges — Del">Delete</button>
+  <input type="file" id="loadfile" accept=".fd,.svg,.txt" style="display:none">
+  <span id="status" style="font-size:12px;color:var(--muted)"></span>
+</div>
+<p style="margin:0 0 10px;font-size:12px;color:var(--muted)">
+Every GUI action rewrites the text: double-click empty canvas → new <code>node</code> + <code>pin</code> ·
+drag a node → <code>pin</code> · arrow keys nudge (Shift = ×10) · drag the corner handle → <code>size</code> ·
+double-click a node → rename · Del → remove node + its pins/edges · fill color → <code>color=</code> ·
+Raise/Lower → line order = paint order · Link → <code>edge</code> · ⬚ Group → <code>group</code> + <code>in=</code> ·
+click a table cell → <code>cell r,c color=</code> · drag a threshold line → <code>at=%</code> ·
+click an error → jump to that line · Ctrl+S save · Ctrl+O open · unsaved work survives in autosave.</p>
+<div class="main">
+  <textarea id="src" spellcheck="false"></textarea>
+  <div class="preview">
+    <p class="ok" id="okline"></p>
+    <pre class="errors" id="errs"></pre>
+    <div id="out"></div>
+    <details id="imgbox" open>
+      <summary>Artifact preview — the .svg file as an image (what a Markdown reader shows)</summary>
+      <div id="imgwrap"><img id="svgimg" alt="SVG artifact preview"></div>
+    </details>
+    <details id="svgbox">
+      <summary>Generated SVG source</summary>
+      <pre id="svgsrc"></pre>
+    </details>
+  </div>
+</div>
+<footer>FigDown draft v0.0 PoC — core scene (node/group/edge/layer, flow/rank/pin/size) + bitfield + table + wave.
+Closed grammar: unknown lines are errors with line numbers. No LLM, no dependencies, no network.</footer>
+</div>
+<script>
+'use strict';
+// ============================================================
+// 1. PARSER — closed, line-oriented grammar (draft v0.0)
+// ============================================================
+const SHAPES = ['box','rounded','circle','ellipse','cloud','diamond','cylinder'];
+// Colors are CSS hex (#rgb / #rrggbb) or CSS named colors (spec §1) — the
+// 147 CSS/SVG color keywords (lowercase) plus `transparent`. Anything else
+// is a line error (closed grammar, 0.1-dev.11).
+const CSS_COLORS=new Set(('aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond '+
+ 'blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan '+
+ 'darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange '+
+ 'darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet '+
+ 'deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite '+
+ 'gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush '+
+ 'lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey '+
+ 'lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow '+
+ 'lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen '+
+ 'mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin '+
+ 'navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise '+
+ 'palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown '+
+ 'salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen '+
+ 'steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen transparent')
+ .split(' '));
+const isColor=v=>/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v)||CSS_COLORS.has(v);
+function tokenize(line){
+  // split by whitespace, honoring double quotes
+  const toks=[]; let i=0;
+  while(i<line.length){
+    while(i<line.length && /\s/.test(line[i])) i++;
+    if(i>=line.length) break;
+    if(line[i]==='"'){
+      let j=i+1, s='';
+      while(j<line.length && line[j]!=='"'){
+        if(line[j]==='\\'){
+          const e=line[j+1];
+          if(e==='n'){ s+='\n'; j+=2; continue; }
+          if(e==='"'){ s+='"'; j+=2; continue; }
+          if(e==='\\'){ s+='\\'; j+=2; continue; }
+          return {error:'unknown escape "\\'+(e||'')+'" (allowed: \\n \\" \\\\)'};
+        }
+        s+=line[j]; j++;
+      }
+      if(j>=line.length) return {error:'unterminated string'};
+      toks.push({v:s,q:true}); i=j+1;
+    } else {
+      let j=i, s='';
+      while(j<line.length && !/\s/.test(line[j])){
+        if(line[j]==='"'){                        // key="value with spaces"
+          j++;
+          while(j<line.length && line[j]!=='"'){
+            if(line[j]==='\\'){
+              const e=line[j+1];
+              if(e==='n'){ s+='\n'; j+=2; continue; }
+              if(e==='"'){ s+='"'; j+=2; continue; }
+              if(e==='\\'){ s+='\\'; j+=2; continue; }
+              return {error:'unknown escape "\\'+(e||'')+'" (allowed: \\n \\" \\\\)'};
+            }
+            s+=line[j]; j++;
+          }
+          if(j>=line.length) return {error:'unterminated string'};
+          j++; continue;
+        }
+        s+=line[j]; j++;
+      }
+      toks.push({v:s,q:false}); i=j;
+    }
+  }
+  return {toks};
+}
+// Option keys are a CLOSED set (two levels, 0.1-dev.11):
+//  - a key listed in OPT_KEYS is parsed as an option; whether it is
+//    *applicable* is checked per directive against DIRECTIVE_OPTS
+//    (a registered-but-inapplicable key is a line error, D3);
+//  - a key=value token with an unregistered key is an "unknown option"
+//    line error (D12) — except inside wave `signal` lanes, where bare
+//    tokens may contain '=' and stay positional (laneMode).
+const OPT_KEYS=new Set(['kind','shape','color','stroke','text','in','layer','label',
+  'style','z','at','w','h','unit','note','labels','numbering','fill','from','to','gap','dir','level',
+  'taillabel','headlabel','class','via','routing']);
+// Applicable option keys per directive. Keys with dedicated diagnostics
+// (node kind/w/h, edge label/taillabel/headlabel, line fill, fill from/to)
+// are listed so their specific error messages fire. `edge` is consumed by
+// parseEdgeLine; `title` takes its rest-of-line verbatim (no options).
+const DIRECTIVE_OPTS={
+  figdown:[],
+  node:['shape','color','stroke','text','style','class','in','layer','kind','w','h'],
+  group:['color','stroke','text','style','gap','class','layer'],
+  boundary:[],
+  edge:['style','class','color','layer','label','taillabel','headlabel'],
+  layer:['z'], flow:[], rank:[],
+  bundle:['color'],
+  line:['in','at','color','fill'],
+  fill:['in','dir','color','from','to'],
+  pin:['at'], size:['w','h'],
+  render:[],
+  routing:[], route:['via','routing'],
+  'class':['color','stroke','text','style'],
+  bitfield:['unit','numbering'], table:[], wave:[],
+  plot:['kind','level'],
+  field:['color','class','note'], wrap:[],
+  cell:['color','class'], colw:[],
+  signal:['labels'], gap:[]
+};
+function splitOpts(toks, laneMode){
+  const pos=[], opts={}, unk=[];
+  for(const t of toks){
+    const m = !t.q && /^([A-Za-z_][A-Za-z0-9_-]*)=([\s\S]*)$/.exec(t.v);
+    if(m && OPT_KEYS.has(m[1])) opts[m[1]]=m[2];
+    else if(m && !laneMode) unk.push(m[1]);
+    else pos.push(t.v);
+  }
+  return {pos,opts,unk};
+}
+const ID_RE=/^[A-Za-z_][A-Za-z0-9_-]*$/;
+function parse(text){
+  const errs=[];
+  const doc={title:'',nodes:[],groups:[],edges:[],layers:[{id:'base',label:'',z:0}],
+             flow:'right',ranks:[],pins:{},sizes:{},blocks:[],trunks:[],glines:[],fills:[],
+             classes:[],routes:[],boundaries:[]};
+  const nodeIds=new Set(), groupIds=new Set(), layerIds=new Set(['base']), classIds=new Set(),
+        bundleIds=new Set(), boundaryIds=new Set();
+  let cur=null;             // current typed block (bitfield/table/wave)
+  let sawHeader=false, firstContent=true, sawRender=false;
+  const RENDER_DIRECTIVES=new Set(['pin','size','route','routing']);
+  const lines=text.split('\n');
+  const err=(n,m)=>errs.push('Line '+n+': '+m);
+  // R34/R35: edge <id> [tail] <op> [head] <id> — a [mid] label splits the
+  // operator into halves: -[x]-  -[x]->  <-[x]-  <-[x]->. Bracket content:
+  // balanced brackets nest verbatim ([flags[3:0]] just works); ["..."] takes
+  // the standard quoted-string escapes for unbalanced brackets / \n.
+  function parseEdgeLine(s,n){
+    let i=4; // past 'edge'
+    const ws=()=>{ while(i<s.length&&/\s/.test(s[i])) i++; };
+    const readId=()=>{ const m=/^[A-Za-z_][A-Za-z0-9_-]*/.exec(s.slice(i));
+      if(!m) return null; i+=m[0].length; return m[0]; };
+    const readLbl=()=>{               // called at '['
+      i++;
+      if(s[i]==='"'){                 // ["..."] — quoted content
+        i++; let v='';
+        while(i<s.length&&s[i]!=='"'){
+          if(s[i]==='\\'){ const e=s[i+1];
+            if(e==='n'){ v+='\n'; i+=2; continue; }
+            if(e==='"'){ v+='"'; i+=2; continue; }
+            if(e==='\\'){ v+='\\'; i+=2; continue; }
+            return {error:'unknown escape "\\'+(e||'')+'" (allowed: \\n \\" \\\\)'}; }
+          v+=s[i]; i++;
+        }
+        if(i>=s.length) return {error:'unterminated string in [label]'};
+        i++;
+        if(s[i]!==']') return {error:'expected ] after quoted label'};
+        i++;
+        if(!v) return {error:'empty [label]'};
+        return {v};
+      }
+      let depth=1,v='';
+      while(i<s.length){
+        const c=s[i];
+        if(c==='[') depth++;
+        else if(c===']'){ depth--; if(!depth){ i++;
+          v=v.trim();
+          if(!v) return {error:'empty [label]'};
+          return {v}; } }
+        v+=c; i++;
+      }
+      return {error:'unterminated [label] — for unbalanced brackets use ["..."]'};
+    };
+    ws(); const a=readId();
+    if(!a){ err(n,'edge needs <id> ->|<-|--|<-> <id>'); return; }
+    ws(); let tail=null;
+    if(s[i]==='['){ const r=readLbl(); if(r.error){ err(n,r.error); return; } tail=r.v; }
+    ws();
+    let lh=null;
+    if(s.startsWith('<-',i)){ lh='<-'; i+=2; }
+    else if(s[i]==='-'){ lh='-'; i++; }
+    else { err(n,'edge needs an operator: -> <- -- <-> (a [mid] label splits it: -[x]->)'); return; }
+    let mid=null, op=null;
+    if(s[i]==='['){
+      const r=readLbl(); if(r.error){ err(n,r.error); return; } mid=r.v;
+      if(s.startsWith('->',i)){ op=lh==='<-'?'<->':'->'; i+=2; }
+      else if(s[i]==='-'){ op=lh==='<-'?'<-':'--'; i++; }
+      else { err(n,'expected - or -> to close the operator after [label]'); return; }
+    } else if(lh==='<-'){
+      if(s[i]==='>'){ op='<->'; i++; } else op='<-';
+    } else {
+      if(s[i]==='-'){ op='--'; i++; }
+      else if(s[i]==='>'){ op='->'; i++; }
+      else { err(n,'edge needs an operator: -> <- -- <->'); return; }
+    }
+    ws(); let head=null;
+    if(s[i]==='['){ const r=readLbl(); if(r.error){ err(n,r.error); return; } head=r.v; }
+    ws(); const b=readId();
+    if(!b){ err(n,'edge needs a target id after the operator'); return; }
+    const tk2=tokenize(s.slice(i).trim());
+    if(tk2.error){ err(n,tk2.error); return; }
+    const {pos:p2,opts:o2,unk:u2}=splitOpts(tk2.toks);
+    if(u2.length){ err(n,'unknown option "'+u2[0]+'="'); return; }
+    if(p2.length){ err(n,'unexpected argument "'+p2[0]+'"'); return; }
+    for(const k in o2)
+      if(!DIRECTIVE_OPTS.edge.includes(k)){ err(n,'edge does not take '+k+'='); return; }
+    for(const k of ['label','taillabel','headlabel'])
+      if(o2[k]!==undefined){ err(n,k+'= is retired — write the label inline: edge A [tail] -[mid]-> [head] B (MIGRATIONS 0.1-dev.9)'); return; }
+    if(o2.color!==undefined && !isColor(o2.color)){ err(n,'unknown color "'+o2.color+'" (#hex or CSS color name)'); return; }
+    if(o2.style!==undefined && !['solid','dashed','dotted'].includes(o2.style)){ err(n,'style must be solid|dashed|dotted'); return; }
+    doc.edges.push({a,b,op,tail,mid,head,style:o2.style,cls:o2['class'],
+                    color:o2.color,layer:o2.layer||'base',line:n});
+  }
+  for(let li=0; li<lines.length; li++){
+    const n=li+1;
+    let raw=lines[li];
+    // pipe rows are raw GFM content: no comment stripping inside them
+    if(!raw.trimStart().startsWith('|')){
+      const hi=findComment(raw); if(hi>=0) raw=raw.slice(0,hi);
+    }
+    if(!raw.trim()) continue;
+    // GFM pipe row (table content)
+    if(raw.trim().startsWith('|')){
+      if(!cur||cur.type!=='table'){ err(n,'pipe row outside a table block'); continue; }
+      const s=raw.trim();
+      if(!s.endsWith('|')){ err(n,'pipe row must end with |'); continue; }
+      const inner=s.slice(1,-1);
+      const segs=[]; let acc='';
+      for(let i=0;i<inner.length;i++){
+        if(inner[i]==='\\'&&inner[i+1]==='|'){ acc+='|'; i++; }
+        else if(inner[i]==='|'){ segs.push(acc); acc=''; }
+        else acc+=inner[i];
+      }
+      segs.push(acc);
+      const isSep=segs.every(x=>/^\s*:?-+:?\s*$/.test(x)) && segs.length>0;  // GFM: 1+ hyphens
+      if(isSep){
+        if(cur.sep){ err(n,'duplicate separator row'); continue; }
+        if(!cur.heads.length){ err(n,'separator row before any header row'); continue; }
+        if(segs.length!==cur.cols.length){ err(n,'separator has '+segs.length+' columns, expected '+cur.cols.length); continue; }
+        cur.sep=true;
+        cur.aligns=segs.map(x=>{ x=x.trim();
+          const l=x.startsWith(':'), r=x.endsWith(':');
+          return l&&r?'center':(r?'right':(l?'left':null)); });
+        continue;
+      }
+      // content row: raw empty segment = colspan-left (multimd "||");
+      // cell exactly ^^ = rowspan-up (multimd). The only cell escapes are
+      // \| (handled during segmentation) and \^^ (literal caret pair) —
+      // any other leading backslash is literal cell text (D10).
+      const cells=segs.map(x=>{
+        if(x.length===0) return {v:'', m:'left'};
+        const t=x.trim();
+        if(t==='^^') return {v:'', m:'up'};
+        return {v:t.startsWith('\\^^')?t.slice(1):t, m:null};
+      });
+      if(cells[0].m==='left'){ err(n,'colspan cannot start in the first column'); continue; }
+      if(cur.heads.length===0 && cells.some(c=>c.m==='up')){ err(n,'"^^" cannot appear in the first row'); continue; }
+      if(!cur.sep){
+        if(cur.heads.length && cells.length!==cur.cols.length){ err(n,'header row has '+cells.length+' cells, expected '+cur.cols.length); continue; }
+        cur.heads.push(cells);
+        if(cur.heads.length===1) cur.cols=cells.map(c=>c.v);
+      } else {
+        if(cells.length!==cur.cols.length){ err(n,'row has '+cells.length+' cells, expected '+cur.cols.length); continue; }
+        // rowspan cannot cross the thead/tbody boundary (multimd prior
+        // art): "^^" in the first data row is a line error (D9).
+        if(!cur.rows.length && cells.some(c=>c.m==='up')){ err(n,'"^^" cannot appear in the first data row (rowspan does not cross the header separator)'); continue; }
+        cur.rows.push({cells,hl:false,line:n});
+      }
+      continue;
+    }
+    // edge lines carry inline [labels] with free text — dedicated scanner,
+    // not the generic tokenizer
+    if(/^edge(\s|$)/.test(raw.trim())){
+      if(firstContent){ firstContent=false; err(n,'first line must be "figdown 0.1 [template]"'); }
+      cur=null;
+      parseEdgeLine(raw.trim(),n);
+      continue;
+    }
+    const tk=tokenize(raw.trim());
+    if(tk.error){ err(n,tk.error); continue; }
+    const lead=(tk.toks.length&&!tk.toks[0].q)?tk.toks[0].v:'';
+    const {pos,opts,unk}=splitOpts(tk.toks, lead==='signal');
+    const kw=pos[0];
+    // D3/D12/D14 (0.1-dev.11): uniform per-directive option checks —
+    // unknown keys, registered-but-inapplicable keys, invalid colors.
+    // Directives not in DIRECTIVE_OPTS (title's rest-of-line, unknown
+    // keywords) are handled by their own paths.
+    const badOpts=(k)=>{
+      const allowed=DIRECTIVE_OPTS[k];
+      if(!allowed) return false;
+      let bad=false;
+      for(const u of unk){ err(n,'unknown option "'+u+'="'); bad=true; }
+      for(const o in opts){
+        if(allowed.includes(o)) continue;
+        if(k==='group'&&o==='in') err(n,'group does not take in= — nesting is one level (node in=group) in v0.1');
+        else err(n,k+' does not take '+o+'=');
+        bad=true;
+      }
+      for(const o of ['color','stroke','text'])
+        if(opts[o]!==undefined && allowed.includes(o) && !isColor(opts[o])){
+          err(n,'unknown color "'+opts[o]+'" (#hex or CSS color name)'); bad=true; }
+      return bad;
+    };
+    if(firstContent){
+      firstContent=false;
+      if(kw==='figdown'){
+        sawHeader=true;
+        if(pos[1]!=='0.1') err(n,'unsupported version "'+(pos[1]||'')+'" (expected 0.1)');
+        if(pos[2]!==undefined){
+          const TEMPLATES=['block','topology','flowchart','bitfield','table','wave'];
+          if(!TEMPLATES.includes(pos[2])) err(n,'unknown template "'+pos[2]+'" (block|topology|flowchart|bitfield|table|wave)');
+          else{ doc.template=pos[2];
+            // template defaults (D8/R13): flowchart figures flow down —
+            // the census-dominant direction; an explicit flow line overrides
+            if(pos[2]==='flowchart') doc.flow='down'; }
+        }
+        badOpts('figdown');
+        continue;
+      } else { err(n,'first line must be "figdown 0.1 [template]"'); }
+    } else if(kw==='figdown'){ err(n,'duplicate version header'); continue; }
+    // typed-block children
+    if(cur && ['field','wrap','cell','colw','signal','gap'].includes(kw)){
+      if(badOpts(kw)) continue;
+      if(cur.type==='bitfield' && kw==='field'){
+        // Compact form (C bit-field convention): field F1:16,F2:8 SYN:1 ...
+        // — bare name:width items separated by commas and/or spaces, no
+        // per-field options. Classic form: field <name> <width> [options].
+        // Classic form: field <name> <width-in-bits|*> [optional] [color=] [note=]
+        // '*' = variable-length field: fills the remainder of the current row
+        const cname=pos[1], cw=pos[2];
+        if(cname!==undefined && (/^\d+$/.test(cw||'')&&+cw>=1 || cw==='*')){
+          const fextra=pos.slice(3).find(x=>x!=='optional');
+          if(fextra!==undefined){ err(n,'unexpected argument "'+fextra+'"'); continue; }
+          cur.fields.push({name:cname,w:cw==='*'?'*':+cw,optional:pos.includes('optional'),color:opts.color,cls:opts['class'],note:opts.note,line:n});
+          continue;
+        }
+        // Compact form (C bit-field convention): field a:1, b:2, Long Name:16
+        // Commas separate items; the name is everything before the last colon
+        // (spaces allowed, no quotes needed); no per-field options here.
+        const rest=raw.trim().replace(/^field\s+/,'');
+        if(!rest.includes(':')){ err(n,'field needs <name> <width-in-bits>, or a name:width list'); continue; }
+        const items=rest.split(',').map(s=>s.trim()).filter(Boolean);
+        let bad=null; const parsed=[];
+        for(const it of items){
+          const m=/^(.+):(\d+|\*)$/.exec(it);
+          if(!m||(m[2]!=='*'&&+m[2]<1)){ bad='bad item "'+it+'" (expected name:width)'; break; }
+          let nm=m[1].trim();
+          if(/^".*"$/.test(nm)) nm=nm.slice(1,-1);          // quotes tolerated
+          if(/:(\d+|\*)(\s|$)/.test(nm)){ bad='"'+it+'" looks like two fields — missing comma?'; break; }
+          parsed.push({name:nm,w:m[2]==='*'?'*':+m[2]});
+        }
+        if(bad){ err(n,bad); continue; }
+        for(const it of parsed) cur.fields.push({name:it.name,w:it.w,optional:false,line:n});
+      } else if(cur.type==='bitfield' && kw==='wrap'){
+        cur.fields.push({wrap:true,line:n});
+      } else if(cur.type==='table' && kw==='colw'){
+        if(cur.colw){ err(n,'duplicate colw'); continue; }
+        const vals=pos.slice(1);
+        if(!vals.length){ err(n,'colw needs one width per column (auto | <px> | <n>%)'); continue; }
+        let badw=null;
+        const parsed=vals.map(v=>{
+          if(v==='auto') return {t:'auto'};
+          let m=/^(\d+(?:\.\d+)?)px$/.exec(v)||/^(\d+(?:\.\d+)?)$/.exec(v);
+          if(m) return {t:'px',v:+m[1]};
+          m=/^(\d+(?:\.\d+)?)%$/.exec(v);
+          if(m) return {t:'pct',v:+m[1]};
+          badw='bad width "'+v+'" (auto | <px> | <n>%)'; return null;
+        });
+        if(badw){ err(n,badw); continue; }
+        cur.colw={vals:parsed,line:n};
+      } else if(cur.type==='table' && kw==='cell'){
+        // cell h<k>,<c> | <r>,<c> color=…  (h1..hN = header tiers top-down;
+        // data rows 1-based below the separator);  cell <r> highlight
+        const rc=/^(h?)(\d+)(?:,(\d+))?$/.exec(pos[1]||'');
+        const hl=pos.includes('highlight');
+        const cextra=pos.slice(2).find(x=>x!=='highlight');
+        if(cextra!==undefined){ err(n,'unexpected argument "'+cextra+'"'); continue; }
+        if(!rc||(!opts.color&&!opts['class']&&!hl)){ err(n,'cell needs [h]<row>[,<col>] with color=…/class=… or highlight'); continue; }
+        if(!rc[1]&&+rc[2]===0){ err(n,'row 0 is retired — address header tiers as h1..hN (top-down)'); continue; }
+        if(hl&&rc[3]===undefined){
+          if(rc[1]){ err(n,'highlight applies to data rows only'); continue; }
+          cur.rowmarks=cur.rowmarks||[];
+          cur.rowmarks.push({r:+rc[2],line:n});
+        } else if(rc[3]!==undefined&&(opts.color||opts['class'])){
+          cur.marks=cur.marks||[];
+          cur.marks.push({hdr:!!rc[1],r:+rc[2],c:+rc[3],color:opts.color,cls:opts['class'],line:n});
+        } else { err(n,'cell needs [h]<row>,<col> color=…/class=… or <row> highlight'); }
+      } else if(cur.type==='wave' && kw==='signal'){
+        const name=pos[1], lane=pos[2];
+        if(!name||!lane){ err(n,'signal needs <name> <lane>'); continue; }
+        if(!/^[01pnx=.\d]+$/.test(lane)){ err(n,'lane may contain only 0 1 p n x = . digits'); continue; }
+        cur.signals.push({name,lane,labels:(opts.labels||'').split(',').filter(Boolean)});
+      } else if(cur.type==='wave' && kw==='gap'){
+        const t=parseInt(pos[1],10);
+        if(!isFinite(t)||t<0){ err(n,'gap needs a tick number'); continue; }
+        cur.gaps.push(t);
+      } else { err(n,'"'+kw+'" not valid inside '+cur.type); }
+      continue;
+    }
+    cur=null; // any other keyword closes the block
+    if(badOpts(kw)) continue;
+    // R43: render zone — after `render`, only rendering directives are legal
+    if(sawRender && !RENDER_DIRECTIVES.has(kw) && kw!=='render'){
+      err(n,'"'+kw+'" is a semantic directive — it must appear before the render zone (R43)');
+      continue;
+    }
+    switch(kw){
+      case 'title': {
+        // rest-of-line: `title TCP Header` == `title "TCP Header"` (A-1)
+        let t=raw.trim().replace(/^title\s*/,'');
+        const qm=/^"([\s\S]*)"$/.exec(t);
+        if(qm){
+          // decode escapes left-to-right in one pass, exactly like the
+          // generic tokenizer: \\ consumes first, so "a\\nb" is a\nb
+          // (backslash + letter n), never a line break (D2, 0.1-dev.11).
+          // Unknown escapes were already rejected by tokenize() above.
+          const s0=qm[1]; t='';
+          for(let ii=0;ii<s0.length;ii++){
+            if(s0[ii]==='\\'){
+              const e=s0[ii+1];
+              if(e==='n'){ t+='\n'; ii++; continue; }
+              if(e==='"'){ t+='"'; ii++; continue; }
+              if(e==='\\'){ t+='\\'; ii++; continue; }
+            }
+            t+=s0[ii];
+          }
+        }
+        doc.title=t; break;
+      }
+      case 'class': {
+        // semantic class (D9): meaning + presentation defaults declared
+        // once; elements join via class=<id>; the legend strip derives
+        const id=pos[1];
+        if(!id||!ID_RE.test(id)){ err(n,'class needs an id'); break; }
+        if(classIds.has(id)){ err(n,'duplicate class "'+id+'"'); break; }
+        if(!pos[2]){ err(n,'class needs a meaning: class '+id+' "<meaning>"'); break; }
+        if(pos.length>3){ err(n,'unexpected argument "'+pos[3]+'"'); break; }
+        const cstyle=opts.style;
+        if(cstyle!==undefined && !['solid','dashed','dotted'].includes(cstyle)){ err(n,'style must be solid|dashed|dotted'); break; }
+        classIds.add(id);
+        doc.classes.push({id,label:pos[2],color:opts.color,stroke:opts.stroke,
+                          text:opts.text,style:cstyle,line:n});
+        break;
+      }
+      case 'layer': {
+        const id=pos[1];
+        if(!id||!ID_RE.test(id)){ err(n,'layer needs an id'); break; }
+        if(layerIds.has(id)){ err(n,'duplicate layer id "'+id+'"'); break; }
+        if(pos.length>3){ err(n,'unexpected argument "'+pos[3]+'"'); break; }
+        let z=doc.layers.length;
+        if(opts.z!==undefined){
+          if(!/^-?\d+$/.test(opts.z)){ err(n,'z must be a number'); break; }
+          z=parseInt(opts.z,10);
+        }
+        layerIds.add(id);
+        doc.layers.push({id,label:pos[2]||'',z});
+        break;
+      }
+      case 'node': {
+        const id=pos[1];
+        if(!id||!ID_RE.test(id)){ err(n,'node needs an id'); break; }
+        if(nodeIds.has(id)||groupIds.has(id)||boundaryIds.has(id)){ err(n,'duplicate id "'+id+'"'); break; }
+        if(opts.kind!==undefined){ err(n,'kind= has been renamed: use shape= (geometric; the label text carries the device semantics)'); break; }
+        if(opts.w!==undefined||opts.h!==undefined){ err(n,'node does not take w=/h= — use a size line'); break; }
+        const shape=opts.shape||'box';
+        if(!SHAPES.includes(shape)){ err(n,'unknown shape "'+shape+'" ('+SHAPES.join('|')+')'); break; }
+        nodeIds.add(id);
+        if(pos.length>3){ err(n,'unexpected argument "'+pos[3]+'"'); break; }
+        const nstyle=opts.style;
+        if(nstyle!==undefined && !['solid','dashed','dotted'].includes(nstyle)){ err(n,'style must be solid|dashed|dotted'); break; }
+        doc.nodes.push({id,label:pos[2]||id,shape,color:opts.color,stroke:opts.stroke,
+                        style:nstyle,text:opts.text,cls:opts['class'],
+                        group:opts['in']||null,layer:opts.layer||'base',line:n});
+        break;
+      }
+      case 'group': {
+        const id=pos[1];
+        if(!id||!ID_RE.test(id)){ err(n,'group needs an id'); break; }
+        if(nodeIds.has(id)||groupIds.has(id)||boundaryIds.has(id)){ err(n,'duplicate id "'+id+'"'); break; }
+        if(pos.length>3){ err(n,'unexpected argument "'+pos[3]+'"'); break; }
+        groupIds.add(id);
+        let ggap;
+        if(opts.gap!==undefined){
+          ggap=parseFloat(opts.gap);
+          if(!isFinite(ggap)||ggap<0){ err(n,'gap must be a non-negative number'); break; }
+        }
+        const gstyle=opts.style;
+        if(gstyle!==undefined && !['solid','dashed','dotted'].includes(gstyle)){ err(n,'style must be solid|dashed|dotted'); break; }
+        doc.groups.push({id,label:pos[2]||id,color:opts.color,stroke:opts.stroke,
+                         text:opts.text,style:gstyle,gap:ggap,cls:opts['class'],
+                         layer:opts.layer||null,line:n});
+        break;
+      }
+      case 'boundary': {
+        // external I/O endpoint (R44): "the outside world", not a
+        // participant node. Referenced by edges like a node, pinnable for
+        // layout, NEVER drawn as a shape — the edge simply ends open at an
+        // invisible anchor, optionally with the small label beyond the end.
+        // Shares the node/group id namespace; takes no options.
+        const id=pos[1];
+        if(!id||!ID_RE.test(id)){ err(n,'boundary needs an id'); break; }
+        if(nodeIds.has(id)||groupIds.has(id)||boundaryIds.has(id)){ err(n,'duplicate id "'+id+'"'); break; }
+        if(pos.length>3){ err(n,'unexpected argument "'+pos[3]+'"'); break; }
+        boundaryIds.add(id);
+        doc.boundaries.push({id,label:pos[2]||undefined,line:n});
+        break;
+      }
+      case 'flow': {
+        if(!['right','down','left','up'].includes(pos[1])){ err(n,'flow needs right|down|left|up'); break; }
+        if(pos.length>2){ err(n,'unexpected argument "'+pos[2]+'"'); break; }
+        doc.flow=pos[1]; break;
+      }
+      case 'rank': {
+        const ids=pos.slice(1);
+        if(ids.length<2){ err(n,'rank needs two or more node ids'); break; }
+        doc.ranks.push({ids,line:n}); break;
+      }
+      case 'bundle': {
+        // semantic link bundle (LAG / Ethernet Segment): the renderer draws
+        // the dashed ellipse around the member links automatically
+        const id=pos[1];
+        if(!id||!ID_RE.test(id)){ err(n,'bundle needs an id'); break; }
+        if(bundleIds.has(id)){ err(n,'duplicate bundle id "'+id+'"'); break; }
+        let rest=pos.slice(2), tlabel=id;
+        if(tk.toks[2]&&tk.toks[2].q){ tlabel=pos[2]; rest=pos.slice(3); }
+        const pairs=[]; let badp=null;
+        for(const t of rest){
+          const m=/^([A-Za-z_][A-Za-z0-9_-]*)--([A-Za-z_][A-Za-z0-9_-]*),?$/.exec(t);
+          if(!m){ badp='bad member "'+t+'" (expected A--B)'; break; }
+          pairs.push([m[1],m[2]]);
+        }
+        if(badp){ err(n,badp); break; }
+        if(!pairs.length){ err(n,'bundle needs at least one member link A--B'); break; }
+        bundleIds.add(id);
+        doc.trunks.push({id,label:tlabel,pairs,color:opts.color,line:n});
+        break;
+      }
+      case 'line': {
+        // generic horizontal guide/threshold line across a group's box:
+        // line "<label>" in=<group> at=<0..100>% [color=] [fill=below|above]
+        const glabel=(tk.toks[1]&&tk.toks[1].q)?pos[1]:null;
+        if(glabel===null){ err(n,'line needs a quoted "<label>" first'); break; }
+        if(!opts['in']){ err(n,'line needs in=<group-id>'); break; }
+        const m=/^(\d+(?:\.\d+)?)%$/.exec(opts.at||'');   // % is mandatory (D8)
+        if(!m||+m[1]<0||+m[1]>100){ err(n,'line needs at=<0..100>% (with the % sign)'); break; }
+        if(opts.fill!==undefined){ err(n,'line is a pure marker — use the fill directive for zones'); break; }
+        doc.glines.push({label:glabel,group:opts['in'],pct:+m[1],color:opts.color,line:n});
+        break;
+      }
+      case 'plot': {
+        // chart family: plot <table-id> [kind=bars3d] [level=<value>]
+        // rows -> X, columns -> Y, numeric cells -> Z (the table IS the data)
+        const tid=pos[1];
+        if(!tid||!ID_RE.test(tid)){ err(n,'plot needs a table id'); break; }
+        if(pos.length>2){ err(n,'unexpected argument "'+pos[2]+'"'); break; }
+        const pkind=opts.kind||'bars3d';
+        if(pkind!=='bars3d'){ err(n,'unknown plot kind "'+pkind+'" (bars3d)'); break; }
+        let plevel=null;
+        if(opts.level!==undefined){
+          plevel=parseFloat(opts.level);
+          if(!isFinite(plevel)||plevel<0){ err(n,'level must be a non-negative number'); break; }
+        }
+        doc.blocks.push({type:'plot',id:'plot_'+doc.blocks.length,tid,kind:pkind,level:plevel,line:n});
+        break;
+      }
+      case 'fill': {
+        // zone band: fill <pct>% | <a>-<b>%  in=<node|group> [dir=] [color=]
+        // "fill 15%" = 0..15; "fill 15-35%" = the range in one token
+        if(opts.from!==undefined||opts.to!==undefined){ err(n,'from=/to= retired — write the range positionally: fill 15% or fill 15-35%'); break; }
+        if(!opts['in']){ err(n,'fill needs in=<node-or-group-id>'); break; }
+        const m=/^(\d+(?:\.\d+)?)%?(?:-(\d+(?:\.\d+)?)%?)?$/.exec(pos[1]||'');
+        if(!m){ err(n,'fill needs a range: <pct>% or <a>-<b>%'); break; }
+        const from=m[2]!==undefined?+m[1]:0;
+        const to=m[2]!==undefined?+m[2]:+m[1];
+        if(from<0||to>100||from>=to){ err(n,'fill range needs 0 <= from < to <= 100'); break; }
+        const fdir=opts.dir||'up';
+        if(!['up','down','left','right'].includes(fdir)){ err(n,'dir must be up|down|left|right'); break; }
+        doc.fills.push({target:opts['in'],from,to,dir:fdir,color:opts.color||'#e5e7eb',line:n});
+        break;
+      }
+      case 'pin': {
+        const id=pos[1], at=opts.at;
+        if(pos.length>2){ err(n,'unexpected argument "'+pos[2]+'"'); break; }
+        const m=at&&/^(-?[\d.]+),(-?[\d.]+)$/.exec(at);
+        if(!id||!m){ err(n,'pin needs <id> at=<x>,<y>'); break; }
+        doc.pins[id]={fx:parseFloat(m[1]),fy:parseFloat(m[2]),line:n};
+        break;
+      }
+      case 'size': {
+        const id=pos[1];
+        if(pos.length>2){ err(n,'unexpected argument "'+pos[2]+'"'); break; }
+        if(!id||(!opts.w&&!opts.h)){ err(n,'size needs <id> w=<px> and/or h=<px>'); break; }
+        let badsz=false;
+        const dim=(k)=>{                       // px only (D7/D13)
+          const v=opts[k]; if(v===undefined||v==='') return null;
+          if(/%$/.test(v)){ err(n,'percentage sizes are not in v0.1 — use px'); badsz=true; return null; }
+          const f=parseFloat(v);
+          if(!isFinite(f)){ err(n,k+' must be a number'); badsz=true; return null; }
+          return f;
+        };
+        const w=dim('w'), h=dim('h');
+        if(badsz) break;
+        doc.sizes[id]={w,h,line:n};
+        break;
+      }
+      case 'routing': {
+        // document-level presentation directive (0.1-dev.13): how straight
+        // scene edges are drawn. straight (default) = today's direct lines;
+        // orthogonal = deterministic manhattan elbows. Rendering parameter
+        // only — no semantics; belongs in the trailing layout section.
+        if(!['orthogonal','straight'].includes(pos[1]||'')){ err(n,'routing needs orthogonal|straight'); break; }
+        if(pos.length>2){ err(n,'unexpected argument "'+pos[2]+'"'); break; }
+        doc.routing=pos[1]; break;
+      }
+      case 'route': {
+        // per-edge declared waypoints (0.1-dev.13): route <a> <op> <b>
+        // via=x,y;x,y;… [routing=orthogonal|straight]. References ONE
+        // existing edge exactly as written (a, operator, b — endpoint
+        // order matters, unlike bundle members); waypoints are rigid
+        // canvas px, the same space as ungrouped pin. Layout section only.
+        const a=pos[1], op=pos[2], b=pos[3];
+        if(!a||!ID_RE.test(a)||!['->','<-','--','<->'].includes(op||'')||!b||!ID_RE.test(b)){
+          err(n,'route needs <a> ->|<-|--|<-> <b> via=x,y;x,y;…'); break; }
+        if(pos.length>4){ err(n,'unexpected argument "'+pos[4]+'"'); break; }
+        if(opts.via===undefined){ err(n,'route needs via=x,y;x,y;… (canvas px waypoints)'); break; }
+        const pairs=[]; let badv=null;
+        for(const t of String(opts.via).split(';')){
+          const m=/^(-?[\d.]+),(-?[\d.]+)$/.exec(t.trim());
+          const px=m&&parseFloat(m[1]), py=m&&parseFloat(m[2]);
+          if(!m||!isFinite(px)||!isFinite(py)){ badv='bad via point "'+t.trim()+'" (expected x,y)'; break; }
+          pairs.push([px,py]);
+        }
+        if(badv){ err(n,badv); break; }
+        if(opts.routing!==undefined && !['orthogonal','straight'].includes(opts.routing)){
+          err(n,'routing must be orthogonal|straight'); break; }
+        doc.routes.push({a,op,b,via:pairs,routing:opts.routing,line:n});
+        break;
+      }
+      case 'render': {
+        if(sawRender){ err(n,'duplicate render line'); break; }
+        if(pos.length>1){ err(n,'render takes no arguments'); break; }
+        sawRender=true; break;
+      }
+      case 'bitfield': {
+        const id=pos[1];
+        if(!id||!ID_RE.test(id)){ err(n,'bitfield needs an id'); break; }
+        if(pos.length>3){ err(n,'unexpected argument "'+pos[3]+'"'); break; }
+        cur={type:'bitfield',id,label:pos[2]||id,unit:opts.unit?parseInt(opts.unit,10):32,
+             numbering:opts.numbering||'lsb0',fields:[],line:n};
+        if(!isFinite(cur.unit)||cur.unit<1){ err(n,'bad unit'); cur.unit=32; }
+        if(!['lsb0','msb0'].includes(cur.numbering)) err(n,'numbering must be lsb0 or msb0');
+        doc.blocks.push(cur); break;
+      }
+      case 'table': {
+        const id=pos[1];
+        if(!id||!ID_RE.test(id)){ err(n,'table needs an id'); break; }
+        if(pos.length>3){ err(n,'unexpected argument "'+pos[3]+'"'); break; }
+        cur={type:'table',id,label:pos[2]||id,cols:[],heads:[],rows:[],line:n};
+        doc.blocks.push(cur); break;
+      }
+      case 'wave': {
+        const id=pos[1];
+        if(!id||!ID_RE.test(id)){ err(n,'wave needs an id'); break; }
+        if(pos.length>3){ err(n,'unexpected argument "'+pos[3]+'"'); break; }
+        cur={type:'wave',id,label:pos[2]||id,signals:[],gaps:[],line:n};
+        doc.blocks.push(cur); break;
+      }
+      case 'page': case 'step': case 'set': case 'pulse':
+        err(n,'"'+kw+'" is reserved for the dynamic profile (not in v0.1)'); break;
+      case 'field': case 'wrap': case 'cell': case 'colw': case 'signal': case 'gap':
+        err(n,'"'+kw+'" is a typed-block child — it needs a bitfield/table/wave block above it'); break;
+      default:
+        err(n,'unrecognized line (unknown keyword "'+kw+'")');
+    }
+  }
+  if(!sawHeader && text.trim()) { /* already reported on first content line */ }
+  // semantic checks
+  for(const nd of doc.nodes){
+    if(nd.group && !groupIds.has(nd.group)) errs.push('Line '+nd.line+': unknown group "'+nd.group+'"');
+    if(nd.layer && !layerIds.has(nd.layer)) errs.push('Line '+nd.line+': unknown layer "'+nd.layer+'"');
+  }
+  for(const g of doc.groups){
+    if(g.layer && !layerIds.has(g.layer)) errs.push('Line '+g.line+': unknown layer "'+g.layer+'"');
+  }
+  for(const e of doc.edges){
+    if(!nodeIds.has(e.a)&&!groupIds.has(e.a)&&!boundaryIds.has(e.a)) errs.push('Line '+e.line+': unknown endpoint "'+e.a+'"');
+    else if(groupIds.has(e.a)) errs.push('Line '+e.line+': edge endpoint "'+e.a+'" is a group — connect to a member node (group edges are not in v0.1)');
+    if(!nodeIds.has(e.b)&&!groupIds.has(e.b)&&!boundaryIds.has(e.b)) errs.push('Line '+e.line+': unknown endpoint "'+e.b+'"');
+    else if(groupIds.has(e.b)) errs.push('Line '+e.line+': edge endpoint "'+e.b+'" is a group — connect to a member node (group edges are not in v0.1)');
+    if(e.layer && !layerIds.has(e.layer)) errs.push('Line '+e.line+': unknown layer "'+e.layer+'"');
+  }
+  for(const r of doc.ranks) for(const id of r.ids)
+    if(!nodeIds.has(id)) errs.push('Line '+r.line+': unknown node "'+id+'" in rank');
+  for(const gl of doc.glines)
+    if(!groupIds.has(gl.group)) errs.push('Line '+gl.line+': unknown group "'+gl.group+'" for line');
+  for(const f of doc.fills)
+    if(!groupIds.has(f.target)&&!nodeIds.has(f.target))
+      errs.push('Line '+f.line+': unknown target "'+f.target+'" for fill');
+  for(const t of doc.trunks) for(const [a,b] of t.pairs){
+    if((!nodeIds.has(a)&&!boundaryIds.has(a))||(!nodeIds.has(b)&&!boundaryIds.has(b))){ errs.push('Line '+t.line+': unknown endpoint in "'+a+'--'+b+'"'); continue; }
+    const matches=doc.edges.filter(e=>(e.a===a&&e.b===b)||(e.a===b&&e.b===a)).length;
+    if(matches===0)
+      errs.push('Line '+t.line+': no edge between "'+a+'" and "'+b+'" for bundle member');
+    else if(matches>1)
+      errs.push('Line '+t.line+': "'+a+'--'+b+'" is ambiguous ('+matches+' parallel edges); parallel edges are out of scope for v0.1');
+  }
+  { // route lines reference ONE existing edge exactly as written (a-op-b;
+    // endpoint order matters — unlike bundle members); parallel edges are
+    // ambiguous; one route per edge (closed grammar, 0.1-dev.13)
+    const seenRt=new Set();
+    for(const r of doc.routes){
+      const ref=r.a+' '+r.op+' '+r.b;
+      const matches=doc.edges.filter(e=>e.a===r.a&&e.op===r.op&&e.b===r.b);
+      if(!matches.length){ errs.push('Line '+r.line+': no edge "'+ref+'" for route (must match the edge as written)'); continue; }
+      if(matches.length>1){ errs.push('Line '+r.line+': "'+ref+'" is ambiguous ('+matches.length+' parallel edges); parallel edges are out of scope for v0.1'); continue; }
+      if(seenRt.has(ref)){ errs.push('Line '+r.line+': duplicate route for "'+ref+'"'); continue; }
+      seenRt.add(ref);
+      matches[0].route=r;      // renderer convenience; the model keeps doc.routes
+    }
+  }
+  for(const id in doc.pins) if(!nodeIds.has(id)&&!groupIds.has(id)&&!boundaryIds.has(id))
+    errs.push('Line '+doc.pins[id].line+': pin of unknown id "'+id+'"');
+  { // class references must resolve (closed grammar)
+    const chk=(cls,line)=>{ if(cls!==undefined && !classIds.has(cls))
+      errs.push('Line '+line+': unknown class "'+cls+'"'); };
+    for(const x of doc.nodes) chk(x.cls,x.line);
+    for(const x of doc.groups) chk(x.cls,x.line);
+    for(const x of doc.edges) chk(x.cls,x.line);
+    for(const b of doc.blocks){
+      if(b.fields) for(const f of b.fields) chk(f.cls,f.line);
+      if(b.marks)  for(const mk of b.marks) chk(mk.cls,mk.line);
+    }
+  }
+  for(const id in doc.sizes) if(!nodeIds.has(id)&&!groupIds.has(id))
+    errs.push('Line '+doc.sizes[id].line+': size of unknown id "'+id+'"');
+  for(const b of doc.blocks){
+    if(b.type==='table'&&!b.heads.length) errs.push('Line '+b.line+': table has no header row');
+    if(b.type==='table'&&b.heads.length&&!b.sep) errs.push('Line '+b.line+': table has no |---| separator row');
+    if(b.type==='bitfield'&&!b.fields.some(f=>!f.wrap)) errs.push('Line '+b.line+': bitfield has no fields');
+    if(b.type==='wave'&&!b.signals.length) errs.push('Line '+b.line+': wave has no signals');
+    if(b.type==='plot'){
+      const t=doc.blocks.find(x=>x.type==='table'&&x.id===b.tid);
+      if(!t) errs.push('Line '+b.line+': plot references unknown table "'+b.tid+'"');
+      else{
+        for(const r of t.rows) for(let c=1;c<r.cells.length;c++)
+          if(!r.cells[c].m && !/^-?\d+(?:\.\d+)?$/.test(r.cells[c].v))
+            { errs.push('Line '+b.line+': plot data must be numeric (row value "'+r.cells[c].v+'")'); break; }
+      }
+    }
+    if(b.type==='table'&&b.colw&&b.colw.vals.length!==b.cols.length)
+      errs.push('Line '+b.colw.line+': colw has '+b.colw.vals.length+' widths, expected '+b.cols.length);
+    if(b.type==='table'&&b.marks) for(const mk of b.marks){
+      const H=b.heads.length;
+      const inRange = mk.hdr ? (mk.r>=1&&mk.r<=H) : (mk.r>=1&&mk.r<=b.rows.length);
+      if(!inRange||mk.c<1||mk.c>b.cols.length){
+        errs.push('Line '+mk.line+': cell '+(mk.hdr?'h':'')+mk.r+','+mk.c+' out of range'); continue;
+      }
+      // merged-away targets must be rejected: annotations target the anchor
+      const cells = mk.hdr ? b.heads[mk.r-1] : b.rows[mk.r-1].cells;
+      if(cells[mk.c-1].m)
+        errs.push('Line '+mk.line+': cell '+(mk.hdr?'h':'')+mk.r+','+mk.c+' is merged away — annotate the anchor cell');
+    }
+    if(b.type==='table'&&b.rowmarks) for(const mk of b.rowmarks){
+      if(mk.r<1||mk.r>b.rows.length)
+        errs.push('Line '+mk.line+': row '+mk.r+' out of range');
+    }
+  }
+  return {doc,errs};
+}
+function findComment(s){
+  // '#' starts a comment only at line start or after whitespace,
+  // so hex colors like color=#0d9488 survive.
+  let inq=false;
+  for(let i=0;i<s.length;i++){
+    if(s[i]==='"') inq=!inq;
+    else if(s[i]==='#'&&!inq&&(i===0||/\s/.test(s[i-1]))) return i;
+  }
+  return -1;
+}
+// ============================================================
+// 2. LAYOUT + RENDER (deterministic; no randomness, no Date)
+// ============================================================
+const FONT=13, CH=7.2, PADX=14, NH=36, GAPX=56, GAPY=44;
+function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
+function tw(s){
+  const longest=Math.max(...String(s).split('\n').map(l=>l.length));
+  return Math.max(30,longest*CH+2*PADX);
+}
+// ---- shape geometry (one source of truth for size and for clipping) ----
+// A node owns a bounding box (n.x,n.y,n.w,n.h), but only the rectangle
+// shapes fill it. shapeAxes() reports the shape as it is actually DRAWN:
+// half-extents (a,b) about the box centre and the exponent p of the curve
+// through them,
+//     (|dx|/a)^p + (|dy|/b)^p = 1        p=1 rhombus, 2 ellipse, Inf rectangle
+// with (ox,oy) = how far that outline is drawn OUTSIDE the box (cloud only),
+// so the box can be recovered from the axes. Node sizing (how large must the
+// box be for the label to sit inside the outline) and borderPoint() (where
+// does a ray from the centre leave the outline) both read this, so the two
+// can never disagree about where a shape ends. Keep it in step with the
+// shape drawing in renderScene.
+function shapeAxes(n){
+  const s=n.shape;
+  if(s==='diamond') return {a:n.w/2,   b:n.h/2,   p:1,        ox:0, oy:0};
+  if(s==='cloud')   return {a:n.w/2+10,b:n.h/2+8, p:2,        ox:10,oy:8};
+  if(s==='circle')  return {a:n.w/2,   b:n.w/2,   p:2,        ox:0, oy:0};  // rx=ry=w/2
+  if(s==='ellipse') return {a:n.w/2,   b:n.h/2,   p:2,        ox:0, oy:0};
+  return              {a:n.w/2,   b:n.h/2,   p:Infinity, ox:0, oy:0};  // box, rounded, cylinder
+}
+// outlineNorm: <1 inside the outline, =1 on it, >1 outside. Homogeneous in
+// (dx,dy) — scaling the offset scales the norm — which is what lets the same
+// number serve as "how far out is this point" and "by how much must the shape
+// grow to swallow it".
+function outlineNorm(g,dx,dy){
+  const u=Math.abs(dx)/(g.a||1e-9), v=Math.abs(dy)/(g.b||1e-9);
+  return g.p===1?u+v:(g.p===2?Math.hypot(u,v):Math.max(u,v));
+}
+// outSide: the coordinate an orthogonal run has to reach to touch the DRAWN
+// outline on one side ('l','r','t','b') — what a channel route needs when it
+// arrives square-on instead of along a ray. Every shape but `cloud` is drawn
+// inside its box, so this returns the box edge unchanged, bit for bit.
+function outSide(n,k){
+  const g=shapeAxes(n);
+  return k==='l'?n.x-g.ox : k==='r'?n.x+n.w+g.ox : k==='t'?n.y-g.oy : n.y+n.h+g.oy;
+}
+// simplifyPts: Douglas–Peucker simplification in place. The waypoint chain
+// emits an entry+exit port per crossed rank; home-anchoring keeps those ports
+// in a narrow corridor, so what remains is a nearly-straight run carrying tens
+// of cosmetic ±few-px jogs. DP collapses that corridor to the handful of
+// genuine bends a dummy-vertex chain should have, keeping every retained point
+// exactly where it was (endpoints are always kept). Presentation-only.
+function simplifyPts(pts,eps){
+  eps=eps||3;
+  if(pts.length<3) return pts;
+  const keep=new Array(pts.length).fill(false);
+  keep[0]=keep[pts.length-1]=true;
+  const stack=[[0,pts.length-1]];
+  while(stack.length){
+    const [lo,hi]=stack.pop();
+    if(hi<=lo+1) continue;
+    const a=pts[lo], b=pts[hi];
+    const dx=b[0]-a[0], dy=b[1]-a[1], L=Math.hypot(dx,dy);
+    let far=-1, fd=eps;
+    for(let i=lo+1;i<hi;i++){
+      const p=pts[i];
+      const d=L<1e-9?Math.hypot(p[0]-a[0],p[1]-a[1])
+                    :Math.abs((p[0]-a[0])*dy-(p[1]-a[1])*dx)/L;
+      if(d>fd){ fd=d; far=i; }
+    }
+    if(far>=0){ keep[far]=true; stack.push([lo,far],[far,hi]); }
+  }
+  let w=0;
+  for(let i=0;i<pts.length;i++) if(keep[i]) pts[w++]=pts[i];
+  pts.length=w;
+  return pts;
+}
+// roundPath: build an SVG path `d` for a polyline whose INTERIOR bends are
+// softened into circular-arc fillets — the standard technical-diagram look.
+// The point list is NOT modified: only the drawn path curves. At each interior
+// vertex the two adjacent segments are shortened by r and rejoined with a
+// quadratic (Q corner …), which for equal trims traces a circular arc tangent
+// to both legs — one primitive used everywhere, so the output is deterministic.
+// r = min(10, 40% of the shorter adjacent segment) keeps short jogs from
+// over-rounding or inverting. Near-collinear bends (turn < ~10°, i.e. interior
+// angle > ~170°) keep a hard corner. First/last points are never filleted, so
+// arrowhead geometry and endpoint contact are untouched.
+const FILLET_R=10;
+function roundPath(pts){
+  if(pts.length<3) return 'M'+pts.map(p=>p.join(' ')).join(' L');
+  const f=n=>{ const s=(+n).toFixed(3); return s.replace(/\.?0+$/,''); };
+  let d='M'+f(pts[0][0])+' '+f(pts[0][1]);
+  for(let i=1;i+1<pts.length;i++){
+    const a=pts[i-1], c=pts[i], b=pts[i+1];
+    const v1x=a[0]-c[0], v1y=a[1]-c[1], L1=Math.hypot(v1x,v1y);
+    const v2x=b[0]-c[0], v2y=b[1]-c[1], L2=Math.hypot(v2x,v2y);
+    if(L1<1e-6||L2<1e-6){ d+=' L'+f(c[0])+' '+f(c[1]); continue; }
+    // turn angle: cos of the angle between the two legs at c. Near-collinear
+    // (legs nearly opposite → dot≈ -1 → angle between legs ≈180°, tiny turn)
+    // keeps a hard corner.
+    const dot=(v1x*v2x+v1y*v2y)/(L1*L2);
+    if(dot<-0.985){ d+=' L'+f(c[0])+' '+f(c[1]); continue; } // turn < ~10°
+    const r=Math.min(FILLET_R, 0.4*Math.min(L1,L2));
+    if(r<0.5){ d+=' L'+f(c[0])+' '+f(c[1]); continue; }
+    const p1x=c[0]+v1x/L1*r, p1y=c[1]+v1y/L1*r; // trim point toward a
+    const p2x=c[0]+v2x/L2*r, p2y=c[1]+v2y/L2*r; // trim point toward b
+    d+=' L'+f(p1x)+' '+f(p1y)+' Q'+f(c[0])+' '+f(c[1])+' '+f(p2x)+' '+f(p2y);
+  }
+  const e=pts[pts.length-1];
+  d+=' L'+f(e[0])+' '+f(e[1]);
+  return d;
+}
+// inscribedHalfW: the half-width the outline still offers at height |dy|=v —
+// the room a label line really has (a rectangle offers its full half-width).
+function inscribedHalfW(g,v){
+  const t=Math.min(1,Math.abs(v)/(g.b||1e-9));
+  return g.p===1?g.a*(1-t):(g.p===2?g.a*Math.sqrt(1-t*t):g.a);
+}
+// labelBox: the label's own text box (glyph extents) plus a small clearance
+// so glyphs never graze the stroke — this is what must end up INSIDE.
+// (line height 1.3*FONT as in textEl; 1.2*FONT covers one line's ink box)
+const LBLPADX=6, LBLPADY=4;
+function labelBox(label){
+  const ls=String(label).split('\n');
+  return [Math.max(...ls.map(l=>l.length))*CH+2*LBLPADX,
+          ((ls.length-1)*1.3+1.2)*FONT+2*LBLPADY];
+}
+// fitOutline: grow the box by the smallest factor that pulls an iw x ih box,
+// centred on the node, inside the outline. The norm at the text box's corner
+// IS that factor (homogeneity), so one evaluation answers both "does it fit"
+// and "by how much". Rectangles are their own outline and tw()/NH already pad
+// the text, so k<=1 there and the box never moves.
+function fitOutline(n,box){
+  const g=shapeAxes(n), k=outlineNorm(g,box[0]/2,box[1]/2);
+  if(k<=1) return;
+  n.w=Math.max(n.w,2*(k*g.a-g.ox));
+  n.h=Math.max(n.h,2*(k*g.b-g.oy));
+  if(n.shape==='circle') n.w=n.h=Math.max(n.w,n.h);   // rx=ry=w/2: box stays square
+}
+// multi-line <text>: "\n" in labels becomes centered tspans
+function textEl(x,y,fs,anchor,fill,content,extraAttrs){
+  // halo text = two layers (white under-stroke + plain top copy) so the
+  // halo survives SVG renderers without paint-order support
+  if(extraAttrs && extraAttrs.indexOf('paint-order')>=0){
+    const rest=extraAttrs.replace(' paint-order="stroke" stroke="#fff" stroke-width="3"','');
+    return textEl(x,y,fs,anchor,'#fff',content,rest+' stroke="#fff" stroke-width="3" stroke-linejoin="round"')
+         + textEl(x,y,fs,anchor,fill,content,rest);
+  }
+  const lines=String(content).split('\n');
+  const attrs='font-size="'+fs+'" text-anchor="'+anchor+'" fill="'+fill+'"'+(extraAttrs||'');
+  if(lines.length===1)
+    return '<text x="'+x+'" y="'+y+'" '+attrs+'>'+esc(content)+'</text>';
+  const lh=fs*1.3, y0=y-(lines.length-1)*lh/2;
+  return '<text x="'+x+'" y="'+y0+'" '+attrs+'>'+
+    lines.map((l,i)=>'<tspan x="'+x+'" dy="'+(i?lh:0)+'">'+esc(l)+'</tspan>').join('')+'</text>';
+}
+function render(doc,ropts){
+  // presentation options (renderer tier, not language): {title:true}
+  // draws the title. Default is NOT drawn (R13: embedded figures almost
+  // always sit under a caption in the host document; the title text
+  // stays semantic in the source either way).
+  const RO=ropts||{};
+  // resolve class defaults (explicit element attributes win — rigidity, R8)
+  const C={}; for(const c of doc.classes||[]) C[c.id]=c;
+  const rs=(x,k)=>{ if(x[k]===undefined && x.cls && C[x.cls] && C[x.cls][k]!==undefined) x[k]=C[x.cls][k]; };
+  for(const n of doc.nodes){ rs(n,'color'); rs(n,'stroke'); rs(n,'text'); rs(n,'style'); if(n.style===undefined) n.style='solid'; }
+  for(const g of doc.groups){ rs(g,'color'); rs(g,'stroke'); rs(g,'text'); rs(g,'style'); }
+  for(const e of doc.edges){ rs(e,'color'); rs(e,'style'); if(e.style===undefined) e.style='solid'; }
+  for(const b of doc.blocks){
+    if(b.fields) for(const f of b.fields) rs(f,'color');
+    if(b.marks)  for(const mk of b.marks) rs(mk,'color');
+  }
+  const parts=[]; let y=0, maxW=0;
+  if(doc.title && RO.title===true){ parts.push('<text x="0" y="16" font-size="15" font-weight="600">'+esc(doc.title)+'</text>'); y=30;
+    maxW=Math.max(maxW, doc.title.length*8.6); }  // canvas must fit the title
+  let sceneMeta=null;
+  if(doc.nodes.length||doc.edges.length||(doc.boundaries||[]).length){
+    const s=renderScene(doc,y); parts.push(s.svg); y=s.y; maxW=Math.max(maxW,s.w);
+    sceneMeta=s.meta;
+  }
+  for(const b of doc.blocks){
+    let s;
+    if(b.type==='bitfield') s=renderBitfield(b,y);
+    else if(b.type==='table') s=renderTable(b,y);
+    else if(b.type==='plot') s=renderPlot(b,y,doc);
+    else s=renderWave(b,y);
+    parts.push(s.svg); y=s.y+24; maxW=Math.max(maxW,s.w);
+  }
+  if((doc.classes||[]).length){
+    // derived legend strip (D9): declaration order, swatch + meaning
+    const es=[]; let lx=0, ly=y+8; const rowH=20, wrapW=Math.max(maxW,420);
+    for(const c of doc.classes){
+      const tw=String(c.label).length*6.6+30;
+      if(lx>0 && lx+tw>wrapW){ lx=0; ly+=rowH; }
+      const dash=c.style==='dashed'?' stroke-dasharray="6 4"':(c.style==='dotted'?' stroke-dasharray="2 4"':'');
+      es.push('<rect x="'+lx+'" y="'+(ly+3)+'" width="16" height="11" fill="'+(c.color||'#fff')+'" stroke="'+(c.stroke||'#555')+'"'+dash+'/>');
+      es.push('<text x="'+(lx+21)+'" y="'+(ly+12.5)+'" font-size="11" fill="#1d1d1b">'+esc(c.label)+'</text>');
+      lx+=tw+14; maxW=Math.max(maxW,lx);
+    }
+    parts.push(es.join(''));
+    y=ly+rowH;
+  }
+  const PADL=18, PADT=6;
+  const W=Math.ceil(maxW)+PADL+8, H=Math.ceil(y)+PADT+4;
+  return {svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 '+W+' '+H+'" width="'+W+'" height="'+H+'" font-family="system-ui,sans-serif">'
+    +'<defs><marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">'
+    +'<path d="M0,0 L10,5 L0,10 z" fill="#555"/></marker>'
+    +'<pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">'
+    +'<line x1="0" y1="0" x2="0" y2="6" stroke="#bbb" stroke-width="2"/></pattern></defs>'
+    +'<g transform="translate('+PADL+','+PADT+')">'+parts.join('')+'</g></svg>', w:W, h:H,
+    sceneMeta:sceneMeta, pad:{x:PADL,y:PADT}};
+}
+// ---- scene ----
+function renderScene(doc,y0){
+  const nodes=doc.nodes.map(n=>({...n}));
+  // boundary anchors (R44): external I/O endpoints join the layout as
+  // small invisible ~12x12 extents so externals land at natural margins;
+  // they are never drawn as shapes (the edge ends open at the anchor).
+  for(const b of doc.boundaries||[])
+    nodes.push({id:b.id,label:b.label||'',boundary:true,layer:'base',group:null,line:b.line});
+  const byId={}; nodes.forEach(n=>byId[n.id]=n);
+  // sizes
+  for(const n of nodes){
+    if(n.boundary){ n.w=n.h=12; continue; }
+    const nLines=String(n.label).split('\n').length;
+    n.w=tw(n.label); n.h=NH+(nLines-1)*16;
+    const s=doc.sizes[n.id]; if(s){ if(s.w)n.w=s.w; if(s.h)n.h=s.h; n.rigid=true; }
+    if(n.shape==='diamond'){ n.w=Math.max(n.w+20,70); n.h=Math.max(n.h,48); }
+    if(n.shape==='circle'){ n.w=n.h=Math.max(n.w,n.h); }
+    // The box is what the layout reserves; the OUTLINE is what the reader
+    // sees, and for every shape but the rectangles the two differ — a box
+    // sized as if it were a rectangle lets the label cross the drawn outline
+    // (a rhombus offers only its inscribed rectangle, ~half the box in each
+    // direction). Grow the box until the label's text box is inside the
+    // outline. An explicit `size` is the author's word: a rigid node keeps
+    // its box and the label shrinks to the inscribed width instead (R10).
+    if(!n.rigid) fitOutline(n,labelBox(n.label));
+  }
+  // ranks: DFS from document-order sources classifies back-edges; a
+  // longest-path layering runs on the remaining DAG so sources sit at
+  // layer 0. `rank a b c` merges its nodes into ONE vertex for the
+  // layering (same layer) without dragging unrelated branches along.
+  const pinned=id=>doc.pins[id]!==undefined;
+  nodes.forEach((n,i)=>n.di=i);            // document order (sort tiebreak)
+  const rep={}; nodes.forEach(n=>rep[n.id]=n.id);   // rank-group union-find
+  const find=u=>{ while(rep[u]!==u) u=rep[u]=rep[rep[u]]; return u; };
+  for(const r of doc.ranks){
+    const ids=r.ids.filter(id=>byId[id]);
+    for(let i=1;i<ids.length;i++){ const a=find(ids[0]),b=find(ids[i]); if(a!==b) rep[b]=a; }
+  }
+  const adj={}; nodes.forEach(n=>{ adj[find(n.id)]=adj[find(n.id)]||[]; });
+  const isBack=new Set();                  // edges that close a cycle
+  for(const e of doc.edges){
+    // undirected/bidirectional edges still order ranks by document direction
+    if(!byId[e.a]||!byId[e.b]) continue;
+    if(e.a===e.b){ isBack.add(e); continue; }        // self-loop
+    const u=find(e.a), v=find(e.b);
+    if(u!==v) adj[u].push({v,e});
+  }
+  const state={};
+  const classify=u=>{
+    state[u]=1;
+    for(const {v,e} of adj[u]){
+      if(state[v]===1) isBack.add(e);      // gray hit = back-edge
+      else if(!state[v]) classify(v);
+    }
+    state[u]=2;
+  };
+  for(const n of nodes){ const u=find(n.id); if(!state[u]) classify(u); }
+  const radj={}; nodes.forEach(n=>{ radj[find(n.id)]=radj[find(n.id)]||[]; });
+  for(const e of doc.edges){
+    if(!byId[e.a]||!byId[e.b]||isBack.has(e)) continue;
+    const u=find(e.a), v=find(e.b); if(u!==v) radj[v].push(u);
+  }
+  const rk={};
+  const rankOf=u=>{
+    if(rk[u]!==undefined) return rk[u];
+    rk[u]=0;                               // DAG: placeholder is never read
+    let r=0; for(const p of radj[u]) r=Math.max(r, rankOf(p)+1);
+    return rk[u]=r;
+  };
+  nodes.forEach(n=>n.rank=rankOf(find(n.id)));
+  // positions: children spread around their parents' lane (barycenter
+  // sweeps down/up/down). Edges that span multiple layers get invisible
+  // waypoint slots so they no longer cut through intermediate nodes.
+  // ALL nodes participate in auto layout (pinned ones hold their slot so
+  // that pinning X never reflows Y); pins override coordinates afterwards.
+  const horiz=(doc.flow==='right'||doc.flow==='left');
+  const lblPx=s=>Math.max(...String(s).split('\n').map(l=>l.length))*6.5;
+  const lay=[...nodes];                    // layout participants
+  const chains=new Map();                  // edge -> [A, ...waypoints, B]
+  for(const e of doc.edges){
+    const A=byId[e.a], B=byId[e.b];
+    if(!A||!B||isBack.has(e)||e.route) continue;   // routed edges draw their own waypoints
+    if(B.rank-A.rank<=1 || pinned(e.a) || pinned(e.b)) continue;
+    const chain=[A];
+    const span=B.rank-A.rank;
+    for(let r=A.rank+1;r<B.rank;r++){
+      // homeA/homeB/frac anchor this waypoint's cross position between its
+      // OWN endpoints (dummy-vertex chain), so the barycenter sweep orders it
+      // within the lane without letting the run drift to the figure margin.
+      const v={virtual:true,rank:r,w:1,h:1,mn:e.mid?lblPx(e.mid):0,di:lay.length,
+               homeA:A,homeB:B,frac:(r-A.rank)/span};
+      lay.push(v); chain.push(v);
+    }
+    chain.push(B); chains.set(e,chain);
+  }
+  const preds=new Map(), succs=new Map(); // over layout segments
+  const link=(p,c)=>{ if(!preds.has(c)) preds.set(c,[]); preds.get(c).push(p);
+                      if(!succs.has(p)) succs.set(p,[]); succs.get(p).push(c); };
+  for(const e of doc.edges){
+    const A=byId[e.a], B=byId[e.b];
+    if(!A||!B||isBack.has(e)||A.rank===B.rank) continue;
+    const ch=chains.get(e)||[A,B];
+    for(let i=1;i<ch.length;i++) link(ch[i-1],ch[i]);
+  }
+  const midW={};        // widest mid label on a one-layer edge, per node
+  for(const e of doc.edges){
+    if(!e.mid) continue;
+    const A=byId[e.a], B=byId[e.b];
+    if(!A||!B||isBack.has(e)||Math.abs(A.rank-B.rank)!==1) continue;
+    midW[e.a]=Math.max(midW[e.a]||0,lblPx(e.mid));
+    midW[e.b]=Math.max(midW[e.b]||0,lblPx(e.mid));
+  }
+  const cs=n=>horiz?n.h:n.w;               // cross-axis size
+  const gapOf=(a,b)=>{  // spacing between adjacent lane members
+    if(a.group&&a.group===b.group){
+      const g=doc.groups.find(x=>x.id===a.group);
+      if(g&&g.gap!==undefined) return g.gap;   // explicit group gap is exact
+    }
+    let base=horiz?GAPY:GAPX;
+    if(a.virtual||b.virtual) base=Math.min(base,30);
+    if(!horiz){           // beside-labels on vertical edges need width
+      const la=a.virtual?a.mn:(midW[a.id]||0);
+      if(la) base=Math.max(base,la+23-cs(a)/2);
+    }
+    return base;
+  };
+  const ranksArr=[];
+  for(const n of lay){ (ranksArr[n.rank]=ranksArr[n.rank]||[]).push(n); }
+  const laneSize=[], mainGap=[];
+  ranksArr.forEach((lane,i)=>{
+    if(!lane) return;
+    laneSize[i]=Math.max(...lane.map(n=>horiz?n.w:n.h));
+    mainGap[i]=horiz?GAPX:GAPY;
+  });
+  if(horiz) for(const e of doc.edges){     // labels ride ON horizontal edges:
+    if(!e.mid||isBack.has(e)) continue;    // layer pitch grows to fit them
+    const A=byId[e.a], B=byId[e.b]; if(!A||!B) continue;
+    const r0=Math.min(A.rank,B.rank), r1=Math.max(A.rank,B.rank);
+    if(r0===r1) continue;
+    const need=(lblPx(e.mid)+24)/(r1-r0);
+    for(let i=r0;i<r1;i++) mainGap[i]=Math.max(mainGap[i],need);
+  }
+  const center=n=>n.cross+cs(n)/2;
+  ranksArr.forEach(lane=>{ if(!lane) return; let c=0;    // seed: doc order
+    lane.forEach((n,k)=>{ n.cross=c; c+=cs(n)+(k<lane.length-1?gapOf(n,lane[k+1]):0); }); });
+  const place=(lane,des)=>{   // order by desired center, resolve overlaps,
+    const arr=lane.map(n=>({n,d:des.get(n)}));           // recenter the lane
+    arr.sort((p,q)=>p.d-q.d||p.n.di-q.n.di);
+    let cEnd=-Infinity;
+    arr.forEach((x,i)=>{
+      x.n.cross=Math.max(x.d-cs(x.n)/2, cEnd);
+      cEnd=x.n.cross+cs(x.n)+(i<arr.length-1?gapOf(x.n,arr[i+1].n):0);
+    });
+    const err=arr.reduce((s,x)=>s+center(x.n)-x.d,0)/arr.length;
+    arr.forEach(x=>{ x.n.cross-=err; });
+    lane.length=0; arr.forEach(x=>lane.push(x.n));
+  };
+  const SLACK=300;   // how far a multi-rank waypoint may stray past its own
+                     // endpoints' cross-axis band before the sweep clamps it
+                     // (item 17); the knee of the excursion↔crossings trade.
+  const sweep=dir=>{          // 1 = align to parents, -1 = align to children
+    const idx=[]; ranksArr.forEach((l,i)=>l&&idx.push(i));
+    const order=dir===1?idx.slice(1):idx.slice(0,-1).reverse();
+    for(const i of order){
+      const lane=ranksArr[i], des=new Map();
+      for(const n of lane){
+        const ref=(dir===1?preds:succs).get(n);
+        let d=ref&&ref.length ? ref.reduce((s,m)=>s+center(m),0)/ref.length : center(n);
+        // Waypoint excursion bound (item 17): a multi-rank forward edge's dummy
+        // vertices may follow the barycenter freely WITHIN the cross-axis band
+        // their own endpoints span — that is where the ordering that separates
+        // parallel long edges from each other happens — but they may not stray
+        // past that band by more than SLACK. Without this a long run in a
+        // crowded region drifts, layer by layer, out to the figure margin (the
+        // 900px staircase this item measured). Clamping the DESIRED position
+        // (not the final one) leaves place()'s overlap resolution and node
+        // spacing intact, so a clamped waypoint is not shoved onto a node; and
+        // because the clamp is monotonic it does not reorder waypoints, so it
+        // does not manufacture crossings among edges that did not cross before.
+        // A centre-line PULL was tried instead and rejected: it makes edges
+        // sharing a funnel target converge early and adds real crossings.
+        if(n.virtual&&n.homeA&&n.homeB){
+          const cA=center(n.homeA), cB=center(n.homeB);
+          const lo=Math.min(cA,cB)-SLACK, hi=Math.max(cA,cB)+SLACK;
+          d=Math.max(lo,Math.min(hi,d));
+        }
+        des.set(n,d);
+      }
+      place(lane,des);
+    }
+  };
+  sweep(1); sweep(-1); sweep(1);
+  let minC=Infinity; lay.forEach(n=>{ minC=Math.min(minC,n.cross); });
+  if(!isFinite(minC)) minC=0;
+  let main=0;
+  ranksArr.forEach((lane,i)=>{
+    if(!lane) return;
+    lane.forEach(n=>{
+      // waypoints span the full layer so chain bends happen in the gaps
+      if(n.virtual){ if(horiz) n.w=laneSize[i]; else n.h=laneSize[i]; }
+      if(horiz){ n.x=main; n.y=y0+20+n.cross-minC; }
+      else     { n.y=y0+20+main; n.x=n.cross-minC; }
+    });
+    main+=laneSize[i]+mainGap[i];
+  });
+  if(doc.flow==='left'||doc.flow==='up'){
+    const M=main; for(const n of lay){
+      if(horiz) n.x=M-n.x-n.w; else n.y=y0+20+(M-(n.y-y0-20))-n.h; }
+  }
+  // Two-level coordinates (D6): a pinned GROUP anchors its local origin in
+  // canvas px; a pinned MEMBER is group-local (relative to that origin);
+  // ungrouped pins are canvas px. Moving a group = editing one pin line.
+  const gOrigin={};
+  for(const g of doc.groups){
+    const p=doc.pins[g.id];
+    if(p){ gOrigin[g.id]={x:p.fx, y:y0+20+p.fy}; }
+    else{
+      const mem=nodes.filter(n=>n.group===g.id);
+      if(mem.length) gOrigin[g.id]={x:Math.min(...mem.map(n=>n.x)),
+                                    y:Math.min(...mem.map(n=>n.y))};
+    }
+  }
+  for(const n of nodes){ const p=doc.pins[n.id]; if(!p) continue;
+    const o=n.group?gOrigin[n.group]:null;
+    if(o){ n.x=o.x+p.fx; n.y=o.y+p.fy; }
+    else { n.x=p.fx; n.y=y0+20+p.fy; }
+  }
+  // Boundary adjacency in pinned scenes (presentation-only): auto-layout ranks
+  // a degree-1 boundary relative to the free lanes, so in a scene where the
+  // real content is pinned to a compact box the boundary can drift to a far
+  // rank and blow the canvas out. When a boundary's connected node is pinned
+  // (or the scene is substantially pinned), place the boundary just outside
+  // that node's border in the flow direction — upstream for `boundary -> node`,
+  // downstream for `node -> boundary` — aligned on the node's cross-axis, at a
+  // small fixed gap. Explicitly pinned or explicitly routed boundaries keep
+  // their author-given placement. Strip pin/size/route and the AST is unchanged.
+  {
+    const real=nodes.filter(n=>!n.boundary);
+    const pinnedReal=real.filter(n=>pinned(n.id)).length;
+    const scenePinned=real.length>0 && pinnedReal>=Math.ceil(real.length/2);
+    const BGAP=30;   // border-to-anchor gap (spec range 24–40)
+    for(const b of nodes){
+      if(!b.boundary||pinned(b.id)) continue;
+      // sole incident edge (degree-1); skip routed edges and self-refs
+      let node=null, downstream=true;
+      for(const e of doc.edges){
+        if(e.route) continue;
+        if(e.a===b.id&&byId[e.b]&&byId[e.b]!==b){ node=byId[e.b]; downstream=false; break; } // boundary -> node
+        if(e.b===b.id&&byId[e.a]&&byId[e.a]!==b){ node=byId[e.a]; downstream=true;  break; } // node -> boundary
+      }
+      if(!node) continue;
+      if(!(pinned(node.id)||scenePinned)) continue;   // unpinned scenes keep auto-layout
+      // outward side in flow direction: downstream = end of flow, upstream = start
+      const fwd=(doc.flow==='right'||doc.flow==='down');
+      const outward=downstream===fwd ? 1 : -1;        // +1 = max side, -1 = min side
+      if(horiz){
+        b.y=node.y+node.h/2-b.h/2;                    // align on node's horizontal axis
+        b.x=outward>0 ? node.x+node.w+BGAP : node.x-BGAP-b.w;
+      }else{
+        b.x=node.x+node.w/2-b.w/2;                    // align on node's vertical axis
+        b.y=outward>0 ? node.y+node.h+BGAP : node.y-BGAP-b.h;
+      }
+    }
+  }
+  // Boundary labels sit beyond the open end, away from the figure (R44).
+  // bDir = outward direction of an anchor: away from its first incident
+  // edge's other endpoint (document order; [0,1] = below when unwired).
+  const bDir=n=>{
+    for(const e of doc.edges){
+      const o=e.a===n.id?byId[e.b]:(e.b===n.id?byId[e.a]:null);
+      if(!o||o===n) continue;
+      return [n.x+n.w/2-(o.x+o.w/2), n.y+n.h/2-(o.y+o.h/2)];
+    }
+    return [0,1];
+  };
+  // A left-pointing label (an inbound external under flow right) would
+  // stick out past the canvas' left edge: shift the whole scene right so
+  // it stays on canvas. The shift is uniform (relative geometry, incl.
+  // pins, is preserved — same pattern as the ring-channel y-shift below)
+  // and meta.left reports it so drag→pin round-trips stay stable.
+  let bShift=0;
+  for(const n of nodes){
+    if(!n.boundary||!n.label) continue;
+    const [bdx,bdy]=bDir(n), cx=n.x+n.w/2;
+    const ext=Math.abs(bdx)>=Math.abs(bdy) ? (bdx<0 ? cx-10-lblPx(n.label) : 0)
+                                           : cx-lblPx(n.label)/2;
+    bShift=Math.max(bShift,-ext);
+  }
+  if(bShift){ for(const n of lay) n.x+=bShift;
+              for(const k in gOrigin) gOrigin[k].x+=bShift; }
+  // back-edge channel plan: slots used to be handed out in paint order, so
+  // a far source could take the innermost slot and its long run crossed
+  // every other return. Sort channel-bound back-edges so the source NEAREST
+  // the channel gets the INNERMOST slot (vertical flow, right channel:
+  // larger cx = nearer; horizontal flow, bottom channel: larger cy = nearer;
+  // ties: document order). Where the pattern allows it (vertical flow,
+  // clear space below the source, clear sky above the target) the loop is
+  // drawn as a full concentric ring — drop row, channel, return row and hub
+  // entry nested in the same order, entering the hub's top edge on the
+  // channel side — so fan-in hubs (N states -> IDLE reset) have no crossings.
+  const chPlan=new Map(); let chTop=0, chShift=0;
+  {
+    const chList=doc.edges.filter(e=>byId[e.a]&&byId[e.b]&&isBack.has(e)&&!pinned(e.a)&&!pinned(e.b)&&!e.route);
+    const near=e=>{ const A=byId[e.a]; return horiz?A.y+A.h/2:A.x+A.w/2; };
+    const order=chList.map((e,i)=>({e,i}));
+    order.sort((p,q)=>near(q.e)-near(p.e)||p.i-q.i);
+    let cum=0;
+    order.forEach(({e},ring)=>{
+      const A=byId[e.a], B=byId[e.b], sx=A.x+A.w/2;
+      const ringOK=!horiz&&A!==B
+        &&!nodes.some(n=>n!==A&&!n.boundary&&n.x<sx&&n.x+n.w>sx&&n.y+n.h>A.y+A.h)
+        &&!nodes.some(n=>n!==B&&!n.boundary&&n.x<B.x+B.w&&n.x+n.w>B.x&&n.y<B.y);
+      chPlan.set(e,{ring,slot:cum,ringOK});
+      cum+=(!horiz&&e.mid)?Math.max(22,lblPx(e.mid)+14):22;
+    });
+    // rings are all-or-nothing per target: a hub whose loops are part ring,
+    // part legacy would reintroduce crossings between the two styles
+    const byT={};
+    order.forEach(({e})=>{ (byT[e.b]=byT[e.b]||[]).push(e); });
+    for(const t in byT)
+      if(!byT[t].every(e=>chPlan.get(e).ringOK))
+        byT[t].forEach(e=>{ chPlan.get(e).ringOK=false; });
+    // hub entries fan across the target's top edge, innermost ring nearest
+    // the channel, so concentric rings never cross on their way in
+    for(const t in byT){
+      const g=byT[t].filter(e=>chPlan.get(e).ringOK);
+      const B=byId[t], m=g.length;
+      g.forEach((e,k)=>{ chPlan.get(e).ex=B.x+B.w*(m-k)/(m+1); });
+    }
+    // ring return rows run above the top rank; shift the whole scene down
+    // when they would spill into the title band. The shift is uniform
+    // (relative geometry, incl. pins, is preserved) and meta.top reports
+    // the shifted origin so the editor's drag->pin round-trip stays stable.
+    const rings=order.filter(({e})=>chPlan.get(e).ringOK);
+    if(rings.length){
+      let occT=Infinity;
+      for(const n of nodes) occT=Math.min(occT, n.y-(n.group?26:0));
+      const maxRing=Math.max(...rings.map(({e})=>chPlan.get(e).ring));
+      chShift=Math.max(0, y0+20+maxRing*12-occT);
+      if(chShift){ for(const n of lay) n.y+=chShift;
+                   for(const k in gOrigin) gOrigin[k].y+=chShift; }
+      chTop=occT+chShift;
+    }
+  }
+  // anti-parallel straight edges (A->B and B->A) used to coincide: offset
+  // each member of a same-pair straight group along the pair's CANONICAL
+  // normal (endpoints sorted by id), so opposite directions land on
+  // opposite sides; endpoints and labels shift together.
+  const apOff=new Map();
+  {
+    const straight=e=>byId[e.a]&&byId[e.b]&&!(isBack.has(e)&&!pinned(e.a)&&!pinned(e.b))&&!chains.get(e)&&!e.route;
+    const pk=e=>e.a<e.b?e.a+'\t'+e.b:e.b+'\t'+e.a;
+    const pairN={}, seen={};
+    for(const e of doc.edges) if(straight(e)){ const k=pk(e); pairN[k]=(pairN[k]||0)+1; }
+    for(const e of doc.edges){
+      if(!straight(e)) continue;
+      const k=pk(e), kk=pairN[k]; if(kk<2) continue;
+      const idx=seen[k]||0; seen[k]=idx+1;
+      const off=(idx-(kk-1)/2)*7;
+      const lo=e.a<e.b?e.a:e.b, hi=e.a<e.b?e.b:e.a;
+      const P=byId[lo], Q=byId[hi];
+      const dx=(Q.x+Q.w/2)-(P.x+P.w/2), dy=(Q.y+Q.h/2)-(P.y+P.h/2), L=Math.hypot(dx,dy)||1;
+      apOff.set(e,[-dy/L*off, dx/L*off]);
+    }
+  }
+  let W=0,Hh=0;
+  for(const n of lay){ W=Math.max(W,n.x+n.w); Hh=Math.max(Hh,n.y+n.h-y0-20); }
+  if(W===0){W=480;} if(Hh===0){Hh=280;}
+  // groups
+  const gsvg=[]; const gBox={};
+  for(const g of doc.groups){
+    const mem=nodes.filter(n=>n.group===g.id);
+    if(!mem.length) continue;
+    const o=gOrigin[g.id];
+    const x0=Math.min(...mem.map(n=>n.x))-14, x1=Math.max(...mem.map(n=>n.x+n.w))+14;
+    const yA=Math.min(...mem.map(n=>n.y))-26, yB=Math.max(...mem.map(n=>n.y+n.h))+12;
+    gBox[g.id]={x0,x1,yA,yB};
+    const gdash=g.style==='dashed'?' stroke-dasharray="6 4"':(g.style==='dotted'?' stroke-dasharray="2 4"':'');
+    gsvg.push('<g data-group="'+g.id+'" data-gx="'+o.x+'" data-gy="'+o.y+'" style="cursor:move">'
+      +'<rect x="'+x0+'" y="'+yA+'" width="'+(x1-x0)+'" height="'+(yB-yA)+'" rx="10" fill="'+(g.color||'#f6f5ef')+'" stroke="'+(g.stroke||'#d6d4cc')+'"'+gdash+'/>'
+      +'<text x="'+(x0+10)+'" y="'+(yA+16)+'" font-size="11.5" fill="'+(g.text||'#6f6e69')+'">'+esc(g.label)+'</text></g>');
+    W=Math.max(W,x1); Hh=Math.max(Hh,yB-y0-20);
+  }
+  // zone bands on groups: above the group background, below the nodes.
+  // dir picks the measuring axis and its 0% edge: up=bottom, down=top,
+  // right=left edge, left=right edge.
+  const bandRect=(f,x0,yA,x1,yB)=>{
+    const w=x1-x0, h=yB-yA;
+    if(f.dir==='up')    return [x0, yB-h*f.to/100, w, h*(f.to-f.from)/100];
+    if(f.dir==='down')  return [x0, yA+h*f.from/100, w, h*(f.to-f.from)/100];
+    if(f.dir==='right') return [x0+w*f.from/100, yA, w*(f.to-f.from)/100, h];
+    return [x1-w*f.to/100, yA, w*(f.to-f.from)/100, h];   // left
+  };
+  for(const f of doc.fills){
+    const B=gBox[f.target]; if(!B) continue;
+    const [bx,by,bw,bh]=bandRect(f,B.x0,B.yA,B.x1,B.yB);
+    gsvg.push('<rect x="'+bx+'" y="'+by+'" width="'+bw+'" height="'+bh+'" fill="'+f.color+'" opacity="0.9"/>');
+  }
+  // edges (sorted by layer z, then doc order)
+  const zOf=l=>{const L=doc.layers.find(x=>x.id===l);return L?L.z:0;};
+  const edges=[...doc.edges].sort((p,q)=>zOf(p.layer)-zOf(q.layer));
+  const esvg=[], lblsvg=[];  // labels paint last = closest to the viewer
+  // ── deferred edge-label placement ───────────────────────────────────────
+  // An edge label is not written where it is emitted.  Each emission reserves
+  // its slot in lblsvg (so the paint order is unchanged) and registers the
+  // segment it belongs to; one greedy pass after the edge loop scores several
+  // candidate positions per label against the already-placed labels, the node
+  // boxes, the arrowheads and the other edges, and writes the winner into the
+  // reserved slot.  Requests are consumed in registration order, which is
+  // edge order, which is deterministic — same input, same output.
+  const lblReq=[], edgeSegs=[], arrowBox=[];
+  const reqLabel=o=>{ o.idx=lblsvg.length; lblsvg.push(''); lblReq.push(o); };
+  const noteSegs=(e,pp)=>{ for(let i=0;i+1<pp.length;i++) edgeSegs.push({e,p:pp[i],q:pp[i+1]}); };
+  // arrowTri: explicit triangle painted in lblsvg (above nodes) instead of
+  // SVG marker-end/marker-start which are occluded by the node fill.
+  // tip=[x,y], from=[x,y] is the adjacent shaft point toward the interior
+  // (direction: from→tip). Geometry matches #arr marker (viewBox 0 0 10 10,
+  // refX=9, refY=5, markerWidth=7, markerHeight=7, markerUnits=strokeWidth=1.6):
+  //   arm = 9*(7/10)*1.6 ≈ 10.08 px, half-width = 5*(7/10)*1.6 ≈ 5.6 px.
+  const arrowTri=(tip,from,col)=>{
+    const dx=tip[0]-from[0], dy=tip[1]-from[1], L=Math.hypot(dx,dy)||1;
+    const ux=dx/L, uy=dy/L;          // unit vector from→tip
+    const arm=10.08, hw=5.6;
+    const bx=tip[0]-ux*arm, by=tip[1]-uy*arm;  // base centre
+    const lx=bx-uy*hw, ly=by+ux*hw;             // left corner
+    const rx=bx+uy*hw, ry=by-ux*hw;             // right corner
+    lblsvg.push('<path d="M'+tip[0]+' '+tip[1]+' L'+lx+' '+ly+' L'+rx+' '+ry+' z" fill="'+col+'" stroke="none"/>');
+    arrowBox.push({x:Math.min(tip[0],lx,rx), y:Math.min(tip[1],ly,ry),
+                   w:Math.max(tip[0],lx,rx)-Math.min(tip[0],lx,rx),
+                   h:Math.max(tip[1],ly,ry)-Math.min(tip[1],ly,ry)});
+  };
+  // back-edge side channel: beyond the occupied lanes (nodes AND group boxes)
+  let occR=0, occB=0;
+  for(const n of nodes){ occR=Math.max(occR,n.x+n.w); occB=Math.max(occB,n.y+n.h); }
+  for(const k in gBox){ occR=Math.max(occR,gBox[k].x1); occB=Math.max(occB,gBox[k].yB); }
+  if(!horiz) chains.forEach((chain,e)=>{      // chain labels stick out right
+    if(!e.mid) return;
+    const v=chain[1+Math.floor((chain.length-3)/2)];
+    occR=Math.max(occR, v.x+v.w/2+9+lblPx(e.mid));
+  });
+  for(const e of edges){
+    const A=byId[e.a], B=byId[e.b]; if(!A||!B) continue;
+    const col=e.color||'#555';
+    const dash=e.style==='dashed'?' stroke-dasharray="6 4"':(e.style==='dotted'?' stroke-dasharray="2 4"':'');
+    const wantsStart=e.op==='<->'||e.op==='<-', wantsEnd=e.op==='<->'||e.op==='->';
+    const m1='', m2='';   // markers removed — arrowTri() paints triangles above nodes in lblsvg
+    const halo=' paint-order="stroke" stroke="#fff" stroke-width="3"';
+    const seg=(p,q,t,lbl,fs)=>reqLabel({p,q,t0:t,text:lbl,fs,col:'#555',halo,e,A,B,kind:'end'});
+    if(e.route){
+      // declared waypoints (route … via=, 0.1-dev.13) are RIGID: the edge
+      // draws source → via1 → … → viaN → target and bypasses the automatic
+      // machinery (chains, channels, obstacle detours). Waypoints are
+      // canvas px in the same space as ungrouped pins (and follow the
+      // ring-channel scene shift like pins do). Under orthogonal routing
+      // (route-level routing= wins over the document directive) consecutive
+      // points are joined by deterministic manhattan elbows — horizontal-
+      // then-vertical for flow right|left, vertical-then-horizontal for
+      // down|up — reusing the standard borderPoint anchoring at both ends.
+      const orth=(e.route.routing||doc.routing||'straight')==='orthogonal';
+      const via=e.route.via.map(p=>[p[0], y0+20+chShift+p[1]]);
+      let pts=[borderPoint(A,via[0][0],via[0][1])]
+        .concat(via,[borderPoint(B,via[via.length-1][0],via[via.length-1][1])]);
+      if(orth){
+        const out=[pts[0]];
+        for(let i=1;i<pts.length;i++){
+          const p=out[out.length-1], q=pts[i];
+          if(p[0]!==q[0]&&p[1]!==q[1]) out.push(horiz?[q[0],p[1]]:[p[0],q[1]]);
+          out.push(q);
+        }
+        pts=out;
+      }
+      for(let i=1;i+1<pts.length;i++)  // drop zero-length interior steps
+        if(Math.hypot(pts[i][0]-pts[i-1][0],pts[i][1]-pts[i-1][1])<0.5){ pts.splice(i,1); i--; }
+      esvg.push('<path data-edge="'+e.line+'" d="'+roundPath(pts)+'" fill="none" stroke="'+col+'" stroke-width="1.6"'+dash+'/>');
+      noteSegs(e,pts);
+      if(e.mid){               // the longest segment carries the mid label
+        let bi=0,bl=-1;
+        for(let i=0;i+1<pts.length;i++){
+          const l=Math.hypot(pts[i+1][0]-pts[i][0],pts[i+1][1]-pts[i][1]);
+          if(l>bl){ bl=l; bi=i; }
+        }
+        reqLabel({p:pts[bi],q:pts[bi+1],text:e.mid,fs:11,col,halo,e,A,B,kind:'mid',first:bi===0});
+      }
+      if(e.tail) seg(pts[0],pts[1],0.25,e.tail,10);
+      if(e.head) seg(pts[pts.length-1],pts[pts.length-2],0.25,e.head,10);
+      if(wantsStart) arrowTri(pts[0],pts[1],col);
+      if(wantsEnd)   arrowTri(pts[pts.length-1],pts[pts.length-2],col);
+      for(const pP of pts){ W=Math.max(W,pP[0]+4); Hh=Math.max(Hh,pP[1]+16-y0-20); }
+      continue;
+    }
+    if(isBack.has(e)&&!pinned(e.a)&&!pinned(e.b)){
+      // back-edge (retry loop): polyline through a side channel beyond the
+      // occupied lanes instead of a straight line hidden under the spine,
+      // using the nested slot from the channel plan. Ring-eligible loops
+      // wrap over the top and enter the hub's top edge; otherwise, when
+      // the sideways run to the channel would cut through a sibling node,
+      // the route drops into the inter-layer gap first.
+      const lane=r=>(ranksArr[r]||[]).filter(n=>!n.virtual);
+      const P=chPlan.get(e), ring=P.ring;
+      const pts=[];
+      if(horiz){             // channel runs below the lanes
+        const chY=occB+28+P.slot;             // labels ride ON the channel
+        const colR=r=>Math.max(...lane(r).map(n=>n.x+n.w));
+        const blockedV=(y1,y2,xx,skip)=>nodes.some(n=>n!==skip&&!n.boundary&&n.x<xx&&n.x+n.w>xx&&n.y+n.h>y1&&n.y<y2);
+        const sx=A===B?A.x+A.w*0.3:A.x+A.w/2, tx=A===B?B.x+B.w*0.7:B.x+B.w/2;
+        if(A!==B&&blockedV(A.y+A.h,chY,sx,A)){
+          const gx=colR(A.rank)+10+ring*7;
+          pts.push([outSide(A,'r'),A.y+A.h/2],[gx,A.y+A.h/2],[gx,chY]);
+        } else pts.push([sx,outSide(A,'b')],[sx,chY]);
+        if(A!==B&&blockedV(B.y+B.h,chY,tx,B)){
+          const gx=colR(B.rank)+10+ring*7;
+          pts.push([gx,chY],[gx,B.y+B.h/2],[outSide(B,'r'),B.y+B.h/2]);
+        } else pts.push([tx,chY],[tx,outSide(B,'b')]);
+        if(e.mid){
+          const c1=pts.findIndex(p=>p[1]===chY);
+          reqLabel({p:pts[c1],q:pts[c1+1],text:e.mid,fs:11,col,halo,e,A,B,kind:'mid',first:false});
+        }
+      } else if(P.ringOK){   // concentric ring: under, around, over, in
+        const sx=A.x+A.w/2;
+        const gy=occB+14+ring*12, chX=occR+28+P.slot, topY=chTop-14-ring*12;
+        pts.push([sx,outSide(A,'b')],[sx,gy],[chX,gy],[chX,topY],[P.ex,topY],[P.ex,outSide(B,'t')]);
+        if(e.mid){
+          const c1=pts.findIndex(p=>p[0]===chX);
+          reqLabel({p:pts[c1],q:pts[c1+1],text:e.mid,fs:11,col,halo,e,A,B,kind:'mid',first:false});
+        }
+      } else {               // channel runs right of the lanes
+        const chX=occR+28+P.slot;
+        const laneB=r=>Math.max(...lane(r).map(n=>n.y+n.h));
+        const blockedH=(x1,x2,yy,skip)=>nodes.some(n=>n!==skip&&!n.boundary&&n.y<yy&&n.y+n.h>yy&&n.x+n.w>x1&&n.x<x2);
+        const sy=A===B?A.y+A.h*0.3:A.y+A.h/2, ty=A===B?B.y+B.h*0.7:B.y+B.h/2;
+        if(A!==B&&blockedH(A.x+A.w,chX,sy,A)){
+          const gy=laneB(A.rank)+10+ring*7;
+          pts.push([A.x+A.w/2,outSide(A,'b')],[A.x+A.w/2,gy],[chX,gy]);
+        } else pts.push([outSide(A,'r'),sy],[chX,sy]);
+        if(A!==B&&blockedH(B.x+B.w,chX,ty,B)){
+          const gy=laneB(B.rank)+10+ring*7;
+          pts.push([chX,gy],[B.x+B.w/2,gy],[B.x+B.w/2,outSide(B,'b')]);
+        } else pts.push([chX,ty],[outSide(B,'r'),ty]);
+        if(e.mid){
+          const c1=pts.findIndex(p=>p[0]===chX);
+          reqLabel({p:pts[c1],q:pts[c1+1],text:e.mid,fs:11,col,halo,e,A,B,kind:'mid',first:false});
+        }
+      }
+      // non-incident nodes are obstacles for the channel runs too: a run
+      // that would cut through a sibling (e.g. a pinned node parked on the
+      // escape lane) detours around it instead of drawing across it. When
+      // spanning the following corner point gives a shorter total run than
+      // detour + remaining leg (a detour "spike"), the corner is dropped.
+      const obsN=nodes.filter(n=>n!==A&&n!==B&&!n.boundary).map(n=>({x:n.x,y:n.y,w:n.w,h:n.h}));
+      const plen=pp=>{let s=0;for(let k=0;k+1<pp.length;k++)s+=Math.hypot(pp[k+1][0]-pp[k][0],pp[k+1][1]-pp[k][1]);return s;};
+      for(let i=0;i+1<pts.length;i++){
+        const d=routeAround(pts[i],pts[i+1],obsN);
+        if(!d) continue;
+        let ins=d.slice(1,-1), drop=0;
+        if(i+2<pts.length){
+          const span=segHitsObs(pts[i],pts[i+2],obsN)
+            ?routeAround(pts[i],pts[i+2],obsN):[pts[i],pts[i+2]];
+          if(span&&plen(span)<plen(d)+Math.hypot(pts[i+2][0]-pts[i+1][0],pts[i+2][1]-pts[i+1][1])-1e-6){
+            ins=span.slice(1,-1); drop=1;
+          }
+        }
+        pts.splice(i+1,drop,...ins);
+        i+=ins.length;
+      }
+      for(const p of pts){ W=Math.max(W,p[0]+4); Hh=Math.max(Hh,p[1]+16-y0-20); }
+      esvg.push('<path data-edge="'+e.line+'" d="'+roundPath(pts)+'" fill="none" stroke="'+col+'" stroke-width="1.6"'+dash+'/>');
+      noteSegs(e,pts);
+      if(e.tail) seg(pts[0],pts[1],0.5,e.tail,10);
+      if(e.head) seg(pts[pts.length-1],pts[pts.length-2],0.5,e.head,10);
+      if(wantsStart) arrowTri(pts[0],pts[1],col);
+      if(wantsEnd)   arrowTri(pts[pts.length-1],pts[pts.length-2],col);
+      continue;
+    }
+    const chain=chains.get(e);
+    if(chain){
+      // multi-layer edge: polyline through its reserved waypoint lane;
+      // each waypoint contributes an entry and an exit port so the run
+      // through a layer is parallel to it and diagonals stay in the gaps
+      const pts=[];
+      let px=A.x+A.w/2, py=A.y+A.h/2;
+      for(const v of chain.slice(1,-1)){
+        const cx=v.x+v.w/2, cy=v.y+v.h/2;
+        let p=horiz?[v.x,cy]:[cx,v.y], q=horiz?[v.x+v.w,cy]:[cx,v.y+v.h];
+        if(horiz? px>cx : py>cy){ const t=p; p=q; q=t; }
+        pts.push(p,q); px=q[0]; py=q[1];
+      }
+      const p0=borderPoint(A,pts[0][0],pts[0][1]);
+      const p1=borderPoint(B,pts[pts.length-1][0],pts[pts.length-1][1]);
+      pts.unshift(p0); pts.push(p1);
+      // the middle waypoint's own port run carries the label; capture it now,
+      // before collinear simplification renumbers the point list
+      let midSeg=null;
+      if(e.mid){ const j=Math.floor((chain.length-3)/2); midSeg=[pts[1+2*j],pts[2+2*j]]; }
+      // Obstacle avoidance on the chain run: the excursion clamp pulls a long
+      // forward run in toward its own endpoints, which can make a connector
+      // segment graze a node the edge does not touch. routeAround detours only
+      // segments that actually hit an obstacle (it returns null otherwise), so
+      // clean chains — every chain before this change — are left byte-for-byte
+      // unchanged; only a clamped segment that would pierce a node gets bent
+      // around it. This keeps the edge-through-node count from regressing while
+      // the clamp does its job. Same obstacle set the straight edges use.
+      {
+        const obs=nodes.filter(n=>n!==A&&n!==B&&!n.boundary).map(n=>({x:n.x,y:n.y,w:n.w,h:n.h}));
+        for(let i=0;i+1<pts.length;i++){
+          const d=routeAround(pts[i],pts[i+1],obs);
+          if(!d) continue;
+          const ins=d.slice(1,-1);
+          if(midSeg&&midSeg[0]===pts[i]&&midSeg[1]===pts[i+1]&&ins.length) midSeg=[pts[i],ins[0]];
+          pts.splice(i+1,0,...ins); i+=ins.length;
+        }
+      }
+      // Collapse collinear interior points: home-anchored waypoints line up, so
+      // the per-rank entry/exit ports leave long straight runs punctuated by
+      // redundant vertices. Dropping points that lie on the segment between
+      // their neighbours turns a 40-point staircase into the 2–4 bends a
+      // dummy-vertex chain should have, without moving the drawn line.
+      simplifyPts(pts);
+      esvg.push('<path data-edge="'+e.line+'" d="'+roundPath(pts)+'" fill="none" stroke="'+col+'" stroke-width="1.6"'+dash+'/>');
+      noteSegs(e,pts);
+      if(midSeg) reqLabel({p:midSeg[0],q:midSeg[1],text:e.mid,fs:11,col,halo,e,A,B,kind:'mid',first:false});
+      if(e.tail) seg(p0,pts[1],0.4,e.tail,10);
+      if(e.head) seg(p1,pts[pts.length-2],0.4,e.head,10);
+      if(wantsStart) arrowTri(pts[0],pts[1],col);
+      if(wantsEnd)   arrowTri(pts[pts.length-1],pts[pts.length-2],col);
+      continue;
+    }
+    const ax=A.x+A.w/2, ay=A.y+A.h/2, bx=B.x+B.w/2, by=B.y+B.h/2;
+    let [x1,yy1]=borderPoint(A,bx,by), [x2,yy2]=borderPoint(B,ax,ay);
+    const ap=apOff.get(e);   // anti-parallel fan-out (labels ride along)
+    if(ap){ x1+=ap[0]; yy1+=ap[1]; x2+=ap[0]; yy2+=ap[1]; }
+    // group boxes and non-incident nodes are routing obstacles: a straight
+    // run that pierces a node it does not touch, or a group box it neither
+    // starts nor ends inside, detours around the obstacle boundary instead
+    // (routeAround). Obstacle-free edges keep the plain line unchanged.
+    let route=null;
+    if(A!==B){
+      const obs=nodes.filter(n=>n!==A&&n!==B&&!n.boundary).map(n=>({x:n.x,y:n.y,w:n.w,h:n.h}));
+      for(const k in gBox){
+        const b=gBox[k];
+        const inG=(px,py)=>px>b.x0&&px<b.x1&&py>b.yA&&py<b.yB;
+        if(!inG(x1,yy1)&&!inG(x2,yy2))
+          obs.push({x:b.x0,y:b.yA,w:b.x1-b.x0,h:b.yB-b.yA});
+      }
+      route=routeAround([x1,yy1],[x2,yy2],obs);
+      if(route){           // leave the node facing the first/last bend
+        route[0]=borderPoint(A,route[1][0],route[1][1]);
+        route[route.length-1]=borderPoint(B,route[route.length-2][0],route[route.length-2][1]);
+      }
+    }
+    if(!route && A!==B && doc.routing==='orthogonal' && ax!==bx && ay!==by){
+      // document-level orthogonal routing (0.1-dev.13): plain straight
+      // edges become deterministic manhattan elbows — horizontal-then-
+      // vertical under flow right|left, vertical-then-horizontal under
+      // down|up — anchored by the same borderPoint rule (the corner sits
+      // on the far node's main-axis line, so exits are clean right-angle
+      // stubs). Obstacle detours and channel/chain polylines keep their
+      // existing shapes; axis-aligned pairs stay plain straight lines.
+      const corner=horiz?[bx,ay]:[ax,by];
+      let sP=borderPoint(A,corner[0],corner[1]), tP=borderPoint(B,corner[0],corner[1]);
+      if(ap){ sP=[sP[0]+ap[0],sP[1]+ap[1]]; tP=[tP[0]+ap[0],tP[1]+ap[1]]; }
+      const mid=horiz?[tP[0],sP[1]]:[sP[0],tP[1]];
+      const deg=(pp,qq)=>Math.hypot(pp[0]-qq[0],pp[1]-qq[1])<0.5;
+      if(!deg(mid,sP)&&!deg(mid,tP)) route=[sP,mid,tP];
+    }
+    if(route){
+      esvg.push('<path data-edge="'+e.line+'" d="'+roundPath(route)+'" fill="none" stroke="'+col+'" stroke-width="1.6"'+dash+'/>');
+      noteSegs(e,route);
+      if(e.mid){             // the longest segment carries the mid label
+        let bi=0,bl=-1;
+        for(let i=0;i+1<route.length;i++){
+          const l=Math.hypot(route[i+1][0]-route[i][0],route[i+1][1]-route[i][1]);
+          if(l>bl){ bl=l; bi=i; }
+        }
+        reqLabel({p:route[bi],q:route[bi+1],text:e.mid,fs:11,col,halo,e,A,B,kind:'mid',first:bi===0});
+      }
+      if(e.tail) seg(route[0],route[1],0.25,e.tail,10);
+      if(e.head) seg(route[route.length-1],route[route.length-2],0.25,e.head,10);
+      if(wantsStart) arrowTri(route[0],route[1],col);
+      if(wantsEnd)   arrowTri(route[route.length-1],route[route.length-2],col);
+      for(const pP of route){ W=Math.max(W,pP[0]+4); Hh=Math.max(Hh,pP[1]+4-y0-20); }
+      continue;
+    }
+    esvg.push('<line data-edge="'+e.line+'" x1="'+x1+'" y1="'+yy1+'" x2="'+x2+'" y2="'+yy2+'" stroke="'+col+'" stroke-width="1.6"'+dash+'/>');
+    noteSegs(e,[[x1,yy1],[x2,yy2]]);
+    if(e.mid)
+      reqLabel({p:[x1,yy1],q:[x2,yy2],text:e.mid,fs:11,col,halo,e,A,B,kind:'mid',first:true});
+    // endpoint labels at the tail/head positions (three-position model, R34)
+    if(e.tail) seg([x1,yy1],[x2,yy2],0.18,e.tail,10);
+    if(e.head) seg([x1,yy1],[x2,yy2],0.82,e.head,10);
+    if(wantsStart) arrowTri([x1,yy1],[x2,yy2],col);
+    if(wantsEnd)   arrowTri([x2,yy2],[x1,yy1],col);
+  }
+  // ── edge-label placement: candidates + greedy collision-aware choice ─────
+  // For each registered label the carrying segment is sampled at several
+  // parameters t and on both sides of the line, giving a small candidate set.
+  // Candidates are scored by overlap area against everything already on the
+  // canvas — the labels placed before it (document order), the node boxes,
+  // the arrowheads, and the other edges — plus a pull back toward the
+  // preferred point on the segment.  The lowest score wins.  No randomness,
+  // no iteration to a fixed point: one deterministic pass.
+  if(lblReq.length){
+    const obst=nodes.filter(n=>!n.boundary).map(n=>({x:n.x,y:n.y,w:n.w,h:n.h,n}));
+    const ovl=(a,b)=>{
+      const ix=Math.min(a.x+a.w,b.x+b.w)-Math.max(a.x,b.x);
+      const iy=Math.min(a.y+a.h,b.y+b.h)-Math.max(a.y,b.y);
+      return ix>0&&iy>0?ix*iy:0;
+    };
+    // Liang-Barsky: does segment p→q touch the interior of rect r?
+    const segHit=(p,q,r)=>{
+      let t0=0,t1=1;
+      const d=[q[0]-p[0],q[1]-p[1]];
+      const P=[-d[0],d[0],-d[1],d[1]];
+      const Q=[p[0]-r.x, r.x+r.w-p[0], p[1]-r.y, r.y+r.h-p[1]];
+      for(let i=0;i<4;i++){
+        if(Math.abs(P[i])<1e-9){ if(Q[i]<0) return false; continue; }
+        const t=Q[i]/P[i];
+        if(P[i]<0){ if(t>t1) return false; if(t>t0) t0=t; }
+        else      { if(t<t0) return false; if(t<t1) t1=t; }
+      }
+      return t1>t0;
+    };
+    const CLAMP=t=>Math.max(0.06,Math.min(0.94,t));
+    const cand=(r,t,side)=>{
+      const lines=String(r.text).split('\n'), n=lines.length;
+      const w=Math.max(...lines.map(l=>l.length))*6.5*r.fs/11;
+      const lh=r.fs*1.3, h=(n-1)*lh+r.fs*1.1;
+      const up=(n-1)*lh/2+r.fs*0.85;          // baseline y = box top + up
+      const mx=r.p[0]+(r.q[0]-r.p[0])*t, my=r.p[1]+(r.q[1]-r.p[1])*t;
+      let bx,by,x,anchor=n>1?'middle':'start';
+      if(side==='on')          { bx=mx-w/2; by=my-4-up;  anchor='middle'; }
+      else if(side==='above')  { bx=mx-w/2; by=my-3-h;   anchor='middle'; }
+      else if(side==='below')  { bx=mx-w/2; by=my+3;     anchor='middle'; }
+      else if(side==='right')  { bx=mx+6;   by=my-h/2; }
+      else                     { bx=mx-6-w; by=my-h/2; }
+      x=anchor==='middle'?bx+w/2:bx;
+      return {x,y:by+up,anchor,t,side,box:{x:bx,y:by,w,h}};
+    };
+    const placed=[];
+    for(const r of lblReq){
+      const dx=r.q[0]-r.p[0], dy=r.q[1]-r.p[1];
+      const across=Math.abs(dx)>=Math.abs(dy);
+      let sides, ts, tPref;
+      if(r.kind==='end'){
+        // endpoint labels keep their historical spot as first choice
+        sides=['on'].concat(across?['above','below']:['right','left']);
+        tPref=r.t0;
+        ts=[r.t0,r.t0-0.06,r.t0+0.06,r.t0-0.12,r.t0+0.12].map(CLAMP);
+      } else {
+        sides=across?['above','below']:['right','left'];
+        // flowchart convention: a short branch marker leaving a decision node
+        // reads as that branch's name only if it sits next to the decision
+        const branch=r.first && r.A && r.A.shape==='diamond' &&
+                     String(r.text).length<=3 && !String(r.text).includes('\n');
+        tPref=branch?0.22:0.5;
+        ts=branch?[0.22,0.3,0.16,0.4,0.5,0.62]:[0.5,0.38,0.62,0.28,0.72];
+      }
+      let best=null,bestS=Infinity;
+      for(let si=0;si<sides.length;si++) for(const t of ts){
+        const c=cand(r,t,sides[si]);
+        let s=0;
+        for(const b of placed)   s+=3*ovl(c.box,b);
+        for(const o of obst)     s+=(o.n===r.A||o.n===r.B?6:2.4)*ovl(c.box,o);
+        for(const a of arrowBox) s+=4*ovl(c.box,a);
+        for(const g of edgeSegs) if(g.e!==r.e && segHit(g.p,g.q,c.box)) s+=26;
+        s+=70*Math.abs(t-tPref)+si*10;
+        if(c.box.x<2) s+=400;                 // would fall off the left margin
+        if(s<bestS-1e-9){ bestS=s; best=c; }
+      }
+      lblsvg[r.idx]=textEl(best.x,best.y,r.fs,best.anchor,r.col,r.text,r.halo);
+      placed.push(best.box);
+      W=Math.max(W, best.box.x+best.box.w+4);
+      Hh=Math.max(Hh, best.box.y+best.box.h+4-y0-20);
+    }
+  }
+  // nodes on top (each wrapped in a draggable, identifiable group)
+  const nsvg=[];
+  for(const n of nodes){
+    if(n.boundary){
+      // never drawn as a shape (R44): the edge already ended open at the
+      // anchor; a declared label sits just beyond the open end, on the
+      // side away from the figure — small muted text with a white halo
+      if(!n.label) continue;
+      const cx=n.x+n.w/2, cy=n.y+n.h/2, [bdx,bdy]=bDir(n);
+      const bhalo=' paint-order="stroke" stroke="#fff" stroke-width="3"';
+      if(Math.abs(bdx)>=Math.abs(bdy)){
+        if(bdx>=0){ lblsvg.push(textEl(cx+10,cy+3.5,10,'start','#555',n.label,bhalo));
+                    W=Math.max(W,cx+12+lblPx(n.label)); }
+        else lblsvg.push(textEl(cx-10,cy+3.5,10,'end','#555',n.label,bhalo));
+      } else if(bdy>=0){
+        lblsvg.push(textEl(cx,cy+17,10,'middle','#555',n.label,bhalo));
+        Hh=Math.max(Hh,cy+21-y0-20);
+      } else lblsvg.push(textEl(cx,cy-10,10,'middle','#555',n.label,bhalo));
+      continue;
+    }
+    nsvg.push('<g data-node="'+n.id+'" data-x="'+n.x+'" data-y="'+n.y+'" style="cursor:move">');
+    const fill=n.color||'#fff', stroke=n.stroke||'#8a8880', txt=n.text||'#1d1d1b';
+    const ndash=n.style==='dashed'?' stroke-dasharray="6 4"':(n.style==='dotted'?' stroke-dasharray="2 4"':'');
+    if(n.shape==='diamond'){
+      const cx=n.x+n.w/2, cy=n.y+n.h/2;
+      nsvg.push('<polygon points="'+cx+','+n.y+' '+(n.x+n.w)+','+cy+' '+cx+','+(n.y+n.h)+' '+n.x+','+cy+'" fill="'+fill+'" stroke="'+stroke+'"'+ndash+'/>');
+    } else if(n.shape==='rounded'){
+      nsvg.push('<rect x="'+n.x+'" y="'+n.y+'" width="'+n.w+'" height="'+n.h+'" rx="'+Math.min(14,n.h/2)+'" fill="'+fill+'" stroke="'+stroke+'"'+ndash+' stroke-width="1.8"/>');
+    } else if(n.shape==='cloud'){
+      nsvg.push('<ellipse cx="'+(n.x+n.w/2)+'" cy="'+(n.y+n.h/2)+'" rx="'+(n.w/2+10)+'" ry="'+(n.h/2+8)+'" fill="'+fill+'" stroke="'+stroke+'"'+ndash+'/>');
+    } else if(n.shape==='ellipse'||n.shape==='circle'){
+      nsvg.push('<ellipse cx="'+(n.x+n.w/2)+'" cy="'+(n.y+n.h/2)+'" rx="'+(n.w/2)+'" ry="'+(n.shape==='circle'?n.w/2:n.h/2)+'" fill="'+fill+'" stroke="'+stroke+'"'+ndash+'/>');
+    } else if(n.shape==='cylinder'){
+      nsvg.push('<rect x="'+n.x+'" y="'+n.y+'" width="'+n.w+'" height="'+n.h+'" rx="3" fill="'+fill+'" stroke="'+stroke+'"'+ndash+'/>'
+        +'<line x1="'+n.x+'" y1="'+(n.y+7)+'" x2="'+(n.x+n.w)+'" y2="'+(n.y+7)+'" stroke="'+stroke+'"/>');
+    } else {
+      // box = right-angle rectangle (the mainstream default: Mermaid/
+      // Graphviz rects, hardware block diagrams); use shape=rounded for corners
+      nsvg.push('<rect x="'+n.x+'" y="'+n.y+'" width="'+n.w+'" height="'+n.h+'" fill="'+fill+'" stroke="'+stroke+'"'+ndash+'/>');
+    }
+    // zone bands on this node (dir: up=bottom-based, down, left, right)
+    for(const f of doc.fills){
+      if(f.target!==n.id) continue;
+      const [bx,by,bw,bh]=bandRect(f,n.x,n.y,n.x+n.w,n.y+n.h);
+      nsvg.push('<rect x="'+bx+'" y="'+by+'" width="'+bw+'" height="'+bh+'" fill="'+f.color+'" opacity="0.9"/>');
+    }
+    // label with shrink-to-fit when size is rigid (R10); multi-line via "\n"
+    let fs=FONT;
+    const nl=String(n.label).split('\n');
+    const need=Math.max(...nl.map(l=>l.length))*CH;
+    // budget = the width the OUTLINE offers at the label's own height, minus
+    // 8 px clearance each side. For a box that is n.w-16, exactly as before;
+    // for a rhombus or an ellipse it is the inscribed width, so a rigid
+    // shaped node shrinks its text to what the reader can actually see.
+    const avail=2*inscribedHalfW(shapeAxes(n),nl.length*8)-16;
+    if(n.rigid && need>avail) fs=Math.max(8, FONT*avail/need);
+    nsvg.push(textEl(n.x+n.w/2, n.y+n.h/2+fs*0.35, fs, 'middle', txt, n.label));
+    nsvg.push('</g>');
+  }
+  // trunk rings (semantic LAG/ES bundles): the ellipse is DERIVED from the
+  // member links' midpoints — drag a node and the ring follows
+  const tsvg=[];
+  for(const t of doc.trunks){
+    const mids=[];
+    for(const [a,b] of t.pairs){
+      const A=byId[a], B=byId[b]; if(!A||!B) continue;
+      const [x1,yy1]=borderPoint(A,B.x+B.w/2,B.y+B.h/2);
+      const [x2,yy2]=borderPoint(B,A.x+A.w/2,A.y+A.h/2);
+      mids.push([(x1+x2)/2,(yy1+yy2)/2]);
+    }
+    if(!mids.length) continue;
+    const cx=mids.reduce((s,m)=>s+m[0],0)/mids.length;
+    const cy=mids.reduce((s,m)=>s+m[1],0)/mids.length;
+    const rx=Math.max(46, Math.max(...mids.map(m=>Math.abs(m[0]-cx)))+38);
+    const ry=Math.max(26, Math.max(...mids.map(m=>Math.abs(m[1]-cy)))+22);
+    const col=t.color||'#64748b';
+    tsvg.push('<ellipse cx="'+cx+'" cy="'+cy+'" rx="'+rx+'" ry="'+ry+'" fill="transparent" stroke="'+col+'" stroke-dasharray="6 4" stroke-width="1.6"/>');
+    tsvg.push(textEl(cx, cy+4, 11.5, 'middle', col, t.label,' paint-order="stroke" stroke="#fff" stroke-width="3"'));
+    W=Math.max(W,cx+rx); Hh=Math.max(Hh,cy+ry-y0-20);
+  }
+  // guide lines + labels (top layer)
+  for(const gl of doc.glines){
+    const B=gBox[gl.group]; if(!B) continue;
+    const ly=B.yB-(B.yB-B.yA)*gl.pct/100;
+    const col=gl.color||'#ef4444';
+    tsvg.push('<g data-gline="'+gl.line+'" data-gtop="'+B.yA+'" data-gbot="'+B.yB+'" style="cursor:ns-resize">'
+      +'<line x1="'+B.x0+'" y1="'+ly+'" x2="'+B.x1+'" y2="'+ly+'" stroke="'+col+'" stroke-width="'+(gl.pct>=100?4:2)+'" stroke-dasharray="7 4"/>'
+      +'<line x1="'+B.x0+'" y1="'+ly+'" x2="'+B.x1+'" y2="'+ly+'" stroke="transparent" stroke-width="12"/>'
+      +textEl(B.x1+8, ly+4, 11, 'start', col, gl.label,' paint-order="stroke" stroke="#fff" stroke-width="3"')+'</g>');
+    W=Math.max(W, B.x1+8+tw(gl.label)); Hh=Math.max(Hh, B.yB-y0-20);
+  }
+  const yEnd=y0+20+Hh+10;
+  return {svg:gsvg.join('')+esvg.join('')+nsvg.join('')+tsvg.join('')+lblsvg.join(''), y:yEnd, w:W+2,
+          meta:{W:W, top:y0+20+chShift, Hh:Hh, left:bShift}};
+}
+// borderPoint: where the ray from n's centre toward (tx,ty) leaves the shape.
+// It must leave the DRAWN outline: a rectangle clip on a diamond or an ellipse
+// stops on the bounding box, which for a rhombus can be a corner where the
+// shape is not — the endpoint then floats in empty space (or, on a cloud whose
+// ellipse is drawn outside the box, hides under the fill).
+function borderPoint(n,tx,ty){
+  const cx=n.x+n.w/2, cy=n.y+n.h/2, dx=tx-cx, dy=ty-cy;
+  if(dx===0&&dy===0) return [cx,cy];
+  const g=shapeAxes(n);
+  // rectangles keep the original min-of-ratios expression (bit-for-bit, so
+  // no rectangle figure moves); curved shapes divide the direction by the
+  // homogeneous outline norm, which lands exactly on the outline.
+  const s=g.p===Infinity
+    ? Math.min(g.a/Math.abs(dx||1e-9), g.b/Math.abs(dy||1e-9))
+    : 1/outlineNorm(g,dx,dy);
+  return [cx+dx*s, cy+dy*s];
+}
+// straight-edge obstacle routing: group boxes and non-incident nodes are
+// obstacles a straight edge must not cut through.
+// clipSegRect (Liang-Barsky): the [t0,t1] parameter window where segment
+// p->q lies inside the box, or null when it misses entirely.
+function clipSegRect(p,q,x0,y0,x1,y1){
+  let t0=0,t1=1; const dx=q[0]-p[0], dy=q[1]-p[1];
+  for(const [den,num] of [[-dx,p[0]-x0],[dx,x1-p[0]],[-dy,p[1]-y0],[dy,y1-p[1]]]){
+    if(den===0){ if(num<0) return null; continue; }
+    const t=num/den;
+    if(den<0){ if(t>t1) return null; if(t>t0) t0=t; }
+    else     { if(t<t0) return null; if(t<t1) t1=t; }
+  }
+  return t0<t1?[t0,t1]:null;
+}
+// routeAround: detour segment p->q around obstacle rects via the shortest
+// clear polyline. Candidate bend points are the corners of each obstacle
+// expanded by a 10px clearance margin; a sight-line is clear when it cuts
+// no obstacle interior. Dijkstra over that visibility graph keeps routes
+// short and calm, and is deterministic (fixed vertex order — endpoints,
+// then obstacles in caller order with corners clockwise from top-left —
+// breaks ties). Obstacles already containing an endpoint cannot be
+// avoided and are ignored. Returns the detour polyline, or null when the
+// straight segment is clear — callers keep their original rendering then.
+function segHitsObs(p,q,obs){
+  for(const r of obs)
+    if(clipSegRect(p,q,r.x+2,r.y+2,r.x+r.w-2,r.y+r.h-2)) return true;
+  return false;
+}
+function routeAround(p,q,obs){
+  const M=10;
+  const inside=(pt,r)=>pt[0]>r.x+2&&pt[0]<r.x+r.w-2&&pt[1]>r.y+2&&pt[1]<r.y+r.h-2;
+  obs=obs.filter(r=>!inside(p,r)&&!inside(q,r));
+  const blocked=(a,b)=>segHitsObs(a,b,obs);
+  if(!blocked(p,q)) return null;
+  const V=[p.slice(),q.slice()];
+  for(const r of obs){
+    const L=r.x-M, T=r.y-M, R=r.x+r.w+M, B=r.y+r.h+M;
+    for(const c of [[L,T],[R,T],[R,B],[L,B]])
+      if(!obs.some(o=>inside(c,o))) V.push(c);
+  }
+  const n=V.length, dist=Array(n).fill(Infinity), from=Array(n).fill(-1), done=Array(n).fill(false);
+  dist[0]=0;
+  for(;;){
+    let u=-1;
+    for(let i=0;i<n;i++) if(!done[i]&&(u<0||dist[i]<dist[u])) u=i;
+    if(u<0||u===1||dist[u]===Infinity) break;
+    done[u]=true;
+    for(let v=0;v<n;v++){
+      if(done[v]||blocked(V[u],V[v])) continue;
+      const d=dist[u]+Math.hypot(V[v][0]-V[u][0],V[v][1]-V[u][1]);
+      if(d<dist[v]-1e-9){ dist[v]=d; from[v]=u; }
+    }
+  }
+  if(dist[1]===Infinity) return null;    // boxed in: keep the straight line
+  const pts=[]; for(let v=1;v!==-1;v=from[v]) pts.push(V[v]); pts.reverse();
+  for(let i=1;i+1<pts.length;i++){ // drop duplicate / collinear midpoints
+    const a=pts[i-1], b=pts[i], c=pts[i+1];
+    const cr=(b[0]-a[0])*(c[1]-a[1])-(b[1]-a[1])*(c[0]-a[0]);
+    if(Math.hypot(b[0]-a[0],b[1]-a[1])<0.5||Math.abs(cr)<1e-6){ pts.splice(i,1); i--; }
+  }
+  return pts.length>2?pts:null;
+}
+// ---- bitfield ----
+function renderBitfield(b,y0){
+  const cell=Math.max(18,Math.min(28,Math.floor(760/b.unit))), rh=30, ruler=16;
+  const svg=[]; let y=y0+18;
+  svg.push('<text x="0" y="'+(y-4)+'" font-size="13" font-weight="600">'+esc(b.label)+'</text>');
+  // ruler: lsb0 (register style, default) = N-1..0; msb0 (RFC style) = 0..N-1
+  for(let i=0;i<b.unit;i++){
+    const bit=(b.numbering==='msb0') ? i : b.unit-1-i;
+    svg.push('<text x="'+(i*cell+cell/2)+'" y="'+(y+11)+'" font-size="8.5" text-anchor="middle" fill="#6f6e69">'+bit+'</text>');
+  }
+  y+=ruler;
+  let pos=0; // bit cursor
+  for(const f of b.fields){
+    if(f.wrap){ pos=Math.ceil((pos||1)/b.unit)*b.unit; continue; }
+    // '*' = variable-length: fill the remainder of the current row
+    const w0 = f.w==='*' ? (b.unit - (pos % b.unit)) : f.w;
+    let rem = w0;
+    while(rem>0){
+      const row=Math.floor(pos/b.unit), col=pos%b.unit;
+      const span=Math.min(rem, b.unit-col);
+      const x=col*cell, yy=y+row*rh;
+      const dash=f.optional?' stroke-dasharray="5 3"':'';
+      svg.push('<rect x="'+x+'" y="'+yy+'" width="'+(span*cell)+'" height="'+rh+'" fill="'+(f.color||'#fff')+'" stroke="#555"'+dash+'/>');
+      if(span*cell>String(f.name).length*6 || rem===w0){
+        let fs=11; const need=String(f.name).length*6.2;
+        if(need>span*cell-6) fs=Math.max(7,11*(span*cell-6)/need);
+        svg.push('<text x="'+(x+span*cell/2)+'" y="'+(yy+rh/2+fs*0.35)+'" font-size="'+fs+'" text-anchor="middle">'+esc(f.name)+'</text>');
+      }
+      if(f.note && rem===w0)
+        svg.push('<title>'+esc(f.note)+'</title>');
+      pos+=span; rem-=span;
+    }
+  }
+  const rows=Math.max(1,Math.ceil(pos/b.unit));
+  return {svg:svg.join(''), y:y+rows*rh+6, w:b.unit*cell+2};
+}
+// ---- table (with ^ rowspan / < colspan merging and per-cell marks) ----
+function renderTable(t,y0){
+  const rh=26; const svg=[]; let y=y0+18;
+  svg.push('<text x="0" y="'+(y-4)+'" font-size="13" font-weight="600">'+esc(t.label)+'</text>');
+  // grid: header tiers (from `head`/`cols` lines) then data rows
+  const H=t.heads.length;
+  const grid=t.heads.map(hr=>hr.map(c=>({v:c.v,m:c.m,hdr:true})))
+    .concat(t.rows.map(r=>r.cells.map(c=>({v:c.v,m:c.m}))));
+  const hlRow=r=>r>=H&&(t.rowmarks||[]).some(mk=>mk.r===r-H+1);
+  const alignOf=c=>(t.aligns&&t.aligns[c])||null;
+  const widths=t.cols.map((c,i)=>{
+    let w=30;
+    for(const hr of t.heads) if(!hr[i].m) w=Math.max(w,tw(hr[i].v));
+    for(const r of t.rows) if(!r.cells[i].m) w=Math.max(w,tw(r.cells[i].v));
+    return w;
+  });
+  if(t.colw){                       // colw: auto = natural, px fixed, % of natural total
+    const base=widths.reduce((a,b2)=>a+b2,0);
+    t.colw.vals.forEach((v,i)=>{
+      if(v.t==='px') widths[i]=v.v;
+      else if(v.t==='pct') widths[i]=v.v/100*base;
+    });
+  }
+  const totalW=widths.reduce((a,b)=>a+b,0);
+  // cell marks: h1..hN address header tiers top-down, r>=1 the data rows
+  const markOf=(r,c)=>(t.marks||[]).find(mk=>(mk.hdr?mk.r-1:H+mk.r-1)===r&&mk.c===c+1);
+  const yTop=y+4;
+  for(let r=0;r<grid.length;r++){
+    for(let c=0;c<grid[r].length;c++){
+      const cell=grid[r][c];
+      if(cell.m) continue;                    // merged into an anchor cell
+      let cs=1; while(c+cs<grid[r].length && grid[r][c+cs].m==='left') cs++;
+      let rs=1; while(r+rs<grid.length && grid[r+rs][c].m==='up') rs++;
+      const x=widths.slice(0,c).reduce((a,b)=>a+b,0);
+      const wsum=widths.slice(c,c+cs).reduce((a,b)=>a+b,0);
+      const yy=yTop+r*rh, h=rs*rh;
+      const mk=markOf(r,c);
+      const fill=mk?mk.color:(cell.hdr?'#eeede6':(hlRow(r)?'#fef3c7':'#fff'));
+      // addressable cells carry table-id:row:col (row 0 = bottom header tier)
+      const addrR = r>=H ? (r-H+1) : (r===H-1 ? 0 : null);
+      const addr = addrR===null ? '' : ' data-cell="'+t.id+':'+addrR+':'+(c+1)+'" style="cursor:pointer"';
+      svg.push('<rect x="'+x+'" y="'+yy+'" width="'+wsum+'" height="'+h+'" fill="'+fill+'" stroke="#c9c7bf"'+addr+'/>');
+      // alignment: headers centered; data follows GFM colon alignment (default left)
+      const al=cell.hdr?'center':(alignOf(c)||'left');
+      const tx=al==='center'?x+wsum/2:(al==='right'?x+wsum-7:x+7);
+      const anchor=al==='center'?'middle':(al==='right'?'end':'start');
+      svg.push('<text x="'+tx+'" y="'+(yy+h/2+4.3)+'" font-size="12" text-anchor="'+anchor+'"'+(cell.hdr?' font-weight="600"':'')+'>'+esc(cell.v)+'</text>');
+    }
+  }
+  const yEnd=yTop+grid.length*rh;
+  return {svg:svg.join(''), y:yEnd+6, w:totalW+2};
+}
+// ---- plot bars3d: deterministic isometric projection of a table ----
+function shade(hex,f){
+  const v=parseInt(hex.slice(1),16);
+  const c=x=>Math.round(Math.max(0,Math.min(255,x))).toString(16).padStart(2,'0');
+  return '#'+c(((v>>16)&255)*f)+c(((v>>8)&255)*f)+c((v&255)*f);
+}
+const PLOT_PALETTE=['#3b82f6','#22c55e','#f59e0b','#ef4444','#a855f7','#14b8a6','#eab308','#64748b'];
+function renderPlot(b,y0,doc){
+  const t=doc.blocks.find(x=>x.type==='table'&&x.id===b.tid);
+  const rows=t.rows.map(r=>r.cells.slice(1).map(c=>parseFloat(c.v)||0));
+  const rLab=t.rows.map(r=>r.cells[0].v), cLab=t.cols.slice(1);
+  const R=rows.length, C=cLab.length;
+  const zmax=Math.max(b.level||0, ...rows.flat(), 1);
+  const W2=20,H2=10,ZS=130/zmax,BAR=0.72;
+  const ox=R*W2+8, oy=y0+18+ZS*zmax+6;
+  const P=(r,c,z)=>[ox+(c-r)*W2, oy+(c+r)*H2-z*ZS];
+  const svg=[];
+  svg.push('<text x="0" y="'+(y0+14)+'" font-size="13" font-weight="600">'+esc(t.label)+' — bars3d</text>');
+  // floor grid edges
+  const F=[P(0,0,0),P(R,0,0),P(R,C,0),P(0,C,0)];
+  svg.push('<polygon points="'+F.map(p=>p.join(',')).join(' ')+'" fill="#f6f5ef" stroke="#d6d4cc"/>');
+  // bars, far to near
+  const order=[];
+  for(let r=0;r<R;r++)for(let c=0;c<C;c++)order.push([r,c]);
+  order.sort((a,b2)=>(a[0]+a[1])-(b2[0]+b2[1]));
+  for(const [r,c] of order){
+    const h=rows[r][c]; if(h<=0) continue;
+    const col=PLOT_PALETTE[c%PLOT_PALETTE.length];
+    const i0=r+(1-BAR)/2, i1=r+(1+BAR)/2, j0=c+(1-BAR)/2, j1=c+(1+BAR)/2;
+    const A=P(i0,j0,h),Bp=P(i1,j0,h),Cp=P(i1,j1,h),D=P(i0,j1,h);
+    const B0=P(i1,j0,0),C0=P(i1,j1,0),D0=P(i0,j1,0);
+    svg.push('<polygon points="'+[Bp,Cp,C0,B0].map(p=>p.join(',')).join(' ')+'" fill="'+shade(col,0.72)+'"/>');
+    svg.push('<polygon points="'+[Cp,D,D0,C0].map(p=>p.join(',')).join(' ')+'" fill="'+shade(col,0.55)+'"/>');
+    svg.push('<polygon points="'+[A,Bp,Cp,D].map(p=>p.join(',')).join(' ')+'" fill="'+col+'"/>');
+  }
+  // threshold plane (translucent, drawn over bars like the convention)
+  if(b.level!==null&&b.level!==undefined){
+    const L=[P(0,0,b.level),P(R,0,b.level),P(R,C,b.level),P(0,C,b.level)];
+    svg.push('<polygon points="'+L.map(p=>p.join(',')).join(' ')+'" fill="#ef4444" opacity="0.18" stroke="#ef4444" stroke-dasharray="6 4"/>');
+    svg.push(textEl(L[3][0]+8, L[3][1]+4, 11, 'start', '#ef4444', 'level '+b.level,' paint-order="stroke" stroke="#fff" stroke-width="3"'));
+  }
+  // axis labels
+  rLab.forEach((l,r)=>{ const p=P(r+0.5,-0.15,0); svg.push(textEl(p[0]-4,p[1]+10,10,'end','#6f6e69',l)); });
+  cLab.forEach((l,c)=>{ const p=P(R+0.15,c+0.5,0); svg.push(textEl(p[0]+4,p[1]+10,10,'start','#6f6e69',l)); });
+  // z ruler at the right-back corner
+  const zr=P(0,C,0);
+  svg.push('<line x1="'+(zr[0]+14)+'" y1="'+zr[1]+'" x2="'+(zr[0]+14)+'" y2="'+(zr[1]-zmax*ZS)+'" stroke="#8a8880"/>');
+  for(const z of [0, Math.round(zmax/2), Math.round(zmax)]){
+    svg.push('<line x1="'+(zr[0]+11)+'" y1="'+(zr[1]-z*ZS)+'" x2="'+(zr[0]+17)+'" y2="'+(zr[1]-z*ZS)+'" stroke="#8a8880"/>');
+    svg.push(textEl(zr[0]+21, zr[1]-z*ZS+3.5, 9.5, 'start', '#6f6e69', String(z)));
+  }
+  const w=P(R,C,0)[0]+70, hgt=P(R,C,0)[1]+24-y0;
+  return {svg:svg.join(''), y:y0+hgt, w:w};
+}
+// ---- wave ----
+function renderWave(w,y0){
+  const tickW=26, laneH=30, laneGap=12, nameW=Math.max(...w.signals.map(s=>tw(s.name)),60);
+  const svg=[]; let y=y0+18;
+  svg.push('<text x="0" y="'+(y-4)+'" font-size="13" font-weight="600">'+esc(w.label)+'</text>');
+  const ticks=Math.max(...w.signals.map(s=>s.lane.length));
+  w.signals.forEach((s,si)=>{
+    const top=y+8+si*(laneH+laneGap), bot=top+laneH-8;
+    svg.push('<text x="'+(nameW-10)+'" y="'+(top+(laneH-8)/2+4)+'" font-size="11.5" text-anchor="end" font-family="monospace">'+esc(s.name)+'</text>');
+    let d='', prev=null, li=0, dataIdx=0;
+    for(let i=0;i<s.lane.length;i++){
+      let ch=s.lane[i];
+      if(ch==='.') ch=prev||'0';
+      const x=nameW+i*tickW;
+      if(ch==='p'||ch==='n'){
+        const hiFirst=(ch==='p');
+        const a=hiFirst?top:bot, b=hiFirst?bot:top;
+        d+='M'+x+','+a+' L'+(x+tickW/2)+','+a+' L'+(x+tickW/2)+','+b+' L'+(x+tickW)+','+b+' ';
+        // draw transition edge at tick start
+        if(prev) d+='M'+x+','+top+' L'+x+','+bot+' ';
+      } else if(ch==='0'||ch==='1'){
+        const yy=(ch==='1')?top:bot;
+        const pv=(prev==='1')?top:(prev==='0'?bot:null);
+        if(pv!==null&&pv!==yy) d+='M'+x+','+pv+' L'+x+','+yy+' ';
+        d+='M'+x+','+yy+' L'+(x+tickW)+','+yy+' ';
+      } else if(ch==='x'){
+        svg.push('<rect x="'+x+'" y="'+top+'" width="'+tickW+'" height="'+(bot-top)+'" fill="url(#hatch)" stroke="#999"/>');
+      } else if(/[=\d]/.test(ch)){
+        // merge consecutive identical data chars
+        let j=i; while(j+1<s.lane.length && s.lane[j+1]==='.') j++;
+        const span=j-i+1;
+        svg.push('<rect x="'+x+'" y="'+top+'" width="'+(tickW*span)+'" height="'+(bot-top)+'" fill="#eef6ff" stroke="#7aa7d9"/>');
+        const lbl = ch==='='? (s.labels[dataIdx++]||'') : ch;
+        if(lbl) svg.push('<text x="'+(x+tickW*span/2)+'" y="'+((top+bot)/2+4)+'" font-size="10.5" text-anchor="middle">'+esc(lbl)+'</text>');
+        i=j;
+      }
+      prev=ch;
+    }
+    if(d) svg.push('<path d="'+d+'" fill="none" stroke="#1d4ed8" stroke-width="1.6"/>');
+  });
+  for(const g of w.gaps){
+    const x=nameW+g*tickW;
+    const hTotal=w.signals.length*(laneH+laneGap);
+    svg.push('<path d="M'+x+','+(y+4)+' q4,'+(hTotal/4)+' 0,'+(hTotal/2)+' q-4,'+(hTotal/4)+' 0,'+(hTotal/2)+'" fill="none" stroke="#999" stroke-width="2"/>');
+  }
+  const H=y+8+w.signals.length*(laneH+laneGap);
+  return {svg:svg.join(''), y:H, w:nameW+ticks*tickW+2};
+}
+// ============================================================
+// 3. UI + SVG export with embedded source (R14)
+// ============================================================
+const EXAMPLES={
+'blank canvas (start drawing!)':
+`figdown 0.1 topology
+title "Untitled"
+# Pick a kind, press "+ Node", drag things around, Link two nodes -
+# every action writes a line below. This text IS your file.`,
+'block-architecture (census #2)':
+`figdown 0.1 block
+title "Ingress datapath (excerpt)"
+group ing "Ingress Pipeline"
+node mac "MAC RX" in=ing
+node parser "Parser" in=ing
+node l2 "L2 Lookup" in=ing
+node l3 "L3 Lookup" in=ing color=#d1fae5
+node acl "ACL" in=ing
+node mmu "MMU / Buffer"
+flow right
+edge mac -> parser
+edge parser -> l2
+edge l2 -[L3 hit]-> l3
+edge l2 -[miss]-> acl style=dashed
+edge l3 -> mmu
+edge acl -> mmu`,
+'bitfield (census #1)':
+`figdown 0.1 bitfield
+bitfield gre "GRE Header (RFC 2784/2890)" unit=32 numbering=msb0
+field C 1
+field R 1
+field K 1
+field S 1
+field s 1
+field Recur 3
+field Flags 5
+field Ver 3
+field "Protocol Type" 16 color=#dbeafe
+field "Checksum (optional)" 16 optional
+field "Offset (optional)" 16 optional
+field "Key (optional)" 32 optional color=#fef9c3
+field "Sequence Number (optional)" 32 optional`,
+'table (census #3)':
+`figdown 0.1 table
+table fib "FIB (excerpt)"
+| Route          || Forwarding    ||
+| Prefix | Next Hop | Port | VRF   |
+|--------|:--------:|------|-------|
+| 10.0.0.0/8  | R2  | p1  | default |
+| 10.1.0.0/16 | R4  | p2  | default |
+| 0.0.0.0/0   | R3  | p2  | default |
+cell 2 highlight
+cell 3,2 color=#dbeafe`,
+'wave (census #4)':
+`figdown 0.1 wave
+wave por "Power-on reset sequencing"
+signal clk    pppppppp
+signal rst_n  00011111
+signal cfg_ok 00000111
+signal data   xxx=..=x labels="CFG,GO"`,
+'topology + pin (stability demo)':
+`figdown 0.1 topology
+title "Leaf-spine, monitor pinned top-right"
+node sp1 "Spine-1" shape=rounded color=#e0e7ff
+node sp2 "Spine-2" shape=rounded color=#e0e7ff
+node lf1 "Leaf-1" shape=rounded
+node lf2 "Leaf-2" shape=rounded
+node h1 "Host-A"
+node h2 "Host-B"
+node mon "Monitor" color=#fef9c3
+flow down
+rank sp1 sp2
+edge sp1 -- lf1
+edge sp1 -- lf2
+edge sp2 -- lf1
+edge sp2 -- lf2
+edge lf1 -- h1
+edge lf2 -- h2
+edge mon -[telemetry]- sp2 style=dotted
+pin mon at=340,0`,
+'EVPN fabric (topology + supplementary tables)':
+`figdown 0.1 topology
+title "VXLAN/EVPN Leaf-Spine Fabric — topology with plane notes"
+# ── Topology ────────────────────────────────────────────────────────
+node sp1 "Spine-1" shape=rounded color=#e0e7ff
+node sp2 "Spine-2" shape=rounded color=#e0e7ff
+node lf1 "Leaf-1 (VTEP)" shape=rounded
+node lf2 "Leaf-2 (VTEP)" shape=rounded
+node lf3 "Leaf-3 (VTEP)" shape=rounded
+node h1 "VM-A (VLAN 10)"
+node h2 "VM-B (VLAN 10)"
+node h3 "VM-C (VLAN 20)"
+flow down
+rank sp1 sp2
+rank lf1 lf2 lf3
+# underlay: every leaf peers with every spine
+edge sp1 -[eBGP]- lf1
+edge sp1 -- lf2
+edge sp1 -- lf3
+edge sp2 -- lf1
+edge sp2 -- lf2
+edge sp2 -- lf3
+edge lf1 -- h1
+edge lf2 -- h2
+edge lf3 -- h3
+# overlay: VXLAN tunnel between the two VTEPs sharing VNI 10010
+layer overlay "VXLAN tunnels" z=2
+edge lf1 <-[VXLAN VNI 10010]-> lf2 style=dashed color=#dc2626 layer=overlay
+# ── Supplementary knowledge ─────────────────────────────────────────
+table vni "VNI mapping"
+| Leaf   | VLAN | VNI   | Type |
+|--------|:----:|-------|------|
+| Leaf-1 | 10   | 10010 | L2   |
+| Leaf-2 | 10   | 10010 | L2   |
+| Leaf-3 | 20   | 10020 | L2   |
+cell 1,3 color=#fee2e2
+cell 2,3 color=#fee2e2
+table planes "Fabric planes"
+| Plane           | Protocol          | Role                      |
+|-----------------|-------------------|---------------------------|
+| Underlay        | eBGP              | loopback reachability     |
+| Overlay control | MP-BGP EVPN       | MAC/IP route distribution |
+| Overlay data    | VXLAN (UDP 4789)  | L2-in-L3 encapsulation    |`,
+'EVPN-VXLAN IRB (vendor-style, hand-pinned)':
+`figdown 0.1 topology
+title "EVPN-VXLAN IRB — leaves with IP-VRF and bridge domains"
+# Complex vendor-style figure, fully hand-laid-out (tier 3, D6 two-level
+# coordinates): each group is anchored once; members are group-local, so
+# moving a leaf = editing one pin line.
+# ── Overlay cloud + spines ─────────────────────────────────────────
+node cloud "EVPN-VXLAN" shape=cloud color=#cfe8f7 stroke=#7fb8d8
+size cloud w=620 h=110
+pin  cloud at=330,90
+node sp1 "Spine-1" shape=rounded color=#9aa2ad text=#ffffff
+pin  sp1 at=480,0
+node sp2 "Spine-2" shape=rounded color=#9aa2ad text=#ffffff
+pin  sp2 at=700,0
+# ── Leaves: group = leaf box; members = IP-VRF badge + bridge domains
+group leaf2 "SRL LEAF-2"
+pin  leaf2 at=90,235
+node vrf2 "IP-VRF-10\\nRD1/RT10\\nVNI10" in=leaf2 color=#1e3a8a text=#ffffff
+pin  vrf2 at=80,0
+node bd2  "BD2\\nRD41/RT2\\nVNI2"   in=leaf2 style=dashed stroke=#1d4ed8
+pin  bd2 at=0,85
+node bd24a "BD24\\nRD22/RT24\\nVNI24" in=leaf2 style=dashed stroke=#1d4ed8
+pin  bd24a at=160,85
+group leaf4 "SRL LEAF-4"
+pin  leaf4 at=540,235
+node vrf4 "IP-VRF-10\\nRD1/RT10\\nVNI10" in=leaf4 color=#1e3a8a text=#ffffff
+pin  vrf4 at=80,0
+node bd24b "BD24\\nRD41/RT24\\nVNI24" in=leaf4 style=dashed stroke=#1d4ed8
+pin  bd24b at=0,85
+node bd4  "BD4\\nRD42/RT4\\nVNI4"  in=leaf4 style=dashed stroke=#1d4ed8
+pin  bd4 at=160,85
+group leaf3 "SRL LEAF-3"
+pin  leaf3 at=1040,235
+node vrf3 "IP-VRF-10\\nRD1/RT10\\nVNI10" in=leaf3 color=#1e3a8a text=#ffffff
+pin  vrf3 at=0,0
+node bd3  "BD3\\nRD31/RT3\\nVNI3"  in=leaf3 style=dashed stroke=#1d4ed8
+pin  bd3 at=0,85
+# ── Edge devices and hosts ──────────────────────────────────────────
+node ce3 "CE-3\\nIP-20.1.1.3/24\\nMAC-00:01:03:FF:00:0B" shape=rounded
+pin  ce3 at=0,430
+node h2  "HOST-2\\nIP-101.1.1.2/24\\nMAC-00:00:00:00:00:02" color=#bae6fd
+pin  h2 at=180,500
+node srv "SERVER-1\\nHOST-12  IP-101.1.1.1/24\\nMAC-00:00:64:01:01:01"
+pin  srv at=390,500
+node h4  "HOST-4\\nIP-104.1.1.1/24\\nMAC-00:00:00:00:00:04" color=#bae6fd
+pin  h4 at=660,500
+node h3  "HOST-3\\nIP-103.1.1.1/24\\nMAC-00:00:00:00:00:03" shape=rounded
+pin  h3 at=1020,500
+# fabric attachment
+edge sp1 -- cloud
+edge sp2 -- cloud
+edge cloud ["irb0.24\\nAnycast-IP .254"] -- vrf2
+edge cloud -- vrf4
+edge cloud -- vrf3
+# PE-CE and access links, port labels at the endpoints
+edge bd2 -["PE-CE\\nBGP IPv4"]- [20.1.1.2/24] ce3 style=dashed color=#1d4ed8
+edge bd2 [e1/12.24] -- h2
+edge bd24a [lag1.24] -- srv
+edge bd24b [lag1.24] -- srv
+# multi-homing: declare the SEMANTICS (these links form one bundle) and
+# the renderer derives the dashed ring — it follows the nodes wherever
+# they move; no coordinates involved
+bundle es1 "ES-1 / LAG-1" bd24a--srv, bd24b--srv color=#0ea5e9
+edge bd4 [e1/13.4] -- h4
+edge bd3 [e1/2.3] -- h3`,
+'VXLAN encapsulation (frames + tables)':
+`figdown 0.1 table
+title "VXLAN Overview — MAC-in-UDP encapsulation"
+# Cell order IS byte order — no pin/size/rank/flow needed (R25-safe).
+# VLAN→VNI relation carried by the shared vni class (edges cannot
+# attach to table cells: OQ-S17).
+# ── Semantic classes (R37: the meaning rides on the element) ────────
+class outer  "Outer header added by the ingress VTEP (50B total)" color=#fcd34d
+class vni    "VLAN ID 12-bit → VNI 24-bit: the identifier VXLAN widens" color=#fcd34d stroke=#ea580c
+class inner  "Original L2 frame field — carried verbatim as VXLAN payload" color=#bae6fd
+class opaque "Upper-layer payload — opaque to the VTEP" color=#9aa2ad
+class oldfcs "Original FCS — dropped at encapsulation, not carried" color=#93c5fd
+class newfcs "New FCS — recomputed over the outer frame" color=#bbf7d0 stroke=#16a34a
+# ── Classical Ethernet frame ────────────────────────────────────────
+table eth "Classical Ethernet frame — cells left to right are on-the-wire order"
+| Ethernet header |||| Data | Trailer |
+|---------|---------|-----------|----------|------------------|--------|
+| DMAC 6B | SMAC 6B | 802.1Q 4B | Etype 2B | Payload 46–1500B | FCS 4B |
+cell 1,1 class=inner
+cell 1,2 class=inner
+cell 1,3 class=vni
+cell 1,4 class=inner
+cell 1,5 class=opaque
+cell 1,6 class=oldfcs
+# ── VXLAN-encapsulated frame ────────────────────────────────────────
+table vxlan "VXLAN-encapsulated frame — cells left to right are on-the-wire order"
+| Outer headers |||| Original L2 frame |||| New trailer |
+|---------------|--------------|--------------|----------|---------|---------|----------|------------------|--------------|
+| Outer MAC 14B | Outer IP 20B | Outer UDP 8B | VXLAN 8B | DMAC 6B | SMAC 6B | Etype 2B | Payload 46–1500B | FCS (new) 4B |
+cell 1,1 class=outer
+cell 1,2 class=outer
+cell 1,3 class=outer
+cell 1,4 class=vni
+cell 1,5 class=inner
+cell 1,6 class=inner
+cell 1,7 class=inner
+cell 1,8 class=opaque
+cell 1,9 class=newfcs
+# ── Supplementary knowledge ─────────────────────────────────────────
+table overhead "Encapsulation overhead (MAC-in-UDP)"
+| Segment    | Size | Notes                          |
+|------------|:----:|--------------------------------|
+| Outer MAC  | 14B  | new Ethernet header            |
+| Outer IP   | 20B  | VTEP-to-VTEP                   |
+| UDP        | 8B   | dst port 4789                  |
+| VXLAN      | 8B   | carries the 24-bit VNI         |
+| Total      | 50B  | added to every original frame  |
+cell 5 highlight
+table facts "Why VXLAN"
+| Fact                    | Value                    |
+|-------------------------|--------------------------|
+| VLAN address space      | 12 bits (4K segments)    |
+| VNI address space       | 24 bits (16M segments)   |
+| Encapsulation           | MAC-in-UDP               |`,
+'partition map (pool + global thresholds)':
+`figdown 0.1 block
+title "Partition map — a resource pool with global thresholds"
+# The GENERIC partition-and-threshold map: one pool, N groups, global
+# threshold lines shared by all (group-level scope; per-node scope exists
+# for figures whose semantics are per-column). Instances of this category:
+# buffer quotas, memory maps, watermark/level charts.
+group pool "Resource pool (units)" gap=0
+node g0 "Group 0" in=pool color=transparent
+node g1 "Group 1" in=pool color=transparent
+node g2 "Group 2" in=pool color=transparent
+node g3 "Group 3" in=pool color=transparent
+flow down
+rank g0 g1 g2 g3
+size g0 w=120 h=190
+size g1 w=120 h=190
+size g2 w=120 h=190
+size g3 w=120 h=190
+line "Max cap"                 in=pool at=80%
+line "Reserved"  in=pool at=15%
+fill 15% in=pool color=#a3c93a`,
+'table data -> heatmap + bars3d plot':
+`figdown 0.1 table
+title "Per-(port, queue) occupancy — one table, two projections"
+table hm "Queue occupancy counters"
+| Port\\Q | Q0 | Q1 | Q2 | Q3 | Q4 | Q5 |
+|--------|:--:|:--:|:--:|:--:|:--:|:--:|
+| P0     | 12 | 55 | 31 |  8 | 72 | 19 |
+| P1     | 44 | 90 | 22 | 61 | 15 | 38 |
+| P2     |  5 | 27 | 83 | 47 | 33 | 96 |
+| P3     | 68 | 14 | 40 | 29 | 51 |  7 |
+# heatmap marks: light red = over 40, strong red = over 80
+cell 1,3 color=#fecaca
+cell 1,6 color=#fca5a5
+cell 2,2 color=#fecaca
+cell 2,3 color=#fca5a5
+cell 2,5 color=#fecaca
+cell 3,4 color=#fca5a5
+cell 3,5 color=#fecaca
+cell 3,7 color=#fca5a5
+cell 4,2 color=#fecaca
+cell 4,6 color=#fecaca
+# the same table data, plotted on X-Y-Z axes (rows=X, columns=Y, values=Z)
+plot hm level=40`,
+'mixed document':
+`figdown 0.1 block
+title "CPU tag insertion"
+node cpu "CPU"
+node tagger "Tag Insert" color=#fee2e2
+node port "Egress Port"
+flow right
+edge cpu -[DSA tag]-> tagger
+edge tagger -> port
+bitfield tag "CPU Tag" unit=16
+field Op 2
+field Prio 3
+field RSVD 3
+field "Dest Port" 8
+table map "Op encoding"
+| Op | Meaning  | Notes  |
+|----|----------|--------|
+| 0  | From CPU | DSA v1 |
+| 1  | To CPU   | ^^     |
+| 2  | Mirror         ||
+cell 2 highlight
+cell 3,1 color=#fee2e2`
+};
+const $=id=>document.getElementById(id);
+const sel=$('examples');
+Object.keys(EXAMPLES).forEach(k=>{const o=document.createElement('option');o.textContent=k;sel.appendChild(o);});
+sel.onchange=()=>{
+  if(isDirty() && !confirm('Discard unsaved changes in '+fileName+'?')){ return; }
+  fdHandle=null; fileName='untitled.fd'; savedText=null; selectedId=null;
+  $('src').value=EXAMPLES[sel.value]; refresh();
+};
+$('src').addEventListener('input',refresh);
+let lastSVG='', lastMeta=null, lastPad={x:0,y:0}, lastDoc=null;
+// ---- direct manipulation: every GUI action is a text edit ----
+const SCENE_KW=/^(figdown|title|node|group|boundary|edge|layer|flow|rank|pin|size|line|fill|bundle|class|routing|route|render)\b/;
+function applyPins(pins){ // pins: array of [id, px, py] — one text update, one refresh
+  const lines=$('src').value.split('\n');
+  for(const [id,px,py] of pins){
+    const pinRe=new RegExp('^\\s*pin\\s+'+id+'\\b');
+    const newLine='pin '+id+' at='+px+','+py;
+    const idx=lines.findIndex(l=>pinRe.test(l));
+    if(idx>=0){ lines[idx]=newLine; }
+    else{
+      // structure stays on top; materialized layout lives in a trailing
+      // section, so an AI reader gets the full meaning before any pins (R25)
+      let mark=lines.findIndex(l=>l.trim()==='render');
+      if(mark<0){ lines.push('render'); mark=lines.length-1; }
+      lines.push(newLine);
+    }
+  }
+  $('src').value=lines.join('\n'); refresh();
+}
+// D6 two-level pins: collect the full pin set for the current picture.
+// overrides = {id:{x,y}} absolute-canvas coords for items being moved
+// (for a group id, the new origin). Group members are written relative
+// to their group's origin, so later group moves edit ONE line.
+//
+// Snapshot the INTENDED absolute-canvas position of every node and every
+// group origin from the current render, applying any overrides. Kept
+// separate from pin emission so the same absolute targets can be re-emitted
+// against a DIFFERENT frame (see materializePins: the pinned re-render has
+// its own left/top because back-edge routing — hence chShift — changes once
+// the scene is pinned).
+function snapshotAbs(overrides){
+  const svg=$('out').querySelector('svg'); if(!svg||!lastDoc) return null;
+  const groups={}, nodes={};
+  svg.querySelectorAll('[data-group]').forEach(g=>{
+    const gid=g.dataset.group;
+    groups[gid]=(overrides&&overrides[gid])||{x:+g.dataset.gx, y:+g.dataset.gy};
+  });
+  svg.querySelectorAll('[data-node]').forEach(g=>{
+    const id=g.dataset.node;
+    nodes[id]=(overrides&&overrides[id])||{x:+g.dataset.x, y:+g.dataset.y};
+  });
+  return {groups,nodes};
+}
+// Emit [id,px,py] pin rows for a snapshot, relative to a given frame
+// {left,top}. Members are written group-local (relative to their group's
+// snapshotted origin); ungrouped nodes and group origins are canvas px.
+function emitPins(snap, frame){
+  const left=frame.left||0, top=frame.top||0, pins=[];
+  for(const gid in snap.groups){
+    const o=snap.groups[gid];
+    pins.push([gid, Math.round(o.x-left), Math.round(o.y-top)]);
+  }
+  for(const id in snap.nodes){
+    const abs=snap.nodes[id];
+    const nd=lastDoc.nodes.find(n=>n.id===id);
+    const o=nd&&nd.group?snap.groups[nd.group]:null;
+    if(o) pins.push([id, Math.round(abs.x-o.x), Math.round(abs.y-o.y)]);
+    else  pins.push([id, Math.round(abs.x-left), Math.round(abs.y-top)]);
+  }
+  return pins;
+}
+// Build the source text that applyPins(pins) would produce, WITHOUT touching
+// the textarea or re-rendering — used to probe the pinned-regime frame headlessly.
+function textWithPins(baseText, pins){
+  const lines=baseText.split('\n');
+  for(const [id,px,py] of pins){
+    const re=new RegExp('^\\s*pin\\s+'+id+'\\b');
+    const nl='pin '+id+' at='+px+','+py;
+    const idx=lines.findIndex(l=>re.test(l));
+    if(idx>=0){ lines[idx]=nl; }
+    else{ if(lines.findIndex(l=>l.trim()==='render')<0) lines.push('render'); lines.push(nl); }
+  }
+  return lines.join('\n');
+}
+// Back-compat shim: one-pass collect+emit against the current frame.
+function collectPins(overrides){
+  const snap=snapshotAbs(overrides); if(!snap) return [];
+  return emitPins(snap, {left:lastMeta.left, top:lastMeta.top});
+}
+// True when every scene node AND every group already carries a pin line, so
+// the scene is fully materialized and a drag is a single-line pin update
+// (the current, correct behaviour — no re-materialization needed).
+function scenePinnedComplete(){
+  if(!lastDoc) return false;
+  const P=lastDoc.pins||{};
+  const scene=lastDoc.nodes.filter(n=>!n.boundary);
+  if(!scene.length) return false;
+  return scene.every(n=>P[n.id]!==undefined)
+      && (lastDoc.groups||[]).every(g=>P[g.id]!==undefined);
+}
+// Axiom-3 materialization. On the FIRST touch of an unpinned (or partially
+// pinned) scene, freeze EVERY node/group at its current rendered position so
+// the one dragged element moves and nothing else does. A single pass is not
+// enough: writing pins flips back-edges from return-rings to straight edges,
+// which collapses chShift and moves the whole figure's origin (meta.top). So
+// we snapshot the intended ABSOLUTE targets first, materialize once to reach
+// the pinned regime (which fixes the final frame), then re-emit the SAME
+// absolute targets against that final frame. The pinned regime is a fixed
+// point, so pass 2 round-trips to the pixel and a third pass would be a no-op.
+function materializePins(overrides){
+  if(scenePinnedComplete()){ applyPins(collectPins(overrides)); return; }
+  const snap=snapshotAbs(overrides); if(!snap){ return; }
+  // Pass 1 is a HEADLESS probe (parse+render, no DOM/textarea write) purely to
+  // learn the pinned-regime frame; only pass 2 actually edits the textarea, so
+  // the whole materialization is a single undo step.
+  let frame={left:lastMeta.left, top:lastMeta.top};
+  try{
+    const probeText=textWithPins($('src').value, emitPins(snap, frame));
+    const pr=parse(probeText);
+    if(!pr.errs.length){ const rr=render(pr.doc,{title:true}); if(rr.sceneMeta) frame=rr.sceneMeta; }
+  }catch(e){ /* fall back to single-frame emit if the probe fails */ }
+  applyPins(emitPins(snap, frame));
+}
+function setNodeLabel(id,label){
+  const lines=$('src').value.split('\n');
+  const re=new RegExp('^(\\s*node\\s+'+id+'\\s+)("[^"]*"|\\S+)?');
+  const idx=lines.findIndex(l=>new RegExp('^\\s*node\\s+'+id+'\\b').test(l));
+  if(idx<0) return;
+  lines[idx]=lines[idx].replace(re,(m,p1)=>p1+'"'+label.replace(/"/g,'')+'"');
+  $('src').value=lines.join('\n'); refresh();
+}
+function installDirectEdit(){
+  const svg=$('out').querySelector('svg');
+  if(!svg||!lastMeta) return;
+  const toModel=ev=>{
+    const pt=new DOMPoint(ev.clientX,ev.clientY).matrixTransform(svg.getScreenCTM().inverse());
+    return {x:pt.x-lastPad.x, y:pt.y-lastPad.y};
+  };
+  // group drag: move the container AND all member nodes together
+  svg.querySelectorAll('[data-group]').forEach(gg=>{
+    gg.addEventListener('pointerdown',ev=>{
+      ev.preventDefault(); ev.stopPropagation();
+      const gid=gg.dataset.group, start=toModel(ev);
+      const memberIds=lastDoc.nodes.filter(n=>n.group===gid).map(n=>n.id);
+      const memberGs=memberIds.map(id=>svg.querySelector('[data-node="'+id+'"]')).filter(Boolean);
+      let dx=0,dy=0,moved=false;
+      const mv=e=>{ const p=toModel(e); dx=p.x-start.x; dy=p.y-start.y;
+        if(Math.abs(dx)+Math.abs(dy)>2) moved=true;
+        const t='translate('+dx+','+dy+')';
+        gg.setAttribute('transform',t); memberGs.forEach(m=>m.setAttribute('transform',t)); };
+      const up=()=>{ window.removeEventListener('pointermove',mv); window.removeEventListener('pointerup',up);
+        if(!moved){ gg.removeAttribute('transform'); memberGs.forEach(m=>m.removeAttribute('transform')); return; }
+        // D6: move the group's ORIGIN; members are (or become) group-local,
+        // so future drags of this group edit a single pin line
+        const overrides={ [gid]: {x:+gg.dataset.gx+dx, y:+gg.dataset.gy+dy} };
+        memberGs.forEach(m=>{ overrides[m.dataset.node]={x:+m.dataset.x+dx, y:+m.dataset.y+dy}; });
+        materializePins(overrides);
+        $('status').textContent='group drag → moved origin of "'+gid+'" (members ride along as group-local pins)'; };
+      window.addEventListener('pointermove',mv); window.addEventListener('pointerup',up);
+    });
+    gg.addEventListener('dblclick',ev=>{
+      ev.preventDefault(); ev.stopPropagation();
+      const gid=gg.dataset.group;
+      const gr=lastDoc.groups.find(x=>x.id===gid);
+      const nv=prompt('Label for group "'+gid+'":', gr?gr.label:'');
+      if(nv!==null && nv!==''){
+        const lines=$('src').value.split('\n');
+        const idx=lines.findIndex(l=>new RegExp('^\\s*group\\s+'+gid+'\\b').test(l));
+        if(idx>=0){
+          lines[idx]=lines[idx].replace(new RegExp('^(\\s*group\\s+'+gid+'\\s+)("[^"]*"|\\S+)?'),(m,p1)=>p1+'"'+nv.replace(/"/g,'')+'"');
+          $('src').value=lines.join('\n'); refresh();
+          $('status').textContent='double-click → rewrote group '+gid+' label (GUI action = text edit)';
+        }
+      }
+    });
+  });
+  // table cells: click to color with the current picker value
+  svg.querySelectorAll('[data-cell]').forEach(rc=>{
+    rc.addEventListener('click',ev=>{
+      ev.preventDefault();
+      const [tid,r,c]=rc.dataset.cell.split(':');
+      setCellColor(tid,+r,+c,$('fillpick').value);
+    });
+  });
+  // double-click empty canvas = create a node right there (draw.io habit)
+  svg.addEventListener('dblclick',ev=>{
+    if(ev.target.closest('[data-node],[data-group],[data-cell],[data-gline],.rsz')) return;
+    ev.preventDefault();
+    const p=toModel(ev);
+    addNodeAt(Math.round(p.x), Math.round(p.y));
+  });
+  // marquee group creation (armed by the ⬚ Group button)
+  svg.addEventListener('pointerdown',ev=>{
+    if(!groupArm) return;
+    if(ev.target.closest('[data-node],[data-group]')) return;
+    ev.preventDefault();
+    const start=toModel(ev);
+    const NS='http://www.w3.org/2000/svg';
+    const band=document.createElementNS(NS,'rect');
+    band.setAttribute('fill','rgba(37,99,235,.08)');
+    band.setAttribute('stroke','#2563eb'); band.setAttribute('stroke-dasharray','4 3');
+    svg.appendChild(band);
+    let x0=start.x,y0=start.y,x1=x0,y1=y0;
+    const draw=()=>{ band.setAttribute('x',Math.min(x0,x1)+lastPad.x); band.setAttribute('y',Math.min(y0,y1)+lastPad.y);
+      band.setAttribute('width',Math.abs(x1-x0)); band.setAttribute('height',Math.abs(y1-y0)); };
+    const mv=e=>{ const p=toModel(e); x1=p.x; y1=p.y; draw(); };
+    const up=()=>{ window.removeEventListener('pointermove',mv); window.removeEventListener('pointerup',up);
+      band.remove(); groupArm=false; $('groupmode').style.fontWeight='';
+      const [mx0,mx1]=[Math.min(x0,x1),Math.max(x0,x1)], [my0,my1]=[Math.min(y0,y1),Math.max(y0,y1)];
+      const ids=[];
+      svg.querySelectorAll('[data-node]').forEach(g=>{
+        const nd=lastDoc.nodes.find(n=>n.id===g.dataset.node);
+        if(nd&&nd.group) return;                     // one nesting level only
+        const cx=+g.dataset.x, cy=+g.dataset.y;
+        if(cx>=mx0&&cx<=mx1&&cy>=my0&&cy<=my1) ids.push(g.dataset.node);
+      });
+      if(ids.length) createGroup(ids);
+      else $('status').textContent='marquee selected no ungrouped nodes'; };
+    window.addEventListener('pointermove',mv); window.addEventListener('pointerup',up);
+  });
+  // threshold lines: vertical drag rewrites the at=% on that source line
+  svg.querySelectorAll('[data-gline]').forEach(gL=>{
+    gL.addEventListener('pointerdown',ev=>{
+      ev.preventDefault(); ev.stopPropagation();
+      const srcLine=+gL.dataset.gline, top=+gL.dataset.gtop, bot=+gL.dataset.gbot;
+      const start=toModel(ev); let dy=0;
+      const mv=e=>{ dy=toModel(e).y-start.y; gL.setAttribute('transform','translate(0,'+dy+')'); };
+      const up=()=>{ window.removeEventListener('pointermove',mv); window.removeEventListener('pointerup',up);
+        const lines=$('src').value.split('\n');
+        const cur=/at=(\d+(?:\.\d+)?)%?/.exec(lines[srcLine-1]||'');
+        if(!cur){ gL.removeAttribute('transform'); return; }
+        const ly0=bot-(bot-top)*(+cur[1])/100;
+        let pct=Math.round((bot-(ly0+dy))/(bot-top)*100);
+        pct=Math.max(0,Math.min(100,pct));
+        lines[srcLine-1]=lines[srcLine-1].replace(/at=\d+(?:\.\d+)?%?/,'at='+pct+'%');
+        $('src').value=lines.join('\n'); refresh();
+        $('status').textContent='line drag → rewrote at='+pct+'% (GUI action = text edit)'; };
+      window.addEventListener('pointermove',mv); window.addEventListener('pointerup',up);
+    });
+  });
+  svg.querySelectorAll('[data-node]').forEach(g=>{
+    g.addEventListener('pointerdown',ev=>{
+      ev.preventDefault();
+      const id=g.dataset.node, x0=+g.dataset.x, y0=+g.dataset.y, start=toModel(ev);
+      let dx=0,dy=0,moved=false;
+      const mv=e=>{ const p=toModel(e); dx=p.x-start.x; dy=p.y-start.y;
+        if(Math.abs(dx)+Math.abs(dy)>2) moved=true;
+        g.setAttribute('transform','translate('+dx+','+dy+')'); };
+      const up=()=>{ window.removeEventListener('pointermove',mv); window.removeEventListener('pointerup',up);
+        if(!moved){ g.removeAttribute('transform');
+          if(linkArm!==null){
+            if(linkArm===undefined){ linkArm=id; $('status').textContent='Link mode: now click the target node'; return; }
+            if(linkArm!==id){
+              const lines=$('src').value.split('\n');
+              let last=-1; lines.forEach((l,i)=>{ if(SCENE_KW.test(l.trim())) last=i; });
+              lines.splice(last+1,0,'edge '+linkArm+' -> '+id);
+              $('src').value=lines.join('\n'); refresh();
+              $('status').textContent='link → wrote "edge '+linkArm+' -> '+id+'" (GUI action = text edit)';
+            }
+            linkArm=null; $('linkmode').style.fontWeight='';
+            return;
+          }
+          select(id); return; }
+        // pin-on-first-touch: the first drag freezes everything (groups get
+        // an origin pin; members become group-local) — then applies the drag
+        materializePins({ [id]: {x:x0+dx, y:y0+dy} });
+        const nd=lastDoc.nodes.find(n=>n.id===id);
+        $('status').textContent='drag → wrote pin for '+id+
+          (nd&&nd.group?' (group-local, relative to "'+nd.group+'")':' (canvas px)')+
+          ' — GUI action = text edit'; };
+      window.addEventListener('pointermove',mv); window.addEventListener('pointerup',up);
+    });
+    g.addEventListener('dblclick',ev=>{
+      ev.preventDefault();
+      const id=g.dataset.node;
+      const nd=lastDoc.nodes.find(n=>n.id===id);
+      const nv=prompt('Label for node "'+id+'":', nd?nd.label:'');
+      if(nv!==null && nv!==''){ setNodeLabel(id,nv);
+        $('status').textContent='double-click → rewrote node '+id+' label (GUI action = text edit)'; }
+    });
+  });
+}
+let selectedId=null, linkArm=null;
+function nodeLineIdx(lines,id){ return lines.findIndex(l=>new RegExp('^\\s*node\\s+'+id+'\\b').test(l)); }
+function setNodeOption(id,key,val){
+  const lines=$('src').value.split('\n');
+  const idx=nodeLineIdx(lines,id); if(idx<0) return;
+  const re=new RegExp('\\b'+key+'=\\S+');
+  lines[idx]=re.test(lines[idx]) ? lines[idx].replace(re,key+'='+val) : lines[idx]+' '+key+'='+val;
+  $('src').value=lines.join('\n'); refresh();
+}
+function deleteNode(id){
+  // edges are found via the parsed doc (their line numbers), so inline
+  // [labels] and every operator spelling are handled uniformly
+  const edgeLines=new Set((lastDoc?lastDoc.edges:[]).filter(e=>e.a===id||e.b===id).map(e=>e.line));
+  const lines=$('src').value.split('\n').filter((l,li)=>{
+    if(edgeLines.has(li+1)) return false;
+    const t=l.trim();
+    if(new RegExp('^(node|pin|size)\\s+'+id+'\\b').test(t)) return false;
+    const rm=/^rank\s+(.+)$/.exec(t);
+    if(rm && rm[1].trim().split(/\s+/).includes(id)){
+      const rest=rm[1].trim().split(/\s+/).filter(x=>x!==id);
+      return rest.length>=2 ? true : false;  // drop rank line if fewer than 2 remain
+    }
+    return true;
+  });
+  selectedId=null;
+  $('src').value=lines.join('\n'); refresh();
+}
+function moveNodeLine(id,dir){ // dir +1 = later line = painted on top
+  const lines=$('src').value.split('\n');
+  const idx=nodeLineIdx(lines,id); if(idx<0) return;
+  const isNode=l=>/^\s*node\s+/.test(l);
+  let j=idx+dir;
+  while(j>=0&&j<lines.length&&!isNode(lines[j])) j+=dir;
+  if(j<0||j>=lines.length) { $('status').textContent='already at the '+(dir>0?'top':'bottom')+' of paint order'; return; }
+  [lines[idx],lines[j]]=[lines[j],lines[idx]];
+  $('src').value=lines.join('\n'); refresh();
+  $('status').textContent=(dir>0?'raised':'lowered')+' '+id+' — its line moved '+(dir>0?'down':'up')+' in the text (line order = paint order)';
+}
+function select(id){
+  selectedId=id;
+  const has=id!==null && lastDoc && lastDoc.nodes.some(n=>n.id===id);
+  ['fillpick','delnode','raise','lower'].forEach(b=>$(b).disabled=!has);
+  if(has){
+    const nd=lastDoc.nodes.find(n=>n.id===id);
+    if(nd.color&&/^#([0-9a-fA-F]{6})$/.test(nd.color)) $('fillpick').value=nd.color;
+    highlightSelection();
+  }
+  drawResizeHandle();
+}
+// corner handle on the selected node: dragging it writes a `size` line
+function setSize(id,w,h){
+  const lines=$('src').value.split('\n');
+  const nl='size '+id+' w='+w+' h='+h;
+  const idx=lines.findIndex(l=>new RegExp('^\\s*size\\s+'+id+'\\b').test(l));
+  if(idx>=0) lines[idx]=nl;
+  else{
+    let mark=lines.findIndex(l=>l.trim()==='render');
+    if(mark<0) lines.push('render');
+    lines.push(nl);
+  }
+  $('src').value=lines.join('\n'); refresh(); select(id);
+  $('status').textContent='resize → wrote "'+nl+'" (GUI action = text edit)';
+}
+function drawResizeHandle(){
+  const svg=$('out').querySelector('svg'); if(!svg) return;
+  svg.querySelectorAll('.rsz').forEach(x=>x.remove());
+  if(!selectedId) return;
+  const g=svg.querySelector('[data-node="'+selectedId+'"]'); if(!g) return;
+  const sh=g.querySelector('rect,polygon,ellipse'); if(!sh) return;
+  const b=sh.getBBox();
+  const NS='http://www.w3.org/2000/svg';
+  const hd=document.createElementNS(NS,'rect');
+  hd.setAttribute('class','rsz');
+  hd.setAttribute('x',b.x+b.width-5); hd.setAttribute('y',b.y+b.height-5);
+  hd.setAttribute('width',10); hd.setAttribute('height',10);
+  hd.setAttribute('fill','#2563eb'); hd.setAttribute('stroke','#fff');
+  hd.style.cursor='nwse-resize';
+  svg.appendChild(hd);
+  hd.addEventListener('pointerdown',ev=>{
+    ev.preventDefault(); ev.stopPropagation();
+    const id=selectedId, w0=b.width, h0=b.height;
+    const pt0=new DOMPoint(ev.clientX,ev.clientY).matrixTransform(svg.getScreenCTM().inverse());
+    const NS2='http://www.w3.org/2000/svg';
+    const ghost=document.createElementNS(NS2,'rect');
+    ghost.setAttribute('x',b.x); ghost.setAttribute('y',b.y);
+    ghost.setAttribute('fill','none'); ghost.setAttribute('stroke','#2563eb');
+    ghost.setAttribute('stroke-dasharray','4 3');
+    svg.appendChild(ghost);
+    let nw=w0, nh=h0;
+    const mv=e=>{
+      const p=new DOMPoint(e.clientX,e.clientY).matrixTransform(svg.getScreenCTM().inverse());
+      nw=Math.max(24,Math.round(w0+p.x-pt0.x)); nh=Math.max(18,Math.round(h0+p.y-pt0.y));
+      ghost.setAttribute('width',nw); ghost.setAttribute('height',nh);
+      hd.setAttribute('x',b.x+nw-5); hd.setAttribute('y',b.y+nh-5);
+    };
+    const up=()=>{ window.removeEventListener('pointermove',mv); window.removeEventListener('pointerup',up);
+      ghost.remove();
+      if(nw!==Math.round(w0)||nh!==Math.round(h0)) setSize(id,nw,nh);
+    };
+    window.addEventListener('pointermove',mv); window.addEventListener('pointerup',up);
+  });
+}
+function highlightSelection(){
+  const svg=$('out').querySelector('svg'); if(!svg||!selectedId) return;
+  const g=svg.querySelector('[data-node="'+selectedId+'"]'); if(!g) return;
+  const sh=g.querySelector('rect,polygon'); if(!sh) return;
+  sh.setAttribute('stroke','#2563eb'); sh.setAttribute('stroke-width','2.5');
+}
+// click a table cell -> write/update `cell r,c color=` inside that block
+function setCellColor(tid,r,c,color){
+  const lines=$('src').value.split('\n');
+  const start=lines.findIndex(l=>new RegExp('^\\s*table\\s+'+tid+'\\b').test(l));
+  if(start<0) return;
+  let end=start+1;
+  while(end<lines.length){
+    const t=lines[end].trim();
+    if(t===''||t.startsWith('|')||t.startsWith('#')||/^cell\b/.test(t)){ end++; continue; }
+    break;
+  }
+  const re=new RegExp('^\\s*cell\\s+'+r+','+c+'\\b');
+  const newLine='cell '+r+','+c+' color='+color;
+  let idx=-1;
+  for(let i=start+1;i<end;i++) if(re.test(lines[i])){ idx=i; break; }
+  if(idx>=0) lines[idx]=newLine; else lines.splice(end,0,newLine);
+  $('src').value=lines.join('\n'); refresh();
+  $('status').textContent='cell click → wrote "'+newLine+'" (GUI action = text edit)';
+}
+// marquee -> write a group line + in= on each enclosed node line
+let groupArm=false;
+function createGroup(ids){
+  const lines=$('src').value.split('\n');
+  let i=1; while(lines.some(l=>new RegExp('^\\s*group\\s+g'+i+'\\b').test(l))) i++;
+  const gid='g'+i;
+  let firstIdx=lines.length;
+  for(const id of ids){
+    const idx=nodeLineIdx(lines,id);
+    if(idx<0) continue;
+    if(!/\bin=/.test(lines[idx])) lines[idx]+=' in='+gid;
+    firstIdx=Math.min(firstIdx,idx);
+  }
+  lines.splice(firstIdx,0,'group '+gid+' "Group '+i+'"');
+  $('src').value=lines.join('\n'); refresh();
+  $('status').textContent='marquee → wrote "group '+gid+'" and tagged '+ids.length+' node(s) with in='+gid;
+}
+function pinAll(){
+  if(!lastDoc||!lastMeta) return;
+  const snap=snapshotAbs({});
+  if(!snap||(!Object.keys(snap.nodes).length&&!Object.keys(snap.groups).length)){ $('status').textContent='nothing to pin'; return; }
+  const count=Object.keys(snap.nodes).length+Object.keys(snap.groups).length;
+  materializePins({});   // two-pass so the frozen figure matches the live one to the pixel
+  $('status').textContent='froze layout: '+count+' pin line(s) (groups anchored, members group-local) — future edits stay local';
+}
+function refresh(){
+  const text=$('src').value;
+  // undo history: every change funnels through here (GUI actions = one
+  // snapshot each; typing coalesces within 800ms)
+  if(!restoring && lastText!==null && text!==lastText){
+    const now=Date.now();
+    if(now-lastPush>800 || !undoStack.length){ undoStack.push(lastText); if(undoStack.length>200) undoStack.shift(); lastPush=now; }
+    redoStack.length=0;
+  }
+  lastText=text;
+  try{ localStorage.setItem('figdown.autosave',text); localStorage.setItem('figdown.autosave.name',fileName); }catch(e){}
+  updateFileUI();
+  const {doc,errs}=parse(text);
+  const out=$('out'), eEl=$('errs'), ok=$('okline');
+  if(errs.length){
+    eEl.innerHTML=errs.map(x=>{
+      const m=/^Line (\d+):/.exec(x);
+      return '<div class="errline"'+(m?' data-line="'+m[1]+'"':'')+'>'+esc(x)+'</div>';
+    }).join('');
+    ok.textContent=''; out.innerHTML=''; lastSVG='';
+    $('svgsrc').textContent=''; $('svgimg').removeAttribute('src');
+    $('status').textContent=errs.length+' error(s) — nothing rendered (determinism over convenience)';
+    return;
+  }
+  eEl.textContent='';
+  const r=render(doc,{title:true});
+  lastSVG=r.svg; lastMeta=r.sceneMeta; lastPad=r.pad; lastDoc=doc;
+  out.innerHTML=r.svg;
+  installDirectEdit();
+  select(selectedId);
+  // pretty-print for display only (the artifact itself stays single-line deterministic)
+  $('svgsrc').textContent=r.svg.replace(/></g,'>\n<');
+  updateArtifactPreview(text, r.svg);
+  const n=doc.nodes.length, b=doc.blocks.length;
+  ok.textContent='OK — '+n+' node(s), '+doc.edges.length+' edge(s), '+b+' typed block(s). Same source → same SVG.';
+  $('status').textContent='';
+}
+async function svgArtifact(src, svg){
+  // the exact bytes the downloaded .svg would contain: source + SHA-256 embedded
+  const buf=await crypto.subtle.digest('SHA-256',new TextEncoder().encode(src));
+  const hash=[...new Uint8Array(buf)].map(x=>x.toString(16).padStart(2,'0')).join('');
+  const meta='<metadata id="figdown-source" data-sha256="'+hash+'" data-render-options="with-title"><![CDATA[\n'+src.replace(/]]>/g,']]]]><![CDATA[>')+'\n]]></metadata>';
+  return svg.replace(/<\/svg>$/, meta+'</svg>');
+}
+let previewSeq=0;
+async function updateArtifactPreview(src, svg){
+  const seq=++previewSeq;
+  const art=await svgArtifact(src, svg);
+  if(seq!==previewSeq) return;   // a newer edit superseded this one
+  $('svgimg').src='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(art);
+}
+$('dl').onclick=async ()=>{
+  if(!lastSVG){ $('status').textContent='fix errors first'; return; }
+  const svg=await svgArtifact($('src').value, lastSVG);
+  const a=document.createElement('a');
+  a.href=URL.createObjectURL(new Blob([svg],{type:'image/svg+xml'}));
+  a.download=fileName.replace(/\.fd$/,'')+'.svg'; a.click(); URL.revokeObjectURL(a.href);
+  $('status').textContent='SVG saved — source + SHA-256 embedded (self-carrying artifact, R14)';
+};
+$('pinall').onclick=pinAll;
+$('fillpick').oninput=()=>{ if(selectedId) setNodeOption(selectedId,'color',$('fillpick').value); };
+$('delnode').onclick=()=>{ if(selectedId) deleteNode(selectedId); };
+$('raise').onclick=()=>{ if(selectedId) moveNodeLine(selectedId,+1); };
+$('lower').onclick=()=>{ if(selectedId) moveNodeLine(selectedId,-1); };
+function insertNodeLine(){
+  const lines=$('src').value.split('\n');
+  let i=1; while(lines.some(l=>new RegExp('^\\s*(node|group)\\s+n'+i+'\\b').test(l))) i++;
+  let last=-1; lines.forEach((l,k)=>{ if(SCENE_KW.test(l.trim())) last=k; });
+  const kk=$('newkind').value;
+  lines.splice(last+1,0,'node n'+i+' "Node '+i+'"'+(kk!=='box'?' shape='+kk:''));
+  $('src').value=lines.join('\n'); refresh();
+  return 'n'+i;
+}
+$('addnode').onclick=()=>{
+  const id=insertNodeLine(); select(id);
+  $('status').textContent='+ Node → wrote "node '+id+'" line — drag it into place';
+};
+function addNodeAt(x,y){
+  const id=insertNodeLine();
+  // place its center at the double-click point (default box ≈ 100×40)
+  materializePins({[id]:{x:x-50, y:y-20}});
+  select(id);
+  $('status').textContent='double-click → wrote node '+id+' + pin at the click point (GUI action = text edit)';
+}
+$('groupmode').onclick=()=>{
+  groupArm=!groupArm;
+  $('groupmode').style.fontWeight=groupArm?'700':'';
+  $('status').textContent=groupArm?'Group mode: drag a box around the nodes to enclose':'Group mode off';
+};
+$('linkmode').onclick=()=>{
+  if(linkArm===null && $('linkmode').style.fontWeight!=='700'){
+    $('linkmode').style.fontWeight='700'; linkArm=undefined;
+    $('status').textContent='Link mode: click the source node';
+  } else { linkArm=null; $('linkmode').style.fontWeight=''; $('status').textContent='Link mode off'; }
+};
+// ============================================================
+// 4. FILE OPS + UNDO + KEYBOARD (the daily-driver layer)
+// ============================================================
+// File handles use the File System Access API where available (Chrome/
+// Edge: open once, Ctrl+S writes back to the same file); elsewhere we
+// fall back to a file picker + download. Unsaved work survives in
+// localStorage autosave either way.
+let fdHandle=null, fileName='untitled.fd', savedText=null;
+let undoStack=[], redoStack=[], lastText=null, lastPush=0, restoring=false;
+const isDirty=()=>savedText!==null && $('src').value!==savedText;
+function updateFileUI(){
+  $('fname').textContent=fileName+(isDirty()?' •':'');
+  document.title=(isDirty()?'• ':'')+fileName+' — FigDown';
+  $('undobtn').disabled=!undoStack.length;
+  $('redobtn').disabled=!redoStack.length;
+}
+function undo(){
+  if(!undoStack.length) return;
+  redoStack.push($('src').value);
+  restoring=true; $('src').value=undoStack.pop(); refresh(); restoring=false;
+  $('status').textContent='undo';
+}
+function redo(){
+  if(!redoStack.length) return;
+  undoStack.push($('src').value);
+  restoring=true; $('src').value=redoStack.pop(); refresh(); restoring=false;
+  $('status').textContent='redo';
+}
+$('undobtn').onclick=undo; $('redobtn').onclick=redo;
+// Load a .fd file, or a generated .svg — the artifact carries its own
+// source (metadata figdown-source), so the roundtrip needs no sidecar:
+// export SVG today, drop it back in tomorrow, tweak, export again.
+async function loadText(name, text){
+  if(name.endsWith('.svg') || text.trimStart().startsWith('<')){
+    const m=/<metadata id="figdown-source" data-sha256="([0-9a-f]{64})"[^>]*><!\[CDATA\[\n([\s\S]*?)\n\]\]><\/metadata>/.exec(text);
+    if(!m){ $('status').textContent='no embedded FigDown source in this SVG'; return false; }
+    const src=m[2].replace(/\]\]\]\]><!\[CDATA\[>/g,']]>');
+    const buf=await crypto.subtle.digest('SHA-256',new TextEncoder().encode(src));
+    const hash=[...new Uint8Array(buf)].map(x=>x.toString(16).padStart(2,'0')).join('');
+    fileName=name.replace(/\.svg$/,'.fd'); fdHandle=null; savedText=null;  // recovered → not yet saved as .fd
+    $('src').value=src; refresh();
+    $('status').textContent = hash===m[1]
+      ? 'source recovered from SVG — integrity verified (SHA-256 matches)'
+      : '⚠ source recovered, but SHA-256 does not match — the SVG was edited after generation';
+  } else {
+    fileName=name; fdHandle=null; savedText=text;
+    $('src').value=text; refresh();
+    $('status').textContent='loaded '+name;
+  }
+  return true;
+}
+async function openFile(){
+  if(isDirty() && !confirm('Discard unsaved changes in '+fileName+'?')) return;
+  if(window.showOpenFilePicker){
+    let h;
+    try{
+      [h]=await window.showOpenFilePicker({types:[
+        {description:'FigDown / SVG',accept:{'text/plain':['.fd','.txt'],'image/svg+xml':['.svg']}}]});
+    }catch(e){ return; }  // cancelled
+    const f=await h.getFile();
+    const ok=await loadText(f.name, await f.text());
+    if(ok && !f.name.endsWith('.svg')) fdHandle=h;   // Ctrl+S writes back here
+    updateFileUI();
+  } else $('loadfile').click();
+}
+async function saveFile(as){
+  const text=$('src').value;
+  if(window.showSaveFilePicker){
+    try{
+      if(as||!fdHandle){
+        fdHandle=await window.showSaveFilePicker({suggestedName:fileName,
+          types:[{description:'FigDown',accept:{'text/plain':['.fd']}}]});
+        fileName=fdHandle.name;
+      }
+      const w=await fdHandle.createWritable(); await w.write(text); await w.close();
+      savedText=text; updateFileUI();
+      $('status').textContent='saved '+fileName;
+    }catch(e){ if(!e||e.name!=='AbortError') $('status').textContent='save failed: '+(e&&e.message||e); }
+  } else {
+    const a=document.createElement('a');
+    a.href=URL.createObjectURL(new Blob([text],{type:'text/plain'}));
+    a.download=fileName; a.click(); URL.revokeObjectURL(a.href);
+    savedText=text; updateFileUI();
+    $('status').textContent='downloaded '+fileName+' (this browser has no File System Access API)';
+  }
+}
+$('open').onclick=openFile;
+$('save').onclick=()=>saveFile(false);
+$('saveas').onclick=()=>saveFile(true);
+$('newdoc').onclick=()=>{
+  if(isDirty() && !confirm('Discard unsaved changes in '+fileName+'?')) return;
+  const blankKey=Object.keys(EXAMPLES).find(k=>/blank/.test(k))||Object.keys(EXAMPLES)[0];
+  fdHandle=null; fileName='untitled.fd'; savedText=null; selectedId=null;
+  $('src').value=EXAMPLES[blankKey]; refresh();
+  $('status').textContent='new document';
+};
+$('loadfile').onchange=async e=>{
+  const f=e.target.files[0]; if(!f) return;
+  loadText(f.name, await f.text()); e.target.value='';
+};
+document.addEventListener('dragover',e=>e.preventDefault());
+document.addEventListener('drop',async e=>{
+  e.preventDefault();
+  const f=e.dataTransfer.files[0]; if(f) loadText(f.name, await f.text());
+});
+window.addEventListener('beforeunload',e=>{ if(isDirty()){ e.preventDefault(); e.returnValue=''; } });
+// clicking an error jumps to (and selects) the offending line
+$('errs').addEventListener('click',e=>{
+  const d=e.target.closest('.errline'); if(!d||!d.dataset.line) return;
+  const n=+d.dataset.line, lines=$('src').value.split('\n');
+  const start=lines.slice(0,n-1).join('\n').length+(n>1?1:0);
+  const ta=$('src'); ta.focus(); ta.setSelectionRange(start,start+(lines[n-1]||'').length);
+});
+// arrow-key nudge writes pins, exactly like a drag would
+function nudge(id,dx,dy){
+  const g=$('out').querySelector('[data-node="'+id+'"]'); if(!g) return;
+  materializePins({[id]:{x:+g.dataset.x+dx, y:+g.dataset.y+dy}});
+  select(id);
+  $('status').textContent='nudge → rewrote pin for '+id+' (GUI action = text edit)';
+}
+document.addEventListener('keydown',e=>{
+  const mod=e.ctrlKey||e.metaKey;
+  const inText=/^(INPUT|TEXTAREA|SELECT)$/.test((e.target&&e.target.tagName)||'');
+  if(mod && e.key.toLowerCase()==='s'){ e.preventDefault(); saveFile(e.shiftKey); return; }
+  if(mod && e.key.toLowerCase()==='o'){ e.preventDefault(); openFile(); return; }
+  if(mod && !inText && e.key.toLowerCase()==='z'){ e.preventDefault(); e.shiftKey?redo():undo(); return; }
+  if(mod && !inText && e.key.toLowerCase()==='y'){ e.preventDefault(); redo(); return; }
+  if(inText) return;
+  if(e.key==='Escape'){
+    select(null); linkArm=null; groupArm=false;
+    $('linkmode').style.fontWeight=''; $('groupmode').style.fontWeight='';
+    $('status').textContent=''; return;
+  }
+  if(!selectedId) return;
+  if(e.key==='Delete'||e.key==='Backspace'){ e.preventDefault(); deleteNode(selectedId); return; }
+  const step=e.shiftKey?10:1;
+  const d={ArrowLeft:[-step,0],ArrowRight:[step,0],ArrowUp:[0,-step],ArrowDown:[0,step]}[e.key];
+  if(d){ e.preventDefault(); nudge(selectedId,d[0],d[1]); }
+});
+// startup: restore autosaved work from the last session, else first example
+(function(){
+  let auto=null, autoName=null;
+  try{ auto=localStorage.getItem('figdown.autosave'); autoName=localStorage.getItem('figdown.autosave.name'); }catch(e){}
+  const first=EXAMPLES[Object.keys(EXAMPLES)[0]];
+  if(auto && auto!==first){
+    $('src').value=auto; if(autoName) fileName=autoName;
+    refresh();
+    $('status').textContent='restored unsaved work from the last session (autosave) — Ctrl+S to save it to a file';
+  } else {
+    $('src').value=first;
+    refresh();
+  }
+})();
+</script>
+</body>
+</html>