npm - @3plate/graph-core - Versions diffs - 0.1.4 → 0.1.6 - Mend

@3plate/graph-core 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -3,6 +3,70 @@ import { Map as IMap, List as IList, Set as ISet6 } from "immutable";
 // src/graph/node.ts
 import { Record, Set as ISet } from "immutable";
+// src/log.ts
+import pino from "pino";
+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 = pino({
+  level: resolvedLevel,
+  browser: browserOpts
+});
+function logger(module) {
+  const child = base.child({ module });
+  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,
@@ -11,7 +75,7 @@ var defNodeData = {
   text: void 0,
   type: void 0,
   render: void 0,
-  ports: { in: null, out: null },
+  ports: {},
   aligned: {},
   edges: { in: ISet(), out: ISet() },
   segs: { in: ISet(), out: ISet() },
@@ -45,10 +109,7 @@ var Node = class _Node extends 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);
@@ -58,7 +119,9 @@ var Node = class _Node extends Record(defNodeData) {
       segs: { in: ISet(), out: ISet() },
       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);
@@ -121,6 +184,18 @@ var Node = class _Node extends 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);
@@ -167,9 +242,22 @@ var Node = class _Node extends 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);
@@ -262,30 +350,7 @@ var Node = class _Node extends Record(defNodeData) {
 // src/graph/edge.ts
 import { Record as Record2 } from "immutable";
-// src/log.ts
-var levels = {
-  error: 0,
-  warn: 1,
-  info: 2,
-  debug: 3
-};
-var currentLevel = "debug";
-function shouldLog(level) {
-  return levels[level] <= levels[currentLevel];
-}
-function logger(module) {
-  return {
-    error: (msg, ...args) => shouldLog("error") && console.error(`[${module}] ${msg}`, ...args),
-    warn: (msg, ...args) => shouldLog("warn") && console.warn(`[${module}] ${msg}`, ...args),
-    info: (msg, ...args) => shouldLog("info") && console.info(`[${module}] ${msg}`, ...args),
-    debug: (msg, ...args) => shouldLog("debug") && console.debug(`[${module}] ${msg}`, ...args)
-  };
-}
-var log = logger("core");
-// src/graph/edge.ts
-var log2 = logger("edge");
+var log3 = logger("edge");
 var defEdgeData = {
   id: "",
   data: null,
@@ -293,7 +358,6 @@ var defEdgeData = {
   source: { id: "" },
   target: { id: "" },
   type: void 0,
-  style: void 0,
   mutable: false,
   segIds: []
 };
@@ -374,7 +438,7 @@ var Edge = class _Edge extends Record2(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 += "-";
     }
@@ -384,7 +448,7 @@ var Edge = class _Edge extends Record2(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 || "";
@@ -426,7 +490,6 @@ var defSegData = {
   source: { id: "" },
   target: { id: "" },
   type: void 0,
-  style: void 0,
   edgeIds: ISet2(),
   trackPos: void 0,
   svg: void 0,
@@ -457,7 +520,7 @@ var Seg = class _Seg extends Record3(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({
@@ -529,7 +592,7 @@ var Seg = class _Seg extends Record3(defSegData) {
 // src/graph/layer.ts
 import { Record as Record4, Set as ISet3 } from "immutable";
-var log3 = logger("layer");
+var log4 = logger("layer");
 var defLayerData = {
   id: "",
   index: 0,
@@ -554,7 +617,7 @@ var Layer = class extends Record4(defLayerData) {
       mutable: false
     }).asImmutable();
   }
-  get size() {
+  get nodeCount() {
     return this.nodeIds.size;
   }
   *nodes(g) {
@@ -609,9 +672,8 @@ var Layer = class extends Record4(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) {
@@ -783,12 +845,12 @@ var Cycles = class _Cycles {
 // src/graph/services/dummy.ts
 import { Set as ISet4 } from "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;
@@ -812,7 +874,7 @@ var Dummy = class _Dummy {
               });
               target = { id: dummy.id };
             }
-            seg = Seg.add(g, { source, target, type, style, edgeIds: ISet4([edgeId]) });
+            seg = Seg.add(g, { source, target, type, edgeIds: ISet4([edgeId]) });
             segs.splice(segIndex, 0, seg.id);
             changed = true;
           } else if (segLayer < layerIndex || seg.source.id != source.id || seg.source.port != source.port || layerIndex == targetLayer && (seg.target.id != edge.target.id || seg.target.port != edge.target.port)) {
@@ -851,9 +913,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());
@@ -861,7 +922,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) {
@@ -871,8 +932,9 @@ var Dummy = class _Dummy {
               const example = g.getSeg(segId);
               seg = Seg.add(g, {
                 ...example,
-                edgeIds: ISet4([old.edgeId]),
-                [altSide]: { ...example[altSide], id: dummy.id }
+                edgeIds: ISet4(edgeIds),
+                [side]: { ...example[side] },
+                [altSide]: { ...example[altSide], id: dummy.id, port: void 0 }
               });
             }
             edge = edge.replaceSegId(g, segId, seg.id);
@@ -884,12 +946,15 @@ var Dummy = class _Dummy {
             const example = g.getSeg(segId);
             const seg2 = Seg.add(g, {
               ...example,
-              edgeIds: ISet4([old.edgeId]),
-              [side]: { ...example[side], id: dummy.id }
+              edgeIds: ISet4([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);
       }
     }
   }
@@ -897,7 +962,7 @@ var Dummy = class _Dummy {
 // src/graph/services/layers.ts
 import { Seq } from "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);
@@ -960,7 +1025,7 @@ var Layers = class {
 // src/graph/services/layout.ts
 import { Seq as Seq2 } from "immutable";
-var log6 = logger("layout");
+var log7 = logger("layout");
 var Layout = class _Layout {
   static parentIndex(g, node) {
     const parents = Seq2([...node.adjs(g, "segs", "in")]);
@@ -977,8 +1042,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 ?? Seq2(a.edgeIds).min();
-    const minB = b.edgeId ?? Seq2(b.edgeIds).min();
+    const minA = Seq2(a.edgeIds).min();
+    const minB = Seq2(b.edgeIds).min();
     return minA.localeCompare(minB);
   }
   static positionNodes(g) {
@@ -1004,7 +1069,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;
       }
     }
   }
@@ -1036,7 +1106,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;
@@ -1096,7 +1166,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)
@@ -1142,22 +1212,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;
         }
@@ -1206,11 +1272,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);
@@ -1219,8 +1286,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)
@@ -1268,9 +1337,8 @@ var Layout = class _Layout {
 };
 // src/canvas/marker.tsx
-import { default as default2 } from "./marker.css?raw";
 import { jsx } from "jsx-dom/jsx-runtime";
-function arrow(size, classPrefix, reverse = false) {
+function arrow(size, reverse = false) {
   const h = size / 1.5;
   const w = size;
   const ry = h / 2;
@@ -1279,7 +1347,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",
@@ -1290,7 +1358,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" : "";
@@ -1298,7 +1366,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",
@@ -1309,7 +1377,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;
@@ -1318,7 +1386,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",
@@ -1329,7 +1397,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" : "";
@@ -1337,7 +1405,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",
@@ -1348,7 +1416,7 @@ function bar(size, classPrefix, reverse = false) {
     }
   );
 }
-function none(size, classPrefix, reverse = false) {
+function none(size, reverse = false) {
   return void 0;
 }
 function normalize(data) {
@@ -1367,7 +1435,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");
@@ -1413,7 +1481,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;
             }
@@ -1428,6 +1500,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)
@@ -1598,6 +1685,7 @@ var Lines = class _Lines {
 };
 // src/graph/graph.ts
+var log9 = logger("graph");
 var emptyChanges = {
   addedNodes: [],
   removedNodes: [],
@@ -1872,29 +1960,8 @@ var screenPos = (x, y) => ({ x, y });
 var canvasPos = (x, y) => ({ x, y });
 var graphPos = (x, y) => ({ x, y });
-// src/canvas/node.tsx
-import styles from "./node.css?raw";
-// src/canvas/styler.ts
-var injected = {};
-function styler(name, 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
 import { jsx as jsx2, jsxs } from "jsx-dom/jsx-runtime";
-var log8 = logger("canvas");
 var Node2 = class {
   selected;
   hovered;
@@ -1902,7 +1969,6 @@ var Node2 = class {
   content;
   canvas;
   data;
-  classPrefix;
   isDummy;
   pos;
   constructor(canvas, data, isDummy = false) {
@@ -1910,20 +1976,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() {
@@ -1932,19 +1996,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;
@@ -1961,7 +2012,6 @@ var Node2 = class {
     return el;
   }
   renderContainer() {
-    const c = styler("node", styles, this.classPrefix);
     const hasPorts = this.hasPorts();
     const inner = this.isDummy ? this.renderDummy() : this.renderForeign();
     const nodeType = this.data?.type;
@@ -1969,14 +2019,8 @@ var Node2 = class {
     this.container = /* @__PURE__ */ jsx2(
       "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
       }
     );
@@ -1986,7 +2030,6 @@ var Node2 = class {
     return /* @__PURE__ */ jsx2("foreignObject", { width: w, height: h, children: this.content });
   }
   renderDummy() {
-    const c = styler("node", styles, this.classPrefix);
     let w = this.canvas.dummyNodeSize;
     let h = this.canvas.dummyNodeSize;
     w /= 2;
@@ -1999,7 +2042,7 @@ var Node2 = class {
           cy: h,
           rx: w,
           ry: h,
-          className: c("background")
+          className: "g3p-node-background"
         }
       ),
       /* @__PURE__ */ jsx2(
@@ -2010,7 +2053,7 @@ var Node2 = class {
           rx: w,
           ry: h,
           fill: "none",
-          className: c("border")
+          className: "g3p-node-border"
         }
       )
     ] });
@@ -2023,7 +2066,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) {
@@ -2061,23 +2104,22 @@ var Node2 = class {
   renderPortRow(dir, inout) {
     const ports = this.data?.ports?.[dir];
     if (!ports?.length) return null;
-    const c = styler("node", styles, this.classPrefix);
     const pos = this.getPortPosition(dir);
     const isVertical = this.isVerticalOrientation();
     const layoutClass = isVertical ? "row" : "col";
     const rotateLabels = false;
     const rotateClass = rotateLabels ? `port-rotated-${pos}` : "";
-    return /* @__PURE__ */ jsx2("div", { className: `${c("ports")} ${c(`ports-${layoutClass}`)}`, children: ports.map((port) => /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx2("div", { className: `g3p-node-ports g3p-node-ports-${layoutClass}`, children: ports.map((port) => /* @__PURE__ */ jsx2(
       "div",
       {
-        id: `g3p-port-${this.data.id}-${port.id}`,
-        className: `${c("port")} ${c(`port-${inout}-${pos}`)} ${c(rotateClass)}`,
+        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", styles, this.classPrefix);
     const isVertical = this.isVerticalOrientation();
     const isReversed = this.isReversedOrientation();
     let inPorts = this.renderPortRow("in", "in");
@@ -2085,14 +2127,13 @@ var Node2 = class {
     if (!inPorts && !outPorts) return el;
     if (isReversed) [inPorts, outPorts] = [outPorts, inPorts];
     const wrapperClass = isVertical ? "v" : "h";
-    return /* @__PURE__ */ jsxs("div", { className: `${c("with-ports")} ${c(`with-ports-${wrapperClass}`)}`, children: [
+    return /* @__PURE__ */ jsxs("div", { className: `g3p-node-with-ports g3p-node-with-ports-${wrapperClass}`, children: [
       inPorts,
       el,
       outPorts
     ] });
   }
   renderOutsidePorts(el) {
-    const c = styler("node", styles, this.classPrefix);
     const isVertical = this.isVerticalOrientation();
     const isReversed = this.isReversedOrientation();
     let inPorts = this.renderPortRow("in", "out");
@@ -2100,71 +2141,59 @@ var Node2 = class {
     if (!inPorts && !outPorts) return el;
     if (isReversed) [inPorts, outPorts] = [outPorts, inPorts];
     const wrapperClass = isVertical ? "v" : "h";
-    return /* @__PURE__ */ jsxs("div", { className: `${c("with-ports")} ${c(`with-ports-${wrapperClass}`)}`, children: [
+    return /* @__PURE__ */ jsxs("div", { className: `g3p-node-with-ports g3p-node-with-ports-${wrapperClass}`, children: [
       inPorts,
       el,
       outPorts
     ] });
   }
   renderBorder(el) {
-    const c = styler("node", styles, this.classPrefix);
-    return /* @__PURE__ */ jsx2("div", { className: c("border"), children: el });
+    return /* @__PURE__ */ jsx2("div", { className: "g3p-node-border", children: el });
   }
 };
 // src/canvas/seg.tsx
-import styles2 from "./seg.css?raw";
 import { jsx as jsx3, jsxs as jsxs2 } from "jsx-dom/jsx-runtime";
-var log9 = logger("canvas");
 var Seg2 = class {
   id;
   selected;
   hovered;
   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", styles2, this.classPrefix);
     let { source, target } = normalize(this);
     if (this.source.isDummy) source = void 0;
     if (this.target.isDummy) target = void 0;
@@ -2174,18 +2203,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__ */ jsx3(
             "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
             }
@@ -2196,7 +2222,7 @@ var Seg2 = class {
               d: this.svg,
               stroke: "transparent",
               fill: "none",
-              className: c("hitbox"),
+              className: "g3p-seg-hitbox",
               style: { cursor: "pointer" }
             }
           )
@@ -2206,46 +2232,561 @@ var Seg2 = class {
   }
 };
-// src/canvas/canvas.tsx
-import styles3 from "./canvas.css?raw";
-import zoomStyles from "./zoom.css?raw";
+// 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
 import { jsx as jsx4, jsxs as jsxs3 } from "jsx-dom/jsx-runtime";
-var log10 = logger("canvas");
-var themeVarMap = {
-  // Canvas
-  bg: "--g3p-bg",
-  shadow: "--g3p-shadow",
-  // Node
-  border: "--g3p-border",
-  borderHover: "--g3p-border-hover",
-  borderSelected: "--g3p-border-selected",
-  text: "--g3p-text",
-  textMuted: "--g3p-text-muted",
-  // Port
-  bgHover: "--g3p-port-bg-hover",
-  // Edge
-  color: "--g3p-edge-color"
+function renderNewEdge({ start, end }) {
+  return /* @__PURE__ */ jsxs3("g", { className: "g3p-new-edge-container", children: [
+    /* @__PURE__ */ jsx4(
+      "circle",
+      {
+        cx: start.x,
+        cy: start.y,
+        r: 4,
+        className: "g3p-new-edge-origin"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "line",
+      {
+        x1: start.x,
+        y1: start.y,
+        x2: end.x,
+        y2: end.y,
+        className: "g3p-new-edge-line"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "circle",
+      {
+        cx: end.x,
+        cy: end.y,
+        r: 3,
+        className: "g3p-new-edge-end"
+      }
+    )
+  ] });
+}
+// src/canvas/modal.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "jsx-dom/jsx-runtime";
+var Modal = class {
+  container;
+  overlay;
+  dialog;
+  onClose;
+  mouseDownOnOverlay = false;
+  constructor(options) {
+    this.onClose = options.onClose;
+    this.overlay = /* @__PURE__ */ jsx5(
+      "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__ */ jsxs4("div", { className: "g3p-modal-dialog", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "g3p-modal-header", children: [
+        /* @__PURE__ */ jsx5("span", { className: "g3p-modal-title", children: options.title }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "g3p-modal-close",
+            onClick: () => this.close(),
+            children: "\xD7"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx5("div", { className: "g3p-modal-body" }),
+      /* @__PURE__ */ jsx5("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__ */ jsxs4("div", { className: "g3p-modal-field", children: [
+        /* @__PURE__ */ jsx5("label", { className: "g3p-modal-label", children: "Type" }),
+        /* @__PURE__ */ jsxs4(
+          "select",
+          {
+            className: "g3p-modal-select",
+            ref: (el) => this.typeSelect = el,
+            children: [
+              /* @__PURE__ */ jsx5("option", { value: "", children: "Default" }),
+              nodeTypes.map((type) => /* @__PURE__ */ jsx5("option", { value: type, children: type }))
+            ]
+          }
+        )
+      ] });
+      this.body.appendChild(typeGroup);
     }
   }
-  css += "}\n";
-  return css;
-}
+  renderField(name, label, type) {
+    if (type === "boolean") {
+      return /* @__PURE__ */ jsx5("div", { className: "g3p-modal-field g3p-modal-field-checkbox", children: /* @__PURE__ */ jsxs4("label", { className: "g3p-modal-label", children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "checkbox",
+            className: "g3p-modal-checkbox",
+            ref: (el) => this.fieldInputs.set(name, el)
+          }
+        ),
+        label
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxs4("div", { className: "g3p-modal-field", children: [
+      /* @__PURE__ */ jsx5("label", { className: "g3p-modal-label", children: label }),
+      /* @__PURE__ */ jsx5(
+        "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__ */ jsxs4("div", { className: "g3p-modal-buttons", children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-secondary",
+            onClick: () => this.close(),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "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__ */ jsxs4("div", { className: "g3p-modal-field", children: [
+        /* @__PURE__ */ jsx5("label", { className: "g3p-modal-label", children: "Type" }),
+        /* @__PURE__ */ jsxs4(
+          "select",
+          {
+            className: "g3p-modal-select",
+            ref: (el) => this.typeSelect = el,
+            children: [
+              /* @__PURE__ */ jsx5("option", { value: "", selected: !currentType, children: "Default" }),
+              nodeTypes.map((type) => /* @__PURE__ */ jsx5("option", { value: type, selected: type === currentType, children: type }))
+            ]
+          }
+        )
+      ] });
+      this.body.appendChild(typeGroup);
+    }
+  }
+  renderField(name, label, type, currentValue) {
+    if (type === "boolean") {
+      return /* @__PURE__ */ jsx5("div", { className: "g3p-modal-field g3p-modal-field-checkbox", children: /* @__PURE__ */ jsxs4("label", { className: "g3p-modal-label", children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "checkbox",
+            className: "g3p-modal-checkbox",
+            checked: !!currentValue,
+            ref: (el) => this.fieldInputs.set(name, el)
+          }
+        ),
+        label
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxs4("div", { className: "g3p-modal-field", children: [
+      /* @__PURE__ */ jsx5("label", { className: "g3p-modal-label", children: label }),
+      /* @__PURE__ */ jsx5(
+        "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__ */ jsxs4("div", { className: "g3p-modal-buttons", children: [
+        this.deleteCallback && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-danger",
+            onClick: () => this.delete(),
+            children: "Delete"
+          }
+        ),
+        /* @__PURE__ */ jsx5("div", { className: "g3p-modal-spacer" }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-secondary",
+            onClick: () => this.close(),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "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__ */ jsxs4("div", { className: "g3p-modal-field", children: [
+      /* @__PURE__ */ jsx5("label", { className: "g3p-modal-label", children: "Source Marker" }),
+      /* @__PURE__ */ jsx5(
+        "select",
+        {
+          className: "g3p-modal-select",
+          ref: (el) => this.sourceMarkerSelect = el,
+          children: _EditEdgeModal.markerTypes.map((type) => /* @__PURE__ */ jsx5("option", { value: type, selected: type === currentSourceMarker, children: type }))
+        }
+      )
+    ] });
+    this.body.appendChild(sourceGroup);
+    const targetGroup = /* @__PURE__ */ jsxs4("div", { className: "g3p-modal-field", children: [
+      /* @__PURE__ */ jsx5("label", { className: "g3p-modal-label", children: "Target Marker" }),
+      /* @__PURE__ */ jsx5(
+        "select",
+        {
+          className: "g3p-modal-select",
+          ref: (el) => this.targetMarkerSelect = el,
+          children: _EditEdgeModal.markerTypes.map((type) => /* @__PURE__ */ jsx5("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__ */ jsxs4("div", { className: "g3p-modal-field", children: [
+        /* @__PURE__ */ jsx5("label", { className: "g3p-modal-label", children: "Type" }),
+        /* @__PURE__ */ jsxs4(
+          "select",
+          {
+            className: "g3p-modal-select",
+            ref: (el) => this.typeSelect = el,
+            children: [
+              /* @__PURE__ */ jsx5("option", { value: "", selected: !currentType, children: "Default" }),
+              edgeTypes.map((type) => /* @__PURE__ */ jsx5("option", { value: type, selected: type === currentType, children: type }))
+            ]
+          }
+        )
+      ] });
+      this.body.appendChild(typeGroup);
+    }
+  }
+  renderFooter() {
+    this.footer.innerHTML = "";
+    this.footer.appendChild(
+      /* @__PURE__ */ jsxs4("div", { className: "g3p-modal-buttons", children: [
+        this.deleteCallback && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-danger",
+            onClick: () => this.delete(),
+            children: "Delete"
+          }
+        ),
+        /* @__PURE__ */ jsx5("div", { className: "g3p-modal-spacer" }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "g3p-modal-btn g3p-modal-btn-secondary",
+            onClick: () => this.close(),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "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
+import styles from "./styles.css?raw";
+import { jsx as jsx6, jsxs as jsxs5 } from "jsx-dom/jsx-runtime";
+var log10 = logger("canvas");
 var Canvas = class {
   container;
   root;
@@ -2258,19 +2799,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();
@@ -2315,7 +2863,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))
@@ -2324,6 +2871,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");
@@ -2345,10 +2893,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);
@@ -2368,25 +2916,89 @@ 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;
-    const x = this.bounds.min.x - p;
+  // ========== 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;
     const h = this.bounds.max.y - this.bounds.min.y + p * 2;
@@ -2394,53 +3006,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 = default2;
-    document.head.appendChild(markerStyleEl);
-    const zoomStyleEl = document.createElement("style");
-    zoomStyleEl.textContent = zoomStyles;
-    document.head.appendChild(zoomStyleEl);
+    if (!document.getElementById("g3p-styles")) {
+      const baseStyleEl = document.createElement("style");
+      baseStyleEl.id = "g3p-styles";
+      baseStyleEl.textContent = styles;
+      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", styles3, this.classPrefix);
     const colorModeClass = this.colorMode !== "system" ? `g3p-${this.colorMode}` : "";
-    this.container = /* @__PURE__ */ jsx4(
+    this.container = /* @__PURE__ */ jsx6(
       "div",
       {
-        className: `${c("container")} ${colorModeClass}`.trim(),
+        className: `g3p-canvas-container ${colorModeClass}`.trim(),
         ref: (el) => this.container = el,
         onContextMenu: this.onContextMenu.bind(this),
-        children: /* @__PURE__ */ jsxs3(
+        children: /* @__PURE__ */ jsxs5(
           "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__ */ jsxs3("defs", { children: [
-                Object.values(markerDefs).map((marker) => marker(this.markerSize, this.classPrefix, false)),
-                Object.values(markerDefs).map((marker) => marker(this.markerSize, this.classPrefix, true))
+              /* @__PURE__ */ jsxs5("defs", { children: [
+                Object.values(markerDefs).map((marker) => marker(this.markerSize, false)),
+                Object.values(markerDefs).map((marker) => marker(this.markerSize, true))
               ] }),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx6(
                 "g",
                 {
                   ref: (el) => this.group = el,
@@ -2459,14 +3070,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.
@@ -2483,15 +3114,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;
@@ -2526,28 +3148,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 = "";
   }
@@ -2557,12 +3218,11 @@ var Canvas = class {
     this.updateZoomLevel();
   }
   createZoomControls() {
-    const c = styler("zoom", zoomStyles, this.classPrefix);
-    this.zoomControls = /* @__PURE__ */ jsxs3("div", { className: c("controls"), children: [
-      /* @__PURE__ */ jsx4("button", { className: c("btn"), onClick: () => this.zoomIn(), children: "+" }),
-      /* @__PURE__ */ jsx4("div", { className: c("level"), id: "g3p-zoom-level", children: "100%" }),
-      /* @__PURE__ */ jsx4("button", { className: c("btn"), onClick: () => this.zoomOut(), children: "\u2212" }),
-      /* @__PURE__ */ jsx4("button", { className: `${c("btn")} ${c("reset")}`, onClick: () => this.zoomReset(), children: "\u27F2" })
+    this.zoomControls = /* @__PURE__ */ jsxs5("div", { className: "g3p-zoom-controls", children: [
+      /* @__PURE__ */ jsx6("button", { className: "g3p-zoom-btn", onClick: () => this.zoomIn(), children: "+" }),
+      /* @__PURE__ */ jsx6("div", { className: "g3p-zoom-level", id: "g3p-zoom-level", children: "100%" }),
+      /* @__PURE__ */ jsx6("button", { className: "g3p-zoom-btn", onClick: () => this.zoomOut(), children: "\u2212" }),
+      /* @__PURE__ */ jsx6("button", { className: "g3p-zoom-btn g3p-zoom-reset", onClick: () => this.zoomReset(), children: "\u27F2" })
     ] });
     this.container.appendChild(this.zoomControls);
   }
@@ -2584,17 +3244,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
-import { jsx as jsx5, jsxs as jsxs4 } from "jsx-dom/jsx-runtime";
-function renderNode(node) {
+import { jsx as jsx7, jsxs as jsxs6 } from "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__ */ jsxs4("div", { className: "g3p-node-default", children: [
-    /* @__PURE__ */ jsx5("div", { className: "g3p-node-title", children: title }),
-    detail && /* @__PURE__ */ jsx5("div", { className: "g3p-node-detail", children: detail })
+  console.log(`renderNode: ${node.id} ${title} ${detail}`);
+  return /* @__PURE__ */ jsxs6("div", { className: "g3p-node-default", children: [
+    /* @__PURE__ */ jsx7("div", { className: "g3p-node-title", children: title }),
+    detail && /* @__PURE__ */ jsx7("div", { className: "g3p-node-detail", children: detail })
   ] });
 }
@@ -2626,7 +3484,6 @@ function defaults() {
     },
     canvas: {
       renderNode,
-      classPrefix: "g3p",
       width: "100%",
       height: "100%",
       padding: 20,
@@ -2663,26 +3520,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;
@@ -2703,22 +3584,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
@@ -2731,13 +3609,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) {
@@ -2759,6 +3687,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;
@@ -2768,36 +3698,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);
@@ -2814,12 +3780,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;
@@ -2829,11 +3799,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])
@@ -2848,7 +3813,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);
@@ -2858,6 +3826,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;
@@ -2866,8 +3849,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 };
@@ -2880,14 +3865,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}`);
@@ -2897,13 +3882,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) {
@@ -2923,7 +3914,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);
@@ -2931,36 +3921,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
+import styles2 from "./styles.css?raw";
+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 = styles2;
+      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
@@ -2971,6 +5077,11 @@ async function graph(args = { root: "app" }) {
 }
 var index_default = graph;
 export {
+  FileSource,
+  FileSystemSource,
+  Ingest,
+  Playground,
+  WebSocketSource,
   index_default as default,
   graph
 };