@3plate/graph-core 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -30,6 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  FileSource: () => FileSource,
+  FileSystemSource: () => FileSystemSource,
+  Ingest: () => Ingest,
+  Playground: () => Playground,
+  WebSocketSource: () => WebSocketSource,
   default: () => index_default,
   graph: () => graph
 });
@@ -40,6 +45,70 @@ var import_immutable8 = require("immutable");
 
 // src/graph/node.ts
 var import_immutable = require("immutable");
+
+// src/log.ts
+var import_pino = __toESM(require("pino"), 1);
+var resolvedLevel = typeof globalThis !== "undefined" && globalThis.__LOG_LEVEL || typeof process !== "undefined" && process.env?.LOG_LEVEL || "debug";
+var browserOpts = { asObject: true };
+browserOpts.transmit = {
+  level: resolvedLevel,
+  send: (level, log12) => {
+    try {
+      const endpoint = typeof globalThis !== "undefined" && globalThis.__LOG_INGEST_URL || typeof process !== "undefined" && process.env?.LOG_INGEST_URL || void 0;
+      if (!endpoint || typeof window === "undefined") {
+        try {
+          console.debug("[graph-core] transmit skipped", { endpoint, hasWindow: typeof window !== "undefined", level });
+        } catch {
+        }
+        return;
+      }
+      const line = JSON.stringify({ level, ...log12, ts: Date.now() }) + "\n";
+      try {
+        console.debug("[graph-core] transmit sending", { endpoint, level, bytes: line.length });
+      } catch {
+      }
+      fetch(endpoint, {
+        method: "POST",
+        mode: "no-cors",
+        credentials: "omit",
+        body: line,
+        keepalive: true
+      }).then(() => {
+        try {
+          console.debug("[graph-core] transmit fetch ok");
+        } catch {
+        }
+      }).catch((err) => {
+        try {
+          console.debug("[graph-core] transmit fetch error", err?.message || err);
+        } catch {
+        }
+      });
+    } catch (e) {
+      try {
+        console.debug("[graph-core] transmit error", e?.message || e);
+      } catch {
+      }
+    }
+  }
+};
+var base = (0, import_pino.default)({
+  level: resolvedLevel,
+  browser: browserOpts
+});
+function logger(module2) {
+  const child = base.child({ module: module2 });
+  return {
+    error: (msg, ...args) => child.error({ args }, msg),
+    warn: (msg, ...args) => child.warn({ args }, msg),
+    info: (msg, ...args) => child.info({ args }, msg),
+    debug: (msg, ...args) => child.debug({ args }, msg)
+  };
+}
+var log = logger("core");
+
+// src/graph/node.ts
+var log2 = logger("node");
 var defNodeData = {
   id: "",
   data: void 0,
@@ -48,7 +117,7 @@ var defNodeData = {
   text: void 0,
   type: void 0,
   render: void 0,
-  ports: { in: null, out: null },
+  ports: {},
   aligned: {},
   edges: { in: (0, import_immutable.Set)(), out: (0, import_immutable.Set)() },
   segs: { in: (0, import_immutable.Set)(), out: (0, import_immutable.Set)() },
@@ -82,10 +151,7 @@ var Node = class _Node extends (0, import_immutable.Record)(defNodeData) {
     return this.isDummy ? this.id : _Node.key(this);
   }
   static key(node) {
-    return `${node.id}:${node.version}`;
-  }
-  static isDummyId(nodeId) {
-    return nodeId.startsWith(_Node.dummyPrefix);
+    return `k:${node.id}:${node.version}`;
   }
   static addNormal(g, data) {
     const layer = g.layerAt(0);
@@ -95,7 +161,9 @@ var Node = class _Node extends (0, import_immutable.Record)(defNodeData) {
       segs: { in: (0, import_immutable.Set)(), out: (0, import_immutable.Set)() },
       aligned: {},
       edgeIds: [],
-      layerId: layer.id
+      layerId: layer.id,
+      lpos: void 0,
+      pos: void 0
     });
     layer.addNode(g, node.id);
     g.nodes.set(node.id, node);
@@ -158,6 +226,18 @@ var Node = class _Node extends (0, import_immutable.Record)(defNodeData) {
   getLayer(g) {
     return g.getLayer(this.layerId);
   }
+  margin(g) {
+    return this.isDummy ? g.options.edgeSpacing - g.options.dummyNodeSize : g.options.nodeMargin;
+  }
+  marginWith(g, other) {
+    return Math.max(this.margin(g), other.margin(g));
+  }
+  width(g) {
+    return this.dims?.[g.w] ?? 0;
+  }
+  right(g) {
+    return this.lpos + this.width(g);
+  }
   setIndex(g, index) {
     if (this.index == index) return this;
     return this.mut(g).set("index", index);
@@ -204,9 +284,22 @@ var Node = class _Node extends (0, import_immutable.Record)(defNodeData) {
     return node;
   }
   delSelf(g) {
+    if (this.aligned.in)
+      g.getNode(this.aligned.in).setAligned(g, "out", void 0);
+    if (this.aligned.out)
+      g.getNode(this.aligned.out).setAligned(g, "in", void 0);
     this.getLayer(g).delNode(g, this.id);
-    for (const rel of this.rels(g))
-      rel.delSelf(g);
+    for (const edge of this.rels(g, "edges", "both"))
+      edge.delSelf(g);
+    const remainingSegIds = [...this.segs.in, ...this.segs.out];
+    if (remainingSegIds.length > 0) {
+      for (const segId of remainingSegIds) {
+        if (g.segs?.has?.(segId)) {
+          g.getSeg(segId).delSelf(g);
+        } else {
+        }
+      }
+    }
     g.nodes.delete(this.id);
     g.dirtyNodes.delete(this.id);
     g.delNodes.add(this.id);
@@ -299,30 +392,7 @@ var Node = class _Node extends (0, import_immutable.Record)(defNodeData) {
 
 // src/graph/edge.ts
 var import_immutable2 = require("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(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 log3 = logger("edge");
 var defEdgeData = {
   id: "",
   data: null,
@@ -330,7 +400,6 @@ var defEdgeData = {
   source: { id: "" },
   target: { id: "" },
   type: void 0,
-  style: void 0,
   mutable: false,
   segIds: []
 };
@@ -411,7 +480,7 @@ var Edge = class _Edge extends (0, import_immutable2.Record)(defEdgeData) {
       source = edge.source.id;
       if (edge.source?.port)
         source = `${source}.${edge.source.port}`;
-      const marker = edge.source?.marker ?? edge.style?.marker?.source;
+      const marker = edge.source?.marker;
       if (marker && marker != "none") source += `[${marker}]`;
       source += "-";
     }
@@ -421,7 +490,7 @@ var Edge = class _Edge extends (0, import_immutable2.Record)(defEdgeData) {
       if (edge.target.port)
         target = `${target}.${edge.target.port}`;
       target = "-" + target;
-      const marker = edge.target?.marker ?? edge.style?.marker?.target ?? "arrow";
+      const marker = edge.target?.marker ?? "arrow";
       if (marker && marker != "none") target += `[${marker}]`;
     }
     const type = edge.type || "";
@@ -463,7 +532,6 @@ var defSegData = {
   source: { id: "" },
   target: { id: "" },
   type: void 0,
-  style: void 0,
   edgeIds: (0, import_immutable3.Set)(),
   trackPos: void 0,
   svg: void 0,
@@ -494,7 +562,7 @@ var Seg = class _Seg extends (0, import_immutable3.Record)(defSegData) {
   sameEnd(other, side) {
     const mine = this[side];
     const yours = other[side];
-    return mine.id === yours.id && mine.port === yours.port && mine.marker === yours.marker;
+    return mine.id === yours.id && mine.port === yours.port && mine.marker === yours.marker && this.type === other.type;
   }
   setPos(g, source, target) {
     return this.mut(g).merge({
@@ -566,7 +634,7 @@ var Seg = class _Seg extends (0, import_immutable3.Record)(defSegData) {
 
 // src/graph/layer.ts
 var import_immutable4 = require("immutable");
-var log3 = logger("layer");
+var log4 = logger("layer");
 var defLayerData = {
   id: "",
   index: 0,
@@ -591,7 +659,7 @@ var Layer = class extends (0, import_immutable4.Record)(defLayerData) {
       mutable: false
     }).asImmutable();
   }
-  get size() {
+  get nodeCount() {
     return this.nodeIds.size;
   }
   *nodes(g) {
@@ -646,9 +714,8 @@ var Layer = class extends (0, import_immutable4.Record)(defLayerData) {
   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);
+    for (const [i, id] of this.sorted.entries())
+      g.getNode(id).setIndex(g, i);
     return sorted;
   }
   delNode(g, nodeId) {
@@ -820,12 +887,12 @@ var Cycles = class _Cycles {
 
 // src/graph/services/dummy.ts
 var import_immutable5 = require("immutable");
-var log4 = logger("dummy");
+var log5 = 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 { type } = edge;
       const sourceLayer = edge.sourceNode(g).layerIndex(g);
       const targetLayer = edge.targetNode(g).layerIndex(g);
       let segIndex = 0;
@@ -849,7 +916,7 @@ var Dummy = class _Dummy {
               });
               target = { id: dummy.id };
             }
-            seg = Seg.add(g, { source, target, type, style, edgeIds: (0, import_immutable5.Set)([edgeId]) });
+            seg = Seg.add(g, { source, target, type, 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)) {
@@ -888,9 +955,8 @@ var Dummy = class _Dummy {
       let layer = g.getLayer(layerId);
       const groups = /* @__PURE__ */ new Map();
       for (const nodeId of layer.nodeIds) {
-        if (!Node.isDummyId(nodeId)) continue;
         const node = g.getNode(nodeId);
-        if (node.isMerged) continue;
+        if (!node.isDummy || 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());
@@ -898,7 +964,7 @@ var Dummy = class _Dummy {
       }
       for (const [key, group] of groups) {
         if (group.size == 1) continue;
-        const edgeIds = [...group].map((node) => node.edgeId);
+        const edgeIds = [...group].map((node) => node.edgeIds[0]);
         const dummy = Node.addDummy(g, { edgeIds, layerId, isMerged: true });
         let seg;
         for (const old of group) {
@@ -908,8 +974,9 @@ var Dummy = class _Dummy {
               const example = g.getSeg(segId);
               seg = Seg.add(g, {
                 ...example,
-                edgeIds: (0, import_immutable5.Set)([old.edgeId]),
-                [altSide]: { ...example[altSide], id: dummy.id }
+                edgeIds: (0, import_immutable5.Set)(edgeIds),
+                [side]: { ...example[side] },
+                [altSide]: { ...example[altSide], id: dummy.id, port: void 0 }
               });
             }
             edge = edge.replaceSegId(g, segId, seg.id);
@@ -921,12 +988,15 @@ var Dummy = class _Dummy {
             const example = g.getSeg(segId);
             const seg2 = Seg.add(g, {
               ...example,
-              edgeIds: (0, import_immutable5.Set)([old.edgeId]),
-              [side]: { ...example[side], id: dummy.id }
+              edgeIds: (0, import_immutable5.Set)([old.edgeIds[0]]),
+              [altSide]: { ...example[altSide] },
+              [side]: { ...example[side], id: dummy.id, port: void 0 }
             });
             edge = edge.replaceSegId(g, segId, seg2.id);
           }
         }
+        for (const old of group)
+          old.delSelf(g);
       }
     }
   }
@@ -934,7 +1004,7 @@ var Dummy = class _Dummy {
 
 // src/graph/services/layers.ts
 var import_immutable6 = require("immutable");
-var log5 = logger("layers");
+var log6 = 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);
@@ -997,7 +1067,7 @@ var Layers = class {
 
 // src/graph/services/layout.ts
 var import_immutable7 = require("immutable");
-var log6 = logger("layout");
+var log7 = logger("layout");
 var Layout = class _Layout {
   static parentIndex(g, node) {
     const parents = (0, import_immutable7.Seq)([...node.adjs(g, "segs", "in")]);
@@ -1014,8 +1084,8 @@ var Layout = class _Layout {
     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_immutable7.Seq)(a.edgeIds).min();
-    const minB = b.edgeId ?? (0, import_immutable7.Seq)(b.edgeIds).min();
+    const minA = (0, import_immutable7.Seq)(a.edgeIds).min();
+    const minB = (0, import_immutable7.Seq)(b.edgeIds).min();
     return minA.localeCompare(minB);
   }
   static positionNodes(g) {
@@ -1041,7 +1111,12 @@ var Layout = class _Layout {
         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;
+        let margin = node.margin(g);
+        if (i + 1 < sorted.length) {
+          const next = g.getNode(sorted[i + 1]);
+          margin = node.marginWith(g, next);
+        }
+        lpos += size + margin;
       }
     }
   }
@@ -1073,7 +1148,7 @@ var Layout = class _Layout {
       let iterations = 0;
       while (true) {
         if (++iterations > 10) {
-          log6.error(`alignNodes: infinite loop detected in layer ${layerId}`);
+          log7.error(`alignNodes: infinite loop detected in layer ${layerId}`);
           break;
         }
         let changed = false;
@@ -1133,7 +1208,7 @@ var Layout = class _Layout {
   static anchorPos(g, seg, side) {
     const nodeId = seg[side].id;
     const node = g.getNode(nodeId);
-    let p = { x: 0, y: 0, [g.x]: node.lpos, ...node.pos || {} };
+    let p = { [g.x]: node.lpos, [g.y]: node.pos?.[g.y] ?? 0 };
     let w = node.dims?.[g.w] ?? 0;
     let h = node.dims?.[g.h] ?? 0;
     if (node.isDummy)
@@ -1179,22 +1254,18 @@ var Layout = class _Layout {
   }
   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;
-    const nodeWidth = node.dims?.[g.w] ?? 0;
-    const aMin = lpos - space, aMax = lpos + nodeWidth + space;
+    const nodeRight = lpos + node.width(g);
     repeat:
       for (const otherId of node.getLayer(g).nodeIds) {
         if (otherId == nodeId) continue;
         const other = g.getNode(otherId);
-        const opos = other.lpos;
-        const otherWidth = other.dims?.[g.w] ?? 0;
-        const bMin = opos, bMax = opos + otherWidth;
-        if (aMin < bMax && bMin < aMax) {
+        const margin = node.marginWith(g, other);
+        const gap = lpos < other.lpos ? other.lpos - nodeRight : lpos - other.right(g);
+        if (gap < margin) {
           if (conservative) return false;
-          const safePos = reverseMove ? aMin - otherWidth : aMax;
+          const safePos = reverseMove ? lpos - other.width(g) - margin : nodeRight + margin;
           _Layout.shiftNode(g, otherId, void 0, dir, safePos, reverseMove, conservative);
           continue repeat;
         }
@@ -1243,11 +1314,12 @@ var Layout = class _Layout {
     for (const layerId of g.layerList) {
       const layer = g.getLayer(layerId);
       if (layer.sorted.length < 2) continue;
-      for (const nodeId of layer.sorted) {
+      for (const [i, nodeId] of layer.sorted.entries()) {
         const node = g.getNode(nodeId);
         if (node.index == 0) continue;
         let minGap = Infinity;
         const stack = [];
+        let maxMargin = 0;
         for (const right of _Layout.aligned(g, nodeId, "both")) {
           stack.push(right);
           const leftId = _Layout.leftOf(g, right);
@@ -1256,8 +1328,10 @@ var Layout = class _Layout {
           const leftWidth = left.dims?.[g.w] ?? 0;
           const gap = right.lpos - left.lpos - leftWidth;
           if (gap < minGap) minGap = gap;
+          const margin = right.marginWith(g, left);
+          if (margin > maxMargin) maxMargin = margin;
         }
-        const delta = minGap - g.options.nodeMargin;
+        const delta = minGap - maxMargin;
         if (delta <= 0) continue;
         anyChanged = true;
         for (const right of stack)
@@ -1305,9 +1379,8 @@ var Layout = class _Layout {
 };
 
 // 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) {
+function arrow(size, reverse = false) {
   const h = size / 1.5;
   const w = size;
   const ry = h / 2;
@@ -1316,7 +1389,7 @@ function arrow(size, classPrefix, reverse = false) {
     "marker",
     {
       id: `g3p-marker-arrow${suffix}`,
-      className: `${classPrefix}-marker ${classPrefix}-marker-arrow`,
+      className: "g3p-marker g3p-marker-arrow",
       markerWidth: size,
       markerHeight: size,
       refX: "2",
@@ -1327,7 +1400,7 @@ function arrow(size, classPrefix, reverse = false) {
     }
   );
 }
-function circle(size, classPrefix, reverse = false) {
+function circle(size, reverse = false) {
   const r = size / 3;
   const cy = size / 2;
   const suffix = reverse ? "-reverse" : "";
@@ -1335,7 +1408,7 @@ function circle(size, classPrefix, reverse = false) {
     "marker",
     {
       id: `g3p-marker-circle${suffix}`,
-      className: `${classPrefix}-marker ${classPrefix}-marker-circle`,
+      className: "g3p-marker g3p-marker-circle",
       markerWidth: size,
       markerHeight: size,
       refX: "2",
@@ -1346,7 +1419,7 @@ function circle(size, classPrefix, reverse = false) {
     }
   );
 }
-function diamond(size, classPrefix, reverse = false) {
+function diamond(size, reverse = false) {
   const w = size * 0.7;
   const h = size / 2;
   const cy = size / 2;
@@ -1355,7 +1428,7 @@ function diamond(size, classPrefix, reverse = false) {
     "marker",
     {
       id: `g3p-marker-diamond${suffix}`,
-      className: `${classPrefix}-marker ${classPrefix}-marker-diamond`,
+      className: "g3p-marker g3p-marker-diamond",
       markerWidth: size,
       markerHeight: size,
       refX: "2",
@@ -1366,7 +1439,7 @@ function diamond(size, classPrefix, reverse = false) {
     }
   );
 }
-function bar(size, classPrefix, reverse = false) {
+function bar(size, reverse = false) {
   const h = size * 0.6;
   const cy = size / 2;
   const suffix = reverse ? "-reverse" : "";
@@ -1374,7 +1447,7 @@ function bar(size, classPrefix, reverse = false) {
     "marker",
     {
       id: `g3p-marker-bar${suffix}`,
-      className: `${classPrefix}-marker ${classPrefix}-marker-bar`,
+      className: "g3p-marker g3p-marker-bar",
       markerWidth: size,
       markerHeight: size,
       refX: "2",
@@ -1385,7 +1458,7 @@ function bar(size, classPrefix, reverse = false) {
     }
   );
 }
-function none(size, classPrefix, reverse = false) {
+function none(size, reverse = false) {
   return void 0;
 }
 function normalize(data) {
@@ -1404,7 +1477,7 @@ var markerDefs = {
 };
 
 // src/graph/services/lines.ts
-var log7 = logger("lines");
+var log8 = logger("lines");
 var Lines = class _Lines {
   static layoutSeg(g, seg) {
     const sourcePos = Layout.anchorPos(g, seg, "source");
@@ -1450,7 +1523,11 @@ var Lines = class _Lines {
               validTrack = track;
               break;
             }
-            if (other.p1 < seg.p2 && seg.p1 < other.p2) {
+            const minA = Math.min(seg.p1, seg.p2);
+            const maxA = Math.max(seg.p1, seg.p2);
+            const minB = Math.min(other.p1, other.p2);
+            const maxB = Math.max(other.p1, other.p2);
+            if (minA < maxB && minB < maxA) {
               overlap = true;
               break;
             }
@@ -1465,6 +1542,21 @@ var Lines = class _Lines {
         else
           trackSet.push([seg]);
       }
+      const midpoint = (s) => (s.p1 + s.p2) / 2;
+      const sortTracks = (tracks2, goingRight) => {
+        tracks2.sort((a, b) => {
+          const midA = Math.max(...a.map(midpoint));
+          const midB = Math.max(...b.map(midpoint));
+          return goingRight ? midB - midA : midA - midB;
+        });
+      };
+      sortTracks(rightTracks, true);
+      sortTracks(leftTracks, false);
+      allTracks.sort((a, b) => {
+        const avgA = a.reduce((sum, s) => sum + midpoint(s), 0) / a.length;
+        const avgB = b.reduce((sum, s) => sum + midpoint(s), 0) / b.length;
+        return avgB - avgA;
+      });
       const tracks = [];
       const all = leftTracks.concat(rightTracks).concat(allTracks);
       for (const track of all)
@@ -1635,6 +1727,7 @@ var Lines = class _Lines {
 };
 
 // src/graph/graph.ts
+var log9 = logger("graph");
 var emptyChanges = {
   addedNodes: [],
   removedNodes: [],
@@ -1909,29 +2002,8 @@ 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;
@@ -1939,7 +2011,6 @@ var Node2 = class {
   content;
   canvas;
   data;
-  classPrefix;
   isDummy;
   pos;
   constructor(canvas, data, isDummy = false) {
@@ -1947,20 +2018,18 @@ var Node2 = class {
     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));
+      this.content = this.renderContent(render(data.data, data));
     }
   }
   remove() {
     this.container.remove();
   }
   append() {
-    console.log("append", this);
     this.canvas.group.appendChild(this.container);
   }
   needsContentSize() {
@@ -1969,19 +2038,6 @@ var Node2 = class {
   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;
@@ -1998,7 +2054,6 @@ var Node2 = class {
     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;
@@ -2006,14 +2061,8 @@ var Node2 = class {
     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" },
+        className: `g3p-node-container ${this.isDummy ? "g3p-node-dummy" : ""} ${typeClass}`.trim(),
+        "data-node-id": this.data?.id,
         children: inner
       }
     );
@@ -2023,7 +2072,6 @@ var Node2 = class {
     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;
@@ -2036,7 +2084,7 @@ var Node2 = class {
           cy: h,
           rx: w,
           ry: h,
-          className: c("background")
+          className: "g3p-node-background"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -2047,7 +2095,7 @@ var Node2 = class {
           rx: w,
           ry: h,
           fill: "none",
-          className: c("border")
+          className: "g3p-node-border"
         }
       )
     ] });
@@ -2060,7 +2108,7 @@ var Node2 = class {
       const ports = data.ports?.[dir];
       if (!ports) continue;
       for (const port of ports) {
-        const el = this.content.querySelector(`#g3p-port-${data.id}-${port.id}`);
+        const el = this.content.querySelector(`.g3p-node-port[data-node-id="${data.id}"][data-port-id="${port.id}"]`);
         if (!el) continue;
         const portRect = el.getBoundingClientRect();
         if (isVertical) {
@@ -2098,23 +2146,22 @@ var Node2 = class {
   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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `g3p-node-ports g3p-node-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)}`,
+        className: `g3p-node-port g3p-node-port-${inout}-${pos} ${rotateClass}`,
+        "data-node-id": this.data.id,
+        "data-port-id": port.id,
         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");
@@ -2122,14 +2169,13 @@ var Node2 = class {
     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: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `g3p-node-with-ports g3p-node-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");
@@ -2137,71 +2183,59 @@ var Node2 = class {
     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: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `g3p-node-with-ports g3p-node-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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "g3p-node-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;
+  edgeIds;
   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.edgeIds = data.edgeIds.toArray();
     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) {
+  update(data, g) {
     this.svg = data.svg;
     this.type = data.type;
-    this.source = data.source;
-    this.target = data.target;
+    this.source = { ...data.source, isDummy: data.sourceNode(g).isDummy };
+    this.target = { ...data.target, isDummy: data.targetNode(g).isDummy };
+    this.edgeIds = data.edgeIds.toArray();
     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;
@@ -2211,18 +2245,15 @@ var Seg2 = class {
       {
         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),
+        className: `g3p-seg-container ${typeClass}`.trim(),
+        "data-edge-id": this.id,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "path",
             {
               d: this.svg,
               fill: "none",
-              className: c("line"),
+              className: "g3p-seg-line",
               markerStart: source ? `url(#g3p-marker-${source}-reverse)` : void 0,
               markerEnd: target ? `url(#g3p-marker-${target})` : void 0
             }
@@ -2233,7 +2264,7 @@ var Seg2 = class {
               d: this.svg,
               stroke: "transparent",
               fill: "none",
-              className: c("hitbox"),
+              className: "g3p-seg-hitbox",
               style: { cursor: "pointer" }
             }
           )
@@ -2243,46 +2274,561 @@ var Seg2 = class {
   }
 };
 
-// src/canvas/canvas.tsx
-var import_canvas = __toESM(require("./canvas.css?raw"), 1);
-var import_zoom = __toESM(require("./zoom.css?raw"), 1);
+// src/canvas/editMode.ts
+var EditMode = class {
+  _state = { type: "idle" };
+  _editable = false;
+  get state() {
+    return this._state;
+  }
+  get editable() {
+    return this._editable;
+  }
+  set editable(value) {
+    this._editable = value;
+    if (!value) {
+      this.reset();
+    }
+  }
+  get isIdle() {
+    return this._state.type === "idle";
+  }
+  get isPanning() {
+    return this._state.type === "panning";
+  }
+  get isCreatingEdge() {
+    return this._state.type === "new-edge";
+  }
+  /** Start panning the canvas */
+  startPan(startCanvas, startTransform) {
+    this._state = { type: "panning", startCanvas, startTransform };
+  }
+  /** Start creating a new edge from a node or port */
+  startNewEdge(id, startGraph, port) {
+    if (!this._editable) return;
+    this._state = {
+      type: "new-edge",
+      source: { id, port },
+      startGraph,
+      currentGraph: startGraph,
+      target: null
+    };
+  }
+  /** Update the current position during new-edge mode */
+  updateNewEdgePosition(currentGraph) {
+    if (this._state.type === "new-edge") {
+      this._state = { ...this._state, currentGraph };
+    }
+  }
+  /** Update the hover target during new-edge mode */
+  setHoverTarget(target) {
+    if (this._state.type === "new-edge") {
+      this._state = { ...this._state, target };
+    }
+  }
+  /** Get the new-edge state if active */
+  getNewEdgeState() {
+    if (this._state.type === "new-edge") {
+      return this._state;
+    }
+    return null;
+  }
+  /** Reset to idle state */
+  reset() {
+    this._state = { type: "idle" };
+  }
+};
+
+// src/canvas/newEdge.tsx
 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 renderNewEdge({ start, end }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { className: "g3p-new-edge-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "circle",
+      {
+        cx: start.x,
+        cy: start.y,
+        r: 4,
+        className: "g3p-new-edge-origin"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "line",
+      {
+        x1: start.x,
+        y1: start.y,
+        x2: end.x,
+        y2: end.y,
+        className: "g3p-new-edge-line"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "circle",
+      {
+        cx: end.x,
+        cy: end.y,
+        r: 3,
+        className: "g3p-new-edge-end"
+      }
+    )
+  ] });
+}
+
+// src/canvas/modal.tsx
+var import_jsx_runtime5 = require("jsx-dom/jsx-runtime");
+var Modal = class {
+  container;
+  overlay;
+  dialog;
+  onClose;
+  mouseDownOnOverlay = false;
+  constructor(options) {
+    this.onClose = options.onClose;
+    this.overlay = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: "g3p-modal-overlay",
+        onMouseDown: (e) => {
+          this.mouseDownOnOverlay = e.target === this.overlay;
+        },
+        onMouseUp: (e) => {
+          if (this.mouseDownOnOverlay && e.target === this.overlay) this.close();
+          this.mouseDownOnOverlay = false;
+        }
+      }
+    );
+    this.dialog = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-dialog", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "g3p-modal-title", children: options.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "g3p-modal-close",
+            onClick: () => this.close(),
+            children: "\xD7"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "g3p-modal-body" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "g3p-modal-footer" })
+    ] });
+    if (options.position) {
+      this.dialog.style.position = "absolute";
+      this.dialog.style.left = `${options.position.x}px`;
+      this.dialog.style.top = `${options.position.y}px`;
+      this.dialog.style.transform = "translate(-50%, -50%)";
+    }
+    this.overlay.appendChild(this.dialog);
+    this.container = this.overlay;
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+  handleKeyDown(e) {
+    if (e.key === "Escape") {
+      this.close();
+    }
+  }
+  get body() {
+    return this.dialog.querySelector(".g3p-modal-body");
+  }
+  get footer() {
+    return this.dialog.querySelector(".g3p-modal-footer");
+  }
+  show(parent) {
+    parent.appendChild(this.container);
+    const firstInput = this.dialog.querySelector("input, select, button");
+    if (firstInput) firstInput.focus();
+  }
+  close() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+    this.container.remove();
+    this.onClose();
+  }
 };
-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";
+var NewNodeModal = class extends Modal {
+  fieldInputs = /* @__PURE__ */ new Map();
+  typeSelect;
+  submitCallback;
+  fields;
+  constructor(options) {
+    super({
+      title: "New Node",
+      onClose: () => options.onCancel?.()
+    });
+    this.submitCallback = options.onSubmit;
+    this.fields = options.fields ?? /* @__PURE__ */ new Map([["title", "string"]]);
+    this.renderBody(options.nodeTypes);
+    this.renderFooter();
+  }
+  renderBody(nodeTypes) {
+    this.body.innerHTML = "";
+    for (const [name, type] of this.fields) {
+      const label = name.charAt(0).toUpperCase() + name.slice(1);
+      const fieldGroup = this.renderField(name, label, type);
+      this.body.appendChild(fieldGroup);
     }
-    if (cssVar) {
-      css += `  ${cssVar}: ${value};
-`;
+    if (nodeTypes && nodeTypes.length > 0) {
+      const typeGroup = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "g3p-modal-label", children: "Type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "select",
+          {
+            className: "g3p-modal-select",
+            ref: (el) => this.typeSelect = el,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "Default" }),
+              nodeTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: type, children: type }))
+            ]
+          }
+        )
+      ] });
+      this.body.appendChild(typeGroup);
     }
   }
-  css += "}\n";
-  return css;
-}
+  renderField(name, label, type) {
+    if (type === "boolean") {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "g3p-modal-field g3p-modal-field-checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "g3p-modal-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            className: "g3p-modal-checkbox",
+            ref: (el) => this.fieldInputs.set(name, el)
+          }
+        ),
+        label
+      ] }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "g3p-modal-label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          type: type === "number" ? "number" : "text",
+          className: "g3p-modal-input",
+          placeholder: `Enter ${label.toLowerCase()}`,
+          ref: (el) => this.fieldInputs.set(name, el)
+        }
+      )
+    ] });
+  }
+  renderFooter() {
+    this.footer.innerHTML = "";
+    this.footer.appendChild(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-buttons", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-secondary",
+            onClick: () => this.close(),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-primary",
+            onClick: () => this.submit(),
+            children: "Create"
+          }
+        )
+      ] })
+    );
+  }
+  submit() {
+    const data = {};
+    for (const [name, type] of this.fields) {
+      const input = this.fieldInputs.get(name);
+      if (!input) continue;
+      if (type === "boolean") {
+        data[name] = input.checked;
+      } else if (type === "number") {
+        const val = input.value;
+        if (val) data[name] = Number(val);
+      } else {
+        const val = input.value.trim();
+        if (val) data[name] = val;
+      }
+    }
+    if (Object.keys(data).length === 0) {
+      const firstInput = this.fieldInputs.values().next().value;
+      if (firstInput) firstInput.focus();
+      return;
+    }
+    if (this.typeSelect?.value) {
+      data.type = this.typeSelect.value;
+    }
+    document.removeEventListener("keydown", this.handleKeyDown);
+    this.container.remove();
+    this.submitCallback(data);
+  }
+};
+var EditNodeModal = class extends Modal {
+  fieldInputs = /* @__PURE__ */ new Map();
+  typeSelect;
+  node;
+  fields;
+  submitCallback;
+  deleteCallback;
+  constructor(options) {
+    super({
+      title: "Edit Node",
+      position: options.position,
+      onClose: () => options.onCancel?.()
+    });
+    this.node = options.node;
+    this.submitCallback = options.onSubmit;
+    this.deleteCallback = options.onDelete;
+    this.fields = options.fields ?? /* @__PURE__ */ new Map([["title", "string"]]);
+    if (!options.fields && !this.node.title)
+      this.node = { ...this.node, title: this.node.id };
+    this.renderBody(options.nodeTypes);
+    this.renderFooter();
+  }
+  renderBody(nodeTypes) {
+    console.log(`renderBody`, this.node);
+    this.body.innerHTML = "";
+    for (const [name, type] of this.fields) {
+      const label = name.charAt(0).toUpperCase() + name.slice(1);
+      const currentValue = this.node[name];
+      const fieldGroup = this.renderField(name, label, type, currentValue);
+      this.body.appendChild(fieldGroup);
+    }
+    if (nodeTypes && nodeTypes.length > 0) {
+      const currentType = this.node.type ?? "";
+      const typeGroup = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "g3p-modal-label", children: "Type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "select",
+          {
+            className: "g3p-modal-select",
+            ref: (el) => this.typeSelect = el,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", selected: !currentType, children: "Default" }),
+              nodeTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: type, selected: type === currentType, children: type }))
+            ]
+          }
+        )
+      ] });
+      this.body.appendChild(typeGroup);
+    }
+  }
+  renderField(name, label, type, currentValue) {
+    if (type === "boolean") {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "g3p-modal-field g3p-modal-field-checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "g3p-modal-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            className: "g3p-modal-checkbox",
+            checked: !!currentValue,
+            ref: (el) => this.fieldInputs.set(name, el)
+          }
+        ),
+        label
+      ] }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "g3p-modal-label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          type: type === "number" ? "number" : "text",
+          className: "g3p-modal-input",
+          value: currentValue ?? "",
+          ref: (el) => this.fieldInputs.set(name, el)
+        }
+      )
+    ] });
+  }
+  renderFooter() {
+    this.footer.innerHTML = "";
+    this.footer.appendChild(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-buttons", children: [
+        this.deleteCallback && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-danger",
+            onClick: () => this.delete(),
+            children: "Delete"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "g3p-modal-spacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-secondary",
+            onClick: () => this.close(),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-primary",
+            onClick: () => this.submit(),
+            children: "Save"
+          }
+        )
+      ] })
+    );
+  }
+  submit() {
+    const data = { ...this.node };
+    for (const [name, type] of this.fields) {
+      const input = this.fieldInputs.get(name);
+      if (!input) continue;
+      if (type === "boolean") {
+        data[name] = input.checked;
+      } else if (type === "number") {
+        const val = input.value;
+        data[name] = val ? Number(val) : void 0;
+      } else {
+        const val = input.value.trim();
+        data[name] = val || void 0;
+      }
+    }
+    if (this.typeSelect) {
+      data.type = this.typeSelect.value || void 0;
+    }
+    document.removeEventListener("keydown", this.handleKeyDown);
+    this.container.remove();
+    this.submitCallback(data);
+  }
+  delete() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+    this.container.remove();
+    this.deleteCallback?.();
+  }
+};
+var EditEdgeModal = class _EditEdgeModal extends Modal {
+  sourceMarkerSelect;
+  targetMarkerSelect;
+  typeSelect;
+  edge;
+  submitCallback;
+  deleteCallback;
+  static markerTypes = ["none", "arrow", "circle", "diamond", "bar"];
+  constructor(options) {
+    super({
+      title: "Edit Edge",
+      onClose: () => options.onCancel?.()
+    });
+    this.edge = options.edge;
+    this.submitCallback = options.onSubmit;
+    this.deleteCallback = options.onDelete;
+    this.renderBody(options.edgeTypes);
+    this.renderFooter();
+  }
+  renderBody(edgeTypes) {
+    this.body.innerHTML = "";
+    const currentSourceMarker = this.edge.source?.marker ?? "none";
+    const currentTargetMarker = this.edge.target?.marker ?? "arrow";
+    const sourceGroup = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "g3p-modal-label", children: "Source Marker" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "select",
+        {
+          className: "g3p-modal-select",
+          ref: (el) => this.sourceMarkerSelect = el,
+          children: _EditEdgeModal.markerTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: type, selected: type === currentSourceMarker, children: type }))
+        }
+      )
+    ] });
+    this.body.appendChild(sourceGroup);
+    const targetGroup = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "g3p-modal-label", children: "Target Marker" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "select",
+        {
+          className: "g3p-modal-select",
+          ref: (el) => this.targetMarkerSelect = el,
+          children: _EditEdgeModal.markerTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: type, selected: type === currentTargetMarker, children: type }))
+        }
+      )
+    ] });
+    this.body.appendChild(targetGroup);
+    if (edgeTypes && edgeTypes.length > 0) {
+      const currentType = this.edge.type ?? "";
+      const typeGroup = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "g3p-modal-label", children: "Type" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "select",
+          {
+            className: "g3p-modal-select",
+            ref: (el) => this.typeSelect = el,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", selected: !currentType, children: "Default" }),
+              edgeTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: type, selected: type === currentType, children: type }))
+            ]
+          }
+        )
+      ] });
+      this.body.appendChild(typeGroup);
+    }
+  }
+  renderFooter() {
+    this.footer.innerHTML = "";
+    this.footer.appendChild(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "g3p-modal-buttons", children: [
+        this.deleteCallback && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-danger",
+            onClick: () => this.delete(),
+            children: "Delete"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "g3p-modal-spacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-secondary",
+            onClick: () => this.close(),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-primary",
+            onClick: () => this.submit(),
+            children: "Save"
+          }
+        )
+      ] })
+    );
+  }
+  submit() {
+    const data = {
+      ...this.edge,
+      source: {
+        ...this.edge.source,
+        marker: this.sourceMarkerSelect.value === "none" ? void 0 : this.sourceMarkerSelect.value
+      },
+      target: {
+        ...this.edge.target,
+        marker: this.targetMarkerSelect.value === "none" ? void 0 : this.targetMarkerSelect.value
+      }
+    };
+    if (this.typeSelect) {
+      data.type = this.typeSelect.value || void 0;
+    }
+    document.removeEventListener("keydown", this.handleKeyDown);
+    this.container.remove();
+    this.submitCallback(data);
+  }
+  delete() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+    this.container.remove();
+    this.deleteCallback?.();
+  }
+};
+
+// src/canvas/canvas.tsx
+var import_styles = __toESM(require("./styles.css?raw"), 1);
+var import_jsx_runtime6 = require("jsx-dom/jsx-runtime");
+var log10 = logger("canvas");
 var Canvas = class {
   container;
   root;
@@ -2295,19 +2841,26 @@ var Canvas = class {
   curSegs;
   updating;
   // Pan-zoom state
-  isPanning = false;
-  panStart = null;
-  transformStart = null;
   panScale = null;
   zoomControls;
-  constructor(options) {
+  // Edit mode state machine
+  editMode;
+  api;
+  // New-edge visual element
+  newEdgeEl;
+  // Pending drag state (for double-click debounce)
+  pendingDrag = null;
+  constructor(api, options) {
     Object.assign(this, options);
+    this.api = api;
     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.editMode = new EditMode();
+    this.editMode.editable = this.editable;
     this.createMeasurementContainer();
     this.createCanvasContainer();
     if (this.panZoom) this.setupPanZoom();
@@ -2352,7 +2905,6 @@ var Canvas = class {
     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))
@@ -2361,6 +2913,7 @@ var Canvas = class {
     }
     this.curNodes.set(gnode.id, node);
     node.append();
+    node.setPos(gnode.pos);
   }
   updateNode(gnode) {
     if (gnode.isDummy) throw new Error("dummy node cannot be updated");
@@ -2382,10 +2935,10 @@ var Canvas = class {
     this.curSegs.set(gseg.id, seg);
     seg.append();
   }
-  updateSeg(gseg) {
+  updateSeg(gseg, g) {
     const seg = this.curSegs.get(gseg.id);
     if (!seg) throw new Error("seg not found");
-    seg.update(gseg);
+    seg.update(gseg, g);
   }
   deleteSeg(gseg) {
     const seg = this.curSegs.get(gseg.id);
@@ -2405,24 +2958,88 @@ var Canvas = class {
     for (const node of newNodes.values()) {
       node.measure(isVertical);
       const { id, version } = node.data;
-      const key = `${id}:${version}`;
+      const key = `k:${id}:${version}`;
       this.allNodes.set(key, node);
       node.renderContainer();
     }
     this.measurement.innerHTML = "";
     return newNodes;
   }
+  // ========== Mouse event handlers ==========
   onClick(e) {
-    console.log("click", e);
-  }
-  onContextMenu(e) {
-    console.log("context menu", e);
+    const hit = this.hitTest(e.clientX, e.clientY);
+    if (hit.type === "node") {
+      this.api.handleClickNode(hit.node.data.id);
+    } else if (hit.type === "edge") {
+      this.api.handleClickEdge(hit.segId);
+    }
   }
-  groupTransform() {
-    return `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.scale})`;
+  onDoubleClick(e) {
+    if (this.pendingDrag) {
+      window.clearTimeout(this.pendingDrag.timeout);
+      this.pendingDrag = null;
+    }
+    if (!this.editMode.editable) return;
+    const hit = this.hitTest(e.clientX, e.clientY);
+    if (hit.type === "node") {
+      if (hit.node.isDummy) return;
+      this.api.handleEditNode(hit.node.data.id);
+    } else if (hit.type === "edge") {
+      this.api.handleEditEdge(hit.segId);
+    } else {
+      this.api.handleNewNode();
+    }
   }
-  viewBox() {
-    const p = this.padding;
+  // ========== Built-in Modals ==========
+  /** Show the new node modal */
+  showNewNodeModal(callback) {
+    const nodeTypes = Object.keys(this.nodeTypes);
+    const fields = this.api.getNodeFields();
+    const modal = new NewNodeModal({
+      nodeTypes: nodeTypes.length > 0 ? nodeTypes : void 0,
+      fields: fields.size > 0 ? fields : void 0,
+      onSubmit: (data) => {
+        callback(data);
+      }
+    });
+    modal.show(document.body);
+  }
+  /** Show the edit node modal */
+  showEditNodeModal(node, callback) {
+    const nodeTypes = Object.keys(this.nodeTypes);
+    const fields = this.api.getNodeFields();
+    const modal = new EditNodeModal({
+      node,
+      nodeTypes: nodeTypes.length > 0 ? nodeTypes : void 0,
+      fields: fields.size > 0 ? fields : void 0,
+      onSubmit: (data) => {
+        callback(data);
+      },
+      onDelete: () => {
+        this.api.handleDeleteNode(node.id);
+      }
+    });
+    modal.show(document.body);
+  }
+  /** Show the edit edge modal */
+  showEditEdgeModal(edge, callback) {
+    const modal = new EditEdgeModal({
+      edge,
+      edgeTypes: Object.keys(this.edgeTypes),
+      onSubmit: callback,
+      onDelete: () => {
+        this.api.handleDeleteEdge(edge.id);
+      }
+    });
+    modal.show(document.body);
+  }
+  onContextMenu(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;
@@ -2431,53 +3048,52 @@ var Canvas = class {
   }
   generateDynamicStyles() {
     let css = "";
-    const prefix = this.classPrefix;
-    css += themeToCSS(this.theme, `.${prefix}-canvas-container`);
+    css += themeToCSS(this.theme, `.g3p-canvas-container`);
     for (const [type, vars] of Object.entries(this.nodeTypes)) {
-      css += themeToCSS(vars, `.${prefix}-node-type-${type}`, "node");
+      css += themeToCSS(vars, `.g3p-node-type-${type}`, "node");
     }
     for (const [type, vars] of Object.entries(this.edgeTypes)) {
-      css += themeToCSS(vars, `.${prefix}-edge-type-${type}`);
+      css += themeToCSS(vars, `.g3p-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);
+    if (!document.getElementById("g3p-styles")) {
+      const baseStyleEl = document.createElement("style");
+      baseStyleEl.id = "g3p-styles";
+      baseStyleEl.textContent = import_styles.default;
+      document.head.appendChild(baseStyleEl);
+    }
     const dynamicStyles = this.generateDynamicStyles();
     if (dynamicStyles) {
-      const themeStyleEl = document.createElement("style");
-      themeStyleEl.textContent = dynamicStyles;
-      document.head.appendChild(themeStyleEl);
+      const dynamicStyleEl = document.createElement("style");
+      dynamicStyleEl.textContent = dynamicStyles;
+      document.head.appendChild(dynamicStyleEl);
     }
-    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)(
+    this.container = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
-        className: `${c("container")} ${colorModeClass}`.trim(),
+        className: `g3p-canvas-container ${colorModeClass}`.trim(),
         ref: (el) => this.container = el,
         onContextMenu: this.onContextMenu.bind(this),
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "svg",
           {
             ref: (el) => this.root = el,
-            className: c("root"),
+            className: "g3p-canvas-root",
             width: this.width,
             height: this.height,
             viewBox: this.viewBox(),
             preserveAspectRatio: "xMidYMid meet",
             onClick: this.onClick.bind(this),
+            onDblClick: this.onDoubleClick.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_runtime6.jsxs)("defs", { children: [
+                Object.values(markerDefs).map((marker) => marker(this.markerSize, false)),
+                Object.values(markerDefs).map((marker) => marker(this.markerSize, true))
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "g",
                 {
                   ref: (el) => this.group = el,
@@ -2496,14 +3112,34 @@ var Canvas = class {
     this.container.addEventListener("mousedown", this.onMouseDown.bind(this));
     document.addEventListener("mousemove", this.onMouseMove.bind(this));
     document.addEventListener("mouseup", this.onMouseUp.bind(this));
+    document.addEventListener("keydown", this.onKeyDown.bind(this));
     this.createZoomControls();
   }
+  onKeyDown(e) {
+    if (e.key === "Escape" && this.editMode.isCreatingEdge) {
+      this.endNewEdge(true);
+    }
+  }
   /** Convert screen coordinates to canvas-relative coordinates */
   screenToCanvas(screen) {
     const rect = this.container.getBoundingClientRect();
     return canvasPos(screen.x - rect.left, screen.y - rect.top);
   }
-  /** 
+  /** 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
+    );
+  }
+  /** Convert screen coordinates to graph coordinates */
+  screenToGraph(screen) {
+    const canvas = this.screenToCanvas(screen);
+    return this.canvasToGraph(canvas);
+  }
+  /**
    * 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.
@@ -2520,15 +3156,6 @@ var Canvas = class {
     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;
@@ -2563,28 +3190,67 @@ var Canvas = class {
   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();
+    const hit = this.hitTest(e.clientX, e.clientY);
+    if (this.editMode.editable && (hit.type === "node" || hit.type === "port")) {
+      const node = hit.node;
+      if (node.isDummy) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const startGraph = this.screenToGraph(hit.center);
+      const portId = hit.type === "port" ? hit.port : void 0;
+      this.pendingDrag = {
+        timeout: window.setTimeout(() => {
+          if (this.pendingDrag) {
+            this.startNewEdge(this.pendingDrag.nodeId, this.pendingDrag.startGraph, this.pendingDrag.portId);
+            this.pendingDrag = null;
+          }
+        }, 200),
+        nodeId: node.data.id,
+        startGraph,
+        portId
+      };
+      return;
+    }
+    if (hit.type === "canvas" || hit.type === "edge") {
+      const startCanvas = this.screenToCanvas(screenPos(e.clientX, e.clientY));
+      this.editMode.startPan(startCanvas, { ...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;
+    if (this.editMode.isCreatingEdge) {
+      const screenCursor = screenPos(e.clientX, e.clientY);
+      const canvasCursor = this.screenToCanvas(screenCursor);
+      const graphCursor = this.canvasToGraph(canvasCursor);
+      this.editMode.updateNewEdgePosition(graphCursor);
+      this.updateNewEdgeVisual();
+      this.detectHoverTarget(e.clientX, e.clientY);
+      return;
+    }
+    if (!this.editMode.isPanning || !this.panScale) return;
+    const panState = this.editMode.state;
+    if (panState.type !== "panning") 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;
+    const dx = current.x - panState.startCanvas.x;
+    const dy = current.y - panState.startCanvas.y;
+    this.transform.x = panState.startTransform.x + dx * this.panScale.x;
+    this.transform.y = panState.startTransform.y + dy * this.panScale.y;
     this.applyTransform();
   }
   onMouseUp(e) {
-    if (!this.isPanning) return;
-    this.isPanning = false;
-    this.panStart = null;
-    this.transformStart = null;
+    if (this.pendingDrag) {
+      window.clearTimeout(this.pendingDrag.timeout);
+      this.pendingDrag = null;
+    }
+    if (this.editMode.isCreatingEdge) {
+      this.endNewEdge(false);
+      return;
+    }
+    if (!this.editMode.isPanning) return;
+    this.editMode.reset();
     this.panScale = null;
     this.container.style.cursor = "";
   }
@@ -2594,12 +3260,11 @@ var Canvas = class {
     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.zoomControls = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "g3p-zoom-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "g3p-zoom-btn", onClick: () => this.zoomIn(), children: "+" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "g3p-zoom-level", id: "g3p-zoom-level", children: "100%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "g3p-zoom-btn", onClick: () => this.zoomOut(), children: "\u2212" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "g3p-zoom-btn g3p-zoom-reset", onClick: () => this.zoomReset(), children: "\u27F2" })
     ] });
     this.container.appendChild(this.zoomControls);
   }
@@ -2621,17 +3286,215 @@ var Canvas = class {
     this.transform = { x: 0, y: 0, scale: 1 };
     this.applyTransform();
   }
+  // ==================== New-Edge Mode ====================
+  /** Start creating a new edge from a node */
+  startNewEdge(sourceNodeId, startGraph, sourcePortId) {
+    this.editMode.startNewEdge(sourceNodeId, startGraph, sourcePortId);
+    this.updateNewEdgeVisual();
+    this.container.style.cursor = "crosshair";
+  }
+  /** Update the new-edge visual during drag */
+  updateNewEdgeVisual() {
+    const state = this.editMode.getNewEdgeState();
+    if (!state) {
+      this.removeNewEdgeVisual();
+      return;
+    }
+    if (this.newEdgeEl) {
+      this.newEdgeEl.remove();
+    }
+    this.newEdgeEl = renderNewEdge({
+      start: state.startGraph,
+      end: state.currentGraph
+    });
+    this.group.appendChild(this.newEdgeEl);
+  }
+  /** Remove the new-edge visual */
+  removeNewEdgeVisual() {
+    if (this.newEdgeEl) {
+      this.newEdgeEl.remove();
+      this.newEdgeEl = void 0;
+    }
+  }
+  /** Complete or cancel the new-edge creation */
+  endNewEdge(cancelled = false) {
+    const state = this.editMode.getNewEdgeState();
+    if (!state) return;
+    if (!cancelled) {
+      const { target, source } = state;
+      if (target?.type == "node") {
+        this.api.handleAddEdge({ id: "", source, target });
+      } else {
+        this.api.handleNewNodeFrom(source);
+      }
+    }
+    this.removeNewEdgeVisual();
+    this.clearDropTargetHighlight();
+    this.editMode.reset();
+    this.container.style.cursor = "";
+  }
+  /** Find node data by internal ID */
+  findNodeDataById(nodeId) {
+    for (const node of this.curNodes.values()) {
+      if (node.data?.id === nodeId) {
+        return node.data.data;
+      }
+    }
+    return null;
+  }
+  /** Set hover target for new-edge mode */
+  setNewEdgeHoverTarget(id, port) {
+    this.clearDropTargetHighlight();
+    this.editMode.setHoverTarget({ type: "node", id, port });
+    if (port) {
+      const portEl = this.container?.querySelector(`.g3p-node-port[data-node-id="${id}"][data-port-id="${port}"]`);
+      if (portEl) portEl.classList.add("g3p-drop-target");
+    } else {
+      const node = this.curNodes.get(id);
+      if (node?.container) node.container.classList.add("g3p-drop-target");
+    }
+  }
+  /** Clear hover target for new-edge mode */
+  clearNewEdgeHoverTarget() {
+    this.clearDropTargetHighlight();
+    this.editMode.setHoverTarget(null);
+  }
+  /** Remove drop target highlight from all elements */
+  clearDropTargetHighlight() {
+    for (const node of this.curNodes.values()) {
+      node.container?.classList.remove("g3p-drop-target");
+    }
+    this.container?.querySelectorAll(".g3p-drop-target").forEach((el) => {
+      el.classList.remove("g3p-drop-target");
+    });
+  }
+  /** Detect hover target during new-edge drag using elementFromPoint */
+  detectHoverTarget(clientX, clientY) {
+    if (this.newEdgeEl) {
+      this.newEdgeEl.style.display = "none";
+    }
+    const el = document.elementFromPoint(clientX, clientY);
+    if (this.newEdgeEl) {
+      this.newEdgeEl.style.display = "";
+    }
+    if (!el) {
+      this.clearNewEdgeHoverTarget();
+      return;
+    }
+    const portEl = el.closest(".g3p-node-port");
+    if (portEl) {
+      const nodeId = portEl.getAttribute("data-node-id");
+      const portId = portEl.getAttribute("data-port-id");
+      if (nodeId && portId) {
+        const node = this.curNodes.get(nodeId);
+        if (node && !node.isDummy) {
+          this.setNewEdgeHoverTarget(nodeId, portId);
+          return;
+        }
+      }
+    }
+    const nodeEl = el.closest(".g3p-node-container");
+    if (nodeEl) {
+      const nodeId = nodeEl.getAttribute("data-node-id");
+      if (nodeId) {
+        const node = this.curNodes.get(nodeId);
+        if (node && !node.isDummy) {
+          this.setNewEdgeHoverTarget(node.data.id);
+          return;
+        }
+      }
+    }
+    this.clearNewEdgeHoverTarget();
+  }
+  // ==================== Hit Testing ====================
+  /** Result of a hit test */
+  hitTest(clientX, clientY) {
+    const el = document.elementFromPoint(clientX, clientY);
+    if (!el) return { type: "canvas" };
+    const getCenter = (el2) => {
+      const rect = el2.getBoundingClientRect();
+      return screenPos(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    };
+    const portEl = el.closest(".g3p-node-port");
+    if (portEl) {
+      const nodeId = portEl.getAttribute("data-node-id");
+      const portId = portEl.getAttribute("data-port-id");
+      if (nodeId && portId) {
+        const center = getCenter(portEl);
+        const node = this.curNodes.get(nodeId);
+        if (node) {
+          return { type: "port", node, port: portId, center };
+        }
+      }
+    }
+    const nodeEl = el.closest(".g3p-node-container");
+    if (nodeEl) {
+      const nodeId = nodeEl.getAttribute("data-node-id");
+      if (nodeId) {
+        const borderEl = el.closest(".g3p-node-border");
+        const center = getCenter(borderEl ?? nodeEl);
+        const node = this.curNodes.get(nodeId);
+        if (node) {
+          return { type: "node", node, center };
+        }
+      }
+    }
+    const edgeEl = el.closest(".g3p-seg-container");
+    if (edgeEl) {
+      const segId = edgeEl.getAttribute("data-edge-id");
+      if (segId) {
+        return { type: "edge", segId };
+      }
+    }
+    return { type: "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;
+}
 
 // src/canvas/render-node.tsx
-var import_jsx_runtime5 = require("jsx-dom/jsx-runtime");
-function renderNode(node) {
+var import_jsx_runtime7 = require("jsx-dom/jsx-runtime");
+function renderNode(node, props) {
   if (typeof node == "string") node = { id: node };
-  const title = node?.title ?? node?.label ?? node?.name ?? node?.text ?? node?.id ?? "?";
+  const title = node?.title ?? props?.title ?? node?.label ?? node?.name ?? node?.text ?? props?.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 })
+  console.log(`renderNode: ${node.id} ${title} ${detail}`);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "g3p-node-default", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "g3p-node-title", children: title }),
+    detail && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "g3p-node-detail", children: detail })
   ] });
 }
 
@@ -2663,7 +3526,6 @@ function defaults() {
     },
     canvas: {
       renderNode,
-      classPrefix: "g3p",
       width: "100%",
       height: "100%",
       padding: 20,
@@ -2700,26 +3562,50 @@ var Updater = class _Updater {
     this.update.addNodes.push(node);
     return this;
   }
+  addNodes(...nodes) {
+    this.update.addNodes.push(...nodes);
+    return this;
+  }
   deleteNode(node) {
     this.update.removeNodes.push(node);
     return this;
   }
+  deleteNodes(...nodes) {
+    this.update.removeNodes.push(...nodes);
+    return this;
+  }
   updateNode(node) {
     this.update.updateNodes.push(node);
     return this;
   }
+  updateNodes(...nodes) {
+    this.update.updateNodes.push(...nodes);
+    return this;
+  }
   addEdge(edge) {
     this.update.addEdges.push(edge);
     return this;
   }
+  addEdges(...edges) {
+    this.update.addEdges.push(...edges);
+    return this;
+  }
   deleteEdge(edge) {
     this.update.removeEdges.push(edge);
     return this;
   }
+  deleteEdges(...edges) {
+    this.update.removeEdges.push(...edges);
+    return this;
+  }
   updateEdge(edge) {
     this.update.updateEdges.push(edge);
     return this;
   }
+  updateEdges(...edges) {
+    this.update.updateEdges.push(...edges);
+    return this;
+  }
   static add(nodes, edges) {
     const updater = new _Updater();
     updater.update.addNodes = nodes;
@@ -2740,22 +3626,19 @@ var API = class {
   nodeIds;
   edgeIds;
   nodeVersions;
+  nodeOverrides;
+  edgeOverrides;
+  nodeFields;
   nextNodeId;
   nextEdgeId;
+  events;
   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.events = args.events || {};
+    this.reset();
+    this.canvas = new Canvas(this, {
       ...this.options.canvas,
       dummyNodeSize: this.options.graph.dummyNodeSize,
       orientation: this.options.graph.orientation
@@ -2768,13 +3651,63 @@ var API = class {
       this.history = [];
     }
   }
+  reset() {
+    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.nodeOverrides = /* @__PURE__ */ new Map();
+    this.edgeOverrides = /* @__PURE__ */ new Map();
+    this.nodeFields = /* @__PURE__ */ new Map();
+    this.nextNodeId = 1;
+    this.nextEdgeId = 1;
+  }
+  /** Initialize the API */
   async init() {
     const root = document.getElementById(this.root);
     if (!root) throw new Error("root element not found");
     root.appendChild(this.canvas.container);
+    await this.applyHistory();
+  }
+  async applyHistory() {
     for (const update of this.history)
       await this.applyUpdate(update);
   }
+  /** Current history index (0-based) */
+  getHistoryIndex() {
+    return this.index;
+  }
+  /** Current history length */
+  getHistoryLength() {
+    return this.seq.length;
+  }
+  /** Toggle canvas editable mode without re-creating the graph */
+  setEditable(editable) {
+    this.canvas.editMode.editable = editable;
+  }
+  /** Replace entire history (clears prior) */
+  async replaceHistory(frames) {
+    this.reset();
+    this.history = frames;
+    await this.applyHistory();
+  }
+  /** Rebuild from snapshot (nodes/edges) */
+  async replaceSnapshot(nodes, edges, description) {
+    this.reset();
+    this.history = [{
+      addNodes: nodes,
+      addEdges: edges,
+      description
+    }];
+    await this.applyHistory();
+  }
+  get graph() {
+    return this.state.graph;
+  }
+  /** Navigate to a different state */
   nav(nav) {
     let newIndex;
     switch (nav) {
@@ -2796,6 +3729,8 @@ var API = class {
     this.applyDiff(this.index, newIndex);
     this.index = newIndex;
     this.state = this.seq[this.index];
+    if (this.events.historyChange)
+      this.events.historyChange(this.index, this.seq.length);
   }
   applyDiff(oldIndex, newIndex) {
     const oldGraph = this.seq[oldIndex].graph;
@@ -2805,36 +3740,72 @@ var API = class {
       if (!newNode) this.canvas.deleteNode(oldNode);
     }
     for (const newNode of newGraph.nodes.values()) {
-      if (!oldGraph.nodes.has(newNode.id)) this.canvas.addNode(newNode);
+      const oldNode = oldGraph.nodes.get(newNode.id);
+      if (!oldNode) {
+        this.canvas.addNode(newNode);
+      } else if (oldNode.key !== newNode.key) {
+        this.canvas.deleteNode(oldNode);
+        this.canvas.addNode(newNode);
+      } else if (oldNode.pos !== newNode.pos) {
+        this.canvas.getNode(newNode.key).setPos(newNode.pos);
+      }
     }
     for (const oldSeg of oldGraph.segs.values()) {
       const newSeg = newGraph.segs.get(oldSeg.id);
-      if (!newSeg)
+      if (!newSeg) {
         this.canvas.deleteSeg(oldSeg);
-      else if (oldSeg.svg != newSeg.svg)
-        this.canvas.updateSeg(newSeg);
+      } else if (oldSeg !== newSeg) {
+        this.canvas.updateSeg(newSeg, newGraph);
+      }
     }
     for (const newSeg of newGraph.segs.values()) {
-      if (!oldGraph.segs.has(newSeg.id))
+      if (!oldGraph.segs.has(newSeg.id)) {
         this.canvas.addSeg(newSeg, newGraph);
+      }
     }
     this.canvas.update();
   }
+  /** Add a node */
   async addNode(node) {
     await this.update((update) => update.addNode(node));
   }
+  /** Delete a node */
   async deleteNode(node) {
     await this.update((update) => update.deleteNode(node));
   }
+  /** Update a node */
   async updateNode(node) {
     await this.update((update) => update.updateNode(node));
   }
+  /** Add an edge */
   async addEdge(edge) {
     await this.update((update) => update.addEdge(edge));
   }
+  /** Delete an edge */
   async deleteEdge(edge) {
     await this.update((update) => update.deleteEdge(edge));
   }
+  /** Update an edge */
+  async updateEdge(edge) {
+    await this.update((update) => update.updateEdge(edge));
+  }
+  /** Perform a batch of updates */
+  async update(callback) {
+    const updater = new Updater();
+    callback(updater);
+    await this.applyUpdate(updater.update);
+  }
+  /** Rebuild the graph from scratch (removes all then re-adds all nodes/edges) */
+  async rebuild() {
+    const nodes = [...this.nodeIds.keys()];
+    const edges = [...this.edgeIds.keys()];
+    await this.update((updater) => {
+      for (const edge of edges) updater.deleteEdge(edge);
+      for (const node of nodes) updater.deleteNode(node);
+      for (const node of nodes) updater.addNode(node);
+      for (const edge of edges) updater.addEdge(edge);
+    });
+  }
   async applyUpdate(update) {
     log11.info("applyUpdate", update);
     const nodes = await this.measureNodes(update);
@@ -2851,12 +3822,16 @@ var API = class {
         this._addEdge(edge, mut);
       for (const edge of update.updateEdges ?? [])
         this._updateEdge(edge, mut);
+      this.nodeOverrides.clear();
+      this.edgeOverrides.clear();
     });
     this.state = { graph: graph2, update };
     this.setNodePositions();
     this.seq.splice(this.index + 1);
     this.seq.push(this.state);
     this.nav("last");
+    if (this.events.historyChange)
+      this.events.historyChange(this.index, this.seq.length);
   }
   setNodePositions() {
     const { graph: graph2 } = this.state;
@@ -2866,11 +3841,6 @@ var API = class {
         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])
@@ -2885,7 +3855,10 @@ var API = class {
     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}`);
+    else throw new Error(`invalid node ${JSON.stringify(data)}`);
+    this.detectNodeFields(data);
+    const overrides = this.nodeOverrides.get(data);
+    if (overrides) props = { ...props, ...overrides };
     let { id, title, text, type, render } = props;
     id ??= this.getNodeId(data);
     const ports = this.parsePorts(props.ports);
@@ -2895,6 +3868,21 @@ var API = class {
     this.nodeVersions.set(data, version);
     return { id, data, ports, title, text, type, render, version };
   }
+  detectNodeFields(data) {
+    if (typeof data != "object" || !data) return;
+    const skip = /* @__PURE__ */ new Set(["id", "ports", "render", "version"]);
+    for (const [key, value] of Object.entries(data)) {
+      if (skip.has(key)) continue;
+      if (value === null || value === void 0) continue;
+      const type = typeof value;
+      if (type === "string" || type === "number" || type === "boolean") {
+        this.nodeFields.set(key, type);
+      }
+    }
+  }
+  getNodeFields() {
+    return this.nodeFields;
+  }
   parseEdge(data) {
     const get = this.options.props.edge;
     let props;
@@ -2903,8 +3891,10 @@ var API = class {
     else if (typeof data == "string") props = this.parseStringEdge(data);
     else if (typeof data == "object") props = data;
     else throw new Error(`invalid edge ${data}`);
+    const overrides = this.edgeOverrides.get(data);
+    if (overrides) props = { ...props, ...overrides };
     let { id, source, target, type } = props;
-    id ??= this.getEdgeId(data);
+    if (!id) id = this.getEdgeId(data);
     source = this.parseEdgeEnd(source);
     target = this.parseEdgeEnd(target);
     const edge = { id, source, target, type, data };
@@ -2917,14 +3907,14 @@ var API = class {
       const keys = Object.keys(end);
       const pidx = keys.indexOf("port");
       if (pidx != -1) {
-        if (typeof end.port != "string") return end;
+        if (end.port !== void 0 && 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}`);
+      if (!id) throw new Error(`edge end references unknown node ${end.node}`);
       return { id, port: end.port };
     }
     throw new Error(`invalid edge end ${end}`);
@@ -2934,13 +3924,19 @@ var API = class {
     return { source, target };
   }
   parsePorts(ports) {
-    const fixed = { in: null, out: null };
+    const fixed = {};
     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;
   }
+  getNode(id) {
+    return this.graph.getNode(id);
+  }
+  getEdge(id) {
+    return this.graph.getEdge(id);
+  }
   getNodeId(node) {
     let id = this.nodeIds.get(node);
     if (!id) {
@@ -2960,7 +3956,6 @@ var API = class {
   _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);
@@ -2968,36 +3963,1152 @@ var API = class {
   }
   _removeNode(node, mut) {
     const id = this.nodeIds.get(node);
-    if (!id) throw new Error(`removing node ${node} which does not exist`);
+    if (!id) throw new Error(`removing node ${JSON.stringify(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}`);
+    if (!oldId) throw new Error(`updating unknown node ${JSON.stringify(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}`);
+      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`);
+    if (!id) throw new Error(`removing edge ${JSON.stringify(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}`);
+    if (!id) throw new Error(`updating unknown edge ${JSON.stringify(edge)} `);
     const data = this.parseEdge(edge);
-    if (data.id !== id) throw new Error(`edge id changed from ${id} to ${data.id}`);
+    if (data.id !== id) throw new Error(`edge id changed from ${id} to ${data.id} `);
     mut.updateEdge(data);
   }
+  // Event Handlers
+  handleClickNode(id) {
+    const handler = this.events.nodeClick;
+    const node = this.graph.getNode(id);
+    if (handler) handler(node.data);
+  }
+  handleClickEdge(id) {
+    const handler = this.events.edgeClick;
+    if (!handler) return;
+    const seg = this.graph.getSeg(id);
+    if (seg.edgeIds.size != 1) return;
+    const edge = this.graph.getEdge(seg.edgeIds.values().next().value);
+    handler(edge.data);
+  }
+  async handleNewNode() {
+    const gotNode = async (node) => {
+      await this.addNode(node);
+    };
+    if (this.events.newNode)
+      this.events.newNode(gotNode);
+    else
+      this.canvas.showNewNodeModal(async (data) => {
+        if (this.events.addNode)
+          this.events.addNode(data, gotNode);
+        else
+          await gotNode(data);
+      });
+  }
+  async handleNewNodeFrom(source) {
+    const gotNode = async (node) => {
+      const gotEdge = async (edge) => {
+        await this.update((u) => {
+          u.addNode(node).addEdge(edge);
+        });
+      };
+      const data = this.graph.getNode(source.id).data;
+      const newEdge = {
+        source: { node: data, port: source.port },
+        target: { node }
+      };
+      if (this.events.addEdge)
+        this.events.addEdge(newEdge, gotEdge);
+      else
+        await gotEdge(newEdge);
+    };
+    if (this.events.newNode)
+      this.events.newNode(gotNode);
+    else
+      this.canvas.showNewNodeModal(async (data) => {
+        if (this.events.addNode)
+          this.events.addNode(data, gotNode);
+        else
+          await gotNode(data);
+      });
+  }
+  async handleEditNode(id) {
+    const node = this.graph.getNode(id);
+    const gotNode = async (node2) => {
+      if (node2) await this.updateNode(node2);
+    };
+    if (this.events.editNode)
+      this.events.editNode(node.data, gotNode);
+    else {
+      this.canvas.showEditNodeModal(node, async (data) => {
+        if (this.events.updateNode)
+          this.events.updateNode(node.data, data, gotNode);
+        else {
+          this.nodeOverrides.set(node.data, data);
+          await gotNode(node.data);
+        }
+      });
+    }
+  }
+  async handleEditEdge(id) {
+    const seg = this.graph.getSeg(id);
+    if (seg.edgeIds.size != 1) return;
+    const edge = this.graph.getEdge(seg.edgeIds.values().next().value);
+    const gotEdge = async (edge2) => {
+      if (edge2) await this.updateEdge(edge2);
+    };
+    if (this.events.editEdge)
+      this.events.editEdge(edge.data, gotEdge);
+    else
+      this.canvas.showEditEdgeModal(edge, async (data) => {
+        const sourceNode = edge.sourceNode(this.graph);
+        const targetNode = edge.targetNode(this.graph);
+        const update = {
+          source: { node: sourceNode.data, port: data.source.port, marker: data.source.marker },
+          target: { node: targetNode.data, port: data.target.port, marker: data.target.marker }
+        };
+        if (this.events.updateEdge)
+          this.events.updateEdge(edge.data, update, gotEdge);
+        else {
+          this.edgeOverrides.set(edge.data, {
+            source: { id: sourceNode.id, port: data.source.port, marker: data.source.marker },
+            target: { id: targetNode.id, port: data.target.port, marker: data.target.marker },
+            type: data.type
+          });
+          await gotEdge(edge.data);
+        }
+      });
+  }
+  async handleAddEdge(data) {
+    const gotEdge = async (edge) => {
+      if (edge) await this.addEdge(edge);
+    };
+    const newEdge = {
+      source: { node: this.graph.getNode(data.source.id).data, port: data.source.port, marker: data.source.marker },
+      target: { node: this.graph.getNode(data.target.id).data, port: data.target.port, marker: data.target.marker }
+    };
+    if (this.events.addEdge)
+      this.events.addEdge(newEdge, gotEdge);
+    else
+      await gotEdge(data);
+  }
+  async handleDeleteNode(id) {
+    const node = this.getNode(id);
+    if (this.events.removeNode)
+      this.events.removeNode(node.data, async (remove) => {
+        if (remove) await this.deleteNode(node.data);
+      });
+    else
+      await this.deleteNode(node.data);
+  }
+  async handleDeleteEdge(id) {
+    const edge = this.getEdge(id);
+    if (this.events.removeEdge)
+      this.events.removeEdge(edge.data, async (remove) => {
+        if (remove) await this.deleteEdge(edge.data);
+      });
+    else
+      await this.deleteEdge(edge.data);
+  }
+};
+
+// src/api/ingest.ts
+var Ingest = class {
+  constructor(api) {
+    this.api = api;
+  }
+  /**
+   * Apply an incoming ingest message to the API.
+   * - snapshot: rebuild state from nodes/edges (clears prior history)
+   * - update: apply incremental update
+   * - history: initialize from a set of frames (clears prior history)
+   */
+  async apply(msg) {
+    switch (msg.type) {
+      case "snapshot": {
+        await this.api.replaceSnapshot(msg.nodes, msg.edges, msg.description);
+        break;
+      }
+      case "update": {
+        await this.api.update((u) => {
+          if (msg.addNodes) u.addNodes(...msg.addNodes);
+          if (msg.removeNodes) u.deleteNodes(...msg.removeNodes);
+          if (msg.updateNodes) u.updateNodes(...msg.updateNodes);
+          if (msg.addEdges) u.addEdges(...msg.addEdges);
+          if (msg.removeEdges) u.deleteEdges(...msg.removeEdges);
+          if (msg.updateEdges) u.updateEdges(...msg.updateEdges);
+          if (msg.description) u.describe(msg.description);
+        });
+        break;
+      }
+      case "history": {
+        await this.api.replaceHistory(msg.frames);
+        break;
+      }
+    }
+  }
+};
+
+// src/api/sources/WebSocketSource.ts
+var WebSocketSource = class {
+  url;
+  ws = null;
+  onMessage;
+  onStatus;
+  reconnectMs;
+  closedByUser = false;
+  connectStartTime = null;
+  totalTimeoutMs = 1e4;
+  totalTimeoutTimer = null;
+  constructor(url, onMessage, onStatus, reconnectMs = 1500) {
+    this.url = url;
+    this.onMessage = onMessage;
+    this.onStatus = onStatus;
+    this.reconnectMs = reconnectMs;
+  }
+  connect() {
+    this.closedByUser = false;
+    this.connectStartTime = Date.now();
+    this.startTotalTimeout();
+    this.open();
+  }
+  disconnect() {
+    this.closedByUser = true;
+    this.clearTotalTimeout();
+    if (this.ws) {
+      try {
+        this.ws.close();
+      } catch {
+      }
+      this.ws = null;
+    }
+    this.onStatus?.("closed");
+  }
+  startTotalTimeout() {
+    this.clearTotalTimeout();
+    this.totalTimeoutTimer = window.setTimeout(() => {
+      if (!this.closedByUser && this.ws?.readyState !== WebSocket.OPEN) {
+        this.closedByUser = true;
+        if (this.ws) {
+          try {
+            this.ws.close();
+          } catch {
+          }
+          this.ws = null;
+        }
+        this.clearTotalTimeout();
+        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+      }
+    }, this.totalTimeoutMs);
+  }
+  clearTotalTimeout() {
+    if (this.totalTimeoutTimer !== null) {
+      clearTimeout(this.totalTimeoutTimer);
+      this.totalTimeoutTimer = null;
+    }
+    this.connectStartTime = null;
+  }
+  open() {
+    if (this.connectStartTime && Date.now() - this.connectStartTime >= this.totalTimeoutMs) {
+      if (!this.closedByUser) {
+        this.closedByUser = true;
+        this.clearTotalTimeout();
+        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+      }
+      return;
+    }
+    this.onStatus?.(this.ws ? "reconnecting" : "connecting");
+    const ws = new WebSocket(this.url);
+    this.ws = ws;
+    ws.onopen = () => {
+      this.clearTotalTimeout();
+      this.onStatus?.("connected");
+    };
+    ws.onerror = (e) => {
+      this.onStatus?.("error", e);
+    };
+    ws.onclose = () => {
+      if (this.closedByUser) {
+        this.onStatus?.("closed");
+        return;
+      }
+      if (this.connectStartTime && Date.now() - this.connectStartTime >= this.totalTimeoutMs) {
+        this.closedByUser = true;
+        this.clearTotalTimeout();
+        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+        return;
+      }
+      this.onStatus?.("reconnecting");
+      setTimeout(() => this.open(), this.reconnectMs);
+    };
+    ws.onmessage = (ev) => {
+      const data = typeof ev.data === "string" ? ev.data : "";
+      const lines = data.split("\n").map((l) => l.trim()).filter(Boolean);
+      for (const line of lines) {
+        try {
+          const obj = JSON.parse(line);
+          this.onMessage(obj);
+        } catch {
+        }
+      }
+    };
+  }
+};
+
+// src/api/sources/FileSystemSource.ts
+var FileSystemSource = class {
+  handle = null;
+  onMessage;
+  onStatus;
+  timer = null;
+  lastSize = 0;
+  filename;
+  intervalMs;
+  constructor(onMessage, onStatus, filename = "graph.ndjson", intervalMs = 1e3) {
+    this.onMessage = onMessage;
+    this.onStatus = onStatus;
+    this.filename = filename;
+    this.intervalMs = intervalMs;
+  }
+  async openDirectory() {
+    try {
+      const dir = await window.showDirectoryPicker?.();
+      if (!dir) throw new Error("File System Access not supported or cancelled");
+      const handle = await dir.getFileHandle(this.filename, { create: false });
+      this.handle = handle;
+      this.onStatus?.("opened", { file: this.filename });
+      this.lastSize = 0;
+      this.startPolling();
+    } catch (e) {
+      this.onStatus?.("error", e);
+    }
+  }
+  close() {
+    if (this.timer) {
+      window.clearInterval(this.timer);
+      this.timer = null;
+    }
+    this.handle = null;
+    this.onStatus?.("closed");
+  }
+  startPolling() {
+    if (this.timer) window.clearInterval(this.timer);
+    this.timer = window.setInterval(() => this.readNewLines(), this.intervalMs);
+  }
+  async readNewLines() {
+    try {
+      if (!this.handle) return;
+      this.onStatus?.("reading");
+      const file = await this.handle.getFile();
+      if (file.size === this.lastSize) return;
+      const slice = await file.slice(this.lastSize).text();
+      this.lastSize = file.size;
+      const lines = slice.split("\n").map((l) => l.trim()).filter(Boolean);
+      for (const line of lines) {
+        try {
+          const obj = JSON.parse(line);
+          this.onMessage(obj);
+        } catch {
+        }
+      }
+    } catch (e) {
+      this.onStatus?.("error", e);
+    }
+  }
+};
+
+// src/api/sources/FileSource.ts
+var FileSource = class {
+  url;
+  onMessage;
+  onStatus;
+  timer = null;
+  lastETag = null;
+  lastContent = "";
+  intervalMs = 1e3;
+  closed = false;
+  constructor(url, onMessage, onStatus, intervalMs = 1e3) {
+    this.url = url;
+    this.onMessage = onMessage;
+    this.onStatus = onStatus;
+    this.intervalMs = intervalMs;
+  }
+  async connect() {
+    this.closed = false;
+    this.lastETag = null;
+    this.lastContent = "";
+    this.onStatus?.("opened");
+    this.startPolling();
+  }
+  close() {
+    this.closed = true;
+    if (this.timer) {
+      window.clearInterval(this.timer);
+      this.timer = null;
+    }
+    this.onStatus?.("closed");
+  }
+  startPolling() {
+    if (this.timer) window.clearInterval(this.timer);
+    this.timer = window.setInterval(() => this.poll(), this.intervalMs);
+    this.poll();
+  }
+  async poll() {
+    if (this.closed) return;
+    try {
+      this.onStatus?.("reading");
+      const headers = {};
+      if (this.lastETag) {
+        headers["If-None-Match"] = this.lastETag;
+      }
+      const response = await fetch(this.url, { headers });
+      if (response.status === 304) {
+        return;
+      }
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const etag = response.headers.get("ETag");
+      if (etag) {
+        this.lastETag = etag;
+      }
+      const content = await response.text();
+      if (content === this.lastContent) {
+        return;
+      }
+      const lines = content.split("\n").map((l) => l.trim()).filter(Boolean);
+      const lastContentLines = this.lastContent.split("\n").map((l) => l.trim()).filter(Boolean);
+      const newLines = lines.slice(lastContentLines.length);
+      for (const line of newLines) {
+        try {
+          const obj = JSON.parse(line);
+          this.onMessage(obj);
+        } catch {
+        }
+      }
+      this.lastContent = content;
+    } catch (e) {
+      this.onStatus?.("error", e);
+    }
+  }
+};
+
+// src/playground/playground.ts
+var import_styles2 = __toESM(require("./styles.css?raw"), 1);
+var Playground = class {
+  options;
+  rootElement;
+  currentExample;
+  currentGraph = null;
+  ingest = null;
+  isEditable = false;
+  wsSource = null;
+  fsSource = null;
+  fileSource = null;
+  wsStatus = "disconnected";
+  fsStatus = "disconnected";
+  fileStatus = "disconnected";
+  activeSourceType = null;
+  wsUrl = "ws://localhost:8787";
+  sourceModal = null;
+  helpOverlay = null;
+  exampleList;
+  graphContainerId;
+  constructor(options) {
+    this.options = options;
+    this.exampleList = Object.keys(options.examples);
+    this.currentExample = options.defaultExample || this.exampleList[0];
+    this.graphContainerId = `playground-graph-${Math.random().toString(36).substr(2, 9)}`;
+    if (typeof options.root === "string") {
+      const el = document.getElementById(options.root);
+      if (!el) throw new Error(`Element with id "${options.root}" not found`);
+      this.rootElement = el;
+    } else {
+      this.rootElement = options.root;
+    }
+  }
+  async init() {
+    this.injectStyles();
+    this.createDOM();
+    this.setupEventListeners();
+    await this.renderGraph();
+    this.updateSourceIcon();
+    this.connectExampleSource();
+    const rebuildBtn = this.rootElement.querySelector("#rebuild");
+    if (rebuildBtn) rebuildBtn.disabled = !this.isEditable;
+  }
+  injectStyles() {
+    if (!document.getElementById("g3p-playground-styles")) {
+      const styleEl = document.createElement("style");
+      styleEl.id = "g3p-playground-styles";
+      styleEl.textContent = import_styles2.default;
+      document.head.appendChild(styleEl);
+    }
+  }
+  createDOM() {
+    const exampleList = this.exampleList.map((key, i) => {
+      const example = this.options.examples[key];
+      const isActive = i === 0 || key === this.currentExample;
+      return `
+        <button class="example-btn ${isActive ? "active" : ""}" data-example="${key}">
+          ${example.name}
+        </button>
+      `;
+    }).join("");
+    this.rootElement.innerHTML = `
+      <main class="playground">
+        <div class="sidebar">
+          <h2>Examples</h2>
+          <div class="example-list">
+            ${exampleList}
+          </div>
+
+          <h2>Options</h2>
+          <div class="options">
+            <div class="option-group">
+              <label>Orientation</label>
+              <select id="orientation">
+                <option value="TB">Top to Bottom</option>
+                <option value="BT">Bottom to Top</option>
+                <option value="LR">Left to Right</option>
+                <option value="RL">Right to Left</option>
+              </select>
+            </div>
+
+            <div class="option-group">
+              <label>Port Style</label>
+              <select id="portStyle">
+                <option value="outside">Outside</option>
+                <option value="inside">Inside</option>
+              </select>
+            </div>
+
+            <div class="option-group">
+              <label>
+                <input type="checkbox" id="portLabelRotate" />
+                Rotate Port Labels
+              </label>
+            </div>
+
+            <div class="option-group">
+              <label>Theme</label>
+              <select id="colorMode">
+                <option value="system">System</option>
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="graph-area">
+          <div class="graph-toolbar">
+            <div class="nav-controls">
+              <button class="nav-btn" id="nav-first" title="First (Home)">\u23EE</button>
+              <button class="nav-btn" id="nav-prev" title="Previous (\u2190)">\u25C0</button>
+              <span id="history-label" style="min-width: 4rem; text-align: center; display: inline-flex; align-items: center; justify-content: center; height: 2.25rem;">\u2014 / \u2014</span>
+              <button class="nav-btn" id="nav-next" title="Next (\u2192)">\u25B6</button>
+              <button class="nav-btn" id="nav-last" title="Last (End)">\u23ED</button>
+            </div>
+            <div class="connect-controls" style="display:flex; gap:.5rem; align-items:center;">
+              <button class="nav-btn source-icon-btn" id="source-icon" title="Data Source Connection">\u{1F4E1}</button>
+            </div>
+            <button class="nav-btn" id="help-btn" title="How to edit">\u2753</button>
+            <button class="nav-btn" id="edit-toggle" title="Toggle edit mode">\u270E Edit</button>
+            <button class="nav-btn" id="rebuild" title="Rebuild graph from scratch">\u{1F504} Rebuild</button>
+          </div>
+          <div class="graph-container" id="${this.graphContainerId}"></div>
+        </div>
+      </main>
+    `;
+  }
+  setupEventListeners() {
+    this.rootElement.querySelectorAll(".example-btn").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        this.rootElement.querySelectorAll(".example-btn").forEach((b) => b.classList.remove("active"));
+        btn.classList.add("active");
+        this.currentExample = btn.getAttribute("data-example") || this.exampleList[0];
+        this.renderGraph();
+        this.connectExampleSource();
+      });
+    });
+    this.rootElement.querySelectorAll(".options select, .options input").forEach((el) => {
+      el.addEventListener("change", () => this.renderGraph());
+    });
+    this.rootElement.querySelector("#nav-first")?.addEventListener("click", () => {
+      this.currentGraph?.nav("first");
+      this.updateHistoryLabel();
+    });
+    this.rootElement.querySelector("#nav-prev")?.addEventListener("click", () => {
+      this.currentGraph?.nav("prev");
+      this.updateHistoryLabel();
+    });
+    this.rootElement.querySelector("#nav-next")?.addEventListener("click", () => {
+      this.currentGraph?.nav("next");
+      this.updateHistoryLabel();
+    });
+    this.rootElement.querySelector("#nav-last")?.addEventListener("click", () => {
+      this.currentGraph?.nav("last");
+      this.updateHistoryLabel();
+    });
+    this.rootElement.querySelector("#rebuild")?.addEventListener("click", () => {
+      this.currentGraph?.rebuild();
+    });
+    this.rootElement.querySelector("#edit-toggle")?.addEventListener("click", () => {
+      this.isEditable = !this.isEditable;
+      const btn = this.rootElement.querySelector("#edit-toggle");
+      if (btn) btn.textContent = this.isEditable ? "\u2713 Done" : "\u270E Edit";
+      const rebuildBtn = this.rootElement.querySelector("#rebuild");
+      if (rebuildBtn) rebuildBtn.disabled = !this.isEditable;
+      try {
+        this.currentGraph?.setEditable?.(this.isEditable);
+      } catch {
+      }
+    });
+    this.rootElement.querySelector("#help-btn")?.addEventListener("click", () => this.openHelp());
+    const sourceIconBtn = this.rootElement.querySelector("#source-icon");
+    if (sourceIconBtn) {
+      sourceIconBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.openSourceModal();
+      });
+    }
+    document.addEventListener("keydown", (e) => {
+      if (!this.currentGraph) return;
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement) return;
+      switch (e.key) {
+        case "Home":
+          this.currentGraph.nav("first");
+          this.updateHistoryLabel();
+          break;
+        case "End":
+          this.currentGraph.nav("last");
+          this.updateHistoryLabel();
+          break;
+        case "ArrowLeft":
+          this.currentGraph.nav("prev");
+          this.updateHistoryLabel();
+          break;
+        case "ArrowRight":
+          this.currentGraph.nav("next");
+          this.updateHistoryLabel();
+          break;
+      }
+    });
+  }
+  getResolvedColorMode() {
+    const mode = this.rootElement.querySelector("#colorMode")?.value;
+    if (mode === "system") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return mode;
+  }
+  getOptions(exampleOptions) {
+    const orientation = this.rootElement.querySelector("#orientation")?.value;
+    return {
+      graph: { orientation },
+      canvas: {
+        width: "100%",
+        height: "100%",
+        colorMode: this.getResolvedColorMode(),
+        editable: this.isEditable,
+        ...exampleOptions?.canvas
+      }
+    };
+  }
+  async renderGraph() {
+    const container = this.rootElement.querySelector(`#${this.graphContainerId}`);
+    if (!container) return;
+    container.innerHTML = "";
+    const example = this.options.examples[this.currentExample];
+    const options = this.getOptions(example.options);
+    try {
+      this.currentGraph = await graph({
+        root: this.graphContainerId,
+        nodes: example.nodes,
+        edges: example.edges,
+        options,
+        events: {
+          historyChange: () => this.updateHistoryLabel()
+        }
+      });
+      this.ingest = new Ingest(this.currentGraph);
+      this.updateHistoryLabel();
+    } catch (e) {
+      console.error("Failed to render graph:", e);
+      container.innerHTML = '<p style="padding: 2rem; color: #ef4444;">Failed to load graph</p>';
+    }
+  }
+  updateHistoryLabel() {
+    const label = this.rootElement.querySelector("#history-label");
+    if (!label || !this.currentGraph) return;
+    try {
+      const idx = this.currentGraph.getHistoryIndex?.() ?? 0;
+      const len = this.currentGraph.getHistoryLength?.() ?? 1;
+      label.textContent = `${idx + 1} / ${len}`;
+    } catch {
+      label.textContent = "\u2014 / \u2014";
+    }
+  }
+  connectExampleSource() {
+    const example = this.options.examples[this.currentExample];
+    if (!example.source) {
+      this.disconnectAllSources();
+      return;
+    }
+    this.disconnectAllSources();
+    if (example.source.type === "websocket") {
+      this.wsUrl = example.source.url;
+      this.wsSource = new WebSocketSource(example.source.url, this.handleIngestMessage.bind(this), this.updateWsStatus);
+      this.wsSource.connect();
+    } else if (example.source.type === "file") {
+      this.fileSource = new FileSource(example.source.path, this.handleIngestMessage.bind(this), this.updateFileStatus);
+      this.fileSource.connect();
+    }
+  }
+  disconnectAllSources() {
+    this.wsSource?.disconnect();
+    this.fsSource?.close();
+    this.fileSource?.close();
+    this.wsSource = null;
+    this.fsSource = null;
+    this.fileSource = null;
+    this.activeSourceType = null;
+    this.wsStatus = "disconnected";
+    this.fsStatus = "disconnected";
+    this.fileStatus = "disconnected";
+    this.updateSourceIcon();
+  }
+  openHelp() {
+    if (!this.helpOverlay) {
+      this.helpOverlay = document.createElement("div");
+      this.helpOverlay.className = "modal-overlay";
+      this.helpOverlay.innerHTML = `
+        <div class="modal" role="dialog" aria-modal="true" aria-labelledby="help-title">
+          <div class="modal-header">
+            <h3 id="help-title">Editing the Graph</h3>
+            <button class="modal-close" title="Close" aria-label="Close">\xD7</button>
+          </div>
+          <div class="modal-body">
+            <p>Here's how to edit the graph:</p>
+            <ul>
+              <li><strong>Enable editing</strong>: Click "Edit"</li>
+              <li><strong>Add a node</strong>: Double\u2011click an empty area</li>
+              <li><strong>Edit a node</strong>: Double\u2011click a node</li>
+              <li><strong>Edit an edge</strong>: Double\u2011click an edge</li>
+              <li><strong>Create an edge</strong>: Click and drag from a node (or its port) onto another node; press Esc to cancel</li>
+              <li><strong>Pan</strong>: Drag on canvas or edges; <strong>Zoom</strong>: Mouse wheel or controls</li>
+              <li><strong>Rebuild</strong>: Use "Rebuild" to re-layout from scratch (enabled in edit mode)</li>
+            </ul>
+            <p>When you're done, click "Done" to lock the canvas.</p>
+          </div>
+        </div>
+      `;
+      document.body.appendChild(this.helpOverlay);
+      this.helpOverlay.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.classList.contains("modal-overlay") || target.classList.contains("modal-close")) {
+          this.closeHelp();
+        }
+      });
+    }
+    this.helpOverlay.style.display = "flex";
+  }
+  closeHelp() {
+    if (this.helpOverlay) this.helpOverlay.style.display = "none";
+  }
+  handleIngestMessage = async (msg) => {
+    if (!this.ingest) return;
+    await this.ingest.apply(msg);
+  };
+  updateSourceIcon() {
+    const iconBtn = this.rootElement.querySelector("#source-icon");
+    if (!iconBtn) return;
+    iconBtn.classList.remove("active", "connecting", "error");
+    const isConnected = this.activeSourceType === "ws" && this.wsStatus === "connected" || this.activeSourceType === "folder" && this.fsStatus === "connected" || this.activeSourceType === "file" && this.fileStatus === "connected";
+    const isConnecting = this.activeSourceType === "ws" && this.wsStatus === "connecting" || this.activeSourceType === "folder" && this.fsStatus === "opening" || this.activeSourceType === "file" && this.fileStatus === "connecting";
+    const hasError = this.activeSourceType === "ws" && this.wsStatus === "error" || this.activeSourceType === "folder" && this.fsStatus === "error" || this.activeSourceType === "file" && this.fileStatus === "error";
+    let icon = "\u{1F4E1}";
+    if (this.activeSourceType === "folder") {
+      icon = "\u{1F4C1}";
+    } else if (this.activeSourceType === "file") {
+      icon = "\u{1F4C4}";
+    }
+    if (isConnected) {
+      iconBtn.classList.add("active");
+      iconBtn.textContent = icon;
+    } else if (isConnecting) {
+      iconBtn.classList.add("connecting");
+      iconBtn.textContent = icon;
+    } else if (hasError) {
+      iconBtn.classList.add("error");
+      iconBtn.textContent = icon;
+    } else {
+      iconBtn.textContent = "\u{1F4E1}";
+    }
+  }
+  updateWsStatus = (status, detail) => {
+    if (status === "connecting" || status === "reconnecting") {
+      this.wsStatus = "connecting";
+      this.activeSourceType = "ws";
+    } else if (status === "connected") {
+      this.wsStatus = "connected";
+      this.activeSourceType = "ws";
+      if (this.fsSource && this.fsStatus === "connected") {
+        this.fsSource.close();
+      }
+      if (this.fileSource && this.fileStatus === "connected") {
+        this.fileSource.close();
+      }
+    } else if (status === "error") {
+      this.wsStatus = "error";
+    } else {
+      this.wsStatus = "disconnected";
+      if (this.activeSourceType === "ws") {
+        this.activeSourceType = null;
+      }
+    }
+    this.updateSourceIcon();
+    this.updateSourceModal();
+  };
+  updateFsStatus = (status, detail) => {
+    if (status === "opened") {
+      this.fsStatus = "opening";
+      this.activeSourceType = "folder";
+      if (this.wsSource && this.wsStatus === "connected") {
+        this.wsSource.disconnect();
+      }
+    } else if (status === "reading") {
+      this.fsStatus = "connected";
+      this.activeSourceType = "folder";
+    } else if (status === "error") {
+      this.fsStatus = "error";
+    } else if (status === "closed") {
+      this.fsStatus = "disconnected";
+      if (this.activeSourceType === "folder") {
+        this.activeSourceType = null;
+      }
+    } else {
+      this.fsStatus = "disconnected";
+    }
+    this.updateSourceIcon();
+    this.updateSourceModal();
+  };
+  updateFileStatus = (status, detail) => {
+    if (status === "opened") {
+      this.fileStatus = "connecting";
+      this.activeSourceType = "file";
+      if (this.wsSource && this.wsStatus === "connected") {
+        this.wsSource.disconnect();
+      }
+      if (this.fsSource && this.fsStatus === "connected") {
+        this.fsSource.close();
+      }
+    } else if (status === "reading") {
+      this.fileStatus = "connected";
+      this.activeSourceType = "file";
+    } else if (status === "error") {
+      this.fileStatus = "error";
+    } else if (status === "closed") {
+      this.fileStatus = "disconnected";
+      if (this.activeSourceType === "file") {
+        this.activeSourceType = null;
+      }
+    } else {
+      this.fileStatus = "disconnected";
+    }
+    this.updateSourceIcon();
+    this.updateSourceModal();
+  };
+  createSourceModal() {
+    if (this.sourceModal) return this.sourceModal;
+    this.sourceModal = document.createElement("div");
+    this.sourceModal.className = "modal-overlay";
+    this.sourceModal.style.display = "none";
+    this.sourceModal.innerHTML = `
+      <div class="modal" role="dialog" aria-modal="true" aria-labelledby="source-modal-title">
+        <div class="modal-header">
+          <h3 id="source-modal-title">Data Source Connection</h3>
+          <button class="modal-close" title="Close" aria-label="Close">\xD7</button>
+        </div>
+        <div class="modal-body">
+          <div class="source-type-selector">
+            <button class="source-type-option" data-source="ws">\u{1F4E1} WebSocket</button>
+            <button class="source-type-option" data-source="folder">\u{1F4C1} Folder</button>
+          </div>
+
+          <div class="source-controls" data-source="ws">
+            <div class="form-group">
+              <label for="source-modal-url">WebSocket URL</label>
+              <input type="text" id="source-modal-url" value="${this.wsUrl}" />
+            </div>
+            <div class="button-group">
+              <button id="source-modal-connect-ws" class="primary">Connect</button>
+              <button id="source-modal-disconnect-ws">Disconnect</button>
+              <button id="source-modal-change-ws">Change Connection</button>
+            </div>
+          </div>
+
+          <div class="source-controls" data-source="folder">
+            <div class="form-group">
+              <label>File System Source</label>
+              <p style="font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.25rem;">
+                Select a directory containing a graph.ndjson file to watch for changes.
+              </p>
+            </div>
+            <div class="button-group">
+              <button id="source-modal-connect-folder" class="primary">Open Folder</button>
+              <button id="source-modal-disconnect-folder">Disconnect</button>
+            </div>
+          </div>
+
+          <div id="source-modal-status"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(this.sourceModal);
+    this.sourceModal.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.classList.contains("modal-overlay") || target.classList.contains("modal-close")) {
+        this.closeSourceModal();
+      }
+    });
+    this.sourceModal.querySelectorAll(".source-type-option").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const sourceType = btn.getAttribute("data-source");
+        if (sourceType) {
+          this.selectSourceType(sourceType);
+        }
+      });
+    });
+    document.getElementById("source-modal-connect-ws")?.addEventListener("click", () => this.handleConnect());
+    document.getElementById("source-modal-disconnect-ws")?.addEventListener("click", () => this.handleDisconnect());
+    document.getElementById("source-modal-change-ws")?.addEventListener("click", () => this.handleChangeConnection());
+    document.getElementById("source-modal-connect-folder")?.addEventListener("click", () => this.handleOpenFolder());
+    document.getElementById("source-modal-disconnect-folder")?.addEventListener("click", () => this.handleCloseFolder());
+    document.getElementById("source-modal-url")?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && this.wsStatus !== "connected") {
+        this.handleConnect();
+      }
+    });
+    return this.sourceModal;
+  }
+  selectSourceType(type, skipUpdate = false) {
+    if (!this.sourceModal) return;
+    this.sourceModal.querySelectorAll(".source-type-option").forEach((btn) => {
+      if (btn.getAttribute("data-source") === type) {
+        btn.classList.add("active");
+      } else {
+        btn.classList.remove("active");
+      }
+    });
+    this.sourceModal.querySelectorAll(".source-controls").forEach((controls) => {
+      if (controls.getAttribute("data-source") === type) {
+        controls.classList.add("active");
+      } else {
+        controls.classList.remove("active");
+      }
+    });
+    if (!skipUpdate) {
+      this.updateSourceModalContent();
+    }
+  }
+  updateSourceModalContent() {
+    if (!this.sourceModal) return;
+    const urlInput = document.getElementById("source-modal-url");
+    const connectWsBtn = document.getElementById("source-modal-connect-ws");
+    const disconnectWsBtn = document.getElementById("source-modal-disconnect-ws");
+    const changeWsBtn = document.getElementById("source-modal-change-ws");
+    if (urlInput && connectWsBtn && disconnectWsBtn && changeWsBtn) {
+      const isWsConnected = this.wsStatus === "connected";
+      const isWsConnecting = this.wsStatus === "connecting";
+      connectWsBtn.disabled = isWsConnected || isWsConnecting;
+      disconnectWsBtn.disabled = !isWsConnected || isWsConnecting;
+      changeWsBtn.disabled = !isWsConnected || isWsConnecting;
+      urlInput.disabled = isWsConnecting;
+    }
+    const connectFolderBtn = document.getElementById("source-modal-connect-folder");
+    const disconnectFolderBtn = document.getElementById("source-modal-disconnect-folder");
+    if (connectFolderBtn && disconnectFolderBtn) {
+      const isFolderConnected = this.fsStatus === "connected";
+      const isFolderOpening = this.fsStatus === "opening";
+      connectFolderBtn.disabled = isFolderConnected || isFolderOpening;
+      disconnectFolderBtn.disabled = !isFolderConnected || isFolderOpening;
+    }
+    const statusDiv = document.getElementById("source-modal-status");
+    if (!statusDiv) return;
+    const currentUrl = urlInput?.value || this.wsUrl;
+    statusDiv.innerHTML = "";
+    if (this.activeSourceType === "ws") {
+      if (this.wsStatus === "connecting") {
+        statusDiv.innerHTML = `
+          <div class="status-message info">
+            <span class="loading-spinner"></span>
+            Connecting to ${currentUrl}...
+          </div>
+        `;
+      } else if (this.wsStatus === "connected") {
+        statusDiv.innerHTML = `
+          <div class="status-message success">
+            \u2713 Connected to ${currentUrl}
+          </div>
+        `;
+      } else if (this.wsStatus === "error") {
+        statusDiv.innerHTML = `
+          <div class="status-message error">
+            \u2717 Connection error. Please check the URL and try again.
+          </div>
+        `;
+      } else {
+        statusDiv.innerHTML = `
+          <div class="status-message info">
+            Not connected
+          </div>
+        `;
+      }
+    } else if (this.activeSourceType === "folder") {
+      if (this.fsStatus === "opening") {
+        statusDiv.innerHTML = `
+          <div class="status-message info">
+            <span class="loading-spinner"></span>
+            Opening folder...
+          </div>
+        `;
+      } else if (this.fsStatus === "connected") {
+        statusDiv.innerHTML = `
+          <div class="status-message success">
+            \u2713 Folder connected and watching for changes
+          </div>
+        `;
+      } else if (this.fsStatus === "error") {
+        statusDiv.innerHTML = `
+          <div class="status-message error">
+            \u2717 Error opening folder. Please try again.
+          </div>
+        `;
+      } else {
+        statusDiv.innerHTML = `
+          <div class="status-message info">
+            Not connected
+          </div>
+        `;
+      }
+    } else if (this.activeSourceType === "file") {
+      const example = this.options.examples[this.currentExample];
+      const filePath = example.source?.type === "file" ? example.source.path : "";
+      if (this.fileStatus === "connecting") {
+        statusDiv.innerHTML = `
+          <div class="status-message info">
+            <span class="loading-spinner"></span>
+            Connecting to ${filePath}...
+          </div>
+        `;
+      } else if (this.fileStatus === "connected") {
+        statusDiv.innerHTML = `
+          <div class="status-message success">
+            \u2713 Connected to ${filePath}
+          </div>
+        `;
+      } else if (this.fileStatus === "error") {
+        statusDiv.innerHTML = `
+          <div class="status-message error">
+            \u2717 Error loading file. Please check the path and try again.
+          </div>
+        `;
+      } else {
+        statusDiv.innerHTML = `
+          <div class="status-message info">
+            Not connected
+          </div>
+        `;
+      }
+    } else {
+      statusDiv.innerHTML = `
+        <div class="status-message info">
+          Select a source type to connect
+        </div>
+      `;
+    }
+  }
+  updateSourceModal() {
+    if (!this.sourceModal) return;
+    const activeType = (this.activeSourceType === "file" ? "ws" : this.activeSourceType) || "ws";
+    this.selectSourceType(activeType, true);
+    this.updateSourceModalContent();
+  }
+  openSourceModal() {
+    this.createSourceModal();
+    if (this.sourceModal) {
+      const urlInput = document.getElementById("source-modal-url");
+      if (urlInput) {
+        urlInput.value = this.wsUrl;
+      }
+      const activeType = (this.activeSourceType === "file" ? "ws" : this.activeSourceType) || "ws";
+      this.selectSourceType(activeType);
+      this.updateSourceModal();
+      this.sourceModal.style.display = "flex";
+    }
+  }
+  closeSourceModal() {
+    if (this.sourceModal) {
+      this.sourceModal.style.display = "none";
+    }
+  }
+  handleConnect() {
+    const urlInput = document.getElementById("source-modal-url");
+    if (!urlInput) return;
+    const url = urlInput.value.trim() || "ws://localhost:8787";
+    this.wsUrl = url;
+    if (this.wsSource) {
+      this.wsSource.disconnect();
+    }
+    this.wsSource = new WebSocketSource(url, this.handleIngestMessage.bind(this), this.updateWsStatus);
+    this.wsSource.connect();
+    this.updateSourceModal();
+  }
+  handleDisconnect() {
+    this.wsSource?.disconnect();
+    this.updateSourceModal();
+  }
+  handleChangeConnection() {
+    if (this.wsSource) {
+      this.wsSource.disconnect();
+    }
+    const urlInput = document.getElementById("source-modal-url");
+    if (urlInput) {
+      urlInput.focus();
+      urlInput.select();
+    }
+    this.updateSourceModal();
+  }
+  async handleOpenFolder() {
+    if (!this.fsSource) {
+      this.fsSource = new FileSystemSource(this.handleIngestMessage.bind(this), this.updateFsStatus);
+    }
+    this.updateSourceModal();
+    await this.fsSource.openDirectory();
+  }
+  handleCloseFolder() {
+    this.fsSource?.close();
+    this.updateSourceModal();
+  }
 };
 
 // src/index.ts
@@ -3009,5 +5120,10 @@ async function graph(args = { root: "app" }) {
 var index_default = graph;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FileSource,
+  FileSystemSource,
+  Ingest,
+  Playground,
+  WebSocketSource,
   graph
 });