html-overlay-node 0.1.9 → 0.1.10

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

@@ -342,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");
@@ -488,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,
@@ -497,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);
       }
@@ -525,6 +529,18 @@ 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 {
@@ -538,8 +554,10 @@ function portRect(node, port, idx, dir) {
     w: node.size.width,
     h: node.size.height
   };
-  const headerHeight = 28;
-  const y = ny + headerHeight + 10 + idx * 24;
+  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") {
@@ -562,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
     );
@@ -609,10 +615,6 @@ const _CanvasRenderer = class _CanvasRenderer {
     this.offsetY = offsetY;
     (_a = this._onTransformChange) == null ? void 0 : _a.call(this);
   }
-  /**
-   * Set callback to be called when transform changes (zoom/pan)
-   * @param {Function} callback - Function to call on transform change
-   */
   setTransformChangeCallback(callback) {
     this._onTransformChange = callback;
   }
@@ -656,7 +658,7 @@ const _CanvasRenderer = class _CanvasRenderer {
     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);
@@ -668,12 +670,10 @@ const _CanvasRenderer = class _CanvasRenderer {
     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);
@@ -681,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;
@@ -694,39 +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(),
     drawEdges = true
   } = {}) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     graph.updateWorldTransforms();
     this.drawGrid();
     const { ctx, theme } = this;
@@ -742,62 +750,60 @@ const _CanvasRenderer = class _CanvasRenderer {
     }
     if (drawEdges) {
       ctx.lineWidth = 1.5 / this.scale;
-      let dashArray = null;
-      let dashOffset = 0;
-      if (running) {
-        const speed = 120;
-        const phase = time / 1e3 * speed / this.scale % _CanvasRenderer.FONT_SIZE;
-        dashArray = [6 / this.scale, 6 / this.scale];
-        dashOffset = -phase;
-      }
       for (const e of graph.edges.values()) {
-        const shouldAnimate = activeEdges && activeEdges.size > 0 && activeEdges.has(e.id);
-        if (running && shouldAnimate && dashArray) {
-          ctx.setLineDash(dashArray);
-          ctx.lineDashOffset = dashOffset;
-        } else {
-          ctx.setLineDash([]);
-          ctx.lineDashOffset = 0;
-        }
         const isActive = activeEdges && activeEdges.has(e.id);
         if (isActive) {
-          ctx.strokeStyle = "#00ffff";
-          ctx.lineWidth = 3 / this.scale;
+          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);
-        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) {
         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()) {
@@ -805,16 +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);
-        if (!hasHtmlOverlay) {
-          this._drawNode(n, sel, true);
-          if (def == null ? void 0 : def.onDraw) def.onDraw(n, { ctx, theme, renderer: this });
+        this._drawNode(n, sel, !hasHtmlOverlay ? true : false);
+        if (def == null ? void 0 : def.onDraw) {
+          def.onDraw(n, { ctx, theme, renderer: this });
         }
-      }
-    }
-    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);
         if (hasHtmlOverlay) {
           this._drawPorts(n);
         }
@@ -832,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",
@@ -876,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);
@@ -975,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 + pr1.w / 2, y1 = pr1.y + pr1.h / 2, x2 = pr2.x + pr2.w / 2, y2 = pr2.y + pr2.h / 2;
+    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") {
@@ -984,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();
@@ -1000,15 +1059,12 @@ const _CanvasRenderer = class _CanvasRenderer {
   }
   _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";
@@ -1026,74 +1082,91 @@ const _CanvasRenderer = class _CanvasRenderer {
     ctx.bezierCurveTo(x1 + dx, y1, x2 - dx, y2, x2, y2);
     ctx.stroke();
   }
-  /**
-   * Draw only edges on a separate canvas (for layering above HTML overlay)
-   * @param {Graph} graph - The graph
-   * @param {Object} options - Rendering options
-   */
-  drawEdgesOnly(graph, { activeEdges = /* @__PURE__ */ new Set(), running = false, time = performance.now(), tempEdge = null } = {}) {
+  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;
-    let dashArray = null;
-    let dashOffset = 0;
-    if (running || activeEdges.size > 0) {
-      const speed = 120;
-      const phase = time / 1e3 * speed / this.scale % 12;
-      dashArray = [6 / this.scale, 6 / this.scale];
-      dashOffset = -phase;
-    }
-    ctx.lineWidth = 1.5 / this.scale;
-    ctx.strokeStyle = theme.edge;
     for (const e of graph.edges.values()) {
-      const isActive = activeEdges && activeEdges.has(e.id);
-      if (isActive && dashArray) {
-        ctx.setLineDash(dashArray);
-        ctx.lineDashOffset = dashOffset;
-        ctx.strokeStyle = "#00ffff";
-        ctx.lineWidth = 3 / this.scale;
+      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);
       }
-      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);
-        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) {
         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);
       }
     }
     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) {
@@ -1110,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)
@@ -1232,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";
@@ -1810,11 +1918,12 @@ const _Controller = class _Controller {
       edgeCtx.clearRect(0, 0, this.edgeRenderer.canvas.width, this.edgeRenderer.canvas.height);
       this.edgeRenderer._applyTransform();
       this.edgeRenderer.drawEdgesOnly(this.graph, {
-        activeEdges: this.activeEdges || /* @__PURE__ */ new Set(),
-        running: false,
+        activeEdges: this.activeEdges,
+        activeEdgeTimes: this.activeEdgeTimes,
+        activeNodes: this.activeNodes,
+        selection: this.selection,
         time: performance.now(),
         tempEdge: tEdge
-        // Draw temp edge on edge layer
       });
       this.edgeRenderer._resetTransform();
     }
@@ -2209,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);
   }
@@ -2246,29 +2353,22 @@ class Runner {
     }
   }
   /**
-   * Execute connected nodes once from a starting node
-   * Uses queue-based traversal to support branching exec flows
-   * @param {string} startNodeId - ID of the node to start from
-   * @param {number} dt - Delta time
+   * 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();
-    const queue = [startNodeId];
+    const execEdgeOrder = [];
+    const queue = [{ nodeId: startNodeId, fromEdgeId: null }];
     const visited = /* @__PURE__ */ new Set();
     while (queue.length > 0) {
-      const currentNodeId = queue.shift();
+      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}`);
-        continue;
-      }
-      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()) {
@@ -2283,25 +2383,23 @@ class Runner {
         }
       }
       this.executeNode(currentNodeId, dt);
-      const nextNodes = this.findAllNextExecNodes(currentNodeId);
-      queue.push(...nextNodes);
+      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 all nodes connected via exec outputs
-   * Supports multiple connections from a single exec output
-   * @param {string} nodeId - Current node ID
-   * @returns {string[]} Array of next node IDs
-   */
   findAllNextExecNodes(nodeId) {
     const node = this.graph.nodes.get(nodeId);
     if (!node) return [];
@@ -2317,11 +2415,6 @@ class Runner {
     }
     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);
@@ -2419,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",
@@ -2635,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");
@@ -2668,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";
@@ -2705,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">
@@ -2731,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 `
@@ -2759,7 +2964,6 @@ class PropertyPanel {
               `).join("")}
             </div>
           ` : ""}
-          
           ${node.outputs.length ? `
             <div class="port-group">
               <div class="port-group-title">Outputs (${node.outputs.length})</div>
@@ -2777,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) {
@@ -2832,21 +3054,192 @@ 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 }) {
@@ -2925,6 +3318,8 @@ function createGraphEditor(target, {
   showMinimap = true,
   enablePropertyPanel = true,
   propertyPanelContainer = null,
+  enableHelp = true,
+  helpShortcuts = null,
   setupDefaultContextMenu: setupDefaultContextMenu$1 = true,
   setupContextMenu = null,
   plugins = []
@@ -3058,6 +3453,12 @@ 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;
@@ -3095,6 +3496,10 @@ function createGraphEditor(target, {
   hooks.on("node:updated", () => {
     controller.render();
   });
+  hooks.on("graph:deserialize", () => {
+    renderer.setTransform({ scale: 1, offsetX: 0, offsetY: 0 });
+    controller.render();
+  });
   if (setupDefaultContextMenu$1) {
     setupDefaultContextMenu(contextMenu, { controller, graph, hooks });
   }
@@ -3166,6 +3571,7 @@ function createGraphEditor(target, {
       contextMenu.destroy();
       if (propertyPanel) propertyPanel.destroy();
       if (minimap) minimap.destroy();
+      if (helpOverlay) helpOverlay.destroy();
     }
   };
   if (autorun) runner.start();