@3plate/graph-core 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,20 +1,20 @@
-// src/canvas/render-node.tsx
-import { jsx } from "jsx-dom/jsx-runtime";
-function renderNode(node) {
-  return /* @__PURE__ */ jsx("div", { children: node?.id || "" });
-}
-
-// src/graph/types/graph.ts
+// src/graph/graph.ts
 import { Map as IMap, List as IList, Set as ISet6 } from "immutable";
 
-// src/graph/types/node.ts
+// src/graph/node.ts
 import { Record, Set as ISet } from "immutable";
-var defaultNodeProps = {
+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: ISet(), out: ISet() },
   segs: { in: ISet(), out: ISet() },
-  ports: { in: [], out: [] },
   layerId: "",
   isDummy: false,
   isMerged: false,
@@ -25,29 +25,35 @@ var defaultNodeProps = {
   dims: void 0,
   mutable: false
 };
-var Node = class _Node extends Record(defaultNodeProps) {
+var Node = class _Node extends Record(defNodeData) {
   static dummyPrefix = "d:";
-  get 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() {
-    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 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, props) {
+  static addNormal(g, data) {
     const layer = g.layerAt(0);
     const node = new _Node({
-      ...props,
+      ...data,
       edges: { in: ISet(), out: ISet() },
       segs: { in: ISet(), out: ISet() },
       aligned: {},
@@ -59,10 +65,10 @@ var Node = class _Node extends Record(defaultNodeProps) {
     g.dirtyNodes.add(node.id);
     return node;
   }
-  static addDummy(g, props) {
-    const layer = g.getLayer(props.layerId);
+  static addDummy(g, data) {
+    const layer = g.getLayer(data.layerId);
     const node = new _Node({
-      ...props,
+      ...data,
       id: `${_Node.dummyPrefix}${g.nextDummyId++}`,
       edges: { in: ISet(), out: ISet() },
       segs: { in: ISet(), out: ISet() },
@@ -78,6 +84,12 @@ var Node = class _Node extends Record(defaultNodeProps) {
     g.dirtyNodes.add(node.id);
     return node;
   }
+  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);
@@ -100,6 +112,9 @@ var Node = class _Node extends Record(defaultNodeProps) {
   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;
   }
@@ -108,11 +123,9 @@ var Node = class _Node extends Record(defaultNodeProps) {
   }
   setIndex(g, index) {
     if (this.index == index) return this;
-    console.log(`set index of ${this.id} to ${index}`);
     return this.mut(g).set("index", index);
   }
   setLayerPos(g, lpos) {
-    console.log("setLayerPos", this.id, lpos);
     if (this.lpos == lpos) return this;
     return this.mut(g).set("lpos", lpos);
   }
@@ -126,7 +139,6 @@ var Node = class _Node extends Record(defaultNodeProps) {
     return this;
   }
   moveToLayer(g, layer) {
-    console.log("moveToLayer", this, this.getLayer(g), layer);
     this.getLayer(g).delNode(g, this.id);
     layer.addNode(g, this.id);
     return this.setLayer(g, layer.id);
@@ -248,16 +260,44 @@ var Node = class _Node extends Record(defaultNodeProps) {
   }
 };
 
-// src/graph/types/edge.ts
+// src/graph/edge.ts
 import { Record as Record2 } from "immutable";
-var defaultEdgeProps = {
+
+// 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(module) {
+  return {
+    error: (msg, ...args) => shouldLog("error") && console.error(`[${module}] ${msg}`, ...args),
+    warn: (msg, ...args) => shouldLog("warn") && console.warn(`[${module}] ${msg}`, ...args),
+    info: (msg, ...args) => shouldLog("info") && console.info(`[${module}] ${msg}`, ...args),
+    debug: (msg, ...args) => shouldLog("debug") && console.debug(`[${module}] ${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 Record2(defaultEdgeProps) {
+var Edge = class _Edge extends Record2(defEdgeData) {
   static prefix = "e:";
   mut(g) {
     if (this.mutable) return this;
@@ -315,37 +355,44 @@ var Edge = class _Edge extends Record2(defaultEdgeProps) {
     return _Edge.str(this);
   }
   static str(edge) {
-    let source = edge.source.id;
-    if (edge.source.port)
+    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 (edge.target.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 id(edge, prefix = _Edge.prefix, side = "both") {
+  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)
+      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 += "-";
     }
     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}]`;
     }
     const type = edge.type || "";
     return `${prefix}${source}${type}${target}`;
   }
-  static add(g, props) {
+  static add(g, data) {
     const edge = new _Edge({
-      ...props,
-      id: _Edge.id(props),
+      ...data,
       segIds: []
     });
     edge.link(g);
@@ -353,18 +400,39 @@ var Edge = class _Edge extends Record2(defaultEdgeProps) {
     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/graph/types/seg.ts
+// src/graph/seg.ts
 import { Record as Record3, Set as ISet2 } from "immutable";
-var defaultSegProps = {
+var defSegData = {
   id: "",
   source: { id: "" },
   target: { id: "" },
+  type: void 0,
+  style: void 0,
   edgeIds: ISet2(),
+  trackPos: void 0,
+  svg: void 0,
   mutable: false
 };
-var Seg = class _Seg extends Record3(defaultSegProps) {
+var Seg = class _Seg extends Record3(defSegData) {
   static prefix = "s:";
   mut(g) {
     if (this.mutable) return this;
@@ -389,7 +457,7 @@ var Seg = class _Seg extends Record3(defaultSegProps) {
   sameEnd(other, side) {
     const mine = this[side];
     const yours = other[side];
-    return mine.id === yours.id && mine.port === yours.port;
+    return mine.id === yours.id && mine.port === yours.port && mine.marker === yours.marker;
   }
   setPos(g, source, target) {
     return this.mut(g).merge({
@@ -447,10 +515,10 @@ var Seg = class _Seg extends Record3(defaultSegProps) {
     }
     return this.mut(g).set("edgeIds", this.edgeIds.asMutable().remove(edgeId));
   }
-  static add(g, props) {
+  static add(g, data) {
     const seg = new _Seg({
-      ...props,
-      id: Edge.id(props, _Seg.prefix)
+      ...data,
+      id: Edge.key(data, _Seg.prefix)
     });
     seg.link(g);
     g.segs.set(seg.id, seg);
@@ -459,33 +527,10 @@ var Seg = class _Seg extends Record3(defaultSegProps) {
   }
 };
 
-// src/graph/types/layer.ts
+// src/graph/layer.ts
 import { Record as Record4, Set as ISet3 } from "immutable";
-
-// 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(module) {
-  return {
-    error: (msg, ...args) => shouldLog("error") && console.error(`[${module}] ${msg}`, ...args),
-    warn: (msg, ...args) => shouldLog("warn") && console.warn(`[${module}] ${msg}`, ...args),
-    info: (msg, ...args) => shouldLog("info") && console.info(`[${module}] ${msg}`, ...args),
-    debug: (msg, ...args) => shouldLog("debug") && console.debug(`[${module}] ${msg}`, ...args)
-  };
-}
-var log = logger("core");
-
-// src/graph/types/layer.ts
-var log2 = logger("layer");
-var defaultLayerProps = {
+var log3 = logger("layer");
+var defLayerData = {
   id: "",
   index: 0,
   nodeIds: ISet3(),
@@ -496,7 +541,7 @@ var defaultLayerProps = {
   isSorted: false,
   mutable: false
 };
-var Layer = class extends Record4(defaultLayerProps) {
+var Layer = class extends Record4(defLayerData) {
   static prefix = "l:";
   mut(g) {
     if (this.mutable) return this;
@@ -578,7 +623,6 @@ var Layer = class extends Record4(defaultLayerProps) {
   }
   setSorted(g, nodeIds) {
     if (this.hasSortOrder(nodeIds)) return this;
-    console.log(`setting sorted for layer ${this.id}`);
     nodeIds.forEach((nodeId, i) => g.getNode(nodeId).setIndex(g, i));
     return this.mut(g).merge({ sorted: nodeIds, isSorted: true });
   }
@@ -588,7 +632,7 @@ var Layer = class extends Record4(defaultLayerProps) {
   }
 };
 
-// src/graph/types/mutator.ts
+// src/graph/mutator.ts
 var Mutator = class {
   changes;
   constructor() {
@@ -597,20 +641,27 @@ var Mutator = class {
       removedNodes: [],
       updatedNodes: [],
       addedEdges: [],
-      removedEdges: []
+      removedEdges: [],
+      updatedEdges: []
     };
   }
+  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) {
-    if (typeof node === "string")
-      this.changes.updatedNodes.push({ id: node });
-    else
-      this.changes.updatedNodes.push(node);
+    this.changes.updatedNodes.push(node);
   }
   updateNodes(...nodes) {
     nodes.forEach((node) => this.updateNode(node));
@@ -621,21 +672,18 @@ var Mutator = class {
   addEdges(...edges) {
     edges.forEach((edge) => this.addEdge(edge));
   }
-  removeNode(node) {
-    if (typeof node === "string")
-      this.changes.removedNodes.push({ id: node });
-    else
-      this.changes.removedNodes.push(node);
-  }
-  removeNodes(...nodes) {
-    nodes.forEach((node) => this.removeNode(node));
-  }
   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/services/cycles.ts
@@ -735,14 +783,12 @@ var Cycles = class _Cycles {
 
 // src/graph/services/dummy.ts
 import { Set as ISet4 } from "immutable";
-var log3 = logger("dummy");
+var log4 = logger("dummy");
 var Dummy = class _Dummy {
   static updateDummies(g) {
-    log3.debug(`updating dummies:`, [...g.dirtyEdges]);
     for (const edgeId of g.dirtyEdges) {
-      log3.debug(`updating dummies of edge ${edgeId}`);
       const edge = g.getEdge(edgeId);
-      const { type } = edge;
+      const { type, style } = edge;
       const sourceLayer = edge.sourceNode(g).layerIndex(g);
       const targetLayer = edge.targetNode(g).layerIndex(g);
       let segIndex = 0;
@@ -766,12 +812,10 @@ var Dummy = class _Dummy {
               });
               target = { id: dummy.id };
             }
-            seg = Seg.add(g, { source, target, type, edgeIds: ISet4([edgeId]) });
-            log3.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: ISet4([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)) {
-            log3.debug(`edge ${edgeId}: removing segment ${seg.id} from layer ${layerIndex - 1} to layer ${layerIndex}`);
             seg = seg.delEdgeId(g, edgeId);
             segs.splice(segIndex, 1);
             changed = true;
@@ -783,14 +827,12 @@ var Dummy = class _Dummy {
         }
       }
       while (segIndex < segs.length) {
-        log3.debug(`edge ${edgeId}: removing trailing segment ${segs[segIndex]}`);
         g.getSeg(segs[segIndex]).delEdgeId(g, edgeId);
         segs.splice(segIndex, 1);
         changed = true;
         segIndex++;
       }
       if (changed) {
-        log3.debug(`edge ${edgeId}: updated segments to ${segs.join(", ")}`);
         edge.setSegIds(g, segs);
       }
     }
@@ -805,7 +847,6 @@ var Dummy = class _Dummy {
     const dir = side == "source" ? "in" : "out";
     const altSide = side == "source" ? "target" : "source";
     const altDir = altSide == "source" ? "in" : "out";
-    log3.debug(`merging dummies by ${side}`);
     for (const layerId of layerIds) {
       let layer = g.getLayer(layerId);
       const groups = /* @__PURE__ */ new Map();
@@ -814,7 +855,7 @@ var Dummy = class _Dummy {
         const node = g.getNode(nodeId);
         if (node.isMerged) continue;
         const edge = g.getEdge(node.edgeIds[0]);
-        const key = Edge.id(edge, "k:", side);
+        const key = Edge.key(edge, "k:", side);
         if (!groups.has(key)) groups.set(key, /* @__PURE__ */ new Set());
         groups.get(key).add(node);
       }
@@ -856,7 +897,7 @@ var Dummy = class _Dummy {
 
 // src/graph/services/layers.ts
 import { Seq } from "immutable";
-var log4 = logger("layers");
+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);
@@ -919,13 +960,11 @@ var Layers = class {
 
 // src/graph/services/layout.ts
 import { Seq as Seq2 } from "immutable";
-var log5 = logger("layout");
+var log6 = logger("layout");
 var Layout = class _Layout {
   static parentIndex(g, node) {
     const parents = Seq2([...node.adjs(g, "segs", "in")]);
-    console.log(`parents of ${node.id}:`, [...parents], [...parents.map((p) => p.index)]);
     const pidx = parents.map((p) => p.index).min();
-    log5.debug(`node ${node.id}: parent index ${pidx}`);
     if (pidx !== void 0) return pidx;
     return node.isDummy ? -Infinity : Infinity;
   }
@@ -943,7 +982,6 @@ var Layout = class _Layout {
     return minA.localeCompare(minB);
   }
   static positionNodes(g) {
-    console.log("positionNodes", g.dirtyNodes);
     for (const nodeId of g.dirtyNodes)
       g.dirtyLayers.add(g.getNode(nodeId).layerId);
     let adjustNext = false;
@@ -951,15 +989,12 @@ var Layout = class _Layout {
       if (!adjustNext && !g.dirtyLayers.has(layerId)) continue;
       adjustNext = false;
       let layer = g.getLayer(layerId);
-      console.log(`positioning layer ${layerId} at ${layer.index}`);
       const pidxs = /* @__PURE__ */ new Map();
       for (const nodeId of layer.nodeIds)
         pidxs.set(nodeId, _Layout.parentIndex(g, g.getNode(nodeId)));
-      console.log("pidxs", pidxs);
       const sorted = [...layer.nodeIds].sort(
         (aId, bId) => _Layout.compareNodes(g, aId, bId, pidxs)
       );
-      console.log(`sorted:`, sorted);
       if (layer.hasSortOrder(sorted)) continue;
       g.dirtyLayers.add(layerId);
       layer = layer.setSorted(g, sorted);
@@ -967,7 +1002,6 @@ var Layout = class _Layout {
       let lpos = 0;
       for (let i = 0; i < sorted.length; i++) {
         let node = g.getNode(sorted[i]);
-        log5.debug(`node ${node.id}: final index ${i}`);
         node = node.setIndex(g, i).setLayerPos(g, lpos);
         const size = node.dims?.[g.w] ?? 0;
         lpos += size + g.options.nodeMargin;
@@ -999,7 +1033,12 @@ var Layout = class _Layout {
     for (const layerId of layerIds) {
       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 = _Layout.sortLayer(g, layerId, reverseNodes);
         for (const nodeId of nodeIds) {
@@ -1065,17 +1104,45 @@ var Layout = class _Layout {
         [g.x]: p[g.x] + w / 2,
         [g.y]: p[g.y] + h / 2
       };
-    p[g.x] += _Layout.nodePortOffset(g, nodeId, seg[side].port);
-    if (side == "source" == g.r)
+    p[g.x] += _Layout.nodePortOffset(g, nodeId, seg, side);
+    if (side == "target" == g.r)
       p[g.y] += h;
     return p;
   }
-  static nodePortOffset(g, nodeId, port) {
-    if (!port) return g.options.defaultPortOffset;
-    return g.options.defaultPortOffset;
+  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)
       _Layout.markAligned(g, nodeId, alignId, dir, lpos);
     const space = g.options.nodeMargin;
@@ -1106,7 +1173,7 @@ var Layout = class _Layout {
       g.getNode(node.aligned[dir]).setAligned(g, alt, void 0);
     if (otherId)
       g.getNode(otherId).setAligned(g, alt, nodeId);
-    node.setAligned(g, dir, otherId);
+    node.setAligned(g, dir, otherId).setLayerPos(g, lpos);
   }
   static *aligned(g, nodeId, dir) {
     const visit = function* (node2, dir2) {
@@ -1166,39 +1233,141 @@ var Layout = class _Layout {
     let pos = 0;
     const dir = g.r ? -1 : 1;
     const trackSep = Math.max(
-      g.options.layerMargin,
       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;
-      console.log(`getCoords: layer = ${layerId} at ${layer.index}`);
       if (g.dirtyLayers.has(layerId)) {
         height = Seq2(layer.nodes(g)).map((node) => node.dims?.[g.h] ?? 0).max() ?? 0;
         layer = layer.setSize(g, height);
       } else height = layer.size;
-      console.log(`getCoords: layer = ${layerId}: pos = ${pos}, height = ${height}`);
       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;
-        console.log(`getCoords: node = ${node.id}: pos:`, npos);
         node.setPos(g, npos);
       }
       layer = layer.setPos(g, pos);
-      pos += dir * (height + trackSep);
+      pos += dir * (height + marginSep);
       for (const track of layer.tracks) {
         for (const segId of track)
           g.getSeg(segId).setTrackPos(g, pos);
-        pos += dir * g.options.edgeSpacing;
+        pos += dir * trackSep;
       }
+      pos += dir * (marginSep - trackSep);
     }
   }
 };
 
+// src/canvas/marker.tsx
+import { default as default2 } from "./marker.css?raw";
+import { jsx } from "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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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");
@@ -1273,7 +1442,12 @@ var Lines = class _Lines {
       const radius = g.options.turnRadius;
       const p1 = Layout.anchorPos(g, seg, "source");
       const p2 = Layout.anchorPos(g, seg, "target");
-      const path = seg.trackPos !== void 0 ? _Lines.createRailroadPath(g, p1, p2, seg.trackPos, radius) : _Lines.createDirectPath(g, p1, p2, radius);
+      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);
     }
@@ -1299,7 +1473,7 @@ var Lines = class _Lines {
     }
     return line;
   }
-  static pathBuilder(g, start, end, trackPos, radius) {
+  static pathBuilder(g, start, end, trackPos, radius, marker) {
     const { x, y } = g;
     const lr = end[x] > start[x];
     const d = lr ? 1 : -1;
@@ -1311,6 +1485,8 @@ var Lines = class _Lines {
     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) => {
@@ -1319,8 +1495,8 @@ var Lines = class _Lines {
     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) {
-    const { x, y, rd, ro, t, s, p, path, advance } = this.pathBuilder(g, start, end, trackPos, radius);
+  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");
@@ -1329,8 +1505,8 @@ var Lines = class _Lines {
     return path;
   }
   // Create a mostly-vertical path with optional S-curve
-  static createDirectPath(g, start, end, radius) {
-    const { x, y, d, o, s, p, path, advance } = this.pathBuilder(g, start, end, 0, radius);
+  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 };
@@ -1421,21 +1597,14 @@ var Lines = class _Lines {
   }
 };
 
-// src/graph/types/graph.ts
-var defaultOptions = {
-  mergeOrder: ["target", "source"],
-  nodeMargin: 15,
-  dummyNodeSize: 15,
-  defaultPortOffset: 20,
-  nodeAlign: "natural",
-  edgeSpacing: 10,
-  turnRadius: 10,
-  orientation: "TB",
-  layerMargin: 5,
-  alignIterations: 5,
-  alignThreshold: 10,
-  separateTrackSets: true,
-  layoutSteps: null
+// src/graph/graph.ts
+var emptyChanges = {
+  addedNodes: [],
+  removedNodes: [],
+  updatedNodes: [],
+  addedEdges: [],
+  removedEdges: [],
+  updatedEdges: []
 };
 var Graph = class _Graph {
   prior;
@@ -1464,30 +1633,10 @@ var Graph = class _Graph {
   x;
   y;
   d;
-  constructor({ prior, changes, options, nodes, edges } = {}) {
+  constructor({ prior, changes, options }) {
+    this.options = prior?.options ?? options;
+    this.changes = changes ?? emptyChanges;
     this.initFromPrior(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.options = {
-      ...defaultOptions,
-      ...prior?.options,
-      ...options
-    };
-    this.changes = changes ?? {
-      addedNodes: [],
-      removedNodes: [],
-      updatedNodes: [],
-      addedEdges: [],
-      removedEdges: []
-    };
-    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.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";
@@ -1503,38 +1652,41 @@ var Graph = class _Graph {
       this.n = true;
     else
       this.n = natAligns[this.options.orientation] == this.options.nodeAlign;
-    if (this.dirty) {
-      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();
-      }
+    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)
-      this.getEdge(Edge.id(edge)).delSelf(this);
+      Edge.del(this, edge);
     for (const node of this.changes.removedNodes)
-      this.getNode(node.id).delSelf(this);
+      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)
-      this.dirtyNodes.add(node.id);
+      Node.update(this, node);
+    for (const edge of this.changes.updatedEdges)
+      Edge.update(this, edge);
   }
   layerAt(index) {
     while (index >= this.layerList.size)
@@ -1611,24 +1763,24 @@ var Graph = class _Graph {
       nodes.forEach((node) => mutator.addNode(node));
     });
   }
-  addEdges(...edges) {
+  removeNodes(...nodes) {
     return this.withMutations((mutator) => {
-      edges.forEach((edge) => mutator.addEdge(edge));
+      nodes.forEach((node) => mutator.removeNode(node));
     });
   }
-  addEdge(edge) {
+  removeNode(node) {
     return this.withMutations((mutator) => {
-      mutator.addEdge(edge);
+      mutator.removeNode(node);
     });
   }
-  removeNodes(...nodes) {
+  addEdges(...edges) {
     return this.withMutations((mutator) => {
-      nodes.forEach((node) => mutator.removeNode(node));
+      edges.forEach((edge) => mutator.addEdge(edge));
     });
   }
-  removeNode(node) {
+  addEdge(edge) {
     return this.withMutations((mutator) => {
-      mutator.removeNode(node);
+      mutator.addEdge(edge);
     });
   }
   removeEdges(...edges) {
@@ -1678,6 +1830,14 @@ var Graph = class _Graph {
     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();
@@ -1707,15 +1867,20 @@ var Graph = class _Graph {
   }
 };
 
-// src/canvas/canvas.css
-var canvas_default = ".g3p-canvas-container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.g3p-canvas-root {\n  display: block;\n  width: 100%;\n  height: 100%;\n  user-select: none;\n  background: #fafafa;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}";
+// 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
+import styles from "./node.css?raw";
 
 // src/canvas/styler.ts
 var injected = {};
-function styler(name, styles, prefix) {
+function styler(name, styles4, prefix) {
   if (prefix === "g3p" && !injected[name]) {
     const style = document.createElement("style");
-    style.textContent = styles;
+    style.textContent = styles4;
     document.head.appendChild(style);
     injected[name] = true;
   }
@@ -1727,98 +1892,106 @@ function styler(name, styles, prefix) {
   };
 }
 
-// src/canvas/node.css
-var node_default = ".g3p-node-container {\n  transition: opacity 0.2s ease;\n}\n\n.g3p-node-background {\n  fill: var(--graph-node-bg, #ffffff);\n  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));\n}\n\n.g3p-node-border {\n  stroke: var(--graph-node-border, #cbd5e1);\n  transition: stroke 0.2s ease, stroke-width 0.2s ease;\n}\n\n.g3p-node-background.hovered {\n  fill: var(--graph-node-hover, #f1f5f9);\n}\n\n.g3p-node-border.hovered {\n  stroke: #94a3b8;\n}\n\n.g3p-node-border.selected {\n  stroke: var(--graph-node-border-selected, #3b82f6);\n  stroke-width: 3;\n}\n\n.g3p-node-content-wrapper {\n  pointer-events: none;\n}\n\n.g3p-node-content {\n  pointer-events: auto;\n  box-sizing: border-box;\n}\n\n.g3p-node-content>div {\n  width: 100%;\n  height: 100%;\n}\n\n/* Dummy node styles */\n.g3p-node-dummy .g3p-node-background {\n  fill: var(--graph-dummy-node-bg, #f8fafc);\n  opacity: 0.8;\n}\n\n.g3p-node-dummy .g3p-node-border {\n  stroke: var(--graph-dummy-node-border, #cbd5e1);\n  stroke-dasharray: 3, 3;\n}";
-
 // src/canvas/node.tsx
-import { Fragment, jsx as jsx2, jsxs } from "jsx-dom/jsx-runtime";
+import { jsx as jsx2, jsxs } from "jsx-dom/jsx-runtime";
+var log8 = logger("canvas");
 var Node2 = class {
   selected;
   hovered;
   container;
-  dims;
   content;
-  measured;
+  canvas;
+  data;
+  classPrefix;
   isDummy;
-  constructor(options) {
-    this.isDummy = false;
-    Object.assign(this, {
-      selected: false,
-      hovered: false,
-      renderNode: () => null,
-      onClick: () => null,
-      onMouseEnter: () => null,
-      onMouseLeave: () => null,
-      onContextMenu: () => null,
-      onMouseDown: () => null,
-      onMouseUp: () => null,
-      classPrefix: "g3p",
-      ...options
-    });
-    if (!this.isDummy) {
-      this.content = this.renderNode(this.data);
-      this.measured = false;
+  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 {
-      this.measured = true;
+      const render = data.render ?? canvas.renderNode;
+      this.content = this.renderContent(render(data.data));
     }
   }
-  getSize() {
-    const rect = this.content.getBoundingClientRect();
-    this.dims = { w: rect.width, h: rect.height };
-    this.measured = true;
+  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();
-    this.onClick?.(this.data, e);
   }
   handleMouseEnter(e) {
-    this.onMouseEnter?.(this.data, e);
   }
   handleMouseLeave(e) {
-    this.onMouseLeave?.(this.data, e);
   }
   handleContextMenu(e) {
-    if (this.onContextMenu) {
-      e.stopPropagation();
-      this.onContextMenu(this.data, e);
-    }
   }
   handleMouseDown(e) {
-    this.onMouseDown?.(this.data, e);
   }
   handleMouseUp(e) {
-    this.onMouseUp?.(this.data, e);
   }
   setPos(pos) {
-    console.log(`setPos:`, this, pos);
     this.pos = pos;
-    this.container.setAttribute("transform", `translate(${this.pos.x}, ${this.pos.y})`);
-  }
-  // render will be called once the node is measured
-  render() {
-    const c = styler("node", node_default, this.classPrefix);
-    return /* @__PURE__ */ jsx2(
+    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", styles, 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__ */ jsx2(
       "g",
       {
-        ref: (el) => this.container = el,
-        className: `${c("container")} ${c("dummy", this.isDummy)}`,
-        onClick: this.handleClick.bind(this),
-        onMouseEnter: this.handleMouseEnter.bind(this),
-        onMouseLeave: this.handleMouseLeave.bind(this),
-        onContextMenu: this.handleContextMenu.bind(this),
-        onMouseDown: this.handleMouseDown.bind(this),
-        onMouseUp: this.handleMouseUp.bind(this),
+        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: this.isDummy ? this.renderDummy() : this.renderContent()
+        children: inner
       }
     );
   }
+  renderForeign() {
+    const { w, h } = this.data.dims;
+    return /* @__PURE__ */ jsx2("foreignObject", { width: w, height: h, children: this.content });
+  }
   renderDummy() {
-    const c = styler("node", node_default, this.classPrefix);
-    let { w, h } = this.dims;
+    const c = styler("node", styles, this.classPrefix);
+    let w = this.canvas.dummyNodeSize;
+    let h = this.canvas.dummyNodeSize;
     w /= 2;
     h /= 2;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx2(
         "ellipse",
         {
@@ -1837,157 +2010,190 @@ var Node2 = class {
           rx: w,
           ry: h,
           fill: "none",
-          className: c("border"),
-          strokeWidth: "2"
+          className: c("border")
         }
       )
     ] });
   }
-  renderContent() {
-    const c = styler("node", node_default, this.classPrefix);
-    const { w, h } = this.dims;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx2(
-        "rect",
-        {
-          className: c("background"),
-          width: w,
-          height: h,
-          rx: 8,
-          ry: 8
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "rect",
-        {
-          className: c("border"),
-          width: w,
-          height: h,
-          rx: 8,
-          ry: 8,
-          fill: "none",
-          strokeWidth: "2"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "foreignObject",
-        {
-          width: w,
-          height: h,
-          className: c("content-wrapper"),
-          children: /* @__PURE__ */ jsx2(
-            "div",
-            {
-              className: c("content"),
-              style: {
-                width: `${w}px`,
-                height: `${h}px`,
-                overflow: "hidden"
-              },
-              children: this.content
-            }
-          )
+  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", styles, 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__ */ jsx2("div", { className: `${c("ports")} ${c(`ports-${layoutClass}`)}`, children: ports.map((port) => /* @__PURE__ */ jsx2(
+      "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", styles, 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__ */ jsxs("div", { className: `${c("with-ports")} ${c(`with-ports-${wrapperClass}`)}`, children: [
+      inPorts,
+      el,
+      outPorts
     ] });
   }
+  renderOutsidePorts(el) {
+    const c = styler("node", styles, 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__ */ jsxs("div", { className: `${c("with-ports")} ${c(`with-ports-${wrapperClass}`)}`, children: [
+      inPorts,
+      el,
+      outPorts
+    ] });
+  }
+  renderBorder(el) {
+    const c = styler("node", styles, this.classPrefix);
+    return /* @__PURE__ */ jsx2("div", { className: c("border"), children: el });
+  }
 };
 
-// src/canvas/seg.css
-var seg_default = ".g3p-seg-container {\n  transition: opacity 0.2s ease;\n}\n\n.g3p-seg-line {\n  transition: stroke 0.2s ease, stroke-width 0.2s ease;\n}\n\n.g3p-seg-line.hovered {\n  stroke-width: 4;\n  opacity: 1;\n}\n\n.g3p-seg-line.selected {\n  stroke: var(--graph-node-border-selected, #3b82f6);\n  stroke-width: 3;\n}\n\n.g3p-seg-hitbox {\n  cursor: pointer;\n}";
-
 // src/canvas/seg.tsx
+import styles2 from "./seg.css?raw";
 import { jsx as jsx3, jsxs as jsxs2 } from "jsx-dom/jsx-runtime";
+var log9 = logger("canvas");
 var Seg2 = class {
+  id;
   selected;
   hovered;
-  constructor(options) {
+  canvas;
+  classPrefix;
+  type;
+  svg;
+  el;
+  source;
+  target;
+  constructor(canvas, data, g) {
+    this.id = data.id;
+    this.canvas = canvas;
     this.selected = false;
     this.hovered = false;
-    Object.assign(this, {
-      onClick: () => {
-      },
-      onMouseEnter: () => {
-      },
-      onMouseLeave: () => {
-      },
-      onContextMenu: () => {
-      },
-      classPrefix: "g3p",
-      ...options
-    });
-    this.attrs ??= {};
-    this.attrs.targetTerminal ??= "arrow";
+    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();
-    this.onClick?.(this.edgeData, e);
   }
   handleMouseEnter(e) {
-    this.onMouseEnter?.(this.edgeData, e);
   }
   handleMouseLeave(e) {
-    this.onMouseLeave?.(this.edgeData, e);
   }
   handleContextMenu(e) {
-    if (this.onContextMenu) {
-      e.stopPropagation();
-      this.onContextMenu(this.edgeData, e);
-    }
   }
-  renderTerminals() {
-    return {
-      source: this.renderTerminal(this.attrs.sourceTerminal, "source"),
-      target: this.renderTerminal(this.attrs.targetTerminal, "target")
-    };
+  append() {
+    this.canvas.group.appendChild(this.el);
   }
-  setSVG(svg) {
-    this.svg = svg;
-    const n = this.el.childElementCount;
-    this.el.childNodes[n - 2].setAttribute("d", svg);
-    this.el.childNodes[n - 1].setAttribute("d", svg);
+  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("edge", seg_default, this.classPrefix);
-    const styleAttrs = {
-      stroke: this.attrs.color,
-      strokeWidth: this.attrs.width,
-      strokeDasharray: this.attrs.style
-    };
-    const hoverAttrs = {
-      ...styleAttrs,
-      strokeWidth: styleAttrs.strokeWidth ? Math.max(styleAttrs.strokeWidth * 3, 10) : void 0
-    };
-    const { source, target } = this.renderTerminals();
+    const c = styler("seg", styles2, 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__ */ jsxs2(
       "g",
       {
         ref: (el) => this.el = el,
-        id: `g3p-seg-${this.segId}`,
-        className: c("container"),
+        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: [
-          source?.defs,
-          target?.defs,
           /* @__PURE__ */ jsx3(
             "path",
             {
               d: this.svg,
-              ...styleAttrs,
               fill: "none",
               className: c("line"),
-              markerStart: source ? `url(#${source.id})` : void 0,
-              markerEnd: target ? `url(#${target.id})` : void 0
+              markerStart: source ? `url(#g3p-marker-${source}-reverse)` : void 0,
+              markerEnd: target ? `url(#g3p-marker-${target})` : void 0
             }
           ),
           /* @__PURE__ */ jsx3(
             "path",
             {
               d: this.svg,
-              ...hoverAttrs,
               stroke: "transparent",
               fill: "none",
               className: c("hitbox"),
@@ -1998,29 +2204,48 @@ var Seg2 = class {
       }
     );
   }
-  renderTerminal(type, side) {
-    if (!type)
-      return null;
-    const id = `g3p-seg-${this.segId}-${side}-${type}`;
-    const defs = /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3(
-      "marker",
-      {
-        id,
-        markerWidth: "10",
-        markerHeight: "10",
-        refX: "9",
-        refY: "3",
-        orient: "auto",
-        markerUnits: "userSpaceOnUse",
-        children: /* @__PURE__ */ jsx3("path", { d: "M0,0 L0,6 L9,3 z" })
-      }
-    ) });
-    return { id, defs };
-  }
 };
 
 // src/canvas/canvas.tsx
-import { jsx as jsx4 } from "jsx-dom/jsx-runtime";
+import styles3 from "./canvas.css?raw";
+import zoomStyles from "./zoom.css?raw";
+import { jsx as jsx4, jsxs as jsxs3 } from "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;
@@ -2028,26 +2253,27 @@ var Canvas = class {
   transform;
   bounds;
   measurement;
-  nodes;
-  segs;
+  allNodes;
+  curNodes;
+  curSegs;
   updating;
+  // Pan-zoom state
+  isPanning = false;
+  panStart = null;
+  transformStart = null;
+  panScale = null;
+  zoomControls;
   constructor(options) {
-    Object.assign(this, {
-      renderNode,
-      nodeStyle: () => ({}),
-      edgeStyle: () => ({}),
-      portStyle: "outside",
-      classPrefix: "g3p",
-      width: "100%",
-      height: "100%",
-      transform: { x: 0, y: 0, scale: 1 },
-      bounds: { min: { x: 0, y: 0 }, max: { x: 1, y: 1 } },
-      ...options
-    });
-    this.nodes = /* @__PURE__ */ new Map();
-    this.segs = /* @__PURE__ */ new Map();
+    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");
@@ -2060,85 +2286,94 @@ var Canvas = class {
     `;
     document.body.appendChild(this.measurement);
   }
-  update(callback) {
-    this.updating = true;
-    callback();
-    this.updating = false;
+  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.nodes.values()) {
-      const nx0 = node.pos.x, nx1 = node.pos.x + node.dims.w;
-      const ny0 = node.pos.y, ny1 = node.pos.y + node.dims.h;
+    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 } };
-    console.log("bounds", this.bounds);
     this.root.setAttribute("viewBox", this.viewBox());
   }
-  addNode(opts) {
-    const node = this.nodes.get(opts.data);
-    if (!node) throw new Error("node not found");
-    if (!node.container) node.render();
-    node.setPos(opts.pos);
-    this.group.appendChild(node.container);
-  }
-  updateNode(opts) {
-    const node = this.nodes.get(opts.data);
-    if (!node) throw new Error("node not found");
-    node.setPos(opts.pos);
-  }
-  deleteNode(opts) {
-    const node = this.nodes.get(opts.data);
-    if (!node) throw new Error("node not found");
-    node.container.remove();
-  }
-  addSeg(opts) {
-    const seg = new Seg2(opts);
-    this.segs.set(seg.segId, seg);
-    seg.render();
-    this.group.appendChild(seg.el);
-  }
-  updateSeg(opts) {
-    const seg = this.segs.get(opts.segId);
+  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.setSVG(opts.svg);
+    seg.update(gseg);
   }
-  deleteSeg(opts) {
-    const seg = this.segs.get(opts.segId);
+  deleteSeg(gseg) {
+    const seg = this.curSegs.get(gseg.id);
     if (!seg) throw new Error("seg not found");
-    seg.el.remove();
-    this.segs.delete(seg.segId);
+    this.curSegs.delete(gseg.id);
+    seg.remove();
   }
-  async measure(nodes) {
-    const newNodes = [];
+  async measureNodes(nodes) {
+    const newNodes = /* @__PURE__ */ new Map();
     for (const data of nodes) {
-      if (this.nodes.has(data)) continue;
-      const node = new Node2({
-        data,
-        renderNode: this.renderNode,
-        classPrefix: this.classPrefix,
-        isDummy: false
-      });
-      this.nodes.set(node.data, node);
-      if (!node.measured) {
-        this.measurement.appendChild(node.content);
-        newNodes.push(node);
-      }
+      const node = new Node2(this, data);
+      newNodes.set(data.data, node);
+      this.measurement.appendChild(node.content);
     }
-    return new Promise((resolve) => {
-      requestAnimationFrame(() => {
-        for (const node of newNodes)
-          node.getSize();
-        this.measurement.textContent = "";
-        resolve();
-      });
-    });
-  }
-  getDims(node) {
-    return this.nodes.get(node).dims;
+    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);
@@ -2150,17 +2385,47 @@ var Canvas = class {
     return `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.scale})`;
   }
   viewBox() {
-    return `${this.bounds.min.x} ${this.bounds.min.y} ${this.bounds.max.x - this.bounds.min.x} ${this.bounds.max.y - this.bounds.min.y}`;
-  }
-  render() {
-    const c = styler("canvas", canvas_default, this.classPrefix);
-    return /* @__PURE__ */ jsx4(
+    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 = default2;
+    document.head.appendChild(markerStyleEl);
+    const zoomStyleEl = document.createElement("style");
+    zoomStyleEl.textContent = zoomStyles;
+    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", styles3, this.classPrefix);
+    const colorModeClass = this.colorMode !== "system" ? `g3p-${this.colorMode}` : "";
+    this.container = /* @__PURE__ */ jsx4(
       "div",
       {
-        className: c("container"),
+        className: `${c("container")} ${colorModeClass}`.trim(),
         ref: (el) => this.container = el,
         onContextMenu: this.onContextMenu.bind(this),
-        children: /* @__PURE__ */ jsx4(
+        children: /* @__PURE__ */ jsxs3(
           "svg",
           {
             ref: (el) => this.root = el,
@@ -2170,70 +2435,308 @@ var Canvas = class {
             viewBox: this.viewBox(),
             preserveAspectRatio: "xMidYMid meet",
             onClick: this.onClick.bind(this),
-            children: /* @__PURE__ */ jsx4(
-              "g",
-              {
-                ref: (el) => this.group = el,
-                transform: this.groupTransform()
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsxs3("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__ */ jsx4(
+                "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", zoomStyles, this.classPrefix);
+    this.zoomControls = /* @__PURE__ */ jsxs3("div", { className: c("controls"), children: [
+      /* @__PURE__ */ jsx4("button", { className: c("btn"), onClick: () => this.zoomIn(), children: "+" }),
+      /* @__PURE__ */ jsx4("div", { className: c("level"), id: "g3p-zoom-level", children: "100%" }),
+      /* @__PURE__ */ jsx4("button", { className: c("btn"), onClick: () => this.zoomOut(), children: "\u2212" }),
+      /* @__PURE__ */ jsx4("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/index.ts
-import { Map as IMap2 } from "immutable";
-var identity = (x) => x;
-var defaultOptions2 = () => ({
-  ...defaultOptions,
-  nodeProps: identity,
-  edgeProps: identity,
-  portProps: identity,
-  renderNode,
-  nodeStyle: (() => ({})),
-  edgeStyle: (() => ({})),
-  portStyle: "outside",
-  width: "100%",
-  height: "100%",
-  classPrefix: "g3p"
-});
+// src/canvas/render-node.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "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__ */ jsxs4("div", { className: "g3p-node-default", children: [
+    /* @__PURE__ */ jsx5("div", { className: "g3p-node-title", children: title }),
+    detail && /* @__PURE__ */ jsx5("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;
   options;
-  constructor(options) {
-    this._options = {
-      ...defaultOptions2(),
-      ...options
-    };
-    this.options = new Proxy(this._options, {
-      set: (target, prop, value) => {
-        target[prop] = value;
-        this._onOptionChange(prop);
-        return true;
-      }
-    });
-    this.state = {
-      nodes: IMap2(),
-      edges: IMap2(),
-      ports: IMap2(),
-      segs: IMap2()
-    };
-    let graph2 = new Graph({ options: this._options });
-    this.state.graph = graph2;
+  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.canvas = new Canvas(this._options);
-    this.canvas.render();
+    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 = [];
+    }
   }
-  render() {
-    return this.canvas.container;
+  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;
@@ -2258,36 +2761,27 @@ var API = class {
     this.state = this.seq[this.index];
   }
   applyDiff(oldIndex, newIndex) {
-    const oldState = this.seq[oldIndex];
-    const newState = this.seq[newIndex];
-    this.canvas.update(() => {
-      for (const oldNode of oldState.nodes.values()) {
-        const newNode = newState.nodes.get(oldNode.id);
-        if (!newNode) {
-          this.canvas.deleteNode(oldNode);
-        } else if (oldNode.data !== newNode.data) {
-          this.canvas.deleteNode(oldNode);
-          this.canvas.addNode(newNode);
-        } else if (oldNode.pos.x !== newNode.pos.x || oldNode.pos.y !== newNode.pos.y) {
-          this.canvas.updateNode(newNode);
-        }
-      }
-      for (const newNode of newState.nodes.values()) {
-        if (!oldState.nodes.has(newNode.id))
-          this.canvas.addNode(newNode);
-      }
-      for (const oldSeg of oldState.segs.values()) {
-        const newSeg = newState.segs.get(oldSeg.segId);
-        if (!newSeg)
-          this.canvas.deleteSeg(oldSeg);
-        else if (oldSeg.svg != newSeg.svg)
-          this.canvas.updateSeg(newSeg);
-      }
-      for (const newSeg of newState.segs.values()) {
-        if (!oldState.segs.has(newSeg.segId))
-          this.canvas.addSeg(newSeg);
-      }
-    });
+    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));
@@ -2304,190 +2798,175 @@ var API = class {
   async deleteEdge(edge) {
     await this.update((update) => update.deleteEdge(edge));
   }
-  async update(callback) {
-    const update = new Update();
-    callback(update);
-    await this.measureNodes(update);
-    const newGraph = this.state.graph.withMutations((mut) => {
-      this.state = {
-        nodes: this.state.nodes.asMutable(),
-        edges: this.state.edges.asMutable(),
-        ports: this.state.ports.asMutable(),
-        segs: this.state.segs.asMutable()
-      };
-      for (const node of update.updatedNodes)
-        this._updateNode(node, mut);
-      for (const edge of update.updatedEdges)
-        this._updateEdge(edge, mut);
-      for (const node of update.addedNodes)
-        this._addNode(node, mut);
-      for (const node of update.removedNodes)
+  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 edge of update.addedEdges)
+      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.removedEdges)
-        this._removeEdge(edge, mut);
+      for (const edge of update.updateEdges ?? [])
+        this._updateEdge(edge, mut);
     });
-    console.log("new graph:", newGraph);
-    for (const nodeId of newGraph.dirtyNodes.values()) {
-      const node = newGraph.getNode(nodeId);
-      console.log(`got pos of node ${nodeId}:`, node.pos);
-      if (node.isDummy) {
-        this.state.nodes.set(nodeId, { id: nodeId, pos: node.pos, isDummy: true });
-      } else {
-        const myNode = this.state.nodes.get(nodeId);
-        this.state.nodes.set(nodeId, { ...myNode, pos: node.pos });
-      }
-    }
-    for (const nodeId of newGraph.delNodes)
-      this.state.nodes.delete(nodeId);
-    for (const segId of newGraph.delSegs)
-      this.state.segs.delete(segId);
-    for (const segId of newGraph.dirtySegs) {
-      const seg = newGraph.getSeg(segId);
-      const edge = this.state.edges.get(seg.edgeIds.values().next().value);
-      const target = seg.targetNode(newGraph);
-      this.state.segs.set(seg.id, {
-        segId: seg.id,
-        edgeId: edge.id,
-        svg: seg.svg,
-        attrs: edge.attrs,
-        targetDummy: target.isDummy,
-        edgeData: edge.data
-      });
-    }
-    this.state = {
-      nodes: this.state.nodes.asImmutable(),
-      edges: this.state.edges.asImmutable(),
-      ports: this.state.ports.asImmutable(),
-      segs: this.state.segs.asImmutable(),
-      graph: newGraph,
-      update
-    };
+    this.state = { graph: graph2, update };
+    this.setNodePositions();
     this.seq.splice(this.index + 1);
     this.seq.push(this.state);
     this.nav("last");
   }
-  async measureNodes(update) {
-    const nodes = update.updatedNodes.concat(update.addedNodes);
-    await this.canvas.measure(nodes);
-  }
-  getDims(node) {
-    return this.canvas.getDims(node);
-  }
-  _updateNode(node, mut) {
-    const props = this._options.nodeProps(node);
-    const oldData = this.state.nodes.get(props.id);
-    if (oldData === void 0)
-      throw new Error(`updating node ${props.id} which does not exist`);
-    const attrs = this._options.nodeStyle(node);
-    mut.updateNode({ id: props.id, dims: this.getDims(node) });
-    const data = { id: props.id, attrs, orig: node, node: props };
-    this.state.nodes.set(props.id, data);
-  }
-  _updateEdge(edge, mut) {
-    const props = this._options.edgeProps(edge);
-    const id = Edge.id(props), str = Edge.str(props);
-    const oldData = this.state.edges.get(id);
-    if (oldData === void 0)
-      throw new Error(`updating edge ${str} which does not exist`);
-    const attrs = props.type ? this._options.edgeStyle(props.type) : void 0;
-    const data = { id, attrs, data: edge, edge: props };
-    this.state.edges.set(id, data);
-    if (props.type !== oldData.edge.type) {
-      mut.removeEdge(oldData.edge);
-      mut.addEdge(props);
-    } else {
+  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);
     }
   }
-  _addNode(node, mut) {
-    const props = this._options.nodeProps(node);
-    if (this.state.nodes.has(props.id))
-      throw new Error(`node with id ${props.id} already exists`);
-    props.ports = { in: [], out: [], ...props.ports };
-    const attrs = this._options.nodeStyle(node);
-    const data = { id: props.id, attrs, data: node, node: props };
-    this.state.nodes.set(props.id, data);
-    console.log("adding node:", { ...props, dims: this.getDims(node) });
-    mut.addNode({ ...props, dims: this.getDims(node) });
+  async update(callback) {
+    const updater = new Updater();
+    callback(updater);
+    await this.applyUpdate(updater.update);
   }
-  _removeNode(node, mut) {
-    const props = this._options.nodeProps(node);
-    if (!this.state.nodes.has(props.id))
-      throw new Error(`removing node ${props.id} which does not exist`);
-    this.state.nodes.delete(props.id);
-    mut.removeNode(props);
+  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;
   }
-  _addEdge(edge, mut) {
-    const props = this._options.edgeProps(edge);
-    const id = Edge.id(props), str = Edge.str(props);
-    if (this.state.edges.has(id))
-      throw new Error(`edge ${str} already exists`);
-    const attrs = props.type ? this._options.edgeStyle(props.type) : void 0;
-    const data = { id, attrs, data: edge, edge: props };
-    this.state.edges.set(id, data);
-    mut.addEdge(props);
+  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}`);
   }
-  _removeEdge(edge, mut) {
-    const props = this._options.edgeProps(edge);
-    const id = Edge.id(props), str = Edge.str(props);
-    if (!this.state.edges.has(id))
-      throw new Error(`removing edge ${str} which does not exist`);
-    this.state.edges.delete(id);
-    mut.removeEdge(props);
+  parseStringEdge(str) {
+    const [source, target] = str.split(/\s*(?::|-+>?)\s*/);
+    return { source, target };
   }
-  _onOptionChange(prop) {
+  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;
   }
-};
-var Update = class {
-  addedNodes;
-  removedNodes;
-  updatedNodes;
-  addedEdges;
-  removedEdges;
-  updatedEdges;
-  desc;
-  constructor() {
-    this.addedNodes = [];
-    this.removedNodes = [];
-    this.updatedNodes = [];
-    this.addedEdges = [];
-    this.removedEdges = [];
-    this.updatedEdges = [];
+  getNodeId(node) {
+    let id = this.nodeIds.get(node);
+    if (!id) {
+      id = `n${this.nextNodeId++}`;
+      this.nodeIds.set(node, id);
+    }
+    return id;
   }
-  describe(desc) {
-    this.desc = desc;
+  getEdgeId(edge) {
+    let id = this.edgeIds.get(edge);
+    if (!id) {
+      id = `e${this.nextEdgeId++}`;
+      this.edgeIds.set(edge, id);
+    }
+    return id;
   }
-  addNode(node) {
-    this.addedNodes.push(node);
+  _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);
   }
-  deleteNode(node) {
-    this.removedNodes.push(node);
+  _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) {
-    this.updatedNodes.push(node);
+  _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) {
-    this.addedEdges.push(edge);
+  _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);
   }
-  deleteEdge(edge) {
-    this.removedEdges.push(edge);
+  _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) {
-    this.updatedEdges.push(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);
   }
 };
-async function graph(args = {}) {
-  const { nodes = [], edges = [], ...options } = args;
-  const api = new API(options);
-  if (nodes.length > 0 || edges.length > 0) {
-    await api.update((update) => {
-      for (const node of nodes)
-        update.addNode(node);
-      for (const edge of edges)
-        update.addEdge(edge);
-    });
-  }
+
+// src/index.ts
+async function graph(args = { root: "app" }) {
+  const api = new API(args);
+  await api.init();
   return api;
 }
 var index_default = graph;