html-overlay-node 0.1.6 → 0.1.10

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;
@@ -333,11 +342,12 @@ class Graph {
       const available = Array.from(this.registry.types.keys()).join(", ") || "none";
       throw new Error(`Unknown node type: "${type}". Available types: ${available}`);
     }
+    const height = opts.height || ((_a = def.size) == null ? void 0 : _a.h) || this._calculateDefaultNodeHeight(def);
     const node = new Node({
       type,
       title: def.title,
-      width: (_a = def.size) == null ? void 0 : _a.w,
-      height: (_b = def.size) == null ? void 0 : _b.h,
+      width: opts.width || ((_b = def.size) == null ? void 0 : _b.w) || 140,
+      height,
       ...opts
     });
     for (const i of def.inputs || []) node.addInput(i.name, i.datatype, i.portType || "data");
@@ -479,8 +489,12 @@ class Graph {
   }
   fromJSON(json) {
     var _a, _b, _c;
-    this.clear();
+    this.nodes.clear();
+    this.edges.clear();
     for (const nd of json.nodes) {
+      const def = (_b = (_a = this.registry) == null ? void 0 : _a.types) == null ? void 0 : _b.get(nd.type);
+      const minH = def ? this._calculateDefaultNodeHeight(def) : 60;
+      const height = nd.h !== void 0 ? nd.h : minH;
       const node = new Node({
         id: nd.id,
         type: nd.type,
@@ -488,9 +502,8 @@ class Graph {
         x: nd.x,
         y: nd.y,
         width: nd.w,
-        height: nd.h
+        height
       });
-      const def = (_b = (_a = this.registry) == null ? void 0 : _a.types) == null ? void 0 : _b.get(nd.type);
       if (def == null ? void 0 : def.onCreate) {
         def.onCreate(node);
       }
@@ -516,19 +529,35 @@ class Graph {
     (_c = this.hooks) == null ? void 0 : _c.emit("graph:deserialize", json);
     return this;
   }
+  _calculateDefaultNodeHeight(def) {
+    var _a, _b;
+    const inCount = ((_a = def.inputs) == null ? void 0 : _a.length) || 0;
+    const outCount = ((_b = def.outputs) == null ? void 0 : _b.length) || 0;
+    const maxPorts = Math.max(inCount, outCount);
+    const headerHeight = 26;
+    const padding = 8;
+    const portSpacing = 20;
+    let h = headerHeight + padding + maxPorts * portSpacing + padding;
+    if (def.html) h += 16;
+    return Math.max(h, 40);
+  }
 }
 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 headerHeight = 26;
+  const padding = 8;
+  const portSpacing = 20;
+  const y = ny + headerHeight + padding + idx * portSpacing + portSpacing / 2;
   const portWidth = 12;
   const portHeight = 12;
   if (dir === "in") {
@@ -551,32 +580,20 @@ const _CanvasRenderer = class _CanvasRenderer {
     this.edgeStyle = edgeStyle;
     this.theme = Object.assign(
       {
-        bg: "#0d0d0f",
-        // Darker background
-        grid: "#1a1a1d",
-        // Subtle grid
-        node: "#16161a",
-        // Darker nodes
-        nodeBorder: "#2a2a2f",
-        // Subtle border
-        title: "#1f1f24",
-        // Darker header
-        text: "#e4e4e7",
-        // Softer white
-        textMuted: "#a1a1aa",
-        // Muted text
-        port: "#6366f1",
-        // Indigo for data ports
+        bg: "#0e0e16",
+        grid: "#1c1c2c",
+        node: "rgba(22, 22, 34, 0.9)",
+        nodeBorder: "rgba(255, 255, 255, 0.08)",
+        title: "rgba(28, 28, 42, 0.95)",
+        text: "#f5f5f7",
+        textMuted: "#8e8eaf",
+        port: "#4f46e5",
         portExec: "#10b981",
-        // Emerald for exec ports
-        edge: "#52525b",
-        // Neutral edge color
-        edgeActive: "#8b5cf6",
-        // Purple for active
+        edge: "rgba(255, 255, 255, 0.12)",
+        edgeActive: "#6366f1",
         accent: "#6366f1",
-        // Indigo accent
-        accentBright: "#818cf8"
-        // Brighter accent
+        accentBright: "#818cf8",
+        accentGlow: "rgba(99, 102, 241, 0.25)"
       },
       theme
     );
@@ -591,31 +608,33 @@ 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);
+  }
+  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,36 +650,30 @@ 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);
   }
   // ── Drawing ────────────────────────────────────────────────────────────────
-  _drawArrowhead(x1, y1, x2, y2, size = 10) {
+  _drawArrowhead(x1, y1, x2, y2, size = 8) {
     const { ctx } = this;
     const s = size / this.scale;
     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();
   }
   _drawScreenText(text, lx, ly, {
-    fontPx = 12,
+    fontPx = 11,
     color = this.theme.text,
     align = "left",
-    baseline = "alphabetic",
-    dpr = 1
-    // 추후 devicePixelRatio 도입
+    baseline = "alphabetic"
   } = {}) {
     const { ctx } = this;
     const { x: sx, y: sy } = this.worldToScreen(lx, ly);
@@ -668,7 +681,7 @@ const _CanvasRenderer = class _CanvasRenderer {
     this._resetTransform();
     const px = Math.round(sx) + 0.5;
     const py = Math.round(sy) + 0.5;
-    ctx.font = `${fontPx * this.scale}px system-ui`;
+    ctx.font = `${fontPx * this.scale}px "Inter", system-ui, sans-serif`;
     ctx.fillStyle = color;
     ctx.textAlign = align;
     ctx.textBaseline = baseline;
@@ -681,38 +694,47 @@ const _CanvasRenderer = class _CanvasRenderer {
     ctx.fillStyle = theme.bg;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     this._applyTransform();
-    ctx.strokeStyle = this._rgba(theme.grid, 0.35);
-    ctx.lineWidth = 1 / scale;
-    const base = 20;
-    const step = base;
     const x0 = -offsetX / scale;
     const y0 = -offsetY / scale;
     const x1 = (canvas.width - offsetX) / scale;
     const y1 = (canvas.height - offsetY) / scale;
-    const startX = Math.floor(x0 / step) * step;
-    const startY = Math.floor(y0 / step) * step;
-    ctx.beginPath();
-    for (let x = startX; x <= x1; x += step) {
-      ctx.moveTo(x, y0);
-      ctx.lineTo(x, y1);
+    const minorStep = 24;
+    const majorStep = 120;
+    const minorR = 1 / scale;
+    const majorR = 1.5 / scale;
+    const startX = Math.floor(x0 / minorStep) * minorStep;
+    const startY = Math.floor(y0 / minorStep) * minorStep;
+    ctx.fillStyle = this._rgba(theme.grid, 0.7);
+    for (let gx = startX; gx <= x1; gx += minorStep) {
+      for (let gy = startY; gy <= y1; gy += minorStep) {
+        const isMajorX = Math.round(gx / majorStep) * majorStep === Math.round(gx);
+        const isMajorY = Math.round(gy / majorStep) * majorStep === Math.round(gy);
+        if (isMajorX && isMajorY) continue;
+        ctx.beginPath();
+        ctx.arc(gx, gy, minorR, 0, Math.PI * 2);
+        ctx.fill();
+      }
     }
-    for (let y = startY; y <= y1; y += step) {
-      ctx.moveTo(x0, y);
-      ctx.lineTo(x1, y);
+    const majorStartX = Math.floor(x0 / majorStep) * majorStep;
+    const majorStartY = Math.floor(y0 / majorStep) * majorStep;
+    ctx.fillStyle = this._rgba(theme.grid, 1);
+    for (let gx = majorStartX; gx <= x1; gx += majorStep) {
+      for (let gy = majorStartY; gy <= y1; gy += majorStep) {
+        ctx.beginPath();
+        ctx.arc(gx, gy, majorR, 0, Math.PI * 2);
+        ctx.fill();
+      }
     }
-    ctx.stroke();
     this._resetTransform();
   }
   draw(graph, {
     selection = /* @__PURE__ */ new Set(),
     tempEdge = null,
-    running = false,
     time = performance.now(),
-    dt = 0,
-    groups = null,
-    activeEdges = /* @__PURE__ */ new Set()
+    activeEdges = /* @__PURE__ */ new Set(),
+    drawEdges = true
   } = {}) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     graph.updateWorldTransforms();
     this.drawGrid();
     const { ctx, theme } = this;
@@ -722,43 +744,50 @@ 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;
+      for (const e of graph.edges.values()) {
+        const isActive = activeEdges && activeEdges.has(e.id);
+        if (isActive) {
+          ctx.save();
+          ctx.shadowColor = this.theme.edgeActive;
+          ctx.shadowBlur = 8 / this.scale;
+          ctx.strokeStyle = this.theme.edgeActive;
+          ctx.lineWidth = 2 / this.scale;
+          ctx.setLineDash([]);
+          this._drawEdge(graph, e);
+          ctx.restore();
+          const dotT = time / 1e3 * 1.2 % 1;
+          const dotPos = this._getEdgeDotPosition(graph, e, dotT);
+          if (dotPos) {
+            ctx.save();
+            ctx.fillStyle = "#ffffff";
+            ctx.shadowColor = this.theme.edgeActive;
+            ctx.shadowBlur = 10 / this.scale;
+            ctx.beginPath();
+            ctx.arc(dotPos.x, dotPos.y, 3 / this.scale, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+          }
+        } else {
+          ctx.setLineDash([]);
+          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);
       const b = this.screenToWorld(tempEdge.x2, tempEdge.y2);
       const prevDash = this.ctx.getLineDash();
-      this.ctx.setLineDash([6 / this.scale, 6 / this.scale]);
+      this.ctx.setLineDash([5 / this.scale, 5 / this.scale]);
+      this.ctx.strokeStyle = this._rgba(this.theme.accentBright, 0.7);
+      this.ctx.lineWidth = 1.5 / this.scale;
       let ptsForArrow = null;
       if (this.edgeStyle === "line") {
         this._drawLine(a.x, a.y, b.x, b.y);
@@ -773,9 +802,8 @@ const _CanvasRenderer = class _CanvasRenderer {
       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.ctx.fillStyle = this.theme.accentBright;
+        this._drawArrowhead(p1.x, p1.y, p2.x, p2.y, 10);
       }
     }
     for (const n of graph.nodes.values()) {
@@ -783,14 +811,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 });
-      }
-    }
-    for (const n of graph.nodes.values()) {
-      if (n.type !== "core/Group") {
-        const def = (_f = (_e = this.registry) == null ? void 0 : _e.types) == null ? void 0 : _f.get(n.type);
-        const hasHtmlOverlay = !!(def == null ? void 0 : def.html);
+        this._drawNode(n, sel, !hasHtmlOverlay ? true : false);
+        if (def == null ? void 0 : def.onDraw) {
+          def.onDraw(n, { ctx, theme, renderer: this });
+        }
         if (hasHtmlOverlay) {
           this._drawPorts(n);
         }
@@ -808,40 +832,58 @@ const _CanvasRenderer = class _CanvasRenderer {
     return `rgba(${r},${g},${b},${a})`;
   }
   _drawNode(node, selected, skipPorts = false) {
+    var _a, _b;
     const { ctx, theme } = this;
-    const r = 8;
+    const r = 2;
     const { x, y, w, h } = node.computed;
-    if (!selected) {
+    const headerH = 26;
+    const typeDef = (_b = (_a = this.registry) == null ? void 0 : _a.types) == null ? void 0 : _b.get(node.type);
+    const categoryColor = node.color || (typeDef == null ? void 0 : typeDef.color) || theme.accent;
+    if (selected) {
       ctx.save();
-      ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
-      ctx.shadowBlur = 8 / this.scale;
-      ctx.shadowOffsetY = 2 / this.scale;
-      ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
-      roundRect(ctx, x, y, w, h, r);
-      ctx.fill();
+      ctx.shadowColor = theme.accentGlow;
+      ctx.shadowBlur = 10 / this.scale;
+      ctx.strokeStyle = theme.accentBright;
+      ctx.lineWidth = 2 / this.scale;
+      const pad = 1.5 / this.scale;
+      roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r + pad);
+      ctx.stroke();
       ctx.restore();
     }
+    ctx.save();
+    ctx.shadowColor = "rgba(0,0,0,0.7)";
+    ctx.shadowBlur = 20 / this.scale;
+    ctx.shadowOffsetY = 6 / this.scale;
+    ctx.fillStyle = theme.node;
+    roundRect(ctx, x, y, w, h, r);
+    ctx.fill();
+    ctx.restore();
     ctx.fillStyle = theme.node;
     ctx.strokeStyle = selected ? theme.accentBright : theme.nodeBorder;
-    ctx.lineWidth = (selected ? 1.5 : 1) / this.scale;
+    ctx.lineWidth = 1 / this.scale;
     roundRect(ctx, x, y, w, h, r);
     ctx.fill();
     ctx.stroke();
     ctx.fillStyle = theme.title;
-    roundRect(ctx, x, y, w, 24, { tl: r, tr: r, br: 0, bl: 0 });
+    roundRect(ctx, x, y, w, headerH, { tl: r, tr: r, br: 0, bl: 0 });
     ctx.fill();
-    ctx.strokeStyle = selected ? theme.accentBright : theme.nodeBorder;
-    ctx.lineWidth = (selected ? 1.5 : 1) / this.scale;
+    ctx.save();
+    ctx.globalCompositeOperation = "source-atop";
+    ctx.fillStyle = categoryColor;
+    ctx.globalAlpha = 0.25;
+    ctx.fillRect(x, y, w, headerH);
+    ctx.restore();
+    ctx.strokeStyle = selected ? this._rgba(theme.accentBright, 0.3) : this._rgba(theme.nodeBorder, 0.6);
+    ctx.lineWidth = 1 / this.scale;
     ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + w - r, y);
-    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-    ctx.lineTo(x + w, y + 24);
-    ctx.moveTo(x, y + 24);
-    ctx.lineTo(x, y + r);
-    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.moveTo(x, y + headerH);
+    ctx.lineTo(x + w, y + headerH);
     ctx.stroke();
-    this._drawScreenText(node.title, x + 8, y + _CanvasRenderer.FONT_SIZE, {
+    ctx.fillStyle = categoryColor;
+    ctx.beginPath();
+    ctx.roundRect(x, y, w, 2.5 / this.scale, { tl: r, tr: r, br: 0, bl: 0 });
+    ctx.fill();
+    this._drawScreenText(node.title, x + 10, y + headerH / 2, {
       fontPx: _CanvasRenderer.FONT_SIZE,
       color: theme.text,
       baseline: "middle",
@@ -852,97 +894,111 @@ const _CanvasRenderer = class _CanvasRenderer {
       const rct = portRect(node, p, i, "in");
       const cx = rct.x + rct.w / 2;
       const cy = rct.y + rct.h / 2;
-      if (p.portType === "exec") {
-        const portSize = 8;
-        ctx.fillStyle = theme.portExec;
-        ctx.strokeStyle = "rgba(16, 185, 129, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.roundRect(cx - portSize / 2, cy - portSize / 2, portSize, portSize, 2);
-        ctx.fill();
-        ctx.stroke();
-      } else {
-        ctx.fillStyle = theme.port;
-        ctx.strokeStyle = "rgba(99, 102, 241, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.arc(cx, cy, 5, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.stroke();
+      this._drawPortShape(cx, cy, p.portType);
+      if (p.name) {
+        this._drawScreenText(p.name, cx + 10, cy, {
+          fontPx: 10,
+          color: theme.textMuted,
+          baseline: "middle",
+          align: "left"
+        });
       }
     });
     node.outputs.forEach((p, i) => {
       const rct = portRect(node, p, i, "out");
       const cx = rct.x + rct.w / 2;
       const cy = rct.y + rct.h / 2;
-      if (p.portType === "exec") {
-        const portSize = 8;
-        ctx.fillStyle = theme.portExec;
-        ctx.strokeStyle = "rgba(16, 185, 129, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.roundRect(cx - portSize / 2, cy - portSize / 2, portSize, portSize, 2);
-        ctx.fill();
-        ctx.stroke();
-      } else {
-        ctx.fillStyle = theme.port;
-        ctx.strokeStyle = "rgba(99, 102, 241, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.arc(cx, cy, 5, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.stroke();
+      this._drawPortShape(cx, cy, p.portType);
+      if (p.name) {
+        this._drawScreenText(p.name, cx - 10, cy, {
+          fontPx: 10,
+          color: theme.textMuted,
+          baseline: "middle",
+          align: "right"
+        });
       }
     });
   }
-  _drawPorts(node) {
+  _drawPortShape(cx, cy, portType) {
     const { ctx, theme } = this;
+    if (portType === "exec") {
+      const s = 5 / this.scale;
+      ctx.save();
+      ctx.fillStyle = theme.portExec;
+      ctx.strokeStyle = this._rgba(theme.portExec, 0.4);
+      ctx.lineWidth = 2 / this.scale;
+      ctx.beginPath();
+      ctx.moveTo(cx, cy - s);
+      ctx.lineTo(cx + s, cy);
+      ctx.lineTo(cx, cy + s);
+      ctx.lineTo(cx - s, cy);
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+      ctx.restore();
+    } else {
+      ctx.save();
+      ctx.strokeStyle = this._rgba(theme.port, 0.35);
+      ctx.lineWidth = 3 / this.scale;
+      ctx.beginPath();
+      ctx.arc(cx, cy, 5 / this.scale, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.fillStyle = theme.port;
+      ctx.beginPath();
+      ctx.arc(cx, cy, 3.5 / this.scale, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+    }
+  }
+  _drawPorts(node) {
     node.inputs.forEach((p, i) => {
       const rct = portRect(node, p, i, "in");
       const cx = rct.x + rct.w / 2;
       const cy = rct.y + rct.h / 2;
-      if (p.portType === "exec") {
-        const portSize = 8;
-        ctx.fillStyle = theme.portExec;
-        ctx.strokeStyle = "rgba(16, 185, 129, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.roundRect(cx - portSize / 2, cy - portSize / 2, portSize, portSize, 2);
-        ctx.fill();
-        ctx.stroke();
-      } else {
-        ctx.fillStyle = theme.port;
-        ctx.strokeStyle = "rgba(99, 102, 241, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.arc(cx, cy, 5, 0, Math.PI * 2);
-        ctx.fill();
-      }
+      this._drawPortShape(cx, cy, p.portType);
     });
     node.outputs.forEach((p, i) => {
       const rct = portRect(node, p, i, "out");
       const cx = rct.x + rct.w / 2;
       const cy = rct.y + rct.h / 2;
-      if (p.portType === "exec") {
-        const portSize = 8;
-        ctx.fillStyle = theme.portExec;
-        ctx.strokeStyle = "rgba(16, 185, 129, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.roundRect(cx - portSize / 2, cy - portSize / 2, portSize, portSize, 2);
-        ctx.fill();
-        ctx.stroke();
-      } else {
-        ctx.fillStyle = theme.port;
-        ctx.strokeStyle = "rgba(99, 102, 241, 0.3)";
-        ctx.lineWidth = 2 / this.scale;
-        ctx.beginPath();
-        ctx.arc(cx, cy, 5, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.stroke();
-      }
+      this._drawPortShape(cx, cy, p.portType);
     });
   }
+  /** Selection border for HTML overlay nodes, drawn on the edge canvas */
+  _drawHtmlSelectionBorder(node) {
+    const { ctx, theme } = this;
+    const { x, y, w, h } = node.computed;
+    const r = 2;
+    const pad = 1.5 / this.scale;
+    ctx.save();
+    ctx.shadowColor = theme.accentGlow;
+    ctx.shadowBlur = 14 / this.scale;
+    ctx.strokeStyle = theme.accentBright;
+    ctx.lineWidth = 1.5 / this.scale;
+    roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r);
+    ctx.stroke();
+    ctx.restore();
+  }
+  /** Rotating dashed border drawn on the edge canvas for executing nodes */
+  _drawActiveNodeBorder(node, time) {
+    const { ctx, theme } = this;
+    const { x, y, w, h } = node.computed;
+    const r = 2;
+    const pad = 2.5 / this.scale;
+    const dashLen = 8 / this.scale;
+    const gapLen = 6 / this.scale;
+    const offset = -(time / 1e3) * (50 / this.scale);
+    ctx.save();
+    ctx.setLineDash([dashLen, gapLen]);
+    ctx.lineDashOffset = offset;
+    ctx.strokeStyle = this._rgba(theme.portExec, 0.9);
+    ctx.lineWidth = 1.5 / this.scale;
+    ctx.shadowColor = theme.portExec;
+    ctx.shadowBlur = 4 / this.scale;
+    roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r + pad);
+    ctx.stroke();
+    ctx.restore();
+  }
   _drawEdge(graph, e) {
     const from = graph.nodes.get(e.fromNode);
     const to = graph.nodes.get(e.toNode);
@@ -951,7 +1007,8 @@ 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;
+    const 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") {
@@ -960,6 +1017,32 @@ const _CanvasRenderer = class _CanvasRenderer {
       this._drawCurve(x1, y1, x2, y2);
     }
   }
+  _getEdgeDotPosition(graph, e, t) {
+    const from = graph.nodes.get(e.fromNode);
+    const to = graph.nodes.get(e.toNode);
+    if (!from || !to) return null;
+    const iOut = from.outputs.findIndex((p) => p.id === e.fromPort);
+    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 + pr1.w / 2, y1 = pr1.y + pr1.h / 2;
+    const x2 = pr2.x + pr2.w / 2, y2 = pr2.y + pr2.h / 2;
+    if (this.edgeStyle === "bezier") {
+      const dx = Math.max(40, Math.abs(x2 - x1) * 0.4);
+      return cubicBezierPoint(x1, y1, x1 + dx, y1, x2 - dx, y2, x2, y2, t);
+    } else if (this.edgeStyle === "orthogonal") {
+      const midX = (x1 + x2) / 2;
+      const pts = [
+        { x: x1, y: y1 },
+        { x: midX, y: y1 },
+        { x: midX, y: y2 },
+        { x: x2, y: y2 }
+      ];
+      return polylinePoint(pts, t);
+    } else {
+      return { x: x1 + (x2 - x1) * t, y: y1 + (y2 - y1) * t };
+    }
+  }
   _drawLine(x1, y1, x2, y2) {
     const { ctx } = this;
     ctx.beginPath();
@@ -971,21 +1054,17 @@ 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) {
     const midX = (x1 + x2) / 2;
-    let pts;
-    {
-      pts = [
-        { x: x1, y: y1 },
-        { x: midX, y: y1 },
-        { x: midX, y: y2 },
-        { x: x2, y: y2 }
-      ];
-    }
+    const pts = [
+      { x: x1, y: y1 },
+      { x: midX, y: y1 },
+      { x: midX, y: y2 },
+      { x: x2, y: y2 }
+    ];
     const { ctx } = this;
     const prevJoin = ctx.lineJoin, prevCap = ctx.lineCap;
     ctx.lineJoin = "round";
@@ -1003,8 +1082,91 @@ const _CanvasRenderer = class _CanvasRenderer {
     ctx.bezierCurveTo(x1 + dx, y1, x2 - dx, y2, x2, y2);
     ctx.stroke();
   }
+  drawEdgesOnly(graph, {
+    activeEdges = /* @__PURE__ */ new Set(),
+    activeEdgeTimes = /* @__PURE__ */ new Map(),
+    activeNodes = /* @__PURE__ */ new Set(),
+    selection = /* @__PURE__ */ new Set(),
+    time = performance.now(),
+    tempEdge = null
+  } = {}) {
+    var _a, _b;
+    this._resetTransform();
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this._applyTransform();
+    const { ctx, theme } = this;
+    for (const e of graph.edges.values()) {
+      const isActive = activeEdges.has(e.id);
+      if (isActive) {
+        ctx.save();
+        ctx.shadowColor = theme.edgeActive;
+        ctx.shadowBlur = 6 / this.scale;
+        ctx.strokeStyle = theme.edgeActive;
+        ctx.lineWidth = 2 / this.scale;
+        ctx.setLineDash([]);
+        this._drawEdge(graph, e);
+        ctx.restore();
+        const activationTime = activeEdgeTimes.get(e.id) ?? time;
+        const dotT = Math.min(1, (time - activationTime) / 620);
+        const dotPos = this._getEdgeDotPosition(graph, e, dotT);
+        if (dotPos) {
+          ctx.save();
+          ctx.fillStyle = this._rgba(theme.edgeActive, 0.9);
+          ctx.shadowColor = theme.edgeActive;
+          ctx.shadowBlur = 8 / this.scale;
+          ctx.beginPath();
+          ctx.arc(dotPos.x, dotPos.y, 2.5 / this.scale, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.restore();
+        }
+      } else {
+        ctx.setLineDash([]);
+        ctx.strokeStyle = theme.edge;
+        ctx.lineWidth = 1.5 / this.scale;
+        this._drawEdge(graph, e);
+      }
+    }
+    for (const nodeId of selection) {
+      const node = graph.nodes.get(nodeId);
+      if (!node) continue;
+      const def = (_b = (_a = this.registry) == null ? void 0 : _a.types) == null ? void 0 : _b.get(node.type);
+      if (def == null ? void 0 : def.html) this._drawHtmlSelectionBorder(node);
+    }
+    if (activeNodes.size > 0) {
+      for (const nodeId of activeNodes) {
+        const node = graph.nodes.get(nodeId);
+        if (node) this._drawActiveNodeBorder(node, time);
+      }
+    }
+    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([5 / this.scale, 5 / this.scale]);
+      this.ctx.strokeStyle = this._rgba(this.theme.accentBright, 0.7);
+      this.ctx.lineWidth = 1.5 / 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.accentBright;
+        this._drawArrowhead(p1.x, p1.y, p2.x, p2.y, 10);
+      }
+    }
+    this._resetTransform();
+  }
 };
-__publicField(_CanvasRenderer, "FONT_SIZE", 12);
+__publicField(_CanvasRenderer, "FONT_SIZE", 11);
 __publicField(_CanvasRenderer, "SELECTED_NODE_COLOR", "#6cf");
 let CanvasRenderer = _CanvasRenderer;
 function roundRect(ctx, x, y, w, h, r = 6) {
@@ -1021,6 +1183,38 @@ function roundRect(ctx, x, y, w, h, r = 6) {
   ctx.quadraticCurveTo(x, y, x + r.tl, y);
   ctx.closePath();
 }
+function cubicBezierPoint(x0, y0, x1, y1, x2, y2, x3, y3, t) {
+  const mt = 1 - t;
+  return {
+    x: mt * mt * mt * x0 + 3 * mt * mt * t * x1 + 3 * mt * t * t * x2 + t * t * t * x3,
+    y: mt * mt * mt * y0 + 3 * mt * mt * t * y1 + 3 * mt * t * t * y2 + t * t * t * y3
+  };
+}
+function polylinePoint(pts, t) {
+  let totalLen = 0;
+  const lens = [];
+  for (let i = 0; i < pts.length - 1; i++) {
+    const dx = pts[i + 1].x - pts[i].x;
+    const dy = pts[i + 1].y - pts[i].y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    lens.push(len);
+    totalLen += len;
+  }
+  if (totalLen === 0) return pts[0];
+  let target = t * totalLen;
+  let accum = 0;
+  for (let i = 0; i < lens.length; i++) {
+    if (accum + lens[i] >= target) {
+      const segT = lens[i] > 0 ? (target - accum) / lens[i] : 0;
+      return {
+        x: pts[i].x + (pts[i + 1].x - pts[i].x) * segT,
+        y: pts[i].y + (pts[i + 1].y - pts[i].y) * segT
+      };
+    }
+    accum += lens[i];
+  }
+  return pts[pts.length - 1];
+}
 function findEdgeId(graph, a, b, c, d) {
   for (const [id, e] of graph.edges) {
     if (e.fromNode === a && e.fromPort === b && e.toNode === c && e.toPort === d)
@@ -1126,12 +1320,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();
@@ -1142,6 +1337,9 @@ const _Controller = class _Controller {
     this.gDragging = null;
     this.gResizing = null;
     this.boxSelecting = null;
+    this.activeEdges = /* @__PURE__ */ new Set();
+    this.activeEdgeTimes = /* @__PURE__ */ new Map();
+    this.activeNodes = /* @__PURE__ */ new Set();
     this.snapToGrid = true;
     this.gridSize = 20;
     this._cursor = "default";
@@ -1282,13 +1480,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 +1733,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 +1901,32 @@ 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,
+        activeEdgeTimes: this.activeEdgeTimes,
+        activeNodes: this.activeNodes,
+        selection: this.selection,
+        time: performance.now(),
+        tempEdge: tEdge
+      });
+      this.edgeRenderer._resetTransform();
+    }
     if (this.boxSelecting) {
       const { startX, startY, currentX, currentY } = this.boxSelecting;
       const minX = Math.min(startX, currentX);
@@ -1729,14 +1935,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 +1968,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 +1976,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 +1988,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 +2177,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) => {
@@ -2104,11 +2318,9 @@ class Runner {
     this._last = 0;
     this.cyclesPerFrame = Math.max(1, cyclesPerFrame | 0);
   }
-  // 외부에서 실행 중인지 확인
   isRunning() {
     return this.running;
   }
-  // 실행 도중에도 CPS 변경 가능
   setCyclesPerFrame(n) {
     this.cyclesPerFrame = Math.max(1, n | 0);
   }
@@ -2141,24 +2353,22 @@ class Runner {
     }
   }
   /**
-   * Execute connected nodes once from a starting node
-   * @param {string} startNodeId - ID of the node to start from
-   * @param {number} dt - Delta time
+   * Execute connected nodes once from a starting node.
+   * Returns execEdgeOrder: exec edges in the order they were traversed.
    */
   runOnce(startNodeId, dt = 0) {
-    console.log("[Runner.runOnce] Starting exec flow from node:", startNodeId);
-    const executedNodes = [];
     const allConnectedNodes = /* @__PURE__ */ new Set();
-    let currentNodeId = startNodeId;
-    while (currentNodeId) {
+    const execEdgeOrder = [];
+    const queue = [{ nodeId: startNodeId, fromEdgeId: null }];
+    const visited = /* @__PURE__ */ new Set();
+    while (queue.length > 0) {
+      const { nodeId: currentNodeId, fromEdgeId } = queue.shift();
+      if (visited.has(currentNodeId)) continue;
+      visited.add(currentNodeId);
+      if (fromEdgeId) execEdgeOrder.push(fromEdgeId);
       const node = this.graph.nodes.get(currentNodeId);
-      if (!node) {
-        console.warn(`[Runner.runOnce] Node not found: ${currentNodeId}`);
-        break;
-      }
-      executedNodes.push(currentNodeId);
+      if (!node) continue;
       allConnectedNodes.add(currentNodeId);
-      console.log(`[Runner.runOnce] Executing: ${node.title} (${node.type})`);
       for (const input of node.inputs) {
         if (input.portType === "data") {
           for (const edge of this.graph.edges.values()) {
@@ -2173,40 +2383,38 @@ class Runner {
         }
       }
       this.executeNode(currentNodeId, dt);
-      currentNodeId = this.findNextExecNode(currentNodeId);
+      const execOutputs = node.outputs.filter((p) => p.portType === "exec");
+      for (const execOutput of execOutputs) {
+        for (const edge of this.graph.edges.values()) {
+          if (edge.fromNode === currentNodeId && edge.fromPort === execOutput.id) {
+            queue.push({ nodeId: edge.toNode, fromEdgeId: edge.id });
+          }
+        }
+      }
     }
-    console.log("[Runner.runOnce] Executed nodes:", executedNodes.length);
     const connectedEdges = /* @__PURE__ */ new Set();
     for (const edge of this.graph.edges.values()) {
       if (allConnectedNodes.has(edge.fromNode) && allConnectedNodes.has(edge.toNode)) {
         connectedEdges.add(edge.id);
       }
     }
-    console.log("[Runner.runOnce] Connected edges count:", connectedEdges.size);
-    return { connectedNodes: allConnectedNodes, connectedEdges };
+    return { connectedNodes: allConnectedNodes, connectedEdges, execEdgeOrder };
   }
-  /**
-   * Find the next node to execute by following exec output
-   * @param {string} nodeId - Current node ID
-   * @returns {string|null} Next node ID or null
-   */
-  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
-   * @param {string} nodeId - Node ID to execute
-   * @param {number} dt - Delta time
-   */
   executeNode(nodeId, dt) {
     var _a, _b;
     const node = this.graph.nodes.get(nodeId);
@@ -2304,7 +2512,7 @@ class HtmlOverlay {
     const header = document.createElement("div");
     header.className = "node-header";
     Object.assign(header.style, {
-      height: "24px",
+      height: "26px",
       flexShrink: "0",
       display: "flex",
       alignItems: "center",
@@ -2331,7 +2539,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 +2548,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 +2571,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 +2594,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();
@@ -2511,10 +2728,44 @@ class PropertyPanel {
     this.hooks = hooks;
     this.registry = registry;
     this.render = render;
+    this._def = null;
     this.panel = null;
     this.currentNode = null;
     this.isVisible = false;
+    this._selfUpdating = false;
     this._createPanel();
+    this._bindHooks();
+  }
+  _bindHooks() {
+    var _a, _b, _c, _d, _e, _f;
+    (_a = this.hooks) == null ? void 0 : _a.on("edge:create", () => {
+      if (this._canRefresh()) this._renderContent();
+    });
+    (_b = this.hooks) == null ? void 0 : _b.on("edge:delete", () => {
+      if (this._canRefresh()) this._renderContent();
+    });
+    (_c = this.hooks) == null ? void 0 : _c.on("node:updated", (node) => {
+      var _a2;
+      if (this._canRefresh() && ((_a2 = this.currentNode) == null ? void 0 : _a2.id) === (node == null ? void 0 : node.id) && !this._selfUpdating) {
+        this._renderContent();
+      }
+    });
+    (_d = this.hooks) == null ? void 0 : _d.on("node:move", (node) => {
+      var _a2;
+      if (this._canRefresh() && ((_a2 = this.currentNode) == null ? void 0 : _a2.id) === (node == null ? void 0 : node.id)) {
+        this._updatePositionFields();
+      }
+    });
+    (_e = this.hooks) == null ? void 0 : _e.on("runner:tick", () => {
+      if (this._canRefresh()) this._updateLiveValues();
+    });
+    (_f = this.hooks) == null ? void 0 : _f.on("runner:stop", () => {
+      if (this._canRefresh()) this._updateLiveValues();
+    });
+  }
+  _canRefresh() {
+    if (!this.isVisible || !this.currentNode) return false;
+    return !this.panel.querySelector("[data-field]:focus");
   }
   _createPanel() {
     this.panel = document.createElement("div");
@@ -2544,8 +2795,10 @@ class PropertyPanel {
     });
   }
   open(node) {
+    var _a, _b;
     if (!node) return;
     this.currentNode = node;
+    this._def = ((_b = (_a = this.registry) == null ? void 0 : _a.types) == null ? void 0 : _b.get(node.type)) || null;
     this.isVisible = true;
     this._renderContent();
     this.panel.style.display = "block";
@@ -2581,9 +2834,9 @@ class PropertyPanel {
           </div>
         </div>
       </div>
-      
+
       <div class="section">
-        <div class="section-title">Position & Size</div>
+        <div class="section-title">Position &amp; Size</div>
         <div class="section-body">
           <div class="field-row">
             <div class="field">
@@ -2607,16 +2860,92 @@ class PropertyPanel {
           </div>
         </div>
       </div>
-      
+
+      ${this._renderConnections(node)}
       ${this._renderPorts(node)}
+      ${this._renderLiveValues(node)}
       ${this._renderState(node)}
-      
+
       <div class="panel-actions">
         <button class="btn-secondary panel-close-btn">Close</button>
       </div>
     `;
     this._attachInputListeners();
   }
+  _renderConnections(node) {
+    const edges = [...this.graph.edges.values()];
+    const incoming = edges.filter((e) => e.toNode === node.id);
+    const outgoing = edges.filter((e) => e.fromNode === node.id);
+    if (!incoming.length && !outgoing.length) return "";
+    const edgeLabel = (e, dir) => {
+      const otherId = dir === "in" ? e.fromNode : e.toNode;
+      const other = this.graph.nodes.get(otherId);
+      return `<div class="port-item">
+        <span class="port-icon data"></span>
+        <span class="port-name" style="font-size:10px;color:#5a5a78;">${(other == null ? void 0 : other.title) ?? otherId}</span>
+      </div>`;
+    };
+    return `
+      <div class="section">
+        <div class="section-title">Connections</div>
+        <div class="section-body">
+          ${incoming.length ? `
+            <div class="port-group">
+              <div class="port-group-title">Incoming (${incoming.length})</div>
+              ${incoming.map((e) => edgeLabel(e, "in")).join("")}
+            </div>` : ""}
+          ${outgoing.length ? `
+            <div class="port-group">
+              <div class="port-group-title">Outgoing (${outgoing.length})</div>
+              ${outgoing.map((e) => edgeLabel(e, "out")).join("")}
+            </div>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  _renderLiveValues(node) {
+    var _a, _b;
+    const cur = (_b = (_a = this.graph) == null ? void 0 : _a._curBuf) == null ? void 0 : _b.call(_a);
+    if (!cur) return "";
+    const lines = [];
+    for (const input of node.inputs) {
+      `${node.id}:${input.id}`;
+      for (const edge of this.graph.edges.values()) {
+        if (edge.toNode === node.id && edge.toPort === input.id) {
+          const upKey = `${edge.fromNode}:${edge.fromPort}`;
+          const val = cur.get(upKey);
+          if (val !== void 0) {
+            lines.push(`<div class="port-item">
+              <span class="port-icon data"></span>
+              <span class="port-name">↳ ${input.name}</span>
+              <span class="port-type" style="color:var(--color-primary);background:rgba(99,102,241,0.1);">${JSON.stringify(val)}</span>
+            </div>`);
+          }
+          break;
+        }
+      }
+    }
+    for (const output of node.outputs) {
+      const key = `${node.id}:${output.id}`;
+      const val = cur.get(key);
+      if (val !== void 0) {
+        lines.push(`<div class="port-item">
+          <span class="port-icon exec" style="background:#10b981;"></span>
+          <span class="port-name">↳ ${output.name}</span>
+          <span class="port-type" style="color:#10b981;background:rgba(16,185,129,0.1);">${JSON.stringify(val)}</span>
+        </div>`);
+      }
+    }
+    if (!lines.length) return "";
+    return `
+      <div class="section">
+        <div class="section-title">Live Values</div>
+        <div class="section-body">
+          ${lines.join("")}
+        </div>
+      </div>
+    `;
+  }
   _renderPorts(node) {
     if (!node.inputs.length && !node.outputs.length) return "";
     return `
@@ -2635,7 +2964,6 @@ class PropertyPanel {
               `).join("")}
             </div>
           ` : ""}
-          
           ${node.outputs.length ? `
             <div class="port-group">
               <div class="port-group-title">Outputs (${node.outputs.length})</div>
@@ -2653,38 +2981,56 @@ class PropertyPanel {
     `;
   }
   _renderState(node) {
-    if (!node.state || Object.keys(node.state).length === 0) return "";
+    if (!node.state) return "";
+    const entries = Object.entries(node.state).filter(([key, value]) => {
+      if (key.startsWith("_")) return false;
+      const t = typeof value;
+      return t === "string" || t === "number" || t === "boolean";
+    });
+    if (!entries.length) return "";
+    const fieldHtml = ([key, value]) => {
+      if (typeof value === "boolean") {
+        return `
+          <div class="field">
+            <label>${key}</label>
+            <select data-field="state.${key}">
+              <option value="true"${value ? " selected" : ""}>true</option>
+              <option value="false"${!value ? " selected" : ""}>false</option>
+            </select>
+          </div>`;
+      }
+      return `
+        <div class="field">
+          <label>${key}</label>
+          <input type="${typeof value === "number" ? "number" : "text"}"
+                 data-field="state.${key}"
+                 value="${value}" />
+        </div>`;
+    };
     return `
       <div class="section">
         <div class="section-title">State</div>
         <div class="section-body">
-          ${Object.entries(node.state).map(([key, value]) => `
-            <div class="field">
-              <label>${key}</label>
-              <input 
-                type="${typeof value === "number" ? "number" : "text"}" 
-                data-field="state.${key}" 
-                value="${value}" 
-              />
-            </div>
-          `).join("")}
+          ${entries.map(fieldHtml).join("")}
         </div>
       </div>
     `;
   }
   _attachInputListeners() {
-    const inputs = this.panel.querySelectorAll("[data-field]");
-    inputs.forEach((input) => {
+    var _a;
+    this.panel.querySelectorAll("[data-field]").forEach((input) => {
       input.addEventListener("change", () => {
+        this._selfUpdating = true;
         this._handleFieldChange(input.dataset.field, input.value);
+        this._selfUpdating = false;
       });
     });
-    this.panel.querySelector(".panel-close-btn").addEventListener("click", () => {
+    (_a = this.panel.querySelector(".panel-close-btn")) == null ? void 0 : _a.addEventListener("click", () => {
       this.close();
     });
   }
   _handleFieldChange(field, value) {
-    var _a;
+    var _a, _b;
     const node = this.currentNode;
     if (!node) return;
     switch (field) {
@@ -2708,31 +3054,277 @@ class PropertyPanel {
       default:
         if (field.startsWith("state.")) {
           const key = field.substring(6);
-          if (node.state) {
-            const originalValue = node.state[key];
-            node.state[key] = typeof originalValue === "number" ? parseFloat(value) : value;
+          if (node.state && key in node.state) {
+            const orig = node.state[key];
+            if (typeof orig === "boolean") {
+              node.state[key] = value === "true";
+            } else if (typeof orig === "number") {
+              node.state[key] = parseFloat(value);
+            } else {
+              node.state[key] = value;
+            }
           }
         }
     }
     (_a = this.hooks) == null ? void 0 : _a.emit("node:updated", node);
-    if (this.render) {
-      this.render();
+    (_b = this.render) == null ? void 0 : _b.call(this);
+  }
+  /** Lightweight update of position fields only (no full re-render) */
+  _updatePositionFields() {
+    const node = this.currentNode;
+    if (!node) return;
+    const xEl = this.panel.querySelector('[data-field="x"]');
+    const yEl = this.panel.querySelector('[data-field="y"]');
+    if (xEl) xEl.value = Math.round(node.computed.x);
+    if (yEl) yEl.value = Math.round(node.computed.y);
+  }
+  /** Lightweight in-place update of the Live Values section */
+  _updateLiveValues() {
+    var _a, _b;
+    const node = this.currentNode;
+    if (!node) return;
+    const cur = (_b = (_a = this.graph) == null ? void 0 : _a._curBuf) == null ? void 0 : _b.call(_a);
+    if (!cur) return;
+    let section = this.panel.querySelector(".live-values-section");
+    const newHtml = this._renderLiveValues(node);
+    if (!newHtml) {
+      if (section) section.remove();
+      return;
+    }
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = newHtml;
+    const newSection = wrapper.firstElementChild;
+    newSection.classList.add("live-values-section");
+    if (section) {
+      section.replaceWith(newSection);
+    } else {
+      this.panel.querySelectorAll(".section");
+      const actions = this.panel.querySelector(".panel-actions");
+      if (actions) {
+        actions.before(newSection);
+      } else {
+        this.panel.querySelector(".panel-content").appendChild(newSection);
+      }
     }
   }
   destroy() {
-    if (this.panel) {
-      this.panel.remove();
+    var _a;
+    (_a = this.panel) == null ? void 0 : _a.remove();
+  }
+}
+class HelpOverlay {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      shortcuts: options.shortcuts || this._getDefaultShortcuts(),
+      onToggle: options.onToggle || null
+    };
+    this.isVisible = false;
+    this.overlay = null;
+    this.toggleBtn = null;
+    this._createElements();
+    this._bindEvents();
+  }
+  _getDefaultShortcuts() {
+    return [
+      {
+        group: "Selection",
+        items: [
+          { label: "Select node", key: "Click" },
+          { label: "Multi-select", key: "Shift+Click" },
+          { label: "Box select", key: "Ctrl+Drag" }
+        ]
+      },
+      {
+        group: "Edit",
+        items: [
+          { label: "Delete", key: "Del" },
+          { label: "Undo", key: "Ctrl+Z" },
+          { label: "Redo", key: "Ctrl+Y" }
+        ]
+      },
+      {
+        group: "Group & Align",
+        items: [
+          { label: "Create group", key: "Ctrl+G" },
+          { label: "Align horizontal", key: "A" },
+          { label: "Align vertical", key: "Shift+A" }
+        ]
+      },
+      {
+        group: "View",
+        items: [
+          { label: "Toggle snap", key: "G" },
+          { label: "Pan", key: "Mid+Drag" },
+          { label: "Zoom", key: "Scroll" },
+          { label: "Context menu", key: "RClick" }
+        ]
+      }
+    ];
+  }
+  _createElements() {
+    this.toggleBtn = document.createElement("div");
+    this.toggleBtn.id = "helpToggle";
+    this.toggleBtn.title = "Keyboard shortcuts (?)";
+    this.toggleBtn.textContent = "?";
+    this.container.appendChild(this.toggleBtn);
+    this.overlay = document.createElement("div");
+    this.overlay.id = "helpOverlay";
+    const sectionsHtml = this.options.shortcuts.map(
+      (group) => `
+      <h4>${group.group}</h4>
+      ${group.items.map(
+        (item) => `
+        <div class="shortcut-item">
+          <span>${item.label}</span>
+          <span class="shortcut-key">${item.key}</span>
+        </div>
+      `
+      ).join("")}
+    `
+    ).join("");
+    this.overlay.innerHTML = `
+      <h3>
+        <span>Keyboard Shortcuts</span>
+        <button class="close-btn" id="helpClose" title="Close">×</button>
+      </h3>
+      ${sectionsHtml}
+    `;
+    this.container.appendChild(this.overlay);
+  }
+  _bindEvents() {
+    this.toggleBtn.addEventListener("click", () => this.toggle());
+    const closeBtn = this.overlay.querySelector("#helpClose");
+    if (closeBtn) {
+      closeBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.close();
+      });
     }
+    document.addEventListener("mousedown", (e) => {
+      if (this.isVisible) {
+        if (!this.overlay.contains(e.target) && !this.toggleBtn.contains(e.target)) {
+          this.close();
+        }
+      }
+    });
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "?" || e.shiftKey && e.key === "/") {
+        if (!["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement.tagName)) {
+          e.preventDefault();
+          this.toggle();
+        }
+      }
+      if (e.key === "Escape" && this.isVisible) {
+        this.close();
+      }
+    });
+  }
+  toggle() {
+    if (this.isVisible) this.close();
+    else this.open();
+  }
+  open() {
+    this.isVisible = true;
+    this.overlay.classList.add("visible");
+    this.toggleBtn.classList.add("active");
+    if (this.options.onToggle) this.options.onToggle(true);
+  }
+  close() {
+    this.isVisible = false;
+    this.overlay.classList.remove("visible");
+    this.toggleBtn.classList.remove("active");
+    if (this.options.onToggle) this.options.onToggle(false);
+  }
+  destroy() {
+    var _a, _b;
+    (_a = this.toggleBtn) == null ? void 0 : _a.remove();
+    (_b = this.overlay) == null ? void 0 : _b.remove();
   }
 }
+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,
+  enableHelp = true,
+  helpShortcuts = null,
+  setupDefaultContextMenu: setupDefaultContextMenu$1 = true,
+  setupContextMenu = null,
+  plugins = []
 } = {}) {
+  var _a;
   let canvas;
   let container;
   if (typeof target === "string") {
@@ -2780,6 +3372,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 +3421,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 +3429,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,
@@ -2821,7 +3453,15 @@ function createGraphEditor(target, {
       propertyPanel.open(node);
     });
   }
+  let helpOverlay = null;
+  if (enableHelp) {
+    helpOverlay = new HelpOverlay(container, {
+      shortcuts: helpShortcuts
+    });
+  }
   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 +3496,37 @@ 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;
-    }
+  hooks.on("graph:deserialize", () => {
+    renderer.setTransform({ scale: 1, offsetX: 0, offsetY: 0 });
+    controller.render();
   });
-  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();
   });
@@ -3589,6 +3571,7 @@ function createGraphEditor(target, {
       contextMenu.destroy();
       if (propertyPanel) propertyPanel.destroy();
       if (minimap) minimap.destroy();
+      if (helpOverlay) helpOverlay.destroy();
     }
   };
   if (autorun) runner.start();