@jbrowse/bandage-core 4.2.0 → 4.4.0

package/dist/chunks/{chunk-FPBV6GNR.js → chunk-YNLMROBC.js}

@@ -69,6 +69,13 @@ function layoutScaling(graph, spread = PROPORTIONAL_SPREAD) {
     }
   };
 }
+function drawnLengthOf(graph, spread = PROPORTIONAL_SPREAD) {
+  if (isProportional(spread.law)) {
+    const opts = bandageAutoScale(graph, spread.minNodeLength);
+    return (bp) => drawnNodeLength(opts, bp);
+  }
+  return drawnLengthFor(graph, spread.law);
+}
 
 // src/bubbleSpreads.ts
 var BUBBLE_SPREADS = [
@@ -110,26 +117,8 @@ function spreadFor(spread) {
   };
 }
 
-// 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/layout/rowSpacing.ts
+var ROW_HEIGHT_PX = 20;
 
 // src/anchoredNodes.ts
 var REFERENCE_RANK = 0;
@@ -184,341 +173,924 @@ 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;
-    }
-  }
+// 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 parseTags(fields) {
-  const tags = {};
-  for (const field of fields) {
-    parseTag(field, tags);
+function projectLine(x1, y1, x2, y2, distance) {
+  const d = Math.hypot(y2 - y1, x2 - x1);
+  if (d === 0) {
+    return [x2, y2];
   }
-  return tags;
+  const vx = (x2 - x1) / d;
+  const vy = (y2 - y1) / d;
+  return [x2 + distance * vx, y2 + distance * vy];
 }
-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;
+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
+  };
 }
-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;
-    }
+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);
   }
-  push(body.length);
-  return segments;
+  return { minX, minY, maxX, maxY };
 }
-function parseGFA(file) {
-  const graph = {
-    nodes: [],
-    links: [],
-    paths: [],
-    walks: [],
-    header: [],
-    id: ""
+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
   };
-  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 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 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]);
+function dashCurves(curves, dashWorld) {
+  const lengths = curves.map(
+    (c) => 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 total = lengths.reduce((a, b) => a + b, 0);
+  const spans = Math.max(3, Math.round(total / dashWorld) | 1);
+  const out = [];
+  for (let i = 0; i < spans; i += 2) {
+    const from = i / spans * total;
+    const to = (i + 1) / spans * total;
+    const dash = [];
+    let start = 0;
+    curves.forEach((c, k) => {
+      const length = lengths[k];
+      const end = start + length;
+      if (length > 0 && end > from && start < to) {
+        dash.push(
+          subCurve(
+            c,
+            Math.max(0, (from - start) / length),
+            Math.min(1, (to - start) / length)
+          )
+        );
       }
-      pos += lengthOf(step.id);
-    }
-    anchorPaths.push({
-      name: path.name,
-      sample,
-      start: path.start,
-      length: pos - path.start
+      start = end;
     });
+    if (dash.length) {
+      out.push(dash);
+    }
   }
-  return { anchorPaths, pathVisits };
-}
-function chooseReferencePath(anchorPaths, preferred) {
-  const named = anchorPaths.find(
-    (p) => p.sample === preferred || p.name === preferred
-  );
-  return named ?? anchorPaths[0];
+  return out;
 }
-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()
+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 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;
+  return out;
 }
-function anchorGraph(graph, preferred) {
-  return graph.anchoredBy === "tags" ? graph : anchorFromPaths(graph, preferred);
+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] };
 }
-function trimOrigins(graph, kept) {
-  if (!graph.anchorPaths) {
-    return void 0;
+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);
   }
-  const lengthOf = new Map(graph.nodes.map((n2) => [n2.id, n2.length]));
-  const bp = (ids, end = ids.length) => {
-    let sum = 0;
-    for (let i = 0; i < end; i++) {
-      sum += lengthOf.get(ids[i]) ?? 0;
-    }
-    return sum;
+  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")
   };
-  const byOrigin = /* @__PURE__ */ new Map();
-  for (const path of graph.paths ?? []) {
-    const origin = pathOrigin(path.name).name;
-    byOrigin.set(origin, [...byOrigin.get(origin) ?? [], path]);
-  }
-  return graph.anchorPaths.map((o) => {
-    const pieces = byOrigin.get(o.name);
-    const path = pieces?.length === 1 ? pieces[0] : void 0;
-    const stretch = path && kept.get(path.name);
-    return path && stretch ? {
-      ...o,
-      start: o.start + bp(path.nodeIds, stretch.first),
-      length: bp(stretch.nodeIds)
-    } : o;
-  });
 }
-
-// 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 === "-" ? "-" : "+");
+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);
   }
-  return { canonical, traversals };
+  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;
 }
-var walkStart = (w) => w.start === -1 ? 0 : w.start;
-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}`,
-      start: walkStart(w),
-      steps: w.segments.map((s) => ({
-        id: s.id,
-        strand: s.strand === "-" ? "-" : "+"
-      }))
-    }))
-  ];
+function yToXOf({ scaleX, scaleY }) {
+  return scaleY / scaleX;
 }
-function carriedSamples(gfaNode) {
-  const sm = gfaNode.tags.SM;
-  if (typeof sm !== "string") {
-    return void 0;
+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 });
   }
-  const samples = sm.split(",").map((s) => s.trim()).filter(Boolean);
-  return samples.length > 0 ? samples : void 0;
+  return offsets;
 }
-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 scaleYOf(points, yToX) {
+  return points.map((p) => ({ x: p.x, y: p.y * yToX }));
 }
-function makeNode(gfaNode, strand, depth) {
-  return {
-    id: `${gfaNode.id}${strand}`,
-    name: gfaNode.id,
-    length: gfaNode.length,
-    depth,
-    stable: stableCoordinate(gfaNode),
-    samples: carriedSamples(gfaNode)
-  };
+function unscaleYOf(curves, yToX) {
+  for (const c of curves) {
+    c.y0 /= yToX;
+    c.cy0 /= yToX;
+    c.cy1 /= yToX;
+    c.y1 /= yToX;
+  }
+  return curves;
 }
-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));
+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
+    );
   }
-  for (const link of gfaGraph.links) {
-    edges.push({
-      from: nodeId(link.source),
-      to: nodeId(link.target),
-      fromStrand: link.strand1 === "-" ? "-" : "+",
-      toStrand: link.strand2 === "-" ? "-" : "+"
-    });
+  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;
   }
-  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);
-    }
+  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
+      }
+    ];
+  }
+}
+function nearerEnd(segments, to) {
+  const start = segments[0];
+  const end = segments.at(-1);
+  return Math.hypot(start.x - to.x, start.y - to.y) < Math.hypot(end.x - to.x, end.y - to.y) ? "start" : "end";
+}
+function routedEdgeCurves(fromSegments, toSegments, route) {
+  const fromAttach = attachment(
+    fromSegments,
+    nearerEnd(fromSegments, route[0])
+  );
+  const toAttach = attachment(toSegments, nearerEnd(toSegments, route.at(-1)));
+  const points = [fromAttach.at, ...route, toAttach.at];
+  const tangent = (i) => {
+    const p = points[i];
+    const span = (q) => Math.hypot(q.x - p.x, q.y - p.y);
+    const along = (inward, next) => {
+      const len = inward ? span(inward) : 0;
+      const reach = span(next);
+      return len === 0 ? { x: next.x - p.x, y: next.y - p.y } : {
+        x: (p.x - inward.x) / len * reach,
+        y: (p.y - inward.y) / len * reach
+      };
+    };
+    if (i === 0) {
+      return along(fromAttach.inward, points[1]);
+    }
+    if (i === points.length - 1) {
+      const out = along(toAttach.inward, points[i - 1]);
+      return { x: -out.x, y: -out.y };
+    }
+    return {
+      x: (points[i + 1].x - points[i - 1].x) / 2,
+      y: (points[i + 1].y - points[i - 1].y) / 2
+    };
+  };
+  const curves = [];
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    const ta = tangent(i);
+    const tb = tangent(i + 1);
+    curves.push({
+      x0: a.x,
+      y0: a.y,
+      cx0: a.x + ta.x / 3,
+      cy0: a.y + ta.y / 3,
+      cx1: b.x - tb.x / 3,
+      cy1: b.y - tb.y / 3,
+      x1: b.x,
+      y1: b.y
+    });
+  }
+  return curves;
+}
+
+// src/deletionEdges.ts
+var MIN_DELETION_BP = 1;
+function bypassedPoints(nodePositions, bypassed) {
+  return bypassed.flatMap((id) => nodePositions[id] ?? []);
+}
+function deletionArcCurves(nodePositions, deletion, axis, route) {
+  const from = nodePositions[deletion.from];
+  const to = nodePositions[deletion.to];
+  if (!from?.length || !to?.length) {
+    return void 0;
+  }
+  return route ? routedEdgeCurves(from, to, route) : computeEdgeCurves(
+    from,
+    to,
+    deletion.from === deletion.to,
+    0,
+    0,
+    axis,
+    bypassedPoints(nodePositions, deletion.bypassed)
+  );
+}
+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_BP && 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/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/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);
+}
+function trimOrigins(graph, kept) {
+  if (!graph.anchorPaths) {
+    return void 0;
+  }
+  const lengthOf = new Map(graph.nodes.map((n2) => [n2.id, n2.length]));
+  const bp = (ids, end = ids.length) => {
+    let sum = 0;
+    for (let i = 0; i < end; i++) {
+      sum += lengthOf.get(ids[i]) ?? 0;
+    }
+    return sum;
+  };
+  const byOrigin = /* @__PURE__ */ new Map();
+  for (const path of graph.paths ?? []) {
+    const origin = pathOrigin(path.name).name;
+    byOrigin.set(origin, [...byOrigin.get(origin) ?? [], path]);
+  }
+  return graph.anchorPaths.map((o) => {
+    const pieces = byOrigin.get(o.name);
+    const path = pieces?.length === 1 ? pieces[0] : void 0;
+    const stretch = path && kept.get(path.name);
+    return path && stretch ? {
+      ...o,
+      start: o.start + bp(path.nodeIds, stretch.first),
+      length: bp(stretch.nodeIds)
+    } : o;
+  });
+}
+
+// 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 };
+}
+var walkStart = (w) => w.start === -1 ? 0 : w.start;
+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}`,
+      start: walkStart(w),
+      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)));
@@ -559,991 +1131,603 @@ function convertGFAToGraph(gfaGraph, name = "Imported GFA") {
     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;
+    anchoredBy: nodes.some((n2) => n2.stable) ? "tags" : void 0
+  };
 }
 
-// src/layout/orientToReference.ts
-function orientToReference(graph, positions) {
-  const backbone = graph.nodes.filter(
-    (node) => isBackbone(node) && (positions[node.id]?.length ?? 0) > 0
+// src/layout/deletionRoutes.ts
+var ROUTE_ID = "\0deletion:";
+var ROUTE_FRACTION = 0.5;
+function withDeletionRoutes(graph, deletions) {
+  const routes = new Map(
+    deletions.map((d) => [d.edgeIndex, `${ROUTE_ID}${d.edgeIndex}`])
   );
-  if (backbone.length < 2) {
-    return positions;
-  }
-  const points = backbone.map((node) => {
-    const segments = positions[node.id];
-    const mid = segments[Math.floor(segments.length / 2)];
+  const edges = [];
+  graph.edges.forEach((edge, ei) => {
+    const id = routes.get(ei);
+    if (id === void 0) {
+      edges.push(edge);
+    } else {
+      const { fromStrand, toStrand } = edge;
+      edges.push(
+        { from: edge.from, to: id, ...fromStrand ? { fromStrand } : {} },
+        { from: id, to: edge.to, ...toStrand ? { toStrand } : {} }
+      );
+    }
+  });
+  return {
+    graph: {
+      ...graph,
+      nodes: [
+        ...graph.nodes,
+        ...[...routes.values()].map((id) => ({
+          id,
+          name: id,
+          length: 0,
+          depth: 0
+        }))
+      ],
+      edges
+    },
+    routes,
+    ids: new Set(routes.values())
+  };
+}
+function routeNodes(graph, deletions, routes, drawnOf, opts) {
+  const lengths = new Map(graph.nodes.map((n2) => [n2.id, n2.length]));
+  return deletions.map((d) => {
+    const skipped = d.bypassed.reduce(
+      (sum, id2) => sum + (lengths.get(id2) ?? 0),
+      0
+    );
+    const drawn = Math.max(
+      opts.minimumNodeLength,
+      drawnOf(skipped) * ROUTE_FRACTION
+    );
+    const id = routes.get(d.edgeIndex);
     return {
-      x: mid.x,
-      y: mid.y,
-      r: node.stable.start + node.length / 2,
-      w: node.length
+      id,
+      name: id,
+      length: Math.round(drawn * 1e6 / opts.nodeLengthPerMegabase),
+      depth: 0
     };
   });
-  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;
-      }
+}
+function takeRoutes(positions, routes) {
+  const nodePositions = { ...positions };
+  const deletionRoutes = {};
+  for (const [edgeIndex, id] of routes) {
+    const route = nodePositions[id];
+    delete nodePositions[id];
+    if (route?.length) {
+      deletionRoutes[edgeIndex] = route;
     }
   }
-  return out;
+  return { nodePositions, deletionRoutes };
 }
 
-// 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);
+// 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, alone = /* @__PURE__ */ new Set()) {
+  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(to);
+      list.push(ei);
     } else {
-      neighbors.set(from, [to]);
+      at.set(key, [ei]);
     }
-  }
-  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);
-            }
-          }
-        }
-      }
+  };
+  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;
     }
-    frontier = next;
-  }
-  return minEnd === Infinity ? void 0 : {
-    start: Math.min(minEnd, maxStart),
-    end: Math.max(minEnd, maxStart)
+    const ei = out[0];
+    const edge = graph.edges[ei];
+    return edge.from === a && edge.to !== a && !alone.has(a) && !alone.has(edge.to) && sides[ei].from === "end" && sides[ei].to === "start" && at.get(`${edge.to}|start`)?.length === 1 ? ei : void 0;
   };
-}
-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();
+  const joined = /* @__PURE__ */ new Set();
+  const runOf = /* @__PURE__ */ new Map();
+  const runs = /* @__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);
+    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;
     }
-  }
-  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;
+    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;
       }
-      depth.set(neighbour, next);
-      seeds.set(neighbour, { x: at.x + drawnOf(id) / 2, y: LANE_GAP * next });
-      queue.push(neighbour);
+      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);
     }
   }
-  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
-      });
+    if (!runOf.has(node.id)) {
+      runOf.set(node.id, node.id);
     }
   }
-  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.`
-    );
+  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
+    });
   }
-  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 } : {}
+  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;
     }
-  };
-}
-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
-  );
+    seen.add(key);
+    edges.push({
+      from,
+      to,
+      ...side.from === "start" ? { fromStrand: flip(ownStrand(from)) } : {},
+      ...side.to === "end" ? { toStrand: flip(ownStrand(to)) } : {}
+    });
+  });
   return {
-    result: {
-      ...result,
-      nodePositions: graph.nodes.some(isBackbone) ? orientToReference(graph, positions) : positions
-    },
-    duration
+    graph: { ...graph, nodes, edges, paths: void 0, pathVisits: void 0 },
+    runs
   };
 }
-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);
+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 { minX, minY, maxX, maxY };
+  return out;
 }
-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 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 fittedTranslateY(bounds, usableHeight, yScale, padTop = FIT_PADDING) {
-  const leftoverY = usableHeight - bounds.h * yScale;
-  return padTop - bounds.minY * yScale + Math.max(0, leftoverY) / 2;
+function polylineMidpoint(line) {
+  const arc = arcPrefix(line);
+  return pointAt(line, arc, arc.at(-1) / 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;
+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)
+    );
   }
-  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
-    )
-  };
+  return arc;
 }
-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);
+function pointAt(line, arc, s) {
+  if (s <= 0) {
+    return { ...line[0] };
   }
-  return { minX, minY, w: maxX - minX, h: maxY - minY };
-}
-
-// src/layout/rowSpacing.ts
-var ROW_HEIGHT_PX = 20;
-
-// 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];
+  let i = 1;
+  while (i < arc.length && arc[i] < s) {
+    i++;
   }
-  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);
+  if (i >= arc.length) {
+    return { ...line.at(-1) };
   }
-  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)
-  };
+  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 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)]);
+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] });
     }
   }
-  return out;
+  points.push(pointAt(line, arc, to));
+  return points;
 }
-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
+
+// 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;
 }
-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);
+
+// 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]);
+    }
   }
-  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")
-  };
+  for (const edge of graph.edges) {
+    add(edge.from, edge.to);
+    add(edge.to, edge.from);
+  }
+  return neighbors;
 }
-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;
+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);
+            }
+          }
+        }
+      }
     }
-    const along = dx * ux + dy * uy;
-    minAlong = Math.min(minAlong, along);
-    maxAlong = Math.max(maxAlong, along);
+    frontier = next;
   }
-  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;
+  return minEnd === Infinity ? void 0 : {
+    start: Math.min(minEnd, maxStart),
+    end: Math.max(minEnd, maxStart)
+  };
 }
-function yToXOf({ scaleX, scaleY }) {
-  return scaleY / scaleX;
+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 });
 }
-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 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;
 }
-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 });
+
+// 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;
   }
-  return offsets;
+  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 scaleYOf(points, yToX) {
-  return points.map((p) => ({ x: p.x, y: p.y * yToX }));
+function seededNodes(graph, scaling) {
+  const seeds = referenceSeeds(graph, scaling);
+  return scaling.nodes.map((node) => ({ ...node, ...seeds.get(node.id) }));
 }
-function unscaleYOf(curves, yToX) {
-  for (const c of curves) {
-    c.y0 /= yToX;
-    c.cy0 /= yToX;
-    c.cy1 /= yToX;
-    c.y1 /= yToX;
+
+// 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}`);
   }
-  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
+  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.`
     );
   }
-  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;
+  return graph;
 }
-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
+function engineRequest(graph, scaling, settings) {
+  const anchored = graph.nodes.some(isBackbone);
+  return {
+    graph: {
+      nodes: anchored ? seededNodes(graph, scaling) : scaling.nodes,
+      edges: graph.edges
     },
-    {
-      x0: apexX,
-      y0: apexY,
-      cx0: apexX - sideX,
-      cy0: apexY - sideY,
-      cx1: nearX,
-      cy1: nearY,
-      x1: px,
-      y1: py
+    options: {
+      quality: settings.quality,
+      linearLayout: settings.linearLayout,
+      ...scaling.opts,
+      ...anchored ? { rotateComponents: false } : {}
     }
-  ];
+  };
 }
-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 [
+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 deletions = deletionEdges(graph);
+  const routed = withDeletionRoutes(graph, deletions);
+  const merged = mergeRuns(routed.graph, routed.ids);
+  const runs = {
+    ...merged.graph,
+    nodes: merged.graph.nodes.filter((n2) => !routed.ids.has(n2.id))
+  };
+  const engineScaling = layoutScaling(runs, spread);
+  const { result, duration } = await engine(
+    engineRequest(
+      merged.graph,
       {
-        x0: p1x,
-        y0: p1y,
-        cx0: cp1x,
-        cy0: cp1y,
-        cx1: cp1x + perpX * ext,
-        cy1: cp1y + perpY * ext,
-        x1: midX,
-        y1: midY
+        ...engineScaling,
+        nodes: [
+          ...engineScaling.nodes,
+          ...routeNodes(
+            graph,
+            deletions,
+            routed.routes,
+            drawnLengthOf(runs, spread),
+            engineScaling.opts
+          )
+        ]
       },
-      {
-        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_BP = 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;
+      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
+  );
+  const { nodePositions, deletionRoutes } = takeRoutes(
+    graph.nodes.some(isBackbone) ? orientToReference(graph, positions) : positions,
+    routed.routes
+  );
+  return {
+    result: {
+      ...result,
+      nodePositions,
+      ...deletions.length ? { deletionRoutes, extent: layoutExtent(deletionRoutes) } : {}
+    },
+    duration
+  };
 }
-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]);
-      }
+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);
     }
   }
-  for (const list of bySequence.values()) {
-    list.sort((a, b) => a.stable.start - b.stable.start);
-  }
-  return bySequence;
+  return { minX, minY, maxX, maxY };
 }
-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;
+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 skipsBetween(edge, from, to, forwards) {
-  const { fromStrand, toStrand } = edge;
-  if (fromStrand === void 0 || toStrand === void 0) {
-    return true;
+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 leavesRight = fromStrand === (from.stable.strand ?? "+");
-  const arrivesLeft = toStrand === (to.stable.strand ?? "+");
-  return forwards ? leavesRight && arrivesLeft : !leavesRight && !arrivesLeft;
+  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 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_BP && 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)
-        });
-      }
-    }
+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;
   }
-  return found;
+  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/overlayLabels.ts
@@ -1704,15 +1888,20 @@ function labelOrder(nodePositions, nodeLengths) {
   return order;
 }
 var arcCache = /* @__PURE__ */ new WeakMap();
-function arcPlacements(nodePositions, deletions, axis, version2) {
+function arcPlacements(nodePositions, deletions, axis, version2, routes) {
   const { scaleX, scaleY } = axis;
   const cached2 = arcCache.get(nodePositions);
-  if (cached2?.deletions === deletions && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.version === version2) {
+  if (cached2?.deletions === deletions && cached2.routes === routes && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.version === version2) {
     return cached2.arcs;
   }
   const arcs = [];
   for (const deletion of [...deletions].sort((a, b) => b.bp - a.bp)) {
-    const curves = deletionArcCurves(nodePositions, deletion, axis);
+    const curves = deletionArcCurves(
+      nodePositions,
+      deletion,
+      axis,
+      routes?.[deletion.edgeIndex]
+    );
     const apex = curves ? curveMidpoint(curves) : void 0;
     if (curves && apex) {
       const { minX, minY, maxX, maxY } = curveBounds(curves);
@@ -1725,13 +1914,21 @@ function arcPlacements(nodePositions, deletions, axis, version2) {
       });
     }
   }
-  arcCache.set(nodePositions, { deletions, scaleX, scaleY, version: version2, arcs });
+  arcCache.set(nodePositions, {
+    deletions,
+    routes,
+    scaleX,
+    scaleY,
+    version: version2,
+    arcs
+  });
   return arcs;
 }
 function sizeLabelCandidates({
   nodePositions,
   nodeLengths,
   deletions,
+  deletionRoutes,
   alleleDeletions,
   axis,
   translateX,
@@ -1747,7 +1944,8 @@ function sizeLabelCandidates({
     nodePositions,
     deletions,
     axis,
-    version2
+    version2,
+    deletionRoutes
   )) {
     if (extent >= MIN_DELETION_LABEL_PX) {
       const text = deletionText(deletion.bp);
@@ -3262,10 +3460,10 @@ function brightenAbgr(c, factor) {
 
 // src/util/edgeCurves.ts
 var cache = /* @__PURE__ */ new WeakMap();
-function baseEdgeCurves(nodePositions, graph, axis, deletions, version2) {
+function baseEdgeCurves(nodePositions, graph, axis, deletions, version2, routes) {
   const { scaleX, scaleY } = axis;
   const cached2 = cache.get(nodePositions);
-  if (cached2?.graph === graph && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.deletions === deletions && cached2.version === version2) {
+  if (cached2?.graph === graph && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.deletions === deletions && cached2.routes === routes && cached2.version === version2) {
     return cached2.curves;
   }
   const curves = /* @__PURE__ */ new Map();
@@ -3275,9 +3473,10 @@ function baseEdgeCurves(nodePositions, graph, axis, deletions, version2) {
     const to = nodePositions[edge.to];
     if (from?.length && to?.length) {
       const bypassed = deletions?.get(ei);
+      const route = bypassed && routes?.[ei];
       curves.set(
         ei,
-        computeEdgeCurves(
+        route ? routedEdgeCurves(from, to, route) : computeEdgeCurves(
           from,
           to,
           selfLinkOf(edge),
@@ -3294,6 +3493,7 @@ function baseEdgeCurves(nodePositions, graph, axis, deletions, version2) {
     scaleX,
     scaleY,
     deletions,
+    routes,
     version: version2,
     curves
   });
@@ -3758,6 +3958,7 @@ function buildGeometry(options) {
     viewportBounds,
     referenceRamp,
     deletions,
+    deletionRoutes,
     hiddenEdges,
     version: version2 = 0
   } = options;
@@ -3769,7 +3970,8 @@ function buildGeometry(options) {
     graph,
     axis,
     deletions,
-    version2
+    version2,
+    deletionRoutes
   );
   const nodeStrokes = [];
   const nodeStrokeRuns = /* @__PURE__ */ new Map();
@@ -4724,6 +4926,7 @@ function layoutLabels(m) {
     nodePositions: m.nodePositions,
     nodeLengths: m.nodeLengths,
     deletions: m.showDeletionEdges ? m.deletions : [],
+    deletionRoutes: m.deletionRoutes,
     alleleDeletions: m.alleleDeletions,
     axis: m.axisScale,
     translateX,
@@ -4872,7 +5075,16 @@ function placeRowGenes(rows, byRow) {
 }
 var GENE_FONT_PX = 9;
 var GENE_CHAR_PX = 5.2;
-function rowGeneBoxes(genes, X, y) {
+var MIN_LETTERED_BAR_PX = 8;
+var genePad = (rowPx, barPx) => Math.min(2, (rowPx - barPx) / 2 - 1);
+function boxesGenes(rowPx, barPx) {
+  return genePad(rowPx, barPx) >= 1;
+}
+function rowGeneBoxes(genes, X, y, { rowPx = ROW_HEIGHT_PX, barPx = BAR_PX } = {}) {
+  if (!boxesGenes(rowPx, barPx)) {
+    return [];
+  }
+  const pad = genePad(rowPx, barPx);
   const boxes = genes.map((g) => {
     const x = X(g.start);
     return {
@@ -4883,7 +5095,7 @@ function rowGeneBoxes(genes, X, y) {
   });
   const taken = [];
   const named = new Set(
-    [...boxes].sort((a, b) => a.w - b.w).filter(({ g, x, w }) => {
+    (barPx >= MIN_LETTERED_BAR_PX ? [...boxes] : []).sort((a, b) => a.w - b.w).filter(({ g, x, w }) => {
       const half = g.name.length * GENE_CHAR_PX / 2;
       const at = [x + w / 2 - half, x + w / 2 + half];
       if (2 * half > w + 6 || taken.some(([a, b]) => at[0] < b + 2 && at[1] > a - 2)) {
@@ -4896,9 +5108,9 @@ function rowGeneBoxes(genes, X, y) {
   return boxes.map((box) => ({
     name: box.g.name,
     x: box.x,
-    y: y - BAR_PX / 2 - 2,
+    y: y - barPx / 2 - pad,
     w: box.w,
-    h: BAR_PX + 4,
+    h: barPx + 2 * pad,
     exons: box.g.exons.map((e) => ({
       x: X(e.start),
       w: Math.max(1, X(e.end) - X(e.start))
@@ -4930,7 +5142,13 @@ function walkRowsKey(bars, o = {}) {
       label: "walked outside the cut"
     });
   }
-  if (o.genes) {
+  if (o.genes?.crowded) {
+    entries.push({
+      swatch: { kind: "gene" },
+      label: "genes left out: too many rows to box them in",
+      note: true
+    });
+  } else if (o.genes) {
     entries.push({
       swatch: { kind: "gene" },
       label: "genes, each row's own annotation"
@@ -5007,7 +5225,57 @@ function walkRowsKeyTree(entries, x, y) {
     )
   };
 }
-function geneTree(box, y) {
+function coalesceRuns(runs, pxPerBp) {
+  const minBp = 1 / pxPerBp;
+  const out = [];
+  let bucket = [];
+  const flush = () => {
+    if (bucket.length === 0) {
+      return;
+    }
+    if (bucket.length === 1) {
+      out.push(bucket[0]);
+    } else {
+      let on = 0;
+      let off = 0;
+      for (const r of bucket) {
+        if (r.onReference) {
+          on += r.bp;
+        } else {
+          off += r.bp;
+        }
+      }
+      const onReference = on >= off;
+      const lead = bucket.find((r) => r.onReference === onReference);
+      out.push({
+        start: bucket[0].start,
+        bp: on + off,
+        onReference,
+        referenceStart: onReference ? lead.referenceStart : void 0,
+        ...lead.reversed ? { reversed: true } : {}
+      });
+    }
+    bucket = [];
+  };
+  let held = 0;
+  for (const run of runs) {
+    if (run.gap || run.bp >= minBp) {
+      flush();
+      held = 0;
+      out.push(run);
+      continue;
+    }
+    bucket.push(run);
+    held += run.bp;
+    if (held >= minBp) {
+      flush();
+      held = 0;
+    }
+  }
+  flush();
+  return out;
+}
+function geneTree(box, y, barPx) {
   return el(
     "g",
     { class: "row-gene", "data-testid": "graph-walk-gene" },
@@ -5015,9 +5283,9 @@ function geneTree(box, y) {
     ...box.exons.map(
       (e) => el("rect", {
         x: e.x,
-        y: y - BAR_PX / 2,
+        y: y - barPx / 2,
         width: e.w,
-        height: BAR_PX,
+        height: barPx,
         fill: GENE_INK,
         opacity: 0.35
       })
@@ -5051,18 +5319,20 @@ function geneTree(box, y) {
 }
 function walkRowsTree(bars, frame, o = {}) {
   const X = (bp) => bp * frame.scaleX + frame.translateX;
-  const Y = (row) => row * ROW_HEIGHT_PX * frame.scaleY + frame.translateY;
+  const rowPx = frame.rowPx ?? ROW_HEIGHT_PX;
+  const barPx = frame.barPx ?? BAR_PX;
+  const Y = (row) => row * rowPx * frame.scaleY + frame.translateY;
   const { origin, unit, reference, rows } = bars;
   const along = (offset) => X(origin + offset);
   const prefix = o.idPrefix ?? "walkrow";
   const rowTree = (row, i) => {
     const y = Y(i);
-    if (y < -BAR_PX || y > frame.height + BAR_PX) {
+    if (y < -barPx || y > frame.height + barPx) {
       return void 0;
     }
-    const runs = row.runs.flatMap((run) => {
+    const runs = coalesceRuns(row.runs, frame.scaleX).flatMap((run) => {
       const paint2 = runPaint(run, o.ramp);
-      const h = run.gap ? GAP_PX : BAR_PX;
+      const h = run.gap ? Math.min(GAP_PX, barPx) : barPx;
       const id = `${prefix}-${i}-${run.start}`;
       const rect = el("rect", {
         x: along(run.start),
@@ -5089,8 +5359,8 @@ function walkRowsTree(bars, frame, o = {}) {
       (k) => el("line", {
         x1: along(k),
         x2: along(k),
-        y1: y - BAR_PX / 2,
-        y2: y + BAR_PX / 2,
+        y1: y - barPx / 2,
+        y2: y + barPx / 2,
         stroke: "white",
         "stroke-width": 1
       })
@@ -5103,6 +5373,7 @@ function walkRowsTree(bars, frame, o = {}) {
       call
     );
     const at = readoutPlacement(text, along(row.bp), frame.width);
+    const readouts = frame.readouts ?? true;
     return el(
       "g",
       {
@@ -5110,18 +5381,19 @@ function walkRowsTree(bars, frame, o = {}) {
       },
       ...runs,
       ...ticks,
-      ...rowGeneBoxes(o.rowGenes?.get(row.name) ?? [], along, y).map(
-        (box) => geneTree(box, y)
-      ),
+      ...rowGeneBoxes(o.rowGenes?.get(row.name) ?? [], along, y, {
+        rowPx,
+        barPx
+      }).map((box) => geneTree(box, y, barPx)),
       call && el("rect", {
         "data-testid": "graph-walk-call",
         x: along(call.bp) - 1,
-        y: y - BAR_PX / 2 - 3,
+        y: y - barPx / 2 - 3,
         width: 2,
-        height: BAR_PX + 6,
+        height: barPx + 6,
         fill: call.spanningReads === 0 ? UNBACKED_TICK : CALL_TICK
       }),
-      el(
+      readouts && el(
         "text",
         {
           x: at.x,
@@ -5141,6 +5413,180 @@ function walkRowsTree(bars, frame, o = {}) {
   return el("g", {}, ...[reference, ...rows].map(rowTree));
 }
 
+// src/layout/walkStrip.ts
+var PAD_PX = 6;
+var WALK_STRIP_CEILING_PX = 260;
+var LABEL_FONT_PX = 11;
+var MIN_ROW_PX = 3;
+var LABELLED_ROW_PX = 12;
+var READOUT_ROOM2 = 1.3;
+var MARK_INK = "#111";
+var TICK_PX = 3;
+function stripMarks(graph, rows, node) {
+  const visits = graph.pathVisits?.get(node.name) ?? [];
+  const marks = [];
+  for (const row of rows) {
+    const axis = row.axis;
+    if (!axis) {
+      continue;
+    }
+    const path = pathOrigin(row.name).name;
+    for (const v of visits) {
+      if (v.path !== path) {
+        continue;
+      }
+      const { start, end } = alongRow(axis, v.start, v.start + node.length);
+      if (end > 0 && start < row.bp) {
+        marks.push({ row: row.name, start, bp: end - start });
+      }
+    }
+  }
+  return marks;
+}
+var spanCache = /* @__PURE__ */ new WeakMap();
+function spansOf(graph, name) {
+  let byName = spanCache.get(graph);
+  if (!byName) {
+    byName = /* @__PURE__ */ new Map();
+    spanCache.set(graph, byName);
+  }
+  if (byName.has(name)) {
+    return byName.get(name);
+  }
+  const lengthOf = new Map(graph.nodes.map((n2) => [n2.id, n2.length]));
+  const pieces = (graph.paths ?? []).filter((p) => p.name === name);
+  let spans;
+  if (pieces.every((p) => p.start !== void 0)) {
+    spans = { ids: [], starts: [], ends: [] };
+    for (const piece of [...pieces].sort((a, b) => a.start - b.start)) {
+      let pos = piece.start;
+      for (const id of piece.nodeIds) {
+        const len = lengthOf.get(id) ?? 0;
+        spans.ids.push(id);
+        spans.starts.push(pos);
+        spans.ends.push(pos + len);
+        pos += len;
+      }
+    }
+  }
+  byName.set(name, spans);
+  return spans;
+}
+function segmentAt(graph, row, offset, pxPerBp) {
+  const axis = row.axis;
+  const spans = axis && spansOf(graph, row.name);
+  if (!axis || !spans || offset < 0 || offset > row.bp) {
+    return void 0;
+  }
+  const at = axis.reversed ? axis.start - offset : axis.start + offset;
+  const tol = 0.5 / pxPerBp;
+  const bar = axis.reversed ? { start: axis.start - row.bp, end: axis.start } : { start: axis.start, end: axis.start + row.bp };
+  const from = Math.max(at - tol, bar.start);
+  const to = Math.min(at + tol, bar.end);
+  let lo = 0;
+  let hi = spans.starts.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (spans.ends[mid] <= from) {
+      lo = mid + 1;
+    } else {
+      hi = mid;
+    }
+  }
+  let best;
+  let bestLen = -1;
+  let bestHolds = false;
+  for (let i = lo; i < spans.starts.length && spans.starts[i] < to; i++) {
+    const len = spans.ends[i] - spans.starts[i];
+    const holds = spans.starts[i] <= at && at < spans.ends[i];
+    if (len > bestLen || len === bestLen && holds && !bestHolds) {
+      bestLen = len;
+      best = spans.ids[i];
+      bestHolds = holds;
+    }
+  }
+  return best;
+}
+function walkStripFrame(bars, o) {
+  const maxHeight = o.maxHeight ?? WALK_STRIP_CEILING_PX;
+  const labelPx = o.labelPx ?? Math.max(...[bars.reference, ...bars.rows].map((r) => r.label.length)) * LABEL_CHAR_PX + 16;
+  const count = bars.rows.length + 1;
+  const rowPx = Math.max(
+    MIN_ROW_PX,
+    Math.min(ROW_HEIGHT_PX, Math.floor((maxHeight - 2 * PAD_PX) / count))
+  );
+  const labelled = rowPx >= LABELLED_ROW_PX;
+  const readouts = rowPx >= 14;
+  const barPx = Math.max(2, Math.round(rowPx * 0.6));
+  const longest = Math.max(bars.reference.bp, ...bars.rows.map((r) => r.bp), 1);
+  const left = labelled ? labelPx : PAD_PX;
+  const usable = Math.max(1, o.width - left - PAD_PX);
+  const scaleX = usable / (longest * (readouts ? READOUT_ROOM2 : 1));
+  return {
+    scaleX,
+    scaleY: 1,
+    translateX: left - bars.origin * scaleX,
+    translateY: PAD_PX + rowPx / 2,
+    width: o.width,
+    height: count * rowPx + 2 * PAD_PX,
+    rowPx,
+    barPx,
+    readouts,
+    labelled,
+    boxesGenes: boxesGenes(rowPx, barPx)
+  };
+}
+function stripRowAt(bars, frame, x, y) {
+  const i = Math.round((y - frame.translateY) / frame.rowPx);
+  const row = [bars.reference, ...bars.rows][i];
+  const offset = (x - frame.translateX) / frame.scaleX - bars.origin;
+  return row && i >= 0 && offset >= 0 && offset <= row.bp ? { index: i, row, offset } : void 0;
+}
+function walkMarksTree(bars, frame, marks) {
+  const index = new Map(
+    [bars.reference, ...bars.rows].map((row, i) => [row.name, i])
+  );
+  const X = (offset) => (bars.origin + offset) * frame.scaleX + frame.translateX;
+  return el(
+    "g",
+    { "data-testid": "graph-walk-marks" },
+    ...marks.flatMap((m) => {
+      const i = index.get(m.row);
+      if (i === void 0) {
+        return [];
+      }
+      const y = i * frame.rowPx + frame.translateY;
+      const x = X(m.start);
+      const w = Math.max(2, m.bp * frame.scaleX);
+      const tick = (top) => el("rect", { x, y: top, width: w, height: TICK_PX, fill: MARK_INK });
+      return [
+        tick(y - frame.barPx / 2 - TICK_PX - 1),
+        tick(y + frame.barPx / 2 + 1)
+      ];
+    })
+  );
+}
+function walkStripLabelsTree(bars, frame, bold = /* @__PURE__ */ new Set()) {
+  return el(
+    "g",
+    { "font-family": "sans-serif", "font-size": LABEL_FONT_PX, fill: "#333" },
+    ...(frame.labelled ? [bars.reference, ...bars.rows] : []).map(
+      (row, i) => el(
+        "text",
+        {
+          x: 6,
+          y: i * frame.rowPx + frame.translateY + 4,
+          "font-weight": bold.has(row.name) ? 600 : void 0
+        },
+        row.label
+      )
+    )
+  );
+}
+function stripGeneGaps(frame, gaps) {
+  return gaps && !frame.boxesGenes ? { ...gaps, crowded: true } : gaps;
+}
+
 // src/renderer/svgCanvas.ts
 var n = (v) => +v.toFixed(1);
 function paint(css) {
@@ -5254,7 +5700,7 @@ function svgCanvas(width, height) {
 }
 
 // src/version.ts
-var version = "4.2.0";
+var version = "4.4.0";
 
 // src/viewport.ts
 function axisScaleOf(scale, pixelRows) {
@@ -5302,6 +5748,7 @@ var FONT = 'font-family="Helvetica, Arial, sans-serif" font-size="11"';
 var BAR_PX2 = 48;
 var SWATCH_PX = 18;
 var KEY_GAP_PX = 16;
+var STRIP_KEY_PX = 22;
 var FADED = "rgb(160,160,160)";
 var EXON_COLOR = "#daa520";
 var GENE_INK2 = "#1c1c22";
@@ -5482,6 +5929,7 @@ function figureSvg(graph, layout, o = {}) {
         axis,
         referenceRamp,
         deletions: new Map(deletions.map((d) => [d.edgeIndex, d.bypassed])),
+        deletionRoutes: layout.deletionRoutes,
         hiddenEdges: new Set(
           o.showDeletionEdges ? [] : deletions.map((d) => d.edgeIndex)
         )
@@ -5589,6 +6037,42 @@ function figureSvg(graph, layout, o = {}) {
     );
     height = header + h;
   }
+  const strip = o.walkStrip;
+  if (strip && !rows && !layout.tubeMap) {
+    const frame = walkStripFrame(strip.rows, { width });
+    const key = walkRowsKeyTree(
+      walkRowsKey(strip.rows, {
+        ramp: referenceRamp && {
+          start: referenceRamp.start,
+          end: referenceRamp.start + referenceRamp.span
+        },
+        genes: strip.rowGenes?.size ? stripGeneGaps(frame, strip.rowGeneGaps) : void 0
+      }),
+      6,
+      height + frame.height
+    );
+    parts.push(
+      `<line x1="0" x2="${width}" y1="${height + 0.5}" y2="${height + 0.5}" stroke="#ddd"/>`,
+      `<svg y="${height}" width="${width}" height="${frame.height}">${serializeEl(
+        walkRowsTree(strip.rows, frame, {
+          ramp: referenceRamp && {
+            start: referenceRamp.start,
+            end: referenceRamp.start + referenceRamp.span
+          },
+          rowGenes: strip.rowGenes,
+          idPrefix: "strip"
+        })
+      )}${serializeEl(
+        walkStripLabelsTree(
+          strip.rows,
+          frame,
+          new Set(layers.map((l) => l.walk))
+        )
+      )}</svg>`,
+      serializeEl(key.tree)
+    );
+    height += frame.height + STRIP_KEY_PX;
+  }
   const metadata = JSON.stringify({
     generator: `@jbrowse/bandage-core@${version}`,
     ...o.spec === void 0 ? {} : { spec: o.spec }
@@ -6189,6 +6673,13 @@ function loadBandage() {
 export {
   isBackbone,
   BUBBLE_SPREADS,
+  ROW_HEIGHT_PX,
+  svgPath,
+  curveBounds,
+  translateCurves,
+  yToXOf,
+  pathRibbonOffsets,
+  deletionEdges,
   panSNSample,
   panSNHaplotype,
   panSNContig,
@@ -6202,14 +6693,7 @@ export {
   clampZoom,
   fitTransform,
   drawingBounds,
-  ROW_HEIGHT_PX,
   referenceOrder,
-  svgPath,
-  curveBounds,
-  translateCurves,
-  yToXOf,
-  pathRibbonOffsets,
-  deletionEdges,
   LABEL_PX,
   LABEL_CHAR_PX,
   LABEL_PAD,
@@ -6283,7 +6767,17 @@ export {
   walkRowsKey,
   DISAGREES,
   walkRowsKeyTree,
+  coalesceRuns,
   walkRowsTree,
+  WALK_STRIP_CEILING_PX,
+  LABELLED_ROW_PX,
+  stripMarks,
+  segmentAt,
+  walkStripFrame,
+  stripRowAt,
+  walkMarksTree,
+  walkStripLabelsTree,
+  stripGeneGaps,
   svgCanvas,
   version,
   axisScaleOf,