@jbrowse/bandage-core 0.1.19 → 0.1.20

package/dist/chunks/chunk-3XDR3ZBS.js

@@ -0,0 +1,4973 @@
+// src/layout/drawnScale.ts
+var MEAN_NODE_LENGTH = 40;
+var MIN_TOTAL_GRAPH_LENGTH = 500;
+var BANDAGE_MINIMUM_NODE_LENGTH = 5;
+function drawnNodeLength(opts, length) {
+  return Math.max(
+    opts.nodeLengthPerMegabase * length / 1e6,
+    opts.minimumNodeLength
+  );
+}
+function bandageAutoScale(graph, minNodeLength = BANDAGE_MINIMUM_NODE_LENGTH) {
+  const totalLength = graph.nodes.reduce((sum, n2) => sum + n2.length, 0);
+  const megabases = totalLength / 1e6;
+  const target = Math.max(
+    graph.nodes.length * MEAN_NODE_LENGTH,
+    MIN_TOTAL_GRAPH_LENGTH
+  );
+  return {
+    nodeLengthPerMegabase: megabases > 0 ? target / megabases : 1e4,
+    minimumNodeLength: Math.max(BANDAGE_MINIMUM_NODE_LENGTH, minNodeLength),
+    edgeLength: 5,
+    nodeSegmentLength: 20
+  };
+}
+var PROPORTIONAL_LENGTH = { power: 1, effect: 1 };
+function isProportional(law) {
+  return law.power === 1 && law.effect === 1;
+}
+function drawnLengthFor(graph, law) {
+  const count = graph.nodes.length;
+  const totalLength = graph.nodes.reduce((sum, n2) => sum + n2.length, 0);
+  const meanBp = count > 0 ? totalLength / count : 0;
+  const meanDrawn = count > 0 ? Math.max(count * MEAN_NODE_LENGTH, MIN_TOTAL_GRAPH_LENGTH) / count : MEAN_NODE_LENGTH;
+  return (bp) => {
+    if (meanBp <= 0) {
+      return meanDrawn;
+    }
+    const relative = (bp / meanBp) ** law.power;
+    return Math.max(
+      meanDrawn * ((relative - 1) * law.effect + 1),
+      BANDAGE_MINIMUM_NODE_LENGTH
+    );
+  };
+}
+var LAYOUT_LENGTH_PRECISION = 1e3;
+var PROPORTIONAL_SPREAD = {
+  law: PROPORTIONAL_LENGTH,
+  minNodeLength: 0
+};
+function layoutScaling(graph, spread = PROPORTIONAL_SPREAD) {
+  const { law, minNodeLength } = spread;
+  const opts = bandageAutoScale(graph, minNodeLength);
+  if (isProportional(law)) {
+    return { nodes: graph.nodes, opts };
+  }
+  const drawn = drawnLengthFor(graph, law);
+  return {
+    nodes: graph.nodes.map((node) => ({
+      ...node,
+      length: Math.round(drawn(node.length) * LAYOUT_LENGTH_PRECISION)
+    })),
+    opts: {
+      ...opts,
+      nodeLengthPerMegabase: 1e6 / LAYOUT_LENGTH_PRECISION,
+      // Bandage's own floor only. A law and a raised floor are alternatives
+      // rather than a stack: the law has already lifted the small end, and a
+      // floor on top of it would flatten exactly what it just spread.
+      minimumNodeLength: BANDAGE_MINIMUM_NODE_LENGTH
+    }
+  };
+}
+
+// src/bubbleSpreads.ts
+var BUBBLE_SPREADS = [
+  {
+    value: "auto",
+    label: "Proportional",
+    description: "Bandage's own scale: a node draws proportional to its length, so a 1 bp allele is a speck.",
+    law: PROPORTIONAL_LENGTH,
+    minNodeFactor: 0
+  },
+  {
+    value: "open",
+    label: "Open bubbles",
+    description: "Give every allele a drawn length, so a bubble reads as two arms rather than a knot.",
+    law: PROPORTIONAL_LENGTH,
+    minNodeFactor: 2.5
+  },
+  {
+    value: "wide",
+    label: "Wide bubbles",
+    description: "As open, spread further. Best on a window of a dozen bubbles.",
+    law: PROPORTIONAL_LENGTH,
+    minNodeFactor: 10
+  },
+  {
+    value: "compress",
+    label: "Compress lengths",
+    description: "Pull the longest and shortest nodes towards the graph\u2019s mean, so a cut spanning kb and bp fits one pane.",
+    law: { power: 0.5, effect: 0.5 },
+    minNodeFactor: 0
+  }
+];
+var BUBBLE_SPREAD_VALUES = BUBBLE_SPREADS.map((s) => s.value);
+function spreadFor(spread) {
+  const entry = BUBBLE_SPREADS.find((s) => s.value === spread);
+  return {
+    law: entry?.law ?? PROPORTIONAL_LENGTH,
+    minNodeLength: (entry?.minNodeFactor ?? 0) * MEAN_NODE_LENGTH
+  };
+}
+
+// src/pansn.ts
+var SEP = "#";
+function panSNSample(refName) {
+  return refName.split(SEP)[0];
+}
+var GENERIC_SAMPLES = /* @__PURE__ */ new Set(["_gbwt_ref"]);
+function isGenericSample(sample) {
+  return GENERIC_SAMPLES.has(sample);
+}
+function panSNHaplotype(refName) {
+  const parts = refName.split(SEP);
+  return parts.length >= 3 ? `${parts[0]}${SEP}${parts[1]}` : void 0;
+}
+function panSNContig(refName) {
+  const parts = refName.split(SEP);
+  return parts.length >= 3 ? parts.slice(2).join(SEP) : parts.length === 2 ? parts[1] : refName;
+}
+function panSNMatchesPrefix(refName, prefix) {
+  return prefix !== void 0 && (refName === prefix || refName.startsWith(prefix + SEP));
+}
+
+// src/anchoredNodes.ts
+var REFERENCE_RANK = 0;
+function isAnchored(node) {
+  return node.stable !== void 0;
+}
+function isBackbone(node) {
+  return node.stable?.rank === REFERENCE_RANK;
+}
+function isOffReference(node) {
+  return node.stable !== void 0 && node.stable.rank > REFERENCE_RANK;
+}
+function backboneNodes(graph) {
+  return graph.nodes.filter(isBackbone);
+}
+function backbonePositions(backbone) {
+  const positions = {};
+  for (const node of backbone) {
+    positions[node.id] = [
+      { x: node.stable.start, y: 0 },
+      { x: node.stable.start + node.length, y: 0 }
+    ];
+  }
+  return positions;
+}
+function firstNodeAtOrAfter(nodes, bp) {
+  let lo = 0;
+  let hi = nodes.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (nodes[mid].stable.start < bp) {
+      lo = mid + 1;
+    } else {
+      hi = mid;
+    }
+  }
+  return lo;
+}
+function backboneSpan(backbone) {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const node of backbone) {
+    min = Math.min(min, node.stable.start);
+    max = Math.max(max, node.stable.start + node.length);
+  }
+  return max - min;
+}
+function referenceSpan(backbone, region) {
+  return region && region.end > region.start ? region.end - region.start : backboneSpan(backbone);
+}
+
+// src/gfa-core/gfaParser.ts
+function parseTag(tag, tags) {
+  const nameEnd = tag.indexOf(":");
+  const typeEnd = tag.indexOf(":", nameEnd + 1);
+  if (nameEnd !== -1 && typeEnd !== -1) {
+    const name = tag.slice(0, nameEnd);
+    const type = tag.slice(nameEnd + 1, typeEnd);
+    const val = tag.slice(typeEnd + 1);
+    if (type === "i" || type === "f") {
+      tags[name] = +val;
+    } else if (type === "Z") {
+      tags[name] = val;
+    }
+  }
+}
+function parseTags(fields) {
+  const tags = {};
+  for (const field of fields) {
+    parseTag(field, tags);
+  }
+  return tags;
+}
+function stableCoordinate(node) {
+  const { SN, SO, SR } = node.tags;
+  return typeof SN === "string" && typeof SO === "number" && typeof SR === "number" ? { refName: SN, start: SO, rank: SR } : void 0;
+}
+var GT = 62;
+var LT = 60;
+function parseWalkBody(body) {
+  const segments = [];
+  let strand = "+";
+  let start = 0;
+  function push(end) {
+    if (end > start) {
+      segments.push({ id: body.slice(start, end), strand });
+    }
+  }
+  for (let i = 0; i < body.length; i++) {
+    const ch = body.charCodeAt(i);
+    if (ch === GT || ch === LT) {
+      push(i);
+      strand = ch === GT ? "+" : "-";
+      start = i + 1;
+    }
+  }
+  push(body.length);
+  return segments;
+}
+function parseGFA(file) {
+  const graph = {
+    nodes: [],
+    links: [],
+    paths: [],
+    walks: [],
+    header: [],
+    id: ""
+  };
+  for (const rawLine of file.split("\n")) {
+    const line = rawLine.endsWith("\r") ? rawLine.slice(0, -1) : rawLine;
+    if (line.startsWith("H")) {
+      const [, ...rest] = line.split("	");
+      graph.header.push(parseTags(rest));
+    } else if (line.startsWith("S")) {
+      const [, name, ...rest] = line.split("	");
+      let len;
+      let seq;
+      let tagfields;
+      let gfa1 = false;
+      const first = rest[0] ?? "*";
+      if (/^\d+$/.test(first)) {
+        len = +first;
+        seq = rest[1] ?? "*";
+        tagfields = rest.slice(2);
+      } else {
+        gfa1 = true;
+        seq = first;
+        len = seq === "*" ? 0 : seq.length;
+        tagfields = rest.slice(1);
+      }
+      const tags = parseTags(tagfields);
+      if (gfa1 && "LN" in tags) {
+        len = +tags.LN;
+      }
+      graph.nodes.push({ id: name, length: len, sequence: seq, tags });
+    } else if (line.startsWith("E")) {
+      const [, , source, target, , , , , cigar, ...rest] = line.split("	");
+      if (source && target) {
+        graph.links.push({
+          source: source.slice(0, -1),
+          target: target.slice(0, -1),
+          strand1: source.at(-1),
+          strand2: target.at(-1),
+          cigar: cigar ?? "*",
+          tags: parseTags(rest)
+        });
+      }
+    } else if (line.startsWith("L")) {
+      const [, source, strand1, target, strand2, cigar, ...rest] = line.split("	");
+      if (source && target && strand2) {
+        graph.links.push({
+          source,
+          target,
+          strand1,
+          strand2,
+          cigar: cigar ?? "*",
+          tags: parseTags(rest)
+        });
+      }
+    } else if (line.startsWith("W")) {
+      const [, sample, hap, contig, start, end, body, ...rest] = line.split("	");
+      if (sample && hap && contig && start && end && body) {
+        graph.walks.push({
+          sample,
+          haplotype: +hap,
+          contig,
+          start: start === "*" ? -1 : +start,
+          end: end === "*" ? -1 : +end,
+          segments: parseWalkBody(body),
+          tags: parseTags(rest)
+        });
+      }
+    } else if (line.startsWith("P")) {
+      const [, name, path, ...rest] = line.split("	");
+      if (name && path) {
+        graph.paths.push({ name, path, rest });
+      }
+    }
+  }
+  return graph;
+}
+
+// src/pathAnchoring.ts
+var RANGE_SUFFIX = /:(\d+)-\d+$/;
+function pathOrigin(pathName) {
+  const match = RANGE_SUFFIX.exec(pathName);
+  return match ? { name: pathName.slice(0, match.index), start: +match[1] } : { name: pathName, start: 0 };
+}
+function surveyPaths(paths, lengthOf) {
+  const anchorPaths = [];
+  const pathVisits = /* @__PURE__ */ new Map();
+  for (const path of paths) {
+    const sample = panSNSample(path.name);
+    let pos = path.start;
+    for (const step of path.steps) {
+      const visit = {
+        path: path.name,
+        sample,
+        start: pos,
+        strand: step.strand
+      };
+      const existing = pathVisits.get(step.id);
+      if (existing) {
+        existing.push(visit);
+      } else {
+        pathVisits.set(step.id, [visit]);
+      }
+      pos += lengthOf(step.id);
+    }
+    anchorPaths.push({
+      name: path.name,
+      sample,
+      start: path.start,
+      length: pos - path.start
+    });
+  }
+  return { anchorPaths, pathVisits };
+}
+function chooseReferencePath(anchorPaths, preferred) {
+  const named = anchorPaths.find(
+    (p) => p.sample === preferred || p.name === preferred
+  );
+  return named ?? anchorPaths[0];
+}
+var OFF_REFERENCE_RANK = 1;
+function anchorNode(node, visits, reference) {
+  let anchored = node;
+  if (visits && visits.length > 0) {
+    const anchor = visits.find((v) => v.path === reference) ?? visits[0];
+    anchored = {
+      ...node,
+      stable: {
+        refName: anchor.path,
+        start: anchor.start,
+        rank: anchor.path === reference ? REFERENCE_RANK : OFF_REFERENCE_RANK,
+        strand: anchor.strand
+      },
+      samples: [...new Set(visits.map((v) => v.sample))].sort()
+    };
+  }
+  return anchored;
+}
+function anchorFromPaths(graph, preferred) {
+  const { anchorPaths, pathVisits } = graph;
+  const reference = anchorPaths && pathVisits ? chooseReferencePath(anchorPaths, preferred) : void 0;
+  return reference && pathVisits ? {
+    ...graph,
+    nodes: graph.nodes.map(
+      (node) => anchorNode(node, pathVisits.get(node.name), reference.name)
+    ),
+    anchoredBy: "paths",
+    referencePath: reference.name
+  } : graph;
+}
+function anchorGraph(graph, preferred) {
+  return graph.anchoredBy === "tags" ? graph : anchorFromPaths(graph, preferred);
+}
+
+// src/gfa/gfaConverter.ts
+function surveySegments(gfaGraph) {
+  const canonical = /* @__PURE__ */ new Map();
+  const traversals = /* @__PURE__ */ new Map();
+  function claim(id, strand) {
+    if (!canonical.has(id)) {
+      canonical.set(id, strand);
+    }
+  }
+  function traverse(id, strand) {
+    claim(id, strand);
+    traversals.set(id, (traversals.get(id) ?? 0) + 1);
+  }
+  for (const link of gfaGraph.links) {
+    claim(link.source, link.strand1 === "-" ? "-" : "+");
+    claim(link.target, link.strand2 === "-" ? "-" : "+");
+  }
+  for (const gfaPath of gfaGraph.paths) {
+    for (const segment of gfaPath.path.split(",")) {
+      traverse(segment.slice(0, -1), segment.endsWith("-") ? "-" : "+");
+    }
+  }
+  for (const walk of gfaGraph.walks) {
+    for (const seg of walk.segments) {
+      traverse(seg.id, seg.strand === "-" ? "-" : "+");
+    }
+  }
+  return { canonical, traversals };
+}
+function anchorablePaths(gfaGraph) {
+  return [
+    ...gfaGraph.paths.map((p) => ({
+      ...pathOrigin(p.name),
+      steps: p.path.split(",").map((segment) => ({
+        id: segment.slice(0, -1),
+        strand: segment.endsWith("-") ? "-" : "+"
+      }))
+    })),
+    ...gfaGraph.walks.map((w) => ({
+      name: `${w.sample}#${w.haplotype}#${w.contig}`,
+      // `*` parses to -1, meaning the record declines to say; 0 is then the
+      // only offset that can be assumed, and it makes the walk self-relative
+      // rather than wrong
+      start: w.start === -1 ? 0 : w.start,
+      steps: w.segments.map((s) => ({
+        id: s.id,
+        strand: s.strand === "-" ? "-" : "+"
+      }))
+    }))
+  ];
+}
+function carriedSamples(gfaNode) {
+  const sm = gfaNode.tags.SM;
+  if (typeof sm !== "string") {
+    return void 0;
+  }
+  const samples = sm.split(",").map((s) => s.trim()).filter(Boolean);
+  return samples.length > 0 ? samples : void 0;
+}
+var positive = (v) => typeof v === "number" && v > 0 ? v : void 0;
+function statedDepth({ tags, length }) {
+  const count = positive(tags.RC) ?? positive(tags.FC) ?? positive(tags.KC);
+  return positive(tags.dp) ?? positive(tags.DP) ?? (count !== void 0 && length > 0 ? count / length : void 0);
+}
+function makeNode(gfaNode, strand, depth) {
+  return {
+    id: `${gfaNode.id}${strand}`,
+    name: gfaNode.id,
+    length: gfaNode.length,
+    depth,
+    stable: stableCoordinate(gfaNode),
+    samples: carriedSamples(gfaNode)
+  };
+}
+function convertGFAToGraph(gfaGraph, name = "Imported GFA") {
+  const nodes = [];
+  const edges = [];
+  const { canonical, traversals } = surveySegments(gfaGraph);
+  const nodeId = (segmentId) => `${segmentId}${canonical.get(segmentId) ?? "+"}`;
+  for (const gfaNode of gfaGraph.nodes) {
+    const depth = statedDepth(gfaNode) ?? Math.max(traversals.get(gfaNode.id) ?? 1, 1);
+    nodes.push(makeNode(gfaNode, canonical.get(gfaNode.id) ?? "+", depth));
+  }
+  for (const link of gfaGraph.links) {
+    edges.push({
+      from: nodeId(link.source),
+      to: nodeId(link.target),
+      fromStrand: link.strand1 === "-" ? "-" : "+",
+      toStrand: link.strand2 === "-" ? "-" : "+"
+    });
+  }
+  const paths = [];
+  const edgeToPathsMap = /* @__PURE__ */ new Map();
+  const edgeKey = (a, b) => [a, b].sort().join("--");
+  function recordPathEdges(nodeIds, name2) {
+    for (let i = 0; i < nodeIds.length - 1; i++) {
+      const key = edgeKey(nodeIds[i], nodeIds[i + 1]);
+      if (!edgeToPathsMap.has(key)) {
+        edgeToPathsMap.set(key, /* @__PURE__ */ new Set());
+      }
+      edgeToPathsMap.get(key).add(name2);
+    }
+  }
+  for (const gfaPath of gfaGraph.paths) {
+    const nodeIds = gfaPath.path.split(",").map((segment) => nodeId(segment.slice(0, -1)));
+    paths.push({ name: gfaPath.name, nodeIds });
+    recordPathEdges(nodeIds, gfaPath.name);
+  }
+  for (const walk of gfaGraph.walks) {
+    const nodeIds = walk.segments.map((seg) => nodeId(seg.id));
+    const name2 = `${walk.sample}#${walk.haplotype}#${walk.contig}`;
+    paths.push({
+      name: name2,
+      nodeIds,
+      sample: walk.sample,
+      haplotype: walk.haplotype,
+      contig: walk.contig
+    });
+    recordPathEdges(nodeIds, name2);
+  }
+  for (const edge of edges) {
+    const pathIds = edgeToPathsMap.get(edgeKey(edge.from, edge.to));
+    if (pathIds && pathIds.size > 0) {
+      edge.pathIds = [...pathIds];
+    }
+  }
+  const lengths = new Map(gfaGraph.nodes.map((n2) => [n2.id, n2.length]));
+  const anchoring = gfaGraph.paths.length > 0 || gfaGraph.walks.length > 0 ? surveyPaths(anchorablePaths(gfaGraph), (id) => lengths.get(id) ?? 0) : void 0;
+  return {
+    name,
+    nodes,
+    edges,
+    paths: paths.length > 0 ? paths : void 0,
+    anchorPaths: anchoring?.anchorPaths,
+    pathVisits: anchoring?.pathVisits,
+    // rGFA's own tags win wherever they are present; pathAnchoring only ever
+    // fills in for a graph that carries none.
+    anchoredBy: nodes.some((n2) => n2.stable) ? "tags" : void 0
+  };
+}
+
+// src/layout/mergeRuns.ts
+function ownStrand(id) {
+  return id.endsWith("-") ? "-" : "+";
+}
+function flip(strand) {
+  return strand === "+" ? "-" : "+";
+}
+function sidesOf(edge) {
+  const from = (edge.fromStrand ?? ownStrand(edge.from)) === ownStrand(edge.from) ? "end" : "start";
+  const to = (edge.toStrand ?? ownStrand(edge.to)) === ownStrand(edge.to) ? "start" : "end";
+  return { from, to };
+}
+function mergeRuns(graph) {
+  const sides = graph.edges.map(sidesOf);
+  const at = /* @__PURE__ */ new Map();
+  const attach = (id, side, ei) => {
+    const key = `${id}|${side}`;
+    const list = at.get(key);
+    if (list) {
+      list.push(ei);
+    } else {
+      at.set(key, [ei]);
+    }
+  };
+  graph.edges.forEach((edge, ei) => {
+    attach(edge.from, sides[ei].from, ei);
+    attach(edge.to, sides[ei].to, ei);
+  });
+  const joinAfter = (a) => {
+    const out = at.get(`${a}|end`);
+    if (out?.length !== 1) {
+      return void 0;
+    }
+    const ei = out[0];
+    const edge = graph.edges[ei];
+    return edge.from === a && edge.to !== a && sides[ei].from === "end" && sides[ei].to === "start" && at.get(`${edge.to}|start`)?.length === 1 ? ei : void 0;
+  };
+  const joined = /* @__PURE__ */ new Set();
+  const runOf = /* @__PURE__ */ new Map();
+  const runs = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    const into = at.get(`${node.id}|start`);
+    const pred = into?.length === 1 ? graph.edges[into[0]].from : void 0;
+    if (runOf.has(node.id) || pred !== void 0 && joinAfter(pred) === into[0]) {
+      continue;
+    }
+    const run = [node.id];
+    for (; ; ) {
+      const ei = joinAfter(run.at(-1));
+      const next = ei === void 0 ? void 0 : graph.edges[ei].to;
+      if (next === void 0 || runOf.has(next)) {
+        break;
+      }
+      joined.add(ei);
+      run.push(next);
+    }
+    for (const id of run) {
+      runOf.set(id, node.id);
+    }
+    if (run.length > 1) {
+      runs.set(node.id, run);
+    }
+  }
+  for (const node of graph.nodes) {
+    if (!runOf.has(node.id)) {
+      runOf.set(node.id, node.id);
+    }
+  }
+  const byId = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  const nodes = [];
+  for (const node of graph.nodes) {
+    if (runOf.get(node.id) !== node.id) {
+      continue;
+    }
+    const run = runs.get(node.id);
+    if (!run) {
+      nodes.push(node);
+      continue;
+    }
+    const members = run.map((id) => byId.get(id));
+    const backbone = members.filter(isBackbone);
+    const first = backbone.length ? backbone.reduce((a, b) => a.stable.start <= b.stable.start ? a : b) : members[0];
+    nodes.push({
+      id: node.id,
+      name: node.name,
+      length: members.reduce((sum, n2) => sum + n2.length, 0),
+      depth: node.depth,
+      stable: first.stable
+    });
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const edges = [];
+  graph.edges.forEach((edge, ei) => {
+    const from = runOf.get(edge.from);
+    const to = runOf.get(edge.to);
+    const side = sides[ei];
+    const key = `${from}|${side.from}>${to}|${side.to}`;
+    if (joined.has(ei) || seen.has(key)) {
+      return;
+    }
+    seen.add(key);
+    edges.push({
+      from,
+      to,
+      ...side.from === "start" ? { fromStrand: flip(ownStrand(from)) } : {},
+      ...side.to === "end" ? { toStrand: flip(ownStrand(to)) } : {}
+    });
+  });
+  return {
+    graph: { ...graph, nodes, edges, paths: void 0, pathVisits: void 0 },
+    runs
+  };
+}
+function splitRuns(positions, runs, weightOf) {
+  const out = { ...positions };
+  for (const [id, members] of runs) {
+    const line = positions[id];
+    if (!line?.length) {
+      continue;
+    }
+    delete out[id];
+    const arc = arcPrefix(line);
+    const total = arc.at(-1);
+    const weights = members.map((m) => Math.max(weightOf(m), 0));
+    const weightSum = weights.reduce((a, b) => a + b, 0) || members.length;
+    let from = 0;
+    members.forEach((member, k) => {
+      const share = weightSum ? weights[k] / weightSum * total : total / members.length;
+      const to = k === members.length - 1 ? total : from + share;
+      out[member] = slice(line, arc, from, to);
+      from = to;
+    });
+  }
+  return out;
+}
+function polylineSlice(line, from, to) {
+  if (line.length === 0) {
+    return [];
+  }
+  const arc = arcPrefix(line);
+  const total = arc.at(-1);
+  return slice(line, arc, from * total, to * total);
+}
+function polylineMidpoint(line) {
+  const arc = arcPrefix(line);
+  return pointAt(line, arc, arc.at(-1) / 2);
+}
+function arcPrefix(line) {
+  const arc = [0];
+  for (let i = 1; i < line.length; i++) {
+    arc.push(
+      arc[i - 1] + Math.hypot(line[i].x - line[i - 1].x, line[i].y - line[i - 1].y)
+    );
+  }
+  return arc;
+}
+function pointAt(line, arc, s) {
+  if (s <= 0) {
+    return { ...line[0] };
+  }
+  let i = 1;
+  while (i < arc.length && arc[i] < s) {
+    i++;
+  }
+  if (i >= arc.length) {
+    return { ...line.at(-1) };
+  }
+  const span = arc[i] - arc[i - 1];
+  const t = span > 0 ? (s - arc[i - 1]) / span : 0;
+  const a = line[i - 1];
+  const b = line[i];
+  return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+}
+function slice(line, arc, from, to) {
+  const points = [pointAt(line, arc, from)];
+  for (let i = 0; i < line.length; i++) {
+    if (arc[i] > from && arc[i] < to) {
+      points.push({ ...line[i] });
+    }
+  }
+  points.push(pointAt(line, arc, to));
+  return points;
+}
+
+// src/layout/orientToReference.ts
+function orientToReference(graph, positions) {
+  const backbone = graph.nodes.filter(
+    (node) => isBackbone(node) && (positions[node.id]?.length ?? 0) > 0
+  );
+  if (backbone.length < 2) {
+    return positions;
+  }
+  const points = backbone.map((node) => {
+    const segments = positions[node.id];
+    const mid = segments[Math.floor(segments.length / 2)];
+    return {
+      x: mid.x,
+      y: mid.y,
+      r: node.stable.start + node.length / 2,
+      w: node.length
+    };
+  });
+  const weight = points.reduce((sum, p) => sum + p.w, 0);
+  const cx = points.reduce((sum, p) => sum + p.x * p.w, 0) / weight;
+  const cy = points.reduce((sum, p) => sum + p.y * p.w, 0) / weight;
+  const cr = points.reduce((sum, p) => sum + p.r * p.w, 0) / weight;
+  let sxr = 0;
+  let syr = 0;
+  for (const p of points) {
+    sxr += p.w * (p.x - cx) * (p.r - cr);
+    syr += p.w * (p.y - cy) * (p.r - cr);
+  }
+  const angle = -Math.atan2(syr, sxr);
+  const c = Math.cos(angle);
+  const s = Math.sin(angle);
+  const out = {};
+  for (const [id, segments] of Object.entries(positions)) {
+    out[id] = segments.map((p) => {
+      const x = p.x - cx;
+      const y = p.y - cy;
+      return { x: cx + c * x - s * y, y: cy + s * x + c * y };
+    });
+  }
+  let below = 0;
+  let above = 0;
+  for (const node of graph.nodes) {
+    if (isBackbone(node)) {
+      continue;
+    }
+    for (const p of out[node.id] ?? []) {
+      if (p.y > cy) {
+        below++;
+      } else {
+        above++;
+      }
+    }
+  }
+  if (above > below) {
+    for (const segments of Object.values(out)) {
+      for (const p of segments) {
+        p.y = 2 * cy - p.y;
+      }
+    }
+  }
+  return out;
+}
+
+// src/referenceSpan.ts
+var MAX_BACKBONE_HOPS = 4;
+function buildNeighbors(graph) {
+  const neighbors = /* @__PURE__ */ new Map();
+  function add(from, to) {
+    const list = neighbors.get(from);
+    if (list) {
+      list.push(to);
+    } else {
+      neighbors.set(from, [to]);
+    }
+  }
+  for (const edge of graph.edges) {
+    add(edge.from, edge.to);
+    add(edge.to, edge.from);
+  }
+  return neighbors;
+}
+function flankingSpan({
+  nodeId,
+  nodeById,
+  neighbors
+}) {
+  const seen = /* @__PURE__ */ new Set([nodeId]);
+  let frontier = [nodeId];
+  let minEnd = Infinity;
+  let maxStart = -Infinity;
+  for (let hop = 0; hop < MAX_BACKBONE_HOPS && frontier.length > 0; hop++) {
+    const next = [];
+    for (const id of frontier) {
+      const adjacent = neighbors.get(id);
+      if (adjacent) {
+        for (const neighborId of adjacent) {
+          if (!seen.has(neighborId)) {
+            seen.add(neighborId);
+            const neighbor = nodeById.get(neighborId);
+            if (neighbor && isBackbone(neighbor)) {
+              minEnd = Math.min(minEnd, neighbor.stable.start + neighbor.length);
+              maxStart = Math.max(maxStart, neighbor.stable.start);
+            } else {
+              next.push(neighborId);
+            }
+          }
+        }
+      }
+    }
+    frontier = next;
+  }
+  return minEnd === Infinity ? void 0 : {
+    start: Math.min(minEnd, maxStart),
+    end: Math.max(minEnd, maxStart)
+  };
+}
+function nodeReferenceSpan({
+  nodeId,
+  nodeById,
+  neighbors
+}) {
+  const node = nodeById.get(nodeId);
+  return node === void 0 ? void 0 : isBackbone(node) ? { start: node.stable.start, end: node.stable.start + node.length } : flankingSpan({ nodeId, nodeById, neighbors });
+}
+function referenceMidpoints(graph) {
+  const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
+  const neighbors = buildNeighbors(graph);
+  const midpoints = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    const span = nodeReferenceSpan({ nodeId: node.id, nodeById, neighbors });
+    if (span) {
+      midpoints.set(node.id, (span.start + span.end) / 2);
+    }
+  }
+  return midpoints;
+}
+
+// src/layout/referenceSeeds.ts
+var LANE_GAP = 30;
+function referenceSeeds(graph, scaling) {
+  const { opts } = scaling;
+  const drawn = new Map(
+    scaling.nodes.map((node) => [node.id, drawnNodeLength(opts, node.length)])
+  );
+  const drawnOf = (id) => drawn.get(id) ?? opts.minimumNodeLength;
+  const backbone = graph.nodes.filter(isBackbone).sort((a, b) => a.stable.start - b.stable.start);
+  const seeds = /* @__PURE__ */ new Map();
+  let x = 0;
+  for (const node of backbone) {
+    seeds.set(node.id, { x, y: 0 });
+    x += drawnOf(node.id) + opts.edgeLength;
+  }
+  const adjacent = buildNeighbors(graph);
+  const depth = new Map(backbone.map((node) => [node.id, 0]));
+  const queue = backbone.map((node) => node.id);
+  for (const id of queue) {
+    const at = seeds.get(id);
+    const next = depth.get(id) + 1;
+    for (const neighbour of adjacent.get(id) ?? []) {
+      if (depth.has(neighbour)) {
+        continue;
+      }
+      depth.set(neighbour, next);
+      seeds.set(neighbour, { x: at.x + drawnOf(id) / 2, y: LANE_GAP * next });
+      queue.push(neighbour);
+    }
+  }
+  let unreached = 0;
+  for (const node of graph.nodes) {
+    if (!seeds.has(node.id)) {
+      seeds.set(node.id, {
+        x: unreached++ * x / graph.nodes.length,
+        y: LANE_GAP * 3
+      });
+    }
+  }
+  return seeds;
+}
+function seededNodes(graph, scaling) {
+  const seeds = referenceSeeds(graph, scaling);
+  return scaling.nodes.map((node) => ({ ...node, ...seeds.get(node.id) }));
+}
+
+// src/pipeline.ts
+function loadGraph(text, name, opts = {}) {
+  const graph = anchorGraph(
+    convertGFAToGraph(parseGFA(text), name),
+    opts.referencePath
+  );
+  if (graph.nodes.length === 0) {
+    throw new Error(`No graph segments in ${name}`);
+  }
+  if (opts.maxNodes !== void 0 && graph.nodes.length > opts.maxNodes) {
+    throw new Error(
+      `Graph too large to draw: ${graph.nodes.length.toLocaleString()} nodes (limit ${opts.maxNodes.toLocaleString()}). Zoom in to a smaller region, or raise maxGraphNodes on this view.`
+    );
+  }
+  return graph;
+}
+function engineRequest(graph, scaling, settings) {
+  const anchored = graph.nodes.some(isBackbone);
+  return {
+    graph: {
+      nodes: anchored ? seededNodes(graph, scaling) : scaling.nodes,
+      edges: graph.edges
+    },
+    options: {
+      quality: settings.quality,
+      linearLayout: settings.linearLayout,
+      ...scaling.opts,
+      ...anchored ? { rotateComponents: false } : {}
+    }
+  };
+}
+function engineKey(graph, settings) {
+  const anchored = graph.nodes.some(isBackbone);
+  return `${settings.quality}|${settings.linearLayout}|${settings.bubbleSpread}|${anchored}|${graph.referencePath ?? ""}`;
+}
+async function forceLayout(graph, settings, engine) {
+  const spread = spreadFor(settings.bubbleSpread);
+  const merged = mergeRuns(graph);
+  const { result, duration } = await engine(
+    engineRequest(merged.graph, layoutScaling(merged.graph, spread), settings)
+  );
+  const scaling = layoutScaling(graph, spread);
+  const drawn = new Map(
+    scaling.nodes.map((n2) => [n2.id, drawnNodeLength(scaling.opts, n2.length)])
+  );
+  const positions = splitRuns(
+    result.nodePositions,
+    merged.runs,
+    (id) => drawn.get(id) ?? 0
+  );
+  return {
+    result: {
+      ...result,
+      nodePositions: graph.nodes.some(isBackbone) ? orientToReference(graph, positions) : positions
+    },
+    duration
+  };
+}
+function layoutExtent(nodePositions) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const segments of Object.values(nodePositions)) {
+    for (const seg of segments) {
+      minX = Math.min(minX, seg.x);
+      minY = Math.min(minY, seg.y);
+      maxX = Math.max(maxX, seg.x);
+      maxY = Math.max(maxY, seg.y);
+    }
+  }
+  return { minX, minY, maxX, maxY };
+}
+var FIT_PADDING = 40;
+var MIN_ZOOM = 1e-6;
+var MAX_ZOOM = 100;
+function clampZoom(zoom) {
+  return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));
+}
+function fittedTranslateY(bounds, usableHeight, yScale, padTop = FIT_PADDING) {
+  const leftoverY = usableHeight - bounds.h * yScale;
+  return padTop - bounds.minY * yScale + Math.max(0, leftoverY) / 2;
+}
+function fitTransform(bounds, paneWidth, paneHeight, pixelRows, {
+  minScale = 0,
+  padLeft = FIT_PADDING,
+  padTop = FIT_PADDING,
+  padRight = FIT_PADDING,
+  padBottom = FIT_PADDING
+} = {}) {
+  const usableWidth = paneWidth - padLeft - padRight;
+  const usableHeight = paneHeight - padTop - padBottom;
+  if (usableWidth <= 0 || usableHeight <= 0 || !(bounds.w > 0 || !pixelRows && bounds.h > 0)) {
+    return void 0;
+  }
+  const fitX = bounds.w > 0 ? usableWidth / bounds.w : Infinity;
+  const fitY = bounds.h > 0 ? usableHeight / bounds.h : Infinity;
+  const scale = clampZoom(
+    Math.max(minScale, pixelRows ? fitX : Math.min(fitX, fitY))
+  );
+  const leftoverX = usableWidth - bounds.w * scale;
+  return {
+    scale,
+    translateX: padLeft - bounds.minX * scale + Math.max(0, leftoverX) / 2,
+    translateY: fittedTranslateY(
+      bounds,
+      usableHeight,
+      pixelRows ? 1 : scale,
+      padTop
+    )
+  };
+}
+function drawingBounds(layout, opts = {}) {
+  let { minX, minY, maxX, maxY } = layoutExtent(layout.nodePositions);
+  const { region } = opts;
+  if (layout.referenceAxis && region && region.end > region.start) {
+    minX = region.start;
+    maxX = region.end;
+  }
+  const extent = opts.extent ?? layout.extent;
+  if (extent) {
+    minX = Math.min(minX, extent.minX ?? minX);
+    minY = Math.min(minY, extent.minY ?? minY);
+    maxX = Math.max(maxX, extent.maxX ?? maxX);
+    maxY = Math.max(maxY, extent.maxY ?? maxY);
+  }
+  return { minX, minY, w: maxX - minX, h: maxY - minY };
+}
+
+// src/layout/rowSpacing.ts
+var ROW_HEIGHT_PX = 20;
+
+// src/pathColors.ts
+function nameHue(name) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash % 360);
+}
+function pathHueAt(index, count) {
+  return index * 360 / count;
+}
+var PATH_SATURATION = 0.7;
+var PATH_LIGHTNESS = 0.5;
+var MAX_PATH_COLORS = 16;
+function pathColorsLegible(pathCount) {
+  return pathCount > 0 && pathCount <= MAX_PATH_COLORS;
+}
+function pathCssColor(index, count) {
+  return `hsl(${pathHueAt(index, count)}, ${PATH_SATURATION * 100}%, ${PATH_LIGHTNESS * 100}%)`;
+}
+function pathGreyCssColor(index, count) {
+  const lightness = count > 1 ? 25 + 45 * index / (count - 1) : 45;
+  return `hsl(0, 0%, ${lightness}%)`;
+}
+function labelTiers(name) {
+  const parts = pathOrigin(name).name.split("#");
+  const full = parts.join("#");
+  if (parts.length >= 3 && isGenericSample(parts[0])) {
+    const contig = parts.slice(2).join("#");
+    return [contig, contig, full];
+  }
+  return [parts[0], parts.slice(0, 2).join("#"), full];
+}
+function groupDigits(n2) {
+  return String(n2).replace(/\B(?=(\d{3})+$)/g, ",");
+}
+function offsetTiers(name, tiers) {
+  const { start } = pathOrigin(name);
+  return tiers.map((t) => `${t} @${groupDigits(start)}`);
+}
+function pathLegend(paths, colors) {
+  const named = paths.map((p) => labelTiers(p.name));
+  const candidates = [0, 1, 2].flatMap((t) => [
+    paths.map((_, i) => named[i][t]),
+    paths.map((p, i) => offsetTiers(p.name, named[i])[t])
+  ]);
+  const distinct = candidates.find(
+    (labels2) => new Set(labels2).size === paths.length
+  );
+  const labels = distinct ?? candidates.at(-1);
+  return paths.map((path, i) => ({
+    name: path.name,
+    label: labels[i],
+    color: colors?.[i] ?? pathCssColor(i, paths.length)
+  }));
+}
+
+// src/layout/walkRows.ts
+function sampleOf(path) {
+  return path.sample ?? panSNSample(path.name);
+}
+function labelOf(path) {
+  return path.haplotype !== void 0 && path.sample !== void 0 ? `${path.sample}#${path.haplotype}` : sampleOf(path);
+}
+function sliceBetween(nodeIds, span, region, flanked = true) {
+  if (!region || !flanked) {
+    return { ids: nodeIds, complete: true };
+  }
+  let i0 = -1;
+  let i1 = -1;
+  let bestEnd = -Infinity;
+  let bestStart = Infinity;
+  nodeIds.forEach((id, i) => {
+    const s = span.get(id);
+    if (s) {
+      if (s.end <= region.start && s.end > bestEnd) {
+        bestEnd = s.end;
+        i0 = i;
+      }
+      if (s.start >= region.end && s.start < bestStart) {
+        bestStart = s.start;
+        i1 = i;
+      }
+    }
+  });
+  if (i0 < 0 || i1 < 0) {
+    return { ids: nodeIds, complete: false };
+  }
+  const ids = nodeIds.slice(Math.min(i0, i1) + 1, Math.max(i0, i1));
+  return { ids: i0 < i1 ? ids : ids.reverse(), complete: true };
+}
+function walkRows(graph, region, unit) {
+  const paths = graph.paths ?? [];
+  const reference = paths.find((p) => pathOrigin(p.name).name === graph.referencePath) ?? paths[0];
+  if (!reference || paths.length < 2) {
+    return void 0;
+  }
+  const lengthOf = new Map(graph.nodes.map((n2) => [n2.id, n2.length]));
+  const referenceStart = graph.anchorPaths?.find((p) => p.name === pathOrigin(reference.name).name)?.start ?? 0;
+  const cut = region && region.end > region.start ? region : void 0;
+  const span = /* @__PURE__ */ new Map();
+  let pos = referenceStart;
+  for (const id of reference.nodeIds) {
+    const len = lengthOf.get(id) ?? 0;
+    if (!span.has(id)) {
+      span.set(id, { start: pos, end: pos + len });
+    }
+    pos += len;
+  }
+  const flanked = cut === void 0 || [...span.values()].some((s) => s.end <= cut.start) && [...span.values()].some((s) => s.start >= cut.end);
+  const rowOf = (path) => {
+    const { ids, complete } = sliceBetween(path.nodeIds, span, cut, flanked);
+    const runs = [];
+    let bp = 0;
+    let offReferenceBp = 0;
+    let step = 0;
+    for (const id of ids) {
+      const len = lengthOf.get(id) ?? 0;
+      const s = span.get(id);
+      const last = runs.at(-1);
+      const at = last?.referenceStart;
+      const forward = s && at !== void 0 && step >= 0 && at + last.bp === s.start;
+      const backward = s && at !== void 0 && step <= 0 && s.end === at;
+      if (!s && last && !last.onReference) {
+        last.bp += len;
+      } else if (forward || backward) {
+        last.bp += len;
+        if (!forward) {
+          last.referenceStart = s.start;
+          last.reversed = true;
+        }
+        step = forward ? 1 : -1;
+      } else {
+        runs.push({
+          start: bp,
+          bp: len,
+          onReference: s !== void 0,
+          referenceStart: s?.start
+        });
+        step = 0;
+      }
+      bp += len;
+      if (!s) {
+        offReferenceBp += len;
+      }
+    }
+    return {
+      name: path.name,
+      label: labelOf(path),
+      sample: sampleOf(path),
+      haplotype: path.haplotype,
+      bp,
+      offReferenceBp,
+      complete,
+      runs
+    };
+  };
+  const meetsReference = (p) => p.nodeIds.some((id) => span.has(id));
+  const placedWalks = new Set(
+    paths.filter((p) => p !== reference && meetsReference(p)).map((p) => p.name)
+  );
+  const origin = cut ? cut.start : referenceStart;
+  return {
+    origin,
+    unit,
+    reference: rowOf(reference),
+    rows: paths.filter(
+      (p) => p !== reference && (meetsReference(p) || !placedWalks.has(p.name))
+    ).map(rowOf).sort(
+      (a, b) => Number(b.complete) - Number(a.complete) || b.bp - a.bp || a.label.localeCompare(b.label)
+    )
+  };
+}
+
+// src/layout/walkRowLayout.ts
+var READOUT_ROOM = 1.3;
+function walkRowsExtent(walks) {
+  let longest = walks.reference.bp;
+  for (const row of walks.rows) {
+    longest = Math.max(longest, row.bp);
+  }
+  return {
+    maxX: walks.origin + longest * READOUT_ROOM,
+    maxY: walks.rows.length * ROW_HEIGHT_PX
+  };
+}
+function walkRowLayout(graph, region) {
+  const backbone = backboneNodes(graph);
+  const walks = walkRows(graph, region);
+  if (backbone.length === 0 || !walks) {
+    return void 0;
+  }
+  const nodePositions = backbonePositions(backbone);
+  const rowLabels = [
+    { label: walks.reference.label, y: 0 },
+    ...walks.rows.map((row, i) => ({
+      label: row.label,
+      y: (i + 1) * ROW_HEIGHT_PX
+    }))
+  ];
+  return {
+    nodePositions,
+    rowLabels,
+    referenceAxis: true,
+    pixelRows: true,
+    extent: walkRowsExtent(walks)
+  };
+}
+
+// src/alleleProjection/projectAlleles.ts
+function parsePanSN(refName) {
+  const parts = refName.split("#");
+  const haplotype = parts.length >= 2 ? Number(parts[1]) : Number.NaN;
+  return {
+    sample: parts[0] ?? refName,
+    haplotype: Number.isFinite(haplotype) ? haplotype : void 0
+  };
+}
+function collectRun(seed, byId, adj, claimed) {
+  const members = [];
+  const anchors = [];
+  const queue = [seed];
+  claimed.add(seed);
+  while (queue.length > 0) {
+    const id = queue.pop();
+    const node = byId.get(id);
+    if (node) {
+      members.push(node);
+      for (const neighborId of adj.get(id) ?? []) {
+        const neighbor = byId.get(neighborId);
+        if (neighbor) {
+          if (neighbor.stable.rank === REFERENCE_RANK) {
+            anchors.push(neighbor);
+          } else if (!claimed.has(neighborId)) {
+            claimed.add(neighborId);
+            queue.push(neighborId);
+          }
+        }
+      }
+    }
+  }
+  return { members, anchors };
+}
+function anchorSpan(anchors) {
+  const refNames = new Set(anchors.map((a) => a.stable.refName));
+  if (refNames.size !== 1 || anchors.length < 2) {
+    return void 0;
+  }
+  const sorted = [...anchors].sort((a, b) => a.stable.start - b.stable.start);
+  const first = sorted[0];
+  const last = sorted.at(-1);
+  const start = first.stable.start + first.length;
+  const end = last.stable.start;
+  return end >= start ? { start, end, entry: first } : void 0;
+}
+function runDistances(members, entry, adj) {
+  const byId = new Map(members.map((m) => [m.id, m]));
+  const dist = /* @__PURE__ */ new Map();
+  const queue = [];
+  for (const neighborId of adj.get(entry.id) ?? []) {
+    if (byId.has(neighborId)) {
+      dist.set(neighborId, 0);
+      queue.push(neighborId);
+    }
+  }
+  if (queue.length === 0) {
+    for (const member of members) {
+      dist.set(member.id, 0);
+      queue.push(member.id);
+    }
+  }
+  for (const id of queue) {
+    const reach = dist.get(id) + byId.get(id).length;
+    for (const neighborId of adj.get(id) ?? []) {
+      if (byId.has(neighborId)) {
+        const known = dist.get(neighborId);
+        if (known === void 0 || reach < known) {
+          dist.set(neighborId, reach);
+          queue.push(neighborId);
+        }
+      }
+    }
+  }
+  return dist;
+}
+function runOffsets(members, entry, adj) {
+  const dist = runDistances(members, entry, adj);
+  const ordered = [...members].sort((a, b) => dist.get(a.id) - dist.get(b.id));
+  const rank = new Map(ordered.map((m, i) => [m.id, i]));
+  const byId = new Map(members.map((m) => [m.id, m]));
+  const offsets = /* @__PURE__ */ new Map();
+  for (const [i, member] of ordered.entries()) {
+    let offset = 0;
+    for (const neighborId of adj.get(member.id) ?? []) {
+      const neighbor = byId.get(neighborId);
+      if (neighbor && rank.get(neighborId) < i) {
+        offset = Math.max(offset, offsets.get(neighborId) + neighbor.length);
+      }
+    }
+    offsets.set(member.id, offset);
+  }
+  return { offsets, ordered };
+}
+function projectAlleles(graph) {
+  const byId = new Map(
+    graph.nodes.filter(isAnchored).map((n2) => [n2.id, n2])
+  );
+  const adj = buildNeighbors(graph);
+  const claimed = /* @__PURE__ */ new Set();
+  const alleles = [];
+  for (const node of byId.values()) {
+    if (node.stable.rank !== REFERENCE_RANK && !claimed.has(node.id)) {
+      const { members, anchors } = collectRun(node.id, byId, adj, claimed);
+      const span = anchorSpan(anchors);
+      if (span) {
+        const { offsets, ordered } = runOffsets(members, span.entry, adj);
+        alleles.push({
+          start: span.start,
+          refSpan: span.end - span.start,
+          nodeIds: ordered.map((m) => m.id),
+          nodeOffsets: ordered.map((m) => offsets.get(m.id)),
+          pathLength: ordered.reduce(
+            (max, m) => Math.max(max, offsets.get(m.id) + m.length),
+            0
+          )
+        });
+      }
+    }
+  }
+  return alleles.sort((a, b) => a.start - b.start);
+}
+
+// src/layout/placeOffReference.ts
+var MIN_DELETION_BP = 1;
+var MIN_ALLELE_SPAN_FRACTION = 0.015;
+function placeOffReference({
+  graph,
+  span,
+  rowY,
+  positions
+}) {
+  const minSpan = span * MIN_ALLELE_SPAN_FRACTION;
+  const alleles = projectAlleles(graph);
+  const byId = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  const alleleDeletions = [];
+  for (const allele of alleles) {
+    const skipped = allele.refSpan - allele.pathLength;
+    if (skipped >= MIN_DELETION_BP) {
+      alleleDeletions.push({ nodeIds: allele.nodeIds, bp: skipped });
+    }
+    const drawn = Math.max(allele.refSpan, minSpan);
+    const scale = allele.pathLength > 0 ? drawn / allele.pathLength : 0;
+    allele.nodeIds.forEach((nodeId, i) => {
+      const node = byId.get(nodeId);
+      if (node) {
+        const offset = allele.nodeOffsets[i];
+        const even = drawn / allele.nodeIds.length;
+        const at = (bp) => allele.start + bp * scale;
+        const y = rowY(node);
+        positions[nodeId] = scale ? [
+          { x: at(offset), y },
+          { x: at(offset + node.length), y }
+        ] : [
+          { x: allele.start + i * even, y },
+          { x: allele.start + (i + 1) * even, y }
+        ];
+      }
+    });
+  }
+  const neighbors = buildNeighbors(graph);
+  const queue = Object.keys(positions);
+  for (const fromId of queue) {
+    const fromEnd = positions[fromId].at(-1).x;
+    for (const nextId of neighbors.get(fromId) ?? []) {
+      const next = byId.get(nextId);
+      if (next && !(nextId in positions)) {
+        const y = rowY(next);
+        positions[nextId] = [
+          { x: fromEnd, y },
+          { x: fromEnd + minSpan, y }
+        ];
+        queue.push(nextId);
+      }
+    }
+  }
+  return alleleDeletions;
+}
+
+// src/layout/anchoredLayout.ts
+function rankRows(graph) {
+  const present = /* @__PURE__ */ new Set();
+  for (const node of graph.nodes) {
+    if (node.stable) {
+      present.add(node.stable.rank);
+    }
+  }
+  return new Map([...present].sort((a, b) => a - b).map((r, i) => [r, i]));
+}
+function anchoredLayout(graph, region) {
+  const backbone = backboneNodes(graph);
+  if (backbone.length === 0) {
+    return void 0;
+  }
+  const span = referenceSpan(backbone, region);
+  const rows = rankRows(graph);
+  const nodePositions = backbonePositions(backbone);
+  const alleleDeletions = placeOffReference({
+    graph,
+    span,
+    rowY: (node) => (node.stable ? rows.get(node.stable.rank) ?? rows.size : rows.size) * ROW_HEIGHT_PX,
+    positions: nodePositions
+  });
+  const rowLabels = [...rows].map(([rank, row]) => ({
+    label: rank === 0 ? "Reference (rank 0)" : `Rank ${rank}`,
+    y: row * ROW_HEIGHT_PX
+  }));
+  return {
+    nodePositions,
+    rowLabels,
+    referenceAxis: true,
+    pixelRows: true,
+    alleleDeletions
+  };
+}
+
+// src/layout/orderedLayout.ts
+var GUTTER = 12;
+var LANE_PX = ROW_HEIGHT_PX;
+function nodeWidth(node) {
+  return 10 + 8 * Math.log2(1 + node.length);
+}
+function compare(a, b) {
+  return a < b ? -1 : a > b ? 1 : 0;
+}
+function compareKeys(a, b) {
+  return compare(a.at, b.at) || compare(a.side, b.side) || compare(a.hops, b.hops);
+}
+var UNREACHED = { at: Infinity, side: 0, hops: 0 };
+function referenceOrder(graph) {
+  const byId = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  const key = orderKeys(graph);
+  return graph.nodes.map((n2) => n2.id).sort(
+    (a, b) => compareKeys(key.get(a) ?? UNREACHED, key.get(b) ?? UNREACHED) || compare(byId.get(a).name, byId.get(b).name) || compare(a, b)
+  );
+}
+function placeByWalks(graph, backbone) {
+  const isNode = new Set(graph.nodes.map((n2) => n2.id));
+  const startOf = new Map(backbone.map((n2) => [n2.id, n2.stable.start]));
+  const next = /* @__PURE__ */ new Map();
+  const prev = /* @__PURE__ */ new Map();
+  backbone.forEach((n2, i) => {
+    prev.set(n2.id, backbone[i - 1]?.id);
+    next.set(n2.id, backbone[i + 1]?.id);
+  });
+  let head = backbone[0]?.id;
+  const insertAfter = (at, id) => {
+    const after = next.get(at);
+    next.set(at, id);
+    prev.set(id, at);
+    next.set(id, after);
+    if (after !== void 0) {
+      prev.set(after, id);
+    }
+  };
+  const insertBefore = (at, id) => {
+    const before = prev.get(at);
+    if (before === void 0) {
+      head = id;
+      prev.set(id, void 0);
+      next.set(id, at);
+      prev.set(at, id);
+    } else {
+      insertAfter(before, id);
+    }
+  };
+  for (const path of graph.paths ?? []) {
+    let rising = 0;
+    let falling = 0;
+    let last;
+    for (const id of path.nodeIds) {
+      const start = startOf.get(id);
+      if (start !== void 0) {
+        if (last !== void 0 && start !== last) {
+          if (start > last) {
+            rising++;
+          } else {
+            falling++;
+          }
+        }
+        last = start;
+      }
+    }
+    const ids = falling > rising ? [...path.nodeIds].reverse() : path.nodeIds;
+    let from;
+    const leading = /* @__PURE__ */ new Set();
+    for (const id of ids) {
+      if (next.has(id)) {
+        if (from === void 0) {
+          for (const lead of leading) {
+            insertBefore(id, lead);
+          }
+        }
+        from = id;
+      } else if (isNode.has(id)) {
+        if (from === void 0) {
+          leading.add(id);
+        } else {
+          insertAfter(from, id);
+          from = id;
+        }
+      }
+    }
+  }
+  const placed = [];
+  for (let id = head; id !== void 0; id = next.get(id)) {
+    placed.push(id);
+  }
+  return placed;
+}
+function placeBySearch(adjacent, key) {
+  const queue = [...key.entries()].sort(([a, ka], [b, kb]) => compareKeys(ka, kb) || compare(a, b)).map(([id]) => id);
+  const placed = queue.length;
+  for (const id of queue) {
+    const from = key.get(id);
+    for (const nb of adjacent.get(id) ?? []) {
+      if (!key.has(nb)) {
+        key.set(nb, { at: from.at, side: 1, hops: from.hops + 1 });
+        queue.push(nb);
+      }
+    }
+  }
+  const searched = new Set(queue.slice(placed));
+  const sided = /* @__PURE__ */ new Set();
+  for (const seed of searched) {
+    if (sided.has(seed)) {
+      continue;
+    }
+    const { at } = key.get(seed);
+    const run = [seed];
+    sided.add(seed);
+    let farHalf = true;
+    for (const id of run) {
+      const { hops } = key.get(id);
+      let deadEnd = true;
+      let touchesLeft = false;
+      for (const nb of adjacent.get(id) ?? []) {
+        const other = key.get(nb);
+        if (other.at === at && searched.has(nb)) {
+          deadEnd &&= other.hops <= hops;
+          if (!sided.has(nb)) {
+            sided.add(nb);
+            run.push(nb);
+          }
+        } else if (other.at !== at) {
+          touchesLeft ||= other.at < at;
+          farHalf &&= other.at < at;
+        }
+      }
+      farHalf &&= !deadEnd || touchesLeft;
+    }
+    if (farHalf) {
+      for (const id of run) {
+        const k = key.get(id);
+        key.set(id, { ...k, side: -1, hops: -k.hops });
+      }
+    }
+  }
+}
+function orderKeys(graph) {
+  const ids = new Set(graph.nodes.map((n2) => n2.id));
+  const adjacent = /* @__PURE__ */ new Map();
+  for (const e of graph.edges) {
+    if (!ids.has(e.from) || !ids.has(e.to)) {
+      continue;
+    }
+    ;
+    (adjacent.get(e.from) ?? adjacent.set(e.from, []).get(e.from)).push(e.to);
+    (adjacent.get(e.to) ?? adjacent.set(e.to, []).get(e.to)).push(e.from);
+  }
+  const backbone = graph.nodes.filter(isBackbone).sort(
+    (a, b) => compare(a.stable.start, b.stable.start) || compare(a.name, b.name)
+  );
+  const key = /* @__PURE__ */ new Map();
+  placeByWalks(graph, backbone).forEach((id, rank) => {
+    key.set(id, { at: rank, side: 0, hops: 0 });
+  });
+  placeBySearch(adjacent, key);
+  return key;
+}
+function layerGraph(graph) {
+  const byId = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  const order = referenceOrder(graph);
+  const key = new Map(order.map((id, i) => [id, i]));
+  const isRef = (id) => isBackbone(byId.get(id));
+  const preds = new Map(order.map((id) => [id, []]));
+  const succs = new Map(order.map((id) => [id, []]));
+  const link = (a, b) => {
+    preds.get(b).push(a);
+    succs.get(a).push(b);
+  };
+  for (const e of graph.edges) {
+    if (e.from === e.to || !key.has(e.from) || !key.has(e.to)) {
+      continue;
+    }
+    if (key.get(e.from) < key.get(e.to)) {
+      link(e.from, e.to);
+    } else {
+      link(e.to, e.from);
+    }
+  }
+  const backbone = order.filter(isRef);
+  for (let i = 1; i < backbone.length; i++) {
+    link(backbone[i - 1], backbone[i]);
+  }
+  const layerOf = /* @__PURE__ */ new Map();
+  for (const id of order) {
+    let l = 0;
+    for (const p of preds.get(id)) {
+      l = Math.max(l, layerOf.get(p) + 1);
+    }
+    layerOf.set(id, l);
+  }
+  for (let i = order.length - 1; i >= 0; i--) {
+    const id = order[i];
+    const s = succs.get(id);
+    if (isRef(id) || s.length === 0) {
+      continue;
+    }
+    let minSucc = Infinity;
+    for (const t of s) {
+      minSucc = Math.min(minSucc, layerOf.get(t));
+    }
+    const lo = layerOf.get(id);
+    const hi = Math.max(lo, minSucc - 1);
+    layerOf.set(id, Math.floor((lo + hi) / 2));
+  }
+  const layers = [];
+  for (const id of order) {
+    ;
+    (layers[layerOf.get(id)] ??= []).push(id);
+  }
+  return { layers, layerOf, preds };
+}
+function orderedLayout(graph) {
+  if (!graph.nodes.some(isBackbone)) {
+    return void 0;
+  }
+  const byId = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  const isRef = (id) => isBackbone(byId.get(id));
+  const { layers, layerOf: layer, preds } = layerGraph(graph);
+  const layerWidth = layers.map((ids) => {
+    let w = 0;
+    for (const id of ids) {
+      w = Math.max(w, nodeWidth(byId.get(id)));
+    }
+    return w;
+  });
+  const layerX = [];
+  let x = 0;
+  for (let l = 0; l < layers.length; l++) {
+    layerX[l] = x;
+    x += layerWidth[l] + GUTTER;
+  }
+  const y = /* @__PURE__ */ new Map();
+  for (const ids of layers) {
+    const free = [];
+    for (const id of ids) {
+      if (isRef(id)) {
+        y.set(id, 0);
+        continue;
+      }
+      const placed = preds.get(id).filter((p) => y.has(p));
+      let ideal = 0;
+      for (const p of placed) {
+        ideal += y.get(p) / placed.length;
+      }
+      free.push({ id, ideal: ideal === 0 ? LANE_PX : ideal });
+    }
+    free.sort((a, b) => a.ideal - b.ideal);
+    const taken = /* @__PURE__ */ new Set([0]);
+    for (const { id, ideal } of free) {
+      let lane = Math.round(ideal / LANE_PX);
+      if (lane === 0) {
+        lane = ideal >= 0 ? 1 : -1;
+      }
+      for (let d = 1; taken.has(lane); d++) {
+        if (!taken.has(lane + d)) {
+          lane += d;
+        } else if (!taken.has(lane - d)) {
+          lane -= d;
+        }
+      }
+      taken.add(lane);
+      y.set(id, lane * LANE_PX);
+    }
+  }
+  const nodePositions = {};
+  for (const n2 of graph.nodes) {
+    const l = layer.get(n2.id);
+    const w = nodeWidth(n2);
+    const cx = layerX[l] + layerWidth[l] / 2;
+    const ny = y.get(n2.id);
+    nodePositions[n2.id] = [
+      { x: cx - w / 2, y: ny },
+      { x: cx + w / 2, y: ny }
+    ];
+  }
+  return { nodePositions, referenceAxis: false, pixelRows: true };
+}
+
+// src/layout/sampleRowLayout.ts
+function contributingSamples(graph, keep) {
+  const carried = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    if (isOffReference(node)) {
+      const { sample } = parsePanSN(node.stable.refName);
+      carried.set(sample, (carried.get(sample) ?? 0) + node.length);
+    }
+  }
+  const held = new Map(keep.map((sample, row) => [sample, row]));
+  return [...carried.keys()].sort(
+    (a, b) => (held.get(a) ?? Infinity) - (held.get(b) ?? Infinity) || carried.get(b) - carried.get(a) || a.localeCompare(b)
+  );
+}
+function sampleRowLayout(graph, region, keep = []) {
+  const backbone = backboneNodes(graph);
+  const samples = contributingSamples(graph, keep);
+  if (backbone.length === 0 || samples.length === 0) {
+    return void 0;
+  }
+  const span = referenceSpan(backbone, region);
+  const rowOf = new Map(samples.map((s, i) => [s, i + 1]));
+  const nodePositions = backbonePositions(backbone);
+  const spareRow = samples.length + 1;
+  const alleleDeletions = placeOffReference({
+    graph,
+    span,
+    rowY: (node) => {
+      const stable = node.stable;
+      const row = stable ? rowOf.get(parsePanSN(stable.refName).sample) : void 0;
+      return (row ?? spareRow) * ROW_HEIGHT_PX;
+    },
+    positions: nodePositions
+  });
+  const referenceSample = parsePanSN(backbone[0].stable.refName).sample;
+  const rowLabels = [
+    { label: referenceSample, y: 0 },
+    ...samples.map((sample) => ({
+      label: sample,
+      y: rowOf.get(sample) * ROW_HEIGHT_PX
+    }))
+  ];
+  return {
+    nodePositions,
+    rowLabels,
+    sampleRows: samples,
+    referenceAxis: true,
+    pixelRows: true,
+    alleleDeletions
+  };
+}
+
+// src/layout/tubeMapLayout.ts
+import { layoutTubeMap } from "@gmod/tubemap-core";
+
+// src/gaf/parseGaf.ts
+var CS_OP = /:(\d+)|=([A-Za-z]+)|\*[a-zA-Z]([a-zA-Z])|\+([A-Za-z]+)|-([A-Za-z]+)|~[a-z]{2}(\d+)[a-z]{2}/g;
+function parseCs(cs) {
+  const ops = [];
+  for (const m of cs.matchAll(CS_OP)) {
+    if (m[1] !== void 0) {
+      ops.push({ op: "match", length: +m[1] });
+    } else if (m[2] !== void 0) {
+      ops.push({ op: "match", length: m[2].length });
+    } else if (m[3] !== void 0) {
+      ops.push({ op: "substitution", seq: m[3].toUpperCase() });
+    } else if (m[4] !== void 0) {
+      ops.push({ op: "insertion", seq: m[4].toUpperCase() });
+    } else if (m[5] !== void 0) {
+      ops.push({ op: "deletion", length: m[5].length });
+    } else if (m[6] !== void 0) {
+      ops.push({ op: "match", length: +m[6] });
+    }
+  }
+  return ops;
+}
+
+// src/tubeMap/reads.ts
+function canonicalStrand(node) {
+  return node.id.endsWith("-") ? "-" : "+";
+}
+function stepName(node, strand) {
+  return strand === canonicalStrand(node) ? node.id : `-${node.id}`;
+}
+function stepStarts(lengths, total) {
+  const starts = lengths.map(() => void 0);
+  let head = 0;
+  let i = 0;
+  for (; i < lengths.length && lengths[i] !== void 0; i++) {
+    starts[i] = head;
+    head += lengths[i];
+  }
+  let tail = total;
+  for (let j = lengths.length - 1; j > i && lengths[j] !== void 0; j--) {
+    tail -= lengths[j];
+    starts[j] = tail;
+  }
+  return starts;
+}
+function mismatchesByStep(record, lengths) {
+  const byStep = record.path.map(() => []);
+  if (record.cs === void 0) {
+    return byStep;
+  }
+  const starts = stepStarts(lengths, record.pathLength);
+  const stepAt = (pos2, atEnd = false) => {
+    for (let s = 0; s < starts.length; s++) {
+      const start = starts[s];
+      const length = lengths[s];
+      if (start !== void 0 && length !== void 0 && start <= pos2 && (pos2 < start + length || atEnd && pos2 === start + length)) {
+        return { s, local: pos2 - start, room: start + length - pos2 };
+      }
+    }
+    return void 0;
+  };
+  const add = (s, mismatch) => {
+    const list = byStep[s];
+    const last = list.at(-1);
+    if (mismatch.type === "substitution" && last?.type === "substitution" && last.pos + last.seq.length === mismatch.pos) {
+      last.seq += mismatch.seq;
+    } else {
+      list.push(mismatch);
+    }
+  };
+  let pos = record.pathStart;
+  for (const op of parseCs(record.cs)) {
+    if (op.op === "match") {
+      pos += op.length;
+    } else if (op.op === "substitution") {
+      const at = stepAt(pos);
+      if (at) {
+        add(at.s, { type: "substitution", pos: at.local, seq: op.seq });
+      }
+      pos += 1;
+    } else if (op.op === "insertion") {
+      const at = stepAt(pos, pos === record.pathEnd);
+      if (at) {
+        add(at.s, { type: "insertion", pos: at.local, seq: op.seq });
+      }
+    } else {
+      let left = op.length;
+      while (left > 0) {
+        const at = stepAt(pos);
+        const take = at ? Math.min(left, at.room) : left;
+        if (at) {
+          add(at.s, { type: "deletion", pos: at.local, length: take });
+        }
+        pos += take;
+        left -= take;
+      }
+    }
+  }
+  return byStep;
+}
+function tubeMapReads(graph, records, firstId) {
+  const nodeByName = new Map(graph.nodes.map((n2) => [n2.name, n2]));
+  const reads = [];
+  for (const record of records) {
+    const nodes = record.path.map((step) => nodeByName.get(step.name));
+    const kept = nodes.flatMap((node, i) => node ? [i] : []);
+    const first = kept[0];
+    const last = kept.at(-1);
+    if (first !== void 0 && last !== void 0) {
+      const mismatches = mismatchesByStep(
+        record,
+        nodes.map((n2) => n2?.length)
+      );
+      const names = kept.map((i) => stepName(nodes[i], record.path[i].strand));
+      const lastLength = nodes[last].length;
+      reads.push({
+        id: firstId + reads.length,
+        name: record.name,
+        type: "read",
+        sourceTrackID: 1,
+        sequence: names,
+        sequenceNew: kept.map((i, k) => ({
+          nodeName: names[k],
+          mismatches: mismatches[i]
+        })),
+        firstNodeOffset: first === 0 ? record.pathStart : 0,
+        finalNodeCoverLength: last === record.path.length - 1 ? lastLength - (record.pathLength - record.pathEnd) : lastLength,
+        mapping_quality: record.mappingQuality === 255 ? 0 : record.mappingQuality,
+        is_secondary: record.secondary,
+        is_reverse: record.strand === "-"
+      });
+    }
+  }
+  return reads;
+}
+var FORWARD_READ_COLORS = ["#6baed6", "#4292c6", "#2171b5", "#08519c"];
+var REVERSE_READ_COLORS = ["#fb6a4a", "#ef3b2c", "#cb181d", "#a50f15"];
+function readColor(read) {
+  const colors = read.is_reverse ? REVERSE_READ_COLORS : FORWARD_READ_COLORS;
+  return colors[read.id % colors.length];
+}
+
+// src/layout/tubeMapLayout.ts
+function visitStrands(graph) {
+  const strands = /* @__PURE__ */ new Map();
+  for (const [segment, visits] of graph.pathVisits ?? []) {
+    for (const visit of visits) {
+      const key = `${visit.path}	${segment}`;
+      const list = strands.get(key);
+      if (list) {
+        list.push(visit.strand);
+      } else {
+        strands.set(key, [visit.strand]);
+      }
+    }
+  }
+  return strands;
+}
+function tubeMapTracks(graph) {
+  const nodeById = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  const strands = visitStrands(graph);
+  const paths = (graph.paths ?? []).map((path, index) => ({ path, index }));
+  const reference = paths.findIndex(
+    (p) => pathOrigin(p.path.name).name === graph.referencePath
+  );
+  if (reference > 0) {
+    paths.unshift(...paths.splice(reference, 1));
+  }
+  return paths.flatMap(({ path, index }) => {
+    const visitName = pathOrigin(path.name).name;
+    const seen = /* @__PURE__ */ new Map();
+    const sequence = path.nodeIds.flatMap((id) => {
+      const node = nodeById.get(id);
+      if (!node) {
+        return [];
+      }
+      const k = seen.get(node.name) ?? 0;
+      seen.set(node.name, k + 1);
+      const strand = strands.get(`${visitName}	${node.name}`)?.[k] ?? canonicalStrand(node);
+      return [stepName(node, strand)];
+    });
+    return sequence.length > 0 ? [
+      {
+        id: index,
+        name: path.name,
+        sequence,
+        sourceTrackID: 0,
+        type: "haplotype"
+      }
+    ] : [];
+  });
+}
+function tubeMapNodes(graph) {
+  return graph.nodes.map((n2) => ({
+    name: n2.id,
+    seq: "",
+    sequenceLength: Math.max(1, n2.length)
+  }));
+}
+function hasTubeMapPaths(graph) {
+  return (graph.paths?.length ?? 0) > 0;
+}
+var STACK_PX = 600;
+var MIN_TUBE_PX = 3;
+var MAX_TUBE_PX = 15;
+function tubeWidth(trackCount) {
+  return Math.max(
+    MIN_TUBE_PX,
+    Math.min(MAX_TUBE_PX, Math.floor(STACK_PX / Math.max(1, trackCount)))
+  );
+}
+function runTubeMap(graph) {
+  const paths = graph.paths ?? [];
+  const tracks = tubeMapTracks(graph);
+  const reads = graph.reads ? tubeMapReads(graph, graph.reads, paths.length) : [];
+  const tubeColor = reads.length > 0 ? pathGreyCssColor : pathCssColor;
+  const pathColors = paths.map((_, i) => tubeColor(i, paths.length));
+  const layout = layoutTubeMap(tubeMapNodes(graph), tracks, reads, {
+    nodeWidthOption: "compressed",
+    trackWidth: tubeWidth(tracks.length),
+    trackColor: (track) => track.type === "read" ? readColor(track) : pathColors[track.id]
+  });
+  return layout ? { layout, pathColors } : void 0;
+}
+function drawnNodes(layout) {
+  const nodes = [];
+  layout.nodes.forEach((node) => {
+    if (node.order >= 0) {
+      nodes.push(node);
+    }
+  });
+  return nodes;
+}
+function centreline(node, yOffset, x0, x1) {
+  const y = node.y + node.contentHeight / 2 - yOffset;
+  return [
+    { x: x0, y },
+    { x: x1, y }
+  ];
+}
+function extentOf(layout, yOffset) {
+  return {
+    minY: layout.bounds.minY - yOffset,
+    maxY: layout.bounds.maxY - yOffset
+  };
+}
+function tubeMapLayout(graph) {
+  const run = hasTubeMapPaths(graph) ? runTubeMap(graph) : void 0;
+  if (!run) {
+    return void 0;
+  }
+  const { layout, pathColors } = run;
+  const yOffset = layout.bounds.minY;
+  const nodePositions = {};
+  for (const node of drawnNodes(layout)) {
+    nodePositions[node.name] = centreline(
+      node,
+      yOffset,
+      node.x,
+      node.x + node.pixelWidth
+    );
+  }
+  const { minY, maxY } = extentOf(layout, yOffset);
+  return {
+    nodePositions,
+    tubeMap: { layout, yOffset, pathColors },
+    extent: {
+      minX: layout.bounds.minX,
+      maxX: layout.bounds.maxX,
+      minY,
+      maxY
+    }
+  };
+}
+function tubeMapColumns(graph, layout) {
+  const nodeById = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  const byOrder = /* @__PURE__ */ new Map();
+  for (const node of drawnNodes(layout)) {
+    const list = byOrder.get(node.order);
+    if (list) {
+      list.push(node);
+    } else {
+      byOrder.set(node.order, [node]);
+    }
+  }
+  const columns = [];
+  let end = -Infinity;
+  for (const order of [...byOrder.keys()].sort((a, b) => a - b)) {
+    const nodes = byOrder.get(order);
+    let bp0 = Infinity;
+    let bp1 = -Infinity;
+    for (const node of nodes) {
+      const graphNode = nodeById.get(node.name);
+      if (graphNode && isBackbone(graphNode)) {
+        bp0 = Math.min(bp0, graphNode.stable.start);
+        bp1 = Math.max(bp1, graphNode.stable.start + node.sequenceLength);
+      }
+    }
+    if (bp0 === Infinity) {
+      bp0 = bp1 = end;
+    }
+    if (bp0 < end) {
+      bp0 = end;
+      bp1 = Math.max(end, bp1);
+    }
+    end = Math.max(end, bp1);
+    columns.push({
+      order,
+      x0: Math.min(...nodes.map((n2) => n2.x)),
+      x1: Math.max(...nodes.map((n2) => n2.x + n2.pixelWidth)),
+      bp0,
+      bp1
+    });
+  }
+  const first = columns.find((c) => c.bp0 !== -Infinity);
+  for (const column of columns) {
+    if (column.bp0 === -Infinity) {
+      column.bp0 = column.bp1 = first?.bp0 ?? 0;
+    }
+  }
+  return columns;
+}
+function pathsReachBackbone(graph) {
+  return graph.nodes.some(isBackbone) && hasTubeMapPaths(graph);
+}
+function tubeMapReferenceLayout(graph) {
+  const run = pathsReachBackbone(graph) ? runTubeMap(graph) : void 0;
+  if (!run) {
+    return void 0;
+  }
+  const { layout, pathColors } = run;
+  const columns = tubeMapColumns(graph, layout);
+  const byOrder = new Map(columns.map((c) => [c.order, c]));
+  const yOffset = layout.bounds.minY;
+  const nodePositions = {};
+  for (const node of drawnNodes(layout)) {
+    const column = byOrder.get(node.order);
+    nodePositions[node.name] = centreline(node, yOffset, column.bp0, column.bp1);
+  }
+  return {
+    nodePositions,
+    tubeMap: { layout, yOffset, columns, pathColors },
+    referenceAxis: true,
+    pixelRows: true,
+    extent: extentOf(layout, yOffset)
+  };
+}
+
+// src/layoutModes.ts
+var FORCE_LAYOUT_LABEL = "Force-directed layout";
+var hasBackbone = (graph) => graph.nodes.some(isBackbone);
+var hasWalks = (graph) => hasBackbone(graph) && (graph.paths?.length ?? 0) > 1;
+var hasTubeMapBackbone = (graph) => hasBackbone(graph) && hasTubeMapPaths(graph);
+var hasAlleles = (graph) => hasBackbone(graph) && graph.nodes.some(isOffReference);
+var LAYOUT_MODES = [
+  {
+    value: "auto",
+    label: "Anchored",
+    description: "x is reference bp, one row per stable rank. Needs rGFA tags or a reference path.",
+    run: anchoredLayout,
+    cutMargins: true,
+    wholeWalks: false,
+    available: hasBackbone,
+    drawsLocally: hasBackbone
+  },
+  {
+    value: "samplerows",
+    label: "Sample rows",
+    description: "x is reference bp, one row per contributing assembly. Needs rGFA tags or a reference path.",
+    run: sampleRowLayout,
+    cutMargins: true,
+    wholeWalks: false,
+    available: hasAlleles,
+    drawsLocally: hasAlleles
+  },
+  {
+    value: "walkrows",
+    label: "Walk rows",
+    description: "x is each walk's own bp: one bar per haplotype, sequence the reference also carries in blue and sequence it does not in purple, so a repeat expansion reads as bar length. Needs W or P lines.",
+    run: walkRowLayout,
+    cutMargins: false,
+    wholeWalks: true,
+    available: hasWalks,
+    drawsLocally: hasWalks
+  },
+  {
+    value: "ordered",
+    label: "Ordered",
+    description: "x is reference order, not bp: every node gets room, bubbles read as lenses. Needs rGFA tags or a reference path.",
+    run: orderedLayout,
+    cutMargins: false,
+    wholeWalks: false,
+    available: hasBackbone,
+    drawsLocally: hasBackbone
+  },
+  {
+    value: "tubemap",
+    label: "Tube map",
+    description: "sequenceTubeMap: every path a coloured tube through boxed nodes, columns in node order and node widths log-scaled. Needs P or W lines.",
+    run: tubeMapLayout,
+    cutMargins: false,
+    wholeWalks: false,
+    available: hasTubeMapPaths,
+    drawsLocally: hasTubeMapPaths
+  },
+  {
+    value: "tubemapref",
+    label: "Tube map on reference",
+    description: "The tube map with each column at the reference bp it covers, so the tubes line up with the tracks around them. Needs P or W lines and a reference path.",
+    run: tubeMapReferenceLayout,
+    cutMargins: true,
+    wholeWalks: false,
+    available: hasTubeMapBackbone,
+    drawsLocally: hasTubeMapBackbone
+  },
+  {
+    value: "force",
+    label: FORCE_LAYOUT_LABEL,
+    description: "OGDF FMMM, via the external Bandage engine.",
+    run: () => void 0,
+    cutMargins: false,
+    wholeWalks: false,
+    available: () => true,
+    drawsLocally: () => false
+  }
+];
+var LAYOUT_MODE_VALUES = LAYOUT_MODES.map((m) => m.value);
+function modeUsesLayoutEngine(value, graph) {
+  return !layoutModeByValue(value).drawsLocally(graph);
+}
+function layoutModeByValue(value) {
+  return LAYOUT_MODES.find((m) => m.value === value) ?? LAYOUT_MODES[0];
+}
+
+// src/colorSchemes.ts
+var COLOR_SCHEMES = [
+  // Mirrors `layoutModes`' 'auto': a value the model resolves rather than a
+  // colour of its own. It exists because 'uniform' was the default, so a
+  // launched graph opened flat grey and both tutorials spent a step saying "now
+  // pick a colour" — one figure literally drives that click. A graph with
+  // reference coordinates resolves to 'reference-position', which is the one
+  // ramp a linear track beside it can be painted with too; a graph with none
+  // keeps 'uniform', because there the ramp would be a hue nothing earned.
+  //
+  // Resolve through `effectiveColorScheme`; the dropdown reads the raw prop, so
+  // "Auto" stays selectable and visible as what it is.
+  { value: "auto", label: "Auto" },
+  { value: "uniform", label: "Uniform" },
+  { value: "random", label: "Random" },
+  { value: "rainbow", label: "Rainbow" },
+  { value: "depth", label: "Depth" },
+  { value: "node-length", label: "Node Length" },
+  { value: "stable-rank", label: "Stable rank" },
+  { value: "reference-position", label: "Reference position" },
+  { value: "grey", label: "Grey" }
+];
+var COLOR_SCHEME_VALUES = COLOR_SCHEMES.map((s) => s.value);
+function resolveColorScheme(scheme, graph) {
+  return scheme !== "auto" ? scheme : graph?.anchoredBy ? "reference-position" : "uniform";
+}
+
+// src/nodeWidths.ts
+var NODE_WIDTHS = [
+  {
+    value: "depth",
+    label: "By depth",
+    description: "Thicker the more paths carry a node, on the square root of its depth against the mean. A graph with one depth everywhere draws uniform."
+  },
+  {
+    value: "uniform",
+    label: "Uniform",
+    description: "Every node the same thickness."
+  }
+];
+var NODE_WIDTH_VALUES = NODE_WIDTHS.map((w) => w.value);
+var MIN_FACTOR = 0.3;
+var MAX_FACTOR = 3;
+function meanDepth(graph) {
+  let weighted = 0;
+  let length = 0;
+  for (const node of graph.nodes) {
+    weighted += node.depth * node.length;
+    length += node.length;
+  }
+  return length > 0 ? weighted / length : 0;
+}
+function depthWidthFactor(node, mean) {
+  if (!(mean > 0) || !(node.depth > 0)) {
+    return 1;
+  }
+  return Math.min(
+    MAX_FACTOR,
+    Math.max(MIN_FACTOR, Math.sqrt(node.depth / mean))
+  );
+}
+function nodeWidthPx(node, contigThickness, nodeWidth2, mean) {
+  return contigThickness * (nodeWidth2 === "depth" ? depthWidthFactor(node, mean) : 1);
+}
+function maxNodeWidthPx(contigThickness, nodeWidth2) {
+  return contigThickness * (nodeWidth2 === "depth" ? MAX_FACTOR : 1);
+}
+function nodeInk(graph, nodeById, contigThickness, nodeWidth2) {
+  const mean = graph ? meanDepth(graph) : 0;
+  return {
+    maxHalfWidthPx: maxNodeWidthPx(contigThickness, nodeWidth2) / 2,
+    halfWidthPx: (id) => {
+      const node = nodeById?.get(id);
+      return node ? nodeWidthPx(node, contigThickness, nodeWidth2, mean) / 2 : contigThickness / 2;
+    }
+  };
+}
+
+// src/util/geometry.ts
+function svgPath(points) {
+  const round = (v) => Math.round(v * 100) / 100;
+  return points.map((p, i) => `${i ? "L" : "M"}${round(p.x)},${round(p.y)}`).join("");
+}
+function projectLine(x1, y1, x2, y2, distance) {
+  const d = Math.hypot(y2 - y1, x2 - x1);
+  if (d === 0) {
+    return [x2, y2];
+  }
+  const vx = (x2 - x1) / d;
+  const vy = (y2 - y1) / d;
+  return [x2 + distance * vx, y2 + distance * vy];
+}
+function curvePointAt(c, t) {
+  const u = 1 - t;
+  const a = u * u * u;
+  const b = 3 * u * u * t;
+  const d = 3 * u * t * t;
+  const e = t * t * t;
+  return {
+    x: a * c.x0 + b * c.cx0 + d * c.cx1 + e * c.x1,
+    y: a * c.y0 + b * c.cy0 + d * c.cy1 + e * c.y1
+  };
+}
+function curveMidpoint(curves) {
+  const mid = curves[Math.floor(curves.length / 2)];
+  return mid ? curvePointAt(mid, 0.5) : void 0;
+}
+function curveBounds(curves) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const c of curves) {
+    minX = Math.min(minX, c.x0, c.cx0, c.cx1, c.x1);
+    maxX = Math.max(maxX, c.x0, c.cx0, c.cx1, c.x1);
+    minY = Math.min(minY, c.y0, c.cy0, c.cy1, c.y1);
+    maxY = Math.max(maxY, c.y0, c.cy0, c.cy1, c.y1);
+  }
+  return { minX, minY, maxX, maxY };
+}
+function subCurve(c, t0, t1) {
+  const p0 = curvePointAt(c, t0);
+  const p1 = curvePointAt(c, t1);
+  const dt = (t1 - t0) / 3;
+  const d0 = curveTangentAt(c, t0);
+  const d1 = curveTangentAt(c, t1);
+  return {
+    x0: p0.x,
+    y0: p0.y,
+    cx0: p0.x + d0.x * dt,
+    cy0: p0.y + d0.y * dt,
+    cx1: p1.x - d1.x * dt,
+    cy1: p1.y - d1.y * dt,
+    x1: p1.x,
+    y1: p1.y
+  };
+}
+function curveTangentAt(c, t) {
+  const u = 1 - t;
+  const a = 3 * u * u;
+  const b = 6 * u * t;
+  const d = 3 * t * t;
+  return {
+    x: a * (c.cx0 - c.x0) + b * (c.cx1 - c.cx0) + d * (c.x1 - c.cx1),
+    y: a * (c.cy0 - c.y0) + b * (c.cy1 - c.cy0) + d * (c.y1 - c.cy1)
+  };
+}
+function dashCurves(curves, dashWorld) {
+  const out = [];
+  for (const c of curves) {
+    const polyLen = Math.hypot(c.cx0 - c.x0, c.cy0 - c.y0) + Math.hypot(c.cx1 - c.cx0, c.cy1 - c.cy0) + Math.hypot(c.x1 - c.cx1, c.y1 - c.cy1);
+    const spans = Math.max(3, Math.round(polyLen / dashWorld) | 1);
+    for (let i = 0; i < spans; i += 2) {
+      out.push([subCurve(c, i / spans, (i + 1) / spans)]);
+    }
+  }
+  return out;
+}
+function translateCurves(curves, dx, dy) {
+  const out = new Array(curves.length);
+  for (let i = 0; i < curves.length; i++) {
+    const c = curves[i];
+    out[i] = {
+      x0: c.x0 + dx,
+      y0: c.y0 + dy,
+      cx0: c.cx0 + dx,
+      cy0: c.cy0 + dy,
+      cx1: c.cx1 + dx,
+      cy1: c.cy1 + dy,
+      x1: c.x1 + dx,
+      y1: c.y1 + dy
+    };
+  }
+  return out;
+}
+function attachment(segments, side) {
+  const last = segments.length - 1;
+  return side === "end" ? { at: segments[last], inward: segments[last - 1] } : { at: segments[0], inward: segments[1] };
+}
+var TANGENT_SPAN_FACTOR = 0.5;
+var MAX_TANGENT = 80;
+function spanOf(segments) {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const s of segments) {
+    min = Math.min(min, s.x);
+    max = Math.max(max, s.x);
+  }
+  return { min, max };
+}
+function distanceToSpan(x, span) {
+  return Math.max(0, span.min - x, x - span.max);
+}
+function facingSide(segments, other, tieBreak) {
+  const startGap = distanceToSpan(segments[0].x, other);
+  const endGap = distanceToSpan(segments[segments.length - 1].x, other);
+  return startGap === endGap ? tieBreak : startGap < endGap ? "start" : "end";
+}
+function facingSides(fromSegments, toSegments) {
+  return {
+    from: facingSide(fromSegments, spanOf(toSegments), "end"),
+    to: facingSide(toSegments, spanOf(fromSegments), "start")
+  };
+}
+var APEX_FRACTION = 0.75;
+var BOW_CLEARANCE = 1.15;
+var ALONG_FRACTION = 0.35;
+var MAX_ROW_BOW_PX = 3 * ROW_HEIGHT_PX;
+function bowAround(p1x, p1y, p2x, p2y, toward, maxBow) {
+  const chord = Math.hypot(p2x - p1x, p2y - p1y);
+  const ux = chord === 0 ? 1 : (p2x - p1x) / chord;
+  const uy = chord === 0 ? 0 : (p2y - p1y) / chord;
+  let reach = 0;
+  let minAlong = Infinity;
+  let maxAlong = -Infinity;
+  for (const p of toward) {
+    const dx = p.x - p1x;
+    const dy = p.y - p1y;
+    const perp = dx * -uy + dy * ux;
+    if (Math.abs(perp) > Math.abs(reach)) {
+      reach = perp;
+    }
+    const along = dx * ux + dy * uy;
+    minAlong = Math.min(minAlong, along);
+    maxAlong = Math.max(maxAlong, along);
+  }
+  const span = toward.length ? maxAlong - minAlong : 0;
+  const uncapped = Math.max(
+    Math.abs(reach) * BOW_CLEARANCE / APEX_FRACTION,
+    span * ALONG_FRACTION
+  );
+  const size = maxBow === void 0 ? uncapped : Math.min(uncapped, maxBow);
+  return reach < 0 ? -size : size;
+}
+function yToXOf({ scaleX, scaleY }) {
+  return scaleY / scaleX;
+}
+var PATH_RIBBON_SPACING = 3;
+function drawnDirection(a, b, yToX) {
+  const dx = b.x - a.x;
+  const dy = (b.y - a.y) * yToX;
+  const len = Math.hypot(dx, dy);
+  return len === 0 ? void 0 : { x: dx / len, y: dy / len };
+}
+function pathRibbonOffsets(fromSegments, toSegments, count, axis, spacing = PATH_RIBBON_SPACING) {
+  const yToX = yToXOf(axis);
+  const dir = drawnDirection(
+    fromSegments[fromSegments.length - 1],
+    toSegments[0],
+    yToX
+  ) ?? drawnDirection(fromSegments[0], fromSegments.at(-1), yToX) ?? drawnDirection(toSegments[0], toSegments.at(-1), yToX) ?? { x: 1, y: 0 };
+  const offsets = [];
+  for (let i = 0; i < count; i++) {
+    const distance = (i - (count - 1) / 2) * spacing;
+    offsets.push({ x: -dir.y * distance, y: dir.x * distance / yToX });
+  }
+  return offsets;
+}
+function scaleYOf(points, yToX) {
+  return points.map((p) => ({ x: p.x, y: p.y * yToX }));
+}
+function unscaleYOf(curves, yToX) {
+  for (const c of curves) {
+    c.y0 /= yToX;
+    c.cy0 /= yToX;
+    c.cy1 /= yToX;
+    c.y1 /= yToX;
+  }
+  return curves;
+}
+var SELF_LOOP_MIN_PX = 12;
+var SELF_LOOP_MAX_PX = 40;
+function selfLoopReach(segments, scale) {
+  let length = 0;
+  for (let i = 1; i < segments.length; i++) {
+    length += Math.hypot(
+      segments[i].x - segments[i - 1].x,
+      segments[i].y - segments[i - 1].y
+    );
+  }
+  const nodePx = length * scale;
+  const reachPx = Math.min(
+    SELF_LOOP_MAX_PX,
+    Math.max(SELF_LOOP_MIN_PX, nodePx / 2)
+  );
+  return reachPx / Math.max(scale, Number.EPSILON);
+}
+function selfLinkOf(edge) {
+  if (edge.from !== edge.to) {
+    return false;
+  }
+  return edge.fromStrand && edge.toStrand && edge.fromStrand !== edge.toStrand ? edge.fromStrand === "+" ? "end" : "start" : true;
+}
+function hairpinCurves(attach, reach, offsetX, offsetY) {
+  const { at, inward } = attach;
+  const dx = inward ? at.x - inward.x : 1;
+  const dy = inward ? at.y - inward.y : 0;
+  const len = Math.hypot(dx, dy) || 1;
+  const ux = dx / len;
+  const uy = dy / len;
+  const px = at.x + offsetX;
+  const py = at.y + offsetY;
+  const nearX = px + ux * reach / 3;
+  const nearY = py + uy * reach / 3;
+  const apexX = px + ux * reach;
+  const apexY = py + uy * reach;
+  const sideX = -uy * reach / 2;
+  const sideY = ux * reach / 2;
+  return [
+    {
+      x0: px,
+      y0: py,
+      cx0: nearX,
+      cy0: nearY,
+      cx1: apexX + sideX,
+      cy1: apexY + sideY,
+      x1: apexX,
+      y1: apexY
+    },
+    {
+      x0: apexX,
+      y0: apexY,
+      cx0: apexX - sideX,
+      cy0: apexY - sideY,
+      cx1: nearX,
+      cy1: nearY,
+      x1: px,
+      y1: py
+    }
+  ];
+}
+function computeEdgeCurves(fromSegments, toSegments, selfLink, offsetX, offsetY, axis, bypassed = [], maxBowIn) {
+  const scale = axis.scaleX;
+  const yToX = yToXOf(axis);
+  const maxBow = maxBowIn ?? (axis.pixelRows ? MAX_ROW_BOW_PX : void 0);
+  if (yToX !== 1) {
+    return unscaleYOf(
+      computeEdgeCurves(
+        scaleYOf(fromSegments, yToX),
+        scaleYOf(toSegments, yToX),
+        selfLink,
+        offsetX,
+        offsetY * yToX,
+        { scaleX: scale, scaleY: scale },
+        scaleYOf(bypassed, yToX),
+        // the cap is a y measure and the body works in x units, so it converts
+        // with everything else that crosses this boundary
+        maxBow === void 0 ? void 0 : maxBow * yToX
+      ),
+      yToX
+    );
+  }
+  if (typeof selfLink === "string") {
+    return hairpinCurves(
+      attachment(fromSegments, selfLink),
+      selfLoopReach(fromSegments, scale),
+      offsetX,
+      offsetY
+    );
+  }
+  const sides = selfLink ? { from: "end", to: "start" } : facingSides(fromSegments, toSegments);
+  const fromAttach = attachment(fromSegments, sides.from);
+  const toAttach = attachment(toSegments, sides.to);
+  const fromEnd = fromAttach.at;
+  const toStart = toAttach.at;
+  const p1x = fromEnd.x + offsetX;
+  const p1y = fromEnd.y + offsetY;
+  const p2x = toStart.x + offsetX;
+  const p2y = toStart.y + offsetY;
+  if (selfLink) {
+    let segDirX = 1;
+    let segDirY = 0;
+    if (fromAttach.inward) {
+      const dx = fromEnd.x - fromAttach.inward.x;
+      const dy = fromEnd.y - fromAttach.inward.y;
+      const len = Math.hypot(dx, dy);
+      if (len > 0) {
+        segDirX = dx / len;
+        segDirY = dy / len;
+      }
+    }
+    const ext = selfLoopReach(fromSegments, scale);
+    const perpX = -segDirY;
+    const perpY = segDirX;
+    const midX = (fromEnd.x + toStart.x) / 2 + offsetX + perpX * ext;
+    const midY = (fromEnd.y + toStart.y) / 2 + offsetY + perpY * ext;
+    const cp1x = p1x + segDirX * ext;
+    const cp1y = p1y + segDirY * ext;
+    const cp2x = p2x - segDirX * ext;
+    const cp2y = p2y - segDirY * ext;
+    return [
+      {
+        x0: p1x,
+        y0: p1y,
+        cx0: cp1x,
+        cy0: cp1y,
+        cx1: cp1x + perpX * ext,
+        cy1: cp1y + perpY * ext,
+        x1: midX,
+        y1: midY
+      },
+      {
+        x0: midX,
+        y0: midY,
+        cx0: cp2x + perpX * ext,
+        cy0: cp2y + perpY * ext,
+        cx1: cp2x,
+        cy1: cp2y,
+        x1: p2x,
+        y1: p2y
+      }
+    ];
+  } else {
+    const fromPrev = fromAttach.inward ?? {
+      x: fromEnd.x - (toStart.x - fromEnd.x),
+      y: fromEnd.y - (toStart.y - fromEnd.y)
+    };
+    const toNext = toAttach.inward ?? {
+      x: toStart.x - (fromEnd.x - toStart.x),
+      y: toStart.y - (fromEnd.y - toStart.y)
+    };
+    const dist = Math.hypot(p2x - p1x, p2y - p1y);
+    const tangentProj = (prev, at, towardX, towardY) => {
+      const dx = at.x - prev.x;
+      const dy = at.y - prev.y;
+      const len = Math.hypot(dx, dy);
+      const along = len === 0 ? 0 : (towardX * dx + towardY * dy) / len;
+      return Math.max(
+        0,
+        Math.min(dist * TANGENT_SPAN_FACTOR, MAX_TANGENT, along * 0.5)
+      );
+    };
+    const towardToX = toStart.x - fromEnd.x;
+    const towardToY = toStart.y - fromEnd.y;
+    const [cx1, cy1] = projectLine(
+      fromPrev.x,
+      fromPrev.y,
+      fromEnd.x,
+      fromEnd.y,
+      tangentProj(fromPrev, fromEnd, towardToX, towardToY)
+    );
+    const [cx2, cy2] = projectLine(
+      toNext.x,
+      toNext.y,
+      toStart.x,
+      toStart.y,
+      tangentProj(toNext, toStart, -towardToX, -towardToY)
+    );
+    const bulge = bypassed.length ? bowAround(p1x, p1y, p2x, p2y, bypassed, maxBow) : 0;
+    const chordLen = dist === 0 ? 1 : dist;
+    const ux = (p2x - p1x) / chordLen;
+    const uy = (p2y - p1y) / chordLen;
+    const bulgeX = -uy * bulge;
+    const bulgeY = ux * bulge;
+    const spreadX = ux * Math.abs(bulge);
+    const spreadY = uy * Math.abs(bulge);
+    return [
+      {
+        x0: p1x,
+        y0: p1y,
+        cx0: cx1 + offsetX + bulgeX - spreadX,
+        cy0: cy1 + offsetY + bulgeY - spreadY,
+        cx1: cx2 + offsetX + bulgeX + spreadX,
+        cy1: cy2 + offsetY + bulgeY + spreadY,
+        x1: p2x,
+        y1: p2y
+      }
+    ];
+  }
+}
+
+// src/deletionEdges.ts
+var MIN_DELETION_BP2 = 1;
+function bypassedPoints(nodePositions, bypassed) {
+  return bypassed.flatMap((id) => nodePositions[id] ?? []);
+}
+function deletionArcCurves(nodePositions, deletion, axis) {
+  const from = nodePositions[deletion.from];
+  const to = nodePositions[deletion.to];
+  return from?.length && to?.length ? computeEdgeCurves(
+    from,
+    to,
+    deletion.from === deletion.to,
+    0,
+    0,
+    axis,
+    bypassedPoints(nodePositions, deletion.bypassed)
+  ) : void 0;
+}
+function backboneBySequence(graph) {
+  const bySequence = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    if (isBackbone(node)) {
+      const list = bySequence.get(node.stable.refName);
+      if (list) {
+        list.push(node);
+      } else {
+        bySequence.set(node.stable.refName, [node]);
+      }
+    }
+  }
+  for (const list of bySequence.values()) {
+    list.sort((a, b) => a.stable.start - b.stable.start);
+  }
+  return bySequence;
+}
+function bypassedNodes(nodes, start, end) {
+  const bypassed = [];
+  if (nodes) {
+    for (let i = firstNodeAtOrAfter(nodes, start); i < nodes.length; i++) {
+      const node = nodes[i];
+      if (node.stable.start >= end) {
+        break;
+      }
+      if (node.stable.start + node.length <= end) {
+        bypassed.push(node.id);
+      }
+    }
+  }
+  return bypassed;
+}
+function skipsBetween(edge, from, to, forwards) {
+  const { fromStrand, toStrand } = edge;
+  if (fromStrand === void 0 || toStrand === void 0) {
+    return true;
+  }
+  const leavesRight = fromStrand === (from.stable.strand ?? "+");
+  const arrivesLeft = toStrand === (to.stable.strand ?? "+");
+  return forwards ? leavesRight && arrivesLeft : !leavesRight && !arrivesLeft;
+}
+function deletionEdges(graph) {
+  const byId = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  const backbone = backboneBySequence(graph);
+  const found = [];
+  for (let edgeIndex = 0; edgeIndex < graph.edges.length; edgeIndex++) {
+    const edge = graph.edges[edgeIndex];
+    const from = byId.get(edge.from);
+    const to = byId.get(edge.to);
+    if (from !== void 0 && to !== void 0 && isBackbone(from) && isBackbone(to) && from.stable.refName === to.stable.refName) {
+      const forwards = from.stable.start <= to.stable.start;
+      const [left, right] = forwards ? [from, to] : [to, from];
+      const start = left.stable.start + left.length;
+      const end = right.stable.start;
+      const bp = end - start;
+      if (bp >= MIN_DELETION_BP2 && skipsBetween(edge, from, to, forwards)) {
+        const refName = left.stable.refName;
+        found.push({
+          edgeIndex,
+          from: edge.from,
+          to: edge.to,
+          refName,
+          start,
+          end,
+          bp,
+          bypassed: bypassedNodes(backbone.get(refName), start, end)
+        });
+      }
+    }
+  }
+  return found;
+}
+
+// src/renderer/GeometryBuilder.ts
+import { packAbgr as packAbgr2 } from "@jbrowse/core/util/colorBits";
+
+// src/renderer/colorBits.ts
+import {
+  abgrAlpha,
+  abgrBlue,
+  abgrGreen,
+  abgrRed,
+  packAbgr
+} from "@jbrowse/core/util/colorBits";
+function fadeAbgr(c, alpha) {
+  return packAbgr(
+    abgrRed(c),
+    abgrGreen(c),
+    abgrBlue(c),
+    Math.round(abgrAlpha(c) * alpha)
+  );
+}
+function brightenAbgr(c, factor) {
+  return packAbgr(
+    Math.min(255, Math.round(abgrRed(c) * factor)),
+    Math.min(255, Math.round(abgrGreen(c) * factor)),
+    Math.min(255, Math.round(abgrBlue(c) * factor)),
+    abgrAlpha(c)
+  );
+}
+
+// src/util/edgeCurves.ts
+var cache = /* @__PURE__ */ new WeakMap();
+function baseEdgeCurves(nodePositions, graph, axis, deletions, version) {
+  const { scaleX, scaleY } = axis;
+  const cached2 = cache.get(nodePositions);
+  if (cached2?.graph === graph && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.deletions === deletions && cached2.version === version) {
+    return cached2.curves;
+  }
+  const curves = /* @__PURE__ */ new Map();
+  for (let ei = 0; ei < graph.edges.length; ei++) {
+    const edge = graph.edges[ei];
+    const from = nodePositions[edge.from];
+    const to = nodePositions[edge.to];
+    if (from?.length && to?.length) {
+      const bypassed = deletions?.get(ei);
+      curves.set(
+        ei,
+        computeEdgeCurves(
+          from,
+          to,
+          selfLinkOf(edge),
+          0,
+          0,
+          axis,
+          bypassed ? bypassedPoints(nodePositions, bypassed) : []
+        )
+      );
+    }
+  }
+  cache.set(nodePositions, {
+    graph,
+    scaleX,
+    scaleY,
+    deletions,
+    version,
+    curves
+  });
+  return curves;
+}
+
+// src/renderer/GeometryBuilder.ts
+var EDGE_DEFAULT_COLOR = packAbgr2(119, 119, 119, 217);
+var EDGE_PATH_FALLBACK_COLOR = packAbgr2(136, 136, 136, 217);
+var EDGE_DELETION_COLOR = packAbgr2(24, 24, 28, 240);
+var DELETION_THICKNESS_FACTOR = 2.2;
+var LIFT_BACKDROP_COLOR = packAbgr2(160, 160, 160, 255);
+var FADED_ALPHA = 0.18;
+var DELETION_DASH_PX = 11;
+var MIN_PATH_STRIPE_PX = 1.2;
+var MIN_WALK_LANE_PX = 4;
+var MIN_SCALE_FOR_OFFSET = 1e-6;
+var ARROW_LENGTH_BASE_PX = 7;
+var ARROW_LENGTH_PER_EDGE_PX = 3;
+var ARROW_HALF_WIDTH_BASE_PX = 3;
+var ARROW_HALF_WIDTH_PER_EDGE_PX = 1.5;
+var MIN_ARROW_FIT = 0.5;
+var MIN_ARROW_SCALE = 0.45;
+var ARROW_CURVE_STEPS = 12;
+var ABUTTING_PX = 1e-6;
+var walkX = new Float64Array(64);
+var walkY = new Float64Array(64);
+var walkPx = new Float64Array(64);
+function backFromEnd(curves, scale, yToX, untilPx) {
+  const most = curves.length * ARROW_CURVE_STEPS + 1;
+  if (walkX.length < most) {
+    walkX = new Float64Array(most);
+    walkY = new Float64Array(most);
+    walkPx = new Float64Array(most);
+  }
+  const last = curves[curves.length - 1];
+  walkX[0] = last.x1;
+  walkY[0] = last.y1;
+  walkPx[0] = 0;
+  let n2 = 1;
+  let px = 0;
+  for (let ci = curves.length - 1; ci >= 0 && px < untilPx; ci--) {
+    const c = curves[ci];
+    for (let k = 1; k <= ARROW_CURVE_STEPS && px < untilPx; k++) {
+      const t = 1 - (k / ARROW_CURVE_STEPS) ** 2;
+      const u = 1 - t;
+      const a = u * u * u;
+      const b = 3 * u * u * t;
+      const d = 3 * u * t * t;
+      const e = t * t * t;
+      const x = a * c.x0 + b * c.cx0 + d * c.cx1 + e * c.x1;
+      const y = a * c.y0 + b * c.cy0 + d * c.cy1 + e * c.y1;
+      px += Math.hypot(x - walkX[n2 - 1], (y - walkY[n2 - 1]) * yToX) * scale;
+      walkX[n2] = x;
+      walkY[n2] = y;
+      walkPx[n2] = px;
+      n2++;
+    }
+  }
+  return n2;
+}
+function walkPointAt(n2, px) {
+  let i = 1;
+  while (i < n2 - 1 && walkPx[i] < px) {
+    i++;
+  }
+  const from = walkPx[i - 1];
+  const to = walkPx[i];
+  const f = to > from ? Math.min(1, Math.max(0, (px - from) / (to - from))) : 0;
+  return {
+    x: walkX[i - 1] + (walkX[i] - walkX[i - 1]) * f,
+    y: walkY[i - 1] + (walkY[i] - walkY[i - 1]) * f
+  };
+}
+function arrowheadFor({
+  curves,
+  edgeHalfWidth,
+  nodeHalfWidth,
+  scale,
+  yToX,
+  color,
+  fromSegments,
+  toSegments
+}) {
+  const length = ARROW_LENGTH_BASE_PX + ARROW_LENGTH_PER_EDGE_PX * edgeHalfWidth;
+  const n2 = backFromEnd(curves, scale, yToX, nodeHalfWidth + length);
+  const lengthPx = walkPx[n2 - 1];
+  const inset = Math.min(nodeHalfWidth, lengthPx);
+  const room = lengthPx < ABUTTING_PX ? polylinePx(fromSegments, scale, yToX) : lengthPx - inset;
+  const fit = Math.min(1, room / length);
+  if (fit < MIN_ARROW_FIT) {
+    return void 0;
+  }
+  const tip = walkPointAt(n2, inset);
+  const base = walkPointAt(n2, inset + length * fit);
+  const dx = tip.x - base.x;
+  const dy = (tip.y - base.y) * yToX;
+  const last = curves[curves.length - 1];
+  return {
+    x: tip.x,
+    y: tip.y,
+    angle: Math.hypot(dx, dy) > 0 ? Math.atan2(dy, dx) : endTangent(last, yToX, intoDirection(last, toSegments)),
+    length: length * fit,
+    halfWidth: (ARROW_HALF_WIDTH_BASE_PX + ARROW_HALF_WIDTH_PER_EDGE_PX * edgeHalfWidth) * fit,
+    color
+  };
+}
+function polylinePx(segments, scale, yToX) {
+  let length = 0;
+  for (let i = 1; i < segments.length; i++) {
+    length += Math.hypot(
+      segments[i].x - segments[i - 1].x,
+      (segments[i].y - segments[i - 1].y) * yToX
+    );
+  }
+  return length * scale;
+}
+function intoDirection(last, toSegments) {
+  if (toSegments.length < 2) {
+    return void 0;
+  }
+  const first = toSegments[0];
+  const final = toSegments[toSegments.length - 1];
+  const atStart = Math.hypot(last.x1 - first.x, last.y1 - first.y) <= Math.hypot(last.x1 - final.x, last.y1 - final.y);
+  return atStart ? { from: first, to: toSegments[1] } : { from: final, to: toSegments[toSegments.length - 2] };
+}
+function pointNormalsOf(rawPoints, yToX = 1) {
+  const points = yToX === 1 ? rawPoints : rawPoints.map((p) => ({ x: p.x, y: p.y * yToX }));
+  const pointNormals = [];
+  for (let i = 0; i < points.length; i++) {
+    let nx = 0;
+    let ny = 0;
+    if (i === 0) {
+      const dx = points[1].x - points[0].x;
+      const dy = points[1].y - points[0].y;
+      const len = Math.hypot(dx, dy);
+      if (len > 0) {
+        nx = -dy / len;
+        ny = dx / len;
+      }
+    } else if (i === points.length - 1) {
+      const dx = points[i].x - points[i - 1].x;
+      const dy = points[i].y - points[i - 1].y;
+      const len = Math.hypot(dx, dy);
+      if (len > 0) {
+        nx = -dy / len;
+        ny = dx / len;
+      }
+    } else {
+      const dx1 = points[i].x - points[i - 1].x;
+      const dy1 = points[i].y - points[i - 1].y;
+      const len1 = Math.hypot(dx1, dy1);
+      const dx2 = points[i + 1].x - points[i].x;
+      const dy2 = points[i + 1].y - points[i].y;
+      const len2 = Math.hypot(dx2, dy2);
+      if (len1 > 0 && len2 > 0) {
+        const nx1 = -dy1 / len1;
+        const ny1 = dx1 / len1;
+        const nx2 = -dy2 / len2;
+        const ny2 = dx2 / len2;
+        nx = (nx1 + nx2) / 2;
+        ny = (ny1 + ny2) / 2;
+        const dot = nx1 * nx + ny1 * ny;
+        if (dot > 0.1) {
+          nx /= dot;
+          ny /= dot;
+        }
+      } else if (len1 > 0) {
+        nx = -dy1 / len1;
+        ny = dx1 / len1;
+      } else if (len2 > 0) {
+        nx = -dy2 / len2;
+        ny = dx2 / len2;
+      }
+    }
+    pointNormals.push({ nx, ny });
+  }
+  return pointNormals;
+}
+function offsetPolyline(points, normals, distance, yToX = 1) {
+  return points.map((p, i) => ({
+    x: p.x + normals[i].nx * distance,
+    y: p.y + normals[i].ny * distance / yToX
+  }));
+}
+function packNorm(r, g, b, a) {
+  return packAbgr2(
+    Math.round(r * 255),
+    Math.round(g * 255),
+    Math.round(b * 255),
+    Math.round(a * 255)
+  );
+}
+function hslToRgb(h, s, l) {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  return [r + m, g + m, b + m];
+}
+var DEPTH_GRADIENT = [
+  [68, 1, 84],
+  [59, 82, 139],
+  [33, 145, 140],
+  [94, 201, 98],
+  [253, 231, 37]
+];
+var STABLE_RANK_GRADIENT = [
+  [237, 137, 44],
+  [158, 42, 122]
+];
+var NODE_LENGTH_GRADIENT = [
+  [220, 50, 50],
+  [50, 120, 220]
+];
+function sampleGradient(stops, t) {
+  const pos = Math.max(0, Math.min(1, t)) * (stops.length - 1);
+  const i = Math.min(stops.length - 2, Math.floor(pos));
+  const f = pos - i;
+  const a = stops[i];
+  const b = stops[i + 1];
+  return packAbgr2(
+    Math.round(a[0] + (b[0] - a[0]) * f),
+    Math.round(a[1] + (b[1] - a[1]) * f),
+    Math.round(a[2] + (b[2] - a[2]) * f),
+    255
+  );
+}
+function hashColor(str, alpha) {
+  const [r, g, b] = hslToRgb(nameHue(str), PATH_SATURATION, PATH_LIGHTNESS);
+  return packNorm(r, g, b, alpha);
+}
+var REFERENCE_RAMP_MAX_HUE = 300;
+var REFERENCE_RAMP_SATURATION = 0.7;
+var REFERENCE_RAMP_LIGHTNESS = 0.5;
+var REFERENCE_RAMP_ALT_RGB = [60, 65, 72];
+var REFERENCE_RAMP_ALT_COLOR = packAbgr2(...REFERENCE_RAMP_ALT_RGB, 255);
+var REFERENCE_RAMP_ALT_CSS = `rgb(${REFERENCE_RAMP_ALT_RGB.join(", ")})`;
+function computeReferenceRamp(graph, domain) {
+  const midpoints = referenceMidpoints(graph);
+  if (domain && domain.end > domain.start) {
+    return {
+      start: domain.start,
+      span: domain.end - domain.start,
+      midpoints
+    };
+  }
+  let min = Infinity;
+  let max = -Infinity;
+  for (const mid of midpoints.values()) {
+    min = Math.min(min, mid);
+    max = Math.max(max, mid);
+  }
+  return {
+    start: min === Infinity ? 0 : min,
+    span: max > min ? max - min : 1,
+    midpoints
+  };
+}
+function computeColorSchemeRange(graph) {
+  let minDepth = Infinity;
+  let maxDepth = -Infinity;
+  let minLength = Infinity;
+  let maxLength = -Infinity;
+  let maxRank = 0;
+  for (const n2 of graph.nodes) {
+    if (n2.stable !== void 0 && n2.stable.rank > maxRank) {
+      maxRank = n2.stable.rank;
+    }
+    if (n2.depth < minDepth) {
+      minDepth = n2.depth;
+    }
+    if (n2.depth > maxDepth) {
+      maxDepth = n2.depth;
+    }
+    if (n2.length < minLength) {
+      minLength = n2.length;
+    }
+    if (n2.length > maxLength) {
+      maxLength = n2.length;
+    }
+  }
+  return {
+    minDepth,
+    maxDepth,
+    minLength,
+    maxLength,
+    maxRank,
+    nodeCount: graph.nodes.length
+  };
+}
+function getNodeColor(node, nodeIndex, colorScheme, range) {
+  switch (colorScheme) {
+    case "random":
+      return hashColor(node.id, 1);
+    case "depth":
+      return sampleGradient(
+        DEPTH_GRADIENT,
+        range.maxDepth > range.minDepth ? (node.depth - range.minDepth) / (range.maxDepth - range.minDepth) : 0.5
+      );
+    case "node-length":
+      return sampleGradient(
+        NODE_LENGTH_GRADIENT,
+        range.maxLength > range.minLength ? (node.length - range.minLength) / (range.maxLength - range.minLength) : 0.5
+      );
+    // rGFA states the backbone rather than leaving it to be inferred: rank 0 is
+    // the reference, higher ranks are the sequence that diverges from it. A
+    // graph with no SR tags draws every node as unranked.
+    case "stable-rank":
+      return node.stable === void 0 ? packAbgr2(160, 160, 160, 255) : node.stable.rank === 0 ? packAbgr2(52, 152, 219, 255) : sampleGradient(
+        STABLE_RANK_GRADIENT,
+        range.maxRank > 1 ? (node.stable.rank - 1) / (range.maxRank - 1) : 0
+      );
+    // Position on the reference, the one quantity both panels of a
+    // graph-over-linear figure can state. A node with no reference position at
+    // all — nothing anchored, or an allele whose flanks fell outside the cut —
+    // is grey rather than a hue it has not earned.
+    case "reference-position": {
+      const ramp = range.referenceRamp;
+      const mid = ramp?.midpoints.get(node.id);
+      if (ramp === void 0 || mid === void 0) {
+        return packAbgr2(160, 160, 160, 255);
+      }
+      if (node.stable !== void 0 && node.stable.rank > 0) {
+        return REFERENCE_RAMP_ALT_COLOR;
+      }
+      const frac = Math.max(0, Math.min(1, (mid - ramp.start) / ramp.span));
+      const [r, g, b] = hslToRgb(
+        frac * REFERENCE_RAMP_MAX_HUE,
+        REFERENCE_RAMP_SATURATION,
+        REFERENCE_RAMP_LIGHTNESS
+      );
+      return packNorm(r, g, b, 1);
+    }
+    case "grey":
+      return packAbgr2(160, 160, 160, 255);
+    case "rainbow": {
+      const hue = range.nodeCount > 1 ? nodeIndex / range.nodeCount * 360 : 0;
+      const [r, g, b] = hslToRgb(hue, 0.75, 0.5);
+      return packNorm(r, g, b, 1);
+    }
+    default:
+      return packAbgr2(52, 152, 219, 255);
+  }
+}
+function endTangent(c, yToX = 1, into) {
+  const candidates = [
+    [c.cx1, c.cy1],
+    [c.cx0, c.cy0],
+    [c.x0, c.y0]
+  ];
+  for (const [x, y] of candidates) {
+    const dx = c.x1 - x;
+    const dy = (c.y1 - y) * yToX;
+    if (Math.hypot(dx, dy) > 0) {
+      return Math.atan2(dy, dx);
+    }
+  }
+  return into ? Math.atan2((into.to.y - into.from.y) * yToX, into.to.x - into.from.x) : 0;
+}
+function isPolylineInBounds(segments, bounds) {
+  let hit = false;
+  for (let i = 0; i < segments.length - 1 && !hit; i++) {
+    const a = segments[i];
+    const b = segments[i + 1];
+    hit = Math.max(a.x, b.x) >= bounds.minX && Math.min(a.x, b.x) <= bounds.maxX && Math.max(a.y, b.y) >= bounds.minY && Math.min(a.y, b.y) <= bounds.maxY;
+  }
+  return hit;
+}
+function isBezierInBounds(curves, bounds) {
+  for (const c of curves) {
+    const cMinX = Math.min(c.x0, c.cx0, c.cx1, c.x1);
+    const cMaxX = Math.max(c.x0, c.cx0, c.cx1, c.x1);
+    const cMinY = Math.min(c.y0, c.cy0, c.cy1, c.y1);
+    const cMaxY = Math.max(c.y0, c.cy0, c.cy1, c.y1);
+    if (cMaxX >= bounds.minX && cMinX <= bounds.maxX && cMaxY >= bounds.minY && cMinY <= bounds.maxY) {
+      return true;
+    }
+  }
+  return false;
+}
+var paletteCache = /* @__PURE__ */ new WeakMap();
+function pathPaletteOf(graph) {
+  let palette = paletteCache.get(graph);
+  if (!palette) {
+    const pathColorByIndex = [];
+    const pathIndexByName = /* @__PURE__ */ new Map();
+    const paths = graph.paths ?? [];
+    for (let i = 0; i < paths.length; i++) {
+      const [r, g, b] = hslToRgb(
+        pathHueAt(i, paths.length),
+        PATH_SATURATION,
+        PATH_LIGHTNESS
+      );
+      pathColorByIndex.push(packNorm(r, g, b, 0.85));
+      if (!pathIndexByName.has(paths[i].name)) {
+        pathIndexByName.set(paths[i].name, i);
+      }
+    }
+    palette = { pathColorByIndex, pathIndexByName };
+    paletteCache.set(graph, palette);
+  }
+  return palette;
+}
+var slotsCache = /* @__PURE__ */ new WeakMap();
+var NO_SLOTS = /* @__PURE__ */ new Map();
+function pathSlotsOf(graph) {
+  let slots = slotsCache.get(graph);
+  if (!slots) {
+    slots = /* @__PURE__ */ new Map();
+    for (const [pathIdx, path] of (graph.paths ?? []).entries()) {
+      for (const nodeId of new Set(path.nodeIds)) {
+        const visits = slots.get(nodeId);
+        if (visits) {
+          visits.push(pathIdx);
+        } else {
+          slots.set(nodeId, [pathIdx]);
+        }
+      }
+    }
+    slotsCache.set(graph, slots);
+  }
+  return slots;
+}
+function buildGeometry(options) {
+  const {
+    nodePositions,
+    graph,
+    nodeById,
+    colorScheme,
+    contigThickness,
+    connectorThickness,
+    drawPaths,
+    nodeWidth: nodeWidth2 = "uniform",
+    highlight,
+    axis,
+    linearLayout,
+    viewportBounds,
+    referenceRamp,
+    deletions,
+    hiddenEdges,
+    version = 0
+  } = options;
+  const depthNorm = nodeWidth2 === "depth" ? meanDepth(graph) : 0;
+  const scale = axis.scaleX;
+  const yToX = yToXOf(axis);
+  const sharedCurves = baseEdgeCurves(
+    nodePositions,
+    graph,
+    axis,
+    deletions,
+    version
+  );
+  const nodeStrokes = [];
+  const nodeStrokeRuns = /* @__PURE__ */ new Map();
+  const arrows = [];
+  const arrowRuns = /* @__PURE__ */ new Map();
+  const edgeCurves = [];
+  const edgeCurveRuns = /* @__PURE__ */ new Map();
+  const colorRange = { ...computeColorSchemeRange(graph), referenceRamp };
+  const nodeIndexMap = /* @__PURE__ */ new Map();
+  if (colorScheme === "rainbow") {
+    for (let i = 0; i < graph.nodes.length; i++) {
+      nodeIndexMap.set(graph.nodes[i].id, i);
+    }
+  }
+  const pathCount = graph.paths?.length ?? 0;
+  const { pathColorByIndex, pathIndexByName } = pathPaletteOf(graph);
+  const pathColorByName = (name) => pathColorByIndex[pathIndexByName.get(name) ?? -1] ?? EDGE_PATH_FALLBACK_COLOR;
+  const nodePathSlots = drawPaths && pathCount > 1 ? pathSlotsOf(graph) : NO_SLOTS;
+  const showArrows = scale > (linearLayout ? 1 : MIN_ARROW_SCALE);
+  for (let ei = 0; ei < graph.edges.length; ei++) {
+    const edge = graph.edges[ei];
+    const fromSegments = nodePositions[edge.from];
+    const toSegments = nodePositions[edge.to];
+    const baseCurves = sharedCurves.get(ei);
+    if (!fromSegments?.length || !toSegments?.length || !baseCurves || hiddenEdges?.has(ei)) {
+      continue;
+    }
+    const numPaths = edge.pathIds?.length ?? 0;
+    const bypassed = deletions?.get(ei);
+    const isDeletion = bypassed !== void 0;
+    const onWalk = highlight?.edgeIndexes.has(ei) ?? false;
+    const edgeThickness = connectorThickness / 2 * (isDeletion ? DELETION_THICKNESS_FACTOR : 1);
+    const ribbons = drawPaths && numPaths > 0;
+    const plainEdgeColor = isDeletion ? EDGE_DELETION_COLOR : EDGE_DEFAULT_COLOR;
+    const edgeColor = !highlight || onWalk ? plainEdgeColor : fadeAbgr(plainEdgeColor, FADED_ALPHA);
+    const toNode = nodeById.get(edge.to);
+    const intoHalfWidth = (toNode ? nodeWidthPx(toNode, contigThickness, nodeWidth2, depthNorm) : contigThickness) / 2;
+    const buildSingleEdge = (offsetX, offsetY, color, arrowColor) => {
+      const curves = offsetX === 0 && offsetY === 0 ? baseCurves : translateCurves(baseCurves, offsetX, offsetY);
+      if (viewportBounds && !isBezierInBounds(curves, viewportBounds)) {
+        return;
+      }
+      if (isDeletion) {
+        for (const dash of dashCurves(curves, DELETION_DASH_PX / scale)) {
+          edgeCurves.push({ curves: dash, thickness: edgeThickness, color });
+        }
+      } else {
+        edgeCurves.push({ curves, thickness: edgeThickness, color });
+      }
+      const head = showArrows && arrowColor !== void 0 ? arrowheadFor({
+        curves,
+        edgeHalfWidth: edgeThickness,
+        nodeHalfWidth: intoHalfWidth,
+        scale,
+        yToX,
+        color: arrowColor,
+        fromSegments,
+        toSegments
+      }) : void 0;
+      if (head) {
+        arrows.push(head);
+      }
+    };
+    const edgeCurveStart = edgeCurves.length;
+    const arrowStart = arrows.length;
+    const laneWalks = highlight && onWalk && !ribbons ? highlight.walks : void 0;
+    if (laneWalks) {
+      const fromNode = nodeById.get(edge.from);
+      const width = fromNode ? nodeWidthPx(fromNode, contigThickness, nodeWidth2, depthNorm) : contigThickness;
+      const laneWidth = Math.max(width / laneWalks.length, MIN_WALK_LANE_PX);
+      const normals = pointNormalsOf(fromSegments, yToX);
+      const { nx, ny } = (edge.fromStrand === "-" ? normals[0] : normals.at(-1)) ?? {
+        nx: 0,
+        ny: 0
+      };
+      const worldPerScreenPx = 1 / Math.max(scale, MIN_SCALE_FOR_OFFSET);
+      laneWalks.forEach((walk, lane) => {
+        if (!walk.edgeIndexes.has(ei)) {
+          return;
+        }
+        const offset = (lane - (laneWalks.length - 1) / 2) * laneWidth * worldPerScreenPx;
+        const curves = offset === 0 ? baseCurves : translateCurves(baseCurves, nx * offset, ny * offset / yToX);
+        if (viewportBounds && !isBezierInBounds(curves, viewportBounds)) {
+          return;
+        }
+        edgeCurves.push({
+          curves,
+          thickness: laneWidth / 2,
+          color: walk.colors.get(edge.from) ?? walk.colors.get(edge.to) ?? plainEdgeColor
+        });
+      });
+    } else if (!ribbons) {
+      buildSingleEdge(0, 0, edgeColor, edgeColor);
+    } else {
+      const offsets = pathRibbonOffsets(
+        fromSegments,
+        toSegments,
+        numPaths,
+        axis
+      );
+      const arrowRibbon = Math.floor((numPaths - 1) / 2);
+      for (let pathIdx = 0; pathIdx < numPaths; pathIdx++) {
+        const offset = offsets[pathIdx];
+        const ribbonColor = pathColorByName(edge.pathIds[pathIdx]);
+        buildSingleEdge(
+          offset.x,
+          offset.y,
+          highlight && !highlight.names.has(edge.pathIds[pathIdx]) ? fadeAbgr(ribbonColor, FADED_ALPHA) : ribbonColor,
+          pathIdx === arrowRibbon ? edgeColor : void 0
+        );
+      }
+    }
+    const edgeCurveCount = edgeCurves.length - edgeCurveStart;
+    if (edgeCurveCount > 0) {
+      edgeCurveRuns.set(ei, { start: edgeCurveStart, count: edgeCurveCount });
+    }
+    const arrowCount = arrows.length - arrowStart;
+    if (arrowCount > 0) {
+      arrowRuns.set(ei, { start: arrowStart, count: arrowCount });
+    }
+  }
+  for (const [nodeId, segments] of Object.entries(nodePositions)) {
+    const node = nodeById.get(nodeId);
+    if (!node) {
+      continue;
+    }
+    if (viewportBounds && !isPolylineInBounds(segments, viewportBounds)) {
+      continue;
+    }
+    const faded = highlight !== void 0 && !highlight.nodeIds.has(nodeId);
+    const own = faded ? LIFT_BACKDROP_COLOR : getNodeColor(
+      node,
+      nodeIndexMap.get(nodeId) ?? 0,
+      colorScheme,
+      colorRange
+    );
+    const color = faded ? fadeAbgr(own, FADED_ALPHA) : own;
+    const width = nodeWidthPx(node, contigThickness, nodeWidth2, depthNorm);
+    const nodeThickness = width / 2;
+    const start = nodeStrokes.length;
+    const slots = nodePathSlots.get(nodeId);
+    const slotWidth = width / pathCount;
+    const drawable = segments.length >= 2;
+    const lanes = highlight && !faded && !slots?.length ? highlight.walks : void 0;
+    if (drawable && lanes) {
+      const laneWidth = Math.max(width / lanes.length, MIN_WALK_LANE_PX);
+      const normals = pointNormalsOf(segments, yToX);
+      const worldPerScreenPx = 1 / Math.max(scale, MIN_SCALE_FOR_OFFSET);
+      lanes.forEach((walk, lane) => {
+        const laneColor = walk.colors.get(nodeId);
+        if (laneColor === void 0) {
+          return;
+        }
+        const offset = (lane - (lanes.length - 1) / 2) * laneWidth * worldPerScreenPx;
+        nodeStrokes.push({
+          points: lanes.length === 1 ? segments : offsetPolyline(segments, normals, offset, yToX),
+          thickness: laneWidth / 2,
+          color: laneColor
+        });
+      });
+    } else if (drawable && slots?.length && slotWidth >= MIN_PATH_STRIPE_PX) {
+      const normals = pointNormalsOf(segments, yToX);
+      const worldPerScreenPx = 1 / Math.max(scale, MIN_SCALE_FOR_OFFSET);
+      for (const slot of slots) {
+        const offset = (slot - (pathCount - 1) / 2) * slotWidth * worldPerScreenPx;
+        const stripe = pathColorByIndex[slot] ?? EDGE_PATH_FALLBACK_COLOR;
+        nodeStrokes.push({
+          points: offsetPolyline(segments, normals, offset, yToX),
+          thickness: slotWidth / 2,
+          // a node off the lifted walk fades whichever way it is painted
+          color: faded ? fadeAbgr(stripe, FADED_ALPHA) : stripe
+        });
+      }
+    } else if (drawable) {
+      nodeStrokes.push({ points: segments, thickness: nodeThickness, color });
+    }
+    const count = nodeStrokes.length - start;
+    if (count > 0) {
+      nodeStrokeRuns.set(nodeId, { start, count });
+    }
+  }
+  return {
+    nodeStrokes,
+    nodeStrokeRuns,
+    arrows,
+    arrowRuns,
+    edgeCurves,
+    edgeCurveRuns
+  };
+}
+
+// src/renderer/Canvas2DRenderer.ts
+import {
+  abgrToCssRgba,
+  normalizedRgbToCssRgba
+} from "@jbrowse/core/util/colorBits";
+import { syncCanvasSize } from "@jbrowse/render-core/canvas2dUtils";
+import { Canvas2DRenderingBackendBase } from "@jbrowse/render-core/renderingBackendBase";
+var Canvas2DRenderer = class extends Canvas2DRenderingBackendBase {
+  constructor() {
+    super(...arguments);
+    this.transform = null;
+    this.batch = null;
+    this.nodeHighlights = /* @__PURE__ */ new Map();
+    this.highlightedEdge = null;
+    this.highlightFactor = 1;
+  }
+  // render-core's, not a local `width * devicePixelRatio`: it clamps the
+  // backing store at MAX_CANVAS_DIM_PX, reads the ratio through `getDpr()` so
+  // this agrees with the transform the model builds, and writes the css size
+  // independently of the backing size.
+  resize(width, height) {
+    syncCanvasSize(this.ctx.canvas, width, height);
+  }
+  uploadGeometry(batch) {
+    this.batch = batch;
+    this.highlightedEdge = null;
+  }
+  setNodeHighlights(factors) {
+    this.nodeHighlights = factors;
+  }
+  setEdgeHighlight(edgeIndex, factor) {
+    this.highlightedEdge = edgeIndex;
+    this.highlightFactor = factor;
+  }
+  updateTransform(transform) {
+    this.transform = transform;
+  }
+  render(clearColor) {
+    const t = this.transform;
+    if (!t) {
+      return;
+    }
+    const ctx = this.ctx;
+    const { width, height } = ctx.canvas;
+    ctx.fillStyle = normalizedRgbToCssRgba(
+      [clearColor[0], clearColor[1], clearColor[2]],
+      clearColor[3]
+    );
+    ctx.fillRect(0, 0, width, height);
+    const batch = this.batch;
+    if (!batch) {
+      return;
+    }
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    this.renderEdges(batch);
+    this.renderNodes(batch);
+    this.renderArrows(batch);
+  }
+  renderEdges(batch) {
+    const t = this.transform;
+    const ctx = this.ctx;
+    const hl = this.highlightedEdge === null ? void 0 : batch.edgeCurveRuns.get(this.highlightedEdge);
+    for (const { color, items } of groupByPaint(batch.edgeCurves, (e, i) => ({
+      color: inRun(hl, i) ? brightenAbgr(e.color, this.highlightFactor) : e.color,
+      weight: e.thickness,
+      last: inRun(hl, i)
+    }))) {
+      ctx.strokeStyle = abgrToCssRgba(color);
+      ctx.lineWidth = items[0].thickness * 2 * t.dpr;
+      ctx.beginPath();
+      for (const e of items) {
+        const first = e.curves[0];
+        ctx.moveTo(
+          first.x0 * t.scaleX + t.translateX,
+          first.y0 * t.scaleY + t.translateY
+        );
+        for (const c of e.curves) {
+          ctx.bezierCurveTo(
+            c.cx0 * t.scaleX + t.translateX,
+            c.cy0 * t.scaleY + t.translateY,
+            c.cx1 * t.scaleX + t.translateX,
+            c.cy1 * t.scaleY + t.translateY,
+            c.x1 * t.scaleX + t.translateX,
+            c.y1 * t.scaleY + t.translateY
+          );
+        }
+      }
+      ctx.stroke();
+    }
+  }
+  renderNodes(batch) {
+    const t = this.transform;
+    const ctx = this.ctx;
+    const lifted = /* @__PURE__ */ new Map();
+    for (const [nodeId, factor] of this.nodeHighlights) {
+      const run = batch.nodeStrokeRuns.get(nodeId);
+      if (run) {
+        for (let i = run.start; i < run.start + run.count; i++) {
+          lifted.set(i, factor);
+        }
+      }
+    }
+    for (const { color, items } of groupByPaint(batch.nodeStrokes, (s, i) => {
+      const factor = lifted.get(i);
+      return {
+        color: factor === void 0 ? s.color : brightenAbgr(s.color, factor),
+        weight: s.thickness,
+        last: factor !== void 0
+      };
+    })) {
+      ctx.strokeStyle = abgrToCssRgba(color);
+      ctx.lineWidth = items[0].thickness * 2 * t.dpr;
+      ctx.beginPath();
+      for (const s of items) {
+        const p0 = s.points[0];
+        ctx.moveTo(
+          p0.x * t.scaleX + t.translateX,
+          p0.y * t.scaleY + t.translateY
+        );
+        for (let i = 1, l = s.points.length; i < l; i++) {
+          const p = s.points[i];
+          ctx.lineTo(
+            p.x * t.scaleX + t.translateX,
+            p.y * t.scaleY + t.translateY
+          );
+        }
+      }
+      ctx.stroke();
+    }
+  }
+  renderArrows(batch) {
+    const t = this.transform;
+    const ctx = this.ctx;
+    const hl = this.highlightedEdge === null ? void 0 : batch.arrowRuns.get(this.highlightedEdge);
+    for (const { color, items } of groupByPaint(batch.arrows, (a, i) => ({
+      color: inRun(hl, i) ? brightenAbgr(a.color, this.highlightFactor) : a.color,
+      weight: 0,
+      last: inRun(hl, i)
+    }))) {
+      ctx.fillStyle = abgrToCssRgba(color);
+      ctx.beginPath();
+      for (const a of items) {
+        const [tip, left, notch, right] = arrowheadOutline(a, t);
+        ctx.moveTo(tip.x, tip.y);
+        ctx.lineTo(left.x, left.y);
+        ctx.lineTo(notch.x, notch.y);
+        ctx.lineTo(right.x, right.y);
+        ctx.closePath();
+      }
+      ctx.fill();
+    }
+  }
+  dispose() {
+    super.dispose();
+    this.batch = null;
+    this.nodeHighlights = /* @__PURE__ */ new Map();
+    this.highlightedEdge = null;
+  }
+};
+var ARROW_NOTCH = 0.25;
+function arrowheadOutline(a, t) {
+  const ux = Math.cos(a.angle);
+  const uy = Math.sin(a.angle);
+  const tipX = a.x * t.scaleX + t.translateX;
+  const tipY = a.y * t.scaleY + t.translateY;
+  const length = a.length * t.dpr;
+  const halfWidth = a.halfWidth * t.dpr;
+  const backX = tipX - ux * length;
+  const backY = tipY - uy * length;
+  const notchBack = length * (1 - ARROW_NOTCH);
+  return [
+    { x: tipX, y: tipY },
+    { x: backX - uy * halfWidth, y: backY + ux * halfWidth },
+    { x: tipX - ux * notchBack, y: tipY - uy * notchBack },
+    { x: backX + uy * halfWidth, y: backY - ux * halfWidth }
+  ];
+}
+function inRun(run, i) {
+  return run !== void 0 && i >= run.start && i < run.start + run.count;
+}
+function groupByPaint(items, paintOf) {
+  const groups = /* @__PURE__ */ new Map();
+  const deferred = /* @__PURE__ */ new Map();
+  for (let i = 0, l = items.length; i < l; i++) {
+    const item = items[i];
+    const { color, weight, last } = paintOf(item, i);
+    const into = last ? deferred : groups;
+    const key = `${color}:${weight}`;
+    const group = into.get(key);
+    if (group) {
+      group.items.push(item);
+    } else {
+      into.set(key, { color, items: [item] });
+    }
+  }
+  return [...groups.values(), ...deferred.values()];
+}
+
+// src/overlayLabels.ts
+var LABEL_PX = 11;
+var LABEL_CHAR_PX = 6.2;
+var LABEL_PAD = 4;
+function labelWidth(text) {
+  return text.length * LABEL_CHAR_PX + LABEL_PAD * 2;
+}
+function overlaps(a, b) {
+  return a.x0 < b.x1 && a.x1 > b.x0 && a.y0 < b.y1 && a.y1 > b.y0;
+}
+function offFrame(box, frame) {
+  return box.x1 <= 0 || box.x0 >= frame.width || box.y1 <= 0 || box.y0 >= frame.height;
+}
+function insideFrame(box, frame) {
+  return box.x0 >= 0 && box.x1 <= frame.width && box.y0 >= 0 && box.y1 <= frame.height;
+}
+function occupancy(frame, reserved = []) {
+  const placed = [...reserved];
+  return (box) => {
+    if (offFrame(box, frame) || placed.some((p) => overlaps(p, box))) {
+      return false;
+    }
+    placed.push(box);
+    return true;
+  };
+}
+function placeLabels(candidates, frame, take) {
+  const out = [];
+  const row = LABEL_PX + LABEL_PAD * 2;
+  for (const c of candidates) {
+    const w = labelWidth(c.text);
+    const direction = c.y > frame.height / 2 ? -1 : 1;
+    for (let tries = 0; tries <= (c.stack ?? 0); tries++) {
+      const y = c.y + direction * tries * row;
+      const box = {
+        x0: c.x - w / 2,
+        x1: c.x + w / 2,
+        y0: y - LABEL_PX - LABEL_PAD,
+        y1: y + LABEL_PAD
+      };
+      if (offFrame(box, frame)) {
+        break;
+      }
+      if (insideFrame(box, frame) && take(box)) {
+        out.push({ ...c, y, w });
+        break;
+      }
+    }
+  }
+  return out;
+}
+
+// src/graphLabels.ts
+var MIN_DELETION_LABEL_PX = 26;
+var PX_PER_NODE_LABEL = 4e4;
+var MIN_NODE_LABELS = 8;
+var LEADER_GAP_PX = 8;
+var LABEL_CHAR_PX2 = 5.7;
+var LABEL_PAD_PX = 6;
+var LABEL_HEIGHT_PX = 13;
+var LABEL_GAP_PX = 3;
+var MAX_LABEL_OVERHANG = 2;
+function labelHalfWidth(text) {
+  return (text.length * LABEL_CHAR_PX2 + LABEL_PAD_PX + LABEL_GAP_PX) / 2;
+}
+var LABEL_HALF_HEIGHT = (LABEL_HEIGHT_PX + LABEL_GAP_PX) / 2;
+var MIN_LABEL_HALF_WIDTH = labelHalfWidth("1 bp");
+function boxAt(halfW, x, y) {
+  return {
+    x0: x - halfW,
+    x1: x + halfW,
+    y0: y - LABEL_HALF_HEIGHT,
+    y1: y + LABEL_HALF_HEIGHT
+  };
+}
+function rowLabelBox(text, screenY) {
+  return {
+    x0: 6,
+    x1: 6 + text.length * 6.2 + 8 + LABEL_GAP_PX,
+    y0: screenY - 8 - LABEL_GAP_PX / 2,
+    y1: screenY + 8 + LABEL_GAP_PX / 2
+  };
+}
+function clamp(v, lo, hi) {
+  return hi < lo ? v : Math.min(Math.max(v, lo), hi);
+}
+function formatBp(bp) {
+  if (bp >= 1e6) {
+    return `${+(bp / 1e6).toFixed(1)} Mb`;
+  }
+  return bp >= 1e3 ? `${+(bp / 1e3).toFixed(1)} kb` : `${bp} bp`;
+}
+function deletionText(bp) {
+  return `${formatBp(bp)} del`;
+}
+function arcOutward(curves, apex, scaleX, scaleY) {
+  const first = curves[0];
+  const last = curves[curves.length - 1];
+  const dx = (apex.x - (first.x0 + last.x1) / 2) * scaleX;
+  const dy = (apex.y - (first.y0 + last.y1) / 2) * scaleY;
+  const len = Math.hypot(dx, dy);
+  return len === 0 ? { x: 0, y: -1 } : { x: dx / len, y: dy / len };
+}
+function boxSupport(box, dir) {
+  return Math.abs(dir.x) * (box.x1 - box.x0) / 2 + Math.abs(dir.y) * (box.y1 - box.y0) / 2;
+}
+function boxRayCrossing(box, dir) {
+  const halfW = (box.x1 - box.x0) / 2;
+  const halfH = (box.y1 - box.y0) / 2;
+  return Math.min(
+    dir.x === 0 ? Infinity : halfW / Math.abs(dir.x),
+    dir.y === 0 ? Infinity : halfH / Math.abs(dir.y)
+  );
+}
+function drawnLength(segments, scaleX, scaleY) {
+  let total = 0;
+  for (let i = 1; i < segments.length; i++) {
+    const a = segments[i - 1];
+    const b = segments[i];
+    total += Math.hypot((b.x - a.x) * scaleX, (b.y - a.y) * scaleY);
+  }
+  return total;
+}
+function runBounds(nodeIds, nodePositions) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const id of nodeIds) {
+    for (const p of nodePositions[id] ?? []) {
+      minX = Math.min(minX, p.x);
+      maxX = Math.max(maxX, p.x);
+      minY = Math.min(minY, p.y);
+      maxY = Math.max(maxY, p.y);
+    }
+  }
+  return minX === Infinity ? void 0 : { minX, minY, maxX, maxY };
+}
+var nodeOrderCache = /* @__PURE__ */ new WeakMap();
+function labelOrder(nodePositions, nodeLengths) {
+  const cached2 = nodeOrderCache.get(nodePositions);
+  if (cached2?.nodeLengths === nodeLengths) {
+    return cached2.order;
+  }
+  const order = Object.entries(nodePositions).filter(([id, segments]) => segments.length > 0 && nodeLengths.has(id)).sort(([a], [b]) => nodeLengths.get(b) - nodeLengths.get(a));
+  nodeOrderCache.set(nodePositions, { nodeLengths, order });
+  return order;
+}
+var arcCache = /* @__PURE__ */ new WeakMap();
+function arcPlacements(nodePositions, deletions, axis, version) {
+  const { scaleX, scaleY } = axis;
+  const cached2 = arcCache.get(nodePositions);
+  if (cached2?.deletions === deletions && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.version === version) {
+    return cached2.arcs;
+  }
+  const arcs = [];
+  for (const deletion of [...deletions].sort((a, b) => b.bp - a.bp)) {
+    const curves = deletionArcCurves(nodePositions, deletion, axis);
+    const apex = curves ? curveMidpoint(curves) : void 0;
+    if (curves && apex) {
+      const { minX, minY, maxX, maxY } = curveBounds(curves);
+      arcs.push({
+        deletion,
+        curves,
+        apex,
+        // in screen px, so the two axes' units cannot be added by accident
+        extent: Math.max((maxX - minX) * scaleX, (maxY - minY) * scaleY)
+      });
+    }
+  }
+  arcCache.set(nodePositions, { deletions, scaleX, scaleY, version, arcs });
+  return arcs;
+}
+function sizeLabelCandidates({
+  nodePositions,
+  nodeLengths,
+  deletions,
+  alleleDeletions,
+  axis,
+  translateX,
+  translateY,
+  width,
+  height,
+  version = 0
+}) {
+  const { scaleX, scaleY } = axis;
+  const deletionCandidates = [];
+  const nodeCandidates = [];
+  for (const { deletion, curves, apex, extent } of arcPlacements(
+    nodePositions,
+    deletions,
+    axis,
+    version
+  )) {
+    if (extent >= MIN_DELETION_LABEL_PX) {
+      const text = deletionText(deletion.bp);
+      const halfW = labelHalfWidth(text);
+      const box = boxAt(halfW, 0, 0);
+      const arcX = apex.x * scaleX + translateX;
+      const arcY = apex.y * scaleY + translateY;
+      const fits = extent >= halfW * 2 / MAX_LABEL_OVERHANG;
+      const bow = arcOutward(curves, apex, scaleX, scaleY);
+      const offset = boxSupport(box, bow) + LEADER_GAP_PX;
+      const x = fits ? arcX : clamp(arcX + bow.x * offset, halfW, width - halfW);
+      const y = fits ? arcY : clamp(
+        arcY + bow.y * offset,
+        LABEL_HALF_HEIGHT,
+        height - LABEL_HALF_HEIGHT
+      );
+      const away = Math.hypot(x - arcX, y - arcY);
+      let leader;
+      if (away > 0) {
+        const dir = { x: (x - arcX) / away, y: (y - arcY) / away };
+        const crossing = boxRayCrossing(box, dir);
+        leader = {
+          arcX,
+          arcY,
+          labelX: x - dir.x * crossing,
+          labelY: y - dir.y * crossing
+        };
+      }
+      deletionCandidates.push({
+        label: {
+          key: `del:${deletion.edgeIndex}`,
+          text,
+          x,
+          y,
+          kind: "deletion",
+          leader
+        },
+        box: boxAt(halfW, x, y)
+      });
+    }
+  }
+  const labelledByDeletion = /* @__PURE__ */ new Set();
+  const alleleRuns = [...alleleDeletions ?? []].sort((a, b) => b.bp - a.bp);
+  for (const run of alleleRuns) {
+    const drawn = runBounds(run.nodeIds, nodePositions);
+    if (!drawn) {
+      continue;
+    }
+    const shownLeft = Math.max(drawn.minX * scaleX + translateX, 0);
+    const shownRight = Math.min(drawn.maxX * scaleX + translateX, width);
+    const shownTop = Math.max(drawn.minY * scaleY + translateY, 0);
+    const shownBottom = Math.min(drawn.maxY * scaleY + translateY, height);
+    if (shownRight < shownLeft || shownBottom < shownTop) {
+      continue;
+    }
+    const extent = Math.max(shownRight - shownLeft, shownBottom - shownTop);
+    const text = deletionText(run.bp);
+    const halfW = labelHalfWidth(text);
+    if (extent >= halfW * 2 / MAX_LABEL_OVERHANG) {
+      for (const id of run.nodeIds) {
+        labelledByDeletion.add(id);
+      }
+      const x = clamp((shownLeft + shownRight) / 2, halfW, width - halfW);
+      const y = clamp(
+        (shownTop + shownBottom) / 2,
+        LABEL_HALF_HEIGHT,
+        height - LABEL_HALF_HEIGHT
+      );
+      deletionCandidates.push({
+        label: {
+          key: `alleledel:${run.nodeIds.join(",")}`,
+          text,
+          x,
+          y,
+          kind: "deletion"
+        },
+        box: boxAt(halfW, x, y)
+      });
+    }
+  }
+  for (const [id, segments] of labelOrder(nodePositions, nodeLengths)) {
+    if (labelledByDeletion.has(id)) {
+      continue;
+    }
+    const { x, y } = polylineMidpoint(segments);
+    const screenY = y * scaleY + translateY;
+    if (screenY + LABEL_HALF_HEIGHT <= 0 || screenY - LABEL_HALF_HEIGHT >= height) {
+      continue;
+    }
+    const drawn = drawnLength(segments, scaleX, scaleY);
+    if (drawn < MIN_LABEL_HALF_WIDTH * 2 / MAX_LABEL_OVERHANG) {
+      continue;
+    }
+    const text = formatBp(nodeLengths.get(id));
+    const halfW = labelHalfWidth(text);
+    if (drawn >= halfW * 2 / MAX_LABEL_OVERHANG) {
+      const screenX = x * scaleX + translateX;
+      nodeCandidates.push({
+        label: {
+          key: `node:${id}`,
+          text,
+          x: screenX,
+          y: screenY,
+          kind: "node"
+        },
+        box: boxAt(halfW, screenX, screenY)
+      });
+    }
+  }
+  return { deletions: deletionCandidates, nodes: nodeCandidates };
+}
+function nodeLabelBudget(width, height) {
+  return Math.max(
+    MIN_NODE_LABELS,
+    Math.floor(width * height / PX_PER_NODE_LABEL)
+  );
+}
+function placeSizeLabels(candidates, take, budget = Infinity) {
+  const labels = [];
+  for (const { label, box } of candidates) {
+    if (labels.length >= budget) {
+      break;
+    }
+    if (take(box)) {
+      labels.push(label);
+    }
+  }
+  return labels;
+}
+
+// src/walkEncoding.ts
+import { packAbgr as packAbgr3 } from "@jbrowse/core/util/colorBits";
+var WALK_FIELDS = [
+  { value: "progress", label: "Progress along the walk" },
+  { value: "walk", label: "One colour for the walk" },
+  { value: "reference", label: "Reference position" }
+];
+var WALK_SCHEMES = [
+  { value: "grey", label: "Grey to black", ends: ["#a3a3a3", "#151515"] },
+  { value: "blue", label: "Cyan to navy", ends: ["#6ee0f0", "#0b2c7a"] },
+  { value: "red", label: "Yellow to red", ends: ["#ffd24a", "#b3121b"] },
+  { value: "purple", label: "Pink to plum", ends: ["#f5a3d8", "#5e1a6e"] },
+  { value: "green", label: "Lime to forest", ends: ["#b6e36c", "#0b5d3b"] },
+  { value: "rainbow", label: "Rainbow" }
+];
+var FAMILIES = ["blue", "red", "purple", "green"];
+var isField = (v) => WALK_FIELDS.some((f) => f.value === v);
+var isScheme = (v) => WALK_SCHEMES.some((s) => s.value === v);
+function resolveEncoding(layer, reference, picked, alone = true) {
+  const { field: askedField, scheme: askedScheme } = layer.color ?? {};
+  const field = isField(askedField) ? askedField : alone ? "progress" : "walk";
+  const family = reference ? "grey" : FAMILIES[picked % FAMILIES.length];
+  const scheme = isScheme(askedScheme) ? askedScheme === "rainbow" && field !== "reference" ? family : askedScheme : family;
+  return { field, scheme };
+}
+var BASE_T = 0.5;
+var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+var toGamma = (c) => c <= 31308e-7 ? c * 12.92 : 1.055 * c ** (1 / 2.4) - 0.055;
+function oklab(hex) {
+  const [r, g, b] = [1, 3, 5].map(
+    (i) => toLinear(Number.parseInt(hex.slice(i, i + 2), 16) / 255)
+  );
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function oklabToRgb([L, a, b]) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ].map((c) => toGamma(Math.max(0, Math.min(1, c))) * 255);
+}
+function schemeRgb(scheme, t) {
+  const x = Math.max(0, Math.min(1, t));
+  const family = WALK_SCHEMES.find((s) => s.value === scheme);
+  if (!family || !("ends" in family)) {
+    return hslToRgb(x * REFERENCE_RAMP_MAX_HUE, 0.7, 0.5).map((c) => c * 255);
+  }
+  const from = oklab(family.ends[0]);
+  const to = oklab(family.ends[1]);
+  return oklabToRgb(from.map((v, i) => v + (to[i] - v) * x));
+}
+function schemeCss(scheme, t) {
+  const [r, g, b] = schemeRgb(scheme, t).map(Math.round);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+function schemeColor(scheme, t) {
+  const [r, g, b] = schemeRgb(scheme, t).map(Math.round);
+  return packAbgr3(r, g, b, 255);
+}
+function encodedColor({ field, scheme }, t) {
+  return field === "walk" ? schemeColor(scheme, BASE_T) : t === void 0 ? NO_VALUE_COLOR : schemeColor(scheme, t);
+}
+var NO_VALUE_COLOR = REFERENCE_RAMP_ALT_COLOR;
+function encodingStops({ field, scheme }) {
+  return field === "walk" ? [{ offset: 0, color: schemeCss(scheme, BASE_T) }] : Array.from({ length: 7 }, (_, i) => ({
+    offset: i / 6,
+    color: schemeCss(scheme, i / 6)
+  }));
+}
+function encodingSwatchCss(encoding) {
+  const stops = encodingStops(encoding);
+  return stops.length === 1 ? stops[0].color : `linear-gradient(to right, ${stops.map((s) => `${s.color} ${s.offset * 100}%`).join(", ")})`;
+}
+
+// src/walkHighlight.ts
+function referenceOf(graph) {
+  return graph.referencePath ? graph.paths?.find((p) => pathOrigin(p.name).name === graph.referencePath) : void 0;
+}
+function walkHighlight(graph, name) {
+  const path = graph.paths?.find((p) => p.name === name);
+  if (!path) {
+    return void 0;
+  }
+  const byId = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  const edgeAt = /* @__PURE__ */ new Map();
+  graph.edges.forEach((e, i) => {
+    edgeAt.set(`${e.from}>${e.to}`, i);
+  });
+  const edgeIndexes = /* @__PURE__ */ new Set();
+  for (let i = 1; i < path.nodeIds.length; i++) {
+    const a = path.nodeIds[i - 1];
+    const b = path.nodeIds[i];
+    const index = edgeAt.get(`${a}>${b}`) ?? edgeAt.get(`${b}>${a}`);
+    if (index !== void 0) {
+      edgeIndexes.add(index);
+    }
+  }
+  const lengthOf = (id) => byId.get(id)?.length ?? 0;
+  const bp = path.nodeIds.reduce((sum, id) => sum + lengthOf(id), 0);
+  const progress = /* @__PURE__ */ new Map();
+  let before = 0;
+  for (const id of path.nodeIds) {
+    const length = lengthOf(id);
+    if (!progress.has(id)) {
+      progress.set(id, bp > 0 ? (before + length / 2) / bp : 0);
+    }
+    before += length;
+  }
+  const reference = referenceOf(graph);
+  const originName = pathOrigin(name).name;
+  const origin = graph.anchorPaths?.find((a) => a.name === originName && a.length === bp) ?? graph.anchorPaths?.find((a) => a.name === originName);
+  return {
+    name,
+    reference: reference === path,
+    range: origin ? {
+      contig: path.contig ?? panSNContig(origin.name),
+      start: origin.start,
+      end: origin.start + origin.length
+    } : void 0,
+    nodeIds: new Set(path.nodeIds),
+    edgeIndexes,
+    progress,
+    steps: path.nodeIds.length,
+    bp,
+    referenceBp: reference && reference !== path ? reference.nodeIds.reduce((sum, id) => sum + lengthOf(id), 0) : void 0
+  };
+}
+function laneColors(graph, walk, encoding, ramp) {
+  const byId = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  const colors = /* @__PURE__ */ new Map();
+  for (const [id, progress] of walk.progress) {
+    const node = byId.get(id);
+    const mid = ramp?.midpoints.get(id);
+    const t = encoding.field === "progress" ? progress : ramp && mid !== void 0 && !(node?.stable && node.stable.rank > 0) ? (mid - ramp.start) / ramp.span : void 0;
+    colors.set(id, encodedColor(encoding, t));
+  }
+  return colors;
+}
+function reversedNodes(graph, walk) {
+  const reference = referenceOf(graph);
+  const reversed = /* @__PURE__ */ new Set();
+  let bp = 0;
+  if (!reference || walk.reference) {
+    return { reversed, bp };
+  }
+  const walkPath = pathOrigin(walk.name).name;
+  const referencePath = pathOrigin(reference.name).name;
+  const byId = new Map(graph.nodes.map((n2) => [n2.id, n2]));
+  for (const id of walk.progress.keys()) {
+    const node = byId.get(id);
+    const visits = node ? graph.pathVisits?.get(node.name) : void 0;
+    const own = visits?.find((v) => v.path === walkPath)?.strand;
+    const theirs = visits?.find((v) => v.path === referencePath)?.strand;
+    if (own && theirs && own !== theirs) {
+      reversed.add(id);
+      bp += node.length;
+    }
+  }
+  return { reversed, bp };
+}
+function walkLift(graph, layers, ramp) {
+  const seen = /* @__PURE__ */ new Set();
+  const lifted = layers.filter((layer) => !seen.has(layer.walk) && seen.add(layer.walk)).flatMap((layer) => {
+    const walk = walkHighlight(graph, layer.walk);
+    return walk ? [{ walk, layer }] : [];
+  }).sort((a, b) => Number(b.walk.reference) - Number(a.walk.reference));
+  if (lifted.length === 0) {
+    return void 0;
+  }
+  let picked = 0;
+  const walks = lifted.map(({ walk, layer }) => {
+    const encoding = resolveEncoding(
+      layer,
+      walk.reference,
+      walk.reference ? 0 : picked++,
+      lifted.length === 1
+    );
+    const { reversed, bp } = reversedNodes(graph, walk);
+    return {
+      ...walk,
+      encoding,
+      colors: laneColors(graph, walk, encoding, ramp),
+      reversed,
+      reversedBp: bp
+    };
+  });
+  return liftOf(walks, ramp);
+}
+var FACET_COLOR = { field: "progress", scheme: "red" };
+function facetLifts(graph, lift, layers, ramp) {
+  return lift.walks.map((walk) => {
+    const stated = layers.find((l) => l.walk === walk.name)?.color;
+    const encoding = resolveEncoding(
+      { walk: walk.name, color: { ...FACET_COLOR, ...stated } },
+      walk.reference,
+      0
+    );
+    return liftOf(
+      [
+        {
+          ...walk,
+          encoding,
+          colors: laneColors(graph, walk, encoding, ramp)
+        }
+      ],
+      ramp
+    );
+  });
+}
+function liftOf(walks, ramp) {
+  return {
+    walks,
+    referenceDomain: ramp ? { start: ramp.start, end: ramp.start + ramp.span } : void 0,
+    nodeIds: new Set(walks.flatMap((w) => [...w.nodeIds])),
+    edgeIndexes: new Set(walks.flatMap((w) => [...w.edgeIndexes])),
+    names: new Set(walks.map((w) => w.name))
+  };
+}
+
+// src/walkKey.ts
+function rangeText(contig, start, end) {
+  const s = Math.round(start);
+  const e = Math.round(end);
+  return `${contig ? `${contig}:` : ""}${s.toLocaleString()}-${e.toLocaleString()} (${formatBp(e - s)})`;
+}
+function walkKey(walk, reference) {
+  const { field } = walk.encoding;
+  const own = walk.range ? rangeText(walk.range.contig, walk.range.start, walk.range.end) : void 0;
+  const scale = field === "progress" ? own : field === "reference" && reference ? rangeText(reference.name, reference.start, reference.end) : void 0;
+  return {
+    delta: walk.referenceBp === void 0 || walk.bp === walk.referenceBp ? "" : ` ${walk.bp > walk.referenceBp ? "+" : "\u2212"}${formatBp(Math.abs(walk.bp - walk.referenceBp))}`,
+    reversed: walk.reversedBp > 0 ? `, ${formatBp(walk.reversedBp)} reversed` : "",
+    shades: field !== "walk",
+    scale,
+    hover: scale === own ? void 0 : own
+  };
+}
+
+// src/facetGrid.ts
+var FACET_GAP_PX = 8;
+var FACET_TITLE_PX = 34;
+var FACET_PAD_PX = 12;
+var MIN_FACET_PANEL_PX = 60;
+function facetGrid({
+  count,
+  bounds,
+  pixelRows,
+  width,
+  room,
+  columns
+}) {
+  function tile(across) {
+    const rows = Math.ceil(count / across);
+    const panelWidth = Math.floor(
+      (width - (across - 1) * FACET_GAP_PX) / across
+    );
+    const panelRoom = (room - rows * FACET_TITLE_PX - (rows - 1) * FACET_GAP_PX) / rows;
+    const fitX = (panelWidth - 2 * FACET_PAD_PX) / bounds.w;
+    const fitY = bounds.h > 0 ? (panelRoom - 2 * FACET_PAD_PX) / bounds.h : Infinity;
+    const scale = pixelRows ? fitX : Math.min(fitX, fitY);
+    const drawn = pixelRows ? bounds.h : bounds.h * scale;
+    const height = Math.floor(
+      Math.max(
+        MIN_FACET_PANEL_PX,
+        Math.min(drawn + 2 * FACET_PAD_PX, panelRoom)
+      )
+    );
+    return {
+      columns: across,
+      width: panelWidth,
+      height,
+      scale,
+      total: rows * (height + FACET_TITLE_PX) + (rows - 1) * FACET_GAP_PX
+    };
+  }
+  if (columns !== void 0) {
+    return tile(Math.max(1, Math.min(count, Math.round(columns))));
+  }
+  let best = tile(1);
+  for (let across = 2; across <= count; across++) {
+    const grid = tile(across);
+    if (grid.scale > best.scale) {
+      best = grid;
+    }
+  }
+  return best;
+}
+function facetCells(names, by) {
+  const wrap = {
+    columns: void 0,
+    count: names.length,
+    cells: names.map((_, i) => i)
+  };
+  if (by === "walk") {
+    return wrap;
+  }
+  const places = names.map((name) => {
+    const [sample, haplotype, contig] = name.split("#");
+    const n2 = Number(haplotype);
+    return contig !== void 0 && Number.isInteger(n2) && n2 >= 0 ? { sample, column: Math.max(0, n2 - 1) } : void 0;
+  });
+  const rows = [...new Set(places.map((p) => p?.sample))];
+  const columns = Math.max(1, ...places.map((p) => p ? p.column + 1 : 1));
+  const cells = places.map(
+    (p) => p ? rows.indexOf(p.sample) * columns + p.column : -1
+  );
+  return cells.includes(-1) || new Set(cells).size < cells.length ? wrap : { columns, count: rows.length * columns, cells };
+}
+
+// src/renderer/svgCanvas.ts
+var n = (v) => +v.toFixed(1);
+function paint(css) {
+  const m = /^rgba?\(([^,]+),([^,]+),([^,)]+)(?:,([^)]+))?\)$/.exec(
+    css.replaceAll(" ", "")
+  );
+  if (!m) {
+    return { color: css, opacity: 1 };
+  }
+  const opacity = m[4] === void 0 ? 1 : Number(m[4]);
+  return { color: `rgb(${m[1]},${m[2]},${m[3]})`, opacity };
+}
+function paintAttrs(kind, css) {
+  const { color, opacity } = paint(css);
+  return `${kind}="${color}"${opacity < 1 ? ` ${kind}-opacity="${n(opacity)}"` : ""}`;
+}
+function svgCanvas(width, height) {
+  const out = [];
+  let d = "";
+  const ctx = {
+    canvas: void 0,
+    fillStyle: "#000",
+    strokeStyle: "#000",
+    lineWidth: 1,
+    lineCap: "butt",
+    lineJoin: "miter",
+    beginPath() {
+      d = "";
+    },
+    moveTo(x, y) {
+      d += `M${n(x)} ${n(y)}`;
+    },
+    lineTo(x, y) {
+      d += `L${n(x)} ${n(y)}`;
+    },
+    bezierCurveTo(cx0, cy0, cx1, cy1, x, y) {
+      d += `C${n(cx0)} ${n(cy0)} ${n(cx1)} ${n(cy1)} ${n(x)} ${n(y)}`;
+    },
+    closePath() {
+      d += "Z";
+    },
+    stroke() {
+      if (d) {
+        out.push(
+          `<path d="${d}" fill="none" ${paintAttrs("stroke", ctx.strokeStyle)} stroke-width="${n(ctx.lineWidth)}" stroke-linecap="${ctx.lineCap}" stroke-linejoin="${ctx.lineJoin}"/>`
+        );
+      }
+    },
+    fill() {
+      if (d) {
+        out.push(`<path d="${d}" ${paintAttrs("fill", ctx.fillStyle)}/>`);
+      }
+    },
+    fillRect(x, y, w, h) {
+      out.push(
+        `<rect x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" ${paintAttrs("fill", ctx.fillStyle)}/>`
+      );
+    }
+  };
+  const canvas = {
+    width,
+    height,
+    style: {},
+    getContext: () => ctx
+  };
+  ctx.canvas = canvas;
+  return {
+    canvas,
+    // the drawing so far, as SVG elements in canvas pixels
+    markup: () => out.join("")
+  };
+}
+
+// src/viewport.ts
+function axisScaleOf(scale, pixelRows) {
+  return { scaleX: scale, scaleY: pixelRows ? 1 : scale, pixelRows };
+}
+function viewportOf(t, axis, width, height) {
+  return {
+    minX: -t.translateX / axis.scaleX,
+    minY: -t.translateY / axis.scaleY,
+    maxX: (width - t.translateX) / axis.scaleX,
+    maxY: (height - t.translateY) / axis.scaleY
+  };
+}
+function padded(v, panes) {
+  const w = (v.maxX - v.minX) * panes;
+  const h = (v.maxY - v.minY) * panes;
+  return {
+    minX: v.minX - w,
+    minY: v.minY - h,
+    maxX: v.maxX + w,
+    maxY: v.maxY + h
+  };
+}
+function contains(outer, inner) {
+  return inner.minX >= outer.minX && inner.maxX <= outer.maxX && inner.minY >= outer.minY && inner.maxY <= outer.maxY;
+}
+function zoomAbout(t, factor, centerX, centerY, pixelRows) {
+  const scale = clampZoom(t.scale * factor);
+  const ratio = scale / t.scale;
+  return {
+    scale,
+    translateX: centerX - (centerX - t.translateX) * ratio,
+    translateY: pixelRows ? t.translateY : centerY - (centerY - t.translateY) * ratio
+  };
+}
+function screenToLayout(x, y, t, axis) {
+  return {
+    x: (x - t.translateX) / axis.scaleX,
+    y: (y - t.translateY) / axis.scaleY
+  };
+}
+
+// src/figure.ts
+var FONT = 'font-family="Helvetica, Arial, sans-serif" font-size="11"';
+var BAR_PX = 48;
+var SWATCH_PX = 18;
+var KEY_GAP_PX = 16;
+var FADED = "rgb(160,160,160)";
+function esc(s) {
+  return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+}
+function keySvg(id, x, y, stops, label, after, under, opacity = 1) {
+  const bar = stops.length > 1 ? BAR_PX : SWATCH_PX;
+  const fill = stops.length > 1 ? `fill="url(#${id})"` : `fill="${stops[0].color}"${opacity < 1 ? ` fill-opacity="${opacity}"` : ""}`;
+  const defs = stops.length > 1 ? `<linearGradient id="${id}">${stops.map((s) => `<stop offset="${s.offset}" stop-color="${s.color}"/>`).join("")}</linearGradient>` : "";
+  const width = Math.max(
+    bar + 5 + (label.length + after.length) * LABEL_CHAR_PX,
+    (under?.length ?? 0) * LABEL_CHAR_PX
+  );
+  return {
+    width,
+    markup: `${defs}<g transform="translate(${x} ${y})" ${FONT}><rect y="5" width="${bar}" height="8" rx="2" ${fill}/><text x="${bar + 5}" y="13"><tspan font-weight="bold">${esc(label)}</tspan>${esc(after)}</text>${under ? `<text y="28">${esc(under)}</text>` : ""}</g>`
+  };
+}
+function walkKeySvg(id, x, y, walk, label, reference) {
+  const key = walkKey(walk, reference);
+  return keySvg(
+    id,
+    x,
+    y,
+    encodingStops(walk.encoding),
+    label,
+    key.delta + key.reversed,
+    key.scale
+  );
+}
+function figureSvg(graph, layout, o = {}) {
+  const width = o.width ?? 1200;
+  const room = o.height ?? 800;
+  const region = o.region;
+  const bounds = drawingBounds(layout, { region });
+  const pixelRows = layout.pixelRows ?? false;
+  const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
+  const colorScheme = resolveColorScheme(o.colorScheme ?? "auto", graph);
+  const referenceRamp = colorScheme === "reference-position" && !layout.tubeMap ? computeReferenceRamp(graph, region) : void 0;
+  const deletions = layout.tubeMap ? [] : deletionEdges(graph);
+  const layers = o.walks ?? [];
+  const walkRamp = layers.some((l) => l.color?.field === "reference") ? referenceRamp ?? computeReferenceRamp(graph, region) : void 0;
+  const lift = layers.length > 0 && !layout.tubeMap ? walkLift(graph, layers, walkRamp) : void 0;
+  const by = o.facet ?? "none";
+  const panels = by !== "none" && lift && lift.walks.length > 1 ? facetLifts(graph, lift, layers, walkRamp) : void 0;
+  const labels = new Map(
+    (graph.paths?.length ? pathLegend(graph.paths) : []).map((p) => [
+      p.name,
+      p.label
+    ])
+  );
+  const labelOf2 = (name) => labels.get(name) ?? name;
+  const reference = lift?.referenceDomain && {
+    ...lift.referenceDomain,
+    name: region?.refName
+  };
+  function drawing(highlight, w, h) {
+    const fit = fitTransform(
+      bounds,
+      w,
+      h,
+      pixelRows,
+      panels ? {
+        padLeft: FACET_PAD_PX,
+        padTop: FACET_PAD_PX,
+        padRight: FACET_PAD_PX,
+        padBottom: FACET_PAD_PX
+      } : {}
+    );
+    if (!fit) {
+      return "";
+    }
+    const axis = axisScaleOf(fit.scale, pixelRows);
+    const { canvas, markup } = svgCanvas(w, h);
+    const renderer = new Canvas2DRenderer(canvas);
+    renderer.uploadGeometry(
+      buildGeometry({
+        nodePositions: layout.nodePositions,
+        graph,
+        nodeById,
+        colorScheme,
+        contigThickness: o.contigThickness ?? 6,
+        connectorThickness: o.connectorThickness ?? 2,
+        drawPaths: false,
+        nodeWidth: o.nodeWidth ?? "depth",
+        highlight,
+        axis,
+        referenceRamp,
+        deletions: new Map(deletions.map((d) => [d.edgeIndex, d.bypassed])),
+        hiddenEdges: new Set(
+          o.showDeletionEdges ? [] : deletions.map((d) => d.edgeIndex)
+        )
+      })
+    );
+    renderer.updateTransform({
+      scaleX: axis.scaleX,
+      scaleY: axis.scaleY,
+      translateX: fit.translateX,
+      translateY: fit.translateY,
+      dpr: 1
+    });
+    renderer.render([1, 1, 1, 1]);
+    return markup();
+  }
+  const parts = [];
+  let height;
+  if (panels) {
+    const place = facetCells(
+      panels.map((p) => p.walks[0].name),
+      by
+    );
+    const grid = facetGrid({
+      count: place.count,
+      bounds,
+      pixelRows,
+      width,
+      room,
+      columns: place.columns ?? o.columns
+    });
+    panels.forEach((panel, i) => {
+      const cell = place.cells[i];
+      const x = cell % grid.columns * (grid.width + FACET_GAP_PX);
+      const y = Math.floor(cell / grid.columns) * (grid.height + FACET_TITLE_PX + FACET_GAP_PX);
+      const walk = panel.walks[0];
+      parts.push(
+        walkKeySvg(`key${i}`, x + 6, y + 2, walk, labelOf2(walk.name), reference).markup,
+        `<svg x="${x}" y="${y + FACET_TITLE_PX}" width="${grid.width}" height="${grid.height}">${drawing(panel, grid.width, grid.height)}</svg>`
+      );
+    });
+    height = grid.total;
+  } else {
+    let x = 6;
+    const push = (key) => {
+      parts.push(key.markup);
+      x += key.width + KEY_GAP_PX;
+    };
+    if (lift) {
+      lift.walks.forEach((walk, i) => {
+        push(walkKeySvg(`key${i}`, x, 2, walk, labelOf2(walk.name), reference));
+      });
+      push(
+        keySvg(
+          "faded",
+          x,
+          2,
+          [{ offset: 0, color: FADED }],
+          "",
+          `not on ${lift.walks.length === 1 ? labelOf2(lift.walks[0].name) : "these walks"}`,
+          void 0,
+          0.3
+        )
+      );
+    } else if (referenceRamp) {
+      push(
+        keySvg(
+          "ramp",
+          x,
+          2,
+          encodingStops({ field: "reference", scheme: "rainbow" }),
+          "Reference position",
+          "",
+          rangeText(
+            region?.refName,
+            referenceRamp.start,
+            referenceRamp.start + referenceRamp.span
+          )
+        )
+      );
+    }
+    const header = parts.length > 0 ? FACET_TITLE_PX : 0;
+    const usable = width - 2 * FIT_PADDING;
+    const drawn = pixelRows || !(bounds.w > 0) ? bounds.h : bounds.h * usable / bounds.w;
+    const h = Math.max(
+      160,
+      Math.min(room - header, Math.ceil(drawn + 2 * FIT_PADDING))
+    );
+    parts.push(
+      `<svg y="${header}" width="${width}" height="${h}">${drawing(lift, width, h)}</svg>`
+    );
+    height = header + h;
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${o.metadata ? `<metadata>${esc(o.metadata)}</metadata>` : ""}<rect width="${width}" height="${height}" fill="#fff"/>${parts.join("")}</svg>
+`;
+}
+
+// src/reference.ts
+var WELL_KNOWN_SAMPLES = /* @__PURE__ */ new Map([
+  ["hg38", "GRCh38"],
+  ["hg19", "GRCh37"],
+  ["hs1", "CHM13"],
+  ["t2t-chm13", "CHM13"],
+  ["chm13v2", "CHM13"]
+]);
+function wellKnownSample(assemblyName) {
+  return WELL_KNOWN_SAMPLES.get(assemblyName.toLowerCase());
+}
+function sampleOf2(refName) {
+  const sample = refName.includes("#") ? panSNSample(refName) : void 0;
+  return sample === void 0 || isGenericSample(sample) ? void 0 : sample;
+}
+function haplotypeOf(refName) {
+  return panSNHaplotype(refName) ?? panSNSample(refName);
+}
+function graphHaplotypes(graph) {
+  const refNames = new Set((graph.anchorPaths ?? []).map((p) => p.name));
+  for (const node of graph.nodes) {
+    if (node.stable) {
+      refNames.add(node.stable.refName);
+    }
+  }
+  const bySample = /* @__PURE__ */ new Map();
+  for (const refName of refNames) {
+    const sample = sampleOf2(refName);
+    if (sample !== void 0) {
+      const haplotypes = bySample.get(sample) ?? bySample.set(sample, /* @__PURE__ */ new Set()).get(sample);
+      haplotypes.add(haplotypeOf(refName));
+    }
+  }
+  return bySample;
+}
+function backboneFrom(contigs, haplotypes) {
+  const samples = new Set(contigs.map((c) => sampleOf2(c.refName)));
+  const [sample] = samples;
+  if (samples.size !== 1 || sample === void 0) {
+    return { contigs, prefixes: [], named: false };
+  }
+  const own = new Set(contigs.map((c) => haplotypeOf(c.refName)));
+  const unique = [...haplotypes.get(sample) ?? []].every((h) => own.has(h));
+  const shared = new Set(contigs.map((c) => panSNHaplotype(c.refName)));
+  const [haplotype] = shared;
+  return {
+    contigs,
+    prefixes: [
+      ...unique ? [sample] : [],
+      ...shared.size === 1 && haplotype ? [haplotype] : []
+    ],
+    named: true
+  };
+}
+function graphBackbone(graph) {
+  const spans = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    if (isBackbone(node)) {
+      const { refName, start } = node.stable;
+      const end = start + node.length;
+      const span = spans.get(refName);
+      if (span) {
+        span.start = Math.min(span.start, start);
+        span.end = Math.max(span.end, end);
+      } else {
+        spans.set(refName, {
+          refName,
+          contig: panSNContig(refName),
+          start,
+          end
+        });
+      }
+    }
+  }
+  const contigs = [...spans.values()];
+  return contigs.length ? backboneFrom(contigs, graphHaplotypes(graph)) : void 0;
+}
+function backboneAssembly(backbone, assemblies) {
+  const names = (a) => [a.name, ...a.aliases ?? []];
+  const naming = (prefix) => (a) => names(a).some((n2) => n2.toLowerCase() === prefix.toLowerCase());
+  const prefixes = [...backbone?.prefixes ?? []].reverse();
+  const sample = backbone?.prefixes.find((p) => !p.includes("#"))?.toLowerCase();
+  for (const prefix of prefixes) {
+    const assembly = assemblies.find(naming(prefix));
+    if (assembly) {
+      return assembly;
+    }
+  }
+  return sample === void 0 ? void 0 : assemblies.find(
+    (a) => names(a).some((n2) => wellKnownSample(n2)?.toLowerCase() === sample)
+  );
+}
+function assemblyWalk(graph, assembly) {
+  const haplotypes = graphHaplotypes(graph);
+  return graph.anchorPaths?.find(
+    (walk) => backboneAssembly(
+      backboneFrom(
+        [
+          {
+            refName: walk.name,
+            contig: panSNContig(walk.name),
+            start: walk.start,
+            end: walk.start + walk.length
+          }
+        ],
+        haplotypes
+      ),
+      [assembly]
+    )
+  );
+}
+function refNameBinding(refNames) {
+  const exact = new Set(refNames);
+  const byContig = /* @__PURE__ */ new Map();
+  for (const refName of exact) {
+    const contig = panSNContig(refName);
+    byContig.set(contig, byContig.has(contig) ? void 0 : refName);
+  }
+  return (name) => exact.has(name) ? name : byContig.get(name);
+}
+function featuresOnBackbone(features, backbone) {
+  const bind = refNameBinding(backbone.contigs.map((c) => c.refName));
+  return features.flatMap((f) => {
+    const refName = bind(f.refName);
+    return refName === void 0 ? [] : [refName === f.refName ? f : { ...f, refName }];
+  });
+}
+
+// src/gbzWindow.ts
+var NoReferenceSampleError = class extends Error {
+  constructor(anchor, referenceSamples) {
+    super(
+      referenceSamples.length === 0 ? `the graph names no reference sample (gbwt_reference_samples) and the anchor "${anchor}" maps to none; set referenceSample` : `the anchor "${anchor}" is none of the graph's reference samples (${referenceSamples.join(", ")}); set referenceSample or map it through assemblyNameToPanSN`
+    );
+    this.name = "NoReferenceSampleError";
+  }
+};
+var NodeLimitError = class extends Error {
+  constructor(limit, windowBp, fitsBp) {
+    super(
+      `this ${windowBp.toLocaleString()} bp window reads more than nodeLimit (${limit.toLocaleString()}) graph nodes; zoom in to about ${fitsBp.toLocaleString()} bp or raise nodeLimit`
+    );
+    this.name = "NodeLimitError";
+  }
+};
+function haplotypePrefix(name) {
+  return `${name.sample}#${name.haplotype}`;
+}
+function haplotypeWanted(name, wanted) {
+  const prefix = haplotypePrefix(name);
+  return wanted === void 0 || wanted.some((candidate) => panSNMatchesPrefix(prefix, candidate));
+}
+async function referenceSamplesOf(db) {
+  return (await db.tag("gbwt_reference_samples") ?? "").split(/\s+/).filter((sample) => sample !== "");
+}
+function aliasedSample(anchorSample, referenceSamples) {
+  const lower = anchorSample.toLowerCase();
+  const alias = wellKnownSample(anchorSample)?.toLowerCase();
+  return referenceSamples.find((s) => s === anchorSample) ?? referenceSamples.find((s) => s.toLowerCase() === lower) ?? referenceSamples.find((s) => s.toLowerCase() === alias);
+}
+function resolveReferenceSample({
+  configured,
+  anchorPrefix,
+  referenceSamples
+}) {
+  if (configured !== "") {
+    return configured;
+  }
+  const sample = aliasedSample(panSNSample(anchorPrefix), referenceSamples) ?? (referenceSamples.length === 1 ? referenceSamples[0] : void 0);
+  if (sample === void 0) {
+    throw new NoReferenceSampleError(anchorPrefix, referenceSamples);
+  }
+  return sample;
+}
+async function referencePathQuery(db, referenceSample, refName) {
+  const path = (await db.paths()).find(
+    (p) => p.isIndexed && p.name.sample === referenceSample && p.name.contig === refName
+  );
+  return path ? {
+    sample: path.name.sample,
+    contig: refName,
+    haplotype: path.name.haplotype
+  } : void 0;
+}
+function nodeLimitError(error, limit, windowBp) {
+  const isLimit = error instanceof Error && (error.name === "SubgraphLimitError" || /^Subgraph size limit of \d+ nodes exceeded/.test(error.message));
+  if (!isLimit) {
+    return void 0;
+  } else {
+    const walked = error.walkedBp;
+    const fits = typeof walked === "number" && walked > 0 ? Math.floor(walked * 0.8) : Math.floor(windowBp / 2);
+    return new NodeLimitError(limit, windowBp, Math.max(fits, 1));
+  }
+}
+async function cutWindowGFA(db, query, start, end, { keep, ...opts }) {
+  const subgraph = query ? await db.getSubgraphForRange(query, start, end, {
+    ...opts,
+    haplotypes: "all",
+    ...keep === void 0 ? {} : { keep }
+  }).catch((error) => {
+    throw nodeLimitError(error, opts.limit, end - start) ?? error;
+  }) : void 0;
+  return subgraph ? subgraph.toGFA({ names: "resolved" }) : "";
+}
+
+// src/loadBandage.ts
+var cached;
+function loadBandage() {
+  cached ??= import("./bandage-layout-3AR6BCUD.js").then((mod) => mod.default()).catch((e) => {
+    cached = void 0;
+    throw e;
+  });
+  return cached;
+}
+
+export {
+  isBackbone,
+  firstNodeAtOrAfter,
+  BUBBLE_SPREADS,
+  panSNSample,
+  panSNHaplotype,
+  panSNContig,
+  polylineSlice,
+  loadGraph,
+  engineRequest,
+  engineKey,
+  forceLayout,
+  layoutExtent,
+  FIT_PADDING,
+  clampZoom,
+  fitTransform,
+  drawingBounds,
+  ROW_HEIGHT_PX,
+  referenceOrder,
+  pathColorsLegible,
+  pathLegend,
+  walkRows,
+  walkRowsExtent,
+  FORCE_LAYOUT_LABEL,
+  LAYOUT_MODES,
+  modeUsesLayoutEngine,
+  layoutModeByValue,
+  COLOR_SCHEMES,
+  resolveColorScheme,
+  NODE_WIDTHS,
+  meanDepth,
+  nodeWidthPx,
+  maxNodeWidthPx,
+  nodeInk,
+  fadeAbgr,
+  svgPath,
+  curveBounds,
+  translateCurves,
+  yToXOf,
+  pathRibbonOffsets,
+  deletionEdges,
+  baseEdgeCurves,
+  LIFT_BACKDROP_COLOR,
+  FADED_ALPHA,
+  REFERENCE_RAMP_MAX_HUE,
+  computeReferenceRamp,
+  computeColorSchemeRange,
+  getNodeColor,
+  buildGeometry,
+  Canvas2DRenderer,
+  LABEL_PX,
+  LABEL_CHAR_PX,
+  LABEL_PAD,
+  occupancy,
+  placeLabels,
+  rowLabelBox,
+  formatBp,
+  sizeLabelCandidates,
+  nodeLabelBudget,
+  placeSizeLabels,
+  WALK_FIELDS,
+  WALK_SCHEMES,
+  resolveEncoding,
+  schemeCss,
+  encodingStops,
+  encodingSwatchCss,
+  walkHighlight,
+  walkLift,
+  facetLifts,
+  rangeText,
+  walkKey,
+  FACET_GAP_PX,
+  FACET_TITLE_PX,
+  FACET_PAD_PX,
+  facetGrid,
+  facetCells,
+  svgCanvas,
+  axisScaleOf,
+  viewportOf,
+  padded,
+  contains,
+  zoomAbout,
+  screenToLayout,
+  figureSvg,
+  WELL_KNOWN_SAMPLES,
+  wellKnownSample,
+  graphBackbone,
+  backboneAssembly,
+  assemblyWalk,
+  refNameBinding,
+  featuresOnBackbone,
+  haplotypeWanted,
+  referenceSamplesOf,
+  resolveReferenceSample,
+  referencePathQuery,
+  cutWindowGFA,
+  loadBandage
+};