polly-graph 0.1.9 → 0.1.11

package/README.md

@@ -1,5 +1,9 @@
 # polly-graph
 
+[![npm version](https://img.shields.io/npm/v/polly-graph)](https://www.npmjs.com/package/polly-graph)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 A framework-independent TypeScript-based D3 graph visualization SDK that provides a comprehensive, reusable solution for creating interactive network graphs. Designed to work seamlessly across React, Angular, Vue, Svelte, or vanilla JavaScript applications.
 
 ## Features

package/dist/index.cjs

@@ -5107,6 +5107,258 @@ 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);
+}
+function applySelectionStyles(element, node, selectionStyle) {
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.applyPermanentStyles(element, selectionStyle);
+  nodeStyleManager.setState(element, "selected", true);
+}
+function removeSelectionStyles(element, node) {
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.resetToOriginal(element);
+  nodeStyleManager.setState(element, "selected", false);
+}
+
 // src/interactions/create-node-hover.ts
 function createNodeHover(nodeSelection, hoverStyle) {
   const firstNode = nodeSelection.node();
@@ -5114,14 +5366,10 @@ function createNodeHover(nodeSelection, hoverStyle) {
   if (hoverStyle) {
     nodeSelection.on("mouseenter.hover", function(_event, node) {
       const circle = this;
-      circle.setAttribute("stroke", hoverStyle.stroke ?? node.style?.stroke ?? "#ffffff");
-      circle.setAttribute("stroke-width", String(hoverStyle.strokeWidth ?? node.style?.strokeWidth ?? 1.5));
-      circle.setAttribute("opacity", String(hoverStyle.opacity ?? node.style?.opacity ?? 1));
+      applyHoverStyles(circle, node, hoverStyle);
     }).on("mouseleave.hover", function(_event, node) {
       const circle = this;
-      circle.setAttribute("stroke", node.style?.stroke ?? "#ffffff");
-      circle.setAttribute("stroke-width", String(node.style?.strokeWidth ?? 1.5));
-      circle.setAttribute("opacity", String(node.style?.opacity ?? 1));
+      removeHoverStyles(circle, node);
     });
   }
   const svgElement = firstNode.ownerSVGElement;
@@ -5518,6 +5766,8 @@ function bindNodeTooltip(params) {
       destroy: () => {
       },
       reposition: () => {
+      },
+      hide: () => {
       }
     };
   }
@@ -5527,6 +5777,9 @@ function bindNodeTooltip(params) {
     "mouseenter.tooltip",
     function(event, node) {
       const target = this;
+      if (target.dataset.selected === "true") {
+        return;
+      }
       activeTarget = target;
       const customContent = params.tooltipConfig?.renderContent?.(node);
       const content = customContent ?? getDefaultContent(node);
@@ -5536,6 +5789,11 @@ function bindNodeTooltip(params) {
     "mousemove.tooltip",
     function() {
       const target = this;
+      if (target.dataset.selected === "true") {
+        activeTarget = null;
+        tooltip.hide();
+        return;
+      }
       activeTarget = target;
       tooltip.move(target);
     }
@@ -5552,12 +5810,16 @@ function bindNodeTooltip(params) {
     }
     tooltip.move(activeTarget);
   }
+  function hide() {
+    activeTarget = null;
+    tooltip.hide();
+  }
   function destroy() {
     activeTarget = null;
     params.selection.on(".tooltip", null);
     tooltip.destroy();
   }
-  return { destroy, reposition };
+  return { destroy, reposition, hide };
 }
 function getDefaultContent(node) {
   return `
@@ -5787,27 +6049,27 @@ var SelectionManager = class {
   layers;
   linkMarkerSnapshots;
   root;
-  constructor(eventEmitter, config, layers, linkMarkerSnapshots, root2) {
+  tooltipBinding;
+  constructor(eventEmitter, config, layers, linkMarkerSnapshots, root2, tooltipBinding) {
     this.eventEmitter = eventEmitter;
     this.config = config;
     this.layers = layers;
     this.linkMarkerSnapshots = linkMarkerSnapshots;
     this.root = root2;
+    this.tooltipBinding = tooltipBinding;
   }
   /**
    * Select a node, automatically deselecting any current selection
    */
   selectNode(nodeElement, nodeData) {
+    if (this.tooltipBinding) {
+      this.tooltipBinding.hide();
+    }
     this.clearHoverState();
     this.clearSelection();
     this.bringNodeToFront(nodeElement, nodeData);
     if (this.config.nodeStyle) {
-      const style = this.config.nodeStyle;
-      if (style.fill !== void 0) nodeElement.style.fill = style.fill;
-      if (style.stroke !== void 0) nodeElement.style.stroke = style.stroke;
-      if (style.strokeWidth !== void 0) nodeElement.style.strokeWidth = String(style.strokeWidth);
-      if (style.opacity !== void 0) nodeElement.style.opacity = String(style.opacity);
-      if (style.radius !== void 0) nodeElement.style.setProperty("r", String(style.radius));
+      applySelectionStyles(nodeElement, nodeData, this.config.nodeStyle);
     }
     this.root.selectAll(".link-label").filter((item) => {
       if (item.style.label.visibility !== "hover") return false;
@@ -5858,12 +6120,7 @@ var SelectionManager = class {
     if (!this.state.selectedNode) return;
     const { element, data } = this.state.selectedNode;
     this.restoreSelectedElements(data);
-    element.style.fill = "";
-    element.style.stroke = "";
-    element.style.strokeWidth = "";
-    element.style.opacity = "";
-    element.style.removeProperty("r");
-    delete element.dataset.selected;
+    removeSelectionStyles(element, data);
     this.root.selectAll(".link-label.label-selection-pinned").classed("label-selection-pinned", false).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
     this.state.selectedNode = null;
     this.eventEmitter.emit("nodeDeselect", { node: data, element });
@@ -6088,18 +6345,42 @@ var DEFAULT_NODE_HOVER_STYLE = {
 };
 function resolveNodeStyle(params) {
   if (params.isSelected) {
-    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.selection?.nodeStyle);
+    return mergeNodeStyleSmart(DEFAULT_NODE_HOVER_STYLE, params.interaction?.selection?.nodeStyle);
   }
   if (params.isHovered) {
-    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.hover?.nodeStyle);
+    return mergeNodeStyleSmart(DEFAULT_NODE_HOVER_STYLE, params.interaction?.hover?.nodeStyle);
   }
   return void 0;
 }
-function mergeNodeStyle(base, override) {
-  return {
-    ...base,
-    ...override
-  };
+function mergeNodeStyleSmart(base, override) {
+  if (!override) return base;
+  const result = { ...override };
+  if (override.strokeWidth !== void 0 && override.stroke === void 0 && base.stroke !== void 0) {
+    result.stroke = base.stroke;
+  }
+  const baseKeys = Object.keys(base);
+  baseKeys.forEach((key) => {
+    if (key !== "stroke" && override[key] === void 0 && base[key] !== void 0) {
+      switch (key) {
+        case "fill":
+          result.fill = base.fill;
+          break;
+        case "strokeWidth":
+          result.strokeWidth = base.strokeWidth;
+          break;
+        case "opacity":
+          result.opacity = base.opacity;
+          break;
+        case "radius":
+          result.radius = base.radius;
+          break;
+        case "textColor":
+          result.textColor = base.textColor;
+          break;
+      }
+    }
+  });
+  return result;
 }
 
 // src/core/interaction-manager.ts
@@ -6199,7 +6480,8 @@ var InteractionManager = class {
         this.manager.config.interaction.selection,
         this.manager.layers,
         this.manager.linkMarkerSnapshots,
-        this.manager.rootSelection
+        this.manager.rootSelection,
+        this.manager.tooltipBinding || void 0
       );
       this.setupSelectionHandlers(selections);
       this.setupBackgroundClickHandler();

package/dist/index.d.cts

@@ -537,6 +537,12 @@ interface RenderableGraphLink {
     readonly markerEnd: string;
 }
 
+interface NodeTooltipBinding {
+    destroy(): void;
+    reposition(): void;
+    hide(): void;
+}
+
 /**
  * Centralized selection management for graph nodes and links.
  * Simplifies selection logic and ensures consistent behavior.
@@ -560,7 +566,8 @@ declare class SelectionManager {
     private readonly layers;
     private readonly linkMarkerSnapshots;
     private readonly root;
-    constructor(eventEmitter: TypedGraphEventEmitter, config: SelectionInteractionConfig, layers: GraphLayers, linkMarkerSnapshots: Map<SVGLineElement, string | null>, root: Selection<SVGGElement, unknown, null, undefined>);
+    private readonly tooltipBinding?;
+    constructor(eventEmitter: TypedGraphEventEmitter, config: SelectionInteractionConfig, layers: GraphLayers, linkMarkerSnapshots: Map<SVGLineElement, string | null>, root: Selection<SVGGElement, unknown, null, undefined>, tooltipBinding?: NodeTooltipBinding);
     /**
      * Select a node, automatically deselecting any current selection
      */

package/dist/index.d.ts

@@ -537,6 +537,12 @@ interface RenderableGraphLink {
     readonly markerEnd: string;
 }
 
+interface NodeTooltipBinding {
+    destroy(): void;
+    reposition(): void;
+    hide(): void;
+}
+
 /**
  * Centralized selection management for graph nodes and links.
  * Simplifies selection logic and ensures consistent behavior.
@@ -560,7 +566,8 @@ declare class SelectionManager {
     private readonly layers;
     private readonly linkMarkerSnapshots;
     private readonly root;
-    constructor(eventEmitter: TypedGraphEventEmitter, config: SelectionInteractionConfig, layers: GraphLayers, linkMarkerSnapshots: Map<SVGLineElement, string | null>, root: Selection<SVGGElement, unknown, null, undefined>);
+    private readonly tooltipBinding?;
+    constructor(eventEmitter: TypedGraphEventEmitter, config: SelectionInteractionConfig, layers: GraphLayers, linkMarkerSnapshots: Map<SVGLineElement, string | null>, root: Selection<SVGGElement, unknown, null, undefined>, tooltipBinding?: NodeTooltipBinding);
     /**
      * Select a node, automatically deselecting any current selection
      */

package/dist/index.js

@@ -5075,6 +5075,258 @@ 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);
+}
+function applySelectionStyles(element, node, selectionStyle) {
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.applyPermanentStyles(element, selectionStyle);
+  nodeStyleManager.setState(element, "selected", true);
+}
+function removeSelectionStyles(element, node) {
+  nodeStyleManager.initializeNode(element, node);
+  nodeStyleManager.resetToOriginal(element);
+  nodeStyleManager.setState(element, "selected", false);
+}
+
 // src/interactions/create-node-hover.ts
 function createNodeHover(nodeSelection, hoverStyle) {
   const firstNode = nodeSelection.node();
@@ -5082,14 +5334,10 @@ function createNodeHover(nodeSelection, hoverStyle) {
   if (hoverStyle) {
     nodeSelection.on("mouseenter.hover", function(_event, node) {
       const circle = this;
-      circle.setAttribute("stroke", hoverStyle.stroke ?? node.style?.stroke ?? "#ffffff");
-      circle.setAttribute("stroke-width", String(hoverStyle.strokeWidth ?? node.style?.strokeWidth ?? 1.5));
-      circle.setAttribute("opacity", String(hoverStyle.opacity ?? node.style?.opacity ?? 1));
+      applyHoverStyles(circle, node, hoverStyle);
     }).on("mouseleave.hover", function(_event, node) {
       const circle = this;
-      circle.setAttribute("stroke", node.style?.stroke ?? "#ffffff");
-      circle.setAttribute("stroke-width", String(node.style?.strokeWidth ?? 1.5));
-      circle.setAttribute("opacity", String(node.style?.opacity ?? 1));
+      removeHoverStyles(circle, node);
     });
   }
   const svgElement = firstNode.ownerSVGElement;
@@ -5486,6 +5734,8 @@ function bindNodeTooltip(params) {
       destroy: () => {
       },
       reposition: () => {
+      },
+      hide: () => {
       }
     };
   }
@@ -5495,6 +5745,9 @@ function bindNodeTooltip(params) {
     "mouseenter.tooltip",
     function(event, node) {
       const target = this;
+      if (target.dataset.selected === "true") {
+        return;
+      }
       activeTarget = target;
       const customContent = params.tooltipConfig?.renderContent?.(node);
       const content = customContent ?? getDefaultContent(node);
@@ -5504,6 +5757,11 @@ function bindNodeTooltip(params) {
     "mousemove.tooltip",
     function() {
       const target = this;
+      if (target.dataset.selected === "true") {
+        activeTarget = null;
+        tooltip.hide();
+        return;
+      }
       activeTarget = target;
       tooltip.move(target);
     }
@@ -5520,12 +5778,16 @@ function bindNodeTooltip(params) {
     }
     tooltip.move(activeTarget);
   }
+  function hide() {
+    activeTarget = null;
+    tooltip.hide();
+  }
   function destroy() {
     activeTarget = null;
     params.selection.on(".tooltip", null);
     tooltip.destroy();
   }
-  return { destroy, reposition };
+  return { destroy, reposition, hide };
 }
 function getDefaultContent(node) {
   return `
@@ -5755,27 +6017,27 @@ var SelectionManager = class {
   layers;
   linkMarkerSnapshots;
   root;
-  constructor(eventEmitter, config, layers, linkMarkerSnapshots, root2) {
+  tooltipBinding;
+  constructor(eventEmitter, config, layers, linkMarkerSnapshots, root2, tooltipBinding) {
     this.eventEmitter = eventEmitter;
     this.config = config;
     this.layers = layers;
     this.linkMarkerSnapshots = linkMarkerSnapshots;
     this.root = root2;
+    this.tooltipBinding = tooltipBinding;
   }
   /**
    * Select a node, automatically deselecting any current selection
    */
   selectNode(nodeElement, nodeData) {
+    if (this.tooltipBinding) {
+      this.tooltipBinding.hide();
+    }
     this.clearHoverState();
     this.clearSelection();
     this.bringNodeToFront(nodeElement, nodeData);
     if (this.config.nodeStyle) {
-      const style = this.config.nodeStyle;
-      if (style.fill !== void 0) nodeElement.style.fill = style.fill;
-      if (style.stroke !== void 0) nodeElement.style.stroke = style.stroke;
-      if (style.strokeWidth !== void 0) nodeElement.style.strokeWidth = String(style.strokeWidth);
-      if (style.opacity !== void 0) nodeElement.style.opacity = String(style.opacity);
-      if (style.radius !== void 0) nodeElement.style.setProperty("r", String(style.radius));
+      applySelectionStyles(nodeElement, nodeData, this.config.nodeStyle);
     }
     this.root.selectAll(".link-label").filter((item) => {
       if (item.style.label.visibility !== "hover") return false;
@@ -5826,12 +6088,7 @@ var SelectionManager = class {
     if (!this.state.selectedNode) return;
     const { element, data } = this.state.selectedNode;
     this.restoreSelectedElements(data);
-    element.style.fill = "";
-    element.style.stroke = "";
-    element.style.strokeWidth = "";
-    element.style.opacity = "";
-    element.style.removeProperty("r");
-    delete element.dataset.selected;
+    removeSelectionStyles(element, data);
     this.root.selectAll(".link-label.label-selection-pinned").classed("label-selection-pinned", false).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
     this.state.selectedNode = null;
     this.eventEmitter.emit("nodeDeselect", { node: data, element });
@@ -6056,18 +6313,42 @@ var DEFAULT_NODE_HOVER_STYLE = {
 };
 function resolveNodeStyle(params) {
   if (params.isSelected) {
-    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.selection?.nodeStyle);
+    return mergeNodeStyleSmart(DEFAULT_NODE_HOVER_STYLE, params.interaction?.selection?.nodeStyle);
   }
   if (params.isHovered) {
-    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.hover?.nodeStyle);
+    return mergeNodeStyleSmart(DEFAULT_NODE_HOVER_STYLE, params.interaction?.hover?.nodeStyle);
   }
   return void 0;
 }
-function mergeNodeStyle(base, override) {
-  return {
-    ...base,
-    ...override
-  };
+function mergeNodeStyleSmart(base, override) {
+  if (!override) return base;
+  const result = { ...override };
+  if (override.strokeWidth !== void 0 && override.stroke === void 0 && base.stroke !== void 0) {
+    result.stroke = base.stroke;
+  }
+  const baseKeys = Object.keys(base);
+  baseKeys.forEach((key) => {
+    if (key !== "stroke" && override[key] === void 0 && base[key] !== void 0) {
+      switch (key) {
+        case "fill":
+          result.fill = base.fill;
+          break;
+        case "strokeWidth":
+          result.strokeWidth = base.strokeWidth;
+          break;
+        case "opacity":
+          result.opacity = base.opacity;
+          break;
+        case "radius":
+          result.radius = base.radius;
+          break;
+        case "textColor":
+          result.textColor = base.textColor;
+          break;
+      }
+    }
+  });
+  return result;
 }
 
 // src/core/interaction-manager.ts
@@ -6167,7 +6448,8 @@ var InteractionManager = class {
         this.manager.config.interaction.selection,
         this.manager.layers,
         this.manager.linkMarkerSnapshots,
-        this.manager.rootSelection
+        this.manager.rootSelection,
+        this.manager.tooltipBinding || void 0
       );
       this.setupSelectionHandlers(selections);
       this.setupBackgroundClickHandler();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polly-graph",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Reusable D3-based graph visualization SDK with configurable nodes, links, labels, interactions, and layout behaviors.",
   "license": "MIT",
   "author": "Badal",
@@ -52,7 +52,11 @@
     "lint": "eslint \"src/**/*.ts\"",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",
-    "prepublishOnly": "npm run lint && npm run typecheck && npm run test && npm run build"
+    "prepublishOnly": "npm run lint && npm run typecheck && npm run test && npm run build",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "version:prerelease": "npm version prerelease"
   },
   "dependencies": {
     "d3": "7.9.0"