polly-graph 0.1.13 → 0.1.15

package/dist/index.cjs

@@ -4868,10 +4868,7 @@ function renderLinkLabels(params, links) {
   const labelSelection = params.root.select('[data-layer="link-labels"]').selectAll(".link-label").data(renderableLinks, (item) => getLinkKey2(item.link)).join("g").attr("class", "link-label").style("opacity", (item) => {
     const visibility = item.style.label.visibility ?? "always";
     return visibility === "always" ? 1 : 0;
-  }).style("pointer-events", (item) => {
-    const visibility = item.style.label.visibility ?? "always";
-    return visibility === "always" ? "auto" : "none";
-  }).style("cursor", "pointer");
+  }).style("pointer-events", "none").style("cursor", "pointer");
   labelSelection.selectAll("rect").data((item) => [item]).join("rect").attr("rx", (item) => item.style.label.borderRadius).attr("ry", (item) => item.style.label.borderRadius).attr("fill", (item) => item.style.label.backgroundFill).attr("stroke", (item) => item.style.label.borderColor).attr("stroke-width", (item) => item.style.label.borderWidth);
   const textSelection = labelSelection.selectAll("text").data((item) => [item]).join("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", (item) => item.style.label.fontSize).attr("fill", (item) => item.style.label.textColor).text((item) => item.link.label ?? "");
   textSelection.each(function(item) {
@@ -5117,34 +5114,294 @@ function createDragBehavior(simulation, onDragStart, canvasBounds) {
   });
 }
 
+// src/utils/node-style-manager.ts
+var NodeStyleManager = class {
+  styleStates = /* @__PURE__ */ new Map();
+  /**
+   * Initialize a node's style state by capturing its original styles
+   */
+  initializeNode(element, node) {
+    if (this.styleStates.has(element)) {
+      return;
+    }
+    const domBackup = {
+      stroke: element.getAttribute("stroke"),
+      strokeWidth: element.getAttribute("stroke-width"),
+      opacity: element.getAttribute("opacity"),
+      fill: element.getAttribute("fill")
+    };
+    const originalStyle = {
+      stroke: node.style?.stroke || void 0,
+      strokeWidth: node.style?.strokeWidth || void 0,
+      opacity: node.style?.opacity || void 0,
+      fill: node.style?.fill || void 0
+    };
+    this.styleStates.set(element, {
+      original: originalStyle,
+      current: { ...originalStyle },
+      domBackup
+    });
+  }
+  /**
+   * Apply temporary styles (e.g., hover effects) that will be reset later
+   */
+  applyTemporaryStyles(element, styles) {
+    this.applyStylesToDOM(element, styles);
+  }
+  /**
+   * Apply permanent styles that become the new base styles
+   */
+  applyPermanentStyles(element, styles) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      console.warn("[NodeStyleManager] Node not initialized, cannot apply permanent styles");
+      return;
+    }
+    this.applyStylesToDOM(element, styles);
+    Object.assign(state.current, styles);
+  }
+  /**
+   * Reset node to its current base styles (removes temporary styles)
+   */
+  resetToBase(element) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      this.clearAllStyles(element);
+      return;
+    }
+    this.clearAllStyles(element);
+    this.applyStylesToDOM(element, state.current);
+  }
+  /**
+   * Reset node to its original styles (as captured during initialization)
+   */
+  resetToOriginal(element) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      this.clearAllStyles(element);
+      return;
+    }
+    this.clearAllStyles(element);
+    this.restoreOriginalDOM(element, state.domBackup);
+    state.current = { ...state.original };
+  }
+  /**
+   * Check if node is in a specific state (selected, hovered, etc.)
+   */
+  hasState(element, stateName) {
+    return element.dataset[stateName] === "true";
+  }
+  /**
+   * Set state marker on node
+   */
+  setState(element, stateName, value) {
+    if (value) {
+      element.dataset[stateName] = "true";
+    } else {
+      delete element.dataset[stateName];
+    }
+  }
+  /**
+   * Get the original styles for a node
+   */
+  getOriginalStyles(element) {
+    const state = this.styleStates.get(element);
+    return state ? { ...state.original } : null;
+  }
+  /**
+   * Get the current base styles for a node
+   */
+  getCurrentStyles(element) {
+    const state = this.styleStates.get(element);
+    return state ? { ...state.current } : null;
+  }
+  /**
+   * Remove a node from management (cleanup)
+   */
+  removeNode(element) {
+    this.styleStates.delete(element);
+  }
+  /**
+   * Clear all managed nodes (for cleanup)
+   */
+  clear() {
+    this.styleStates.clear();
+  }
+  /**
+   * Private: Apply styles to DOM element
+   */
+  applyStylesToDOM(element, styles) {
+    if (styles.stroke !== void 0) {
+      if (styles.stroke === null || styles.stroke === "") {
+        element.removeAttribute("stroke");
+        element.style.stroke = "";
+      } else {
+        element.style.stroke = styles.stroke;
+      }
+    }
+    if (styles.strokeWidth !== void 0) {
+      if (styles.strokeWidth === null || styles.strokeWidth === 0) {
+        element.removeAttribute("stroke-width");
+        element.style.strokeWidth = "";
+      } else {
+        element.style.strokeWidth = String(styles.strokeWidth);
+      }
+    }
+    if (styles.opacity !== void 0) {
+      if (styles.opacity === null || styles.opacity === 1) {
+        element.removeAttribute("opacity");
+        element.style.opacity = "";
+      } else {
+        element.style.opacity = String(styles.opacity);
+      }
+    }
+    if (styles.fill !== void 0) {
+      if (styles.fill === null || styles.fill === "") {
+        element.removeAttribute("fill");
+        element.style.fill = "";
+      } else {
+        element.style.fill = styles.fill;
+      }
+    }
+    if (styles.radius !== void 0) {
+      if (styles.radius === null || styles.radius === 0) {
+        element.removeAttribute("r");
+        element.style.removeProperty("r");
+      } else {
+        element.setAttribute("r", String(styles.radius));
+      }
+    }
+  }
+  /**
+   * Private: Clear all inline styles and remove hover-related attributes
+   */
+  clearAllStyles(element) {
+    element.style.stroke = "";
+    element.style.strokeWidth = "";
+    element.style.opacity = "";
+    element.style.fill = "";
+    element.style.removeProperty("r");
+    this.removeIfHoverAttribute(element, "stroke");
+    this.removeIfHoverAttribute(element, "stroke-width");
+    this.removeIfHoverAttribute(element, "opacity");
+  }
+  /**
+   * Private: Restore original DOM attributes
+   */
+  restoreOriginalDOM(element, domBackup) {
+    if (domBackup.stroke !== void 0) {
+      if (domBackup.stroke === null) {
+        element.removeAttribute("stroke");
+      } else {
+        element.setAttribute("stroke", domBackup.stroke);
+      }
+    }
+    if (domBackup.strokeWidth !== void 0) {
+      if (domBackup.strokeWidth === null) {
+        element.removeAttribute("stroke-width");
+      } else {
+        element.setAttribute("stroke-width", domBackup.strokeWidth);
+      }
+    }
+    if (domBackup.opacity !== void 0) {
+      if (domBackup.opacity === null) {
+        element.removeAttribute("opacity");
+      } else {
+        element.setAttribute("opacity", domBackup.opacity);
+      }
+    }
+    if (domBackup.fill !== void 0) {
+      if (domBackup.fill === null) {
+        element.removeAttribute("fill");
+      } else {
+        element.setAttribute("fill", domBackup.fill);
+      }
+    }
+  }
+  /**
+   * Private: Remove attribute only if it looks like it was set by hover/interaction
+   */
+  removeIfHoverAttribute(element, attr) {
+    const value = element.getAttribute(attr);
+    if (!value) return;
+    const hoverPatterns = {
+      "stroke": ["#6366f1", "#8b5cf6", "#3b82f6", "#ffffff", "#fff", "white"],
+      // Common hover stroke colors
+      "stroke-width": ["2", "2.5", "3", "4"],
+      // Common hover stroke widths
+      "opacity": ["0.8", "0.9", "0.7"]
+      // Common hover opacity values
+    };
+    const patterns = hoverPatterns[attr];
+    if (patterns && patterns.includes(value)) {
+      element.removeAttribute(attr);
+    }
+  }
+};
+var nodeStyleManager = new NodeStyleManager();
+function applyHoverStyles(element, node, hoverStyle) {
+  if (nodeStyleManager.hasState(element, "selected")) {
+    return;
+  }
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.applyTemporaryStyles(element, hoverStyle);
+  nodeStyleManager.setState(element, "hovered", true);
+}
+function removeHoverStyles(element, node) {
+  if (nodeStyleManager.hasState(element, "selected")) {
+    return;
+  }
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.resetToBase(element);
+  nodeStyleManager.setState(element, "hovered", false);
+}
+
 // src/interactions/create-node-hover.ts
-function createNodeHover(nodeSelection, hoverStyle) {
+var currentHoveredNode = null;
+var hoverTimerManager = new TimerManager();
+function createNodeHover(nodeSelection, hoverStyle, options) {
   const firstNode = nodeSelection.node();
   if (!firstNode) return;
+  const {
+    enableDebouncing = false,
+    enterDelay = 16,
+    // ~1 frame at 60fps
+    leaveDelay = 50
+    // Longer delay for smoother transitions
+  } = options || {};
   if (hoverStyle) {
-    nodeSelection.on("mouseenter.hover", function(_event, _node) {
+    nodeSelection.on("mouseenter.hover", function(_event, node) {
       const circle = this;
-      if (circle.dataset.selected === "true") {
-        return;
-      }
-      if (hoverStyle.stroke !== void 0) {
-        circle.style.stroke = hoverStyle.stroke;
-      }
-      if (hoverStyle.strokeWidth !== void 0) {
-        circle.style.strokeWidth = String(hoverStyle.strokeWidth);
-      }
-      if (hoverStyle.opacity !== void 0) {
-        circle.style.opacity = String(hoverStyle.opacity);
+      const applyHover = () => {
+        if (currentHoveredNode && currentHoveredNode.element !== circle) {
+          removeHoverStyles(currentHoveredNode.element, currentHoveredNode.node);
+          clearAllHoverLayers();
+        }
+        currentHoveredNode = { element: circle, node };
+        applyHoverStyles(circle, node, hoverStyle);
+      };
+      if (enableDebouncing) {
+        hoverTimerManager.clearTimer("hover-enter");
+        hoverTimerManager.clearTimer("hover-leave");
+        hoverTimerManager.debounce("hover-enter", applyHover, enterDelay);
+      } else {
+        applyHover();
       }
-    }).on("mouseleave.hover", function(_event, _node) {
+    }).on("mouseleave.hover", function(_event, node) {
       const circle = this;
-      clearAllHoverLayers();
-      if (circle.dataset.selected === "true") {
-        return;
+      const removeHover = () => {
+        if (currentHoveredNode?.element === circle) {
+          currentHoveredNode = null;
+          removeHoverStyles(circle, node);
+          clearAllHoverLayers();
+        }
+      };
+      if (enableDebouncing) {
+        hoverTimerManager.clearTimer("hover-enter");
+        hoverTimerManager.debounce("hover-leave", removeHover, leaveDelay);
+      } else {
+        removeHover();
       }
-      circle.style.stroke = "";
-      circle.style.strokeWidth = "";
-      circle.style.opacity = "";
     });
   }
   const svgElement = firstNode.ownerSVGElement;
@@ -5198,6 +5455,9 @@ function createNodeHover(nodeSelection, hoverStyle) {
     if (hoveredNodeElement.dataset.selected === "true") {
       return;
     }
+    if (!currentHoveredNode || currentHoveredNode.element !== hoveredNodeElement) {
+      return;
+    }
     clearAllHoverLayers();
     const hoverNodesLayer = root2.select('[data-layer="hover-nodes"]').node();
     if (hoverNodesLayer) {
@@ -5244,7 +5504,10 @@ function createNodeHover(nodeSelection, hoverStyle) {
       }
     });
   }).on("mouseleave.links", function(_event, _hoveredNode) {
-    clearAllHoverLayers();
+    const hoveredNodeElement = this;
+    if (currentHoveredNode?.element === hoveredNodeElement) {
+      clearAllHoverLayers();
+    }
   });
 }
 
@@ -5313,7 +5576,7 @@ function createLinkHover(linkSelection, hoverStyle) {
       }
     }
     const labelSelection2 = root2.select('[data-layer="link-labels"]').selectAll(".link-label");
-    labelSelection2.filter((item) => item.link === renderableLink.link && item.style.label.visibility === "hover").style("opacity", 1).style("pointer-events", "auto");
+    labelSelection2.filter((item) => item.link === renderableLink.link && item.style.label.visibility === "hover").style("opacity", 1);
   }).on("mouseleave.hover", function(_event, renderableLink) {
     const hoveredElement = this;
     let targetLinkElement;
@@ -5610,7 +5873,47 @@ function getDefaultContent(node) {
 
 // src/utils/node-link-selection.utils.ts
 function createLinkHitArea(root2, linkSelection) {
-  return root2.select('[data-layer="links"]').selectAll("line.link-hit-area").data(linkSelection.data()).join("line").attr("class", "link-hit-area").attr("stroke", "rgba(0,0,0,0)").attr("stroke-width", (item) => item.style.arrow.size * 4).style("pointer-events", "stroke").style("cursor", "pointer").attr("opacity", 0);
+  return root2.select('[data-layer="links"]').selectAll("rect.link-hit-area").data(linkSelection.data()).join("rect").attr("class", "link-hit-area").attr("fill", "rgba(0,0,0,0)").style("pointer-events", "fill").style("cursor", "pointer").attr("opacity", 0).each(function(item) {
+    const rectElement = this;
+    updateHitAreaDimensions(rectElement, item, root2);
+  });
+}
+function updateHitAreaDimensions(rectElement, item, root2) {
+  const source = item.link.source;
+  const target = item.link.target;
+  if (!source.x || !source.y || !target.x || !target.y) return;
+  const midX = (source.x + target.x) / 2;
+  const midY = (source.y + target.y) / 2;
+  const linkPadding = Math.max(item.style.strokeWidth || 2, item.style.arrow.size) * 2;
+  let width = linkPadding;
+  let height = linkPadding;
+  if (item.link.label) {
+    const labelElement = root2.select('[data-layer="link-labels"]').selectAll(".link-label").filter((labelItem) => labelItem.link === item.link).node();
+    if (labelElement) {
+      try {
+        const textElement = labelElement.querySelector("text");
+        const rectElement2 = labelElement.querySelector("rect");
+        if (textElement && rectElement2) {
+          const bbox = textElement.getBBox();
+          const labelWidth = bbox.width + item.style.label.paddingX * 2;
+          const labelHeight = bbox.height + item.style.label.paddingY * 2;
+          width = Math.max(width, labelWidth + 10);
+          height = Math.max(height, labelHeight + 10);
+        }
+      } catch {
+        const text = item.link.label ?? "";
+        const fontSize = item.style.label.fontSize;
+        const estimatedWidth = text.length * fontSize * 0.6 + item.style.label.paddingX * 2 + 10;
+        const estimatedHeight = fontSize + item.style.label.paddingY * 2 + 10;
+        width = Math.max(width, estimatedWidth);
+        height = Math.max(height, estimatedHeight);
+      }
+    }
+  }
+  rectElement.setAttribute("x", String(midX - width / 2));
+  rectElement.setAttribute("y", String(midY - height / 2));
+  rectElement.setAttribute("width", String(width));
+  rectElement.setAttribute("height", String(height));
 }
 
 // src/utils/get-link-target-point.ts
@@ -6322,7 +6625,18 @@ var InteractionManager = class {
       }
       if (this.manager.simulation) {
         this.manager.simulation.on("tick.hitarea", () => {
-          linkHitAreaSelection.attr("x1", (item) => item.link.source.x ?? 0).attr("y1", (item) => item.link.source.y ?? 0).attr("x2", (item) => item.link.target.x ?? 0).attr("y2", (item) => item.link.target.y ?? 0);
+          linkHitAreaSelection.each(function(item) {
+            const source = item.link.source;
+            const target = item.link.target;
+            if (!source.x || !source.y || !target.x || !target.y) return;
+            const rectElement = this;
+            const midX = (source.x + target.x) / 2;
+            const midY = (source.y + target.y) / 2;
+            const width = parseFloat(rectElement.getAttribute("width") || "20");
+            const height = parseFloat(rectElement.getAttribute("height") || "20");
+            rectElement.setAttribute("x", String(midX - width / 2));
+            rectElement.setAttribute("y", String(midY - height / 2));
+          });
         });
       }
       if (this.manager.selectionManager) {

package/dist/index.js

@@ -4836,10 +4836,7 @@ function renderLinkLabels(params, links) {
   const labelSelection = params.root.select('[data-layer="link-labels"]').selectAll(".link-label").data(renderableLinks, (item) => getLinkKey2(item.link)).join("g").attr("class", "link-label").style("opacity", (item) => {
     const visibility = item.style.label.visibility ?? "always";
     return visibility === "always" ? 1 : 0;
-  }).style("pointer-events", (item) => {
-    const visibility = item.style.label.visibility ?? "always";
-    return visibility === "always" ? "auto" : "none";
-  }).style("cursor", "pointer");
+  }).style("pointer-events", "none").style("cursor", "pointer");
   labelSelection.selectAll("rect").data((item) => [item]).join("rect").attr("rx", (item) => item.style.label.borderRadius).attr("ry", (item) => item.style.label.borderRadius).attr("fill", (item) => item.style.label.backgroundFill).attr("stroke", (item) => item.style.label.borderColor).attr("stroke-width", (item) => item.style.label.borderWidth);
   const textSelection = labelSelection.selectAll("text").data((item) => [item]).join("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", (item) => item.style.label.fontSize).attr("fill", (item) => item.style.label.textColor).text((item) => item.link.label ?? "");
   textSelection.each(function(item) {
@@ -5085,34 +5082,294 @@ function createDragBehavior(simulation, onDragStart, canvasBounds) {
   });
 }
 
+// src/utils/node-style-manager.ts
+var NodeStyleManager = class {
+  styleStates = /* @__PURE__ */ new Map();
+  /**
+   * Initialize a node's style state by capturing its original styles
+   */
+  initializeNode(element, node) {
+    if (this.styleStates.has(element)) {
+      return;
+    }
+    const domBackup = {
+      stroke: element.getAttribute("stroke"),
+      strokeWidth: element.getAttribute("stroke-width"),
+      opacity: element.getAttribute("opacity"),
+      fill: element.getAttribute("fill")
+    };
+    const originalStyle = {
+      stroke: node.style?.stroke || void 0,
+      strokeWidth: node.style?.strokeWidth || void 0,
+      opacity: node.style?.opacity || void 0,
+      fill: node.style?.fill || void 0
+    };
+    this.styleStates.set(element, {
+      original: originalStyle,
+      current: { ...originalStyle },
+      domBackup
+    });
+  }
+  /**
+   * Apply temporary styles (e.g., hover effects) that will be reset later
+   */
+  applyTemporaryStyles(element, styles) {
+    this.applyStylesToDOM(element, styles);
+  }
+  /**
+   * Apply permanent styles that become the new base styles
+   */
+  applyPermanentStyles(element, styles) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      console.warn("[NodeStyleManager] Node not initialized, cannot apply permanent styles");
+      return;
+    }
+    this.applyStylesToDOM(element, styles);
+    Object.assign(state.current, styles);
+  }
+  /**
+   * Reset node to its current base styles (removes temporary styles)
+   */
+  resetToBase(element) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      this.clearAllStyles(element);
+      return;
+    }
+    this.clearAllStyles(element);
+    this.applyStylesToDOM(element, state.current);
+  }
+  /**
+   * Reset node to its original styles (as captured during initialization)
+   */
+  resetToOriginal(element) {
+    const state = this.styleStates.get(element);
+    if (!state) {
+      this.clearAllStyles(element);
+      return;
+    }
+    this.clearAllStyles(element);
+    this.restoreOriginalDOM(element, state.domBackup);
+    state.current = { ...state.original };
+  }
+  /**
+   * Check if node is in a specific state (selected, hovered, etc.)
+   */
+  hasState(element, stateName) {
+    return element.dataset[stateName] === "true";
+  }
+  /**
+   * Set state marker on node
+   */
+  setState(element, stateName, value) {
+    if (value) {
+      element.dataset[stateName] = "true";
+    } else {
+      delete element.dataset[stateName];
+    }
+  }
+  /**
+   * Get the original styles for a node
+   */
+  getOriginalStyles(element) {
+    const state = this.styleStates.get(element);
+    return state ? { ...state.original } : null;
+  }
+  /**
+   * Get the current base styles for a node
+   */
+  getCurrentStyles(element) {
+    const state = this.styleStates.get(element);
+    return state ? { ...state.current } : null;
+  }
+  /**
+   * Remove a node from management (cleanup)
+   */
+  removeNode(element) {
+    this.styleStates.delete(element);
+  }
+  /**
+   * Clear all managed nodes (for cleanup)
+   */
+  clear() {
+    this.styleStates.clear();
+  }
+  /**
+   * Private: Apply styles to DOM element
+   */
+  applyStylesToDOM(element, styles) {
+    if (styles.stroke !== void 0) {
+      if (styles.stroke === null || styles.stroke === "") {
+        element.removeAttribute("stroke");
+        element.style.stroke = "";
+      } else {
+        element.style.stroke = styles.stroke;
+      }
+    }
+    if (styles.strokeWidth !== void 0) {
+      if (styles.strokeWidth === null || styles.strokeWidth === 0) {
+        element.removeAttribute("stroke-width");
+        element.style.strokeWidth = "";
+      } else {
+        element.style.strokeWidth = String(styles.strokeWidth);
+      }
+    }
+    if (styles.opacity !== void 0) {
+      if (styles.opacity === null || styles.opacity === 1) {
+        element.removeAttribute("opacity");
+        element.style.opacity = "";
+      } else {
+        element.style.opacity = String(styles.opacity);
+      }
+    }
+    if (styles.fill !== void 0) {
+      if (styles.fill === null || styles.fill === "") {
+        element.removeAttribute("fill");
+        element.style.fill = "";
+      } else {
+        element.style.fill = styles.fill;
+      }
+    }
+    if (styles.radius !== void 0) {
+      if (styles.radius === null || styles.radius === 0) {
+        element.removeAttribute("r");
+        element.style.removeProperty("r");
+      } else {
+        element.setAttribute("r", String(styles.radius));
+      }
+    }
+  }
+  /**
+   * Private: Clear all inline styles and remove hover-related attributes
+   */
+  clearAllStyles(element) {
+    element.style.stroke = "";
+    element.style.strokeWidth = "";
+    element.style.opacity = "";
+    element.style.fill = "";
+    element.style.removeProperty("r");
+    this.removeIfHoverAttribute(element, "stroke");
+    this.removeIfHoverAttribute(element, "stroke-width");
+    this.removeIfHoverAttribute(element, "opacity");
+  }
+  /**
+   * Private: Restore original DOM attributes
+   */
+  restoreOriginalDOM(element, domBackup) {
+    if (domBackup.stroke !== void 0) {
+      if (domBackup.stroke === null) {
+        element.removeAttribute("stroke");
+      } else {
+        element.setAttribute("stroke", domBackup.stroke);
+      }
+    }
+    if (domBackup.strokeWidth !== void 0) {
+      if (domBackup.strokeWidth === null) {
+        element.removeAttribute("stroke-width");
+      } else {
+        element.setAttribute("stroke-width", domBackup.strokeWidth);
+      }
+    }
+    if (domBackup.opacity !== void 0) {
+      if (domBackup.opacity === null) {
+        element.removeAttribute("opacity");
+      } else {
+        element.setAttribute("opacity", domBackup.opacity);
+      }
+    }
+    if (domBackup.fill !== void 0) {
+      if (domBackup.fill === null) {
+        element.removeAttribute("fill");
+      } else {
+        element.setAttribute("fill", domBackup.fill);
+      }
+    }
+  }
+  /**
+   * Private: Remove attribute only if it looks like it was set by hover/interaction
+   */
+  removeIfHoverAttribute(element, attr) {
+    const value = element.getAttribute(attr);
+    if (!value) return;
+    const hoverPatterns = {
+      "stroke": ["#6366f1", "#8b5cf6", "#3b82f6", "#ffffff", "#fff", "white"],
+      // Common hover stroke colors
+      "stroke-width": ["2", "2.5", "3", "4"],
+      // Common hover stroke widths
+      "opacity": ["0.8", "0.9", "0.7"]
+      // Common hover opacity values
+    };
+    const patterns = hoverPatterns[attr];
+    if (patterns && patterns.includes(value)) {
+      element.removeAttribute(attr);
+    }
+  }
+};
+var nodeStyleManager = new NodeStyleManager();
+function applyHoverStyles(element, node, hoverStyle) {
+  if (nodeStyleManager.hasState(element, "selected")) {
+    return;
+  }
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.applyTemporaryStyles(element, hoverStyle);
+  nodeStyleManager.setState(element, "hovered", true);
+}
+function removeHoverStyles(element, node) {
+  if (nodeStyleManager.hasState(element, "selected")) {
+    return;
+  }
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.resetToBase(element);
+  nodeStyleManager.setState(element, "hovered", false);
+}
+
 // src/interactions/create-node-hover.ts
-function createNodeHover(nodeSelection, hoverStyle) {
+var currentHoveredNode = null;
+var hoverTimerManager = new TimerManager();
+function createNodeHover(nodeSelection, hoverStyle, options) {
   const firstNode = nodeSelection.node();
   if (!firstNode) return;
+  const {
+    enableDebouncing = false,
+    enterDelay = 16,
+    // ~1 frame at 60fps
+    leaveDelay = 50
+    // Longer delay for smoother transitions
+  } = options || {};
   if (hoverStyle) {
-    nodeSelection.on("mouseenter.hover", function(_event, _node) {
+    nodeSelection.on("mouseenter.hover", function(_event, node) {
       const circle = this;
-      if (circle.dataset.selected === "true") {
-        return;
-      }
-      if (hoverStyle.stroke !== void 0) {
-        circle.style.stroke = hoverStyle.stroke;
-      }
-      if (hoverStyle.strokeWidth !== void 0) {
-        circle.style.strokeWidth = String(hoverStyle.strokeWidth);
-      }
-      if (hoverStyle.opacity !== void 0) {
-        circle.style.opacity = String(hoverStyle.opacity);
+      const applyHover = () => {
+        if (currentHoveredNode && currentHoveredNode.element !== circle) {
+          removeHoverStyles(currentHoveredNode.element, currentHoveredNode.node);
+          clearAllHoverLayers();
+        }
+        currentHoveredNode = { element: circle, node };
+        applyHoverStyles(circle, node, hoverStyle);
+      };
+      if (enableDebouncing) {
+        hoverTimerManager.clearTimer("hover-enter");
+        hoverTimerManager.clearTimer("hover-leave");
+        hoverTimerManager.debounce("hover-enter", applyHover, enterDelay);
+      } else {
+        applyHover();
       }
-    }).on("mouseleave.hover", function(_event, _node) {
+    }).on("mouseleave.hover", function(_event, node) {
       const circle = this;
-      clearAllHoverLayers();
-      if (circle.dataset.selected === "true") {
-        return;
+      const removeHover = () => {
+        if (currentHoveredNode?.element === circle) {
+          currentHoveredNode = null;
+          removeHoverStyles(circle, node);
+          clearAllHoverLayers();
+        }
+      };
+      if (enableDebouncing) {
+        hoverTimerManager.clearTimer("hover-enter");
+        hoverTimerManager.debounce("hover-leave", removeHover, leaveDelay);
+      } else {
+        removeHover();
       }
-      circle.style.stroke = "";
-      circle.style.strokeWidth = "";
-      circle.style.opacity = "";
     });
   }
   const svgElement = firstNode.ownerSVGElement;
@@ -5166,6 +5423,9 @@ function createNodeHover(nodeSelection, hoverStyle) {
     if (hoveredNodeElement.dataset.selected === "true") {
       return;
     }
+    if (!currentHoveredNode || currentHoveredNode.element !== hoveredNodeElement) {
+      return;
+    }
     clearAllHoverLayers();
     const hoverNodesLayer = root2.select('[data-layer="hover-nodes"]').node();
     if (hoverNodesLayer) {
@@ -5212,7 +5472,10 @@ function createNodeHover(nodeSelection, hoverStyle) {
       }
     });
   }).on("mouseleave.links", function(_event, _hoveredNode) {
-    clearAllHoverLayers();
+    const hoveredNodeElement = this;
+    if (currentHoveredNode?.element === hoveredNodeElement) {
+      clearAllHoverLayers();
+    }
   });
 }
 
@@ -5281,7 +5544,7 @@ function createLinkHover(linkSelection, hoverStyle) {
       }
     }
     const labelSelection2 = root2.select('[data-layer="link-labels"]').selectAll(".link-label");
-    labelSelection2.filter((item) => item.link === renderableLink.link && item.style.label.visibility === "hover").style("opacity", 1).style("pointer-events", "auto");
+    labelSelection2.filter((item) => item.link === renderableLink.link && item.style.label.visibility === "hover").style("opacity", 1);
   }).on("mouseleave.hover", function(_event, renderableLink) {
     const hoveredElement = this;
     let targetLinkElement;
@@ -5578,7 +5841,47 @@ function getDefaultContent(node) {
 
 // src/utils/node-link-selection.utils.ts
 function createLinkHitArea(root2, linkSelection) {
-  return root2.select('[data-layer="links"]').selectAll("line.link-hit-area").data(linkSelection.data()).join("line").attr("class", "link-hit-area").attr("stroke", "rgba(0,0,0,0)").attr("stroke-width", (item) => item.style.arrow.size * 4).style("pointer-events", "stroke").style("cursor", "pointer").attr("opacity", 0);
+  return root2.select('[data-layer="links"]').selectAll("rect.link-hit-area").data(linkSelection.data()).join("rect").attr("class", "link-hit-area").attr("fill", "rgba(0,0,0,0)").style("pointer-events", "fill").style("cursor", "pointer").attr("opacity", 0).each(function(item) {
+    const rectElement = this;
+    updateHitAreaDimensions(rectElement, item, root2);
+  });
+}
+function updateHitAreaDimensions(rectElement, item, root2) {
+  const source = item.link.source;
+  const target = item.link.target;
+  if (!source.x || !source.y || !target.x || !target.y) return;
+  const midX = (source.x + target.x) / 2;
+  const midY = (source.y + target.y) / 2;
+  const linkPadding = Math.max(item.style.strokeWidth || 2, item.style.arrow.size) * 2;
+  let width = linkPadding;
+  let height = linkPadding;
+  if (item.link.label) {
+    const labelElement = root2.select('[data-layer="link-labels"]').selectAll(".link-label").filter((labelItem) => labelItem.link === item.link).node();
+    if (labelElement) {
+      try {
+        const textElement = labelElement.querySelector("text");
+        const rectElement2 = labelElement.querySelector("rect");
+        if (textElement && rectElement2) {
+          const bbox = textElement.getBBox();
+          const labelWidth = bbox.width + item.style.label.paddingX * 2;
+          const labelHeight = bbox.height + item.style.label.paddingY * 2;
+          width = Math.max(width, labelWidth + 10);
+          height = Math.max(height, labelHeight + 10);
+        }
+      } catch {
+        const text = item.link.label ?? "";
+        const fontSize = item.style.label.fontSize;
+        const estimatedWidth = text.length * fontSize * 0.6 + item.style.label.paddingX * 2 + 10;
+        const estimatedHeight = fontSize + item.style.label.paddingY * 2 + 10;
+        width = Math.max(width, estimatedWidth);
+        height = Math.max(height, estimatedHeight);
+      }
+    }
+  }
+  rectElement.setAttribute("x", String(midX - width / 2));
+  rectElement.setAttribute("y", String(midY - height / 2));
+  rectElement.setAttribute("width", String(width));
+  rectElement.setAttribute("height", String(height));
 }
 
 // src/utils/get-link-target-point.ts
@@ -6290,7 +6593,18 @@ var InteractionManager = class {
       }
       if (this.manager.simulation) {
         this.manager.simulation.on("tick.hitarea", () => {
-          linkHitAreaSelection.attr("x1", (item) => item.link.source.x ?? 0).attr("y1", (item) => item.link.source.y ?? 0).attr("x2", (item) => item.link.target.x ?? 0).attr("y2", (item) => item.link.target.y ?? 0);
+          linkHitAreaSelection.each(function(item) {
+            const source = item.link.source;
+            const target = item.link.target;
+            if (!source.x || !source.y || !target.x || !target.y) return;
+            const rectElement = this;
+            const midX = (source.x + target.x) / 2;
+            const midY = (source.y + target.y) / 2;
+            const width = parseFloat(rectElement.getAttribute("width") || "20");
+            const height = parseFloat(rectElement.getAttribute("height") || "20");
+            rectElement.setAttribute("x", String(midX - width / 2));
+            rectElement.setAttribute("y", String(midY - height / 2));
+          });
         });
       }
       if (this.manager.selectionManager) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polly-graph",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Reusable D3-based graph visualization SDK with configurable nodes, links, labels, interactions, and layout behaviors.",
   "license": "MIT",
   "author": "Badal",