diagramo 0.1.0

package/dist/diagramo.js

@@ -0,0 +1,1557 @@
+
+import * as d3 from "d3";
+import {
+  graphConnect,
+  sugiyama,
+  decrossOpt,
+  coordQuad,
+  layeringSimplex,
+  tweakFlip
+} from "d3-dag";
+
+const VERSION = "0.1.0";
+const RESERVED_HEADS = new Set([
+  "program", "root", "core", "node", "->", "@attr",
+  "cy", "nodes", "edges", "n", "e", "@class", "@data", "@parent"
+]);
+
+const STYLE_ID = "diagramo-library-styles";
+const STYLE_TEXT = `
+.diagramo-host {
+  --diagramo-bg: #0b0c10;
+  --diagramo-panel: #11131a;
+  --diagramo-text: #e6e6e6;
+  --diagramo-muted: #a9b0c3;
+  --diagramo-stroke: #e6e6e6;
+  --diagramo-stroke-muted: rgba(230,230,230,0.35);
+  --diagramo-compound-fill: rgba(255,255,255,0.03);
+  --diagramo-node-fill: rgba(255,255,255,0.06);
+  --diagramo-node-fill-placeholder: rgba(255, 180, 80, 0.10);
+  --diagramo-border: rgba(255,255,255,0.12);
+  position: relative;
+  display: block;
+  width: 100%;
+  min-height: 240px;
+  border-radius: 14px;
+  border: 1px solid var(--diagramo-border);
+  background: linear-gradient(180deg, rgba(17,19,26,0.98), rgba(15,17,23,0.98));
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.diagramo-host svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.05), transparent 60%);
+}
+.diagramo-host .diagramo-status {
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  z-index: 4;
+  border-radius: 10px;
+  padding: 7px 10px;
+  font: 12px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  color: var(--diagramo-muted);
+  background: rgba(0,0,0,0.35);
+  border: 1px solid rgba(255,255,255,0.1);
+  white-space: pre-wrap;
+  pointer-events: none;
+}
+.diagramo-host .diagramo-status.ok {
+  color: rgba(126,231,135,0.9);
+  border-color: rgba(126,231,135,0.35);
+}
+.diagramo-host .diagramo-status.bad {
+  color: rgba(255,107,107,0.95);
+  border-color: rgba(255,107,107,0.35);
+}
+.diagramo-host .compound rect.outer { fill: var(--diagramo-compound-fill); stroke: var(--diagramo-stroke-muted); stroke-width: 1.2; }
+.diagramo-host .compound rect.header { fill: rgba(255,255,255,0.04); stroke: none; }
+.diagramo-host .compound text { fill: var(--diagramo-muted); font-size: 12px; font-weight: 650; }
+.diagramo-host .node rect { fill: var(--diagramo-node-fill); stroke: var(--diagramo-stroke); stroke-width: 1.2; }
+.diagramo-host .node.placeholder rect { fill: var(--diagramo-node-fill-placeholder); stroke: rgba(255,180,80,0.9); }
+.diagramo-host .node text { fill: var(--diagramo-text); font-size: 12px; font-weight: 650; }
+.diagramo-host .edge { fill: none; stroke: var(--diagramo-stroke); stroke-width: 1.35; stroke-linecap: round; }
+.diagramo-host .edge.m2 { stroke-dasharray: 5 4; stroke-width: 1.15; opacity: 0.95; }
+.diagramo-host .edge.wiring { stroke: rgba(170,200,255,0.55); stroke-dasharray: 4 4; stroke-width: 1.0; }
+.diagramo-host .edgeLabel { fill: var(--diagramo-text); font-size: 11px; opacity: 0.95; paint-order: stroke; stroke: rgba(0,0,0,0.6); stroke-width: 3px; }
+.diagramo-host .arrowGlyph circle { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.7); stroke-width: 1.2; }
+.diagramo-host .arrowGlyph text { fill: var(--diagramo-muted); font-size: 10px; }
+`;
+
+function injectStyles() {
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = STYLE_TEXT;
+  document.head.appendChild(style);
+}
+
+function tokenizeSexpr(src) {
+  src = String(src ?? "").replace(/;[^\n\r]*/g, "");
+  const tokens = [];
+  let i = 0;
+  while (i < src.length) {
+    const c = src[i];
+    if (/\s/.test(c)) { i++; continue; }
+    if (c === "(" || c === ")") { tokens.push(c); i++; continue; }
+    if (c === '"') {
+      let j = i + 1;
+      let out = "";
+      while (j < src.length) {
+        const ch = src[j];
+        if (ch === "\\") {
+          const nxt = src[j + 1] ?? "";
+          if (nxt === "n") out += "\n";
+          else if (nxt === "t") out += "\t";
+          else out += nxt;
+          j += 2;
+          continue;
+        }
+        if (ch === '"') break;
+        out += ch;
+        j++;
+      }
+      if (src[j] !== '"') throw new Error("Unterminated string");
+      tokens.push({ type: "string", value: out });
+      i = j + 1;
+      continue;
+    }
+    let j = i;
+    while (j < src.length && !/\s/.test(src[j]) && src[j] !== "(" && src[j] !== ")") j++;
+    tokens.push({ type: "sym", value: src.slice(i, j) });
+    i = j;
+  }
+  return tokens;
+}
+
+function parseSexpr(src) {
+  const toks = tokenizeSexpr(src);
+  let idx = 0;
+  function parseOne() {
+    const t = toks[idx++];
+    if (!t) throw new Error("Unexpected EOF");
+    if (t === "(") {
+      const arr = [];
+      while (toks[idx] !== ")") {
+        if (idx >= toks.length) throw new Error("Missing ')' ");
+        arr.push(parseOne());
+      }
+      idx++;
+      return arr;
+    }
+    if (t === ")") throw new Error("Unexpected ')' ");
+    return t;
+  }
+  const ast = parseOne();
+  if (idx < toks.length) throw new Error("Extra tokens after first expression");
+  return ast;
+}
+
+function isList(x) { return Array.isArray(x); }
+function headOf(x) { return isList(x) && x.length ? atomValue(x[0]) : ""; }
+function atomValue(x) {
+  if (isList(x)) throw new Error("Expected atom, got list");
+  return typeof x === "object" && x ? String(x.value) : String(x ?? "");
+}
+function ensureAnyAtom(x, ctx) {
+  if (isList(x)) throw new Error(`${ctx}: expected atom, got list`);
+  return x;
+}
+function ensureSymbolAtom(x, ctx) {
+  if (isList(x)) throw new Error(`${ctx}: expected symbol, got list`);
+  const v = atomValue(x);
+  if (!v) throw new Error(`${ctx}: expected non-empty symbol`);
+  return v;
+}
+function parseLiteralAtom(x) {
+  if (isList(x)) throw new Error("Literal must be an atom");
+  if (typeof x === "object" && x) {
+    if (x.type === "string") return x.value;
+    const s = String(x.value);
+    if (/^-?\d+(?:\.\d+)?$/.test(s)) return Number(s);
+    if (s === "true") return true;
+    if (s === "false") return false;
+    return s;
+  }
+  return x;
+}
+function equalPrimitive(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+function isAttrForm(x) { return isList(x) && headOf(x) === "@attr"; }
+function parseAttrForm(expr, ctxLabel) {
+  if (!isAttrForm(expr)) throw new Error(`${ctxLabel}: expected (@attr ...)`);
+  if ((expr.length - 1) % 2 !== 0) throw new Error(`${ctxLabel}: @attr requires even key/value pairs`);
+  const out = new Map();
+  for (let i = 1; i < expr.length; i += 2) out.set(ensureSymbolAtom(expr[i], `${ctxLabel}: key`), parseLiteralAtom(expr[i + 1]));
+  return out;
+}
+function attrMapToObject(map) {
+  const out = {};
+  for (const [k, meta] of map.entries()) out[k] = meta.value;
+  return out;
+}
+function parseOptionalAttrAndChildren(expr, startIdx, ctxLabel) {
+  let idx = startIdx;
+  let attrMap = new Map();
+  if (idx < expr.length && isAttrForm(expr[idx])) {
+    attrMap = parseAttrForm(expr[idx], ctxLabel);
+    idx++;
+  }
+  const children = expr.slice(idx);
+  for (const child of children) if (!isList(child)) throw new Error(`${ctxLabel}: child items must be lists`);
+  return { attrMap, children };
+}
+
+function createSurfaceContext(rootId) {
+  return {
+    rootId,
+    entities: new Map(),
+    childrenByContainer: new Map(),
+    endpointInlineByArrow: new Map(),
+    warnings: []
+  };
+}
+function ensureChildArray(ctx, id) {
+  let arr = ctx.childrenByContainer.get(id);
+  if (!arr) {
+    arr = [];
+    ctx.childrenByContainer.set(id, arr);
+  }
+  return arr;
+}
+function ensureEndpointRecord(ctx, arrowId) {
+  let rec = ctx.endpointInlineByArrow.get(arrowId);
+  if (!rec) {
+    rec = { from: null, to: null };
+    ctx.endpointInlineByArrow.set(arrowId, rec);
+  }
+  return rec;
+}
+function samePlacement(a, b) {
+  if (!a || !b) return false;
+  if (a.slot !== b.slot) return false;
+  if (a.slot === "child") return a.containerId === b.containerId;
+  return a.arrowId === b.arrowId;
+}
+function ensureEntityKind(ctx, id, kind) {
+  let rec = ctx.entities.get(id);
+  if (!rec) {
+    rec = { id, kind, attrs: new Map(), placement: null, fromId: null, toId: null };
+    ctx.entities.set(id, rec);
+  } else if (rec.kind !== kind) {
+    throw new Error(`ID ${id} used as both ${rec.kind} and ${kind}`);
+  }
+  return rec;
+}
+function placeEntity(ctx, rec, placement) {
+  if (!placement) return;
+  if (!rec.placement) {
+    rec.placement = placement;
+    if (placement.slot === "child") {
+      const arr = ensureChildArray(ctx, placement.containerId);
+      if (!arr.includes(rec.id)) arr.push(rec.id);
+    } else {
+      const slots = ensureEndpointRecord(ctx, placement.arrowId);
+      if (slots[placement.slot] && slots[placement.slot] !== rec.id) {
+        throw new Error(`Arrow ${placement.arrowId} already has inline ${placement.slot} endpoint ${slots[placement.slot]}`);
+      }
+      slots[placement.slot] = rec.id;
+    }
+    return;
+  }
+  if (!samePlacement(rec.placement, placement)) {
+    const parentA = rec.placement.slot === "child" ? rec.placement.containerId : rec.placement.arrowId;
+    const parentB = placement.slot === "child" ? placement.containerId : placement.arrowId;
+    throw new Error(`Entity ${rec.id} has conflicting parents/positions (${parentA} vs ${parentB})`);
+  }
+}
+function applyAttrs(ctx, rec, attrsMap, strength, origin) {
+  for (const [k, v] of attrsMap.entries()) {
+    const old = rec.attrs.get(k);
+    if (!old) rec.attrs.set(k, { value: v, strength, origin });
+    else if (equalPrimitive(old.value, v)) {
+      if (strength > old.strength) rec.attrs.set(k, { value: v, strength, origin });
+    } else if (strength > old.strength) {
+      rec.attrs.set(k, { value: v, strength, origin });
+    } else if (strength === old.strength) {
+      throw new Error(`Conflicting attribute ${k} for ${rec.id}: ${JSON.stringify(old.value)} vs ${JSON.stringify(v)}`);
+    }
+  }
+}
+function applyDefaultLabel(rec) {
+  if (!rec.attrs.has("label")) rec.attrs.set("label", { value: rec.id, strength: 1, origin: "default" });
+}
+function ensureSynthNode(ctx, id, containerId) {
+  const rec = ensureEntityKind(ctx, id, "node");
+  placeEntity(ctx, rec, { slot: "child", containerId });
+  applyDefaultLabel(rec);
+  return rec;
+}
+function setArrowEndpoint(rec, slot, targetId) {
+  const key = slot === "from" ? "fromId" : "toId";
+  if (!rec[key]) rec[key] = targetId;
+  else if (rec[key] !== targetId) throw new Error(`Arrow ${rec.id} has conflicting ${slot} endpoint values (${rec[key]} vs ${targetId})`);
+}
+
+function normalizeSurface(ast) {
+  if (!isList(ast)) throw new Error("Surface input must be a list");
+  let rootId = "__root__";
+  let items = [];
+  const h = headOf(ast);
+  if (h === "program") items = ast.slice(1);
+  else if (h === "root") {
+    if (ast.length < 2) throw new Error("root form requires a root ID");
+    rootId = ensureSymbolAtom(ast[1], "surface root id");
+    items = ast.slice(2);
+  } else {
+    throw new Error("Surface input must start with (program ...) or (root ...)");
+  }
+  const ctx = createSurfaceContext(rootId);
+  ensureChildArray(ctx, rootId);
+  for (const item of items) processSurfaceItem(ctx, item, rootId);
+  const core = buildCoreFromSurfaceContext(ctx);
+  return { core, warnings: ctx.warnings };
+}
+function processSurfaceItem(ctx, expr, containerId) {
+  if (!isList(expr)) throw new Error("Surface item must be a list");
+  const h = headOf(expr);
+  if (h === "node") return processExplicitNode(ctx, expr, { slot: "child", containerId });
+  if (h === "->") return processExplicitArrow(ctx, expr, { slot: "child", containerId }, containerId);
+  if (expr.length === 1 && !RESERVED_HEADS.has(h)) {
+    const colonCount = (h.match(/:/g) || []).length;
+    if (colonCount === 1) return processChildOfShorthand(ctx, h, containerId);
+    if (colonCount === 0) return processNodeShorthand(ctx, h, containerId);
+  }
+  throw new Error(`Invalid surface item (${h || "?"} ...)`);
+}
+function processNodeShorthand(ctx, id, containerId) {
+  const rec = ensureEntityKind(ctx, id, "node");
+  placeEntity(ctx, rec, { slot: "child", containerId });
+  applyDefaultLabel(rec);
+}
+function processChildOfShorthand(ctx, pairSymbol, containerId) {
+  const parts = pairSymbol.split(":");
+  if (parts.length !== 2 || !parts[0] || !parts[1]) throw new Error(`Invalid child-of shorthand ${pairSymbol}`);
+  const [childId, parentId] = parts;
+  let parentRec = ctx.entities.get(parentId);
+  if (!parentRec) parentRec = ensureSynthNode(ctx, parentId, containerId);
+  if (parentRec.kind !== "node") throw new Error(`Child-of shorthand parent ${parentId} must be a node`);
+  applyDefaultLabel(parentRec);
+  const childRec = ensureEntityKind(ctx, childId, "node");
+  placeEntity(ctx, childRec, { slot: "child", containerId: parentId });
+  applyDefaultLabel(childRec);
+}
+function processExplicitNode(ctx, expr, placement) {
+  if (expr.length < 2) throw new Error("node form requires an ID");
+  const id = ensureSymbolAtom(expr[1], "node id");
+  const rec = ensureEntityKind(ctx, id, "node");
+  placeEntity(ctx, rec, placement);
+  applyDefaultLabel(rec);
+  const { attrMap, children } = parseOptionalAttrAndChildren(expr, 2, `node ${id}`);
+  applyAttrs(ctx, rec, attrMap, 3, `node ${id}`);
+  for (const child of children) processSurfaceItem(ctx, child, id);
+  return id;
+}
+function preEnsureBareSurfaceEndpoint(ctx, endpointExpr, synthContainerId) {
+  if (!isList(endpointExpr)) {
+    const id = ensureSymbolAtom(endpointExpr, "arrow endpoint");
+    if (!ctx.entities.has(id)) ensureSynthNode(ctx, id, synthContainerId);
+  }
+}
+function processSurfaceEndpoint(ctx, endpointExpr, arrowId, slotName) {
+  if (!isList(endpointExpr)) return ensureSymbolAtom(endpointExpr, `arrow ${arrowId} ${slotName}`);
+  const h = headOf(endpointExpr);
+  if (h === "node") return processExplicitNode(ctx, endpointExpr, { slot: slotName, arrowId });
+  if (h === "->") return processExplicitArrow(ctx, endpointExpr, { slot: slotName, arrowId }, arrowId);
+  throw new Error(`Arrow ${arrowId} ${slotName} endpoint must be an ID, node, or arrow`);
+}
+function processExplicitArrow(ctx, expr, placement, synthContainerId) {
+  if (expr.length < 4) throw new Error("arrow form requires ID FROM TO");
+  const id = ensureSymbolAtom(expr[1], "arrow id");
+  const fromExpr = expr[2];
+  const toExpr = expr[3];
+  preEnsureBareSurfaceEndpoint(ctx, fromExpr, synthContainerId);
+  preEnsureBareSurfaceEndpoint(ctx, toExpr, synthContainerId);
+  const rec = ensureEntityKind(ctx, id, "arrow");
+  placeEntity(ctx, rec, placement);
+  applyDefaultLabel(rec);
+  const { attrMap, children } = parseOptionalAttrAndChildren(expr, 4, `arrow ${id}`);
+  applyAttrs(ctx, rec, attrMap, 3, `arrow ${id}`);
+  setArrowEndpoint(rec, "from", processSurfaceEndpoint(ctx, fromExpr, id, "from"));
+  setArrowEndpoint(rec, "to", processSurfaceEndpoint(ctx, toExpr, id, "to"));
+  for (const child of children) processSurfaceItem(ctx, child, id);
+  return id;
+}
+function buildCoreFromSurfaceContext(ctx) {
+  for (const rec of ctx.entities.values()) {
+    if (!rec.placement) throw new Error(`Entity ${rec.id} was declared but not placed in the tree`);
+    if (rec.kind === "arrow" && (!rec.fromId || !rec.toId)) throw new Error(`Arrow ${rec.id} is missing an endpoint`);
+  }
+  const buildItem = (id) => {
+    const rec = ctx.entities.get(id);
+    if (!rec) throw new Error(`Missing entity ${id}`);
+    const attrs = attrMapToObject(rec.attrs);
+    const childIds = ensureChildArray(ctx, id).slice();
+    const children = childIds.map(buildItem);
+    if (rec.kind === "node") return { kind: "node", id, attrs, children };
+    const slots = ensureEndpointRecord(ctx, id);
+    const from = slots.from ? { type: "inline", item: buildItem(slots.from) } : { type: "ref", id: rec.fromId };
+    const to = slots.to ? { type: "inline", item: buildItem(slots.to) } : { type: "ref", id: rec.toId };
+    return { kind: "arrow", id, from, to, attrs, children };
+  };
+  const items = ensureChildArray(ctx, ctx.rootId).slice().map(buildItem);
+  const doc = { rootId: ctx.rootId, items };
+  canonicalizeCoreDoc(doc);
+  validateCoreDoc(doc);
+  return doc;
+}
+
+function parseCoreDoc(ast) {
+  if (!isList(ast) || headOf(ast) !== "core") throw new Error("Expected (core (root ...))");
+  const rootForms = ast.slice(1).filter(isList);
+  if (rootForms.length !== 1 || headOf(rootForms[0]) !== "root") throw new Error("Core must be exactly (core (root ROOTID ITEM...))");
+  const rootForm = rootForms[0];
+  if (rootForm.length < 2) throw new Error("Core root requires a root ID");
+  const rootId = ensureSymbolAtom(rootForm[1], "core root id");
+  const items = rootForm.slice(2).map(parseCoreItem);
+  const doc = { rootId, items };
+  canonicalizeCoreDoc(doc);
+  validateCoreDoc(doc);
+  return doc;
+}
+function parseCoreEnd(expr) {
+  if (!isList(expr)) return { type: "ref", id: ensureSymbolAtom(expr, "core endpoint") };
+  return { type: "inline", item: parseCoreItem(expr) };
+}
+function parseCoreItem(expr) {
+  if (!isList(expr)) throw new Error("Core item must be a list");
+  const h = headOf(expr);
+  if (h === "node") {
+    if (expr.length < 2) throw new Error("Core node requires an ID");
+    const id = ensureSymbolAtom(expr[1], "core node id");
+    const { attrMap, children } = parseOptionalAttrAndChildren(expr, 2, `core node ${id}`);
+    return { kind: "node", id, attrs: Object.fromEntries(attrMap.entries()), children: children.map(parseCoreItem) };
+  }
+  if (h === "->") {
+    if (expr.length < 4) throw new Error("Core arrow requires ID FROM TO");
+    const id = ensureSymbolAtom(expr[1], "core arrow id");
+    const from = parseCoreEnd(expr[2]);
+    const to = parseCoreEnd(expr[3]);
+    const { attrMap, children } = parseOptionalAttrAndChildren(expr, 4, `core arrow ${id}`);
+    return { kind: "arrow", id, from, to, attrs: Object.fromEntries(attrMap.entries()), children: children.map(parseCoreItem) };
+  }
+  throw new Error(`Unknown core item (${h || "?"} ...)`);
+}
+function canonicalizeCoreDoc(doc) {
+  const visit = (item) => {
+    if (!item.attrs) item.attrs = {};
+    if (!("label" in item.attrs)) item.attrs.label = item.id;
+    if (item.kind === "arrow") {
+      if (item.from.type === "inline") visit(item.from.item);
+      if (item.to.type === "inline") visit(item.to.item);
+    }
+    for (const child of item.children || []) visit(child);
+  };
+  for (const item of doc.items || []) visit(item);
+}
+function validateCoreDoc(doc) {
+  const entities = new Map();
+  const parents = new Map();
+  const refs = [];
+  function visit(item, parentId) {
+    if (entities.has(item.id)) throw new Error(`Duplicate ID ${item.id}`);
+    entities.set(item.id, item.kind);
+    parents.set(item.id, parentId);
+    if (item.kind === "arrow") {
+      if (item.from.type === "ref") refs.push({ owner: item.id, slot: "from", target: item.from.id });
+      else visit(item.from.item, item.id);
+      if (item.to.type === "ref") refs.push({ owner: item.id, slot: "to", target: item.to.id });
+      else visit(item.to.item, item.id);
+    }
+    for (const child of item.children || []) visit(child, item.id);
+  }
+  for (const item of doc.items || []) visit(item, doc.rootId);
+  for (const ref of refs) if (!entities.has(ref.target)) throw new Error(`Arrow ${ref.owner} references missing ${ref.slot} endpoint ${ref.target}`);
+  for (const [id, parentId] of parents.entries()) {
+    let cur = parentId;
+    const seen = new Set([id]);
+    while (cur && cur !== doc.rootId) {
+      if (seen.has(cur)) throw new Error(`Containment cycle involving ${id}`);
+      seen.add(cur);
+      cur = parents.get(cur) ?? doc.rootId;
+    }
+  }
+}
+
+function splitClassAttr(attrs, extraClasses = []) {
+  const data = {};
+  const classes = [...extraClasses];
+  for (const [k, v] of Object.entries(attrs || {})) {
+    if (k === "class") classes.push(...String(v ?? "").trim().split(/\s+/).filter(Boolean));
+    else data[k] = v;
+  }
+  return { data, classString: [...new Set(classes)].join(" ") };
+}
+function endpointId(end) {
+  return end.type === "ref" ? end.id : end.item.id;
+}
+function lowerCoreToNCF(doc) {
+  validateCoreDoc(doc);
+  const out = { rootId: doc.rootId, nodes: [{ id: doc.rootId, data: {}, classString: "root", parent: null }], edges: [] };
+  const seen = new Set([doc.rootId]);
+  function walk(item, parentId) {
+    if (seen.has(item.id)) throw new Error(`Duplicate ID during lowering: ${item.id}`);
+    seen.add(item.id);
+    if (item.kind === "node") {
+      const split = splitClassAttr(item.attrs, []);
+      out.nodes.push({ id: item.id, data: split.data, classString: split.classString, parent: parentId === doc.rootId ? null : parentId });
+      for (const child of item.children) walk(child, item.id);
+      return;
+    }
+    const split = splitClassAttr(item.attrs, ["arrow"]);
+    out.nodes.push({ id: item.id, data: split.data, classString: split.classString, parent: parentId === doc.rootId ? null : parentId });
+    if (item.from.type === "inline") walk(item.from.item, item.id);
+    if (item.to.type === "inline") walk(item.to.item, item.id);
+    for (const child of item.children) walk(child, item.id);
+    out.edges.push({ id: `${item.id}:from`, src: endpointId(item.from), dst: item.id, data: {}, classString: "arrowFrom" });
+    out.edges.push({ id: `${item.id}:to`, src: item.id, dst: endpointId(item.to), data: {}, classString: "arrowTo" });
+  }
+  for (const item of doc.items) walk(item, doc.rootId);
+  validateNCFDoc(out);
+  return out;
+}
+
+function parseKVFromDataForm(expr, ctxLabel) {
+  if ((expr.length - 1) % 2 !== 0) throw new Error(`${ctxLabel}: key/value form requires even pairs`);
+  const out = {};
+  for (let i = 1; i < expr.length; i += 2) out[ensureSymbolAtom(expr[i], `${ctxLabel}: key`)] = parseLiteralAtom(expr[i + 1]);
+  return out;
+}
+function parseNCFNode(expr) {
+  if (!isList(expr) || headOf(expr) !== "n") throw new Error("NCF node must be (n ID ...)");
+  if (expr.length < 2) throw new Error("NCF node requires an ID");
+  const node = { id: ensureSymbolAtom(expr[1], "ncf node id"), data: {}, classString: "", parent: null };
+  for (let i = 2; i < expr.length; i++) {
+    const f = expr[i];
+    if (!isList(f)) throw new Error(`NCF node ${node.id} field must be a list`);
+    const h = headOf(f);
+    if (h === "@data") node.data = { ...node.data, ...parseKVFromDataForm(f, `ncf node ${node.id}`) };
+    else if (h === "@class") node.classString = atomValue(ensureAnyAtom(f[1], `ncf node ${node.id} class`));
+    else if (h === "@parent") node.parent = ensureSymbolAtom(f[1], `ncf node ${node.id} parent`);
+    else throw new Error(`NCF node ${node.id} has unknown field ${h}`);
+  }
+  return node;
+}
+function parseNCFEdge(expr) {
+  if (!isList(expr) || headOf(expr) !== "e") throw new Error("NCF edge must be (e ID SRC DST ...)");
+  if (expr.length < 4) throw new Error("NCF edge requires ID SRC DST");
+  const edge = { id: ensureSymbolAtom(expr[1], "ncf edge id"), src: ensureSymbolAtom(expr[2], "ncf edge src"), dst: ensureSymbolAtom(expr[3], "ncf edge dst"), data: {}, classString: "" };
+  for (let i = 4; i < expr.length; i++) {
+    const f = expr[i];
+    if (!isList(f)) throw new Error(`NCF edge ${edge.id} field must be a list`);
+    const h = headOf(f);
+    if (h === "@data") edge.data = { ...edge.data, ...parseKVFromDataForm(f, `ncf edge ${edge.id}`) };
+    else if (h === "@class") edge.classString = atomValue(ensureAnyAtom(f[1], `ncf edge ${edge.id} class`));
+    else throw new Error(`NCF edge ${edge.id} has unknown field ${h}`);
+  }
+  return edge;
+}
+function parseNCFDoc(ast) {
+  if (!isList(ast) || headOf(ast) !== "cy") throw new Error("Expected top-level (cy ...)");
+  let nodesBlock = null, edgesBlock = null;
+  for (const item of ast.slice(1)) {
+    if (!isList(item)) continue;
+    if (headOf(item) === "nodes") nodesBlock = item;
+    if (headOf(item) === "edges") edgesBlock = item;
+  }
+  nodesBlock ||= [{ type: "sym", value: "nodes" }];
+  edgesBlock ||= [{ type: "sym", value: "edges" }];
+  const doc = { rootId: "__root__", nodes: [], edges: [] };
+  for (const expr of nodesBlock.slice(1)) doc.nodes.push(parseNCFNode(expr));
+  for (const expr of edgesBlock.slice(1)) doc.edges.push(parseNCFEdge(expr));
+  validateNCFDoc(doc);
+  return doc;
+}
+function validateNCFDoc(doc) {
+  const nodeIds = new Set();
+  const edgeIds = new Set();
+  for (const n of doc.nodes) {
+    if (nodeIds.has(n.id)) throw new Error(`Duplicate NCF node ID ${n.id}`);
+    nodeIds.add(n.id);
+  }
+  for (const e of doc.edges) {
+    if (edgeIds.has(e.id)) throw new Error(`Duplicate NCF edge ID ${e.id}`);
+    edgeIds.add(e.id);
+    if (!nodeIds.has(e.src)) throw new Error(`NCF edge ${e.id} references missing source node ${e.src}`);
+    if (!nodeIds.has(e.dst)) throw new Error(`NCF edge ${e.id} references missing target node ${e.dst}`);
+  }
+  for (const n of doc.nodes) if (n.parent && !nodeIds.has(n.parent)) throw new Error(`NCF node ${n.id} references missing parent ${n.parent}`);
+}
+
+function printSym(id) { return String(id); }
+function printVal(v) {
+  if (typeof v === "number") return String(v);
+  if (typeof v === "boolean") return v ? "true" : "false";
+  const s = String(v ?? "");
+  return /^[^\s()";]+$/.test(s) ? s : JSON.stringify(s);
+}
+function emitAttr(attrs) {
+  const entries = Object.entries(attrs || {});
+  if (!entries.length) return "";
+  return ` (@attr ${entries.map(([k, v]) => `${printSym(k)} ${printVal(v)}`).join(" ")})`;
+}
+function emitData(data) {
+  const entries = Object.entries(data || {});
+  if (!entries.length) return "";
+  return ` (@data ${entries.map(([k, v]) => `${printSym(k)} ${printVal(v)}`).join(" ")})`;
+}
+function emitCoreItem(item, indent = 4) {
+  const pad = " ".repeat(indent);
+  if (item.kind === "node") {
+    if (!item.children.length) return `${pad}(node ${printSym(item.id)}${emitAttr(item.attrs)})`;
+    const lines = [`${pad}(node ${printSym(item.id)}${emitAttr(item.attrs)}`];
+    for (const child of item.children) lines.push(emitCoreItem(child, indent + 2));
+    lines.push(`${pad})`);
+    return lines.join("\n");
+  }
+  const lines = [`${pad}(-> ${printSym(item.id)}`];
+  const emitEnd = (end) => end.type === "ref" ? `${" ".repeat(indent + 2)}${printSym(end.id)}` : emitCoreItem(end.item, indent + 2);
+  lines.push(emitEnd(item.from));
+  const toLine = emitEnd(item.to);
+  if (Object.keys(item.attrs || {}).length && item.to.type === "ref") lines.push(`${toLine}${emitAttr(item.attrs)}`);
+  else {
+    lines.push(toLine);
+    if (Object.keys(item.attrs || {}).length) lines.push(`${" ".repeat(indent + 2)}(@attr ${Object.entries(item.attrs).map(([k, v]) => `${printSym(k)} ${printVal(v)}`).join(" ")})`);
+  }
+  for (const child of item.children) lines.push(emitCoreItem(child, indent + 2));
+  lines.push(`${pad})`);
+  return lines.join("\n");
+}
+function emitCoreDoc(doc) {
+  const lines = ["(core", `  (root ${printSym(doc.rootId)}`];
+  for (const item of doc.items) lines.push(emitCoreItem(item, 4));
+  lines.push("  ))");
+  return lines.join("\n");
+}
+function emitNCFDoc(doc) {
+  const lines = ["(cy", "  (nodes"];
+  for (const n of doc.nodes) {
+    let s = `    (n ${printSym(n.id)}`;
+    if (Object.keys(n.data || {}).length) s += emitData(n.data);
+    if (String(n.classString || "").trim()) s += ` (@class ${printVal(n.classString)})`;
+    if (n.parent) s += ` (@parent ${printSym(n.parent)})`;
+    s += ")";
+    lines.push(s);
+  }
+  lines.push("  )");
+  lines.push("  (edges");
+  for (const e of doc.edges) {
+    let s = `    (e ${printSym(e.id)} ${printSym(e.src)} ${printSym(e.dst)}`;
+    if (Object.keys(e.data || {}).length) s += emitData(e.data);
+    if (String(e.classString || "").trim()) s += ` (@class ${printVal(e.classString)})`;
+    s += ")";
+    lines.push(s);
+  }
+  lines.push("  ))");
+  return lines.join("\n");
+}
+
+function detectInputKind(ast) {
+  if (!isList(ast)) throw new Error("Input must be a list");
+  const h = headOf(ast);
+  if (h === "program" || h === "root") return "surface";
+  if (h === "core") return "core";
+  if (h === "cy") return "ncf";
+  throw new Error(`Could not auto-detect input kind from (${h || "?"} ...)`);
+}
+function compileAst(ast, mode = "auto") {
+  const kind = mode === "auto" ? detectInputKind(ast) : mode;
+  if (kind === "surface") {
+    const { core, warnings } = normalizeSurface(ast);
+    const ncf = lowerCoreToNCF(core);
+    return { kind, core, ncf, warnings, coreText: emitCoreDoc(core), ncfText: emitNCFDoc(ncf) };
+  }
+  if (kind === "core") {
+    const core = parseCoreDoc(ast);
+    const ncf = lowerCoreToNCF(core);
+    return { kind, core, ncf, warnings: [], coreText: emitCoreDoc(core), ncfText: emitNCFDoc(ncf) };
+  }
+  if (kind === "ncf") {
+    const ncf = parseNCFDoc(ast);
+    return { kind, core: null, ncf, warnings: [], coreText: "", ncfText: emitNCFDoc(ncf) };
+  }
+  throw new Error(`Unsupported input mode ${kind}`);
+}
+function compileSource(source, mode = "auto") {
+  return compileAst(parseSexpr(source), mode);
+}
+
+function splitClasses(s) { return String(s || "").trim().split(/\s+/).filter(Boolean); }
+function edgeKind(e) {
+  if (e.classSet.has("arrowFrom")) return "arrowFrom";
+  if (e.classSet.has("arrowTo")) return "arrowTo";
+  const k = String(e.data.kind || e.data.type || e.data.role || "").toLowerCase();
+  if (k === "arrowfrom") return "arrowFrom";
+  if (k === "arrowto") return "arrowTo";
+  return "";
+}
+function normalizeParent(pid, nodes) {
+  if (!pid) return "__root__";
+  if (!(pid in nodes)) return "__root__";
+  const n = nodes[pid];
+  if (n.isMetaRoot) return "__root__";
+  if (pid === "__root__") return "__root__";
+  return pid;
+}
+function trimToRect(rect, toward) {
+  const dx = toward.x - rect.cx;
+  const dy = toward.y - rect.cy;
+  const eps = 1e-9;
+  if (Math.abs(dx) < eps && Math.abs(dy) < eps) return { x: rect.cx, y: rect.cy };
+  const hw = rect.w / 2;
+  const hh = rect.h / 2;
+  const tx = Math.abs(dx) < eps ? Infinity : hw / Math.abs(dx);
+  const ty = Math.abs(dy) < eps ? Infinity : hh / Math.abs(dy);
+  const t = Math.min(tx, ty);
+  return { x: rect.cx + dx * t, y: rect.cy + dy * t };
+}
+function polylineMidpoint(points) {
+  if (points.length === 0) return { x: 0, y: 0 };
+  if (points.length === 1) return { x: points[0].x, y: points[0].y };
+  let total = 0;
+  const segs = [];
+  for (let i = 0; i + 1 < points.length; i++) {
+    const a = points[i], b = points[i + 1];
+    const len = Math.hypot(b.x - a.x, b.y - a.y);
+    segs.push({ a, b, len });
+    total += len;
+  }
+  const half = total / 2;
+  let acc = 0;
+  for (const s of segs) {
+    if (acc + s.len >= half) {
+      const t = s.len === 0 ? 0 : (half - acc) / s.len;
+      return { x: s.a.x + (s.b.x - s.a.x) * t, y: s.a.y + (s.b.y - s.a.y) * t };
+    }
+    acc += s.len;
+  }
+  return { ...points[points.length - 1] };
+}
+function segmentAtHalf(points) {
+  if (points.length < 2) return { tan: { x: 1, y: 0 }, nrm: { x: 0, y: 1 } };
+  let total = 0;
+  const segs = [];
+  for (let i = 0; i + 1 < points.length; i++) {
+    const a = points[i], b = points[i + 1];
+    const len = Math.hypot(b.x - a.x, b.y - a.y);
+    segs.push({ a, b, len });
+    total += len;
+  }
+  const half = total / 2;
+  let acc = 0;
+  for (const s of segs) {
+    if (acc + s.len >= half) {
+      const dx = s.b.x - s.a.x;
+      const dy = s.b.y - s.a.y;
+      const L = Math.hypot(dx, dy) || 1;
+      const tan = { x: dx / L, y: dy / L };
+      const nrm = { x: -tan.y, y: tan.x };
+      return { tan, nrm };
+    }
+    acc += s.len;
+  }
+  const a = points[points.length - 2];
+  const b = points[points.length - 1];
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const L = Math.hypot(dx, dy) || 1;
+  return { tan: { x: dx / L, y: dy / L }, nrm: { x: -dy / L, y: dx / L } };
+}
+function unitNormal(a, b) {
+  const dx = b.x - a.x, dy = b.y - a.y;
+  const len = Math.hypot(dx, dy) || 1;
+  return { x: -dy / len, y: dx / len };
+}
+function baseNormalForPair(u, v, nodes) {
+  const a = String(u), b = String(v);
+  const p0 = a < b ? a : b;
+  const p1 = a < b ? b : a;
+  const n0 = nodes[p0], n1 = nodes[p1];
+  if (!n0 || !n1) return null;
+  return unitNormal({ x: n0.cx, y: n0.cy }, { x: n1.cx, y: n1.cy });
+}
+function pathToD(points) {
+  if (!points.length) return "";
+  let d = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 1; i < points.length; i++) d += ` L ${points[i].x} ${points[i].y}`;
+  return d;
+}
+function quadMidpoint(A, C, B) {
+  return { x: 0.25 * A.x + 0.5 * C.x + 0.25 * B.x, y: 0.25 * A.y + 0.5 * C.y + 0.25 * B.y };
+}
+function quadToD(A, C, B) { return `M ${A.x} ${A.y} Q ${C.x} ${C.y} ${B.x} ${B.y}`; }
+function simpleHash(str) {
+  let h = 2166136261;
+  for (let i = 0; i < str.length; i++) {
+    h ^= str.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function nudgePoints(points, minDist, maxTries = 24) {
+  const placed = [];
+  for (const p of points) {
+    let x = p.x, y = p.y, dir = p.dir;
+    if (!isFinite(dir.x) || !isFinite(dir.y) || (Math.abs(dir.x) + Math.abs(dir.y) < 1e-6)) dir = { x: 0, y: -1 };
+    const dL = Math.hypot(dir.x, dir.y) || 1;
+    dir = { x: dir.x / dL, y: dir.y / dL };
+    for (let t = 0; t < maxTries; t++) {
+      let collided = false;
+      for (const q of placed) if (Math.hypot(x - q.x, y - q.y) < minDist) { collided = true; break; }
+      if (!collided) break;
+      const step = 4 + (t % 4);
+      x += dir.x * step;
+      y += dir.y * step;
+      if (t % 6 === 5) dir = { x: -dir.y, y: dir.x };
+    }
+    p.x = x; p.y = y;
+    placed.push({ x, y });
+  }
+  return points;
+}
+function removeCyclesDFS(nodeIds, edges) {
+  const adj = new Map(nodeIds.map(id => [id, []]));
+  for (const [u, v] of edges) if (adj.has(u) && adj.has(v)) adj.get(u).push(v);
+  const state = new Map(nodeIds.map(id => [id, 0]));
+  const keep = [];
+  function dfs(u) {
+    state.set(u, 1);
+    for (const v of adj.get(u) || []) {
+      const st = state.get(v) || 0;
+      if (st === 0) { keep.push([u, v]); dfs(v); }
+      else if (st === 2) keep.push([u, v]);
+    }
+    state.set(u, 2);
+  }
+  for (const id of nodeIds) if ((state.get(id) || 0) === 0) dfs(id);
+  const seen = new Set();
+  const out = [];
+  for (const [u, v] of keep) {
+    const k = u + "→" + v;
+    if (!seen.has(k)) { seen.add(k); out.push([u, v]); }
+  }
+  return out;
+}
+function connectedComponents(nodeIds, edges) {
+  const und = new Map(nodeIds.map(id => [id, new Set()]));
+  for (const [u, v] of edges) {
+    if (!und.has(u) || !und.has(v)) continue;
+    und.get(u).add(v);
+    und.get(v).add(u);
+  }
+  const seen = new Set();
+  const comps = [];
+  for (const id of nodeIds) {
+    if (seen.has(id)) continue;
+    const q = [id];
+    seen.add(id);
+    const comp = [];
+    while (q.length) {
+      const u = q.pop();
+      comp.push(u);
+      for (const v of und.get(u) || []) if (!seen.has(v)) { seen.add(v); q.push(v); }
+    }
+    comps.push(comp);
+  }
+  return comps;
+}
+function gridPack(ids, sizes, opts = {}) {
+  const gapX = opts.gapX ?? 50, gapY = opts.gapY ?? 45, maxCols = opts.maxCols ?? 4;
+  const pos = new Map();
+  let col = 0, y = 0, rowH = 0, x = 0;
+  const sorted = [...ids].sort((a, b) => String(a).localeCompare(String(b)));
+  for (const id of sorted) {
+    const s = sizes.get(id) || { w: 120, h: 36 };
+    if (col >= maxCols) { col = 0; x = 0; y += rowH + gapY; rowH = 0; }
+    pos.set(id, { x: x + s.w / 2, y: y + s.h / 2 });
+    x += s.w + gapX;
+    rowH = Math.max(rowH, s.h);
+    col++;
+  }
+  return pos;
+}
+function makeSugiyamaLayout(nodeSizeFn) {
+  return sugiyama().layering(layeringSimplex()).decross(decrossOpt()).coord(coordQuad()).nodeSize(nodeSizeFn).gap([32, 26]).tweaks([tweakFlip("diagonal")]);
+}
+function boundsFromCenters(ids, centers, sizes) {
+  let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity;
+  for (const id of ids) {
+    const c = centers.get(id) || { x: 0, y: 0 };
+    const s = sizes.get(id) || { w: 120, h: 36 };
+    left = Math.min(left, c.x - s.w / 2);
+    right = Math.max(right, c.x + s.w / 2);
+    top = Math.min(top, c.y - s.h / 2);
+    bottom = Math.max(bottom, c.y + s.h / 2);
+  }
+  if (!isFinite(left)) left = top = right = bottom = 0;
+  return { left, top, right, bottom };
+}
+function layoutWithD3Dag(ids, edges, sizes) {
+  if (ids.length === 0) return new Map();
+  if (ids.length === 1) {
+    const only = ids[0];
+    return new Map([[only, { x: (sizes.get(only)?.w ?? 120) / 2, y: (sizes.get(only)?.h ?? 36) / 2 }]]);
+  }
+  const comps = connectedComponents(ids, edges);
+  const positions = new Map();
+  let packY = 0;
+  const packGap = 70;
+  for (const comp of comps) {
+    const compSet = new Set(comp);
+    const compEdges = edges.filter(([u, v]) => compSet.has(u) && compSet.has(v));
+    let localPos;
+    if (compEdges.length === 0) localPos = gridPack(comp, sizes, { maxCols: 4, gapX: 60, gapY: 55 });
+    else {
+      const acyclic = removeCyclesDFS(comp, compEdges);
+      try {
+        const dag = graphConnect()(acyclic);
+        const nodeSizeFn = (n) => {
+          const id = n.data;
+          const s = sizes.get(id) || { w: 120, h: 36 };
+          return [s.h, s.w];
+        };
+        makeSugiyamaLayout(nodeSizeFn)(dag);
+        localPos = new Map();
+        for (const node of dag.nodes()) localPos.set(node.data, { x: node.x, y: node.y });
+        for (const id of comp) if (!localPos.has(id)) localPos.set(id, { x: 0, y: 0 });
+      } catch {
+        localPos = gridPack(comp, sizes, { maxCols: 4, gapX: 60, gapY: 55 });
+      }
+    }
+    const bbox = boundsFromCenters(comp, localPos, sizes);
+    const shiftX = -bbox.left;
+    const shiftY = -bbox.top + packY;
+    for (const id of comp) {
+      const p = localPos.get(id);
+      positions.set(id, { x: p.x + shiftX, y: p.y + shiftY });
+    }
+    packY += (bbox.bottom - bbox.top) + packGap;
+  }
+  return positions;
+}
+
+function createSvgShell(host, options) {
+  host.classList.add("diagramo-host");
+  host.style.minHeight = `${options.height}px`;
+  host.innerHTML = "";
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+  marker.setAttribute("id", `diagramoArrowHead-${Math.random().toString(36).slice(2)}`);
+  marker.setAttribute("viewBox", "0 0 10 10");
+  marker.setAttribute("refX", "9");
+  marker.setAttribute("refY", "5");
+  marker.setAttribute("markerWidth", "8");
+  marker.setAttribute("markerHeight", "8");
+  marker.setAttribute("orient", "auto-start-reverse");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", "M 0 0 L 10 5 L 0 10 z");
+  path.setAttribute("fill", "rgba(230,230,230,0.95)");
+  marker.appendChild(path);
+  defs.appendChild(marker);
+  svg.appendChild(defs);
+  const zoomLayer = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  const scene = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  zoomLayer.appendChild(scene);
+  svg.appendChild(zoomLayer);
+  const status = document.createElement("div");
+  status.className = "diagramo-status";
+  host.appendChild(svg);
+  host.appendChild(status);
+  return { svg: d3.select(svg), zoomLayer: d3.select(zoomLayer), scene: d3.select(scene), status, arrowHeadId: marker.id };
+}
+function setStatus(statusEl, msg, kind = "neutral") {
+  statusEl.textContent = msg;
+  statusEl.className = "diagramo-status" + (kind === "ok" ? " ok" : kind === "bad" ? " bad" : "");
+}
+function fitToView(svgSel, zoomLayerSel, sceneSel, host, zoomBehavior, animate = false) {
+  const w = host.clientWidth || 800;
+  const h = host.clientHeight || 360;
+  const g = sceneSel.node();
+  if (!g) return;
+  const bbox = g.getBBox();
+  if (!(bbox.width > 0 && bbox.height > 0)) return;
+  const pad = 24;
+  const scale = Math.min((w - pad * 2) / bbox.width, (h - pad * 2) / bbox.height);
+  const tx = (w / 2) - scale * (bbox.x + bbox.width / 2);
+  const ty = (h / 2) - scale * (bbox.y + bbox.height / 2);
+  const t = d3.zoomIdentity.translate(tx, ty).scale(scale);
+  if (zoomBehavior) {
+    const target = animate ? svgSel.transition().duration(200) : svgSel;
+    target.call(zoomBehavior.transform, t);
+  } else {
+    zoomLayerSel.attr("transform", `translate(${tx},${ty}) scale(${scale})`);
+  }
+}
+
+function renderNCFDocIntoHost(ncfDoc, host, options) {
+  injectStyles();
+  const warnings = [];
+  const { svg, zoomLayer, scene, status, arrowHeadId } = createSvgShell(host, options);
+  let zoomBehavior = null;
+  if (options.zoom) {
+    zoomBehavior = d3.zoom().scaleExtent([0.1, 6]).on("zoom", (event) => zoomLayer.attr("transform", event.transform));
+    svg.call(zoomBehavior);
+  }
+
+  const nodes = {};
+  function ensureNode(id) {
+    if (!nodes[id]) {
+      nodes[id] = { id, data: {}, classSet: new Set(), parent: "__root__", isArrow: false, isMetaRoot: false, placeholder: true, w: 120, h: 36, cx: 0, cy: 0, isCompound: false, headerH: 22, childLocalCenters: new Map(), depth: 0 };
+    }
+    return nodes[id];
+  }
+  for (const expr of ncfDoc.nodes) {
+    const n = ensureNode(expr.id);
+    n.placeholder = false;
+    n.data = { ...expr.data };
+    splitClasses(expr.classString || "").forEach(c => n.classSet.add(c));
+    if (expr.parent) n.parent = expr.parent;
+  }
+  for (const id of Object.keys(nodes)) {
+    const n = nodes[id];
+    n.isMetaRoot = id === "__root__" || n.classSet.has("root");
+    n.isArrow = n.classSet.has("arrow");
+  }
+  for (const id of Object.keys(nodes)) nodes[id].parent = normalizeParent(nodes[id].parent, nodes);
+
+  const edges = [];
+  for (const expr of ncfDoc.edges) {
+    const e = { id: expr.id, src: expr.src, dst: expr.dst, data: { ...expr.data }, classSet: new Set(splitClasses(expr.classString || "")) };
+    ensureNode(e.src);
+    ensureNode(e.dst);
+    edges.push(e);
+  }
+  for (const id of Object.keys(nodes)) {
+    const n = nodes[id];
+    if (n.placeholder) warnings.push(`Soft-created missing node "${id}" (referenced by an edge).`);
+    n.isMetaRoot = id === "__root__" || n.classSet.has("root");
+    n.isArrow = n.classSet.has("arrow");
+    n.parent = normalizeParent(n.parent, nodes);
+  }
+
+  const renderable = new Set(Object.keys(nodes).filter(id => !nodes[id].isMetaRoot && !nodes[id].isArrow));
+  const childrenByParent = new Map();
+  for (const id of Object.keys(nodes)) {
+    const p = nodes[id].parent || "__root__";
+    if (!childrenByParent.has(p)) childrenByParent.set(p, []);
+    childrenByParent.get(p).push(id);
+  }
+  const renderableChildrenByParent = new Map();
+  for (const [p, kids] of childrenByParent.entries()) renderableChildrenByParent.set(p, kids.filter(k => renderable.has(k)));
+  for (const id of renderable) nodes[id].isCompound = (renderableChildrenByParent.get(id) || []).length > 0;
+
+  function computeDepth(id) {
+    let d = 0;
+    let cur = nodes[id]?.parent ?? "__root__";
+    const guard = new Set([id]);
+    while (cur && cur !== "__root__" && nodes[cur]) {
+      if (guard.has(cur)) break;
+      guard.add(cur);
+      d++;
+      cur = nodes[cur].parent ?? "__root__";
+    }
+    return d;
+  }
+  for (const id of renderable) nodes[id].depth = computeDepth(id);
+
+  const measurer = document.createElement("canvas").getContext("2d");
+  measurer.font = "12px system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
+  function measureLabel(s) { return Math.ceil(measurer.measureText(String(s ?? "")).width); }
+  function nodeLabel(n) { return n.data.label ?? n.data.name ?? n.data.title ?? n.id; }
+  for (const id of renderable) {
+    const n = nodes[id];
+    n.w = Math.max(68, measureLabel(nodeLabel(n)) + 24);
+    n.h = 34;
+    if (n.placeholder) n.w = Math.max(n.w, 90);
+  }
+
+  const arrowNodes = Object.keys(nodes).filter(id => nodes[id].isArrow && !nodes[id].isMetaRoot);
+  const arrowWiring = new Map();
+  for (const aid of arrowNodes) arrowWiring.set(aid, { fromId: null, toId: null, fromEdgeId: null, toEdgeId: null });
+  for (const e of edges) {
+    const k = edgeKind(e);
+    if (!k) continue;
+    if (k === "arrowFrom" && arrowWiring.has(e.dst)) {
+      const w = arrowWiring.get(e.dst); w.fromId = e.src; w.fromEdgeId = e.id;
+    } else if (k === "arrowTo" && arrowWiring.has(e.src)) {
+      const w = arrowWiring.get(e.src); w.toId = e.dst; w.toEdgeId = e.id;
+    }
+  }
+
+  function directChildUnder(parentId, nodeId) {
+    if (!nodes[nodeId]) return null;
+    let cur = nodeId, prev = null;
+    const guard = new Set();
+    while (cur && cur !== parentId) {
+      if (guard.has(cur)) return null;
+      guard.add(cur);
+      prev = cur;
+      cur = nodes[cur]?.parent ?? "__root__";
+      if (cur === "__root__" && parentId !== "__root__") return null;
+    }
+    return cur === parentId ? prev : null;
+  }
+  function localObjectEdgesForParent(parentId, childIdsSet) {
+    const links = [];
+    const seen = new Set();
+    for (const [aid, w] of arrowWiring.entries()) {
+      if (!w.fromId || !w.toId) continue;
+      const from = w.fromId, to = w.toId;
+      if (!renderable.has(from) || !renderable.has(to)) continue;
+      const u = directChildUnder(parentId, from);
+      const v = directChildUnder(parentId, to);
+      if (!u || !v || u === v) continue;
+      if (!childIdsSet.has(u) || !childIdsSet.has(v)) continue;
+      const key = u + "→" + v;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      links.push([u, v]);
+    }
+    return links;
+  }
+
+  const unorderedKey = (u, v) => { const a = String(u), b = String(v); return a < b ? (a + "|" + b) : (b + "|" + a); };
+  const baseCountByPair = new Map();
+  for (const [aid, w] of arrowWiring.entries()) if (w.fromId && w.toId && renderable.has(w.fromId) && renderable.has(w.toId)) {
+    const k = unorderedKey(w.fromId, w.toId);
+    baseCountByPair.set(k, (baseCountByPair.get(k) || 0) + 1);
+  }
+  const basePairsCache = new Map();
+  function arrowBasePairs(aid, stack = new Set()) {
+    if (basePairsCache.has(aid)) return basePairsCache.get(aid);
+    if (stack.has(aid)) return new Set();
+    stack.add(aid);
+    const out = new Set();
+    const w = arrowWiring.get(aid);
+    if (w?.fromId && w?.toId) {
+      const f = w.fromId, t = w.toId;
+      if (renderable.has(f) && renderable.has(t)) out.add(unorderedKey(f, t));
+      else {
+        if (nodes[f]?.isArrow) for (const k of arrowBasePairs(f, stack)) out.add(k);
+        if (nodes[t]?.isArrow) for (const k of arrowBasePairs(t, stack)) out.add(k);
+      }
+    }
+    stack.delete(aid);
+    basePairsCache.set(aid, out);
+    return out;
+  }
+  const scoreByPair = new Map(baseCountByPair);
+  const bump = (k, amt = 1) => scoreByPair.set(k, (scoreByPair.get(k) || 0) + amt);
+  for (const [mid, w] of arrowWiring.entries()) {
+    if (!w?.fromId || !w?.toId) continue;
+    if (nodes[w.fromId]?.isArrow) for (const k of arrowBasePairs(w.fromId)) bump(k, 1);
+    if (nodes[w.toId]?.isArrow) for (const k of arrowBasePairs(w.toId)) bump(k, 1);
+  }
+  function extraSpacersForPairKey(k) {
+    const base = baseCountByPair.get(k) || 0;
+    const score = scoreByPair.get(k) || base;
+    if (base <= 0) return 0;
+    const delta = Math.max(0, score - base);
+    return Math.min(5, Math.ceil(delta / 2));
+  }
+  let spacerCounter = 0;
+  function layoutGraphForParent(parentId, kids) {
+    const kidSet = new Set(kids);
+    const raw = localObjectEdgesForParent(parentId, kidSet);
+    const spacerSizes = new Map();
+    const spacerIds = [];
+    const links = [];
+    for (const [u, v] of raw) {
+      const extra = extraSpacersForPairKey(unorderedKey(u, v));
+      if (extra <= 0) { links.push([u, v]); continue; }
+      let prev = u;
+      for (let i = 0; i < extra; i++) {
+        const sid = `__sp${++spacerCounter}`;
+        spacerIds.push(sid);
+        spacerSizes.set(sid, { w: 26, h: 12 });
+        links.push([prev, sid]);
+        prev = sid;
+      }
+      links.push([prev, v]);
+    }
+    return { ids: [...kids, ...spacerIds], links, spacerSizes };
+  }
+
+  const compoundGuard = new Set();
+  function computeCompoundGeometry(id) {
+    const n = nodes[id];
+    if (!n.isCompound || compoundGuard.has(id)) return;
+    compoundGuard.add(id);
+    const kids = renderableChildrenByParent.get(id) || [];
+    for (const kid of kids) if (nodes[kid].isCompound) computeCompoundGeometry(kid);
+    const childSizes = new Map(kids.map(k => [k, { w: nodes[k].w, h: nodes[k].h }]));
+    const lg = layoutGraphForParent(id, kids);
+    const sizesForLayout = new Map(childSizes);
+    for (const [sid, sz] of lg.spacerSizes) sizesForLayout.set(sid, sz);
+    const localCenters = layoutWithD3Dag(lg.ids, lg.links, sizesForLayout);
+    const bbox = boundsFromCenters(kids, localCenters, childSizes);
+    const contentW = bbox.right - bbox.left;
+    const contentH = bbox.bottom - bbox.top;
+    const pad = 14;
+    const headerH = n.headerH;
+    const minW = Math.max(120, measureLabel(nodeLabel(n)) + 26);
+    const desiredW = contentW + 2 * pad;
+    const W = Math.max(minW, desiredW);
+    const extraX = (W - desiredW) / 2;
+    const H = headerH + contentH + 2 * pad;
+    n.childLocalCenters = new Map();
+    for (const kid of kids) {
+      const c = localCenters.get(kid) || { x: 0, y: 0 };
+      n.childLocalCenters.set(kid, { x: (c.x - bbox.left) + pad + extraX, y: (c.y - bbox.top) + headerH + pad });
+    }
+    n.w = W; n.h = H;
+    compoundGuard.delete(id);
+  }
+  for (const id of [...renderable].sort((a, b) => nodes[b].depth - nodes[a].depth)) if (nodes[id].isCompound) computeCompoundGeometry(id);
+
+  const topKids = (renderableChildrenByParent.get("__root__") || []).filter(id => renderable.has(id));
+  const topSizes = new Map(topKids.map(k => [k, { w: nodes[k].w, h: nodes[k].h }]));
+  const lgTop = layoutGraphForParent("__root__", topKids);
+  const sizesForLayoutTop = new Map(topSizes);
+  for (const [sid, sz] of lgTop.spacerSizes) sizesForLayoutTop.set(sid, sz);
+  const topCenters = layoutWithD3Dag(lgTop.ids, lgTop.links, sizesForLayoutTop);
+  const topBbox = boundsFromCenters(topKids, topCenters, topSizes);
+  const margin = 60;
+  const rootShiftX = -topBbox.left + margin;
+  const rootShiftY = -topBbox.top + margin;
+  function assignGlobal(id, cx, cy) {
+    const n = nodes[id];
+    n.cx = cx; n.cy = cy;
+    if (n.isCompound) {
+      const tlx = cx - n.w / 2, tly = cy - n.h / 2;
+      for (const kid of renderableChildrenByParent.get(id) || []) {
+        const off = n.childLocalCenters.get(kid);
+        if (off) assignGlobal(kid, tlx + off.x, tly + off.y);
+      }
+    }
+  }
+  for (const id of topKids) {
+    const c = topCenters.get(id) || { x: 0, y: 0 };
+    assignGlobal(id, c.x + rootShiftX, c.y + rootShiftY);
+  }
+
+  const ortho = !!options.ortho;
+  const showWiring = !!options.wiring;
+  const showGlyphs = !!options.glyphs;
+  const arrowsValid = [];
+  const arrowsInvalid = [];
+  for (const [aid, w] of arrowWiring.entries()) {
+    if (!w.fromId || !w.toId) arrowsInvalid.push({ id: aid, ...w });
+    else arrowsValid.push({ id: aid, from: w.fromId, to: w.toId });
+  }
+  const oneMorphisms = arrowsValid.filter(a => renderable.has(a.from) && renderable.has(a.to));
+  const lanes = new Map();
+  const laneGap = 10;
+  const grouped = new Map();
+  for (const a of oneMorphisms) {
+    const pair = [a.from, a.to].sort((x, y) => String(x).localeCompare(String(y)));
+    const key = pair[0] + "|" + pair[1];
+    if (!grouped.has(key)) grouped.set(key, { pair, forward: [], backward: [] });
+    (a.from === pair[0] && a.to === pair[1] ? grouped.get(key).forward : grouped.get(key).backward).push(a.id);
+  }
+  for (const g of grouped.values()) {
+    const hasBoth = g.forward.length && g.backward.length;
+    if (hasBoth) {
+      for (let i = 0; i < g.forward.length; i++) lanes.set(g.forward[i], +laneGap * (i + 1));
+      for (let i = 0; i < g.backward.length; i++) lanes.set(g.backward[i], -laneGap * (i + 1));
+    } else {
+      const ids = g.forward.length ? g.forward : g.backward;
+      const m = ids.length;
+      for (let i = 0; i < m; i++) lanes.set(ids[i], laneGap * (i - (m - 1) / 2));
+    }
+  }
+
+  const arrowPath = new Map();
+  const arrowAnchor = new Map();
+  const arrowAnchorGuard = new Set();
+  function nodeRect(id) { const n = nodes[id]; return { cx: n.cx, cy: n.cy, w: n.w, h: n.h }; }
+  function approxArrowCenter(aid) {
+    const w = arrowWiring.get(aid);
+    if (w?.fromId && w?.toId && nodes[w.fromId] && nodes[w.toId]) return { x: (nodes[w.fromId].cx + nodes[w.toId].cx) / 2, y: (nodes[w.fromId].cy + nodes[w.toId].cy) / 2 };
+    return { x: 0, y: 0 };
+  }
+  function endpointAnchor(endpointId) {
+    const n = nodes[endpointId];
+    if (!n) return { x: 0, y: 0, type: "missing" };
+    if (n.isArrow) return { ...getArrowAnchor(endpointId), type: "arrow" };
+    if (renderable.has(endpointId)) return { x: n.cx, y: n.cy, type: "node" };
+    return { x: n.cx ?? 0, y: n.cy ?? 0, type: "other" };
+  }
+  function buildPathBetween(fromId, toId, opts) {
+    const aA = endpointAnchor(fromId);
+    const aB = endpointAnchor(toId);
+    let start = { x: aA.x, y: aA.y }, end = { x: aB.x, y: aB.y };
+    if (aA.type === "node") start = trimToRect(nodeRect(fromId), end);
+    if (aB.type === "node") end = trimToRect(nodeRect(toId), start);
+    const offset = opts.offset ?? 0;
+    if (opts.ortho) {
+      start = { x: start.x, y: start.y + offset };
+      end = { x: end.x, y: end.y + offset };
+      const midX = (start.x + end.x) / 2;
+      return [start, { x: midX, y: start.y }, { x: midX, y: end.y }, end];
+    }
+    const nrm = opts.baseNormal ?? unitNormal(start, end);
+    start = { x: start.x + nrm.x * offset, y: start.y + nrm.y * offset };
+    end = { x: end.x + nrm.x * offset, y: end.y + nrm.y * offset };
+    return [start, end];
+  }
+  function getArrowAnchor(aid) {
+    if (arrowAnchor.has(aid)) return arrowAnchor.get(aid);
+    if (arrowAnchorGuard.has(aid)) return approxArrowCenter(aid);
+    arrowAnchorGuard.add(aid);
+    const w = arrowWiring.get(aid);
+    if (!w?.fromId || !w?.toId) {
+      const fallback = approxArrowCenter(aid);
+      arrowAnchor.set(aid, fallback);
+      arrowAnchorGuard.delete(aid);
+      return fallback;
+    }
+    const is1 = renderable.has(w.fromId) && renderable.has(w.toId);
+    const offset = is1 ? (lanes.get(aid) ?? 0) : 0;
+    const baseNormal = is1 ? baseNormalForPair(w.fromId, w.toId, nodes) : null;
+    const points = buildPathBetween(w.fromId, w.toId, { ortho: is1 ? ortho : false, offset, baseNormal });
+    const mid = polylineMidpoint(points);
+    const label = nodes[aid]?.data?.label ?? nodes[aid]?.data?.name ?? aid;
+    arrowPath.set(aid, { points: points.map(p => ({ ...p })), mid, kind: is1 ? "m1" : "m2", label, laneOffset: offset, baseNormal, ctrl: null });
+    arrowAnchor.set(aid, mid);
+    arrowAnchorGuard.delete(aid);
+    return mid;
+  }
+  for (const a of arrowsValid) getArrowAnchor(a.id);
+  function bundleCurvesForM2() {
+    const curveGap = 16, curveCap = 60;
+    const endpointKey = (id) => (nodes[id]?.isArrow ? `a:${id}` : `n:${id}`);
+    const groups = new Map();
+    for (const aid of arrowsValid.filter(a => !(renderable.has(a.from) && renderable.has(a.to))).map(a => a.id).sort()) {
+      const w = arrowWiring.get(aid);
+      if (!w?.fromId || !w?.toId) continue;
+      const pts = buildPathBetween(w.fromId, w.toId, { ortho: false, offset: 0, baseNormal: null });
+      const A = pts[0], B = pts[pts.length - 1];
+      const key = endpointKey(w.fromId) + "->" + endpointKey(w.toId);
+      if (!groups.has(key)) groups.set(key, []);
+      groups.get(key).push({ aid, A, B });
+    }
+    for (const members of groups.values()) {
+      members.sort((p, q) => String(p.aid).localeCompare(String(q.aid)));
+      const m = members.length;
+      for (let i = 0; i < m; i++) {
+        const mem = members[i];
+        const P = arrowPath.get(mem.aid);
+        if (!P) continue;
+        const t = i - (m - 1) / 2;
+        const mid = { x: (mem.A.x + mem.B.x) / 2, y: (mem.A.y + mem.B.y) / 2 };
+        const nrm = unitNormal(mem.A, mem.B);
+        const L = Math.hypot(mem.B.x - mem.A.x, mem.B.y - mem.A.y) || 1;
+        const maxMag = Math.min(curveCap, 0.35 * L);
+        const mag = Math.max(-maxMag, Math.min(maxMag, t * curveGap));
+        const C = { x: mid.x + nrm.x * mag, y: mid.y + nrm.y * mag };
+        P.points = [mem.A, mem.B]; P.ctrl = C; P.mid = quadMidpoint(mem.A, C, mem.B);
+        arrowAnchor.set(mem.aid, P.mid);
+      }
+    }
+  }
+  bundleCurvesForM2();
+
+  const allCompounds = [...renderable].filter(id => nodes[id].isCompound).sort((a, b) => nodes[a].depth - nodes[b].depth);
+  if (showWiring) {
+    const wiring = [];
+    for (const [aid, w] of arrowWiring.entries()) {
+      if (!w.fromId || !w.toId) continue;
+      const aMid = arrowAnchor.get(aid) || approxArrowCenter(aid);
+      wiring.push({ from: w.fromId, to: aid, aMid });
+      wiring.push({ from: aid, to: w.toId, aMid });
+    }
+    scene.append("g").attr("class", "wiringLayer").selectAll("path").data(wiring).join("path")
+      .attr("class", "edge wiring").attr("marker-end", `url(#${arrowHeadId})`)
+      .attr("d", (d) => {
+        const a = endpointAnchor(d.from);
+        const b = (d.to in nodes && nodes[d.to].isArrow) ? { x: d.aMid.x, y: d.aMid.y } : endpointAnchor(d.to);
+        return pathToD([{ x: a.x, y: a.y }, { x: b.x, y: b.y }]);
+      });
+  }
+
+  const visibleEdges = arrowsValid.map(a => {
+    const p = arrowPath.get(a.id);
+    const kind = p?.kind || ((renderable.has(a.from) && renderable.has(a.to)) ? "m1" : "m2");
+    return { id: a.id, from: a.from, to: a.to, points: p?.points || [], ctrl: p?.ctrl || null, mid: p?.mid || approxArrowCenter(a.id), kind, label: p?.label || a.id, laneOffset: p?.laneOffset ?? 0, baseNormal: p?.baseNormal ?? null };
+  });
+  visibleEdges.sort((a, b) => (a.kind === b.kind ? 0 : (a.kind === "m1" ? -1 : 1)));
+  const edgeLayer = scene.append("g").attr("class", "edgeLayer");
+  edgeLayer.selectAll("path").data(visibleEdges).join("path")
+    .attr("class", d => d.kind === "m2" ? "edge m2" : "edge")
+    .attr("marker-end", `url(#${arrowHeadId})`)
+    .attr("d", d => (d.kind === "m2" && d.ctrl && (d.points?.length || 0) >= 2) ? quadToD(d.points[0], d.ctrl, d.points[d.points.length - 1]) : pathToD(d.points));
+  function labelPos(d) {
+    const pts = d.points || [];
+    const chordNormal = (pts.length >= 2) ? unitNormal(pts[0], pts[pts.length - 1]) : { x: 0, y: -1 };
+    const nrm = (d.kind === "m1" && d.baseNormal) ? d.baseNormal : chordNormal;
+    const off = d.laneOffset ?? 0;
+    const sign = off === 0 ? 1 : Math.sign(off);
+    const mag = (d.kind === "m2" ? 18 : 14) + Math.min(10, Math.abs(off));
+    return { x: d.mid.x + nrm.x * sign * mag, y: d.mid.y + nrm.y * sign * mag, nrm };
+  }
+  const labelPoints = visibleEdges.map(d => {
+    const lp = labelPos(d); const h = simpleHash(d.id); const sgn = (h & 1) ? 1 : -1;
+    return { id: d.id, x: lp.x, y: lp.y, dir: { x: lp.nrm.x * sgn, y: lp.nrm.y * sgn } };
+  });
+  nudgePoints(labelPoints, 16, 24);
+  const labelById = new Map(labelPoints.map(p => [p.id, p]));
+  edgeLayer.selectAll("text").data(visibleEdges).join("text")
+    .attr("class", "edgeLabel")
+    .attr("x", d => (labelById.get(d.id)?.x ?? d.mid.x))
+    .attr("y", d => (labelById.get(d.id)?.y ?? d.mid.y))
+    .text(d => d.label ?? d.id);
+
+  const compLayer = scene.append("g").attr("class", "compoundLayer");
+  const compG = compLayer.selectAll("g.compound").data(allCompounds.map(id => nodes[id])).join("g")
+    .attr("class", "compound").attr("transform", d => `translate(${d.cx - d.w / 2}, ${d.cy - d.h / 2})`);
+  compG.append("rect").attr("class", "outer").attr("rx", 14).attr("ry", 14).attr("width", d => d.w).attr("height", d => d.h);
+  compG.append("rect").attr("class", "header").attr("rx", 14).attr("ry", 14).attr("width", d => d.w).attr("height", d => d.headerH);
+  compG.append("text").attr("x", 12).attr("y", 15).text(d => nodeLabel(d));
+
+  const objNodes = [...renderable].filter(id => !nodes[id].isCompound).sort((a, b) => nodes[a].depth - nodes[b].depth);
+  const nodeLayer = scene.append("g").attr("class", "nodeLayer");
+  const nodeG = nodeLayer.selectAll("g.node").data(objNodes.map(id => nodes[id])).join("g")
+    .attr("class", d => `node${d.placeholder ? " placeholder" : ""}`)
+    .attr("transform", d => `translate(${d.cx - d.w / 2}, ${d.cy - d.h / 2})`);
+  nodeG.append("rect").attr("rx", 12).attr("ry", 12).attr("width", d => d.w).attr("height", d => d.h);
+  nodeG.append("text").attr("x", d => d.w / 2).attr("y", d => d.h / 2 + 4).attr("text-anchor", "middle").text(d => nodeLabel(d));
+
+  if (showGlyphs) {
+    const glyphLayer = scene.append("g").attr("class", "glyphLayer");
+    const glyphData = arrowNodes.map(aid => {
+      const p = arrowPath.get(aid); const mid = arrowAnchor.get(aid) || approxArrowCenter(aid); const lbl = nodes[aid]?.data?.label ?? aid;
+      const nrm = p?.points?.length ? segmentAtHalf(p.points).nrm : { x: 0, y: -1 };
+      const h = simpleHash(aid); const sgn = (h & 1) ? 1 : -1;
+      return { id: aid, x: mid.x, y: mid.y, label: lbl, dir: { x: nrm.x * sgn, y: nrm.y * sgn } };
+    });
+    nudgePoints(glyphData, 18, 18);
+    const g = glyphLayer.selectAll("g.arrowGlyph").data(glyphData).join("g").attr("class", "arrowGlyph").attr("transform", d => `translate(${d.x}, ${d.y})`);
+    g.append("circle").attr("r", 7.5);
+    g.append("text").attr("x", 10).attr("y", 4).text(d => d.label);
+  }
+
+  if (arrowsInvalid.length) warnings.push(`Skipped ${arrowsInvalid.length} arrow-entities missing arrowFrom/arrowTo.`);
+  setStatus(status, warnings.length ? `Rendered with warnings:\n- ${warnings.join("\n- ")}` : "Rendered ✓", warnings.length ? "neutral" : "ok");
+  fitToView(svg, zoomLayer, scene, host, zoomBehavior, false);
+
+  if (options.observeResize !== false && typeof ResizeObserver !== "undefined") {
+    const ro = new ResizeObserver(() => fitToView(svg, zoomLayer, scene, host, zoomBehavior, false));
+    ro.observe(host);
+    host.__diagramoResizeObserver = ro;
+  }
+
+  return { svg, zoomLayer, scene, status, fit: () => fitToView(svg, zoomLayer, scene, host, zoomBehavior, true), arrowHeadId };
+}
+
+function normalizeRenderOptions(options = {}, el = null) {
+  const ds = el?.dataset || {};
+  const boolFrom = (a, b, fallback) => {
+    const v = a ?? b;
+    if (v === undefined || v === null || v === "") return fallback;
+    return !(v === false || v === "false" || v === "0" || v === "off" || v === "no");
+  };
+  const numFrom = (a, b, fallback) => {
+    const v = a ?? b;
+    const n = Number(v);
+    return Number.isFinite(n) && n > 0 ? n : fallback;
+  };
+  return {
+    mode: options.mode ?? ds.diagramoMode ?? "auto",
+    zoom: boolFrom(options.zoom, ds.diagramoZoom, false),
+    ortho: boolFrom(options.ortho, ds.diagramoOrtho, false),
+    wiring: boolFrom(options.wiring, ds.diagramoWiring, false),
+    glyphs: boolFrom(options.glyphs, ds.diagramoGlyphs, false),
+    height: numFrom(options.height, ds.diagramoHeight, 360),
+    observeResize: options.observeResize ?? true,
+    replaceSource: options.replaceSource ?? true
+  };
+}
+
+function renderSource(source, host, options = {}) {
+  const opts = normalizeRenderOptions(options, host);
+  injectStyles();
+  const compiled = compileSource(source, opts.mode);
+  const view = renderNCFDocIntoHost(compiled.ncf, host, opts);
+  host.__diagramoCompiled = compiled;
+  host.__diagramoView = view;
+  host.__diagramoSource = source;
+  return { host, compiled, fit: view.fit, rerender: (nextOptions = {}) => renderSource(source, host, { ...opts, ...nextOptions }) };
+}
+
+function renderElement(el, options = {}) {
+  if (!(el instanceof Element)) throw new Error("renderElement expects a DOM element");
+  const source = options.source ?? el.textContent ?? "";
+  const opts = normalizeRenderOptions(options, el);
+  let host = el;
+  if (opts.replaceSource && el.tagName === "PRE") {
+    host = document.createElement("div");
+    host.className = el.className;
+    for (const attr of el.attributes) {
+      if (attr.name === "class") continue;
+      host.setAttribute(attr.name, attr.value);
+    }
+    el.replaceWith(host);
+  }
+  host.classList.add("diagramo-rendered");
+  return renderSource(source, host, opts);
+}
+
+function renderAll(root = document, options = {}) {
+  const out = [];
+  for (const el of root.querySelectorAll("pre.diagramo, .diagramo[data-diagramo-source]")) {
+    if (el.__diagramoRendered) continue;
+    const result = renderElement(el, options);
+    const host = result.host;
+    host.__diagramoRendered = true;
+    out.push(result);
+  }
+  return out;
+}
+
+function autoRender() {
+  renderAll(document);
+}
+
+const Diagramo = {
+  version: VERSION,
+  parseSexpr,
+  compileAst,
+  compileSource,
+  emitCoreDoc,
+  emitNCFDoc,
+  renderSource,
+  renderElement,
+  renderAll,
+  autoRender
+};
+
+export {
+  VERSION,
+  Diagramo,
+  parseSexpr,
+  compileAst,
+  compileSource,
+  emitCoreDoc,
+  emitNCFDoc,
+  renderSource,
+  renderElement,
+  renderAll,
+  autoRender
+};