html-overlay-node 0.1.5 → 0.1.9

package/dist/html-overlay-node.es.js

@@ -153,27 +153,36 @@ class Node {
    * @param {string} [portType="data"] - Port type: "exec" or "data"
    * @returns {Object} The created port
    */
+  /**
+   * Recalculate minimum size based on ports
+   */
+  _updateMinSize() {
+    const HEADER_HEIGHT = 28;
+    const PORT_SPACING = 24;
+    const BOTTOM_PADDING = 10;
+    const inHeight = HEADER_HEIGHT + 10 + this.inputs.length * PORT_SPACING + BOTTOM_PADDING;
+    const outHeight = HEADER_HEIGHT + 10 + this.outputs.length * PORT_SPACING + BOTTOM_PADDING;
+    const minHeight = Math.max(inHeight, outHeight, 60);
+    if (this.size.height < minHeight) {
+      this.size.height = minHeight;
+    }
+  }
   addInput(name, datatype = "any", portType = "data") {
-    if (!name || typeof name !== "string") {
-      throw new Error("Input port name must be a non-empty string");
+    if (typeof name !== "string" || portType === "data" && !name) {
+      throw new Error("Input port name must be a string (non-empty for data ports)");
     }
     const port = { id: randomUUID(), name, datatype, portType, dir: "in" };
     this.inputs.push(port);
+    this._updateMinSize();
     return port;
   }
-  /**
-   * Add an output port to this node
-   * @param {string} name - Port name
-   * @param {string} [datatype="any"] - Data type for the port
-   * @param {string} [portType="data"] - Port type: "exec" or "data"
-   * @returns {Object} The created port
-   */
   addOutput(name, datatype = "any", portType = "data") {
-    if (!name || typeof name !== "string") {
-      throw new Error("Output port name must be a non-empty string");
+    if (typeof name !== "string" || portType === "data" && !name) {
+      throw new Error("Output port name must be a string (non-empty for data ports)");
     }
     const port = { id: randomUUID(), name, datatype, portType, dir: "out" };
     this.outputs.push(port);
+    this._updateMinSize();
     return port;
   }
 }
@@ -188,8 +197,8 @@ class Edge {
    * @param {string} options.toPort - Target port ID
    */
   constructor({ id, fromNode, fromPort, toNode, toPort }) {
-    if (!fromNode || !fromPort || !toNode || !toPort) {
-      throw new Error("Edge requires fromNode, fromPort, toNode, and toPort");
+    if (fromNode == null || fromPort == null || toNode == null || toPort == null) {
+      throw new Error("Edge requires fromNode, fromPort, toNode, and toPort (null/undefined not allowed)");
     }
     this.id = id ?? randomUUID();
     this.fromNode = fromNode;
@@ -518,17 +527,19 @@ class Graph {
   }
 }
 function portRect(node, port, idx, dir) {
-  const { x: nx, y: ny, w: width, h: height } = node.computed || {
+  const {
+    x: nx,
+    y: ny,
+    w: width,
+    h: height
+  } = node.computed || {
     x: node.pos.x,
     y: node.pos.y,
     w: node.size.width,
     h: node.size.height
   };
-  const portCount = dir === "in" ? node.inputs.length : node.outputs.length;
   const headerHeight = 28;
-  const availableHeight = (height || node.size.height) - headerHeight - 16;
-  const spacing = availableHeight / (portCount + 1);
-  const y = ny + headerHeight + spacing * (idx + 1);
+  const y = ny + headerHeight + 10 + idx * 24;
   const portWidth = 12;
   const portHeight = 12;
   if (dir === "in") {
@@ -591,31 +602,37 @@ const _CanvasRenderer = class _CanvasRenderer {
     this.canvas.width = w;
     this.canvas.height = h;
   }
-  setTransform({
-    scale = this.scale,
-    offsetX = this.offsetX,
-    offsetY = this.offsetY
-  } = {}) {
+  setTransform({ scale = this.scale, offsetX = this.offsetX, offsetY = this.offsetY } = {}) {
+    var _a;
     this.scale = Math.min(this.maxScale, Math.max(this.minScale, scale));
     this.offsetX = offsetX;
     this.offsetY = offsetY;
+    (_a = this._onTransformChange) == null ? void 0 : _a.call(this);
+  }
+  /**
+   * Set callback to be called when transform changes (zoom/pan)
+   * @param {Function} callback - Function to call on transform change
+   */
+  setTransformChangeCallback(callback) {
+    this._onTransformChange = callback;
   }
   panBy(dx, dy) {
+    var _a;
     this.offsetX += dx;
     this.offsetY += dy;
+    (_a = this._onTransformChange) == null ? void 0 : _a.call(this);
   }
   zoomAt(factor, cx, cy) {
+    var _a;
     const prev = this.scale;
-    const next = Math.min(
-      this.maxScale,
-      Math.max(this.minScale, prev * factor)
-    );
+    const next = Math.min(this.maxScale, Math.max(this.minScale, prev * factor));
     if (next === prev) return;
     const wx = (cx - this.offsetX) / prev;
     const wy = (cy - this.offsetY) / prev;
     this.offsetX = cx - wx * next;
     this.offsetY = cy - wy * next;
     this.scale = next;
+    (_a = this._onTransformChange) == null ? void 0 : _a.call(this);
   }
   screenToWorld(x, y) {
     return {
@@ -631,7 +648,9 @@ const _CanvasRenderer = class _CanvasRenderer {
   }
   _applyTransform() {
     const { ctx } = this;
-    ctx.setTransform(this.scale, 0, 0, this.scale, this.offsetX, this.offsetY);
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.translate(this.offsetX, this.offsetY);
+    ctx.scale(this.scale, this.scale);
   }
   _resetTransform() {
     this.ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -643,14 +662,8 @@ const _CanvasRenderer = class _CanvasRenderer {
     const ang = Math.atan2(y2 - y1, x2 - x1);
     ctx.beginPath();
     ctx.moveTo(x2, y2);
-    ctx.lineTo(
-      x2 - s * Math.cos(ang - Math.PI / 6),
-      y2 - s * Math.sin(ang - Math.PI / 6)
-    );
-    ctx.lineTo(
-      x2 - s * Math.cos(ang + Math.PI / 6),
-      y2 - s * Math.sin(ang + Math.PI / 6)
-    );
+    ctx.lineTo(x2 - s * Math.cos(ang - Math.PI / 6), y2 - s * Math.sin(ang - Math.PI / 6));
+    ctx.lineTo(x2 - s * Math.cos(ang + Math.PI / 6), y2 - s * Math.sin(ang + Math.PI / 6));
     ctx.closePath();
     ctx.fill();
   }
@@ -710,7 +723,8 @@ const _CanvasRenderer = class _CanvasRenderer {
     time = performance.now(),
     dt = 0,
     groups = null,
-    activeEdges = /* @__PURE__ */ new Set()
+    activeEdges = /* @__PURE__ */ new Set(),
+    drawEdges = true
   } = {}) {
     var _a, _b, _c, _d, _e, _f;
     graph.updateWorldTransforms();
@@ -722,37 +736,39 @@ const _CanvasRenderer = class _CanvasRenderer {
       if (n.type === "core/Group") {
         const sel = selection.has(n.id);
         const def = (_b = (_a = this.registry) == null ? void 0 : _a.types) == null ? void 0 : _b.get(n.type);
-        if (def == null ? void 0 : def.onDraw) def.onDraw(n, { ctx, theme });
+        if (def == null ? void 0 : def.onDraw) def.onDraw(n, { ctx, theme, renderer: this });
         else this._drawNode(n, sel);
       }
     }
-    ctx.lineWidth = 1.5 / this.scale;
-    let dashArray = null;
-    let dashOffset = 0;
-    if (running) {
-      const speed = 120;
-      const phase = time / 1e3 * speed / this.scale % _CanvasRenderer.FONT_SIZE;
-      dashArray = [6 / this.scale, 6 / this.scale];
-      dashOffset = -phase;
-    }
-    for (const e of graph.edges.values()) {
-      const shouldAnimate = activeEdges && activeEdges.size > 0 && activeEdges.has(e.id);
-      if (running && shouldAnimate && dashArray) {
-        ctx.setLineDash(dashArray);
-        ctx.lineDashOffset = dashOffset;
-      } else {
-        ctx.setLineDash([]);
-        ctx.lineDashOffset = 0;
-      }
-      const isActive = activeEdges && activeEdges.has(e.id);
-      if (isActive) {
-        ctx.strokeStyle = "#00ffff";
-        ctx.lineWidth = 3 * this.scale;
-      } else {
-        ctx.strokeStyle = theme.edge;
-        ctx.lineWidth = 1.5 / this.scale;
+    if (drawEdges) {
+      ctx.lineWidth = 1.5 / this.scale;
+      let dashArray = null;
+      let dashOffset = 0;
+      if (running) {
+        const speed = 120;
+        const phase = time / 1e3 * speed / this.scale % _CanvasRenderer.FONT_SIZE;
+        dashArray = [6 / this.scale, 6 / this.scale];
+        dashOffset = -phase;
+      }
+      for (const e of graph.edges.values()) {
+        const shouldAnimate = activeEdges && activeEdges.size > 0 && activeEdges.has(e.id);
+        if (running && shouldAnimate && dashArray) {
+          ctx.setLineDash(dashArray);
+          ctx.lineDashOffset = dashOffset;
+        } else {
+          ctx.setLineDash([]);
+          ctx.lineDashOffset = 0;
+        }
+        const isActive = activeEdges && activeEdges.has(e.id);
+        if (isActive) {
+          ctx.strokeStyle = "#00ffff";
+          ctx.lineWidth = 3 / this.scale;
+        } else {
+          ctx.strokeStyle = theme.edge;
+          ctx.lineWidth = 1.5 / this.scale;
+        }
+        this._drawEdge(graph, e);
       }
-      this._drawEdge(graph, e);
     }
     if (tempEdge) {
       const a = this.screenToWorld(tempEdge.x1, tempEdge.y1);
@@ -762,12 +778,18 @@ const _CanvasRenderer = class _CanvasRenderer {
       let ptsForArrow = null;
       if (this.edgeStyle === "line") {
         this._drawLine(a.x, a.y, b.x, b.y);
-        ptsForArrow = [{ x: a.x, y: a.y }, { x: b.x, y: b.y }];
+        ptsForArrow = [
+          { x: a.x, y: a.y },
+          { x: b.x, y: b.y }
+        ];
       } else if (this.edgeStyle === "orthogonal") {
         ptsForArrow = this._drawOrthogonal(a.x, a.y, b.x, b.y);
       } else {
         this._drawCurve(a.x, a.y, b.x, b.y);
-        ptsForArrow = [{ x: a.x, y: a.y }, { x: b.x, y: b.y }];
+        ptsForArrow = [
+          { x: a.x, y: a.y },
+          { x: b.x, y: b.y }
+        ];
       }
       this.ctx.setLineDash(prevDash);
       if (ptsForArrow && ptsForArrow.length >= 2) {
@@ -783,8 +805,10 @@ const _CanvasRenderer = class _CanvasRenderer {
         const sel = selection.has(n.id);
         const def = (_d = (_c = this.registry) == null ? void 0 : _c.types) == null ? void 0 : _d.get(n.type);
         const hasHtmlOverlay = !!(def == null ? void 0 : def.html);
-        this._drawNode(n, sel, hasHtmlOverlay);
-        if (def == null ? void 0 : def.onDraw) def.onDraw(n, { ctx, theme });
+        if (!hasHtmlOverlay) {
+          this._drawNode(n, sel, true);
+          if (def == null ? void 0 : def.onDraw) def.onDraw(n, { ctx, theme, renderer: this });
+        }
       }
     }
     for (const n of graph.nodes.values()) {
@@ -951,7 +975,7 @@ const _CanvasRenderer = class _CanvasRenderer {
     const iIn = to.inputs.findIndex((p) => p.id === e.toPort);
     const pr1 = portRect(from, null, iOut, "out");
     const pr2 = portRect(to, null, iIn, "in");
-    const x1 = pr1.x, y1 = pr1.y + 7, x2 = pr2.x, y2 = pr2.y + 7;
+    const x1 = pr1.x + pr1.w / 2, y1 = pr1.y + pr1.h / 2, x2 = pr2.x + pr2.w / 2, y2 = pr2.y + pr2.h / 2;
     if (this.edgeStyle === "line") {
       this._drawLine(x1, y1, x2, y2);
     } else if (this.edgeStyle === "orthogonal") {
@@ -971,8 +995,7 @@ const _CanvasRenderer = class _CanvasRenderer {
     const { ctx } = this;
     ctx.beginPath();
     ctx.moveTo(points[0].x, points[0].y);
-    for (let i = 1; i < points.length; i++)
-      ctx.lineTo(points[i].x, points[i].y);
+    for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
     ctx.stroke();
   }
   _drawOrthogonal(x1, y1, x2, y2) {
@@ -1003,6 +1026,72 @@ const _CanvasRenderer = class _CanvasRenderer {
     ctx.bezierCurveTo(x1 + dx, y1, x2 - dx, y2, x2, y2);
     ctx.stroke();
   }
+  /**
+   * Draw only edges on a separate canvas (for layering above HTML overlay)
+   * @param {Graph} graph - The graph
+   * @param {Object} options - Rendering options
+   */
+  drawEdgesOnly(graph, { activeEdges = /* @__PURE__ */ new Set(), running = false, time = performance.now(), tempEdge = null } = {}) {
+    this._resetTransform();
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this._applyTransform();
+    const { ctx, theme } = this;
+    let dashArray = null;
+    let dashOffset = 0;
+    if (running || activeEdges.size > 0) {
+      const speed = 120;
+      const phase = time / 1e3 * speed / this.scale % 12;
+      dashArray = [6 / this.scale, 6 / this.scale];
+      dashOffset = -phase;
+    }
+    ctx.lineWidth = 1.5 / this.scale;
+    ctx.strokeStyle = theme.edge;
+    for (const e of graph.edges.values()) {
+      const isActive = activeEdges && activeEdges.has(e.id);
+      if (isActive && dashArray) {
+        ctx.setLineDash(dashArray);
+        ctx.lineDashOffset = dashOffset;
+        ctx.strokeStyle = "#00ffff";
+        ctx.lineWidth = 3 / this.scale;
+      } else {
+        ctx.setLineDash([]);
+        ctx.strokeStyle = theme.edge;
+        ctx.lineWidth = 1.5 / this.scale;
+      }
+      this._drawEdge(graph, e);
+    }
+    if (tempEdge) {
+      const a = this.screenToWorld(tempEdge.x1, tempEdge.y1);
+      const b = this.screenToWorld(tempEdge.x2, tempEdge.y2);
+      const prevDash = this.ctx.getLineDash();
+      this.ctx.setLineDash([6 / this.scale, 6 / this.scale]);
+      let ptsForArrow = null;
+      if (this.edgeStyle === "line") {
+        this._drawLine(a.x, a.y, b.x, b.y);
+        ptsForArrow = [
+          { x: a.x, y: a.y },
+          { x: b.x, y: b.y }
+        ];
+      } else if (this.edgeStyle === "orthogonal") {
+        ptsForArrow = this._drawOrthogonal(a.x, a.y, b.x, b.y);
+      } else {
+        this._drawCurve(a.x, a.y, b.x, b.y);
+        ptsForArrow = [
+          { x: a.x, y: a.y },
+          { x: b.x, y: b.y }
+        ];
+      }
+      this.ctx.setLineDash(prevDash);
+      if (ptsForArrow && ptsForArrow.length >= 2) {
+        const p1 = ptsForArrow[ptsForArrow.length - 2];
+        const p2 = ptsForArrow[ptsForArrow.length - 1];
+        this.ctx.fillStyle = this.theme.edge;
+        this.ctx.strokeStyle = this.theme.edge;
+        this._drawArrowhead(p1.x, p1.y, p2.x, p2.y, 12);
+      }
+    }
+    this._resetTransform();
+  }
 };
 __publicField(_CanvasRenderer, "FONT_SIZE", 12);
 __publicField(_CanvasRenderer, "SELECTED_NODE_COLOR", "#6cf");
@@ -1126,12 +1215,13 @@ class CommandStack {
   }
 }
 const _Controller = class _Controller {
-  constructor({ graph, renderer, hooks, htmlOverlay, contextMenu, portRenderer }) {
+  constructor({ graph, renderer, hooks, htmlOverlay, contextMenu, edgeRenderer, portRenderer }) {
     this.graph = graph;
     this.renderer = renderer;
     this.hooks = hooks;
     this.htmlOverlay = htmlOverlay;
     this.contextMenu = contextMenu;
+    this.edgeRenderer = edgeRenderer;
     this.portRenderer = portRenderer;
     this.stack = new CommandStack();
     this.selection = /* @__PURE__ */ new Set();
@@ -1282,13 +1372,11 @@ const _Controller = class _Controller {
     for (const n of this.graph.nodes.values()) {
       for (let i = 0; i < n.inputs.length; i++) {
         const r = portRect(n, n.inputs[i], i, "in");
-        if (rectHas(r, x, y))
-          return { node: n, port: n.inputs[i], dir: "in", idx: i };
+        if (rectHas(r, x, y)) return { node: n, port: n.inputs[i], dir: "in", idx: i };
       }
       for (let i = 0; i < n.outputs.length; i++) {
         const r = portRect(n, n.outputs[i], i, "out");
-        if (rectHas(r, x, y))
-          return { node: n, port: n.outputs[i], dir: "out", idx: i };
+        if (rectHas(r, x, y)) return { node: n, port: n.outputs[i], dir: "out", idx: i };
       }
     }
     return null;
@@ -1537,13 +1625,7 @@ const _Controller = class _Controller {
       const portIn = this._findPortAtWorld(w.x, w.y);
       if (portIn && portIn.dir === "in") {
         this.stack.exec(
-          AddEdgeCmd(
-            this.graph,
-            from.fromNode,
-            from.fromPort,
-            portIn.node.id,
-            portIn.port.id
-          )
+          AddEdgeCmd(this.graph, from.fromNode, from.fromPort, portIn.node.id, portIn.port.id)
         );
       }
       this.connecting = null;
@@ -1711,16 +1793,31 @@ const _Controller = class _Controller {
     this.render();
   }
   render() {
-    var _a, _b, _c;
+    var _a;
     const tEdge = this.renderTempEdge();
     this.renderer.draw(this.graph, {
       selection: this.selection,
-      tempEdge: tEdge,
+      tempEdge: null,
+      // Don't draw temp edge on background
       boxSelecting: this.boxSelecting,
-      activeEdges: this.activeEdges || /* @__PURE__ */ new Set()
-      // For animation
+      activeEdges: this.activeEdges || /* @__PURE__ */ new Set(),
+      drawEdges: !this.edgeRenderer
+      // Only draw edges here if no separate edge renderer
     });
     (_a = this.htmlOverlay) == null ? void 0 : _a.draw(this.graph, this.selection);
+    if (this.edgeRenderer) {
+      const edgeCtx = this.edgeRenderer.ctx;
+      edgeCtx.clearRect(0, 0, this.edgeRenderer.canvas.width, this.edgeRenderer.canvas.height);
+      this.edgeRenderer._applyTransform();
+      this.edgeRenderer.drawEdgesOnly(this.graph, {
+        activeEdges: this.activeEdges || /* @__PURE__ */ new Set(),
+        running: false,
+        time: performance.now(),
+        tempEdge: tEdge
+        // Draw temp edge on edge layer
+      });
+      this.edgeRenderer._resetTransform();
+    }
     if (this.boxSelecting) {
       const { startX, startY, currentX, currentY } = this.boxSelecting;
       const minX = Math.min(startX, currentX);
@@ -1729,14 +1826,28 @@ const _Controller = class _Controller {
       const height = Math.abs(currentY - startY);
       const screenStart = this.renderer.worldToScreen(minX, minY);
       const screenEnd = this.renderer.worldToScreen(minX + width, minY + height);
-      const ctx = this.renderer.ctx;
+      const ctx = this.edgeRenderer ? this.edgeRenderer.ctx : this.renderer.ctx;
       ctx.save();
-      this.renderer._resetTransform();
+      if (this.edgeRenderer) {
+        this.edgeRenderer._resetTransform();
+      } else {
+        this.renderer._resetTransform();
+      }
       ctx.strokeStyle = "#6cf";
       ctx.fillStyle = "rgba(102, 204, 255, 0.1)";
       ctx.lineWidth = 2;
-      ctx.strokeRect(screenStart.x, screenStart.y, screenEnd.x - screenStart.x, screenEnd.y - screenStart.y);
-      ctx.fillRect(screenStart.x, screenStart.y, screenEnd.x - screenStart.x, screenEnd.y - screenStart.y);
+      ctx.strokeRect(
+        screenStart.x,
+        screenStart.y,
+        screenEnd.x - screenStart.x,
+        screenEnd.y - screenStart.y
+      );
+      ctx.fillRect(
+        screenStart.x,
+        screenStart.y,
+        screenEnd.x - screenStart.x,
+        screenEnd.y - screenStart.y
+      );
       ctx.restore();
     }
     if (this.portRenderer) {
@@ -1748,11 +1859,7 @@ const _Controller = class _Controller {
       this.portRenderer._applyTransform();
       for (const n of this.graph.nodes.values()) {
         if (n.type !== "core/Group") {
-          const def = (_c = (_b = this.portRenderer.registry) == null ? void 0 : _b.types) == null ? void 0 : _c.get(n.type);
-          const hasHtmlOverlay = !!(def == null ? void 0 : def.html);
-          if (hasHtmlOverlay) {
-            this.portRenderer._drawPorts(n);
-          }
+          this.portRenderer._drawPorts(n);
         }
       }
       this.portRenderer._resetTransform();
@@ -1760,10 +1867,7 @@ const _Controller = class _Controller {
   }
   renderTempEdge() {
     if (!this.connecting) return null;
-    const a = this._portAnchorScreen(
-      this.connecting.fromNode,
-      this.connecting.fromPort
-    );
+    const a = this._portAnchorScreen(this.connecting.fromNode, this.connecting.fromPort);
     return {
       x1: a.x,
       y1: a.y,
@@ -1775,7 +1879,7 @@ const _Controller = class _Controller {
     const n = this.graph.nodes.get(nodeId);
     const iOut = n.outputs.findIndex((p) => p.id === portId);
     const r = portRect(n, null, iOut, "out");
-    return this.renderer.worldToScreen(r.x, r.y + 7);
+    return this.renderer.worldToScreen(r.x + r.w / 2, r.y + r.h / 2);
   }
 };
 __publicField(_Controller, "MIN_NODE_WIDTH", 80);
@@ -1964,7 +2068,8 @@ class ContextMenu {
           itemEl._hideTimeout = null;
         }
         if (item.submenu) {
-          this._showSubmenu(item.submenu, itemEl);
+          const submenuItems = typeof item.submenu === "function" ? item.submenu() : item.submenu;
+          this._showSubmenu(submenuItems, itemEl);
         }
       });
       itemEl.addEventListener("mouseleave", (e) => {
@@ -2142,6 +2247,7 @@ class Runner {
   }
   /**
    * Execute connected nodes once from a starting node
+   * Uses queue-based traversal to support branching exec flows
    * @param {string} startNodeId - ID of the node to start from
    * @param {number} dt - Delta time
    */
@@ -2149,12 +2255,16 @@ class Runner {
     console.log("[Runner.runOnce] Starting exec flow from node:", startNodeId);
     const executedNodes = [];
     const allConnectedNodes = /* @__PURE__ */ new Set();
-    let currentNodeId = startNodeId;
-    while (currentNodeId) {
+    const queue = [startNodeId];
+    const visited = /* @__PURE__ */ new Set();
+    while (queue.length > 0) {
+      const currentNodeId = queue.shift();
+      if (visited.has(currentNodeId)) continue;
+      visited.add(currentNodeId);
       const node = this.graph.nodes.get(currentNodeId);
       if (!node) {
         console.warn(`[Runner.runOnce] Node not found: ${currentNodeId}`);
-        break;
+        continue;
       }
       executedNodes.push(currentNodeId);
       allConnectedNodes.add(currentNodeId);
@@ -2173,7 +2283,8 @@ class Runner {
         }
       }
       this.executeNode(currentNodeId, dt);
-      currentNodeId = this.findNextExecNode(currentNodeId);
+      const nextNodes = this.findAllNextExecNodes(currentNodeId);
+      queue.push(...nextNodes);
     }
     console.log("[Runner.runOnce] Executed nodes:", executedNodes.length);
     const connectedEdges = /* @__PURE__ */ new Set();
@@ -2186,21 +2297,25 @@ class Runner {
     return { connectedNodes: allConnectedNodes, connectedEdges };
   }
   /**
-   * Find the next node to execute by following exec output
+   * Find all nodes connected via exec outputs
+   * Supports multiple connections from a single exec output
    * @param {string} nodeId - Current node ID
-   * @returns {string|null} Next node ID or null
+   * @returns {string[]} Array of next node IDs
    */
-  findNextExecNode(nodeId) {
+  findAllNextExecNodes(nodeId) {
     const node = this.graph.nodes.get(nodeId);
-    if (!node) return null;
-    const execOutput = node.outputs.find((p) => p.portType === "exec");
-    if (!execOutput) return null;
-    for (const edge of this.graph.edges.values()) {
-      if (edge.fromNode === nodeId && edge.fromPort === execOutput.id) {
-        return edge.toNode;
+    if (!node) return [];
+    const execOutputs = node.outputs.filter((p) => p.portType === "exec");
+    if (execOutputs.length === 0) return [];
+    const nextNodes = [];
+    for (const execOutput of execOutputs) {
+      for (const edge of this.graph.edges.values()) {
+        if (edge.fromNode === nodeId && edge.fromPort === execOutput.id) {
+          nextNodes.push(edge.toNode);
+        }
       }
     }
-    return null;
+    return nextNodes;
   }
   /**
    * Execute a single node
@@ -2331,7 +2446,7 @@ class HtmlOverlay {
     return container;
   }
   /** 노드용 엘리먼트 생성(한 번만) */
-  _ensureNodeElement(node, def) {
+  _ensureNodeElement(node, def, graph) {
     var _a;
     let el = this.nodes.get(node.id);
     if (!el) {
@@ -2340,7 +2455,7 @@ class HtmlOverlay {
       } else if (def.html) {
         el = this._createDefaultNodeLayout(node);
         if (def.html.init) {
-          def.html.init(node, el, el._domParts);
+          def.html.init(node, el, { ...el._domParts, graph });
         }
       } else {
         return null;
@@ -2363,7 +2478,7 @@ class HtmlOverlay {
       const def = this.registry.types.get(node.type);
       const hasHtml = !!(def == null ? void 0 : def.html);
       if (!hasHtml) continue;
-      const el = this._ensureNodeElement(node, def);
+      const el = this._ensureNodeElement(node, def, graph);
       if (!el) continue;
       el.style.left = `${node.computed.x}px`;
       el.style.top = `${node.computed.y}px`;
@@ -2386,6 +2501,15 @@ class HtmlOverlay {
       }
     }
   }
+  /**
+   * Sync container transform with renderer state (lightweight update)
+   * Called when zoom/pan occurs without needing full redraw
+   */
+  syncTransform() {
+    const { scale, offsetX, offsetY } = this.renderer;
+    this.container.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+    this.container.style.transformOrigin = "0 0";
+  }
   clear() {
     for (const [, el] of this.nodes) {
       el.remove();
@@ -2725,14 +2849,87 @@ class PropertyPanel {
     }
   }
 }
+function setupDefaultContextMenu(contextMenu, { controller, graph, hooks }) {
+  const getNodeTypes = () => {
+    const nodeTypes = [];
+    for (const [key, typeDef] of graph.registry.types.entries()) {
+      nodeTypes.push({
+        id: `add-${key}`,
+        label: typeDef.title || key,
+        action: () => {
+          const worldPos = contextMenu.worldPosition || { x: 100, y: 100 };
+          const node = graph.addNode(key, {
+            x: worldPos.x,
+            y: worldPos.y
+          });
+          hooks == null ? void 0 : hooks.emit("node:updated", node);
+          controller.render();
+        }
+      });
+    }
+    return nodeTypes;
+  };
+  contextMenu.addItem("add-node", "Add Node", {
+    condition: (target) => !target,
+    submenu: getNodeTypes,
+    // Pass function instead of array
+    order: 5
+  });
+  contextMenu.addItem("delete-node", "Delete Node", {
+    condition: (target) => target && target.type !== "core/Group",
+    action: (target) => {
+      const cmd = RemoveNodeCmd(graph, target);
+      controller.stack.exec(cmd);
+      hooks == null ? void 0 : hooks.emit("node:updated", target);
+    },
+    order: 10
+  });
+  const colors = [
+    { name: "Default", color: "#39424e" },
+    { name: "Slate", color: "#4a5568" },
+    { name: "Gray", color: "#2d3748" },
+    { name: "Blue", color: "#1a365d" },
+    { name: "Green", color: "#22543d" },
+    { name: "Red", color: "#742a2a" },
+    { name: "Purple", color: "#44337a" }
+  ];
+  contextMenu.addItem("change-group-color", "Change Color", {
+    condition: (target) => target && target.type === "core/Group",
+    submenu: colors.map((colorInfo) => ({
+      id: `color-${colorInfo.color}`,
+      label: colorInfo.name,
+      color: colorInfo.color,
+      action: (target) => {
+        const currentColor = target.state.color || "#39424e";
+        const cmd = ChangeGroupColorCmd(target, currentColor, colorInfo.color);
+        controller.stack.exec(cmd);
+        hooks == null ? void 0 : hooks.emit("node:updated", target);
+      }
+    })),
+    order: 20
+  });
+  contextMenu.addItem("delete-group", "Delete Group", {
+    condition: (target) => target && target.type === "core/Group",
+    action: (target) => {
+      const cmd = RemoveNodeCmd(graph, target);
+      controller.stack.exec(cmd);
+      hooks == null ? void 0 : hooks.emit("node:updated", target);
+    },
+    order: 20
+  });
+}
 function createGraphEditor(target, {
   theme,
   hooks: customHooks,
   autorun = true,
   showMinimap = true,
   enablePropertyPanel = true,
-  propertyPanelContainer = null
+  propertyPanelContainer = null,
+  setupDefaultContextMenu: setupDefaultContextMenu$1 = true,
+  setupContextMenu = null,
+  plugins = []
 } = {}) {
+  var _a;
   let canvas;
   let container;
   if (typeof target === "string") {
@@ -2780,6 +2977,46 @@ function createGraphEditor(target, {
   const graph = new Graph({ hooks, registry });
   const renderer = new CanvasRenderer(canvas, { theme, registry });
   const htmlOverlay = new HtmlOverlay(canvas.parentElement, renderer, registry);
+  renderer.setTransformChangeCallback(() => {
+    htmlOverlay.syncTransform();
+  });
+  const edgeCanvas = document.createElement("canvas");
+  edgeCanvas.id = "edge-canvas";
+  Object.assign(edgeCanvas.style, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    pointerEvents: "none",
+    // Pass through clicks
+    zIndex: "15"
+    // Above HTML overlay (10), below port canvas (20)
+  });
+  canvas.parentElement.appendChild(edgeCanvas);
+  const edgeRenderer = new CanvasRenderer(edgeCanvas, { theme, registry });
+  Object.defineProperty(edgeRenderer, "scale", {
+    get() {
+      return renderer.scale;
+    },
+    set(v) {
+      renderer.scale = v;
+    }
+  });
+  Object.defineProperty(edgeRenderer, "offsetX", {
+    get() {
+      return renderer.offsetX;
+    },
+    set(v) {
+      renderer.offsetX = v;
+    }
+  });
+  Object.defineProperty(edgeRenderer, "offsetY", {
+    get() {
+      return renderer.offsetY;
+    },
+    set(v) {
+      renderer.offsetY = v;
+    }
+  });
   const portCanvas = document.createElement("canvas");
   portCanvas.id = "port-canvas";
   Object.assign(portCanvas.style, {
@@ -2789,7 +3026,7 @@ function createGraphEditor(target, {
     pointerEvents: "none",
     // Pass through clicks
     zIndex: "20"
-    // Above HTML overlay (z-index 10)
+    // Above edge canvas (15)
   });
   canvas.parentElement.appendChild(portCanvas);
   const portRenderer = new CanvasRenderer(portCanvas, { theme, registry });
@@ -2797,7 +3034,7 @@ function createGraphEditor(target, {
   portRenderer.scale = renderer.scale;
   portRenderer.offsetX = renderer.offsetX;
   portRenderer.offsetY = renderer.offsetY;
-  const controller = new Controller({ graph, renderer, hooks, htmlOverlay, portRenderer });
+  const controller = new Controller({ graph, renderer, hooks, htmlOverlay, edgeRenderer, portRenderer });
   const contextMenu = new ContextMenu({
     graph,
     hooks,
@@ -2822,6 +3059,8 @@ function createGraphEditor(target, {
     });
   }
   const runner = new Runner({ graph, registry, hooks });
+  graph.runner = runner;
+  graph.controller = controller;
   hooks.on("runner:tick", ({ time, dt }) => {
     renderer.draw(graph, {
       selection: controller.selection,
@@ -2856,695 +3095,33 @@ function createGraphEditor(target, {
   hooks.on("node:updated", () => {
     controller.render();
   });
-  registry.register("core/Note", {
-    title: "Note",
-    size: { w: 180, h: 80 },
-    inputs: [{ name: "in", datatype: "any" }],
-    outputs: [{ name: "out", datatype: "any" }],
-    onCreate(node) {
-      node.state.text = "hello";
-    },
-    onExecute(node, { dt, getInput, setOutput }) {
-      const incoming = getInput("in");
-      const out = (incoming ?? node.state.text ?? "").toString().toUpperCase();
-      setOutput(
-        "out",
-        out + ` · ${Math.floor(performance.now() / 1e3 % 100)}`
-      );
-    },
-    onDraw(node, { ctx, theme: theme2 }) {
-      const { x, y } = node.pos;
-      const { width: w } = node.size;
-    }
-  });
-  registry.register("core/HtmlNote", {
-    title: "HTML Note",
-    size: { w: 200, h: 150 },
-    inputs: [{ name: "in", datatype: "any" }],
-    outputs: [{ name: "out", datatype: "any" }],
-    // HTML Overlay Configuration
-    html: {
-      // 초기화: 헤더/바디 구성
-      init(node, el, { header, body }) {
-        el.style.backgroundColor = "#222";
-        el.style.borderRadius = "8px";
-        el.style.border = "1px solid #444";
-        el.style.boxShadow = "0 4px 12px rgba(0,0,0,0.3)";
-        header.style.backgroundColor = "#333";
-        header.style.borderBottom = "1px solid #444";
-        header.style.color = "#eee";
-        header.style.fontSize = "12px";
-        header.style.fontWeight = "bold";
-        header.textContent = "My HTML Node";
-        body.style.padding = "8px";
-        body.style.color = "#ccc";
-        body.style.fontSize = "12px";
-        const contentDiv = document.createElement("div");
-        contentDiv.textContent = "Event Name";
-        body.appendChild(contentDiv);
-        const input = document.createElement("input");
-        Object.assign(input.style, {
-          marginTop: "4px",
-          padding: "4px",
-          background: "#111",
-          border: "1px solid #555",
-          color: "#fff",
-          borderRadius: "4px",
-          pointerEvents: "auto"
-        });
-        input.placeholder = "Type here...";
-        input.addEventListener("input", (e) => {
-          node.state.text = e.target.value;
-        });
-        input.addEventListener("mousedown", (e) => e.stopPropagation());
-        body.appendChild(input);
-        el._input = input;
-      },
-      // 매 프레임(또는 필요시) 업데이트
-      update(node, el, { header, _body, selected }) {
-        el.style.borderColor = selected ? "#6cf" : "#444";
-        header.style.backgroundColor = selected ? "#3a4a5a" : "#333";
-        if (el._input.value !== (node.state.text || "")) {
-          el._input.value = node.state.text || "";
+  if (setupDefaultContextMenu$1) {
+    setupDefaultContextMenu(contextMenu, { controller, graph, hooks });
+  }
+  if (setupContextMenu) {
+    setupContextMenu(contextMenu, { controller, graph, hooks });
+  }
+  if (plugins && plugins.length > 0) {
+    for (const plugin of plugins) {
+      if (typeof plugin.install === "function") {
+        try {
+          plugin.install({ graph, registry, hooks, runner, controller, contextMenu }, plugin.options || {});
+        } catch (err) {
+          console.error(`[createGraphEditor] Failed to install plugin "${plugin.name || "unknown"}":`, err);
+          (_a = hooks == null ? void 0 : hooks.emit) == null ? void 0 : _a.call(hooks, "error", err);
         }
+      } else {
+        console.warn(`[createGraphEditor] Plugin "${plugin.name || "unknown"}" does not have an install() method`);
       }
-    },
-    onCreate(node) {
-      node.state.text = "";
-    },
-    onExecute(node, { getInput, setOutput }) {
-      const incoming = getInput("in");
-      setOutput("out", incoming);
-    }
-    // onDraw는 생략 가능 (HTML이 덮으니까)
-    // 하지만 포트 등은 그려야 할 수도 있음. 
-    // 현재 구조상 CanvasRenderer가 기본 노드를 그리므로, 
-    // 투명하게 하거나 겹쳐서 그릴 수 있음.
-  });
-  registry.register("core/TodoNode", {
-    title: "Todo List",
-    size: { w: 240, h: 300 },
-    inputs: [{ name: "in", datatype: "any" }],
-    outputs: [{ name: "out", datatype: "any" }],
-    html: {
-      init(node, el, { header, body }) {
-        el.style.backgroundColor = "#1e1e24";
-        el.style.borderRadius = "8px";
-        el.style.boxShadow = "0 4px 12px rgba(0,0,0,0.5)";
-        el.style.border = "1px solid #333";
-        header.style.backgroundColor = "#2a2a31";
-        header.style.padding = "8px";
-        header.style.fontWeight = "bold";
-        header.style.color = "#e9e9ef";
-        header.textContent = node.title;
-        body.style.display = "flex";
-        body.style.flexDirection = "column";
-        body.style.padding = "8px";
-        body.style.color = "#e9e9ef";
-        const inputRow = document.createElement("div");
-        Object.assign(inputRow.style, { display: "flex", gap: "4px", marginBottom: "8px" });
-        const input = document.createElement("input");
-        Object.assign(input.style, {
-          flex: "1",
-          padding: "6px",
-          borderRadius: "4px",
-          border: "1px solid #444",
-          background: "#141417",
-          color: "#fff",
-          pointerEvents: "auto"
-        });
-        input.placeholder = "Add task...";
-        const addBtn = document.createElement("button");
-        addBtn.textContent = "+";
-        Object.assign(addBtn.style, {
-          padding: "0 12px",
-          cursor: "pointer",
-          background: "#4f5b66",
-          color: "#fff",
-          border: "none",
-          borderRadius: "4px",
-          pointerEvents: "auto"
-        });
-        inputRow.append(input, addBtn);
-        const list = document.createElement("ul");
-        Object.assign(list.style, {
-          listStyle: "none",
-          padding: "0",
-          margin: "0",
-          overflow: "hidden",
-          flex: "1"
-        });
-        body.append(inputRow, list);
-        const addTodo = () => {
-          const text = input.value.trim();
-          if (!text) return;
-          const todos = node.state.todos || [];
-          node.state.todos = [...todos, { id: Date.now(), text, done: false }];
-          input.value = "";
-          hooks.emit("node:updated", node);
-        };
-        addBtn.onclick = addTodo;
-        input.onkeydown = (e) => {
-          if (e.key === "Enter") addTodo();
-          e.stopPropagation();
-        };
-        input.onmousedown = (e) => e.stopPropagation();
-        el._refs = { list };
-      },
-      update(node, el, { selected }) {
-        el.style.borderColor = selected ? "#6cf" : "#333";
-        const { list } = el._refs;
-        const todos = node.state.todos || [];
-        list.innerHTML = "";
-        todos.forEach((todo) => {
-          const li = document.createElement("li");
-          Object.assign(li.style, {
-            display: "flex",
-            alignItems: "center",
-            padding: "6px 0",
-            borderBottom: "1px solid #2a2a31"
-          });
-          const chk = document.createElement("input");
-          chk.type = "checkbox";
-          chk.checked = todo.done;
-          chk.style.marginRight = "8px";
-          chk.style.pointerEvents = "auto";
-          chk.onchange = () => {
-            todo.done = chk.checked;
-            hooks.emit("node:updated", node);
-          };
-          chk.onmousedown = (e) => e.stopPropagation();
-          const span = document.createElement("span");
-          span.textContent = todo.text;
-          span.style.flex = "1";
-          span.style.textDecoration = todo.done ? "line-through" : "none";
-          span.style.color = todo.done ? "#777" : "#eee";
-          const del = document.createElement("button");
-          del.textContent = "×";
-          Object.assign(del.style, {
-            background: "none",
-            border: "none",
-            color: "#f44",
-            cursor: "pointer",
-            fontSize: "16px",
-            pointerEvents: "auto"
-          });
-          del.onclick = () => {
-            node.state.todos = node.state.todos.filter((t) => t.id !== todo.id);
-            hooks.emit("node:updated", node);
-          };
-          del.onmousedown = (e) => e.stopPropagation();
-          li.append(chk, span, del);
-          list.appendChild(li);
-        });
-      }
-    },
-    onCreate(node) {
-      node.state.todos = [
-        { id: 1, text: "Welcome to Free Node", done: false },
-        { id: 2, text: "Try adding a task", done: true }
-      ];
-    }
-  });
-  registry.register("math/Add", {
-    title: "Add",
-    size: { w: 140, h: 100 },
-    inputs: [
-      { name: "exec", portType: "exec" },
-      { name: "a", portType: "data", datatype: "number" },
-      { name: "b", portType: "data", datatype: "number" }
-    ],
-    outputs: [
-      { name: "exec", portType: "exec" },
-      { name: "result", portType: "data", datatype: "number" }
-    ],
-    onCreate(node) {
-      node.state.a = 0;
-      node.state.b = 0;
-    },
-    onExecute(node, { getInput, setOutput }) {
-      const a = getInput("a") ?? 0;
-      const b = getInput("b") ?? 0;
-      const result = a + b;
-      console.log("[Add] a:", a, "b:", b, "result:", result);
-      setOutput("result", result);
-    }
-  });
-  registry.register("math/Subtract", {
-    title: "Subtract",
-    size: { w: 140, h: 80 },
-    inputs: [
-      { name: "a", datatype: "number" },
-      { name: "b", datatype: "number" }
-    ],
-    outputs: [{ name: "result", datatype: "number" }],
-    onExecute(node, { getInput, setOutput }) {
-      const a = getInput("a") ?? 0;
-      const b = getInput("b") ?? 0;
-      setOutput("result", a - b);
-    }
-  });
-  registry.register("math/Multiply", {
-    title: "Multiply",
-    size: { w: 140, h: 100 },
-    inputs: [
-      { name: "exec", portType: "exec" },
-      { name: "a", portType: "data", datatype: "number" },
-      { name: "b", portType: "data", datatype: "number" }
-    ],
-    outputs: [
-      { name: "exec", portType: "exec" },
-      { name: "result", portType: "data", datatype: "number" }
-    ],
-    onExecute(node, { getInput, setOutput }) {
-      const a = getInput("a") ?? 0;
-      const b = getInput("b") ?? 0;
-      const result = a * b;
-      console.log("[Multiply] a:", a, "b:", b, "result:", result);
-      setOutput("result", result);
-    }
-  });
-  registry.register("math/Divide", {
-    title: "Divide",
-    size: { w: 140, h: 80 },
-    inputs: [
-      { name: "a", datatype: "number" },
-      { name: "b", datatype: "number" }
-    ],
-    outputs: [{ name: "result", datatype: "number" }],
-    onExecute(node, { getInput, setOutput }) {
-      const a = getInput("a") ?? 0;
-      const b = getInput("b") ?? 1;
-      setOutput("result", b !== 0 ? a / b : 0);
-    }
-  });
-  registry.register("logic/AND", {
-    title: "AND",
-    size: { w: 120, h: 100 },
-    inputs: [
-      { name: "exec", portType: "exec" },
-      { name: "a", portType: "data", datatype: "boolean" },
-      { name: "b", portType: "data", datatype: "boolean" }
-    ],
-    outputs: [
-      { name: "exec", portType: "exec" },
-      { name: "result", portType: "data", datatype: "boolean" }
-    ],
-    onExecute(node, { getInput, setOutput }) {
-      const a = getInput("a") ?? false;
-      const b = getInput("b") ?? false;
-      console.log("[AND] Inputs - a:", a, "b:", b);
-      const result = a && b;
-      console.log("[AND] Result:", result);
-      setOutput("result", result);
-    }
-  });
-  registry.register("logic/OR", {
-    title: "OR",
-    size: { w: 120, h: 80 },
-    inputs: [
-      { name: "a", datatype: "boolean" },
-      { name: "b", datatype: "boolean" }
-    ],
-    outputs: [{ name: "result", datatype: "boolean" }],
-    onExecute(node, { getInput, setOutput }) {
-      const a = getInput("a") ?? false;
-      const b = getInput("b") ?? false;
-      setOutput("result", a || b);
-    }
-  });
-  registry.register("logic/NOT", {
-    title: "NOT",
-    size: { w: 120, h: 70 },
-    inputs: [{ name: "in", datatype: "boolean" }],
-    outputs: [{ name: "out", datatype: "boolean" }],
-    onExecute(node, { getInput, setOutput }) {
-      const val = getInput("in") ?? false;
-      setOutput("out", !val);
-    }
-  });
-  registry.register("value/Number", {
-    title: "Number",
-    size: { w: 140, h: 60 },
-    outputs: [{ name: "value", portType: "data", datatype: "number" }],
-    onCreate(node) {
-      node.state.value = 0;
-    },
-    onExecute(node, { setOutput }) {
-      console.log("[Number] Outputting value:", node.state.value ?? 0);
-      setOutput("value", node.state.value ?? 0);
-    },
-    html: {
-      init(node, el, { header, body }) {
-        el.style.backgroundColor = "#1e1e24";
-        el.style.border = "1px solid #444";
-        el.style.borderRadius = "8px";
-        header.style.backgroundColor = "#2a2a31";
-        header.style.borderBottom = "1px solid #444";
-        header.style.color = "#eee";
-        header.style.fontSize = "12px";
-        header.textContent = "Number";
-        body.style.padding = "12px";
-        body.style.display = "flex";
-        body.style.alignItems = "center";
-        body.style.justifyContent = "center";
-        const input = document.createElement("input");
-        input.type = "number";
-        input.value = node.state.value ?? 0;
-        Object.assign(input.style, {
-          width: "100%",
-          padding: "6px",
-          background: "#141417",
-          border: "1px solid #444",
-          borderRadius: "4px",
-          color: "#fff",
-          fontSize: "14px",
-          textAlign: "center",
-          pointerEvents: "auto"
-        });
-        input.addEventListener("change", (e) => {
-          node.state.value = parseFloat(e.target.value) || 0;
-        });
-        input.addEventListener("mousedown", (e) => e.stopPropagation());
-        input.addEventListener("keydown", (e) => e.stopPropagation());
-        body.appendChild(input);
-      },
-      update(node, el, { header, body, selected }) {
-        el.style.borderColor = selected ? "#6cf" : "#444";
-        header.style.backgroundColor = selected ? "#3a4a5a" : "#2a2a31";
-      }
-    },
-    onDraw(node, { ctx, theme: theme2 }) {
-      const { x, y } = node.computed;
-      ctx.fillStyle = "#8f8";
-      ctx.font = "14px sans-serif";
-      ctx.textAlign = "center";
-      ctx.fillText(String(node.state.value ?? 0), x + 70, y + 42);
-    }
-  });
-  registry.register("value/String", {
-    title: "String",
-    size: { w: 160, h: 60 },
-    outputs: [{ name: "value", datatype: "string" }],
-    onCreate(node) {
-      node.state.value = "Hello";
-    },
-    onExecute(node, { setOutput }) {
-      setOutput("value", node.state.value ?? "");
-    },
-    onDraw(node, { ctx, theme: theme2 }) {
-      const { x, y } = node.computed;
-      ctx.fillStyle = "#8f8";
-      ctx.font = "12px sans-serif";
-      ctx.textAlign = "center";
-      const text = String(node.state.value ?? "");
-      const displayText = text.length > 15 ? text.substring(0, 15) + "..." : text;
-      ctx.fillText(displayText, x + 80, y + 42);
-    }
-  });
-  registry.register("value/Boolean", {
-    title: "Boolean",
-    size: { w: 140, h: 60 },
-    outputs: [{ name: "value", portType: "data", datatype: "boolean" }],
-    onCreate(node) {
-      node.state.value = true;
-    },
-    onExecute(node, { setOutput }) {
-      console.log("[Boolean] Outputting value:", node.state.value ?? false);
-      setOutput("value", node.state.value ?? false);
-    },
-    onDraw(node, { ctx, theme: theme2 }) {
-      const { x, y } = node.computed;
-      ctx.fillStyle = node.state.value ? "#8f8" : "#f88";
-      ctx.font = "14px sans-serif";
-      ctx.textAlign = "center";
-      ctx.fillText(String(node.state.value), x + 70, y + 42);
-    }
-  });
-  registry.register("util/Print", {
-    title: "Print",
-    size: { w: 140, h: 80 },
-    inputs: [
-      { name: "exec", portType: "exec" },
-      { name: "value", portType: "data", datatype: "any" }
-    ],
-    onCreate(node) {
-      node.state.lastValue = null;
-    },
-    onExecute(node, { getInput }) {
-      const val = getInput("value");
-      if (val !== node.state.lastValue) {
-        console.log("[Print]", val);
-        node.state.lastValue = val;
-      }
-    }
-  });
-  registry.register("util/Watch", {
-    title: "Watch",
-    size: { w: 180, h: 110 },
-    inputs: [
-      { name: "exec", portType: "exec" },
-      { name: "value", portType: "data", datatype: "any" }
-    ],
-    outputs: [
-      { name: "exec", portType: "exec" },
-      { name: "value", portType: "data", datatype: "any" }
-    ],
-    onCreate(node) {
-      node.state.displayValue = "---";
-    },
-    onExecute(node, { getInput, setOutput }) {
-      const val = getInput("value");
-      console.log("[Watch] onExecute called, value:", val);
-      node.state.displayValue = String(val ?? "---");
-      setOutput("value", val);
-    },
-    onDraw(node, { ctx, theme: theme2 }) {
-      const { x, y } = node.computed;
-      ctx.fillStyle = "#fa3";
-      ctx.font = "11px monospace";
-      ctx.textAlign = "left";
-      const text = String(node.state.displayValue ?? "---");
-      const displayText = text.length > 20 ? text.substring(0, 20) + "..." : text;
-      ctx.fillText(displayText, x + 8, y + 50);
-    }
-  });
-  registry.register("util/Timer", {
-    title: "Timer",
-    size: { w: 140, h: 60 },
-    outputs: [{ name: "time", datatype: "number" }],
-    onCreate(node) {
-      node.state.startTime = performance.now();
-    },
-    onExecute(node, { setOutput }) {
-      const elapsed = (performance.now() - (node.state.startTime ?? 0)) / 1e3;
-      setOutput("time", elapsed.toFixed(2));
-    }
-  });
-  registry.register("util/Trigger", {
-    title: "Trigger",
-    size: { w: 140, h: 80 },
-    outputs: [{ name: "exec", portType: "exec" }],
-    // Changed to exec port
-    html: {
-      init(node, el, { header, body }) {
-        el.style.backgroundColor = "#1e1e24";
-        el.style.border = "1px solid #444";
-        el.style.borderRadius = "8px";
-        header.style.backgroundColor = "#2a2a31";
-        header.style.borderBottom = "1px solid #444";
-        header.style.color = "#eee";
-        header.style.fontSize = "12px";
-        header.textContent = "Trigger";
-        body.style.padding = "12px";
-        body.style.display = "flex";
-        body.style.alignItems = "center";
-        body.style.justifyContent = "center";
-        const button = document.createElement("button");
-        button.textContent = "Fire!";
-        Object.assign(button.style, {
-          padding: "8px 16px",
-          background: "#4a9eff",
-          border: "none",
-          borderRadius: "4px",
-          color: "#fff",
-          fontWeight: "bold",
-          cursor: "pointer",
-          pointerEvents: "auto",
-          transition: "background 0.2s"
-        });
-        button.addEventListener("mousedown", (e) => {
-          e.stopPropagation();
-          button.style.background = "#2a7ede";
-        });
-        button.addEventListener("mouseup", () => {
-          button.style.background = "#4a9eff";
-        });
-        button.addEventListener("click", (e) => {
-          e.stopPropagation();
-          node.state.triggered = true;
-          console.log("[Trigger] Button clicked!");
-          if (node.__runnerRef && node.__controllerRef) {
-            console.log("[Trigger] Runner and controller found");
-            const runner2 = node.__runnerRef;
-            const controller2 = node.__controllerRef;
-            const graph2 = controller2.graph;
-            console.log("[Trigger] Calling runner.runOnce with node.id:", node.id);
-            const result = runner2.runOnce(node.id, 0);
-            const connectedEdges = result.connectedEdges;
-            const startTime = performance.now();
-            const animationDuration = 500;
-            const animate = () => {
-              var _a;
-              const elapsed = performance.now() - startTime;
-              if (elapsed < animationDuration) {
-                controller2.renderer.draw(graph2, {
-                  selection: controller2.selection,
-                  tempEdge: null,
-                  running: true,
-                  time: performance.now(),
-                  dt: 0,
-                  activeEdges: connectedEdges
-                  // Only animate connected edges
-                });
-                (_a = controller2.htmlOverlay) == null ? void 0 : _a.draw(graph2, controller2.selection);
-                requestAnimationFrame(animate);
-              } else {
-                controller2.render();
-                node.state.triggered = false;
-              }
-            };
-            animate();
-          }
-        });
-        body.appendChild(button);
-      },
-      update(node, el, { header, body, selected }) {
-        el.style.borderColor = selected ? "#6cf" : "#444";
-        header.style.backgroundColor = selected ? "#3a4a5a" : "#2a2a31";
-      }
-    },
-    onCreate(node) {
-      node.state.triggered = false;
-    },
-    onExecute(node, { setOutput }) {
-      console.log("[Trigger] Outputting triggered:", node.state.triggered);
-      setOutput("triggered", node.state.triggered);
-    }
-  });
-  registry.register("core/Group", {
-    title: "Group",
-    size: { w: 240, h: 160 },
-    onDraw(node, { ctx, theme: theme2 }) {
-      const { x, y, w, h } = node.computed;
-      const headerH = 24;
-      const color = node.state.color || "#39424e";
-      const bgAlpha = 0.5;
-      const textColor = theme2.text || "#e9e9ef";
-      const rgba = (hex, a) => {
-        const c = hex.replace("#", "");
-        const n = parseInt(
-          c.length === 3 ? c.split("").map((x2) => x2 + x2).join("") : c,
-          16
-        );
-        const r = n >> 16 & 255, g = n >> 8 & 255, b = n & 255;
-        return `rgba(${r},${g},${b},${a})`;
-      };
-      const roundRect2 = (ctx2, x2, y2, w2, h2, r) => {
-        if (w2 < 2 * r) r = w2 / 2;
-        if (h2 < 2 * r) r = h2 / 2;
-        ctx2.beginPath();
-        ctx2.moveTo(x2 + r, y2);
-        ctx2.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
-        ctx2.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
-        ctx2.arcTo(x2, y2 + h2, x2, y2, r);
-        ctx2.arcTo(x2, y2, x2 + w2, y2, r);
-        ctx2.closePath();
-      };
-      ctx.fillStyle = rgba(color, bgAlpha);
-      roundRect2(ctx, x, y, w, h, 10);
-      ctx.fill();
-      ctx.fillStyle = rgba(color, 0.3);
-      ctx.beginPath();
-      ctx.roundRect(x, y, w, headerH, [10, 10, 0, 0]);
-      ctx.fill();
-      ctx.fillStyle = textColor;
-      ctx.font = "600 13px system-ui";
-      ctx.textBaseline = "top";
-      ctx.fillText(node.title, x + 12, y + 6);
-    }
-  });
-  function setupDefaultContextMenu(contextMenu2, { controller: controller2, graph: graph2, hooks: hooks2 }) {
-    const nodeTypes = [];
-    for (const [key, typeDef] of graph2.registry.types.entries()) {
-      nodeTypes.push({
-        id: `add-${key}`,
-        label: typeDef.title || key,
-        action: () => {
-          const worldPos = contextMenu2.worldPosition || { x: 100, y: 100 };
-          const node = graph2.addNode(key, {
-            x: worldPos.x,
-            y: worldPos.y
-          });
-          hooks2 == null ? void 0 : hooks2.emit("node:updated", node);
-          controller2.render();
-        }
-      });
     }
-    contextMenu2.addItem("add-node", "Add Node", {
-      condition: (target2) => !target2,
-      submenu: nodeTypes,
-      order: 5
-    });
-    contextMenu2.addItem("delete-node", "Delete Node", {
-      condition: (target2) => target2 && target2.type !== "core/Group",
-      action: (target2) => {
-        const cmd = RemoveNodeCmd(graph2, target2);
-        controller2.stack.exec(cmd);
-        hooks2 == null ? void 0 : hooks2.emit("node:updated", target2);
-      },
-      order: 10
-    });
-    const colors = [
-      { name: "Default", color: "#39424e" },
-      { name: "Slate", color: "#4a5568" },
-      { name: "Gray", color: "#2d3748" },
-      { name: "Blue", color: "#1a365d" },
-      { name: "Green", color: "#22543d" },
-      { name: "Red", color: "#742a2a" },
-      { name: "Purple", color: "#44337a" }
-    ];
-    contextMenu2.addItem("change-group-color", "Change Color", {
-      condition: (target2) => target2 && target2.type === "core/Group",
-      submenu: colors.map((colorInfo) => ({
-        id: `color-${colorInfo.color}`,
-        label: colorInfo.name,
-        color: colorInfo.color,
-        action: (target2) => {
-          const currentColor = target2.state.color || "#39424e";
-          const cmd = ChangeGroupColorCmd(target2, currentColor, colorInfo.color);
-          controller2.stack.exec(cmd);
-          hooks2 == null ? void 0 : hooks2.emit("node:updated", target2);
-        }
-      })),
-      order: 20
-    });
-    contextMenu2.addItem("delete-group", "Delete Group", {
-      condition: (target2) => target2 && target2.type === "core/Group",
-      action: (target2) => {
-        const cmd = RemoveNodeCmd(graph2, target2);
-        controller2.stack.exec(cmd);
-        hooks2 == null ? void 0 : hooks2.emit("node:updated", target2);
-      },
-      order: 20
-    });
   }
-  setupDefaultContextMenu(contextMenu, { controller, graph, hooks });
   renderer.resize(canvas.clientWidth, canvas.clientHeight);
+  edgeRenderer.resize(canvas.clientWidth, canvas.clientHeight);
   portRenderer.resize(canvas.clientWidth, canvas.clientHeight);
   controller.render();
   const ro = new ResizeObserver(() => {
     renderer.resize(canvas.clientWidth, canvas.clientHeight);
+    edgeRenderer.resize(canvas.clientWidth, canvas.clientHeight);
     portRenderer.resize(canvas.clientWidth, canvas.clientHeight);
     controller.render();
   });