@3plate/graph-core 0.1.0 → 0.1.4

package/dist/index.cjs

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -26,1044 +27,790 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.js
+// src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Graph: () => Graph
+  default: () => index_default,
+  graph: () => graph
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/graph.js
-var import_immutable5 = require("immutable");
-
-// src/options.js
-var defaultOptions = {
-  mergeOrder: ["target", "source"],
-  nodeMargin: 15,
-  dummyNodeSize: 15,
-  defaultPortOffset: 20,
-  nodeAlign: "natural",
-  // 'natural' || 'top' || 'bottom' || 'left' || 'right'
-  edgeSpacing: 10,
-  turnRadius: 10,
-  graphPadding: 20,
-  orientation: "TB",
-  layerMargin: 5,
-  alignIterations: 5,
-  alignThreshold: 10,
-  separateTrackSets: true
-};
+// src/graph/graph.ts
+var import_immutable8 = require("immutable");
 
-// src/graph-nodes.js
+// src/graph/node.ts
 var import_immutable = require("immutable");
-
-// src/log.js
-var import_winston = __toESM(require("winston"), 1);
-
-// src/vitest-transport.js
-var import_winston_transport = __toESM(require("winston-transport"), 1);
-var VitestTransport = class extends import_winston_transport.default {
-  constructor(opts) {
-    super(opts);
-  }
-  log(info, callback) {
-    setImmediate(() => {
-      this.emit("logged", info);
-    });
-    const message = info[/* @__PURE__ */ Symbol.for("message")] || info.message;
-    switch (info.level) {
-      case "error":
-        console.error(message);
-        break;
-      case "warn":
-        console.warn(message);
-        break;
-      case "info":
-        console.info(message);
-        break;
-      default:
-        console.log(message);
-    }
-    callback();
-  }
+var defNodeData = {
+  id: "",
+  data: void 0,
+  version: 0,
+  title: void 0,
+  text: void 0,
+  type: void 0,
+  render: void 0,
+  ports: { in: null, out: null },
+  aligned: {},
+  edges: { in: (0, import_immutable.Set)(), out: (0, import_immutable.Set)() },
+  segs: { in: (0, import_immutable.Set)(), out: (0, import_immutable.Set)() },
+  layerId: "",
+  isDummy: false,
+  isMerged: false,
+  edgeIds: [],
+  index: void 0,
+  pos: void 0,
+  lpos: void 0,
+  dims: void 0,
+  mutable: false
 };
-
-// src/log.js
-var { combine, timestamp, printf, colorize, align } = import_winston.default.format;
-var format;
-var transports;
-switch (process.env.NODE_ENV) {
-  case "development":
-  case "test":
-    format = combine(
-      colorize(),
-      align(),
-      printf((info) => `${info.level}: ${info.module ?? "core"}: ${info.message}`)
-    );
-    transports = process.env.VITEST ? [new VitestTransport()] : [new import_winston.default.transports.Console()];
-    break;
-  default:
-    format = combine(
-      timestamp({
-        format: "YYYY-MM-DD hh:mm:ss.SSS A"
-      }),
-      json()
-    );
-    transports = [new import_winston.default.transports.Console()];
-    break;
-}
-var log = import_winston.default.createLogger({
-  level: process.env.LOG_LEVEL || "warn",
-  format,
-  transports
-});
-function logger(module2) {
-  return log.child({ module: module2 });
-}
-
-// src/graph-nodes.js
-var log2 = logger("nodes");
-var GraphNodes = {
-  /**
-   * Add a node to the graph
-   * 
-   * @param {Object} props - Node properties
-   * @param {string} props.id - Node ID (required)
-   * @param {string} props.layerId - Node layer ID (optional)
-   * @returns {Object} The added node
-   */
-  _addNode(props) {
-    const node = {
-      ...props,
+var Node = class _Node extends (0, import_immutable.Record)(defNodeData) {
+  static dummyPrefix = "d:";
+  // get edgeId(): EdgeId {
+  //   if (!this.isDummy)
+  //     throw new Error(`node ${this.id} is not a dummy`)
+  //   if (this.isMerged)
+  //     throw new Error(`node ${this.id} is merged`)
+  //   return this.get('edgeIds')[0]
+  // }
+  // get edgeIds(): EdgeId[] {
+  //   if (!this.isDummy)
+  //     throw new Error(`node ${this.id} is not a dummy`)
+  //   if (!this.isMerged)
+  //     throw new Error(`node ${this.id} is not merged`)
+  //   return this.get('edgeIds')
+  // }
+  get key() {
+    return this.isDummy ? this.id : _Node.key(this);
+  }
+  static key(node) {
+    return `${node.id}:${node.version}`;
+  }
+  static isDummyId(nodeId) {
+    return nodeId.startsWith(_Node.dummyPrefix);
+  }
+  static addNormal(g, data) {
+    const layer = g.layerAt(0);
+    const node = new _Node({
+      ...data,
       edges: { in: (0, import_immutable.Set)(), out: (0, import_immutable.Set)() },
       segs: { in: (0, import_immutable.Set)(), out: (0, import_immutable.Set)() },
-      aligned: {}
-    };
-    if (!node.layerId)
-      node.layerId = this._layerAtIndex(0).id;
-    this._layerAddNode(node.layerId, node.id);
-    this.nodes.set(node.id, node);
-    this._markDirty(node.id);
+      aligned: {},
+      edgeIds: [],
+      layerId: layer.id
+    });
+    layer.addNode(g, node.id);
+    g.nodes.set(node.id, node);
+    g.dirtyNodes.add(node.id);
     return node;
-  },
-  /**
-   * Add a dummy node to the graph
-   * 
-   * @param {Object} props - Node properties
-   * @param {string} props.layerId - Node layer ID (optional)
-   * @returns {Object} The added node
-   */
-  _addDummy(props) {
-    return this._addNode({
-      ...props,
-      id: this._newDummyId(),
+  }
+  static addDummy(g, data) {
+    const layer = g.getLayer(data.layerId);
+    const node = new _Node({
+      ...data,
+      id: `${_Node.dummyPrefix}${g.nextDummyId++}`,
+      edges: { in: (0, import_immutable.Set)(), out: (0, import_immutable.Set)() },
+      segs: { in: (0, import_immutable.Set)(), out: (0, import_immutable.Set)() },
+      aligned: {},
       isDummy: true,
       dims: {
-        width: this.options.dummyNodeSize,
-        height: this.options.dummyNodeSize
+        w: g.options.dummyNodeSize,
+        h: g.options.dummyNodeSize
       }
     });
-  },
-  /**
-   * Remove a node from the graph
-   * 
-   * @param {string} nodeId - Node ID
-   */
-  _deleteNode(nodeId) {
-    log2.debug(`deleting node ${nodeId}`);
-    const node = this.nodes.get(nodeId);
-    if (!node) return;
-    this._layerDeleteNode(node.layerId, nodeId);
-    for (const relId of this._relIds(nodeId))
-      this._deleteRelById(relId);
-    this.nodes.delete(nodeId);
-  },
-  /**
-   * Check if a node is unlinked (has no relationships)
-   * 
-   * @param {string} nodeId - Node ID
-   * @returns {boolean} True if the node is unlinked, false otherwise
-   */
-  _nodeIsUnlinked(nodeId) {
-    const node = this.nodes.get(nodeId);
-    if (!node) return false;
-    return node.edges.in.isEmpty() && node.edges.out.isEmpty() && node.segs.in.isEmpty() && node.segs.out.isEmpty();
-  },
-  /**
-   * Generate a new dummy node ID
-   * 
-   * @returns {string} A new dummy node ID
-   */
-  _newDummyId() {
-    return `d:${this.nextDummyId++}`;
-  },
-  /**
-   * Check if an ID is a dummy node ID
-   * 
-   * @param {string} nodeId - ID to check (required)
-   * @returns {boolean} True if the ID is a dummy node ID, false otherwise
-   */
-  _isDummyId(nodeId) {
-    return nodeId.startsWith("d:");
-  },
-  /**
-   * Iterate over all node IDs
-   * 
-   * @returns {Iterator} Iterator over node IDs
-   */
-  *_nodeIds() {
-    yield* this.nodes.keySeq();
+    layer.addNode(g, node.id);
+    g.nodes.set(node.id, node);
+    g.dirtyNodes.add(node.id);
+    return node;
   }
-};
-
-// src/graph-edges.js
-var log3 = logger("edges");
-var GraphEdges = {
-  /**
-   * Get a relationship (edge or segment) by ID
-   * 
-   * @param {string} relId - Relationship ID
-   * @returns {Object} The relationship
-   */
-  _getRel(relId) {
-    return relId.startsWith("e:") ? this.getEdge(relId) : this.getSeg(relId);
-  },
-  /**
-   * Generate the ID of an edge or segment. The ID is in the format
-   * 
-   * {type}:{source.id}[.{source.port}]-[{type}]-{target.id}[.{target.port}]
-   * 
-   * Examples:
-   * 
-   * e:n1--n2
-   * e:n1.out1--n2
-   * e:n1--n2.in1
-   * e:n1.out1--n2.in1
-   * e:n1.out1-bold-n2.in1
-   * 
-   * @param {Object} obj - Edge or segment
-   * @param {string} type - Type of relationship
-   * @returns {string} The relationship ID
-   */
-  _edgeSegId(obj, type, side = "both") {
-    let source = "", target = "";
-    if (side == "source" || side == "both") {
-      source = obj.source.id;
-      if (obj.source.port) source += `.${obj.source.port}`;
-      source += "-";
-    }
-    if (side == "target" || side == "both") {
-      target = "-" + obj.target.id;
-      if (obj.target.port) target += `.${obj.target.port}`;
-    }
-    return `${type}:${source}${obj.type || ""}${target}`;
-  },
-  /**
-   * Generate the ID of an edge
-   * 
-   * @param {Object} edge - Edge
-   * @returns {string} The edge ID
-   */
-  _edgeId(edge) {
-    return this._edgeSegId(edge, "e");
-  },
-  /**
-   * Generate the ID of a segment
-   * 
-   * @param {Object} seg - Segment
-   * @returns {string} The segment ID
-   */
-  _segId(seg) {
-    return this._edgeSegId(seg, "s");
-  },
-  /**
-   * Generate a new layer ID
-   * 
-   * @returns {string} A new layer ID
-   */
-  _newLayerId() {
-    return `l:${this.nextLayerId++}`;
-  },
-  /**
-   * Link a segment to its source and target nodes
-   * 
-   * @param {Object} seg - Segment
-   */
-  _linkSeg(seg) {
-    this._linkObj(seg, "segs");
-  },
-  /**
-   * Link an edge to its source and target nodes
-   * 
-   * @param {Object} edge - Edge
-   */
-  _linkEdge(edge) {
-    this._linkObj(edge, "edges");
-  },
-  /**
-   * Unlink a segment from its source and target nodes
-   * 
-   * @param {Object} seg - Segment
-   */
-  _unlinkSeg(seg) {
-    this._unlinkRel(seg, "segs");
-  },
-  /**
-   * Unlink an edge from its source and target nodes
-   * 
-   * @param {Object} edge - Edge
-   */
-  _unlinkEdge(edge) {
-    this._unlinkRel(edge, "edges");
-  },
-  /**
-   * Link a relationship (edge or segment) to its source and target nodes
-   * 
-   * @param {Object} rel - Relationship
-   * @param {string} type - Type of relationship
-   */
-  _linkObj(rel, type) {
-    this._addRel(rel.source.id, rel.id, type, "out");
-    this._addRel(rel.target.id, rel.id, type, "in");
-  },
-  /**
-   * Unlink a relationship (edge or segment) from its source and target nodes
-   * 
-   * @param {Object} rel - Relationship
-   * @param {string} type - Type of relationship
-   */
-  _unlinkRel(rel, type) {
-    log3.debug(`unlinking rel ${rel.id} from ${rel.source.id} and ${rel.target.id}`);
-    this._deleteRel(rel.source.id, rel.id, type, "out");
-    this._deleteRel(rel.target.id, rel.id, type, "in");
-  },
-  /**
-   * Modify a relationship (edge or segment) in the graph.
-   * Either adds or deletes the relation from the appropriate
-   * immutable set on the node.
-   * 
-   * @param {string} nodeId - Node ID
-   * @param {string} relId - Relationship ID
-   * @param {string} type - Type of relationship
-   * @param {string} dir - Direction of relationship
-   * @param {string} op - Operation (add or delete)
-   */
-  _modRel(nodeId, relId, type, dir, op) {
-    log3.debug(`${op} rel ${relId} on ${nodeId} ${type} ${dir}`);
-    let node = this.getNode(nodeId);
-    let sets = node[type];
-    let set = sets[dir];
-    const exists = set.has(relId);
-    if (op == "add" && exists) return;
-    else if (op == "delete" && !exists) return;
-    set = set[op](relId);
-    sets = { ...sets, [dir]: set };
-    node = { ...node, [type]: sets };
-    this.nodes.set(nodeId, node);
-    this._markDirty(nodeId);
-  },
-  /**
-   * Add a relationship (edge or segment) to its source and target nodes
-   * 
-   * @param {string} nodeId - Node ID
-   * @param {string} relId - Relationship ID
-   * @param {string} type - Type of relationship
-   * @param {string} dir - Direction of relationship
-   */
-  _addRel(nodeId, relId, type, dir) {
-    this._modRel(nodeId, relId, type, dir, "add");
-  },
-  /**
-   * Delete a relationship (edge or segment) from its source and target nodes
-   * 
-   * @param {string} nodeId - Node ID
-   * @param {string} relId - Relationship ID
-   * @param {string} type - Type of relationship
-   * @param {string} dir - Direction of relationship
-   */
-  _deleteRel(nodeId, relId, type, dir) {
-    this._modRel(nodeId, relId, type, dir, "delete");
-  },
-  /**
-   * Add a new edge to the graph and link it to its source and target nodes
-   * 
-   * @param {Object} props - Edge properties
-   * @returns {Object} The edge object
-   */
-  _addEdge(props) {
-    const edge = {
-      ...props,
-      id: this._edgeId(props),
-      segs: []
-    };
-    this.edges.set(edge.id, edge);
-    this._linkEdge(edge);
-    return edge;
-  },
-  /**
-   * Remove an edge from the graph and unlink it from its source and target nodes.
-   * Also remove it from the edge list of any segments it includes. Any segments
-   * that become unused are deleted.
-   * 
-   * @param {string} edgeId - Edge ID
-   */
-  _deleteEdge(edgeId) {
-    log3.debug(`deleting edge ${edgeId}`);
-    const edge = this.edges.get(edgeId);
-    if (!edge) return;
-    log3.debug(`unlinking edge ${edgeId}`);
-    this._unlinkEdge(edge);
-    for (const segId of edge.segs)
-      this._segDeleteEdge(segId, edgeId);
-    this.edges.delete(edgeId);
-  },
-  /**
-   * Add a new segment to the graph and link it to its source and target nodes
-   * 
-   * @param {Object} props - Segment properties
-   * @returns {Object} The segment object
-   */
-  _addSeg(props) {
-    const seg = {
-      ...props,
-      id: this._segId(props)
-    };
-    this.segs.set(seg.id, seg);
-    this._linkSeg(seg);
-    return seg;
-  },
-  /**
-   * Remove a segment from the graph and unlink it from its source and target nodes.
-   * If a source or target is a dummy node and becomes unlinked (no segments), delete it.
-   * 
-   * @param {string} segId - Segment ID
-   */
-  _deleteSeg(segId) {
-    const seg = this.segs.get(segId);
-    if (!seg) return;
-    this._unlinkSeg(seg);
-    this.segs.delete(segId);
-    for (const side of ["source", "target"]) {
-      const node = this.getNode(seg[side].id);
-      if (node.isDummy && this._nodeIsUnlinked(node.id))
-        this._deleteNode(node.id);
-    }
-  },
-  /**
-   * Remove a relationship (edge or segment) from the graph and unlink it from its source and target nodes
-   * 
-   * @param {string} relId - Relationship ID
-   */
-  _deleteRelById(relId) {
-    if (relId.startsWith("e:"))
-      this._deleteEdge(relId);
-    else
-      this._deleteSeg(relId);
-  },
-  /**
-   * Return an iterator over the relationships (edges and segments) of a node.
-   * 
-   * @param {string} nodeId - Node ID
-   * @param {string} type - Type of relationship (defaults to 'both')
-   * @param {string} dir - Direction of relationship (defaults to 'both')
-   * @returns {Iterator} Iterator over the relationships
-   */
-  *_relIds(nodeId, type = "both", dir = "both") {
-    const node = this.getNode(nodeId);
+  static del(g, node) {
+    return g.getNode(node.id).delSelf(g);
+  }
+  static update(g, data) {
+    return g.getNode(data.id).mut(g).merge(data);
+  }
+  mut(g) {
+    if (this.mutable) return this;
+    return g.mutateNode(this);
+  }
+  final() {
+    if (!this.mutable) return this;
+    return this.merge({
+      edges: { in: this.edges.in.asImmutable(), out: this.edges.out.asImmutable() },
+      segs: { in: this.segs.in.asImmutable(), out: this.segs.out.asImmutable() },
+      mutable: false
+    }).asImmutable();
+  }
+  dirty(g) {
+    g.dirtyNodes.add(this.id);
+    return this;
+  }
+  cur(g) {
+    return g.getNode(this.id);
+  }
+  isUnlinked() {
+    return this.edges.in.size == 0 && this.edges.out.size == 0 && this.segs.in.size == 0 && this.segs.out.size == 0;
+  }
+  hasPorts() {
+    return !!this.ports?.in?.length || !!this.ports?.out?.length;
+  }
+  layerIndex(g) {
+    return this.getLayer(g).index;
+  }
+  getLayer(g) {
+    return g.getLayer(this.layerId);
+  }
+  setIndex(g, index) {
+    if (this.index == index) return this;
+    return this.mut(g).set("index", index);
+  }
+  setLayerPos(g, lpos) {
+    if (this.lpos == lpos) return this;
+    return this.mut(g).set("lpos", lpos);
+  }
+  setLayer(g, layerId) {
+    if (this.layerId == layerId) return this;
+    return this.mut(g).set("layerId", layerId);
+  }
+  setPos(g, pos) {
+    if (!this.pos || this.pos.x != pos.x || this.pos.y != pos.y)
+      return this.mut(g).set("pos", pos);
+    return this;
+  }
+  moveToLayer(g, layer) {
+    this.getLayer(g).delNode(g, this.id);
+    layer.addNode(g, this.id);
+    return this.setLayer(g, layer.id);
+  }
+  moveToLayerIndex(g, index) {
+    return this.moveToLayer(g, g.layerAt(index));
+  }
+  setAligned(g, dir, nodeId) {
+    if (this.aligned[dir] === nodeId) return this;
+    return this.mut(g).set("aligned", { ...this.aligned, [dir]: nodeId });
+  }
+  addRel(g, type, dir, relId) {
+    const sets = this.get(type);
+    const set = sets[dir];
+    if (set.has(relId)) return this;
+    return this.mut(g).set(type, { ...sets, [dir]: set.asMutable().add(relId) });
+  }
+  delRel(g, type, dir, relId) {
+    let sets = this.get(type);
+    const set = sets[dir];
+    if (!set.has(relId)) return this;
+    sets = { ...sets, [dir]: set.asMutable().remove(relId) };
+    const node = this.mut(g).set(type, sets);
+    if (node.isDummy && node.isUnlinked())
+      return node.delSelf(g);
+    return node;
+  }
+  delSelf(g) {
+    this.getLayer(g).delNode(g, this.id);
+    for (const rel of this.rels(g))
+      rel.delSelf(g);
+    g.nodes.delete(this.id);
+    g.dirtyNodes.delete(this.id);
+    g.delNodes.add(this.id);
+    return null;
+  }
+  addInEdge(g, edgeId) {
+    return this.addRel(g, "edges", "in", edgeId);
+  }
+  addOutEdge(g, edgeId) {
+    return this.addRel(g, "edges", "out", edgeId);
+  }
+  addInSeg(g, segId) {
+    return this.addRel(g, "segs", "in", segId);
+  }
+  addOutSeg(g, segId) {
+    return this.addRel(g, "segs", "out", segId);
+  }
+  delInEdge(g, edgeId) {
+    return this.delRel(g, "edges", "in", edgeId);
+  }
+  delOutEdge(g, edgeId) {
+    return this.delRel(g, "edges", "out", edgeId);
+  }
+  delInSeg(g, segId) {
+    return this.delRel(g, "segs", "in", segId);
+  }
+  delOutSeg(g, segId) {
+    return this.delRel(g, "segs", "out", segId);
+  }
+  *relIds(type = "both", dir = "both") {
     const types = type == "both" ? ["edges", "segs"] : [type];
     const dirs = dir == "both" ? ["in", "out"] : [dir];
     for (const type2 of types)
       for (const dir2 of dirs)
-        yield* node[type2][dir2];
-  },
-  /**
-   * Return an iterator over the relationships (edges and segments) of a node.
-   * 
-   * @param {string} nodeId - Node ID
-   * @param {string} type - Type of relationship (defaults to 'both')
-   * @param {string} dir - Direction of relationship (defaults to 'both')
-   * @returns {Iterator} Iterator over the relationships
-   */
-  *_rels(nodeId, type = "both", dir = "both") {
-    for (const relId of this._relIds(nodeId, type, dir))
-      yield this._getRel(relId);
-  },
-  /**
-   * Return an iterator over the neighbors of a node.
-   * 
-   * @param {string} nodeId - Node ID
-   * @param {string} type - Type of relationship (defaults to 'both')
-   * @param {string} dir - Direction of relationship (defaults to 'both')
-   * @returns {Iterator} Iterator over the neighbors
-   */
-  *_adjIds(nodeId, type = "both", dir = "both") {
-    const nodeIds = /* @__PURE__ */ new Set();
-    if (dir == "both" || dir == "in")
-      for (const rel of this._rels(nodeId, type, "in"))
-        nodeIds.add(rel.source.id);
-    if (dir == "both" || dir == "out")
-      for (const rel of this._rels(nodeId, type, "out"))
-        nodeIds.add(rel.target.id);
-    yield* nodeIds;
-  },
-  /**
-   * Return an iterator over the neighbors of a node.
-   * 
-   * @param {string} nodeId - Node ID
-   * @param {string} type - Type of relationship (defaults to 'both')
-   * @param {string} dir - Direction of relationship (defaults to 'both')
-   */
-  *_adjs(nodeId, type = "both", dir = "both") {
-    for (const adjId of this._adjIds(nodeId, type, dir))
-      yield this.getNode(adjId);
-  },
-  /**
-   * Remove a segment from an edge
-   * 
-   * @param {string} edgeId - Edge ID
-   * @param {string} segId - Segment ID
-   */
-  _edgeDeleteSeg(edgeId, segId) {
-    const edge = this.getEdge(edgeId);
-    const segs = edge.segs.filter((id) => id == segId);
-    this.edges.set(edgeId, { ...edge, segs });
-  },
-  /**
-   * Remove an edge from a segment and delete the segment if it becomes empty.
-   * 
-   * @param {string} segId - Segment ID
-   * @param {string} edgeId - Edge ID
-   */
-  _segDeleteEdge(segId, edgeId) {
-    const seg = this.getSeg(segId);
-    const edges = seg.edges.remove(edgeId);
-    if (edges.size == 0)
-      this._deleteSeg(segId);
-    else
-      this.segs.set(segId, { ...seg, edges });
-  },
-  /**
-   * Replace a segment in an edge
-   * 
-   * @param {string} edgeId - Edge ID
-   * @param {string} oldSegId - Old segment ID
-   * @param {string} newSegId - New segment ID
-   */
-  _edgeReplaceSeg(edgeId, oldSegId, newSegId) {
-    log3.debug(`edge ${edgeId}: replacing segment ${oldSegId} with ${newSegId}`);
-    this._segDeleteEdge(oldSegId, edgeId);
-    const edge = this.getEdge(edgeId);
-    const segs = edge.segs.map((id) => id == oldSegId ? newSegId : id);
-    this.edges.set(edgeId, { ...edge, segs });
+        yield* this.get(type2)[dir2];
+  }
+  *rels(g, type = "both", dir = "both") {
+    for (const relId of this.relIds(type, dir))
+      yield g.getRel(relId);
+  }
+  *adjIds(g, type = "both", dir = "both") {
+    const dirs = dir == "both" ? ["in", "out"] : [dir];
+    for (const dir2 of dirs) {
+      const side = dir2 == "in" ? "source" : "target";
+      for (const rel of this.rels(g, type, dir2))
+        yield rel[side].id;
+    }
+  }
+  *adjs(g, type = "both", dir = "both") {
+    for (const nodeId of this.adjIds(g, type, dir))
+      yield g.getNode(nodeId);
+  }
+  *inEdgeIds() {
+    yield* this.relIds("edges", "in");
+  }
+  *outEdgeIds() {
+    yield* this.relIds("edges", "out");
+  }
+  *inSegIds() {
+    yield* this.relIds("segs", "in");
+  }
+  *outSegIds() {
+    yield* this.relIds("segs", "out");
+  }
+  *inEdges(g) {
+    yield* this.rels(g, "edges", "in");
+  }
+  *outEdges(g) {
+    yield* this.rels(g, "edges", "out");
+  }
+  *inSegs(g) {
+    yield* this.rels(g, "segs", "in");
+  }
+  *outSegs(g) {
+    yield* this.rels(g, "segs", "out");
+  }
+  *inNodeIds(g) {
+    yield* this.adjIds(g, "edges", "in");
+  }
+  *outNodeIds(g) {
+    yield* this.adjIds(g, "edges", "out");
+  }
+  *inNodes(g) {
+    yield* this.adjs(g, "edges", "in");
+  }
+  *outNodes(g) {
+    yield* this.adjs(g, "edges", "out");
   }
 };
 
-// src/graph-layers.js
+// src/graph/edge.ts
 var import_immutable2 = require("immutable");
-var log4 = logger("layers");
-var GraphLayers = {
-  /**
-   * Get the index of a node's layer
-   * 
-   * @param {string} nodeId - Node ID
-   * @returns {number} The index of the node's layer
-   */
-  _nodeLayerIndex(nodeId) {
-    return this.getLayer(this.getNode(nodeId).layerId).index;
-  },
-  /**
-   * Add a node to a layer.
-   * 
-   * @param {string} layerId - Layer ID
-   * @param {string} nodeId - Node ID
-   */
-  _layerAddNode(layerId, nodeId) {
-    const layer = this.getLayer(layerId);
-    this.layers.set(layerId, {
-      ...layer,
-      nodes: layer.nodes.add(nodeId)
-    });
-  },
-  /**
-   * Remove a node from a layer.
-   * 
-   * @param {string} layerId - Layer ID
-   * @param {string} nodeId - Node ID
-   */
-  _layerDeleteNode(layerId, nodeId) {
-    const layer = this.getLayer(layerId);
-    let sorted = layer.sorted;
-    if (sorted) {
-      const idx = sorted.findIndex((id) => id == nodeId);
-      if (idx >= 0) {
-        sorted = sorted.filter((id) => id != nodeId);
-        for (let i = idx; i < sorted.length; i++) {
-          const node = this.getNode(sorted[i]);
-          this.nodes.set(sorted[i], { ...node, index: i });
-        }
-      }
-    }
-    this.layers.set(layerId, {
-      ...layer,
-      nodes: layer.nodes.delete(nodeId),
-      sorted
-    });
-    if (this._layerIsEmpty(layerId))
-      this._deleteLayer(layerId);
-  },
-  /**
-   * Update layers in two passes:
-   * 
-   *  - Move children up or down to just below lowest parent
-   *  - Move parents down to just above highest child
-   * 
-   * While moving nodes between layers, if any layer becomes empty,
-   * remove it from the list; at the end, renumber the remaining layers
-   */
-  _updateLayers() {
-    const stack = [...this._dirtyNodes].filter((id) => {
-      const node = this.nodes.get(id);
-      if (!node || node.isDummy) return false;
-      return true;
-    });
-    stack.sort((a, b) => this._nodeLayerIndex(b) - this._nodeLayerIndex(a));
-    const phase2 = new Set(stack);
-    const moved = /* @__PURE__ */ new Set();
-    while (stack.length > 0) {
-      const id = stack.pop();
-      const parentIds = [...this._adjIds(id, "edges", "in")];
-      let correctLayer;
-      if (parentIds.length == 0) {
-        correctLayer = 0;
-      } else {
-        const maxParent = (0, import_immutable2.Seq)(parentIds).map((id2) => this._nodeLayerIndex(id2)).max();
-        correctLayer = maxParent + 1;
-      }
-      const curLayer = this._nodeLayerIndex(id);
-      if (curLayer != correctLayer) {
-        moved.add(id);
-        this._moveNodeLayer(id, correctLayer);
-        stack.push(...this._adjIds(id, "edges", "out"));
-        for (const parentId of parentIds)
-          phase2.add(parentId);
-      }
+
+// src/log.ts
+var levels = {
+  error: 0,
+  warn: 1,
+  info: 2,
+  debug: 3
+};
+var currentLevel = "debug";
+function shouldLog(level) {
+  return levels[level] <= levels[currentLevel];
+}
+function logger(module2) {
+  return {
+    error: (msg, ...args) => shouldLog("error") && console.error(`[${module2}] ${msg}`, ...args),
+    warn: (msg, ...args) => shouldLog("warn") && console.warn(`[${module2}] ${msg}`, ...args),
+    info: (msg, ...args) => shouldLog("info") && console.info(`[${module2}] ${msg}`, ...args),
+    debug: (msg, ...args) => shouldLog("debug") && console.debug(`[${module2}] ${msg}`, ...args)
+  };
+}
+var log = logger("core");
+
+// src/graph/edge.ts
+var log2 = logger("edge");
+var defEdgeData = {
+  id: "",
+  data: null,
+  label: void 0,
+  source: { id: "" },
+  target: { id: "" },
+  type: void 0,
+  style: void 0,
+  mutable: false,
+  segIds: []
+};
+var Edge = class _Edge extends (0, import_immutable2.Record)(defEdgeData) {
+  static prefix = "e:";
+  mut(g) {
+    if (this.mutable) return this;
+    return g.mutateEdge(this);
+  }
+  final() {
+    if (!this.mutable) return this;
+    return this.merge({
+      mutable: false
+    }).asImmutable();
+  }
+  link(g) {
+    this.sourceNode(g).addOutEdge(g, this.id);
+    this.targetNode(g).addInEdge(g, this.id);
+    return this;
+  }
+  unlink(g) {
+    this.sourceNode(g).delOutEdge(g, this.id);
+    this.targetNode(g).delInEdge(g, this.id);
+    return this;
+  }
+  delSelf(g) {
+    for (const seg of this.segs(g))
+      seg.delEdgeId(g, this.id);
+    this.unlink(g);
+    g.edges.delete(this.id);
+    g.dirtyEdges.delete(this.id);
+    g.delEdges.add(this.id);
+    return null;
+  }
+  delSegId(g, segId) {
+    return this.setSegIds(g, this.segIds.filter((id) => id != segId));
+  }
+  replaceSegId(g, oldId, newId) {
+    return this.setSegIds(g, this.segIds.map((id) => id == oldId ? newId : id));
+  }
+  setSegIds(g, segIds) {
+    if (segIds.join(",") == this.segIds.join(",")) return this;
+    return this.mut(g).set("segIds", segIds);
+  }
+  *segs(g) {
+    for (const segId of this.segIds)
+      yield g.getSeg(segId);
+  }
+  node(g, side) {
+    return g.getNode(this[side].id);
+  }
+  sourceNode(g) {
+    return this.node(g, "source");
+  }
+  targetNode(g) {
+    return this.node(g, "target");
+  }
+  get str() {
+    return _Edge.str(this);
+  }
+  static str(edge) {
+    let source = edge.source?.id;
+    if (!source) throw new Error("edge source is undefined");
+    if (edge.source?.port)
+      source = `${source} (port ${edge.source.port})`;
+    let target = edge.target?.id;
+    if (!target) throw new Error("edge target is undefined");
+    if (edge.target?.port)
+      target = `${target} (port ${edge.target.port})`;
+    let str = `edge from ${source} to ${target}`;
+    if (edge.type) str += ` of type ${edge.type}`;
+    return str;
+  }
+  static key(edge, prefix = _Edge.prefix, side = "both") {
+    let source = "", target = "";
+    if (side == "source" || side == "both") {
+      if (!edge.source?.id) throw new Error("edge source is undefined");
+      source = edge.source.id;
+      if (edge.source?.port)
+        source = `${source}.${edge.source.port}`;
+      const marker = edge.source?.marker ?? edge.style?.marker?.source;
+      if (marker && marker != "none") source += `[${marker}]`;
+      source += "-";
     }
-    const byLayer = /* @__PURE__ */ new Map();
-    const addParent = (nodeId) => {
-      let set;
-      const layerId = this.getNode(nodeId).layerId;
-      if (!byLayer.has(layerId)) {
-        set = /* @__PURE__ */ new Set();
-        byLayer.set(layerId, set);
-      } else {
-        set = byLayer.get(layerId);
-      }
-      set.add(nodeId);
-    };
-    for (const id of phase2) addParent(id);
-    const layerIds = [...byLayer.keys()].sort(
-      (a, b) => this.layers.get(b).index - this.layers.get(a).index
-    );
-    for (const layerId of layerIds) {
-      const curLayer = this.layers.get(layerId).index;
-      for (const parentId of byLayer.get(layerId)) {
-        const children = [...this._adjIds(parentId, "edges", "out")];
-        if (children.length == 0) continue;
-        const minChild = (0, import_immutable2.Seq)(children).map((id) => this._nodeLayerIndex(id)).min();
-        const correctLayer = minChild - 1;
-        if (curLayer != correctLayer) {
-          moved.add(parentId);
-          this._moveNodeLayer(parentId, correctLayer);
-          for (const grandParentId of this._adjIds(parentId, "edges", "in"))
-            addParent(grandParentId);
-        }
-      }
+    if (side == "target" || side == "both") {
+      if (!edge.target?.id) throw new Error("edge target is undefined");
+      target = edge.target.id;
+      if (edge.target.port)
+        target = `${target}.${edge.target.port}`;
+      target = "-" + target;
+      const marker = edge.target?.marker ?? edge.style?.marker?.target ?? "arrow";
+      if (marker && marker != "none") target += `[${marker}]`;
     }
-    for (const id of moved)
-      for (const edgeId of this._relIds(id, "edges", "both"))
-        this._dirtyEdges.add(edgeId);
-    for (const edge of this.changes.addedEdges)
-      this._dirtyEdges.add(this._edgeId(edge));
-  },
-  /**
-   * Move the node to a new layer, crushing the original layer
-   * if it becomes empty
-   * 
-   * @param {string} nodeId - Node ID
-   * @param {number} newIndex - New layer index
-   */
-  _moveNodeLayer(nodeId, newIndex) {
-    log4.debug(`moving node ${nodeId} to layer ${newIndex}`);
-    const node = this.getNode(nodeId);
-    const oldLayerId = node.layerId;
-    const newLayerId = this._layerAtIndex(newIndex).id;
-    this._layerDeleteNode(oldLayerId, nodeId);
-    this._layerAddNode(newLayerId, nodeId);
-    this.nodes.set(nodeId, { ...node, layerId: newLayerId });
-  },
-  /**
-   * Get the layer at the given index, creating it if necessary
-   * 
-   * @param {number} index - Layer index
-   * @returns {Object} The layer
-   */
-  _layerAtIndex(index) {
-    while (index >= this.layerList.size)
-      this._addLayer();
-    const layerId = this.layerList.get(index);
-    return this.layers.get(layerId);
-  },
-  /**
-   * Add a new layer. The caller should add a node to it so that
-   * it's not empty.
-   */
-  _addLayer() {
-    const id = `l:${this.nextLayerId++}`;
-    this.layers.set(id, {
-      id,
-      index: this.layerList.size,
-      nodes: (0, import_immutable2.Set)()
+    const type = edge.type || "";
+    return `${prefix}${source}${type}${target}`;
+  }
+  static add(g, data) {
+    const edge = new _Edge({
+      ...data,
+      segIds: []
     });
-    this.layerList.push(id);
-    this.dirtyLayers.add(id);
-  },
-  /**
-   * Check if a layer is empty
-   * 
-   * @param {string} layerId - Layer ID
-   * @returns {boolean} True if the layer is empty
-   */
-  _layerIsEmpty(layerId) {
-    return this.layers.get(layerId).nodes.size == 0;
-  },
-  /**
-   * Delete a layer and renumber the remaining layers
-   * 
-   * @param {string} layerId - Layer ID
-   */
-  _deleteLayer(layerId) {
-    const layer = this.getLayer(layerId);
-    const index = layer.index;
-    log4.debug(`deleting layer ${layerId} at index ${index} / ${this.layerList.size}`);
-    this.layerList.remove(index);
-    this.layers.delete(layerId);
-    for (let i = index; i < this.layerList.size; i++) {
-      const id = this.layerList.get(i);
-      this.layers.set(id, {
-        ...this.layers.get(id),
-        index: i
-      });
+    edge.link(g);
+    g.edges.set(edge.id, edge);
+    g.dirtyEdges.add(edge.id);
+    return edge;
+  }
+  static del(g, data) {
+    return g.getEdge(data.id).delSelf(g);
+  }
+  static update(g, data) {
+    let edge = g.getEdge(data.id);
+    let relink = false;
+    if (data.source.id !== edge.source.id || data.target.id !== edge.target.id || data.source.port !== edge.source.port || data.target.port !== edge.target.port || data.type !== edge.type) {
+      for (const seg of edge.segs(g))
+        seg.delEdgeId(g, edge.id);
+      edge.unlink(g);
+      relink = true;
     }
+    edge = edge.mut(g).merge(data);
+    if (relink)
+      edge.link(g);
+    return edge;
   }
 };
 
-// src/mutator.js
-var Mutator = class {
-  constructor() {
-    this.changes = {
-      addedNodes: [],
-      removedNodes: [],
-      addedEdges: [],
-      removedEdges: []
-    };
+// src/graph/seg.ts
+var import_immutable3 = require("immutable");
+var defSegData = {
+  id: "",
+  source: { id: "" },
+  target: { id: "" },
+  type: void 0,
+  style: void 0,
+  edgeIds: (0, import_immutable3.Set)(),
+  trackPos: void 0,
+  svg: void 0,
+  mutable: false
+};
+var Seg = class _Seg extends (0, import_immutable3.Record)(defSegData) {
+  static prefix = "s:";
+  mut(g) {
+    if (this.mutable) return this;
+    return g.mutateSeg(this);
   }
-  addNode(node) {
-    this.changes.addedNodes.push(node);
+  final() {
+    if (!this.mutable) return this;
+    return this.merge({
+      edgeIds: this.edgeIds.asImmutable(),
+      mutable: false
+    }).asImmutable();
   }
-  addNodes(...nodes) {
-    nodes.forEach((node) => this.addNode(node));
+  get p1() {
+    return this.source.pos;
   }
-  addEdge(edge) {
-    this.changes.addedEdges.push(edge);
+  get p2() {
+    return this.target.pos;
   }
-  addEdges(...edges) {
-    edges.forEach((edge) => this.addEdge(edge));
+  anySameEnd(other) {
+    return this.sameEnd(other, "source") || this.sameEnd(other, "target");
   }
-  removeNode(node) {
-    if (typeof node == "string")
-      this.changes.removedNodes.push({ id: node });
-    else
-      this.changes.removedNodes.push(node);
+  sameEnd(other, side) {
+    const mine = this[side];
+    const yours = other[side];
+    return mine.id === yours.id && mine.port === yours.port && mine.marker === yours.marker;
   }
-  removeNodes(...nodes) {
-    nodes.forEach((node) => this.removeNode(node));
+  setPos(g, source, target) {
+    return this.mut(g).merge({
+      source: { ...this.source, pos: source },
+      target: { ...this.target, pos: target }
+    });
   }
-  removeEdge(edge) {
-    this.changes.removedEdges.push(edge);
+  setTrackPos(g, trackPos) {
+    if (this.trackPos == trackPos) return this;
+    return this.mut(g).set("trackPos", trackPos);
   }
-  removeEdges(...edges) {
-    edges.forEach((edge) => this.removeEdge(edge));
+  setSVG(g, svg) {
+    if (this.svg == svg) return this;
+    return this.mut(g).set("svg", svg);
   }
-};
-
-// src/graph-api.js
-var GraphAPI = {
-  isEmpty() {
-    return this.nodes.isEmpty();
-  },
-  numNodes() {
-    return this.nodes.size;
-  },
-  numEdges() {
-    return this.edges.size;
-  },
-  getNode(nodeId) {
-    const node = this.nodes.get(nodeId);
-    if (node) return node;
-    throw new Error(`cannot find node ${nodeId}`);
-  },
-  getEdge(edgeId) {
-    const edge = this.edges.get(edgeId);
-    if (edge) return edge;
-    throw new Error(`cannot find edge ${edgeId}`);
-  },
-  getSeg(segId) {
-    const seg = this.segs.get(segId);
-    if (seg) return seg;
-    throw new Error(`cannot find segment ${segId}`);
-  },
-  getLayer(layerId) {
-    const layer = this.layers.get(layerId);
-    if (layer) return layer;
-    throw new Error(`cannot find layer ${layerId}`);
-  },
-  hasNode(nodeId) {
-    return this.nodes.has(nodeId);
-  },
-  hasEdge(edgeId) {
-    return this.edges.has(edgeId);
-  },
-  withMutations(callback) {
-    const mut = new Mutator();
-    callback(mut);
-    return new Graph({ prior: this, changes: mut.changes });
-  },
-  addNodes(...nodes) {
-    return this.withMutations((mutator) => {
-      nodes.forEach((node) => mutator.addNode(node));
-    });
-  },
-  addNode(node) {
-    return this.withMutations((mutator) => {
-      mutator.addNode(node);
-    });
-  },
-  addEdges(...edges) {
-    return this.withMutations((mutator) => {
-      edges.forEach((edge) => mutator.addEdge(edge));
-    });
-  },
-  addEdge(edge) {
-    return this.withMutations((mutator) => {
-      mutator.addEdge(edge);
-    });
-  },
-  removeNodes(...nodes) {
-    return this.withMutations((mutator) => {
-      nodes.forEach((node) => mutator.removeNode(node));
-    });
-  },
-  removeNode(node) {
-    return this.withMutations((mutator) => {
-      mutator.removeNode(node);
-    });
-  },
-  removeEdges(...edges) {
-    return this.withMutations((mutator) => {
-      edges.forEach((edge) => mutator.removeEdge(edge));
-    });
-  },
-  removeEdge(edge) {
-    return this.withMutations((mutator) => {
-      mutator.removeEdge(edge);
+  link(g) {
+    this.sourceNode(g).addOutSeg(g, this.id);
+    this.targetNode(g).addInSeg(g, this.id);
+    return this;
+  }
+  unlink(g) {
+    this.sourceNode(g).delOutSeg(g, this.id);
+    this.targetNode(g).delInSeg(g, this.id);
+    return this;
+  }
+  delSelf(g) {
+    this.unlink(g);
+    g.segs.delete(this.id);
+    g.dirtySegs.delete(this.id);
+    g.delSegs.add(this.id);
+    return null;
+  }
+  *edges(g) {
+    for (const edgeId of this.edgeIds)
+      yield g.getEdge(edgeId);
+  }
+  node(g, side) {
+    return g.getNode(this[side].id);
+  }
+  sourceNode(g) {
+    return this.node(g, "source");
+  }
+  targetNode(g) {
+    return this.node(g, "target");
+  }
+  addEdgeId(g, edgeId) {
+    if (this.edgeIds.has(edgeId)) return this;
+    return this.mut(g).set("edgeIds", this.edgeIds.asMutable().add(edgeId));
+  }
+  delEdgeId(g, edgeId) {
+    if (!this.edgeIds.has(edgeId)) return this;
+    if (this.edgeIds.size == 1) {
+      this.delSelf(g);
+      return null;
+    }
+    return this.mut(g).set("edgeIds", this.edgeIds.asMutable().remove(edgeId));
+  }
+  static add(g, data) {
+    const seg = new _Seg({
+      ...data,
+      id: Edge.key(data, _Seg.prefix)
     });
+    seg.link(g);
+    g.segs.set(seg.id, seg);
+    g.dirtySegs.add(seg.id);
+    return seg;
   }
 };
 
-// src/graph-mutate.js
-var GraphMutate = {
-  /**
-   * Put the graph in mutate mode, where all the listed
-   * stateful (immutable) collections are also put in
-   * mutate mode. Within the callback, the collections
-   * are modified in place.
-   * 
-   * @param {Function} callback - The callback to run
-   */
-  _mutate(callback) {
-    const state = [
-      "nodes",
-      "edges",
-      "layers",
-      "layerList",
-      "segs"
-    ];
-    const mut = () => {
-      if (state.length == 0) return callback();
-      const name = state.shift();
-      this[name] = this[name].withMutations((map) => {
-        this[name] = map;
-        mut();
-      });
+// src/graph/layer.ts
+var import_immutable4 = require("immutable");
+var log3 = logger("layer");
+var defLayerData = {
+  id: "",
+  index: 0,
+  nodeIds: (0, import_immutable4.Set)(),
+  sorted: [],
+  tracks: [],
+  size: 0,
+  pos: 0,
+  isSorted: false,
+  mutable: false
+};
+var Layer = class extends (0, import_immutable4.Record)(defLayerData) {
+  static prefix = "l:";
+  mut(g) {
+    if (this.mutable) return this;
+    return g.mutateLayer(this);
+  }
+  final() {
+    if (!this.mutable) return this;
+    return this.merge({
+      nodeIds: this.nodeIds.asImmutable(),
+      mutable: false
+    }).asImmutable();
+  }
+  get size() {
+    return this.nodeIds.size;
+  }
+  *nodes(g) {
+    for (const nodeId of this.nodeIds.values())
+      yield g.getNode(nodeId);
+  }
+  hasSortOrder(order) {
+    return order.length == this.sorted.length && this.sorted.every((nodeId, i) => order[i] == nodeId);
+  }
+  canCrush(g) {
+    for (const node of this.nodes(g))
+      if (!node.isDummy)
+        return false;
+    return true;
+  }
+  crush(g) {
+    g.layerList.remove(this.index);
+    g.layers.delete(this.id);
+    g.dirtyLayers.delete(this.id);
+    for (let i = this.index; i < g.layerList.size; i++)
+      g.getLayer(g.layerList.get(i)).setIndex(g, i);
+    for (const node of this.nodes(g))
+      if (node.isDummy) node.delSelf(g);
+    return null;
+  }
+  setIndex(g, index) {
+    if (this.index == index) return this;
+    return this.mut(g).set("index", index);
+  }
+  setTracks(g, tracks) {
+    if (this.tracks == tracks) return this;
+    return this.mut(g).set("tracks", tracks);
+  }
+  setSize(g, size) {
+    if (this.size == size) return this;
+    return this.mut(g).set("size", size);
+  }
+  setPos(g, pos) {
+    if (this.pos == pos) return this;
+    return this.mut(g).set("pos", pos);
+  }
+  addNode(g, nodeId) {
+    if (this.nodeIds.has(nodeId)) return this;
+    return this.mut(g).set("nodeIds", this.nodeIds.asMutable().add(nodeId));
+  }
+  willCrush(g, nodeId) {
+    for (const node of this.nodes(g))
+      if (!node.isDummy && node.id != nodeId)
+        return false;
+    return true;
+  }
+  reindex(g, nodeId) {
+    if (!this.isSorted) return void 0;
+    const sorted = this.sorted.filter((id) => id != nodeId);
+    const idx = this.sorted.findIndex((id) => id == nodeId);
+    for (let i = idx; i < sorted.length; i++)
+      g.getNode(sorted[i]).setIndex(g, i);
+    return sorted;
+  }
+  delNode(g, nodeId) {
+    if (!this.nodeIds.has(nodeId)) return this;
+    if (this.willCrush(g, nodeId)) return this.crush(g);
+    const nodeIds = this.nodeIds.asMutable().remove(nodeId);
+    const sorted = this.reindex(g, nodeId);
+    return this.mut(g).merge({ nodeIds, sorted });
+  }
+  setSorted(g, nodeIds) {
+    if (this.hasSortOrder(nodeIds)) return this;
+    nodeIds.forEach((nodeId, i) => g.getNode(nodeId).setIndex(g, i));
+    return this.mut(g).merge({ sorted: nodeIds, isSorted: true });
+  }
+  *outEdges(g) {
+    for (const node of this.nodes(g))
+      yield* node.outEdges(g);
+  }
+};
+
+// src/graph/mutator.ts
+var Mutator = class {
+  changes;
+  constructor() {
+    this.changes = {
+      addedNodes: [],
+      removedNodes: [],
+      updatedNodes: [],
+      addedEdges: [],
+      removedEdges: [],
+      updatedEdges: []
     };
-    mut();
-  },
-  /**
-   * Update the graph by applying changes and updating
-   * the computed graph state.
-   */
-  _update() {
-    if (!this._dirty) return;
-    this._mutate(() => {
-      this._applyChanges();
-      this._checkCycles();
-      this._updateLayers();
-      this._updateDummies();
-      this._mergeDummies();
-      this._positionNodes();
-      this._alignAll();
-    });
-    this._dirty = false;
-  },
-  /**
-   * Mark a node as dirty if it exists in the graph.
-   * 
-   * @param {string} nodeId - Node ID
-   */
-  _markDirty(nodeId) {
-    if (this.nodes.has(nodeId))
-      this._dirtyNodes.add(nodeId);
-  },
-  /**
-   * Apply node and edge changes to the graph
-   */
-  _applyChanges() {
-    for (const node of this.changes.addedNodes)
-      this._addNode(node);
-    for (const node of this.changes.removedNodes)
-      this._deleteNode(node.id);
-    for (const edge of this.changes.addedEdges)
-      this._addEdge(edge);
-    for (const edge of this.changes.removedEdges)
-      this._deleteEdge(edge.id ?? this._edgeId(edge));
+  }
+  describe(description) {
+    this.changes.description = description;
+  }
+  addNode(node) {
+    this.changes.addedNodes.push(node);
+  }
+  addNodes(...nodes) {
+    nodes.forEach((node) => this.addNode(node));
+  }
+  removeNode(node) {
+    this.changes.removedNodes.push(node);
+  }
+  removeNodes(...nodes) {
+    nodes.forEach((node) => this.removeNode(node));
+  }
+  updateNode(node) {
+    this.changes.updatedNodes.push(node);
+  }
+  updateNodes(...nodes) {
+    nodes.forEach((node) => this.updateNode(node));
+  }
+  addEdge(edge) {
+    this.changes.addedEdges.push(edge);
+  }
+  addEdges(...edges) {
+    edges.forEach((edge) => this.addEdge(edge));
+  }
+  removeEdge(edge) {
+    this.changes.removedEdges.push(edge);
+  }
+  removeEdges(...edges) {
+    edges.forEach((edge) => this.removeEdge(edge));
+  }
+  updateEdge(edge) {
+    this.changes.updatedEdges.push(edge);
+  }
+  updateEdges(...edges) {
+    edges.forEach((edge) => this.updateEdge(edge));
   }
 };
 
-// src/graph-cycle.js
-var GraphCycle = {
-  /**
-   * Get the cycle info for a node
-   * 
-   * @param {string} nodeId - Node ID
-   * @returns {string} The cycle info
-   */
-  _cycleInfo(nodeId) {
-    return nodeId;
-  },
-  /**
-   * Check for cycles in the graph. If any are detected, throw an error.
-   * Depending on the size of the graph and the number of changes, use
-   * different algorithms.
-   */
-  _checkCycles() {
-    const totalNodes = this.nodes.size;
-    const newStuff = this.changes.addedNodes.length + this.changes.addedEdges.length;
+// src/graph/services/cycles.ts
+var Cycles = class _Cycles {
+  static info(g, node) {
+    return node.id;
+  }
+  static checkCycles(g) {
+    const totalNodes = g.nodes.size;
+    const newStuff = g.changes.addedNodes.length + g.changes.addedEdges.length;
     const changeRatio = newStuff / totalNodes;
     if (changeRatio > 0.2 || totalNodes < 20)
-      this._checkCyclesFull();
+      _Cycles.checkCyclesFull(g);
     else
-      this._checkCyclesIncremental();
-  },
-  /**
-   * Use a graph traversal algorithm to check for cycles.
-   */
-  _checkCyclesFull() {
+      _Cycles.checkCyclesIncremental(g);
+  }
+  static checkCyclesFull(g) {
     const colorMap = /* @__PURE__ */ new Map();
     const parentMap = /* @__PURE__ */ new Map();
-    const white = 0, gray = 1, black = 2;
     let start, end;
-    const visit = (nodeId2) => {
-      colorMap.set(nodeId2, gray);
-      for (const nextId of this._adjIds(nodeId2, "edges", "out")) {
-        switch (colorMap.get(nextId) ?? white) {
+    const white = 0, gray = 1, black = 2;
+    const visit = (node2) => {
+      colorMap.set(node2, gray);
+      for (const next of node2.outNodes(g)) {
+        switch (colorMap.get(next) ?? white) {
           case gray:
-            start = nextId;
-            end = nodeId2;
+            start = next;
+            end = node2;
             return true;
           case white:
-            parentMap.set(nextId, nodeId2);
-            if (visit(nextId)) return true;
+            parentMap.set(next, node2);
+            if (visit(next)) return true;
         }
       }
-      colorMap.set(nodeId2, black);
+      colorMap.set(node2, black);
       return false;
     };
-    for (const nodeId2 of this._nodeIds())
-      if ((colorMap.get(nodeId2) ?? white) == white) {
-        if (visit(nodeId2)) break;
+    for (const node2 of g.getNodes())
+      if ((colorMap.get(node2) ?? white) == white) {
+        if (visit(node2)) break;
       }
-    if (!start) return;
-    const cycle = [this._cycleInfo(start)];
-    let nodeId = end;
-    while (nodeId != start) {
-      cycle.push(this._cycleInfo(nodeId));
-      nodeId = parentMap.get(nodeId);
+    if (!start || !end) return;
+    const cycle = [start];
+    let node = end;
+    while (node != start) {
+      cycle.push(node);
+      node = parentMap.get(node);
     }
-    cycle.push(this._cycleInfo(start));
-    cycle.reverse();
-    const error = new Error(`Cycle detected: ${cycle.join(" \u2192 ")}`);
-    error.cycle = cycle;
-    throw error;
-  },
-  /**
-   * Check for cycles in the graph incrementally. For each potential
-   * new edge, if the source is < the target, there won't be a cycle.
-   * Otherwise, check if there is a route from the target to the source;
-   * if so, throw an error.
-   */
-  _checkCyclesIncremental() {
-    for (const edge of this.changes.addedEdges) {
-      const layer1 = this._nodeLayerIndex(edge.source.id);
-      const layer2 = this._nodeLayerIndex(edge.target.id);
+    _Cycles.throwCycle(g, cycle);
+  }
+  static checkCyclesIncremental(g) {
+    for (const edge of g.changes.addedEdges) {
+      const source = g.getNode(edge.source.id);
+      const target = g.getNode(edge.target.id);
+      const layer1 = source.layerIndex(g);
+      const layer2 = target.layerIndex(g);
       if (layer1 < layer2) continue;
-      const route = this._findRoute(edge.target.id, edge.source.id);
+      const route = _Cycles.findRoute(g, target, source);
       if (!route) continue;
-      const cycle = route.map((id) => this._cycleInfo(id));
-      cycle.reverse();
-      const error = new Error(`Cycle detected: ${cycle.join(" \u2192 ")}`);
-      error.cycle = cycle;
-      throw error;
+      _Cycles.throwCycle(g, route);
     }
-  },
-  /**
-   * Find a route from the source to the target.
-   * 
-   * @param {string} sourceId - Source node ID
-   * @param {string} targetId - Target node ID
-   * @returns {Array} The route, or null if no route exists
-   */
-  _findRoute(sourceId, targetId) {
+  }
+  static throwCycle(g, cycle) {
+    cycle.push(cycle[0]);
+    cycle.reverse();
+    const info = cycle.map((node) => _Cycles.info(g, node));
+    throw new Error(`Cycle detected: ${info.join(" \u2192 ")}`);
+  }
+  static findRoute(g, source, target) {
     const parentMap = /* @__PURE__ */ new Map();
-    const queue = [sourceId];
-    const visited = /* @__PURE__ */ new Set([sourceId]);
+    const queue = [source];
+    const visited = /* @__PURE__ */ new Set([source]);
     while (queue.length > 0) {
-      const nodeId = queue.shift();
-      if (nodeId == targetId) {
+      const node = queue.shift();
+      if (node == target) {
         const route = [];
-        let currId = targetId;
-        while (currId != sourceId) {
-          route.push(currId);
-          currId = parentMap.get(currId);
+        let currNode = target;
+        while (currNode != source) {
+          route.push(currNode);
+          currNode = parentMap.get(currNode);
         }
-        route.push(sourceId);
+        route.push(source);
         route.reverse();
         return route;
       }
-      for (const nextId of this._adjIds(nodeId, "edges", "out")) {
-        if (!visited.has(nextId)) {
-          visited.add(nextId);
-          parentMap.set(nextId, nodeId);
-          queue.push(nextId);
+      for (const next of node.outNodes(g)) {
+        if (!visited.has(next)) {
+          visited.add(next);
+          parentMap.set(next, node);
+          queue.push(next);
         }
       }
     }
@@ -1071,51 +818,42 @@ var GraphCycle = {
   }
 };
 
-// src/graph-dummy.js
-var import_immutable3 = require("immutable");
-var log5 = logger("dummy");
-var GraphDummy = {
-  /**
-   * Update dummy nodes and segments. Dummy nodes are inserted along
-   * edges that span multiple layers. Segments are one-hop connections
-   * between adjacent layers. Edges store an array of their segment IDs.
-   * Since segments can be re-used once dummies are merged, the segments
-   * also store a set of the edges that use them.
-   */
-  _updateDummies() {
-    for (const edgeId of this._dirtyEdges) {
-      const edge = this.getEdge(edgeId);
-      const { type } = edge;
-      const sourceLayer = this._nodeLayerIndex(edge.source.id);
-      const targetLayer = this._nodeLayerIndex(edge.target.id);
+// src/graph/services/dummy.ts
+var import_immutable5 = require("immutable");
+var log4 = logger("dummy");
+var Dummy = class _Dummy {
+  static updateDummies(g) {
+    for (const edgeId of g.dirtyEdges) {
+      const edge = g.getEdge(edgeId);
+      const { type, style } = edge;
+      const sourceLayer = edge.sourceNode(g).layerIndex(g);
+      const targetLayer = edge.targetNode(g).layerIndex(g);
       let segIndex = 0;
       let changed = false;
       let source = edge.source;
-      const segs = edge.segs;
+      const segs = edge.segIds;
       for (let layerIndex = sourceLayer + 1; layerIndex <= targetLayer; layerIndex++) {
-        const layer = this._layerAtIndex(layerIndex);
+        const layer = g.layerAt(layerIndex);
         while (true) {
           const segId = segs[segIndex];
-          let seg = segId ? this.getSeg(segId) : null;
-          const segLayer = seg ? this._nodeLayerIndex(seg.target.id) : null;
+          let seg = segId ? g.getSeg(segId) : null;
+          const segLayer = seg ? seg.targetNode(g).layerIndex(g) : null;
           if (segIndex == segs.length || segLayer > layerIndex) {
             let target;
             if (layerIndex == targetLayer) {
               target = edge.target;
             } else {
-              const dummy = this._addDummy({
-                edgeId,
+              const dummy = Node.addDummy(g, {
+                edgeIds: [edgeId],
                 layerId: layer.id
               });
-              target = { ...target, id: dummy.id };
+              target = { id: dummy.id };
             }
-            seg = this._addSeg({ source, target, type, edges: (0, import_immutable3.Set)([edgeId]) });
-            log5.debug(`edge ${edgeId}: adding segment ${seg.id} from ${source.id} at layer ${layerIndex - 1} to ${target.id} at layer ${layerIndex}`);
+            seg = Seg.add(g, { source, target, type, style, edgeIds: (0, import_immutable5.Set)([edgeId]) });
             segs.splice(segIndex, 0, seg.id);
             changed = true;
           } else if (segLayer < layerIndex || seg.source.id != source.id || seg.source.port != source.port || layerIndex == targetLayer && (seg.target.id != edge.target.id || seg.target.port != edge.target.port)) {
-            log5.debug(`edge ${edgeId}: removing segment ${seg.id} from layer ${layerIndex - 1} to layer ${layerIndex}`);
-            this._segDeleteEdge(segId, edgeId);
+            seg = seg.delEdgeId(g, edgeId);
             segs.splice(segIndex, 1);
             changed = true;
             continue;
@@ -1126,68 +864,67 @@ var GraphDummy = {
         }
       }
       while (segIndex < segs.length) {
-        log5.debug(`edge ${edgeId}: removing trailing segment ${segs[segIndex]}`);
-        this._segDeleteEdge(segs[segIndex], edgeId);
+        g.getSeg(segs[segIndex]).delEdgeId(g, edgeId);
         segs.splice(segIndex, 1);
         changed = true;
         segIndex++;
       }
       if (changed) {
-        log5.debug(`edge ${edgeId}: updated segments to ${segs.join(", ")}`);
-        this.edges.set(edgeId, { ...edge, segs });
+        edge.setSegIds(g, segs);
       }
     }
-  },
-  _mergeDummies() {
-    for (const side of this.options.mergeOrder)
-      this._mergeScan(side);
-  },
-  _mergeScan(side) {
-    let layers = [...this.layerList];
-    if (side == "target") layers.reverse();
+  }
+  static mergeDummies(g) {
+    for (const side of g.options.mergeOrder)
+      _Dummy.mergeScan(g, side);
+  }
+  static mergeScan(g, side) {
+    let layerIds = [...g.layerList].filter((layerId) => g.dirtyLayers.has(layerId));
+    if (side == "target") layerIds.reverse();
     const dir = side == "source" ? "in" : "out";
     const altSide = side == "source" ? "target" : "source";
     const altDir = altSide == "source" ? "in" : "out";
-    log5.debug(`merging dummies by ${side}`);
-    for (const layerId of layers) {
-      let layer = this.layers.get(layerId);
+    for (const layerId of layerIds) {
+      let layer = g.getLayer(layerId);
       const groups = /* @__PURE__ */ new Map();
-      for (const nodeId of layer.nodes) {
-        if (!this._isDummyId(nodeId)) continue;
-        const node = this.getNode(nodeId);
-        if (node.merged) continue;
-        const edge = this.getEdge(node.edgeId);
-        const key = this._edgeSegId(edge, "k", side);
+      for (const nodeId of layer.nodeIds) {
+        if (!Node.isDummyId(nodeId)) continue;
+        const node = g.getNode(nodeId);
+        if (node.isMerged) continue;
+        const edge = g.getEdge(node.edgeIds[0]);
+        const key = Edge.key(edge, "k:", side);
         if (!groups.has(key)) groups.set(key, /* @__PURE__ */ new Set());
         groups.get(key).add(node);
       }
       for (const [key, group] of groups) {
         if (group.size == 1) continue;
         const edgeIds = [...group].map((node) => node.edgeId);
-        const dummy = this._addDummy({ edgeIds, layerId, merged: true });
+        const dummy = Node.addDummy(g, { edgeIds, layerId, isMerged: true });
         let seg;
         for (const old of group) {
-          for (const segId of this._relIds(old.id, "segs", dir)) {
+          let edge = g.getEdge(old.edgeIds[0]);
+          for (const segId of old.relIds("segs", dir)) {
             if (!seg) {
-              const example = this.getSeg(segId);
-              seg = this._addSeg({
+              const example = g.getSeg(segId);
+              seg = Seg.add(g, {
                 ...example,
-                edges: (0, import_immutable3.Set)([old.edgeId]),
+                edgeIds: (0, import_immutable5.Set)([old.edgeId]),
                 [altSide]: { ...example[altSide], id: dummy.id }
               });
             }
-            this._edgeReplaceSeg(old.edgeId, segId, seg.id);
+            edge = edge.replaceSegId(g, segId, seg.id);
           }
         }
         for (const old of group) {
-          for (const segId of this._relIds(old.id, "segs", altDir)) {
-            const example = this.getSeg(segId);
-            const seg2 = this._addSeg({
+          let edge = g.getEdge(old.edgeIds[0]);
+          for (const segId of old.relIds("segs", altDir)) {
+            const example = g.getSeg(segId);
+            const seg2 = Seg.add(g, {
               ...example,
-              edges: (0, import_immutable3.Set)([old.edgeId]),
+              edgeIds: (0, import_immutable5.Set)([old.edgeId]),
               [side]: { ...example[side], id: dummy.id }
             });
-            this._edgeReplaceSeg(old.edgeId, segId, seg2.id);
+            edge = edge.replaceSegId(g, segId, seg2.id);
           }
         }
       }
@@ -1195,209 +932,191 @@ var GraphDummy = {
   }
 };
 
-// src/graph-pos.js
-var import_immutable4 = require("immutable");
-var log6 = logger("pos");
-var GraphPos = {
-  /**
-   * Find the minimum index of incoming edges to a node
-   * 
-   * @param {Object} node - Node
-   * @returns {number} The minimum index of incoming edges
-   */
-  _parentIndex(node) {
-    const parents = (0, import_immutable4.Seq)(this._adjs(node.id, "segs", "in"));
+// src/graph/services/layers.ts
+var import_immutable6 = require("immutable");
+var log5 = logger("layers");
+var Layers = class {
+  static updateLayers(g) {
+    const stack = [...g.dirtyNodes].map((id) => g.getNode(id)).filter((node) => !node.isDummy).sort((a, b) => b.layerIndex(g) - a.layerIndex(g)).map((node) => node.id);
+    const phase2 = new Set(stack);
+    const moved = /* @__PURE__ */ new Set();
+    while (stack.length > 0) {
+      let node = g.getNode(stack.pop());
+      const curLayer = node.layerIndex(g);
+      let correctLayer = 0;
+      const parents = node.inNodes(g);
+      for (const parent of parents) {
+        const pidx = parent.layerIndex(g);
+        if (pidx >= correctLayer) correctLayer = pidx + 1;
+      }
+      if (curLayer != correctLayer) {
+        node = node.moveToLayerIndex(g, correctLayer);
+        stack.push(...node.outNodeIds(g));
+        moved.add(node.id);
+        for (const parent of parents)
+          phase2.add(parent.id);
+      }
+    }
+    const byLayer = /* @__PURE__ */ new Map();
+    const addParent = (nodeId) => {
+      let set;
+      const layerId = g.getNode(nodeId).layerId;
+      if (!byLayer.has(layerId)) {
+        set = /* @__PURE__ */ new Set();
+        byLayer.set(layerId, set);
+      } else {
+        set = byLayer.get(layerId);
+      }
+      set.add(nodeId);
+    };
+    for (const id of phase2) addParent(id);
+    const layerIds = [...byLayer.keys()].sort(
+      (a, b) => g.getLayer(b).index - g.getLayer(a).index
+    );
+    for (const layerId of layerIds) {
+      const curLayer = g.getLayer(layerId).index;
+      for (const parentId of byLayer.get(layerId)) {
+        let parent = g.getNode(parentId);
+        const children = [...parent.outNodes(g)];
+        if (children.length == 0) continue;
+        const minChild = (0, import_immutable6.Seq)(children).map((node) => node.layerIndex(g)).min();
+        const correctLayer = minChild - 1;
+        if (curLayer != correctLayer) {
+          moved.add(parentId);
+          parent = parent.moveToLayerIndex(g, correctLayer);
+          for (const gpId of parent.inNodeIds(g))
+            addParent(gpId);
+        }
+      }
+    }
+    for (const id of moved)
+      for (const edgeId of g.getNode(id).relIds("edges"))
+        g.dirtyEdges.add(edgeId);
+  }
+};
+
+// src/graph/services/layout.ts
+var import_immutable7 = require("immutable");
+var log6 = logger("layout");
+var Layout = class _Layout {
+  static parentIndex(g, node) {
+    const parents = (0, import_immutable7.Seq)([...node.adjs(g, "segs", "in")]);
     const pidx = parents.map((p) => p.index).min();
-    log6.debug(`node ${node.id}: parent index ${pidx}`);
     if (pidx !== void 0) return pidx;
     return node.isDummy ? -Infinity : Infinity;
-  },
-  /**
-   * Compare two nodes based on their parent index and natural ordering
-   * 
-   * @param {Object} aId - First node ID
-   * @param {Object} bId - Second node ID
-   * @returns {number} -1, 0, or 1
-   */
-  _compareNodes(aId, bId, pidxs) {
+  }
+  static compareNodes(g, aId, bId, pidxs) {
     const ai = pidxs.get(aId);
     const bi = pidxs.get(bId);
     if (ai !== bi) return ai - bi;
-    const a = this.getNode(aId);
-    const b = this.getNode(bId);
+    const a = g.getNode(aId);
+    const b = g.getNode(bId);
     if (a.isDummy && !b.isDummy) return -1;
     if (!a.isDummy && b.isDummy) return 1;
     if (!a.isDummy) return a.id.localeCompare(b.id);
-    const minA = a.edgeId ?? (0, import_immutable4.Seq)(a.edgeIds).min();
-    const minB = b.edgeId ?? (0, import_immutable4.Seq)(b.edgeIds).min();
+    const minA = a.edgeId ?? (0, import_immutable7.Seq)(a.edgeIds).min();
+    const minB = b.edgeId ?? (0, import_immutable7.Seq)(b.edgeIds).min();
     return minA.localeCompare(minB);
-  },
-  /**
-   * Does a first pass of assigning X and Y positions to nodes.
-   * Nodes in each layer are ordered first by the order of their parents, and
-   * then by comparing their natural ordering. The Y position is assigned based
-   * on the layer index, and the X position is assigned based on the node index
-   * within the layer.
-   */
-  _positionNodes() {
-    var _a;
-    for (const nodeId of this._dirtyNodes) {
-      const node = this.nodes.get(nodeId);
-      if (!node) continue;
-      const layerId = node.layerId;
-      this.dirtyLayers.add(layerId);
-    }
+  }
+  static positionNodes(g) {
+    for (const nodeId of g.dirtyNodes)
+      g.dirtyLayers.add(g.getNode(nodeId).layerId);
     let adjustNext = false;
-    for (const layerId of this.layerList) {
-      if (!adjustNext && !this.dirtyLayers.has(layerId)) continue;
+    for (const layerId of g.layerList) {
+      if (!adjustNext && !g.dirtyLayers.has(layerId)) continue;
       adjustNext = false;
-      const layer = this.getLayer(layerId);
+      let layer = g.getLayer(layerId);
       const pidxs = /* @__PURE__ */ new Map();
-      for (const nodeId of layer.nodes)
-        pidxs.set(nodeId, this._parentIndex(this.getNode(nodeId)));
-      const sorted = [...layer.nodes].sort((a, b) => this._compareNodes(a, b, pidxs));
-      if (layer.sorted && sorted.every((nodeId, i) => layer.sorted[i] == nodeId)) continue;
-      this.dirtyLayers.add(layerId);
-      this.layers.set(layerId, { ...layer, sorted });
+      for (const nodeId of layer.nodeIds)
+        pidxs.set(nodeId, _Layout.parentIndex(g, g.getNode(nodeId)));
+      const sorted = [...layer.nodeIds].sort(
+        (aId, bId) => _Layout.compareNodes(g, aId, bId, pidxs)
+      );
+      if (layer.hasSortOrder(sorted)) continue;
+      g.dirtyLayers.add(layerId);
+      layer = layer.setSorted(g, sorted);
       adjustNext = true;
       let lpos = 0;
       for (let i = 0; i < sorted.length; i++) {
-        const node = this.getNode(sorted[i]);
-        log6.debug(`node ${node.id}: final index ${i}`);
-        this.nodes.set(node.id, { ...node, index: i, lpos });
-        const size = ((_a = node.dims) == null ? void 0 : _a[this._width]) ?? 0;
-        lpos += size + this.options.nodeMargin;
+        let node = g.getNode(sorted[i]);
+        node = node.setIndex(g, i).setLayerPos(g, lpos);
+        const size = node.dims?.[g.w] ?? 0;
+        lpos += size + g.options.nodeMargin;
       }
     }
-  },
-  /** 
-   * Align the nodes based on either a specified procedure, or a default procedure,
-   * which consists of a number of iterations of:
-   * 
-   *  - Align children to parents
-   *  - Align parents to children
-   *  - Compact layout
-   */
-  _alignAll() {
-    if (this.options.layoutSteps !== void 0) {
-      for (const step of this.options.layoutSteps)
-        this[`_${step}`]();
+  }
+  static alignAll(g) {
+    if (g.options.layoutSteps) {
+      for (const step of g.options.layoutSteps)
+        _Layout[step](g);
     } else {
-      for (let i = 0; i < this.options.alignIterations; i++) {
-        let anyChanged = this._alignChildren() || this._alignParents() || this._compact();
+      for (let i = 0; i < g.options.alignIterations; i++) {
+        let anyChanged = _Layout.alignChildren(g) || _Layout.alignParents(g) || _Layout.compact(g);
         if (!anyChanged) break;
       }
     }
-    return this;
-  },
-  // Align children to their parents.
-  // 
-  //  - Sweep layers first to last
-  //  - Sweep nodes left to right
-  //  - Move nodes only to the right
-  //  - On overlap, shift the colliding nodes to the right
-  _alignChildren() {
-    return this._alignNodes(false, false, false, "in", false);
-  },
-  // Align parents to their children.
-  // 
-  //  - Sweep layers last to first
-  //  - Sweep nodes right to left
-  //  - Move nodes only to the left
-  //  - On overlap, abort the shift
-  _alignParents() {
-    return this._alignNodes(true, true, false, "out", true);
-  },
-  /**
-   * Aligns nodes in each layer, attempting to align child nodes
-   * with their parents (or vice versa). If this causes nodes to overlap as
-   * a result, they are pushed to the right (or left, depending on reverseMove).
-   * However, if conservative is true, nodes will only be moved if they would
-   * not cause a collision with another node.
-   * 
-   * "Aligned" means that the edge between the nodes is straight. This could mean
-   * the nodes themselves are not aligned, if they have different anchor positions.
-   * 
-   * @param {boolean} reverseLayers - Whether to reverse the order of layers
-   * @param {boolean} reverseNodes - Whether to reverse the order of nodes within each layer
-   * @param {boolean} reverseMove - Whether to move nodes to the left or right
-   * @param {'in' | 'out'} dir - Whether to align nodes based on incoming or outgoing edges
-   * @param {boolean} conservative - Whether to move nodes only if they would not cause a collision
-   */
-  _alignNodes(reverseLayers, reverseNodes, reverseMove, dir, conservative) {
-    let layerIds = [...this.layerList];
+  }
+  static alignChildren(g) {
+    return _Layout.alignNodes(g, false, false, false, "in", false);
+  }
+  static alignParents(g) {
+    return _Layout.alignNodes(g, true, true, false, "out", true);
+  }
+  static alignNodes(g, reverseLayers, reverseNodes, reverseMove, dir, conservative) {
+    let layerIds = [...g.layerList];
     let anyChanged = false;
     if (reverseLayers) layerIds.reverse();
     let adjustNext = false;
     for (const layerId of layerIds) {
-      if (!adjustNext && !this.dirtyLayers.has(layerId)) continue;
+      if (!adjustNext && !g.dirtyLayers.has(layerId)) continue;
       adjustNext = false;
+      let iterations = 0;
       while (true) {
+        if (++iterations > 10) {
+          log6.error(`alignNodes: infinite loop detected in layer ${layerId}`);
+          break;
+        }
         let changed = false;
-        const nodeIds = this._sortLayer(layerId, reverseNodes);
+        const nodeIds = _Layout.sortLayer(g, layerId, reverseNodes);
         for (const nodeId of nodeIds) {
-          const { isAligned, pos: newPos, nodeId: otherId } = this._nearestNode(nodeId, dir, reverseMove, !reverseMove);
+          const {
+            isAligned,
+            pos: newPos,
+            nodeId: otherId
+          } = _Layout.nearestNode(g, nodeId, dir, reverseMove, !reverseMove);
           if (isAligned || newPos === void 0) continue;
-          if (this._shiftNode(nodeId, otherId, dir, newPos, reverseMove, conservative)) {
+          if (_Layout.shiftNode(g, nodeId, otherId, dir, newPos, reverseMove, conservative)) {
             changed = true;
             anyChanged = true;
             break;
           }
         }
         if (!changed) break;
-        this.dirtyLayers.add(layerId);
+        g.dirtyLayers.add(layerId);
         adjustNext = true;
       }
     }
     return anyChanged;
-  },
-  /**
-   * Sort the nodes of a layer by their position and store
-   * on layer.sorted. Return the sorted array, reversed if requested.
-   * 
-   * @param {string} layerId - The ID of the layer to sort
-   * @param {boolean} reverseNodes - Whether to reverse the order of nodes within the layer
-   * @returns {string[]} The sorted array of node IDs
-   */
-  _sortLayer(layerId, reverseNodes) {
-    const layer = this.getLayer(layerId);
-    const sorted = [...layer.nodes];
-    sorted.sort((a, b) => this.getNode(a).lpos - this.getNode(b).lpos);
-    if (!sorted.every((nodeId, i) => layer.sorted[i] == nodeId)) {
-      this.dirtyLayers.add(layerId);
-      this.layers.set(layerId, { ...layer, sorted });
-      for (let i = 0; i < sorted.length; i++) {
-        const node = this.getNode(sorted[i]);
-        if (node.index !== i)
-          this.nodes.set(sorted[i], { ...node, index: i });
-      }
-    }
+  }
+  static sortLayer(g, layerId, reverseNodes) {
+    const layer = g.getLayer(layerId);
+    const sorted = [...layer.nodeIds];
+    sorted.sort((a, b) => g.getNode(a).lpos - g.getNode(b).lpos);
+    layer.setSorted(g, sorted);
     if (reverseNodes)
       return sorted.toReversed();
     return sorted;
-  },
-  /**
-   * Find the nearest node in the given relation that is in the correct direction.
-   * If the nearest is already aligned, return isAligned: true. Nearest means that the anchor
-   * positions are close and in the right direction. Returns both the near node
-   * and the position to which the given node should move in order to be aligned.
-   * 
-   * @param {string} nodeId - The ID of the node to find the nearest node for
-   * @param {'in' | 'out'} dir - The direction to find the nearest node in
-   * @param {boolean} allowLeft - Whether to allow the nearest node to be to the left of the given node
-   * @param {boolean} allowRight - Whether to allow the nearest node to be to the right of the given node
-   * @returns {{ nodeId: string, pos: number, isAligned: boolean }} The nearest node and the position to which the given node should move
-   */
-  _nearestNode(nodeId, dir, allowLeft, allowRight) {
-    const node = this.getNode(nodeId);
+  }
+  static nearestNode(g, nodeId, dir, allowLeft, allowRight) {
+    const node = g.getNode(nodeId);
     let minDist = Infinity;
     let bestPos, bestNodeId;
     const mySide = dir == "in" ? "target" : "source";
     const altSide = dir == "in" ? "source" : "target";
-    for (const seg of this._rels(nodeId, "segs", dir)) {
+    for (const seg of node.rels(g, "segs", dir)) {
       const altId = seg[altSide].id;
-      const myPos = this._anchorPos(seg, mySide)[this._x];
-      const altPos = this._anchorPos(seg, altSide)[this._x];
+      const myPos = _Layout.anchorPos(g, seg, mySide)[g.x];
+      const altPos = _Layout.anchorPos(g, seg, altSide)[g.x];
       const diff = altPos - myPos;
       if (diff == 0) return { nodeId: altId, isAligned: true };
       if (diff < 0 && !allowLeft) continue;
@@ -1410,117 +1129,98 @@ var GraphPos = {
       }
     }
     return { nodeId: bestNodeId, pos: bestPos, isAligned: false };
-  },
-  /**
-   * Get the anchor point for an edge connection on a node
-   * 
-   * @param {Object} seg - The segment to get the anchor point for
-   * @param {'source' | 'target'} side - The side of the segment to get the anchor point for
-   * @returns {{ x: number, y: number }} The anchor point
-   */
-  _anchorPos(seg, side) {
-    var _a, _b;
-    const { _x, _y } = this;
+  }
+  static anchorPos(g, seg, side) {
     const nodeId = seg[side].id;
-    const node = this.getNode(nodeId);
-    let p = { [_x]: node.lpos, ...node.pos || {} };
-    let w = ((_a = node.dims) == null ? void 0 : _a[this._width]) ?? 0;
-    let h = ((_b = node.dims) == null ? void 0 : _b[this._height]) ?? 0;
+    const node = g.getNode(nodeId);
+    let p = { x: 0, y: 0, [g.x]: node.lpos, ...node.pos || {} };
+    let w = node.dims?.[g.w] ?? 0;
+    let h = node.dims?.[g.h] ?? 0;
     if (node.isDummy)
-      return { [_x]: p[_x] + w / 2, [_y]: p[_y] + h / 2 };
-    p[_x] += this._nodePortOffset(nodeId, seg[side].port);
-    if (side == "source" == this._reverse)
-      p[_y] += h;
+      return {
+        [g.x]: p[g.x] + w / 2,
+        [g.y]: p[g.y] + h / 2
+      };
+    p[g.x] += _Layout.nodePortOffset(g, nodeId, seg, side);
+    if (side == "target" == g.r)
+      p[g.y] += h;
     return p;
-  },
-  /**
-   * Return an offset for a node's port; port is optional.
-   * 
-   * @param {string} nodeId - Node ID to check
-   * @param {string} port - The port to compute offset for
-   */
-  _nodePortOffset(nodeId, port) {
-    if (!port) return this.options.defaultPortOffset;
-    return this.options.defaultPortOffset;
-  },
-  /** 
-   * Shift the node to the given x position, pushing it to the right (or left, depending on reverseMove).
-   * If conservative is true, nodes will only be moved if they would not cause a collision with another node.
-   * If a collision does occur, recursively move collided nodes to find a valid position. 
-   * If the shift is successful, this node and the aligned node are linked explicitly; if the aligned
-   * node was already set, it is unlinked first.
-   * 
-   * @param {string} nodeId - ID of node to shift
-   * @param {string} alignId - ID of node we're aligning to
-   * @param {'in' | 'out'} dir - Direction of aligned node from this node
-   * @param {number} lpos - Position within layer to shift node to
-   * @param {boolean} reverseMove - Whether to move nodes to the left or right
-   * @param {boolean} conservative - Whether to move nodes only if they would not cause a collision
-   */
-  _shiftNode(nodeId, alignId, dir, lpos, reverseMove, conservative) {
-    var _a, _b;
-    const node = this.getNode(nodeId);
+  }
+  static nodePortOffset(g, nodeId, seg, side) {
+    const node = g.getNode(nodeId);
+    const dir = side == "source" ? "out" : "in";
+    const portId = seg[side].port;
+    let min = 0, size = node.dims?.[g.w] ?? 0;
+    if (portId) {
+      const ports = node.ports?.[dir];
+      const port = ports?.find((p) => p.id === portId);
+      if (port?.offset !== void 0) {
+        min = port.offset;
+        size = port.size ?? 0;
+      }
+    }
+    const alt = side == "source" ? "target" : "source";
+    let segs = [];
+    const keyOf = (seg2) => `${seg2.type ?? ""}:${seg2[side].marker ?? ""}`;
+    for (const segId of node.segs[dir])
+      segs.push(g.getSeg(segId));
+    if (portId) segs = segs.filter((s) => s[side].port == portId);
+    const groups = Object.groupBy(segs, (s) => keyOf(s));
+    const posMap = /* @__PURE__ */ new Map();
+    for (const [key, segs2] of Object.entries(groups)) {
+      let pos = Infinity;
+      for (const seg2 of segs2) pos = Math.min(pos, seg2.node(g, alt).lpos);
+      posMap.set(key, pos);
+    }
+    const keys = [...posMap.keys()].sort((a, b) => posMap.get(a) - posMap.get(b));
+    const gap = size / (keys.length + 1);
+    const index = keys.indexOf(keyOf(seg));
+    return min + (index + 1) * gap;
+  }
+  static shiftNode(g, nodeId, alignId, dir, lpos, reverseMove, conservative) {
+    const node = g.getNode(nodeId);
+    log6.debug(`shift ${nodeId} (at ${node.lpos}) to ${alignId} (at ${lpos})`);
     if (!conservative)
-      this._markAligned(nodeId, alignId, dir, lpos);
-    const space = this.options.nodeMargin;
-    const nodeWidth = ((_a = node.dims) == null ? void 0 : _a[this._width]) ?? 0;
+      _Layout.markAligned(g, nodeId, alignId, dir, lpos);
+    const space = g.options.nodeMargin;
+    const nodeWidth = node.dims?.[g.w] ?? 0;
     const aMin = lpos - space, aMax = lpos + nodeWidth + space;
     repeat:
-      for (const otherId of this.getLayer(node.layerId).nodes) {
+      for (const otherId of node.getLayer(g).nodeIds) {
         if (otherId == nodeId) continue;
-        const other = this.getNode(otherId);
+        const other = g.getNode(otherId);
         const opos = other.lpos;
-        const otherWidth = ((_b = other.dims) == null ? void 0 : _b[this._width]) ?? 0;
+        const otherWidth = other.dims?.[g.w] ?? 0;
         const bMin = opos, bMax = opos + otherWidth;
         if (aMin < bMax && bMin < aMax) {
           if (conservative) return false;
           const safePos = reverseMove ? aMin - otherWidth : aMax;
-          this._shiftNode(otherId, void 0, dir, safePos, reverseMove, conservative);
+          _Layout.shiftNode(g, otherId, void 0, dir, safePos, reverseMove, conservative);
           continue repeat;
         }
       }
     if (conservative)
-      this._markAligned(nodeId, alignId, dir, lpos);
+      _Layout.markAligned(g, nodeId, alignId, dir, lpos);
     return true;
-  },
-  /**
-   * Mark nodes as aligned, unlinking any existing alignment.
-   * 
-   * @param {string} nodeId - Node being aligned
-   * @param {string} otherId - Node we're aligning to
-   * @param {'in' | 'out'} dir - direction of other from node
-   * @param {number} lpos - new layer position
-   */
-  _markAligned(nodeId, otherId, dir, lpos) {
-    const node = this.getNode(nodeId);
+  }
+  static markAligned(g, nodeId, otherId, dir, lpos) {
+    const node = g.getNode(nodeId);
     const alt = dir == "in" ? "out" : "in";
-    if (node.aligned[dir]) {
-      const ex = this.getNode(node.aligned[dir]);
-      this.nodes.set(node.aligned[dir], { ...ex, aligned: { ...ex.aligned, [alt]: void 0 } });
-    }
-    if (otherId) {
-      const other = this.getNode(otherId);
-      this.nodes.set(otherId, { ...other, aligned: { ...other.aligned, [alt]: nodeId } });
-    }
-    this.nodes.set(nodeId, { ...node, lpos, aligned: { [dir]: otherId, [alt]: void 0 } });
-  },
-  /**
-   * Iterate over all nodes aligned with the given node, including itself,
-   * exactly once.
-   * 
-   * @param {string} nodeId - Node ID
-   * @param {'in' | 'out' | 'both'} dir - direction of alignment
-   * @returns {Iterator<Object>} Iterator over aligned nodes
-   */
-  *_aligned(nodeId, dir) {
+    if (node.aligned[dir])
+      g.getNode(node.aligned[dir]).setAligned(g, alt, void 0);
+    if (otherId)
+      g.getNode(otherId).setAligned(g, alt, nodeId);
+    node.setAligned(g, dir, otherId).setLayerPos(g, lpos);
+  }
+  static *aligned(g, nodeId, dir) {
     const visit = function* (node2, dir2) {
       const otherId = node2.aligned[dir2];
       if (!otherId) return;
-      const other = this.getNode(otherId);
+      const other = g.getNode(otherId);
       yield other;
-      yield* visit.call(this, other, dir2);
-    }.bind(this);
-    const node = this.getNode(nodeId);
+      yield* visit(other, dir2);
+    };
+    const node = g.getNode(nodeId);
     yield node;
     if (dir == "both") {
       yield* visit(node, "in");
@@ -1528,121 +1228,1786 @@ var GraphPos = {
     } else {
       yield* visit(node, dir);
     }
-  },
-  /** 
-   * Get the node ID immediately to the left of the given node in the same layer
-   * 
-   * @param {Object} node - Node to get left of
-   * @returns {string | null} Node ID to the left of the given node, or null if there is none
-   */
-  _leftOf(node) {
+  }
+  static leftOf(g, node) {
     if (node.index == 0) return null;
-    return this.getLayer(node.layerId).sorted[node.index - 1];
-  },
-  /**
-   * Get the node id immediately to the right of the given node in the same layer
-   * 
-   * @param {Object} node - Node to get right of
-   * @returns {string | null} Node ID to the right of the given node, or null if there is none
-   */
-  _rightOf(node) {
-    const layer = this.getLayer(node.layerId);
+    return node.getLayer(g).sorted[node.index - 1];
+  }
+  static rightOf(g, node) {
+    const layer = node.getLayer(g);
     if (node.index == layer.sorted.length - 1) return null;
     return layer.sorted[node.index + 1];
-  },
-  /**
-   * Compact tries to eliminate empty space between nodes
-   */
-  _compact() {
-    var _a;
+  }
+  static compact(g) {
     let anyChanged = false;
-    for (const layerId of this.layerList) {
-      const layer = this.getLayer(layerId);
+    for (const layerId of g.layerList) {
+      const layer = g.getLayer(layerId);
       if (layer.sorted.length < 2) continue;
       for (const nodeId of layer.sorted) {
-        const node = this.getNode(nodeId);
+        const node = g.getNode(nodeId);
         if (node.index == 0) continue;
         let minGap = Infinity;
         const stack = [];
-        for (const right of this._aligned(nodeId, "both")) {
+        for (const right of _Layout.aligned(g, nodeId, "both")) {
           stack.push(right);
-          const leftId = this._leftOf(right);
+          const leftId = _Layout.leftOf(g, right);
           if (!leftId) return;
-          const left = this.getNode(leftId);
-          const leftWidth = ((_a = left.dims) == null ? void 0 : _a[this._width]) ?? 0;
+          const left = g.getNode(leftId);
+          const leftWidth = left.dims?.[g.w] ?? 0;
           const gap = right.lpos - left.lpos - leftWidth;
           if (gap < minGap) minGap = gap;
         }
-        const delta = minGap - this.options.nodeMargin;
+        const delta = minGap - g.options.nodeMargin;
         if (delta <= 0) continue;
         anyChanged = true;
         for (const right of stack)
-          this.nodes.set(right.id, { ...right, lpos: right.lpos - delta });
+          right.setLayerPos(g, right.lpos - delta);
       }
     }
     return anyChanged;
   }
+  static getCoords(g) {
+    let pos = 0;
+    const dir = g.r ? -1 : 1;
+    const trackSep = Math.max(
+      g.options.edgeSpacing,
+      g.options.turnRadius
+    );
+    const marginSep = Math.max(
+      g.options.edgeSpacing,
+      g.options.layerMargin,
+      g.options.turnRadius + g.options.markerSize
+    );
+    for (const layerId of g.layerList) {
+      let layer = g.getLayer(layerId);
+      let height;
+      if (g.dirtyLayers.has(layerId)) {
+        height = (0, import_immutable7.Seq)(layer.nodes(g)).map((node) => node.dims?.[g.h] ?? 0).max() ?? 0;
+        layer = layer.setSize(g, height);
+      } else height = layer.size;
+      for (const node of layer.nodes(g)) {
+        if (!g.dirtyNodes.has(node.id) && pos == layer.pos) continue;
+        const npos = { [g.x]: node.lpos, [g.y]: pos };
+        if (!g.n) npos[g.y] += dir * height;
+        if (g.r == g.n) npos[g.y] -= node.dims?.[g.h] ?? 0;
+        node.setPos(g, npos);
+      }
+      layer = layer.setPos(g, pos);
+      pos += dir * (height + marginSep);
+      for (const track of layer.tracks) {
+        for (const segId of track)
+          g.getSeg(segId).setTrackPos(g, pos);
+        pos += dir * trackSep;
+      }
+      pos += dir * (marginSep - trackSep);
+    }
+  }
 };
 
-// src/graph.js
-var Graph = class {
-  constructor({ prior, changes, options, nodes, edges } = {}) {
-    this.nodes = (prior == null ? void 0 : prior.nodes) ?? (0, import_immutable5.Map)();
-    this.edges = (prior == null ? void 0 : prior.edges) ?? (0, import_immutable5.Map)();
-    this.layers = (prior == null ? void 0 : prior.layers) ?? (0, import_immutable5.Map)();
-    this.layerList = (prior == null ? void 0 : prior.layerList) ?? (0, import_immutable5.List)();
-    this.segs = (prior == null ? void 0 : prior.segs) ?? (0, import_immutable5.Map)();
-    this.nextLayerId = (prior == null ? void 0 : prior.nextLayerId) ?? 0;
-    this.nextDummyId = (prior == null ? void 0 : prior.nextDummyId) ?? 0;
-    this._dirtyNodes = /* @__PURE__ */ new Set();
-    this._dirtyEdges = /* @__PURE__ */ new Set();
-    this.dirtyLayers = /* @__PURE__ */ new Set();
-    this.prior = prior;
-    this.options = {
-      ...defaultOptions,
-      ...(prior == null ? void 0 : prior.options) ?? {},
-      ...options ?? {}
+// src/canvas/marker.tsx
+var import_marker = __toESM(require("./marker.css?raw"), 1);
+var import_jsx_runtime = require("jsx-dom/jsx-runtime");
+function arrow(size, classPrefix, reverse = false) {
+  const h = size / 1.5;
+  const w = size;
+  const ry = h / 2;
+  const suffix = reverse ? "-reverse" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "marker",
+    {
+      id: `g3p-marker-arrow${suffix}`,
+      className: `${classPrefix}-marker ${classPrefix}-marker-arrow`,
+      markerWidth: size,
+      markerHeight: size,
+      refX: "2",
+      refY: ry,
+      orient: reverse ? "auto-start-reverse" : "auto",
+      markerUnits: "userSpaceOnUse",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: `M0,0 L0,${h} L${w},${ry} z` })
+    }
+  );
+}
+function circle(size, classPrefix, reverse = false) {
+  const r = size / 3;
+  const cy = size / 2;
+  const suffix = reverse ? "-reverse" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "marker",
+    {
+      id: `g3p-marker-circle${suffix}`,
+      className: `${classPrefix}-marker ${classPrefix}-marker-circle`,
+      markerWidth: size,
+      markerHeight: size,
+      refX: "2",
+      refY: cy,
+      orient: reverse ? "auto-start-reverse" : "auto",
+      markerUnits: "userSpaceOnUse",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: r + 2, cy, r })
+    }
+  );
+}
+function diamond(size, classPrefix, reverse = false) {
+  const w = size * 0.7;
+  const h = size / 2;
+  const cy = size / 2;
+  const suffix = reverse ? "-reverse" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "marker",
+    {
+      id: `g3p-marker-diamond${suffix}`,
+      className: `${classPrefix}-marker ${classPrefix}-marker-diamond`,
+      markerWidth: size,
+      markerHeight: size,
+      refX: "2",
+      refY: cy,
+      orient: reverse ? "auto-start-reverse" : "auto",
+      markerUnits: "userSpaceOnUse",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: `M2,${cy} L${2 + w / 2},${cy - h / 2} L${2 + w},${cy} L${2 + w / 2},${cy + h / 2} z` })
+    }
+  );
+}
+function bar(size, classPrefix, reverse = false) {
+  const h = size * 0.6;
+  const cy = size / 2;
+  const suffix = reverse ? "-reverse" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "marker",
+    {
+      id: `g3p-marker-bar${suffix}`,
+      className: `${classPrefix}-marker ${classPrefix}-marker-bar`,
+      markerWidth: size,
+      markerHeight: size,
+      refX: "2",
+      refY: cy,
+      orient: reverse ? "auto-start-reverse" : "auto",
+      markerUnits: "userSpaceOnUse",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2", y1: cy - h / 2, x2: "2", y2: cy + h / 2, "stroke-width": "2" })
+    }
+  );
+}
+function none(size, classPrefix, reverse = false) {
+  return void 0;
+}
+function normalize(data) {
+  let source = data.source?.marker ?? data.style?.marker?.source;
+  let target = data.target?.marker ?? data.style?.marker?.target ?? "arrow";
+  if (source == "none") source = void 0;
+  if (target == "none") target = void 0;
+  return { source, target };
+}
+var markerDefs = {
+  arrow,
+  circle,
+  diamond,
+  bar,
+  none
+};
+
+// src/graph/services/lines.ts
+var log7 = logger("lines");
+var Lines = class _Lines {
+  static layoutSeg(g, seg) {
+    const sourcePos = Layout.anchorPos(g, seg, "source");
+    const targetPos = Layout.anchorPos(g, seg, "target");
+    return seg.setPos(g, sourcePos[g.x], targetPos[g.x]);
+  }
+  static layerSegs(g, layer) {
+    const segs = [];
+    for (const node of layer.nodes(g))
+      for (const seg of node.outSegs(g))
+        segs.push(_Lines.layoutSeg(g, seg));
+    return segs;
+  }
+  static trackEdges(g) {
+    for (const segId of g.dirtySegs.values())
+      g.dirtyLayers.add(g.getSeg(segId).sourceNode(g).layerId);
+    const minLength = g.options.turnRadius * 2;
+    for (const layerId of g.dirtyLayers.values()) {
+      const layer = g.getLayer(layerId);
+      const leftTracks = [];
+      const rightTracks = [];
+      const allTracks = [];
+      const segs = _Lines.layerSegs(g, layer).sort((a, b) => a.p1 - b.p1);
+      for (const seg of segs) {
+        if (Math.abs(seg.p1 - seg.p2) < minLength) {
+          seg.setTrackPos(g, void 0);
+          continue;
+        }
+        let trackSet;
+        if (!g.options.separateTrackSets)
+          trackSet = allTracks;
+        else if (seg.p1 < seg.p2)
+          trackSet = rightTracks;
+        else
+          trackSet = leftTracks;
+        let validTrack;
+        for (let i = trackSet.length - 1; i >= 0; i--) {
+          const track = trackSet[i];
+          let overlap = false;
+          for (const other of track) {
+            if (seg.anySameEnd(other)) {
+              track.push(seg);
+              validTrack = track;
+              break;
+            }
+            if (other.p1 < seg.p2 && seg.p1 < other.p2) {
+              overlap = true;
+              break;
+            }
+          }
+          if (!overlap) {
+            validTrack = track;
+            break;
+          }
+        }
+        if (validTrack)
+          validTrack.push(seg);
+        else
+          trackSet.push([seg]);
+      }
+      const tracks = [];
+      const all = leftTracks.concat(rightTracks).concat(allTracks);
+      for (const track of all)
+        tracks.push(track.map((seg) => seg.id));
+      layer.setTracks(g, tracks);
+    }
+    return this;
+  }
+  static pathEdges(g) {
+    for (const seg of g.segs.values()) {
+      if (!g.dirtySegs.has(seg.id)) continue;
+      const radius = g.options.turnRadius;
+      const p1 = Layout.anchorPos(g, seg, "source");
+      const p2 = Layout.anchorPos(g, seg, "target");
+      const source = seg.sourceNode(g);
+      const target = seg.targetNode(g);
+      const marker = normalize(seg);
+      if (source.isDummy) marker.source = void 0;
+      if (target.isDummy) marker.target = void 0;
+      const path = seg.trackPos !== void 0 ? _Lines.createRailroadPath(g, p1, p2, seg.trackPos, radius, marker) : _Lines.createDirectPath(g, p1, p2, radius, marker);
+      const svg = _Lines.pathToSVG(path);
+      seg.setSVG(g, svg);
+    }
+    return this;
+  }
+  static pathLine(p1, p2, type, radius) {
+    if (p2.x === void 0) p2.x = p1.x;
+    if (p2.y === void 0) p2.y = p1.y;
+    if (p2.s === void 0) p2.s = p1.s;
+    const line = {
+      type,
+      x1: p1.x,
+      y1: p1.y,
+      x2: p2.x,
+      y2: p2.y
     };
-    this.changes = changes ?? {
-      addedNodes: [],
-      removedNodes: [],
-      addedEdges: [],
-      removedEdges: []
+    p1.x = p2.x;
+    p1.y = p2.y;
+    p1.s = p2.s;
+    if (type == "arc") {
+      line.radius = radius;
+      line.sweep = p1.s;
+    }
+    return line;
+  }
+  static pathBuilder(g, start, end, trackPos, radius, marker) {
+    const { x, y } = g;
+    const lr = end[x] > start[x];
+    const d = lr ? 1 : -1;
+    const o = g.r ? -1 : 1;
+    const rd = radius * d;
+    const ro = radius * o;
+    const t = trackPos;
+    let s = 0;
+    if (g.r) s = 1 - s;
+    if (!lr) s = 1 - s;
+    if (!g.v) s = 1 - s;
+    if (marker.source) start[y] += o * (g.options.markerSize - 1);
+    if (marker.target) end[y] -= o * (g.options.markerSize - 1);
+    const p = { ...start, s };
+    const path = [];
+    const advance = (p2, type) => {
+      path.push(this.pathLine(p, p2, type, radius));
     };
-    this.changes.addedNodes.push(...nodes || []);
-    this.changes.addedEdges.push(...edges || []);
-    this._dirty = this.changes.addedNodes.length > 0 || this.changes.removedNodes.length > 0 || this.changes.addedEdges.length > 0 || this.changes.removedEdges.length > 0;
-    this._reverse = this.options.orientation === "BT" || this.options.orientation === "RL";
-    this._vertical = this.options.orientation === "TB" || this.options.orientation === "BT";
-    this._height = this._vertical ? "height" : "width";
-    this._width = this._vertical ? "width" : "height";
-    this._x = this._vertical ? "x" : "y";
-    this._y = this._vertical ? "y" : "x";
-    this._d = {
-      x: this._vertical ? 0 : this._reverse ? -1 : 1,
-      y: this._vertical ? this._reverse ? -1 : 1 : 0
+    return { x, y, lr, d, o, rd, ro, t, s, p, path, advance };
+  }
+  // Create a railroad-style path with two 90-degree turns
+  static createRailroadPath(g, start, end, trackPos, radius, marker) {
+    const { x, y, rd, ro, t, s, p, path, advance } = this.pathBuilder(g, start, end, trackPos, radius, marker);
+    advance({ [y]: t - ro }, "line");
+    advance({ [x]: p[x] + rd, [y]: t }, "arc");
+    advance({ [x]: end[x] - rd }, "line");
+    advance({ [x]: end[x], [y]: t + ro, s: 1 - s }, "arc");
+    advance({ [y]: end[y] }, "line");
+    return path;
+  }
+  // Create a mostly-vertical path with optional S-curve
+  static createDirectPath(g, start, end, radius, marker) {
+    const { x, y, d, o, s, p, path, advance } = this.pathBuilder(g, start, end, 0, radius, marker);
+    const dx = Math.abs(end.x - start.x);
+    const dy = Math.abs(end.y - start.y);
+    const d_ = { x: dx, y: dy };
+    if (dx < 0.1) {
+      advance({ ...end }, "line");
+      return path;
+    }
+    const curve = _Lines.calculateSCurve(d_[x], d_[y], radius);
+    if (!curve || curve.Ly == 0) {
+      advance({ ...end }, "line");
+      return path;
+    }
+    const m = {
+      [x]: d * (d_[x] - curve.Lx) / 2,
+      [y]: o * (d_[y] - curve.Ly) / 2
+    };
+    advance({ [x]: p[x] + m[x], [y]: p[y] + m[y] }, "arc");
+    advance({ [x]: end[x] - m[x], [y]: end[y] - m[y] }, "line");
+    advance({ [x]: end[x], [y]: end[y], s: 1 - s }, "arc");
+    return path;
+  }
+  static solveSCurveAngle(dx, dy, r) {
+    const f = (alpha2) => {
+      return dx * Math.cos(alpha2) - dy * Math.sin(alpha2) - 2 * r * Math.cos(alpha2) + 2 * r;
+    };
+    const fPrime = (alpha2) => {
+      return -dx * Math.sin(alpha2) - dy * Math.cos(alpha2) + 2 * r * Math.sin(alpha2);
+    };
+    let alpha = Math.min(0.1, Math.abs(dx) / dy);
+    const maxIterations = 20;
+    const tolerance = 1e-6;
+    for (let i = 0; i < maxIterations; i++) {
+      const fVal = f(alpha);
+      const fPrimeVal = fPrime(alpha);
+      if (Math.abs(fVal) < tolerance) {
+        const Ly = dy - 2 * r * Math.sin(alpha);
+        if (Ly >= 0 && alpha > 0 && alpha < Math.PI / 2) {
+          return alpha;
+        }
+        return null;
+      }
+      if (Math.abs(fPrimeVal) < 1e-10) {
+        break;
+      }
+      const nextAlpha = alpha - fVal / fPrimeVal;
+      if (nextAlpha < 0 || nextAlpha > Math.PI / 2) {
+        break;
+      }
+      alpha = nextAlpha;
+    }
+    return null;
+  }
+  static calculateSCurve(dx, dy, r) {
+    const alpha = _Lines.solveSCurveAngle(dx, dy, r);
+    if (alpha === null) {
+      return null;
+    }
+    const Ly = dy - 2 * r * Math.sin(alpha);
+    const Lx = Ly * Math.tan(alpha);
+    const L = Ly / Math.cos(alpha);
+    return {
+      alpha,
+      // Angle of each arc (radians)
+      Lx,
+      // Horizontal component of straight section
+      Ly,
+      // Vertical component of straight section
+      L
+      // Length of straight section
+    };
+  }
+  static pathToSVG(path) {
+    if (!path || path.length === 0) return "";
+    const lines = [];
+    const first = path[0];
+    lines.push(`M ${first.x1},${first.y1}`);
+    for (const line of path) {
+      if (line.type === "line") {
+        lines.push(`L ${line.x2},${line.y2}`);
+      } else if (line.type === "arc") {
+        const r = line.radius;
+        const largeArc = 0;
+        const sweep = line.sweep || 0;
+        lines.push(`A ${r},${r} 0 ${largeArc} ${sweep} ${line.x2},${line.y2}`);
+      }
+    }
+    return lines.join(" ");
+  }
+};
+
+// src/graph/graph.ts
+var emptyChanges = {
+  addedNodes: [],
+  removedNodes: [],
+  updatedNodes: [],
+  addedEdges: [],
+  removedEdges: [],
+  updatedEdges: []
+};
+var Graph = class _Graph {
+  prior;
+  nodes;
+  edges;
+  segs;
+  layers;
+  layerList;
+  nextLayerId;
+  nextDummyId;
+  options;
+  changes;
+  dirtyNodes;
+  dirtyEdges;
+  dirtyLayers;
+  dirtySegs;
+  dirty;
+  delNodes;
+  delEdges;
+  delSegs;
+  r;
+  v;
+  n;
+  h;
+  w;
+  x;
+  y;
+  d;
+  constructor({ prior, changes, options }) {
+    this.options = prior?.options ?? options;
+    this.changes = changes ?? emptyChanges;
+    this.initFromPrior(prior);
+    this.r = this.options.orientation === "BT" || this.options.orientation === "RL";
+    this.v = this.options.orientation === "TB" || this.options.orientation === "BT";
+    this.h = this.v ? "h" : "w";
+    this.w = this.v ? "w" : "h";
+    this.x = this.v ? "x" : "y";
+    this.y = this.v ? "y" : "x";
+    this.d = {
+      x: this.v ? 0 : this.r ? -1 : 1,
+      y: this.v ? this.r ? -1 : 1 : 0
     };
     const natAligns = { TB: "top", BT: "bottom", LR: "left", RL: "right" };
     if (this.options.nodeAlign == "natural")
-      this._natural = true;
+      this.n = true;
     else
-      this._natural = natAligns[this.options.orientation] == this.options.nodeAlign;
-    if (this._dirty) this._update();
+      this.n = natAligns[this.options.orientation] == this.options.nodeAlign;
+    if (this.dirty) this.processUpdate();
+  }
+  processUpdate() {
+    try {
+      this.beginMutate();
+      this.applyChanges();
+      Cycles.checkCycles(this);
+      Layers.updateLayers(this);
+      Dummy.updateDummies(this);
+      Dummy.mergeDummies(this);
+      Layout.positionNodes(this);
+      Layout.alignAll(this);
+      Lines.trackEdges(this);
+      Layout.getCoords(this);
+      Lines.pathEdges(this);
+    } catch (e) {
+      this.initFromPrior(this.prior);
+      throw e;
+    } finally {
+      this.endMutate();
+    }
+  }
+  applyChanges() {
+    for (const edge of this.changes.removedEdges)
+      Edge.del(this, edge);
+    for (const node of this.changes.removedNodes)
+      Node.del(this, node);
+    for (const node of this.changes.addedNodes)
+      Node.addNormal(this, node);
+    for (const edge of this.changes.addedEdges)
+      Edge.add(this, edge);
+    for (const node of this.changes.updatedNodes)
+      Node.update(this, node);
+    for (const edge of this.changes.updatedEdges)
+      Edge.update(this, edge);
+  }
+  layerAt(index) {
+    while (index >= this.layerList.size)
+      this.addLayer();
+    const layerId = this.layerList.get(index);
+    return this.getLayer(layerId);
+  }
+  addLayer() {
+    const id = `${Layer.prefix}${this.nextLayerId++}`;
+    this.layers.set(id, new Layer({
+      id,
+      index: this.layerList.size,
+      nodeIds: (0, import_immutable8.Set)()
+    }));
+    this.layerList.push(id);
+    this.dirtyLayers.add(id);
+  }
+  isEdgeId(id) {
+    return id.startsWith(Edge.prefix);
+  }
+  isSegId(id) {
+    return id.startsWith(Seg.prefix);
+  }
+  getNode(nodeId) {
+    const node = this.nodes.get(nodeId);
+    if (!node) throw new Error(`cannot find node ${nodeId}`);
+    return node;
+  }
+  getEdge(edgeId) {
+    const edge = this.edges.get(edgeId);
+    if (!edge) throw new Error(`cannot find edge ${edgeId}`);
+    return edge;
+  }
+  getSeg(segId) {
+    const seg = this.segs.get(segId);
+    if (!seg) throw new Error(`cannot find seg ${segId}`);
+    return seg;
+  }
+  getLayer(layerId) {
+    const layer = this.layers.get(layerId);
+    if (!layer) throw new Error(`cannot find layer ${layerId}`);
+    return layer;
+  }
+  layerIndex(nodeId) {
+    return this.getNode(nodeId).layerIndex(this);
+  }
+  getRel(relId) {
+    return this.isSegId(relId) ? this.getSeg(relId) : this.getEdge(relId);
+  }
+  *getNodes(includeDummy = false) {
+    const gen = this.nodes.values();
+    for (const node of this.nodes.values())
+      if (includeDummy || !node.isDummy)
+        yield node;
+  }
+  *getEdges() {
+    yield* this.edges.values();
+  }
+  *getSegs() {
+    yield* this.segs.values();
+  }
+  withMutations(callback) {
+    const mut = new Mutator();
+    callback(mut);
+    return new _Graph({ prior: this, changes: mut.changes });
+  }
+  addNode(node) {
+    return this.withMutations((mutator) => {
+      mutator.addNode(node);
+    });
+  }
+  addNodes(...nodes) {
+    return this.withMutations((mutator) => {
+      nodes.forEach((node) => mutator.addNode(node));
+    });
+  }
+  removeNodes(...nodes) {
+    return this.withMutations((mutator) => {
+      nodes.forEach((node) => mutator.removeNode(node));
+    });
+  }
+  removeNode(node) {
+    return this.withMutations((mutator) => {
+      mutator.removeNode(node);
+    });
+  }
+  addEdges(...edges) {
+    return this.withMutations((mutator) => {
+      edges.forEach((edge) => mutator.addEdge(edge));
+    });
+  }
+  addEdge(edge) {
+    return this.withMutations((mutator) => {
+      mutator.addEdge(edge);
+    });
+  }
+  removeEdges(...edges) {
+    return this.withMutations((mutator) => {
+      edges.forEach((edge) => mutator.removeEdge(edge));
+    });
+  }
+  removeEdge(edge) {
+    return this.withMutations((mutator) => {
+      mutator.removeEdge(edge);
+    });
+  }
+  mutateNode(node) {
+    if (node.mutable) return node;
+    node = node.asMutable().set("mutable", true);
+    this.nodes.set(node.id, node);
+    this.dirtyNodes.add(node.id);
+    return node;
+  }
+  mutateEdge(edge) {
+    if (edge.mutable) return edge;
+    edge = edge.asMutable().set("mutable", true);
+    this.edges.set(edge.id, edge);
+    this.dirtyEdges.add(edge.id);
+    return edge;
+  }
+  mutateLayer(layer) {
+    if (layer.mutable) return layer;
+    layer = layer.asMutable().set("mutable", true);
+    this.layers.set(layer.id, layer);
+    this.dirtyLayers.add(layer.id);
+    return layer;
+  }
+  mutateSeg(seg) {
+    if (seg.mutable) return seg;
+    seg = seg.asMutable().set("mutable", true);
+    this.segs.set(seg.id, seg);
+    this.dirtySegs.add(seg.id);
+    return seg;
+  }
+  initFromPrior(prior) {
+    this.nodes = prior?.nodes ?? (0, import_immutable8.Map)();
+    this.edges = prior?.edges ?? (0, import_immutable8.Map)();
+    this.layers = prior?.layers ?? (0, import_immutable8.Map)();
+    this.layerList = prior?.layerList ?? (0, import_immutable8.List)();
+    this.segs = prior?.segs ?? (0, import_immutable8.Map)();
+    this.nextLayerId = prior?.nextLayerId ?? 0;
+    this.nextDummyId = prior?.nextDummyId ?? 0;
+    this.prior = prior;
+    this.dirtyNodes = /* @__PURE__ */ new Set();
+    this.dirtyEdges = /* @__PURE__ */ new Set();
+    this.dirtyLayers = /* @__PURE__ */ new Set();
+    this.dirtySegs = /* @__PURE__ */ new Set();
+    this.delNodes = /* @__PURE__ */ new Set();
+    this.delEdges = /* @__PURE__ */ new Set();
+    this.delSegs = /* @__PURE__ */ new Set();
+    this.dirty = this.changes.addedNodes.length > 0 || this.changes.removedNodes.length > 0 || this.changes.updatedNodes.length > 0 || this.changes.addedEdges.length > 0 || this.changes.removedEdges.length > 0;
+  }
+  beginMutate() {
+    this.nodes = this.nodes.asMutable();
+    this.edges = this.edges.asMutable();
+    this.layers = this.layers.asMutable();
+    this.layerList = this.layerList.asMutable();
+    this.segs = this.segs.asMutable();
+  }
+  endMutate() {
+    for (const nodeId of this.dirtyNodes)
+      if (this.nodes.has(nodeId))
+        this.nodes.set(nodeId, this.nodes.get(nodeId).final());
+    for (const edgeId of this.dirtyEdges)
+      if (this.edges.has(edgeId))
+        this.edges.set(edgeId, this.edges.get(edgeId).final());
+    for (const segId of this.dirtySegs)
+      if (this.segs.has(segId))
+        this.segs.set(segId, this.segs.get(segId).final());
+    for (const layerId of this.dirtyLayers)
+      if (this.layers.has(layerId))
+        this.layers.set(layerId, this.layers.get(layerId).final());
+    this.nodes = this.nodes.asImmutable();
+    this.edges = this.edges.asImmutable();
+    this.layers = this.layers.asImmutable();
+    this.layerList = this.layerList.asImmutable();
+    this.segs = this.segs.asImmutable();
+  }
+};
+
+// src/common.ts
+var screenPos = (x, y) => ({ x, y });
+var canvasPos = (x, y) => ({ x, y });
+var graphPos = (x, y) => ({ x, y });
+
+// src/canvas/node.tsx
+var import_node3 = __toESM(require("./node.css?raw"), 1);
+
+// src/canvas/styler.ts
+var injected = {};
+function styler(name, styles4, prefix) {
+  if (prefix === "g3p" && !injected[name]) {
+    const style = document.createElement("style");
+    style.textContent = styles4;
+    document.head.appendChild(style);
+    injected[name] = true;
+  }
+  return (str, condition) => {
+    if (!(condition ?? true)) return "";
+    const parts = str.split(/\s+/);
+    const fixed = parts.map((p) => `${prefix}-${name}-${p}`);
+    return fixed.join(" ");
+  };
+}
+
+// src/canvas/node.tsx
+var import_jsx_runtime2 = require("jsx-dom/jsx-runtime");
+var log8 = logger("canvas");
+var Node2 = class {
+  selected;
+  hovered;
+  container;
+  content;
+  canvas;
+  data;
+  classPrefix;
+  isDummy;
+  pos;
+  constructor(canvas, data, isDummy = false) {
+    this.canvas = canvas;
+    this.data = data;
+    this.selected = false;
+    this.hovered = false;
+    this.classPrefix = canvas.classPrefix;
+    this.isDummy = isDummy;
+    if (this.isDummy) {
+      const size = canvas.dummyNodeSize;
+    } else {
+      const render = data.render ?? canvas.renderNode;
+      this.content = this.renderContent(render(data.data));
+    }
+  }
+  remove() {
+    this.container.remove();
+  }
+  append() {
+    console.log("append", this);
+    this.canvas.group.appendChild(this.container);
+  }
+  needsContentSize() {
+    return !this.isDummy && this.content instanceof HTMLElement;
+  }
+  needsContainerSize() {
+    return !this.isDummy;
+  }
+  handleClick(e) {
+    e.stopPropagation();
+  }
+  handleMouseEnter(e) {
+  }
+  handleMouseLeave(e) {
+  }
+  handleContextMenu(e) {
+  }
+  handleMouseDown(e) {
+  }
+  handleMouseUp(e) {
+  }
+  setPos(pos) {
+    this.pos = pos;
+    const { x, y } = pos;
+    this.container.setAttribute("transform", `translate(${x}, ${y})`);
+  }
+  hasPorts() {
+    return !!this.data?.ports?.in?.length || !!this.data?.ports?.out?.length;
+  }
+  renderContent(el) {
+    const hasPorts = this.hasPorts();
+    el = this.renderBorder(el);
+    if (hasPorts)
+      el = this.renderOutsidePorts(el);
+    return el;
+  }
+  renderContainer() {
+    const c = styler("node", import_node3.default, this.classPrefix);
+    const hasPorts = this.hasPorts();
+    const inner = this.isDummy ? this.renderDummy() : this.renderForeign();
+    const nodeType = this.data?.type;
+    const typeClass = nodeType ? `g3p-node-type-${nodeType}` : "";
+    this.container = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "g",
+      {
+        className: `${c("container")} ${c("dummy", this.isDummy)} ${typeClass}`.trim(),
+        onClick: (e) => this.handleClick(e),
+        onMouseEnter: (e) => this.handleMouseEnter(e),
+        onMouseLeave: (e) => this.handleMouseLeave(e),
+        onContextMenu: (e) => this.handleContextMenu(e),
+        onMouseDown: (e) => this.handleMouseDown(e),
+        onMouseUp: (e) => this.handleMouseUp(e),
+        style: { cursor: "pointer" },
+        children: inner
+      }
+    );
+  }
+  renderForeign() {
+    const { w, h } = this.data.dims;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("foreignObject", { width: w, height: h, children: this.content });
+  }
+  renderDummy() {
+    const c = styler("node", import_node3.default, this.classPrefix);
+    let w = this.canvas.dummyNodeSize;
+    let h = this.canvas.dummyNodeSize;
+    w /= 2;
+    h /= 2;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "ellipse",
+        {
+          cx: w,
+          cy: h,
+          rx: w,
+          ry: h,
+          className: c("background")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "ellipse",
+        {
+          cx: w,
+          cy: h,
+          rx: w,
+          ry: h,
+          fill: "none",
+          className: c("border")
+        }
+      )
+    ] });
+  }
+  measure(isVertical) {
+    const rect = this.content.getBoundingClientRect();
+    const data = this.data;
+    data.dims = { w: rect.width, h: rect.height };
+    for (const dir of ["in", "out"]) {
+      const ports = data.ports?.[dir];
+      if (!ports) continue;
+      for (const port of ports) {
+        const el = this.content.querySelector(`#g3p-port-${data.id}-${port.id}`);
+        if (!el) continue;
+        const portRect = el.getBoundingClientRect();
+        if (isVertical) {
+          port.offset = portRect.left - rect.left;
+          port.size = portRect.width;
+        } else {
+          port.offset = portRect.top - rect.top;
+          port.size = portRect.height;
+        }
+      }
+    }
+  }
+  getPortPosition(dir) {
+    const o = this.canvas.orientation;
+    if (dir === "in") {
+      if (o === "TB") return "top";
+      if (o === "BT") return "bottom";
+      if (o === "LR") return "left";
+      return "right";
+    } else {
+      if (o === "TB") return "bottom";
+      if (o === "BT") return "top";
+      if (o === "LR") return "right";
+      return "left";
+    }
+  }
+  isVerticalOrientation() {
+    const o = this.canvas.orientation;
+    return o === "TB" || o === "BT";
+  }
+  isReversedOrientation() {
+    const o = this.canvas.orientation;
+    return o === "BT" || o === "RL";
+  }
+  renderPortRow(dir, inout) {
+    const ports = this.data?.ports?.[dir];
+    if (!ports?.length) return null;
+    const c = styler("node", import_node3.default, this.classPrefix);
+    const pos = this.getPortPosition(dir);
+    const isVertical = this.isVerticalOrientation();
+    const layoutClass = isVertical ? "row" : "col";
+    const rotateLabels = false;
+    const rotateClass = rotateLabels ? `port-rotated-${pos}` : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${c("ports")} ${c(`ports-${layoutClass}`)}`, children: ports.map((port) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        id: `g3p-port-${this.data.id}-${port.id}`,
+        className: `${c("port")} ${c(`port-${inout}-${pos}`)} ${c(rotateClass)}`,
+        children: port.label ?? port.id
+      }
+    )) });
+  }
+  renderInsidePorts(el) {
+    const c = styler("node", import_node3.default, this.classPrefix);
+    const isVertical = this.isVerticalOrientation();
+    const isReversed = this.isReversedOrientation();
+    let inPorts = this.renderPortRow("in", "in");
+    let outPorts = this.renderPortRow("out", "in");
+    if (!inPorts && !outPorts) return el;
+    if (isReversed) [inPorts, outPorts] = [outPorts, inPorts];
+    const wrapperClass = isVertical ? "v" : "h";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `${c("with-ports")} ${c(`with-ports-${wrapperClass}`)}`, children: [
+      inPorts,
+      el,
+      outPorts
+    ] });
+  }
+  renderOutsidePorts(el) {
+    const c = styler("node", import_node3.default, this.classPrefix);
+    const isVertical = this.isVerticalOrientation();
+    const isReversed = this.isReversedOrientation();
+    let inPorts = this.renderPortRow("in", "out");
+    let outPorts = this.renderPortRow("out", "out");
+    if (!inPorts && !outPorts) return el;
+    if (isReversed) [inPorts, outPorts] = [outPorts, inPorts];
+    const wrapperClass = isVertical ? "v" : "h";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `${c("with-ports")} ${c(`with-ports-${wrapperClass}`)}`, children: [
+      inPorts,
+      el,
+      outPorts
+    ] });
+  }
+  renderBorder(el) {
+    const c = styler("node", import_node3.default, this.classPrefix);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: c("border"), children: el });
+  }
+};
+
+// src/canvas/seg.tsx
+var import_seg3 = __toESM(require("./seg.css?raw"), 1);
+var import_jsx_runtime3 = require("jsx-dom/jsx-runtime");
+var log9 = logger("canvas");
+var Seg2 = class {
+  id;
+  selected;
+  hovered;
+  canvas;
+  classPrefix;
+  type;
+  svg;
+  el;
+  source;
+  target;
+  constructor(canvas, data, g) {
+    this.id = data.id;
+    this.canvas = canvas;
+    this.selected = false;
+    this.hovered = false;
+    this.svg = data.svg;
+    this.classPrefix = canvas.classPrefix;
+    this.source = { ...data.source, isDummy: data.sourceNode(g).isDummy };
+    this.target = { ...data.target, isDummy: data.targetNode(g).isDummy };
+    this.type = data.type;
+    this.el = this.render();
+  }
+  handleClick(e) {
+    e.stopPropagation();
+  }
+  handleMouseEnter(e) {
+  }
+  handleMouseLeave(e) {
+  }
+  handleContextMenu(e) {
+  }
+  append() {
+    this.canvas.group.appendChild(this.el);
+  }
+  remove() {
+    this.el.remove();
+  }
+  update(data) {
+    this.svg = data.svg;
+    this.type = data.type;
+    this.source = data.source;
+    this.target = data.target;
+    this.remove();
+    this.el = this.render();
+    this.append();
+  }
+  render() {
+    const c = styler("seg", import_seg3.default, this.classPrefix);
+    let { source, target } = normalize(this);
+    if (this.source.isDummy) source = void 0;
+    if (this.target.isDummy) target = void 0;
+    const typeClass = this.type ? `g3p-edge-type-${this.type}` : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "g",
+      {
+        ref: (el) => this.el = el,
+        id: `g3p-seg-${this.id}`,
+        className: `${c("container")} ${typeClass}`.trim(),
+        onClick: this.handleClick.bind(this),
+        onMouseEnter: this.handleMouseEnter.bind(this),
+        onMouseLeave: this.handleMouseLeave.bind(this),
+        onContextMenu: this.handleContextMenu.bind(this),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "path",
+            {
+              d: this.svg,
+              fill: "none",
+              className: c("line"),
+              markerStart: source ? `url(#g3p-marker-${source}-reverse)` : void 0,
+              markerEnd: target ? `url(#g3p-marker-${target})` : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "path",
+            {
+              d: this.svg,
+              stroke: "transparent",
+              fill: "none",
+              className: c("hitbox"),
+              style: { cursor: "pointer" }
+            }
+          )
+        ]
+      }
+    );
+  }
+};
+
+// src/canvas/canvas.tsx
+var import_canvas = __toESM(require("./canvas.css?raw"), 1);
+var import_zoom = __toESM(require("./zoom.css?raw"), 1);
+var import_jsx_runtime4 = require("jsx-dom/jsx-runtime");
+var log10 = logger("canvas");
+var themeVarMap = {
+  // Canvas
+  bg: "--g3p-bg",
+  shadow: "--g3p-shadow",
+  // Node
+  border: "--g3p-border",
+  borderHover: "--g3p-border-hover",
+  borderSelected: "--g3p-border-selected",
+  text: "--g3p-text",
+  textMuted: "--g3p-text-muted",
+  // Port
+  bgHover: "--g3p-port-bg-hover",
+  // Edge
+  color: "--g3p-edge-color"
+};
+function themeToCSS(theme, selector, prefix = "") {
+  const entries = Object.entries(theme).filter(([_, v]) => v !== void 0);
+  if (!entries.length) return "";
+  let css = `${selector} {
+`;
+  for (const [key, value] of entries) {
+    let cssVar = themeVarMap[key];
+    if (key === "bg" && prefix === "node") {
+      cssVar = "--g3p-bg-node";
+    } else if (key === "bg" && prefix === "port") {
+      cssVar = "--g3p-port-bg";
+    }
+    if (cssVar) {
+      css += `  ${cssVar}: ${value};
+`;
+    }
+  }
+  css += "}\n";
+  return css;
+}
+var Canvas = class {
+  container;
+  root;
+  group;
+  transform;
+  bounds;
+  measurement;
+  allNodes;
+  curNodes;
+  curSegs;
+  updating;
+  // Pan-zoom state
+  isPanning = false;
+  panStart = null;
+  transformStart = null;
+  panScale = null;
+  zoomControls;
+  constructor(options) {
+    Object.assign(this, options);
+    this.allNodes = /* @__PURE__ */ new Map();
+    this.curNodes = /* @__PURE__ */ new Map();
+    this.curSegs = /* @__PURE__ */ new Map();
+    this.updating = false;
+    this.bounds = { min: { x: 0, y: 0 }, max: { x: 0, y: 0 } };
+    this.transform = { x: 0, y: 0, scale: 1 };
+    this.createMeasurementContainer();
+    this.createCanvasContainer();
+    if (this.panZoom) this.setupPanZoom();
+  }
+  createMeasurementContainer() {
+    this.measurement = document.createElement("div");
+    this.measurement.style.cssText = `
+      position: absolute;
+      left: -9999px;
+      top: -9999px;
+      visibility: hidden;
+      pointer-events: none;
+    `;
+    document.body.appendChild(this.measurement);
+  }
+  getNode(key) {
+    const node = this.allNodes.get(key);
+    if (!node) throw new Error(`node not found: ${key}`);
+    return node;
+  }
+  update() {
+    let bx0 = Infinity, by0 = Infinity;
+    let bx1 = -Infinity, by1 = -Infinity;
+    for (const node of this.curNodes.values()) {
+      const { x, y } = node.pos;
+      const { w, h } = node.data.dims;
+      const nx0 = x, nx1 = x + w;
+      const ny0 = y, ny1 = y + h;
+      bx0 = Math.min(bx0, nx0);
+      by0 = Math.min(by0, ny0);
+      bx1 = Math.max(bx1, nx1);
+      by1 = Math.max(by1, ny1);
+    }
+    this.bounds = { min: { x: bx0, y: by0 }, max: { x: bx1, y: by1 } };
+    this.root.setAttribute("viewBox", this.viewBox());
+  }
+  addNode(gnode) {
+    if (this.curNodes.has(gnode.id))
+      throw new Error("node already exists");
+    const { key } = gnode;
+    let node;
+    if (gnode.isDummy) {
+      node = new Node2(this, gnode, true);
+      node.renderContainer();
+      node.setPos(gnode.pos);
+      this.allNodes.set(key, node);
+    } else {
+      if (!this.allNodes.has(key))
+        throw new Error("node has not been measured");
+      node = this.getNode(key);
+    }
+    this.curNodes.set(gnode.id, node);
+    node.append();
+  }
+  updateNode(gnode) {
+    if (gnode.isDummy) throw new Error("dummy node cannot be updated");
+    const node = this.getNode(gnode.key);
+    const cur = this.curNodes.get(gnode.id);
+    if (cur) cur.remove();
+    this.curNodes.set(gnode.id, node);
+    node.append();
+  }
+  deleteNode(gnode) {
+    const node = this.getNode(gnode.key);
+    this.curNodes.delete(gnode.id);
+    node.remove();
+  }
+  addSeg(gseg, g) {
+    if (this.curSegs.has(gseg.id))
+      throw new Error("seg already exists");
+    const seg = new Seg2(this, gseg, g);
+    this.curSegs.set(gseg.id, seg);
+    seg.append();
+  }
+  updateSeg(gseg) {
+    const seg = this.curSegs.get(gseg.id);
+    if (!seg) throw new Error("seg not found");
+    seg.update(gseg);
+  }
+  deleteSeg(gseg) {
+    const seg = this.curSegs.get(gseg.id);
+    if (!seg) throw new Error("seg not found");
+    this.curSegs.delete(gseg.id);
+    seg.remove();
+  }
+  async measureNodes(nodes) {
+    const newNodes = /* @__PURE__ */ new Map();
+    for (const data of nodes) {
+      const node = new Node2(this, data);
+      newNodes.set(data.data, node);
+      this.measurement.appendChild(node.content);
+    }
+    await new Promise(requestAnimationFrame);
+    const isVertical = this.orientation === "TB" || this.orientation === "BT";
+    for (const node of newNodes.values()) {
+      node.measure(isVertical);
+      const { id, version } = node.data;
+      const key = `${id}:${version}`;
+      this.allNodes.set(key, node);
+      node.renderContainer();
+    }
+    this.measurement.innerHTML = "";
+    return newNodes;
+  }
+  onClick(e) {
+    console.log("click", e);
+  }
+  onContextMenu(e) {
+    console.log("context menu", e);
+  }
+  groupTransform() {
+    return `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.scale})`;
+  }
+  viewBox() {
+    const p = this.padding;
+    const x = this.bounds.min.x - p;
+    const y = this.bounds.min.y - p;
+    const w = this.bounds.max.x - this.bounds.min.x + p * 2;
+    const h = this.bounds.max.y - this.bounds.min.y + p * 2;
+    return `${x} ${y} ${w} ${h}`;
+  }
+  generateDynamicStyles() {
+    let css = "";
+    const prefix = this.classPrefix;
+    css += themeToCSS(this.theme, `.${prefix}-canvas-container`);
+    for (const [type, vars] of Object.entries(this.nodeTypes)) {
+      css += themeToCSS(vars, `.${prefix}-node-type-${type}`, "node");
+    }
+    for (const [type, vars] of Object.entries(this.edgeTypes)) {
+      css += themeToCSS(vars, `.${prefix}-edge-type-${type}`);
+    }
+    return css;
+  }
+  createCanvasContainer() {
+    const markerStyleEl = document.createElement("style");
+    markerStyleEl.textContent = import_marker.default;
+    document.head.appendChild(markerStyleEl);
+    const zoomStyleEl = document.createElement("style");
+    zoomStyleEl.textContent = import_zoom.default;
+    document.head.appendChild(zoomStyleEl);
+    const dynamicStyles = this.generateDynamicStyles();
+    if (dynamicStyles) {
+      const themeStyleEl = document.createElement("style");
+      themeStyleEl.textContent = dynamicStyles;
+      document.head.appendChild(themeStyleEl);
+    }
+    const c = styler("canvas", import_canvas.default, this.classPrefix);
+    const colorModeClass = this.colorMode !== "system" ? `g3p-${this.colorMode}` : "";
+    this.container = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `${c("container")} ${colorModeClass}`.trim(),
+        ref: (el) => this.container = el,
+        onContextMenu: this.onContextMenu.bind(this),
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "svg",
+          {
+            ref: (el) => this.root = el,
+            className: c("root"),
+            width: this.width,
+            height: this.height,
+            viewBox: this.viewBox(),
+            preserveAspectRatio: "xMidYMid meet",
+            onClick: this.onClick.bind(this),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
+                Object.values(markerDefs).map((marker) => marker(this.markerSize, this.classPrefix, false)),
+                Object.values(markerDefs).map((marker) => marker(this.markerSize, this.classPrefix, true))
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "g",
+                {
+                  ref: (el) => this.group = el,
+                  transform: this.groupTransform()
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  // ==================== Pan-Zoom ====================
+  setupPanZoom() {
+    this.container.addEventListener("wheel", this.onWheel.bind(this), { passive: false });
+    this.container.addEventListener("mousedown", this.onMouseDown.bind(this));
+    document.addEventListener("mousemove", this.onMouseMove.bind(this));
+    document.addEventListener("mouseup", this.onMouseUp.bind(this));
+    this.createZoomControls();
+  }
+  /** Convert screen coordinates to canvas-relative coordinates */
+  screenToCanvas(screen) {
+    const rect = this.container.getBoundingClientRect();
+    return canvasPos(screen.x - rect.left, screen.y - rect.top);
+  }
+  /** 
+   * Get the effective scale from canvas pixels to graph units,
+   * accounting for preserveAspectRatio="xMidYMid meet" which uses
+   * the smaller scale (to fit) and centers the content.
+   */
+  getEffectiveScale() {
+    const vb = this.currentViewBox();
+    const rect = this.container.getBoundingClientRect();
+    const scaleX = vb.w / rect.width;
+    const scaleY = vb.h / rect.height;
+    const scale = Math.max(scaleX, scaleY);
+    const actualW = rect.width * scale;
+    const actualH = rect.height * scale;
+    const offsetX = (actualW - vb.w) / 2;
+    const offsetY = (actualH - vb.h) / 2;
+    return { scale, offsetX, offsetY };
+  }
+  /** Convert canvas coordinates to graph coordinates */
+  canvasToGraph(canvas) {
+    const vb = this.currentViewBox();
+    const { scale, offsetX, offsetY } = this.getEffectiveScale();
+    return graphPos(
+      vb.x - offsetX + canvas.x * scale,
+      vb.y - offsetY + canvas.y * scale
+    );
+  }
+  /** Get current viewBox as an object */
+  currentViewBox() {
+    const p = this.padding;
+    const t = this.transform;
+    const baseX = this.bounds.min.x - p;
+    const baseY = this.bounds.min.y - p;
+    const baseW = this.bounds.max.x - this.bounds.min.x + p * 2;
+    const baseH = this.bounds.max.y - this.bounds.min.y + p * 2;
+    const cx = baseX + baseW / 2;
+    const cy = baseY + baseH / 2;
+    const w = baseW / t.scale;
+    const h = baseH / t.scale;
+    const x = cx - w / 2 - t.x;
+    const y = cy - h / 2 - t.y;
+    return { x, y, w, h };
+  }
+  onWheel(e) {
+    e.preventDefault();
+    const zoomFactor = 1.1;
+    const delta = e.deltaY > 0 ? 1 / zoomFactor : zoomFactor;
+    const screenCursor = screenPos(e.clientX, e.clientY);
+    const canvasCursor = this.screenToCanvas(screenCursor);
+    const graphCursor = this.canvasToGraph(canvasCursor);
+    const oldScale = this.transform.scale;
+    const newScale = Math.max(0.1, Math.min(10, oldScale * delta));
+    this.transform.scale = newScale;
+    const newGraphCursor = this.canvasToGraph(canvasCursor);
+    this.transform.x += newGraphCursor.x - graphCursor.x;
+    this.transform.y += newGraphCursor.y - graphCursor.y;
+    this.applyTransform();
+  }
+  onMouseDown(e) {
+    if (e.button !== 0) return;
+    if (e.target.closest(".g3p-zoom-controls")) return;
+    this.isPanning = true;
+    this.panStart = this.screenToCanvas(screenPos(e.clientX, e.clientY));
+    this.transformStart = { ...this.transform };
+    const { scale } = this.getEffectiveScale();
+    this.panScale = { x: scale, y: scale };
+    this.container.style.cursor = "grabbing";
+    e.preventDefault();
+  }
+  onMouseMove(e) {
+    if (!this.isPanning || !this.panStart || !this.transformStart || !this.panScale) return;
+    const current = this.screenToCanvas(screenPos(e.clientX, e.clientY));
+    const dx = current.x - this.panStart.x;
+    const dy = current.y - this.panStart.y;
+    this.transform.x = this.transformStart.x + dx * this.panScale.x;
+    this.transform.y = this.transformStart.y + dy * this.panScale.y;
+    this.applyTransform();
+  }
+  onMouseUp(e) {
+    if (!this.isPanning) return;
+    this.isPanning = false;
+    this.panStart = null;
+    this.transformStart = null;
+    this.panScale = null;
+    this.container.style.cursor = "";
+  }
+  applyTransform() {
+    const vb = this.currentViewBox();
+    this.root.setAttribute("viewBox", `${vb.x} ${vb.y} ${vb.w} ${vb.h}`);
+    this.updateZoomLevel();
+  }
+  createZoomControls() {
+    const c = styler("zoom", import_zoom.default, this.classPrefix);
+    this.zoomControls = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: c("controls"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: c("btn"), onClick: () => this.zoomIn(), children: "+" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: c("level"), id: "g3p-zoom-level", children: "100%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: c("btn"), onClick: () => this.zoomOut(), children: "\u2212" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: `${c("btn")} ${c("reset")}`, onClick: () => this.zoomReset(), children: "\u27F2" })
+    ] });
+    this.container.appendChild(this.zoomControls);
+  }
+  updateZoomLevel() {
+    const level = this.container.querySelector("#g3p-zoom-level");
+    if (level) {
+      level.textContent = `${Math.round(this.transform.scale * 100)}%`;
+    }
+  }
+  zoomIn() {
+    this.transform.scale = Math.min(10, this.transform.scale * 1.2);
+    this.applyTransform();
+  }
+  zoomOut() {
+    this.transform.scale = Math.max(0.1, this.transform.scale / 1.2);
+    this.applyTransform();
+  }
+  zoomReset() {
+    this.transform = { x: 0, y: 0, scale: 1 };
+    this.applyTransform();
+  }
+};
+
+// src/canvas/render-node.tsx
+var import_jsx_runtime5 = require("jsx-dom/jsx-runtime");
+function renderNode(node) {
+  if (typeof node == "string") node = { id: node };
+  const title = node?.title ?? node?.label ?? node?.name ?? node?.text ?? node?.id ?? "?";
+  const detail = node?.detail ?? node?.description ?? node?.subtitle;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-node-default", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "g3p-node-title", children: title }),
+    detail && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "g3p-node-detail", children: detail })
+  ] });
+}
+
+// src/api/defaults.ts
+function applyDefaults(options) {
+  const { graph: graph2, canvas, props } = defaults();
+  return {
+    graph: { ...graph2, ...options?.graph },
+    canvas: { ...canvas, ...options?.canvas },
+    props: { ...props, ...options?.props }
+  };
+}
+function defaults() {
+  return {
+    graph: {
+      mergeOrder: ["target", "source"],
+      nodeMargin: 15,
+      dummyNodeSize: 15,
+      nodeAlign: "natural",
+      edgeSpacing: 10,
+      turnRadius: 10,
+      orientation: "TB",
+      layerMargin: 5,
+      alignIterations: 5,
+      alignThreshold: 10,
+      separateTrackSets: true,
+      markerSize: 10,
+      layoutSteps: null
+    },
+    canvas: {
+      renderNode,
+      classPrefix: "g3p",
+      width: "100%",
+      height: "100%",
+      padding: 20,
+      editable: false,
+      panZoom: true,
+      markerSize: 10,
+      colorMode: "system",
+      theme: {},
+      nodeTypes: {},
+      edgeTypes: {}
+    },
+    props: {}
+  };
+}
+
+// src/api/updater.ts
+var Updater = class _Updater {
+  update;
+  constructor() {
+    this.update = {
+      addNodes: [],
+      removeNodes: [],
+      updateNodes: [],
+      addEdges: [],
+      removeEdges: [],
+      updateEdges: []
+    };
+  }
+  describe(desc) {
+    this.update.description = desc;
+    return this;
+  }
+  addNode(node) {
+    this.update.addNodes.push(node);
+    return this;
+  }
+  deleteNode(node) {
+    this.update.removeNodes.push(node);
+    return this;
+  }
+  updateNode(node) {
+    this.update.updateNodes.push(node);
+    return this;
+  }
+  addEdge(edge) {
+    this.update.addEdges.push(edge);
+    return this;
+  }
+  deleteEdge(edge) {
+    this.update.removeEdges.push(edge);
+    return this;
+  }
+  updateEdge(edge) {
+    this.update.updateEdges.push(edge);
+    return this;
+  }
+  static add(nodes, edges) {
+    const updater = new _Updater();
+    updater.update.addNodes = nodes;
+    updater.update.addEdges = edges;
+    return updater;
+  }
+};
+
+// src/api/api.ts
+var log11 = logger("api");
+var API = class {
+  state;
+  seq;
+  index;
+  canvas;
+  options;
+  history;
+  nodeIds;
+  edgeIds;
+  nodeVersions;
+  nextNodeId;
+  nextEdgeId;
+  root;
+  constructor(args) {
+    this.root = args.root;
+    this.options = applyDefaults(args.options);
+    let graph2 = new Graph({ options: this.options.graph });
+    this.state = { graph: graph2, update: null };
+    this.seq = [this.state];
+    this.index = 0;
+    this.nodeIds = /* @__PURE__ */ new Map();
+    this.edgeIds = /* @__PURE__ */ new Map();
+    this.nodeVersions = /* @__PURE__ */ new Map();
+    this.nextNodeId = 1;
+    this.nextEdgeId = 1;
+    this.canvas = new Canvas({
+      ...this.options.canvas,
+      dummyNodeSize: this.options.graph.dummyNodeSize,
+      orientation: this.options.graph.orientation
+    });
+    if (args.history) {
+      this.history = args.history;
+    } else if (args.nodes) {
+      this.history = [Updater.add(args.nodes, args.edges || []).update];
+    } else {
+      this.history = [];
+    }
+  }
+  async init() {
+    const root = document.getElementById(this.root);
+    if (!root) throw new Error("root element not found");
+    root.appendChild(this.canvas.container);
+    for (const update of this.history)
+      await this.applyUpdate(update);
+  }
+  nav(nav) {
+    let newIndex;
+    switch (nav) {
+      case "first":
+        newIndex = 0;
+        break;
+      case "last":
+        newIndex = this.seq.length - 1;
+        break;
+      case "prev":
+        newIndex = this.index - 1;
+        break;
+      case "next":
+        newIndex = this.index + 1;
+        break;
+    }
+    if (newIndex < 0 || newIndex >= this.seq.length || newIndex == this.index)
+      return;
+    this.applyDiff(this.index, newIndex);
+    this.index = newIndex;
+    this.state = this.seq[this.index];
+  }
+  applyDiff(oldIndex, newIndex) {
+    const oldGraph = this.seq[oldIndex].graph;
+    const newGraph = this.seq[newIndex].graph;
+    for (const oldNode of oldGraph.nodes.values()) {
+      const newNode = newGraph.nodes.get(oldNode.id);
+      if (!newNode) this.canvas.deleteNode(oldNode);
+    }
+    for (const newNode of newGraph.nodes.values()) {
+      if (!oldGraph.nodes.has(newNode.id)) this.canvas.addNode(newNode);
+    }
+    for (const oldSeg of oldGraph.segs.values()) {
+      const newSeg = newGraph.segs.get(oldSeg.id);
+      if (!newSeg)
+        this.canvas.deleteSeg(oldSeg);
+      else if (oldSeg.svg != newSeg.svg)
+        this.canvas.updateSeg(newSeg);
+    }
+    for (const newSeg of newGraph.segs.values()) {
+      if (!oldGraph.segs.has(newSeg.id))
+        this.canvas.addSeg(newSeg, newGraph);
+    }
+    this.canvas.update();
+  }
+  async addNode(node) {
+    await this.update((update) => update.addNode(node));
+  }
+  async deleteNode(node) {
+    await this.update((update) => update.deleteNode(node));
+  }
+  async updateNode(node) {
+    await this.update((update) => update.updateNode(node));
+  }
+  async addEdge(edge) {
+    await this.update((update) => update.addEdge(edge));
+  }
+  async deleteEdge(edge) {
+    await this.update((update) => update.deleteEdge(edge));
+  }
+  async applyUpdate(update) {
+    log11.info("applyUpdate", update);
+    const nodes = await this.measureNodes(update);
+    const graph2 = this.state.graph.withMutations((mut) => {
+      for (const edge of update.removeEdges ?? [])
+        this._removeEdge(edge, mut);
+      for (const node of update.removeNodes ?? [])
+        this._removeNode(node, mut);
+      for (const node of update.addNodes ?? [])
+        this._addNode(nodes.get(node), mut);
+      for (const node of update.updateNodes ?? [])
+        this._updateNode(nodes.get(node), mut);
+      for (const edge of update.addEdges ?? [])
+        this._addEdge(edge, mut);
+      for (const edge of update.updateEdges ?? [])
+        this._updateEdge(edge, mut);
+    });
+    this.state = { graph: graph2, update };
+    this.setNodePositions();
+    this.seq.splice(this.index + 1);
+    this.seq.push(this.state);
+    this.nav("last");
+  }
+  setNodePositions() {
+    const { graph: graph2 } = this.state;
+    for (const nodeId of graph2.dirtyNodes) {
+      const node = graph2.getNode(nodeId);
+      if (!node.isDummy)
+        this.canvas.getNode(node.key).setPos(node.pos);
+    }
+  }
+  async update(callback) {
+    const updater = new Updater();
+    callback(updater);
+    await this.applyUpdate(updater.update);
+  }
+  async measureNodes(update) {
+    const data = [];
+    for (const set of [update.updateNodes, update.addNodes])
+      for (const node of set ?? [])
+        data.push(this.parseNode(node, true));
+    return await this.canvas.measureNodes(data);
+  }
+  parseNode(data, bumpVersion = false) {
+    const get = this.options.props.node;
+    let props;
+    if (get) props = get(data);
+    else if (!data) throw new Error(`invalid node ${data}`);
+    else if (typeof data == "string") props = { id: data };
+    else if (typeof data == "object") props = data;
+    else throw new Error(`invalid node ${data}`);
+    let { id, title, text, type, render } = props;
+    id ??= this.getNodeId(data);
+    const ports = this.parsePorts(props.ports);
+    let version = this.nodeVersions.get(data);
+    if (!version) version = 1;
+    else if (bumpVersion) version++;
+    this.nodeVersions.set(data, version);
+    return { id, data, ports, title, text, type, render, version };
+  }
+  parseEdge(data) {
+    const get = this.options.props.edge;
+    let props;
+    if (get) props = get(data);
+    else if (!data) throw new Error(`invalid edge ${data}`);
+    else if (typeof data == "string") props = this.parseStringEdge(data);
+    else if (typeof data == "object") props = data;
+    else throw new Error(`invalid edge ${data}`);
+    let { id, source, target, type } = props;
+    id ??= this.getEdgeId(data);
+    source = this.parseEdgeEnd(source);
+    target = this.parseEdgeEnd(target);
+    const edge = { id, source, target, type, data };
+    return edge;
+  }
+  parseEdgeEnd(end) {
+    if (!end) throw new Error(`edge has an undefined source or target`);
+    if (typeof end == "string") return { id: end };
+    if (typeof end == "object") {
+      const keys = Object.keys(end);
+      const pidx = keys.indexOf("port");
+      if (pidx != -1) {
+        if (typeof end.port != "string") return end;
+        keys.splice(pidx, 1);
+      }
+      if (keys.length != 1) return end;
+      if (keys[0] == "id") return end;
+      if (keys[0] != "node") return end;
+      const id = this.nodeIds.get(end.node);
+      if (!id) throw new Error(`edge end ${end} references unknown node ${end.node}`);
+      return { id, port: end.port };
+    }
+    throw new Error(`invalid edge end ${end}`);
+  }
+  parseStringEdge(str) {
+    const [source, target] = str.split(/\s*(?::|-+>?)\s*/);
+    return { source, target };
+  }
+  parsePorts(ports) {
+    const fixed = { in: null, out: null };
+    for (const key of ["in", "out"]) {
+      if (ports?.[key] && ports[key].length > 0)
+        fixed[key] = ports[key].map((port) => typeof port == "string" ? { id: port } : port);
+    }
+    return fixed;
+  }
+  getNodeId(node) {
+    let id = this.nodeIds.get(node);
+    if (!id) {
+      id = `n${this.nextNodeId++}`;
+      this.nodeIds.set(node, id);
+    }
+    return id;
+  }
+  getEdgeId(edge) {
+    let id = this.edgeIds.get(edge);
+    if (!id) {
+      id = `e${this.nextEdgeId++}`;
+      this.edgeIds.set(edge, id);
+    }
+    return id;
+  }
+  _addNode(node, mut) {
+    const { data, id: newId } = node.data;
+    const oldId = this.nodeIds.get(data);
+    console.log("addNode", node, oldId, newId);
+    if (oldId && oldId != newId)
+      throw new Error(`node id of ${data} changed from ${oldId} to ${newId}`);
+    this.nodeIds.set(data, newId);
+    mut.addNode(node.data);
+  }
+  _removeNode(node, mut) {
+    const id = this.nodeIds.get(node);
+    if (!id) throw new Error(`removing node ${node} which does not exist`);
+    mut.removeNode({ id });
+  }
+  _updateNode(node, mut) {
+    const { data, id: newId } = node.data;
+    const oldId = this.nodeIds.get(data);
+    if (!oldId) throw new Error(`updating unknown node ${node}`);
+    if (oldId != newId) throw new Error(`node id changed from ${oldId} to ${newId}`);
+    mut.updateNode(node.data);
+  }
+  _addEdge(edge, mut) {
+    const data = this.parseEdge(edge);
+    const id = this.edgeIds.get(edge);
+    if (id && id != data.id)
+      throw new Error(`edge id changed from ${id} to ${data.id}`);
+    this.edgeIds.set(edge, data.id);
+    mut.addEdge(data);
+  }
+  _removeEdge(edge, mut) {
+    const id = this.edgeIds.get(edge);
+    if (!id) throw new Error(`removing edge ${edge} which does not exist`);
+    mut.removeEdge(this.parseEdge(edge));
+  }
+  _updateEdge(edge, mut) {
+    const id = this.edgeIds.get(edge);
+    if (!id) throw new Error(`updating unknown edge ${edge}`);
+    const data = this.parseEdge(edge);
+    if (data.id !== id) throw new Error(`edge id changed from ${id} to ${data.id}`);
+    mut.updateEdge(data);
   }
 };
-var mixins = [
-  GraphNodes,
-  GraphEdges,
-  GraphLayers,
-  GraphAPI,
-  GraphMutate,
-  GraphCycle,
-  GraphDummy,
-  GraphPos
-];
-for (const mixin of mixins)
-  Object.assign(Graph.prototype, mixin);
+
+// src/index.ts
+async function graph(args = { root: "app" }) {
+  const api = new API(args);
+  await api.init();
+  return api;
+}
+var index_default = graph;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Graph
+  graph
 });