html-overlay-node 0.1.10 → 0.1.11

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

@@ -535,10 +535,13 @@ class Graph {
     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;
+    if (def.html) {
+      const lastPortBottom = maxPorts > 0 ? 50 + (maxPorts - 1) * portSpacing : 26;
+      return Math.max(lastPortBottom + 50, 90);
+    }
+    const padding = 8;
     let h = headerHeight + padding + maxPorts * portSpacing + padding;
-    if (def.html) h += 16;
     return Math.max(h, 40);
   }
 }
@@ -590,7 +593,8 @@ const _CanvasRenderer = class _CanvasRenderer {
         port: "#4f46e5",
         portExec: "#10b981",
         edge: "rgba(255, 255, 255, 0.12)",
-        edgeActive: "#6366f1",
+        edgeActive: "#34c38f",
+        // green for active edge animation
         accent: "#6366f1",
         accentBright: "#818cf8",
         accentGlow: "rgba(99, 102, 241, 0.25)"
@@ -669,12 +673,7 @@ const _CanvasRenderer = class _CanvasRenderer {
     ctx.closePath();
     ctx.fill();
   }
-  _drawScreenText(text, lx, ly, {
-    fontPx = 11,
-    color = this.theme.text,
-    align = "left",
-    baseline = "alphabetic"
-  } = {}) {
+  _drawScreenText(text, lx, ly, { fontPx = 11, color = this.theme.text, align = "left", baseline = "alphabetic" } = {}) {
     const { ctx } = this;
     const { x: sx, y: sy } = this.worldToScreen(lx, ly);
     ctx.save();
@@ -731,8 +730,12 @@ const _CanvasRenderer = class _CanvasRenderer {
     selection = /* @__PURE__ */ new Set(),
     tempEdge = null,
     time = performance.now(),
+    activeNodes = /* @__PURE__ */ new Set(),
+    // Now explicitly passing active nodes
     activeEdges = /* @__PURE__ */ new Set(),
-    drawEdges = true
+    activeEdgeTimes = /* @__PURE__ */ new Map(),
+    drawEdges = true,
+    loopActiveEdges = false
   } = {}) {
     var _a, _b, _c, _d;
     graph.updateWorldTransforms();
@@ -749,7 +752,7 @@ const _CanvasRenderer = class _CanvasRenderer {
       }
     }
     if (drawEdges) {
-      ctx.lineWidth = 1.5 / this.scale;
+      ctx.lineWidth = 2.5 / this.scale;
       for (const e of graph.edges.values()) {
         const isActive = activeEdges && activeEdges.has(e.id);
         if (isActive) {
@@ -757,11 +760,14 @@ const _CanvasRenderer = class _CanvasRenderer {
           ctx.shadowColor = this.theme.edgeActive;
           ctx.shadowBlur = 8 / this.scale;
           ctx.strokeStyle = this.theme.edgeActive;
-          ctx.lineWidth = 2 / this.scale;
+          ctx.lineWidth = 3 / this.scale;
           ctx.setLineDash([]);
           this._drawEdge(graph, e);
           ctx.restore();
-          const dotT = time / 1e3 * 1.2 % 1;
+          (activeEdgeTimes == null ? void 0 : activeEdgeTimes.get(e.id)) ?? time;
+          const flowSpeed = this.theme.flowSpeed || 150;
+          edgeLen / flowSpeed * 1e3;
+          const dotT = loopActiveEdges ? time / 1e3 * (flowSpeed / edgeLen) % 1 : time / 1e3 * 1.2 % 1;
           const dotPos = this._getEdgeDotPosition(graph, e, dotT);
           if (dotPos) {
             ctx.save();
@@ -776,7 +782,7 @@ const _CanvasRenderer = class _CanvasRenderer {
         } else {
           ctx.setLineDash([]);
           ctx.strokeStyle = theme.edge;
-          ctx.lineWidth = 1.5 / this.scale;
+          ctx.lineWidth = 2.5 / this.scale;
           this._drawEdge(graph, e);
         }
       }
@@ -787,16 +793,22 @@ const _CanvasRenderer = class _CanvasRenderer {
       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;
+      this.ctx.lineWidth = 2.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 }];
+        ptsForArrow = [
+          { x: a.x, y: a.y },
+          { x: b.x, y: b.y }
+        ];
       } else if (this.edgeStyle === "orthogonal") {
         ptsForArrow = this._drawOrthogonal(a.x, a.y, b.x, b.y);
       } else {
         this._drawCurve(a.x, a.y, b.x, b.y);
-        ptsForArrow = [{ x: a.x, y: a.y }, { x: b.x, y: b.y }];
+        ptsForArrow = [
+          { x: a.x, y: a.y },
+          { x: b.x, y: b.y }
+        ];
       }
       this.ctx.setLineDash(prevDash);
       if (ptsForArrow && ptsForArrow.length >= 2) {
@@ -820,6 +832,12 @@ const _CanvasRenderer = class _CanvasRenderer {
         }
       }
     }
+    if (activeNodes.size > 0) {
+      for (const nodeId of activeNodes) {
+        const node = graph.nodes.get(nodeId);
+        if (node) this._drawActiveNodeBorder(node, time);
+      }
+    }
     this._resetTransform();
   }
   _rgba(hex, a) {
@@ -841,11 +859,11 @@ const _CanvasRenderer = class _CanvasRenderer {
     const categoryColor = node.color || (typeDef == null ? void 0 : typeDef.color) || theme.accent;
     if (selected) {
       ctx.save();
-      ctx.shadowColor = theme.accentGlow;
-      ctx.shadowBlur = 10 / this.scale;
-      ctx.strokeStyle = theme.accentBright;
-      ctx.lineWidth = 2 / this.scale;
-      const pad = 1.5 / this.scale;
+      ctx.shadowColor = "rgba(255,255,255,0.3)";
+      ctx.shadowBlur = 8 / this.scale;
+      ctx.strokeStyle = "#ffffff";
+      ctx.lineWidth = 1.5 / this.scale;
+      const pad = 8 / this.scale;
       roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r + pad);
       ctx.stroke();
       ctx.restore();
@@ -859,7 +877,7 @@ const _CanvasRenderer = class _CanvasRenderer {
     ctx.fill();
     ctx.restore();
     ctx.fillStyle = theme.node;
-    ctx.strokeStyle = selected ? theme.accentBright : theme.nodeBorder;
+    ctx.strokeStyle = selected ? "rgba(255,255,255,0.4)" : theme.nodeBorder;
     ctx.lineWidth = 1 / this.scale;
     roundRect(ctx, x, y, w, h, r);
     ctx.fill();
@@ -873,7 +891,7 @@ const _CanvasRenderer = class _CanvasRenderer {
     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.strokeStyle = selected ? "rgba(255,255,255,0.2)" : this._rgba(theme.nodeBorder, 0.6);
     ctx.lineWidth = 1 / this.scale;
     ctx.beginPath();
     ctx.moveTo(x, y + headerH);
@@ -919,6 +937,43 @@ const _CanvasRenderer = class _CanvasRenderer {
       }
     });
   }
+  _drawActiveNodeBorder(node, time) {
+    const { ctx, theme } = this;
+    const { x, y, w, h } = node.computed;
+    const r = node.radius || 12;
+    const speed = 30;
+    const dashLen = 6;
+    const gapLen = 6;
+    ctx.save();
+    ctx.shadowColor = theme.accentBright || "#7080d8";
+    ctx.shadowBlur = (12 + Math.sin(time / 200) * 4) / this.scale;
+    ctx.strokeStyle = theme.accentBright || "#7080d8";
+    ctx.lineWidth = 3 / this.scale;
+    ctx.setLineDash([dashLen / this.scale, gapLen / this.scale]);
+    ctx.lineDashOffset = -(time / 1e3) * speed / this.scale;
+    ctx.beginPath();
+    const pad = 2 / this.scale;
+    this._roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r + pad);
+    ctx.stroke();
+    ctx.restore();
+  }
+  // Internal helper for rounded rectangles if not using the browser's native one
+  _roundRect(ctx, x, y, w, h, r) {
+    if (typeof r === "number") {
+      r = { tl: r, tr: r, br: r, bl: r };
+    }
+    ctx.beginPath();
+    ctx.moveTo(x + r.tl, y);
+    ctx.lineTo(x + w - r.tr, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r.tr);
+    ctx.lineTo(x + w, y + h - r.br);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r.br, y + h);
+    ctx.lineTo(x + r.bl, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r.bl);
+    ctx.lineTo(x, y + r.tl);
+    ctx.quadraticCurveTo(x, y, x + r.tl, y);
+    ctx.closePath();
+  }
   _drawPortShape(cx, cy, portType) {
     const { ctx, theme } = this;
     if (portType === "exec") {
@@ -966,14 +1021,14 @@ const _CanvasRenderer = class _CanvasRenderer {
   }
   /** Selection border for HTML overlay nodes, drawn on the edge canvas */
   _drawHtmlSelectionBorder(node) {
-    const { ctx, theme } = this;
+    const { ctx } = this;
     const { x, y, w, h } = node.computed;
     const r = 2;
-    const pad = 1.5 / this.scale;
+    const pad = 2.5 / this.scale;
     ctx.save();
-    ctx.shadowColor = theme.accentGlow;
-    ctx.shadowBlur = 14 / this.scale;
-    ctx.strokeStyle = theme.accentBright;
+    ctx.shadowColor = "rgba(255,255,255,0.3)";
+    ctx.shadowBlur = 8 / this.scale;
+    ctx.strokeStyle = "#ffffff";
     ctx.lineWidth = 1.5 / this.scale;
     roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r);
     ctx.stroke();
@@ -981,24 +1036,41 @@ const _CanvasRenderer = class _CanvasRenderer {
   }
   /** Rotating dashed border drawn on the edge canvas for executing nodes */
   _drawActiveNodeBorder(node, time) {
-    const { ctx, theme } = this;
+    const { ctx } = this;
     const { x, y, w, h } = node.computed;
     const r = 2;
-    const pad = 2.5 / this.scale;
+    const pad = 8 / 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;
+    ctx.strokeStyle = "rgba(74,176,217,0.9)";
+    ctx.lineWidth = 2 / this.scale;
+    ctx.shadowColor = "#4ab0d9";
+    ctx.shadowBlur = 6 / this.scale;
     roundRect(ctx, x - pad, y - pad, w + pad * 2, h + pad * 2, r + pad);
     ctx.stroke();
     ctx.restore();
   }
+  /** Approximate arc length of an edge in world coordinates */
+  _getEdgeLength(graph, e) {
+    const from = graph.nodes.get(e.fromNode);
+    const to = graph.nodes.get(e.toNode);
+    if (!from || !to) return 200;
+    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 === "orthogonal") {
+      return Math.abs(x2 - x1) + Math.abs(y2 - y1);
+    }
+    const chord = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    return this.edgeStyle === "bezier" ? chord * 1.4 : chord;
+  }
   _drawEdge(graph, e) {
     const from = graph.nodes.get(e.fromNode);
     const to = graph.nodes.get(e.toNode);
@@ -1088,7 +1160,8 @@ const _CanvasRenderer = class _CanvasRenderer {
     activeNodes = /* @__PURE__ */ new Set(),
     selection = /* @__PURE__ */ new Set(),
     time = performance.now(),
-    tempEdge = null
+    tempEdge = null,
+    loopActiveEdges = false
   } = {}) {
     var _a, _b;
     this._resetTransform();
@@ -1102,12 +1175,16 @@ const _CanvasRenderer = class _CanvasRenderer {
         ctx.shadowColor = theme.edgeActive;
         ctx.shadowBlur = 6 / this.scale;
         ctx.strokeStyle = theme.edgeActive;
-        ctx.lineWidth = 2 / this.scale;
+        ctx.lineWidth = 3 / this.scale;
         ctx.setLineDash([]);
         this._drawEdge(graph, e);
         ctx.restore();
+        const flowSpeed = this.theme.flowSpeed || 150;
         const activationTime = activeEdgeTimes.get(e.id) ?? time;
-        const dotT = Math.min(1, (time - activationTime) / 620);
+        const edgeLen2 = Math.max(50, this._getEdgeLength(graph, e));
+        const duration = edgeLen2 / flowSpeed * 1e3;
+        const rawT = (time - activationTime) / duration;
+        const dotT = loopActiveEdges ? time / 1e3 * (flowSpeed / edgeLen2) % 1 : Math.min(1, rawT);
         const dotPos = this._getEdgeDotPosition(graph, e, dotT);
         if (dotPos) {
           ctx.save();
@@ -1122,7 +1199,7 @@ const _CanvasRenderer = class _CanvasRenderer {
       } else {
         ctx.setLineDash([]);
         ctx.strokeStyle = theme.edge;
-        ctx.lineWidth = 1.5 / this.scale;
+        ctx.lineWidth = 2.5 / this.scale;
         this._drawEdge(graph, e);
       }
     }
@@ -1144,16 +1221,22 @@ const _CanvasRenderer = class _CanvasRenderer {
       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;
+      this.ctx.lineWidth = 2.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 }];
+        ptsForArrow = [
+          { x: a.x, y: a.y },
+          { x: b.x, y: b.y }
+        ];
       } else if (this.edgeStyle === "orthogonal") {
         ptsForArrow = this._drawOrthogonal(a.x, a.y, b.x, b.y);
       } else {
         this._drawCurve(a.x, a.y, b.x, b.y);
-        ptsForArrow = [{ x: a.x, y: a.y }, { x: b.x, y: b.y }];
+        ptsForArrow = [
+          { x: a.x, y: a.y },
+          { x: b.x, y: b.y }
+        ];
       }
       this.ctx.setLineDash(prevDash);
       if (ptsForArrow && ptsForArrow.length >= 2) {
@@ -1351,6 +1434,16 @@ const _Controller = class _Controller {
     this._onContextMenuEvt = this._onContextMenu.bind(this);
     this._onDblClickEvt = this._onDblClick.bind(this);
     this._bindEvents();
+    this.hooks.on("runner:step-updated", ({ activeNodeId, activeEdgeIds = [] }) => {
+      this.activeNodes = activeNodeId ? /* @__PURE__ */ new Set([activeNodeId]) : /* @__PURE__ */ new Set();
+      this.activeEdges = new Set(activeEdgeIds);
+      this.activeEdgeTimes.clear();
+      const now = performance.now();
+      for (const edgeId of activeEdgeIds) {
+        this.activeEdgeTimes.set(edgeId, now);
+      }
+      this.render();
+    });
   }
   destroy() {
     const c = this.renderer.canvas;
@@ -1642,7 +1735,8 @@ const _Controller = class _Controller {
       const dx = w.x - this.resizing.startX;
       const dy = w.y - this.resizing.startY;
       const minW = _Controller.MIN_NODE_WIDTH;
-      const minH = _Controller.MIN_NODE_HEIGHT;
+      const maxPorts = Math.max(n.inputs.length, n.outputs.length);
+      const minH = maxPorts > 0 ? Math.max(_Controller.MIN_NODE_HEIGHT, 42 + maxPorts * 20) : _Controller.MIN_NODE_HEIGHT;
       n.size.width = Math.max(minW, this.resizing.startW + dx);
       n.size.height = Math.max(minH, this.resizing.startH + dy);
       (_a = this.hooks) == null ? void 0 : _a.emit("node:resize", n);
@@ -1900,17 +1994,22 @@ const _Controller = class _Controller {
     this.graph.updateWorldTransforms();
     this.render();
   }
-  render() {
+  render(time = performance.now()) {
     var _a;
     const tEdge = this.renderTempEdge();
+    const runner = this.graph.runner;
+    const isStepMode = !!runner && runner.executionMode === "step";
     this.renderer.draw(this.graph, {
       selection: this.selection,
       tempEdge: null,
       // Don't draw temp edge on background
       boxSelecting: this.boxSelecting,
       activeEdges: this.activeEdges || /* @__PURE__ */ new Set(),
-      drawEdges: !this.edgeRenderer
+      activeEdgeTimes: this.activeEdgeTimes,
+      drawEdges: !this.edgeRenderer,
       // Only draw edges here if no separate edge renderer
+      time,
+      loopActiveEdges: isStepMode
     });
     (_a = this.htmlOverlay) == null ? void 0 : _a.draw(this.graph, this.selection);
     if (this.edgeRenderer) {
@@ -1922,8 +2021,9 @@ const _Controller = class _Controller {
         activeEdgeTimes: this.activeEdgeTimes,
         activeNodes: this.activeNodes,
         selection: this.selection,
-        time: performance.now(),
-        tempEdge: tEdge
+        time,
+        tempEdge: tEdge,
+        loopActiveEdges: isStepMode
       });
       this.edgeRenderer._resetTransform();
     }
@@ -2317,6 +2417,10 @@ class Runner {
     this._raf = null;
     this._last = 0;
     this.cyclesPerFrame = Math.max(1, cyclesPerFrame | 0);
+    this.executionMode = "run";
+    this.activePlan = null;
+    this.activeStepIndex = -1;
+    this.stepCache = /* @__PURE__ */ new Map();
   }
   isRunning() {
     return this.running;
@@ -2359,6 +2463,7 @@ class Runner {
   runOnce(startNodeId, dt = 0) {
     const allConnectedNodes = /* @__PURE__ */ new Set();
     const execEdgeOrder = [];
+    const runCache = /* @__PURE__ */ new Map();
     const queue = [{ nodeId: startNodeId, fromEdgeId: null }];
     const visited = /* @__PURE__ */ new Set();
     while (queue.length > 0) {
@@ -2376,15 +2481,15 @@ class Runner {
               const sourceNode = this.graph.nodes.get(edge.fromNode);
               if (sourceNode && !allConnectedNodes.has(edge.fromNode)) {
                 allConnectedNodes.add(edge.fromNode);
-                this.executeNode(edge.fromNode, dt);
+                this._executeNodeWithCache(edge.fromNode, dt, runCache);
               }
             }
           }
         }
       }
-      this.executeNode(currentNodeId, dt);
-      const execOutputs = node.outputs.filter((p) => p.portType === "exec");
-      for (const execOutput of execOutputs) {
+      this._executeNodeWithCache(currentNodeId, dt, runCache);
+      const execOutputPorts = node.outputs.filter((p) => p.portType === "exec");
+      for (const execOutput of execOutputPorts) {
         for (const edge of this.graph.edges.values()) {
           if (edge.fromNode === currentNodeId && edge.fromPort === execOutput.id) {
             queue.push({ nodeId: edge.toNode, fromEdgeId: edge.id });
@@ -2400,6 +2505,130 @@ class Runner {
     }
     return { connectedNodes: allConnectedNodes, connectedEdges, execEdgeOrder };
   }
+  setExecutionMode(mode) {
+    this.executionMode = mode;
+    if (mode === "run") this.resetStepping();
+  }
+  resetStepping() {
+    var _a, _b;
+    this.activePlan = null;
+    this.activeStepIndex = -1;
+    this.stepCache.clear();
+    (_b = (_a = this.hooks) == null ? void 0 : _a.emit) == null ? void 0 : _b.call(_a, "runner:step-updated", { activeNodeId: null });
+  }
+  buildPlan(startNodeId) {
+    const plan = [];
+    const allConnectedNodes = /* @__PURE__ */ new Set();
+    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);
+      allConnectedNodes.add(currentNodeId);
+      const node = this.graph.nodes.get(currentNodeId);
+      if (!node) continue;
+      const dataDeps = [];
+      for (const input of node.inputs) {
+        if (input.portType === "data") {
+          for (const edge of this.graph.edges.values()) {
+            if (edge.toNode === currentNodeId && edge.toPort === input.id) {
+              const srcId = edge.fromNode;
+              if (!allConnectedNodes.has(srcId)) {
+                allConnectedNodes.add(srcId);
+                dataDeps.push(srcId);
+              }
+            }
+          }
+        }
+      }
+      const incomingEdges = [];
+      for (const edge of this.graph.edges.values()) {
+        if (edge.toNode === currentNodeId) {
+          incomingEdges.push(edge.id);
+        }
+      }
+      plan.push({ nodeId: currentNodeId, fromEdgeId, incomingEdges, dataDeps });
+      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 });
+          }
+        }
+      }
+    }
+    return plan;
+  }
+  startStepping(startNodeId) {
+    var _a, _b;
+    this.stepCache.clear();
+    this.activePlan = this.buildPlan(startNodeId);
+    this.activeStepIndex = 0;
+    const step = this.activePlan[0];
+    (_b = (_a = this.hooks) == null ? void 0 : _a.emit) == null ? void 0 : _b.call(_a, "runner:step-updated", {
+      activeNodeId: step == null ? void 0 : step.nodeId,
+      activeEdgeIds: (step == null ? void 0 : step.incomingEdges) || []
+    });
+    this.start();
+  }
+  executeNextStep() {
+    var _a, _b, _c, _d;
+    if (!this.activePlan || this.activeStepIndex < 0 || this.activeStepIndex >= this.activePlan.length) {
+      this.resetStepping();
+      return null;
+    }
+    const step = this.activePlan[this.activeStepIndex];
+    for (const depId of step.dataDeps) {
+      this._executeNodeWithCache(depId, 0, this.stepCache);
+    }
+    this._executeNodeWithCache(step.nodeId, 0, this.stepCache);
+    this.activeStepIndex++;
+    if (this.activeStepIndex < this.activePlan.length) {
+      const nextStep = this.activePlan[this.activeStepIndex];
+      (_b = (_a = this.hooks) == null ? void 0 : _a.emit) == null ? void 0 : _b.call(_a, "runner:step-updated", {
+        activeNodeId: nextStep.nodeId,
+        activeEdgeIds: nextStep.incomingEdges || []
+      });
+    } else {
+      (_d = (_c = this.hooks) == null ? void 0 : _c.emit) == null ? void 0 : _d.call(_c, "runner:step-updated", { activeNodeId: null });
+      this.resetStepping();
+    }
+    return step.nodeId;
+  }
+  /** Execute a node using a shared run-local output cache for reliable data passing. */
+  _executeNodeWithCache(nodeId, dt, runCache) {
+    var _a, _b;
+    const node = this.graph.nodes.get(nodeId);
+    if (!node) return;
+    const def = this.registry.types.get(node.type);
+    if (!(def == null ? void 0 : def.onExecute)) return;
+    try {
+      def.onExecute(node, {
+        dt,
+        graph: this.graph,
+        getInput: (portName) => {
+          const p = node.inputs.find((i) => i.name === portName) || node.inputs[0];
+          if (!p) return void 0;
+          for (const edge of this.graph.edges.values()) {
+            if (edge.toNode === nodeId && edge.toPort === p.id) {
+              const key = `${edge.fromNode}:${edge.fromPort}`;
+              return runCache.has(key) ? runCache.get(key) : this.graph._curBuf().get(key);
+            }
+          }
+          return void 0;
+        },
+        setOutput: (portName, value) => {
+          const p = node.outputs.find((o) => o.name === portName) || node.outputs[0];
+          if (p) {
+            runCache.set(`${node.id}:${p.id}`, value);
+          }
+        }
+      });
+    } catch (err) {
+      (_b = (_a = this.hooks) == null ? void 0 : _a.emit) == null ? void 0 : _b.call(_a, "error", err);
+    }
+  }
   findAllNextExecNodes(nodeId) {
     const node = this.graph.nodes.get(nodeId);
     if (!node) return [];
@@ -2453,7 +2682,9 @@ class Runner {
       const dtMs = this._last ? t - this._last : 0;
       this._last = t;
       const dt = dtMs / 1e3;
-      this.step(this.cyclesPerFrame, dt);
+      if (this.executionMode === "run") {
+        this.step(this.cyclesPerFrame, dt);
+      }
       (_b2 = (_a2 = this.hooks) == null ? void 0 : _a2.emit) == null ? void 0 : _b2.call(_a2, "runner:tick", {
         time: t,
         dt,
@@ -2587,6 +2818,7 @@ class HtmlOverlay {
       }
       seen.add(node.id);
     }
+    this._drawStepOverlay(graph);
     for (const [id, el] of this.nodes) {
       if (!seen.has(id)) {
         el.remove();
@@ -2594,6 +2826,59 @@ class HtmlOverlay {
       }
     }
   }
+  _drawStepOverlay(graph) {
+    const runner = graph.runner;
+    if (!runner || runner.executionMode !== "step" || !runner.activePlan) {
+      if (this._stepBtn) {
+        this._stepBtn.style.display = "none";
+      }
+      return;
+    }
+    const nextStep = runner.activePlan[runner.activeStepIndex];
+    if (!nextStep) {
+      if (this._stepBtn) this._stepBtn.style.display = "none";
+      return;
+    }
+    const node = graph.nodes.get(nextStep.nodeId);
+    if (!node) return;
+    if (!this._stepBtn) {
+      this._stepBtn = document.createElement("button");
+      this._stepBtn.className = "step-play-button";
+      this._stepBtn.innerHTML = "▶";
+      Object.assign(this._stepBtn.style, {
+        position: "absolute",
+        zIndex: "100",
+        width: "20px",
+        height: "20px",
+        borderRadius: "4px",
+        border: "none",
+        background: "transparent",
+        color: "white",
+        fontSize: "12px",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        // boxShadow: "0 2px 6px rgba(0,0,0,0.3)",
+        pointerEvents: "auto",
+        transition: "transform 0.1s, background 0.2s"
+      });
+      this._stepBtn.addEventListener("mouseover", () => {
+        this._stepBtn.style.transform = "scale(1)";
+      });
+      this._stepBtn.addEventListener("mouseout", () => {
+        this._stepBtn.style.transform = "scale(1)";
+      });
+      this._stepBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        runner.executeNextStep();
+      });
+      this.container.appendChild(this._stepBtn);
+    }
+    this._stepBtn.style.display = "flex";
+    this._stepBtn.style.left = `${node.computed.x + node.computed.w - 26}px`;
+    this._stepBtn.style.top = `${node.computed.y + 2}px`;
+  }
   /**
    * Sync container transform with renderer state (lightweight update)
    * Called when zoom/pan occurs without needing full redraw
@@ -3165,7 +3450,7 @@ class HelpOverlay {
   _createElements() {
     this.toggleBtn = document.createElement("div");
     this.toggleBtn.id = "helpToggle";
-    this.toggleBtn.title = "Keyboard shortcuts (?)";
+    this.toggleBtn.title = "단축키 (?)";
     this.toggleBtn.textContent = "?";
     this.container.appendChild(this.toggleBtn);
     this.overlay = document.createElement("div");
@@ -3463,35 +3748,13 @@ function createGraphEditor(target, {
   graph.runner = runner;
   graph.controller = controller;
   hooks.on("runner:tick", ({ time, dt }) => {
-    renderer.draw(graph, {
-      selection: controller.selection,
-      tempEdge: controller.connecting ? controller.renderTempEdge() : null,
-      // 필요시 helper
-      running: true,
-      time,
-      dt
-    });
-    htmlOverlay.draw(graph, controller.selection);
+    controller.render(time);
   });
   hooks.on("runner:start", () => {
-    renderer.draw(graph, {
-      selection: controller.selection,
-      tempEdge: controller.connecting ? controller.renderTempEdge() : null,
-      running: true,
-      time: performance.now(),
-      dt: 0
-    });
-    htmlOverlay.draw(graph, controller.selection);
+    controller.render(performance.now());
   });
   hooks.on("runner:stop", () => {
-    renderer.draw(graph, {
-      selection: controller.selection,
-      tempEdge: controller.connecting ? controller.renderTempEdge() : null,
-      running: false,
-      time: performance.now(),
-      dt: 0
-    });
-    htmlOverlay.draw(graph, controller.selection);
+    controller.render(performance.now());
   });
   hooks.on("node:updated", () => {
     controller.render();
@@ -3545,6 +3808,8 @@ function createGraphEditor(target, {
     },
     graph,
     renderer,
+    edgeRenderer,
+    // Expose edge renderer for style changes
     controller,
     // Expose controller for snap-to-grid access
     runner,
@@ -3563,6 +3828,14 @@ function createGraphEditor(target, {
     render: () => controller.render(),
     start: () => runner.start(),
     stop: () => runner.stop(),
+    setEdgeStyle: (style) => {
+      renderer.setEdgeStyle(style);
+      edgeRenderer.setEdgeStyle(style);
+    },
+    setExecutionMode: (mode) => {
+      runner.setExecutionMode(mode);
+      controller.render();
+    },
     destroy: () => {
       runner.stop();
       ro.disconnect();