polly-graph 0.1.6 → 0.1.8

package/dist/index.js

@@ -2630,15 +2630,15 @@ function defaultWheelDelta(event) {
 function defaultTouchable2() {
   return navigator.maxTouchPoints || "ontouchstart" in this;
 }
-function defaultConstrain(transform2, extent, translateExtent) {
-  var dx0 = transform2.invertX(extent[0][0]) - translateExtent[0][0], dx1 = transform2.invertX(extent[1][0]) - translateExtent[1][0], dy0 = transform2.invertY(extent[0][1]) - translateExtent[0][1], dy1 = transform2.invertY(extent[1][1]) - translateExtent[1][1];
+function defaultConstrain(transform2, extent2, translateExtent) {
+  var dx0 = transform2.invertX(extent2[0][0]) - translateExtent[0][0], dx1 = transform2.invertX(extent2[1][0]) - translateExtent[1][0], dy0 = transform2.invertY(extent2[0][1]) - translateExtent[0][1], dy1 = transform2.invertY(extent2[1][1]) - translateExtent[1][1];
   return transform2.translate(
     dx1 > dx0 ? (dx0 + dx1) / 2 : Math.min(0, dx0) || Math.max(0, dx1),
     dy1 > dy0 ? (dy0 + dy1) / 2 : Math.min(0, dy0) || Math.max(0, dy1)
   );
 }
 function zoom_default2() {
-  var filter2 = defaultFilter2, extent = defaultExtent, constrain = defaultConstrain, wheelDelta = defaultWheelDelta, touchable = defaultTouchable2, scaleExtent = [0, Infinity], translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]], duration = 250, interpolate = zoom_default, listeners = dispatch_default2("start", "zoom", "end"), touchstarting, touchfirst, touchending, touchDelay = 500, wheelDelay = 150, clickDistance2 = 0, tapDistance = 10;
+  var filter2 = defaultFilter2, extent2 = defaultExtent, constrain = defaultConstrain, wheelDelta = defaultWheelDelta, touchable = defaultTouchable2, scaleExtent = [0, Infinity], translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]], duration = 250, interpolate = zoom_default, listeners = dispatch_default2("start", "zoom", "end"), touchstarting, touchfirst, touchending, touchDelay = 500, wheelDelay = 150, clickDistance2 = 0, tapDistance = 10;
   function zoom(selection2) {
     selection2.property("__zoom", defaultTransform).on("wheel.zoom", wheeled, { passive: false }).on("mousedown.zoom", mousedowned).on("dblclick.zoom", dblclicked).filter(touchable).on("touchstart.zoom", touchstarted).on("touchmove.zoom", touchmoved).on("touchend.zoom touchcancel.zoom", touchended).style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
   }
@@ -2661,7 +2661,7 @@ function zoom_default2() {
   };
   zoom.scaleTo = function(selection2, k, p, event) {
     zoom.transform(selection2, function() {
-      var e = extent.apply(this, arguments), t0 = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p, p1 = t0.invert(p0), k1 = typeof k === "function" ? k.apply(this, arguments) : k;
+      var e = extent2.apply(this, arguments), t0 = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p, p1 = t0.invert(p0), k1 = typeof k === "function" ? k.apply(this, arguments) : k;
       return constrain(translate(scale(t0, k1), p0, p1), e, translateExtent);
     }, p, event);
   };
@@ -2670,12 +2670,12 @@ function zoom_default2() {
       return constrain(this.__zoom.translate(
         typeof x3 === "function" ? x3.apply(this, arguments) : x3,
         typeof y3 === "function" ? y3.apply(this, arguments) : y3
-      ), extent.apply(this, arguments), translateExtent);
+      ), extent2.apply(this, arguments), translateExtent);
     }, null, event);
   };
   zoom.translateTo = function(selection2, x3, y3, p, event) {
     zoom.transform(selection2, function() {
-      var e = extent.apply(this, arguments), t = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p;
+      var e = extent2.apply(this, arguments), t = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p;
       return constrain(identity2.translate(p0[0], p0[1]).scale(t.k).translate(
         typeof x3 === "function" ? -x3.apply(this, arguments) : -x3,
         typeof y3 === "function" ? -y3.apply(this, arguments) : -y3
@@ -2690,8 +2690,8 @@ function zoom_default2() {
     var x3 = p0[0] - p1[0] * transform2.k, y3 = p0[1] - p1[1] * transform2.k;
     return x3 === transform2.x && y3 === transform2.y ? transform2 : new Transform(transform2.k, x3, y3);
   }
-  function centroid(extent2) {
-    return [(+extent2[0][0] + +extent2[1][0]) / 2, (+extent2[0][1] + +extent2[1][1]) / 2];
+  function centroid(extent3) {
+    return [(+extent3[0][0] + +extent3[1][0]) / 2, (+extent3[0][1] + +extent3[1][1]) / 2];
   }
   function schedule(transition2, transform2, point, event) {
     transition2.on("start.zoom", function() {
@@ -2699,7 +2699,7 @@ function zoom_default2() {
     }).on("interrupt.zoom end.zoom", function() {
       gesture(this, arguments).event(event).end();
     }).tween("zoom", function() {
-      var that = this, args = arguments, g = gesture(that, args).event(event), e = extent.apply(that, args), p = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point, w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), a2 = that.__zoom, b = typeof transform2 === "function" ? transform2.apply(that, args) : transform2, i = interpolate(a2.invert(p).concat(w / a2.k), b.invert(p).concat(w / b.k));
+      var that = this, args = arguments, g = gesture(that, args).event(event), e = extent2.apply(that, args), p = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point, w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), a2 = that.__zoom, b = typeof transform2 === "function" ? transform2.apply(that, args) : transform2, i = interpolate(a2.invert(p).concat(w / a2.k), b.invert(p).concat(w / b.k));
       return function(t) {
         if (t === 1) t = b;
         else {
@@ -2718,7 +2718,7 @@ function zoom_default2() {
     this.args = args;
     this.active = 0;
     this.sourceEvent = null;
-    this.extent = extent.apply(that, args);
+    this.extent = extent2.apply(that, args);
     this.taps = 0;
   }
   Gesture.prototype = {
@@ -2811,7 +2811,7 @@ function zoom_default2() {
   }
   function dblclicked(event, ...args) {
     if (!filter2.apply(this, arguments)) return;
-    var t0 = this.__zoom, p0 = pointer_default(event.changedTouches ? event.changedTouches[0] : event, this), p1 = t0.invert(p0), k1 = t0.k * (event.shiftKey ? 0.5 : 2), t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, args), translateExtent);
+    var t0 = this.__zoom, p0 = pointer_default(event.changedTouches ? event.changedTouches[0] : event, this), p1 = t0.invert(p0), k1 = t0.k * (event.shiftKey ? 0.5 : 2), t1 = constrain(translate(scale(t0, k1), p0, p1), extent2.apply(this, args), translateExtent);
     noevent_default2(event);
     if (duration > 0) select_default2(this).transition().duration(duration).call(schedule, t1, p0, event);
     else select_default2(this).call(zoom.transform, t1, p0, event);
@@ -2890,7 +2890,7 @@ function zoom_default2() {
     return arguments.length ? (touchable = typeof _ === "function" ? _ : constant_default4(!!_), zoom) : touchable;
   };
   zoom.extent = function(_) {
-    return arguments.length ? (extent = typeof _ === "function" ? _ : constant_default4([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;
+    return arguments.length ? (extent2 = typeof _ === "function" ? _ : constant_default4([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent2;
   };
   zoom.scaleExtent = function(_) {
     return arguments.length ? (scaleExtent[0] = +_[0], scaleExtent[1] = +_[1], zoom) : [scaleExtent[0], scaleExtent[1]];
@@ -2920,6 +2920,471 @@ function zoom_default2() {
   return zoom;
 }
 
+// src/create-graph.ts
+import { extent } from "d3";
+
+// src/utils/timer-manager.ts
+var TimerManager = class {
+  activeTimers = /* @__PURE__ */ new Map();
+  isDestroyed = false;
+  /**
+   * Schedule a timeout with automatic cleanup tracking
+   */
+  setTimeout(name, callback, delay) {
+    this.clearTimer(name);
+    if (this.isDestroyed) return;
+    const id2 = window.setTimeout(() => {
+      this.activeTimers.delete(name);
+      if (!this.isDestroyed) {
+        callback();
+      }
+    }, delay);
+    this.activeTimers.set(name, {
+      id: id2,
+      name,
+      type: "timeout",
+      startTime: performance.now()
+    });
+  }
+  /**
+   * Schedule an interval with automatic cleanup tracking
+   */
+  setInterval(name, callback, delay) {
+    this.clearTimer(name);
+    if (this.isDestroyed) return;
+    const id2 = window.setInterval(() => {
+      if (!this.isDestroyed) {
+        callback();
+      } else {
+        this.clearTimer(name);
+      }
+    }, delay);
+    this.activeTimers.set(name, {
+      id: id2,
+      name,
+      type: "interval",
+      startTime: performance.now()
+    });
+  }
+  /**
+   * Clear a specific timer by name
+   */
+  clearTimer(name) {
+    const timer2 = this.activeTimers.get(name);
+    if (!timer2) return false;
+    if (timer2.type === "timeout") {
+      clearTimeout(timer2.id);
+    } else {
+      clearInterval(timer2.id);
+    }
+    this.activeTimers.delete(name);
+    return true;
+  }
+  /**
+   * Check if a timer is currently active
+   */
+  hasActiveTimer(name) {
+    return this.activeTimers.has(name);
+  }
+  /**
+   * Get information about active timers
+   */
+  getActiveTimers() {
+    const now2 = performance.now();
+    return Array.from(this.activeTimers.values()).map((timer2) => ({
+      name: timer2.name,
+      type: timer2.type,
+      age: now2 - timer2.startTime
+    }));
+  }
+  /**
+   * Debounced execution - only runs the latest call after delay
+   */
+  debounce(name, callback, delay) {
+    this.setTimeout(name, callback, delay);
+  }
+  /**
+   * Throttled execution - limits frequency of execution
+   */
+  throttle(name, callback, delay) {
+    if (this.hasActiveTimer(name)) {
+      return;
+    }
+    callback();
+    this.setTimeout(name, () => {
+    }, delay);
+  }
+  /**
+   * Schedule multiple related timers that can be cleared as a group
+   */
+  scheduleGroup(groupName, timers) {
+    timers.forEach((timer2, index2) => {
+      const timerName = `${groupName}_${timer2.name}_${index2}`;
+      if (timer2.type === "interval") {
+        this.setInterval(timerName, timer2.callback, timer2.delay);
+      } else {
+        this.setTimeout(timerName, timer2.callback, timer2.delay);
+      }
+    });
+  }
+  /**
+   * Clear all timers in a group
+   */
+  clearGroup(groupName) {
+    let clearedCount = 0;
+    for (const [name] of Array.from(this.activeTimers)) {
+      if (name.startsWith(`${groupName}_`)) {
+        this.clearTimer(name);
+        clearedCount++;
+      }
+    }
+    return clearedCount;
+  }
+  /**
+   * Get count of active timers
+   */
+  getActiveTimerCount() {
+    return this.activeTimers.size;
+  }
+  /**
+   * Clear all timers and prevent new ones from being created
+   */
+  destroy() {
+    this.isDestroyed = true;
+    for (const [name] of Array.from(this.activeTimers)) {
+      this.clearTimer(name);
+    }
+    this.activeTimers.clear();
+  }
+  /**
+   * Reset manager (clear all timers but allow new ones)
+   */
+  reset() {
+    for (const [name] of Array.from(this.activeTimers)) {
+      this.clearTimer(name);
+    }
+    this.isDestroyed = false;
+  }
+};
+
+// src/utils/event-emitter.ts
+var GraphEventEmitter = class {
+  listeners = /* @__PURE__ */ new Map();
+  options;
+  isDestroyed = false;
+  listenerIdCounter = 0;
+  constructor(options = {}) {
+    this.options = {
+      maxListeners: options.maxListeners ?? 50,
+      enableWarnings: options.enableWarnings ?? true
+    };
+  }
+  /**
+   * Add an event listener
+   */
+  on(event, listener, namespace) {
+    if (this.isDestroyed) {
+      if (this.options.enableWarnings) {
+        console.warn("[GraphEventEmitter] Cannot add listener to destroyed emitter");
+      }
+      return () => {
+      };
+    }
+    const id2 = `listener_${++this.listenerIdCounter}`;
+    const handler = {
+      listener,
+      namespace,
+      id: id2
+    };
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, []);
+    }
+    const eventListeners = this.listeners.get(event);
+    eventListeners.push(handler);
+    if (eventListeners.length > this.options.maxListeners && this.options.enableWarnings) {
+      console.warn(
+        `[GraphEventEmitter] Event '${String(event)}' has ${eventListeners.length} listeners. Possible memory leak detected.`
+      );
+    }
+    return () => {
+      this.removeListener(event, handler.id);
+    };
+  }
+  /**
+   * Add a one-time event listener
+   */
+  once(event, listener, namespace) {
+    const id2 = `listener_${++this.listenerIdCounter}`;
+    const handler = {
+      listener: (data, element) => {
+        this.removeListener(event, id2);
+        listener(data, element);
+      },
+      namespace,
+      once: true,
+      id: id2
+    };
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, []);
+    }
+    this.listeners.get(event).push(handler);
+    return () => {
+      this.removeListener(event, handler.id);
+    };
+  }
+  /**
+   * Remove a specific listener
+   */
+  off(event, listener) {
+    const eventListeners = this.listeners.get(event);
+    if (!eventListeners) return;
+    const index2 = eventListeners.findIndex((handler) => handler.listener === listener);
+    if (index2 !== -1) {
+      eventListeners.splice(index2, 1);
+      if (eventListeners.length === 0) {
+        this.listeners.delete(event);
+      }
+    }
+  }
+  /**
+   * Remove listener by ID
+   */
+  removeListener(event, id2) {
+    const eventListeners = this.listeners.get(event);
+    if (!eventListeners) return;
+    const index2 = eventListeners.findIndex((handler) => handler.id === id2);
+    if (index2 !== -1) {
+      eventListeners.splice(index2, 1);
+      if (eventListeners.length === 0) {
+        this.listeners.delete(event);
+      }
+    }
+  }
+  /**
+   * Remove all listeners for an event or namespace
+   */
+  removeAllListeners(event, namespace) {
+    if (event && !namespace) {
+      this.listeners.delete(event);
+    } else if (namespace && !event) {
+      for (const [eventName, handlers] of Array.from(this.listeners.entries())) {
+        const filtered = handlers.filter((handler) => handler.namespace !== namespace);
+        if (filtered.length === 0) {
+          this.listeners.delete(eventName);
+        } else {
+          this.listeners.set(eventName, filtered);
+        }
+      }
+    } else if (event && namespace) {
+      const eventListeners = this.listeners.get(event);
+      if (eventListeners) {
+        const filtered = eventListeners.filter((handler) => handler.namespace !== namespace);
+        if (filtered.length === 0) {
+          this.listeners.delete(event);
+        } else {
+          this.listeners.set(event, filtered);
+        }
+      }
+    } else {
+      this.listeners.clear();
+    }
+  }
+  /**
+   * Emit an event to all listeners
+   */
+  emit(event, data, element) {
+    if (this.isDestroyed) {
+      return false;
+    }
+    const eventListeners = this.listeners.get(event);
+    if (!eventListeners || eventListeners.length === 0) {
+      return false;
+    }
+    const listenersToCall = [...eventListeners];
+    for (const handler of listenersToCall) {
+      try {
+        handler.listener(data, element);
+      } catch (error) {
+        if (this.options.enableWarnings) {
+          console.error(`[GraphEventEmitter] Error in listener for '${String(event)}':`, error);
+        }
+      }
+    }
+    return true;
+  }
+  /**
+   * Get the number of listeners for an event
+   */
+  listenerCount(event) {
+    return this.listeners.get(event)?.length ?? 0;
+  }
+  /**
+   * Get all event names that have listeners
+   */
+  eventNames() {
+    return Array.from(this.listeners.keys());
+  }
+  /**
+   * Get listeners for an event
+   */
+  getListeners(event) {
+    return this.listeners.get(event)?.map((handler) => handler.listener) ?? [];
+  }
+  /**
+   * Check if an event has listeners
+   */
+  hasListeners(event) {
+    return this.listenerCount(event) > 0;
+  }
+  /**
+   * Get debug information about the emitter
+   */
+  getDebugInfo() {
+    const events = /* @__PURE__ */ new Map();
+    const namespaces = /* @__PURE__ */ new Map();
+    for (const [event, handlers] of Array.from(this.listeners.entries())) {
+      events.set(event, handlers.length);
+      for (const handler of handlers) {
+        if (handler.namespace) {
+          namespaces.set(handler.namespace, (namespaces.get(handler.namespace) ?? 0) + 1);
+        }
+      }
+    }
+    return {
+      totalEvents: this.listeners.size,
+      totalListeners: Array.from(this.listeners.values()).reduce((sum, handlers) => sum + handlers.length, 0),
+      events: Object.fromEntries(events.entries()),
+      namespaces: Object.fromEntries(namespaces),
+      isDestroyed: this.isDestroyed
+    };
+  }
+  /**
+   * Clean up all listeners and mark as destroyed
+   */
+  destroy() {
+    this.isDestroyed = true;
+    this.listeners.clear();
+  }
+  /**
+   * Reset the emitter (clear listeners but allow new ones)
+   */
+  reset() {
+    this.isDestroyed = false;
+    this.listeners.clear();
+  }
+};
+var TypedGraphEventEmitter = class extends GraphEventEmitter {
+  constructor(options) {
+    super(options);
+  }
+};
+
+// src/core/graph-manager.ts
+var GraphManager = class {
+  constructor(config) {
+    this.config = config;
+  }
+  config;
+  // Core Managers
+  timerManager = null;
+  tickManager = null;
+  eventEmitter = null;
+  selectionManager = null;
+  // DOM Elements
+  svgElement = null;
+  rootGroup = null;
+  layers = null;
+  dimensions = { width: 0, height: 0 };
+  // D3 Behaviors
+  zoomBehavior = null;
+  simulation = null;
+  // Component Instances
+  controls = null;
+  tooltipBinding = null;
+  // Cleanup Functions
+  cleanupFunctions = [];
+  // Callbacks
+  fitViewCallback = null;
+  // State Tracking
+  linkMarkerSnapshots = null;
+  rootSelection = null;
+  simulationPaused = false;
+  needsImmediateFitView = false;
+  /**
+   * Initialize core managers
+   */
+  initializeManagers() {
+    if (!this.timerManager) {
+      this.timerManager = new TimerManager();
+    } else {
+      this.timerManager.reset();
+    }
+    if (!this.eventEmitter) {
+      this.eventEmitter = new TypedGraphEventEmitter();
+    } else {
+      this.eventEmitter.reset();
+    }
+    if (this.tickManager) {
+      this.tickManager.clearCaches();
+    }
+  }
+  /**
+   * Add cleanup function to be called on destroy
+   */
+  addCleanup(cleanup) {
+    this.cleanupFunctions.push(cleanup);
+  }
+  /**
+   * Clean up all resources
+   */
+  destroy() {
+    this.cleanupFunctions.forEach((cleanup) => {
+      try {
+        cleanup();
+      } catch (error) {
+        console.warn("[GraphManager] Cleanup function failed:", error);
+      }
+    });
+    this.timerManager?.destroy();
+    this.tickManager?.clearCaches();
+    this.eventEmitter?.reset();
+    if (this.tooltipBinding && "destroy" in this.tooltipBinding) {
+      this.tooltipBinding.destroy();
+    }
+    this.controls?.destroy?.();
+    this.timerManager = null;
+    this.tickManager = null;
+    this.eventEmitter = null;
+    this.selectionManager = null;
+    this.svgElement = null;
+    this.rootGroup = null;
+    this.zoomBehavior = null;
+    this.simulation = null;
+    this.controls = null;
+    this.tooltipBinding = null;
+    this.linkMarkerSnapshots = null;
+    this.rootSelection = null;
+    this.simulationPaused = false;
+    this.needsImmediateFitView = false;
+    this.cleanupFunctions = [];
+  }
+  /**
+   * Reheat simulation with specified alpha
+   */
+  reheatSimulation(alpha = 0.3) {
+    if (!this.simulation) {
+      console.warn("[GraphManager] Cannot reheat: no simulation");
+      return;
+    }
+    this.simulation.alpha(alpha).restart();
+    if (this.timerManager) {
+      this.timerManager.debounce("simulation-cooldown", () => {
+        this.simulation?.stop();
+      }, 2e3);
+    }
+  }
+};
+
 // node_modules/d3-force/src/center.js
 function center_default(x3, y3) {
   var nodes, strength = 1;
@@ -3608,6 +4073,68 @@ function manyBody_default() {
   return force;
 }
 
+// node_modules/d3-force/src/x.js
+function x_default2(x3) {
+  var strength = constant_default5(0.1), nodes, strengths, xz;
+  if (typeof x3 !== "function") x3 = constant_default5(x3 == null ? 0 : +x3);
+  function force(alpha) {
+    for (var i = 0, n = nodes.length, node; i < n; ++i) {
+      node = nodes[i], node.vx += (xz[i] - node.x) * strengths[i] * alpha;
+    }
+  }
+  function initialize() {
+    if (!nodes) return;
+    var i, n = nodes.length;
+    strengths = new Array(n);
+    xz = new Array(n);
+    for (i = 0; i < n; ++i) {
+      strengths[i] = isNaN(xz[i] = +x3(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes);
+    }
+  }
+  force.initialize = function(_) {
+    nodes = _;
+    initialize();
+  };
+  force.strength = function(_) {
+    return arguments.length ? (strength = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : strength;
+  };
+  force.x = function(_) {
+    return arguments.length ? (x3 = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : x3;
+  };
+  return force;
+}
+
+// node_modules/d3-force/src/y.js
+function y_default2(y3) {
+  var strength = constant_default5(0.1), nodes, strengths, yz;
+  if (typeof y3 !== "function") y3 = constant_default5(y3 == null ? 0 : +y3);
+  function force(alpha) {
+    for (var i = 0, n = nodes.length, node; i < n; ++i) {
+      node = nodes[i], node.vy += (yz[i] - node.y) * strengths[i] * alpha;
+    }
+  }
+  function initialize() {
+    if (!nodes) return;
+    var i, n = nodes.length;
+    strengths = new Array(n);
+    yz = new Array(n);
+    for (i = 0; i < n; ++i) {
+      strengths[i] = isNaN(yz[i] = +y3(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes);
+    }
+  }
+  force.initialize = function(_) {
+    nodes = _;
+    initialize();
+  };
+  force.strength = function(_) {
+    return arguments.length ? (strength = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : strength;
+  };
+  force.y = function(_) {
+    return arguments.length ? (y3 = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : y3;
+  };
+  return force;
+}
+
 // src/core/create-graph-layers.ts
 function createGraphLayers(host) {
   host.innerHTML = "";
@@ -3633,25 +4160,56 @@ function createGraphLayers(host) {
   interactionRect.setAttribute("pointer-events", "all");
   interactionLayer.appendChild(interactionRect);
   const graphRoot = createGroup("viewport");
+  const hoverLayerContainer = createGroup("hover-layer");
+  const hoverLinks = createGroup("hover-links");
+  const hoverNodes = createGroup("hover-nodes");
+  const hoverNodeLabels = createGroup("hover-node-labels");
+  const hoverLinkLabels = createGroup("hover-link-labels");
+  hoverLayerContainer.append(hoverLinks, hoverNodes, hoverNodeLabels, hoverLinkLabels);
+  const selectionLayerContainer = createGroup("selection-layer");
+  const selectionLinks = createGroup("selection-links");
+  const selectionNodes = createGroup("selection-nodes");
+  const selectionNodeLabels = createGroup("selection-node-labels");
+  const selectionLinkLabels = createGroup("selection-link-labels");
+  selectionLayerContainer.append(selectionNodes, selectionLinks, selectionNodeLabels, selectionLinkLabels);
   const layers = {
     svg,
     overlay,
     interactionLayer,
     interactionRect,
     root: graphRoot,
-    // These keys now match your ctx.root.select('[data-layer="..."]') calls
+    // Base graph layers
     links: createGroup("links"),
-    linkLabels: createGroup("link-labels"),
     nodeRings: createGroup("node-rings"),
     nodes: createGroup("nodes"),
-    nodeLabels: createGroup("node-labels")
+    nodeLabels: createGroup("node-labels"),
+    linkLabels: createGroup("link-labels"),
+    // Dedicated interaction state layers with proper sub-layering
+    hoverLayer: {
+      container: hoverLayerContainer,
+      links: hoverLinks,
+      nodes: hoverNodes,
+      nodeLabels: hoverNodeLabels,
+      linkLabels: hoverLinkLabels
+    },
+    selectionLayer: {
+      container: selectionLayerContainer,
+      links: selectionLinks,
+      nodes: selectionNodes,
+      nodeLabels: selectionNodeLabels,
+      linkLabels: selectionLinkLabels
+    }
   };
   graphRoot.append(
     layers.links,
-    layers.linkLabels,
     layers.nodeRings,
     layers.nodes,
-    layers.nodeLabels
+    layers.nodeLabels,
+    layers.linkLabels,
+    layers.hoverLayer.container,
+    // Hover elements on top
+    layers.selectionLayer.container
+    // Selected elements at very top
   );
   svg.appendChild(interactionLayer);
   svg.appendChild(graphRoot);
@@ -3662,7 +4220,7 @@ function createGraphLayers(host) {
 function createZoom({
   svg,
   root: root2,
-  scaleExtent = [0.2, 3]
+  scaleExtent = [0.01, 10]
 }) {
   const svgSelection = select_default2(svg);
   const rootSelection = select_default2(root2);
@@ -3703,248 +4261,336 @@ function createZoom({
 }
 
 // src/core/create-graph-simulation.ts
+function getAdaptiveDefaults(nodeCount) {
+  if (nodeCount < 50) {
+    return {
+      alpha: 1,
+      alphaDecay: 0.05,
+      alphaMin: 1e-3,
+      velocityDecay: 0.6,
+      forces: {
+        link: { strength: 0.5, distance: 200 },
+        charge: { strength: -500 },
+        center: { strength: 0.05 },
+        collide: { strength: 0.8, iterations: 1 }
+      }
+    };
+  } else if (nodeCount < 200) {
+    return {
+      alpha: 1,
+      alphaDecay: 0.05,
+      alphaMin: 1e-3,
+      velocityDecay: 0.6,
+      forces: {
+        link: { strength: 0.5, distance: 200 },
+        charge: { strength: -500 },
+        center: { strength: 0.05 },
+        collide: { strength: 0.7, iterations: 1 }
+      }
+    };
+  } else {
+    return {
+      alpha: 1,
+      alphaDecay: 0.05,
+      alphaMin: 1e-3,
+      velocityDecay: 0.6,
+      forces: {
+        link: { strength: 0.5, distance: 200 },
+        charge: { strength: -500 },
+        center: { strength: 0.05 },
+        collide: { strength: 0.6, iterations: 1 }
+      }
+    };
+  }
+}
+function warmupSimulation(simulation, ticks) {
+  for (let i = 0; i < ticks; i++) {
+    simulation.tick();
+  }
+}
 function createGraphSimulation(config) {
   const centerX = config.width / 2;
   const centerY = config.height / 2;
-  const seedRadius = 80;
-  config.nodes.forEach((node, index2) => {
-    if (node.x == null || node.y == null) {
-      const angle = index2 / Math.max(config.nodes.length, 1) * Math.PI * 2;
-      node.x = centerX + Math.cos(angle) * seedRadius;
-      node.y = centerY + Math.sin(angle) * seedRadius;
+  const nodeCount = config.nodes.length;
+  const adaptiveDefaults = getAdaptiveDefaults(nodeCount);
+  const enhancedConfig = config.config || {};
+  const forces = enhancedConfig.forces || {};
+  const useAdaptive = enhancedConfig.adaptive?.enabled !== false;
+  seedNodePositions(config.nodes, config.width, config.height);
+  const alpha = enhancedConfig.alpha ?? (useAdaptive ? adaptiveDefaults.alpha : 1);
+  const alphaDecay = enhancedConfig.alphaDecay ?? (useAdaptive ? adaptiveDefaults.alphaDecay : 0.05);
+  const alphaMin = enhancedConfig.alphaMin ?? (useAdaptive ? adaptiveDefaults.alphaMin : 1e-3);
+  const velocityDecay = enhancedConfig.velocityDecay ?? (useAdaptive ? adaptiveDefaults.velocityDecay : 0.6);
+  const simulation = simulation_default(config.nodes).alpha(alpha).alphaDecay(alphaDecay).alphaMin(alphaMin).velocityDecay(velocityDecay);
+  if (forces.link?.enabled !== false) {
+    const linkDistance = forces.link?.distance ?? (useAdaptive ? adaptiveDefaults.forces.link.distance : 200);
+    const linkStrength = forces.link?.strength ?? (useAdaptive ? adaptiveDefaults.forces.link.strength : 0.5);
+    simulation.force(
+      "link",
+      link_default(config.links).id((node) => node.id).distance(typeof linkDistance === "function" ? linkDistance : () => linkDistance).strength(typeof linkStrength === "function" ? linkStrength : () => linkStrength).iterations(forces.link?.iterations ?? 1)
+    );
+  }
+  if (forces.charge?.enabled !== false) {
+    const chargeStrength = forces.charge?.strength ?? (useAdaptive ? adaptiveDefaults.forces.charge.strength : -500);
+    const chargeForce = manyBody_default().theta(forces.charge?.theta ?? 0.9).distanceMin(forces.charge?.distanceMin ?? 1).distanceMax(forces.charge?.distanceMax ?? Infinity);
+    if (typeof chargeStrength === "function") {
+      chargeForce.strength((d, _i) => chargeStrength(d));
+    } else {
+      chargeForce.strength(chargeStrength);
     }
-  });
-  const simulation = simulation_default(config.nodes).alpha(0.9).alphaDecay(0.12).alphaMin(0.03).velocityDecay(0.5).force(
-    "link",
-    link_default(config.links).id((d) => d.id).distance((d) => {
-      const source = d.source;
-      const target = d.target;
-      const sourceR = source.style?.radius || 20;
-      const targetR = target.style?.radius || 20;
-      const labelBuffer = d.style?.label?.height || 40;
-      return (sourceR + targetR + labelBuffer) * 2;
-    }).strength(0.8)
-  ).force("charge", manyBody_default().strength(-220)).force(
-    "collide",
-    collide_default().radius((node) => (node.style?.radius ?? 12) + 10).iterations(2)
-  ).force("center", center_default(centerX, centerY).strength(0.08));
+    simulation.force("charge", chargeForce);
+  }
+  if (forces.collide?.enabled !== false) {
+    const collideRadius = forces.collide?.radius ?? ((node) => (node.style?.radius ?? 12) + 8);
+    const collideStrength = forces.collide?.strength ?? (useAdaptive ? adaptiveDefaults.forces.collide.strength : 0.7);
+    const collideForce = collide_default().strength(collideStrength).iterations(forces.collide?.iterations ?? adaptiveDefaults.forces.collide.iterations);
+    if (typeof collideRadius === "function") {
+      collideForce.radius((d, _i) => collideRadius(d));
+    } else {
+      collideForce.radius(collideRadius);
+    }
+    simulation.force("collide", collideForce);
+  }
+  if (forces.center?.enabled !== false) {
+    const centerStrength = forces.center?.strength ?? (useAdaptive ? adaptiveDefaults.forces.center.strength : 0.05);
+    simulation.force(
+      "center",
+      center_default(
+        forces.center?.x ?? centerX,
+        forces.center?.y ?? centerY
+      ).strength(centerStrength)
+    );
+  }
+  if (forces.x?.enabled !== false) {
+    const xForce = x_default2().strength(forces.x?.strength ?? 0.05);
+    const xPosition = forces.x?.x;
+    if (typeof xPosition === "function") {
+      xForce.x((d, _i) => xPosition(d));
+    } else {
+      xForce.x(xPosition ?? centerX);
+    }
+    simulation.force("x", xForce);
+  }
+  if (forces.y?.enabled !== false) {
+    const yForce = y_default2().strength(forces.y?.strength ?? 0.05);
+    const yPosition = forces.y?.y;
+    if (typeof yPosition === "function") {
+      yForce.y((d, _i) => yPosition(d));
+    } else {
+      yForce.y(yPosition ?? centerY);
+    }
+    simulation.force("y", yForce);
+  }
+  if (enhancedConfig.warmup?.enabled !== false) {
+    const warmupTicks = enhancedConfig.warmup?.ticks ?? (useAdaptive ? Math.min(100, nodeCount * 2) : 50);
+    warmupSimulation(simulation, warmupTicks);
+  }
   return { simulation };
 }
-
-// src/utils/get-link-marker-id.ts
-function getLinkMarkerId(style) {
-  const markerStyle = {
-    stroke: style.stroke ?? "#94a3b8",
-    strokeWidth: style.strokeWidth ?? 2,
-    arrowFill: style.arrow?.fill ?? style.stroke ?? "#94a3b8",
-    arrowSize: style.arrow?.size ?? 6
-  };
-  const serializedStyle = JSON.stringify(markerStyle);
-  const hash = createHash(serializedStyle);
-  return `graph-arrow-${hash}`;
-}
-function createHash(value) {
-  let hash = 0;
-  for (let index2 = 0; index2 < value.length; index2 += 1) {
-    const charCode = value.charCodeAt(index2);
-    hash = (hash << 5) - hash + charCode;
-    hash |= 0;
+function seedNodePositions(nodes, containerWidth, containerHeight) {
+  if (containerWidth <= 0 || containerHeight <= 0) {
+    console.warn("\u{1F6AB} [seedNodePositions] Invalid container dimensions, skipping positioning");
+    return;
   }
-  return Math.abs(hash).toString(36);
+  const centerX = containerWidth / 2;
+  const centerY = containerHeight / 2;
+  const padding = 50;
+  const maxRadius = Math.min(
+    (containerWidth - padding * 2) / 2,
+    (containerHeight - padding * 2) / 2
+  );
+  const nodeBasedRadius = Math.max(50, Math.min(200, nodes.length * 3));
+  const seedRadius = Math.min(maxRadius, nodeBasedRadius);
+  nodes.forEach(
+    (node, index2) => {
+      if (node.x != null && node.y != null && !isNaN(node.x) && !isNaN(node.y) && isFinite(node.x) && isFinite(node.y)) {
+        return;
+      }
+      const angle = index2 / Math.max(nodes.length, 1) * Math.PI * 2 + (Math.random() - 0.5) * 0.5;
+      const radius = seedRadius * (0.3 + Math.random() * 0.7);
+      const x3 = centerX + Math.cos(angle) * radius;
+      const y3 = centerY + Math.sin(angle) * radius;
+      const nodeRadius = 12;
+      const clampedX = Math.max(nodeRadius, Math.min(containerWidth - nodeRadius, x3));
+      const clampedY = Math.max(nodeRadius, Math.min(containerHeight - nodeRadius, y3));
+      node.x = clampedX;
+      node.y = clampedY;
+    }
+  );
+  nodes.forEach((node) => {
+    node.initialX = node.x;
+    node.initialY = node.y;
+  });
 }
 
-// src/core/create-arrow-marker.ts
-function createArrowMarker(params) {
-  const markerId = getLinkMarkerId(params.style);
-  const existingMarker = params.svg.querySelector(`#${markerId}`);
-  if (existingMarker) {
-    return markerId;
-  }
-  const arrowSize = params.style.arrow?.size ?? 6;
-  const fill = params.style.arrow?.fill ?? params.style.stroke ?? "#94a3b8";
-  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
-  marker.setAttribute("id", markerId);
-  marker.setAttribute("viewBox", "0 0 20 20");
-  marker.setAttribute("refX", "0");
-  marker.setAttribute("refY", "10");
-  marker.setAttribute("markerWidth", String(arrowSize * 2));
-  marker.setAttribute("markerHeight", String(arrowSize * 2));
-  marker.setAttribute("orient", "auto");
-  marker.setAttribute("markerUnits", "userSpaceOnUse");
-  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute("d", "M 0 0 L 20 10 L 0 20 z");
-  path.setAttribute("fill", fill);
-  marker.appendChild(path);
-  defs.appendChild(marker);
-  params.svg.insertBefore(defs, params.svg.firstChild);
-  return markerId;
+// src/utils/observe-resize.ts
+function observeResize(element, onResize) {
+  const observer = new ResizeObserver(
+    (entries) => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+      const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+      if (width > 0 && height > 0) {
+        onResize(width, height);
+      }
+    }
+  );
+  observer.observe(element);
+  return () => {
+    observer.disconnect();
+  };
 }
 
-// src/controls/graph-controls.utils.ts
-function resolveControlsPosition(position) {
-  return position ?? "bottom-left";
-}
-function resolveControlsOrientation(orientation) {
-  return orientation ?? "vertical";
-}
-function shouldRenderControl(config, key) {
-  const show = config.show;
-  if (!show) {
-    return true;
+// src/utils/error-handler.ts
+var GraphError = class extends Error {
+  code;
+  context;
+  recoverable;
+  constructor(message, code, context, recoverable = false) {
+    super(message);
+    this.name = "GraphError";
+    this.code = code;
+    this.context = context;
+    this.recoverable = recoverable;
   }
-  const value = show[key];
-  if (value === void 0) {
-    return true;
-  }
-  return value;
-}
-
-// src/assets/plus.svg?raw
-var plus_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M5 12h14m-7-7v14" />\n</svg>';
-
-// src/assets/minus.svg?raw
-var minus_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M19 12H5" />\n</svg>';
-
-// src/assets/fit.svg?raw
-var fit_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M5 9V5H9" />\n  <path d="M19 9V5H15" />\n  <path d="M5 15V19H9" />\n  <path d="M19 15V19H15" />\n</svg>';
-
-// src/assets/reset.svg?raw
-var reset_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M20 12a8 8 0 1 1-2.3-5.7" />\n  <path d="M20 4.5v4h-4" />\n</svg>';
-
-// src/controls/graph-controls.icons.ts
-var ICON_MAP = {
-  "zoom-in": plus_default,
-  "zoom-out": minus_default,
-  fit: fit_default,
-  reset: reset_default
 };
-function getControlIcon(icon) {
-  const raw = ICON_MAP[icon];
-  if (!raw) {
-    throw new Error(`Icon not found: ${icon}`);
-  }
-  return raw.replace("<svg", '<svg class="pg-icon"');
-}
-
-// src/controls/create-graph-controls.ts
-function createGraphControls(overlay, graph, config) {
-  let root2 = null;
-  function mount() {
-    if (!config.enabled) {
+var ErrorHandler = class {
+  static isDestroyed = false;
+  /**
+   * Handle errors with appropriate logging and recovery
+   */
+  static handle(error, context, fallback) {
+    if (this.isDestroyed) return;
+    const graphError = error instanceof GraphError ? error : new GraphError(
+      error.message,
+      "UNKNOWN_ERROR",
+      context,
+      true
+    );
+    console.error(`[Polly Graph] ${graphError.code}:`, {
+      message: graphError.message,
+      context: graphError.context,
+      stack: graphError.stack
+    });
+    if (graphError.recoverable && fallback) {
+      try {
+        fallback();
+      } catch (fallbackError) {
+        console.error("[Polly Graph] Fallback failed:", fallbackError);
+      }
+    } else if (!graphError.recoverable) {
+      throw graphError;
+    }
+  }
+  /**
+   * Wrap async operations with error handling
+   */
+  static async wrapAsync(operation, context, fallback) {
+    try {
+      return await operation();
+    } catch (error) {
+      this.handle(error, context, fallback ? () => fallback() : void 0);
+      if (fallback) {
+        return fallback();
+      }
+      throw error;
+    }
+  }
+  /**
+   * Wrap synchronous operations with error handling
+   */
+  static wrap(operation, context, fallback) {
+    try {
+      return operation();
+    } catch (error) {
+      this.handle(error, context, fallback);
+      return fallback ? fallback() : void 0;
+    }
+  }
+  /**
+   * Safe DOM operation wrapper
+   */
+  static safeDOMOperation(operation, context, fallback) {
+    if (!document || this.isDestroyed) {
+      if (fallback) {
+        return fallback();
+      }
+      return void 0;
+    }
+    return this.wrap(operation, {
+      ...context,
+      operation: `DOM: ${context.operation}`
+    }, fallback);
+  }
+  /**
+   * Safe D3 operation wrapper
+   */
+  static safeD3Operation(operation, context, fallback) {
+    return this.wrap(operation, {
+      ...context,
+      operation: `D3: ${context.operation}`
+    }, fallback);
+  }
+  /**
+   * Create recoverable error for non-critical failures
+   */
+  static createRecoverableError(message, code, context) {
+    return new GraphError(message, code, context, true);
+  }
+  /**
+   * Create non-recoverable error for critical failures
+   */
+  static createCriticalError(message, code, context) {
+    return new GraphError(message, code, context, false);
+  }
+  /**
+   * Validate and handle D3 selection operations
+   */
+  static validateSelection(selection2, context, operation) {
+    if (!selection2 || !selection2.size || selection2.size() === 0) {
+      this.handle(
+        this.createRecoverableError(
+          "D3 selection is empty",
+          "SELECTION_EMPTY",
+          context
+        ),
+        context
+      );
       return;
     }
-    root2 = document.createElement("div");
-    root2.className = "pg-controls";
-    const position = resolveControlsPosition(config.position);
-    root2.classList.add(`pg-pos-${position}`);
-    const orientation = resolveControlsOrientation(config.orientation);
-    root2.classList.add(`pg-orient-${orientation}`);
-    if (config.offset) {
-      root2.style.setProperty("--pg-controls-offset-x", `${config.offset.x}px`);
-      root2.style.setProperty("--pg-controls-offset-y", `${config.offset.y}px`);
-    }
-    appendControls(root2, config, graph);
-    overlay.appendChild(root2);
+    this.safeD3Operation(() => operation(selection2), context);
   }
-  function appendControls(root3, config2, graph2) {
-    const actions = [
-      { key: "zoomIn", icon: "zoom-in", label: "Zoom in", fn: graph2.zoomIn.bind(graph2) },
-      { key: "zoomOut", icon: "zoom-out", label: "Zoom out", fn: graph2.zoomOut.bind(graph2) },
-      { key: "fit", icon: "fit", label: "Fit view", fn: graph2.fitView.bind(graph2) },
-      { key: "reset", icon: "reset", label: "Reset view", fn: graph2.resetView.bind(graph2) }
-    ];
-    actions.forEach((action) => {
-      if (shouldRenderControl(config2, action.key)) {
-        root3.appendChild(createButton(action.icon, action.label, action.fn));
+  /**
+   * Handle simulation errors with graceful degradation
+   */
+  static handleSimulationError(error, context, simulation) {
+    const graphError = this.createRecoverableError(
+      `Simulation error: ${error.message}`,
+      "SIMULATION_ERROR",
+      context
+    );
+    this.handle(graphError, context, () => {
+      if (simulation && typeof simulation.stop === "function") {
+        simulation.stop();
       }
     });
   }
-  function createButton(type, label, onClick) {
-    const button = document.createElement("button");
-    button.className = "pg-control-btn";
-    button.type = "button";
-    button.setAttribute("aria-label", label);
-    const wrapper = document.createElement("div");
-    wrapper.className = "pg-icon-wrapper";
-    wrapper.innerHTML = getControlIcon(type);
-    const svg = wrapper.querySelector("svg");
-    if (svg) {
-      svg.classList.add("pg-icon");
-      button.appendChild(svg);
-    }
-    button.addEventListener("click", onClick);
-    return button;
-  }
-  function destroy() {
-    if (!root2) {
-      return;
-    }
-    if (root2.parentNode === overlay) {
-      overlay.removeChild(root2);
-    }
-    root2 = null;
-  }
-  return { mount, destroy };
-}
-
-// src/assets/caret.svg?raw
-var caret_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M9 20L16.5 12L9 4" />\n</svg>';
-
-// src/legends/graph-legend-icon.ts
-var LEGEND_ICON_MAP = { caret: caret_default };
-function getLegendIcon(icon) {
-  const raw = LEGEND_ICON_MAP[icon];
-  if (!raw) {
-    throw new Error(`Legend icon not found: ${icon}`);
-  }
-  return raw.replace("<svg", '<svg class="pg-icon"');
-}
-
-// src/legends/create-graph-legends.ts
-function createGraphLegend(overlay, config) {
-  const legendWrapper = document.createElement("div");
-  legendWrapper.className = "pg-legend";
-  const position = config.position || "bottom-right";
-  legendWrapper.classList.add(`pg-pos-${position}`);
-  if (config.defaultExpanded === false) {
-    legendWrapper.classList.add("pg-is-collapsed");
+  /**
+   * Mark error handler as destroyed to prevent further operations
+   */
+  static destroy() {
+    this.isDestroyed = true;
   }
-  if (config.collapsible) {
-    const toggleBtn = document.createElement("button");
-    toggleBtn.className = "pg-legend-toggle";
-    toggleBtn.type = "button";
-    toggleBtn.innerHTML = getLegendIcon("caret");
-    toggleBtn.onclick = (e) => {
-      e.stopPropagation();
-      legendWrapper.classList.toggle("pg-is-collapsed");
-    };
-    legendWrapper.appendChild(toggleBtn);
+  /**
+   * Reset error handler state
+   */
+  static reset() {
+    this.isDestroyed = false;
   }
-  const body = document.createElement("div");
-  body.className = "pg-legend-body";
-  const list = document.createElement("ul");
-  list.className = "pg-legend-list";
-  config.items.forEach((item) => {
-    const listItem = document.createElement("li");
-    listItem.className = "pg-legend-item";
-    const swatch = document.createElement("span");
-    swatch.className = `pg-legend-swatch is-${item.shape || "circle"}`;
-    swatch.style.backgroundColor = item.color;
-    const label = document.createElement("span");
-    label.className = "pg-legend-label";
-    label.innerText = item.label;
-    listItem.appendChild(swatch);
-    listItem.appendChild(label);
-    list.appendChild(listItem);
-  });
-  body.appendChild(list);
-  legendWrapper.appendChild(body);
-  overlay.appendChild(legendWrapper);
-  return () => {
-    if (legendWrapper.parentNode === overlay) overlay.removeChild(legendWrapper);
-  };
-}
+};
 
 // src/utils/resolve-link-style.ts
 var DEFAULT_LINK_STYLE = {
@@ -3965,7 +4611,7 @@ var DEFAULT_LINK_STYLE = {
     borderWidth: 1.5,
     borderRadius: 4,
     textColor: "color-mix(in srgb, #8E42EE, #000000 40%)",
-    fontSize: 12,
+    fontSize: 10,
     paddingX: 8,
     paddingY: 4,
     height: 24
@@ -4009,7 +4655,78 @@ function mergeLinkStyle(base, override) {
   };
 }
 
+// src/utils/get-link-marker-id.ts
+function getLinkMarkerId(style) {
+  const markerStyle = {
+    stroke: style.stroke ?? "#94a3b8",
+    strokeWidth: style.strokeWidth ?? 2,
+    arrowFill: style.arrow?.fill ?? style.stroke ?? "#94a3b8",
+    arrowSize: style.arrow?.size ?? 6
+  };
+  const serializedStyle = JSON.stringify(markerStyle);
+  const hash = createHash(serializedStyle);
+  return `graph-arrow-${hash}`;
+}
+function createHash(value) {
+  let hash = 0;
+  for (let index2 = 0; index2 < value.length; index2 += 1) {
+    const charCode = value.charCodeAt(index2);
+    hash = (hash << 5) - hash + charCode;
+    hash |= 0;
+  }
+  return Math.abs(hash).toString(36);
+}
+
+// src/core/create-arrow-marker.ts
+function createArrowMarker(params) {
+  const markerId = getLinkMarkerId(params.style);
+  const existingMarker = params.svg.querySelector(`#${markerId}`);
+  if (existingMarker) {
+    return markerId;
+  }
+  const arrowSize = params.style.arrow?.size ?? 6;
+  const fill = params.style.arrow?.fill ?? params.style.stroke ?? "#94a3b8";
+  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+  marker.setAttribute("id", markerId);
+  marker.setAttribute("viewBox", "0 0 20 20");
+  marker.setAttribute("refX", "0");
+  marker.setAttribute("refY", "10");
+  marker.setAttribute("markerWidth", String(arrowSize * 2));
+  marker.setAttribute("markerHeight", String(arrowSize * 2));
+  marker.setAttribute("orient", "auto");
+  marker.setAttribute("markerUnits", "userSpaceOnUse");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", "M 0 0 L 20 10 L 0 20 z");
+  path.setAttribute("fill", fill);
+  marker.appendChild(path);
+  defs.appendChild(marker);
+  params.svg.insertBefore(defs, params.svg.firstChild);
+  return markerId;
+}
+
 // src/renderer/links.ts
+function getShortenedSourcePoint(link, style) {
+  const source = link.source;
+  const target = link.target;
+  const sourceX = source.x ?? 0;
+  const sourceY = source.y ?? 0;
+  const targetX = target.x ?? 0;
+  const targetY = target.y ?? 0;
+  const dx = targetX - sourceX;
+  const dy = targetY - sourceY;
+  const distance = Math.sqrt(dx * dx + dy * dy) || 1;
+  const sourceRadius = source.style?.radius ?? 12;
+  const sourceStrokeWidth = source.style?.strokeWidth ?? 1.5;
+  const linkStrokeCompensation = style.strokeWidth / 2;
+  const nodeStrokeOffset = sourceStrokeWidth / 2;
+  const visualSpacing = 2;
+  const offset = sourceRadius + nodeStrokeOffset + linkStrokeCompensation + visualSpacing;
+  return {
+    x: sourceX + dx / distance * offset,
+    y: sourceY + dy / distance * offset
+  };
+}
 function getShortenedTargetPoint(link, style) {
   const source = link.source;
   const target = link.target;
@@ -4021,10 +4738,12 @@ function getShortenedTargetPoint(link, style) {
   const dy = targetY - sourceY;
   const distance = Math.sqrt(dx * dx + dy * dy) || 1;
   const targetRadius = target.style?.radius ?? 12;
+  const targetStrokeWidth = target.style?.strokeWidth ?? 1.5;
   const arrowLength = style.arrow.enabled ? style.arrow.size * 2 : 0;
-  const strokeCompensation = style.strokeWidth / 2;
+  const linkStrokeCompensation = style.strokeWidth / 2;
+  const nodeStrokeOffset = targetStrokeWidth / 2;
   const visualSpacing = 2;
-  const offset = targetRadius + arrowLength + strokeCompensation + visualSpacing;
+  const offset = targetRadius + nodeStrokeOffset + arrowLength + linkStrokeCompensation + visualSpacing;
   return {
     x: targetX - dx / distance * offset,
     y: targetY - dy / distance * offset
@@ -4047,12 +4766,6 @@ function getLinkKey(link) {
 function renderLinks(ctx, links) {
   const renderableLinks = createRenderableLinks(ctx, links);
   const linkSelection = ctx.root.select('[data-layer="links"]').selectAll("line").data(renderableLinks, (item) => getLinkKey(item.link)).join("line").attr("class", "graph-link").attr("stroke", (item) => item.style.stroke).attr("stroke-width", (item) => item.style.strokeWidth).attr("opacity", (item) => item.style.opacity).attr("marker-end", (item) => item.markerEnd).style("pointer-events", "stroke").style("cursor", "pointer");
-  const labelSelection = ctx.root.selectAll(".link-label");
-  linkSelection.on("mouseenter.label-hover", (_event, d) => {
-    labelSelection.filter((labelItem) => labelItem.link === d.link && labelItem.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 1);
-  }).on("mouseleave.label-hover", (_event, d) => {
-    labelSelection.filter((labelItem) => labelItem.link === d.link && labelItem.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 0);
-  });
   return linkSelection;
 }
 
@@ -4092,7 +4805,7 @@ function renderNodeLabels(ctx, nodes) {
     "middle"
   ).attr(
     "font-size",
-    11
+    9
   ).attr(
     "fill",
     (node) => node.style?.textColor ?? "#ffffff"
@@ -4145,29 +4858,238 @@ function renderLinkLabels(params, links) {
     const visibility = item.style.label.visibility ?? "always";
     return visibility === "always" ? "auto" : "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("height", (item) => item.style.label.height).attr("fill", (item) => item.style.label.backgroundFill).attr("stroke", (item) => item.style.label.borderColor).attr("stroke-width", (item) => item.style.label.borderWidth);
-  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 ?? "");
+  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) {
+    const textElement = this;
+    const parentGroup = textElement.parentNode;
+    const rectElement = parentGroup.querySelector("rect");
+    if (rectElement) {
+      try {
+        const bbox = textElement.getBBox();
+        const paddingX = item.style.label.paddingX;
+        const paddingY = item.style.label.paddingY;
+        rectElement.setAttribute("width", String(bbox.width + paddingX * 2));
+        rectElement.setAttribute("height", String(bbox.height + paddingY * 2));
+        rectElement.setAttribute("x", String(bbox.x - paddingX));
+        rectElement.setAttribute("y", String(bbox.y - paddingY));
+      } catch {
+        const text = item.link.label ?? "";
+        const fontSize = item.style.label.fontSize;
+        const textWidth = text.length * fontSize * 0.6;
+        const rectWidth = textWidth + item.style.label.paddingX * 2;
+        rectElement.setAttribute("width", String(rectWidth));
+        rectElement.setAttribute("height", String(item.style.label.height));
+        rectElement.setAttribute("x", String(-rectWidth / 2));
+        rectElement.setAttribute("y", String(-item.style.label.height / 2));
+      }
+    }
+  });
   return labelSelection;
 }
 
+// src/core/render-pipeline.ts
+var RenderPipeline = class {
+  constructor(manager) {
+    this.manager = manager;
+  }
+  manager;
+  /**
+   * Execute the complete render pipeline
+   */
+  async execute() {
+    this.cleanup();
+    this.manager.initializeManagers();
+    const layers = this.createDOMStructure();
+    this.setupResizeHandling();
+    this.initializeZoom(layers);
+    const selections = this.renderComponents(layers);
+    await this.initializeSimulation(selections);
+    return selections;
+  }
+  /**
+   * Cleanup previous render
+   */
+  cleanup() {
+    ErrorHandler.safeDOMOperation(() => {
+      if (this.manager.svgElement && this.manager.config.container.contains(this.manager.svgElement)) {
+        this.manager.config.container.removeChild(this.manager.svgElement);
+      }
+    }, { operation: "remove existing SVG", component: "render-pipeline" });
+  }
+  /**
+   * Create DOM structure and layers
+   */
+  createDOMStructure() {
+    const layers = createGraphLayers(this.manager.config.container);
+    this.manager.layers = layers;
+    this.manager.svgElement = layers.svg;
+    this.manager.rootGroup = layers.root;
+    const initialWidth = this.manager.config.container.clientWidth;
+    const initialHeight = this.manager.config.container.clientHeight;
+    this.manager.dimensions = { width: initialWidth, height: initialHeight };
+    if (initialWidth > 0 && initialHeight > 0) {
+      layers.svg.setAttribute("width", String(initialWidth));
+      layers.svg.setAttribute("height", String(initialHeight));
+      layers.interactionRect.setAttribute("width", String(initialWidth));
+      layers.interactionRect.setAttribute("height", String(initialHeight));
+    }
+    return layers;
+  }
+  /**
+   * Setup resize handling
+   */
+  setupResizeHandling() {
+    const cleanupResize = observeResize(this.manager.config.container, (width, height) => {
+      this.manager.dimensions = { width, height };
+      if (this.manager.svgElement && this.manager.layers) {
+        this.manager.svgElement.setAttribute("width", String(width));
+        this.manager.svgElement.setAttribute("height", String(height));
+        this.manager.layers.interactionRect.setAttribute("width", String(width));
+        this.manager.layers.interactionRect.setAttribute("height", String(height));
+      }
+      if (this.manager.simulation) {
+        this.manager.simulation.force("center", center_default(width / 2, height / 2));
+        if (this.manager.simulationPaused && width > 0 && height > 0) {
+          this.positionNodesWithValidDimensions(width, height);
+          this.manager.reheatSimulation(0.3);
+          this.manager.simulationPaused = false;
+        } else if (!this.manager.simulationPaused && this.manager.simulation.alpha() < 0.2) {
+          this.manager.reheatSimulation(0.1);
+        }
+      }
+      if (this.manager.timerManager && this.manager.fitViewCallback) {
+        this.manager.timerManager.debounce("fit-view-resize", () => {
+          if (this.manager.fitViewCallback) {
+            this.manager.fitViewCallback();
+          }
+        }, 150);
+      }
+    });
+    this.manager.addCleanup(cleanupResize);
+  }
+  /**
+   * Initialize zoom behavior
+   */
+  initializeZoom(layers) {
+    const zoomResult = createZoom({
+      svg: layers.svg,
+      interactionLayer: layers.interactionLayer,
+      root: layers.root
+    });
+    this.manager.zoomBehavior = zoomResult.behavior;
+    this.manager.addCleanup(zoomResult.cleanup);
+  }
+  /**
+   * Render graph components
+   */
+  renderComponents(layers) {
+    const root2 = select_default2(layers.root);
+    const renderContext = {
+      svg: layers.svg,
+      root: root2,
+      interaction: this.manager.config.interaction
+    };
+    const linkSelection = renderLinks(renderContext, this.manager.config.links);
+    const linkLabelSelection = renderLinkLabels(renderContext, this.manager.config.links);
+    const nodeSelection = renderNodes(renderContext, this.manager.config.nodes);
+    const labelSelection = renderNodeLabels(renderContext, this.manager.config.nodes);
+    return { linkSelection, linkLabelSelection, nodeSelection, labelSelection };
+  }
+  /**
+   * Position nodes when valid dimensions become available
+   */
+  positionNodesWithValidDimensions(width, height) {
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const padding = 50;
+    const maxRadius = Math.min(
+      (width - padding * 2) / 2,
+      (height - padding * 2) / 2
+    );
+    const nodeBasedRadius = Math.max(50, Math.min(200, this.manager.config.nodes.length * 3));
+    const seedRadius = Math.min(maxRadius, nodeBasedRadius);
+    this.manager.config.nodes.forEach((node, index2) => {
+      if (node.x == null || node.y == null) {
+        const angle = index2 / Math.max(this.manager.config.nodes.length, 1) * Math.PI * 2 + (Math.random() - 0.5) * 0.5;
+        const radius = seedRadius * (0.3 + Math.random() * 0.7);
+        const x3 = centerX + Math.cos(angle) * radius;
+        const y3 = centerY + Math.sin(angle) * radius;
+        const nodeRadius = 12;
+        node.x = Math.max(nodeRadius, Math.min(width - nodeRadius, x3));
+        node.y = Math.max(nodeRadius, Math.min(height - nodeRadius, y3));
+      }
+    });
+  }
+  /**
+   * Initialize and configure simulation
+   */
+  async initializeSimulation(_selections) {
+    const simulationConfig = {
+      nodes: this.manager.config.nodes,
+      links: this.manager.config.links,
+      width: this.manager.dimensions.width || this.manager.config.container.clientWidth,
+      height: this.manager.dimensions.height || this.manager.config.container.clientHeight,
+      config: this.manager.config.simulation
+    };
+    try {
+      const simulationResult = createGraphSimulation(simulationConfig);
+      this.manager.simulation = simulationResult.simulation;
+      const centerX = simulationConfig.width / 2;
+      const centerY = simulationConfig.height / 2;
+      this.manager.simulation.force("center", center_default(centerX, centerY));
+      if (simulationConfig.width > 0 && simulationConfig.height > 0) {
+        this.manager.reheatSimulation(0.3);
+        this.manager.simulationPaused = false;
+        this.manager.needsImmediateFitView = true;
+      } else {
+        this.manager.simulation.stop();
+        this.manager.simulationPaused = true;
+      }
+    } catch (error) {
+      console.error("[RenderPipeline] Simulation creation failed:", error);
+      ErrorHandler.handleSimulationError(
+        error,
+        { operation: "create simulation", component: "render-pipeline", data: simulationConfig },
+        this.manager.simulation ?? void 0
+      );
+    }
+  }
+};
+
 // src/interactions/create-drag-behavior.ts
-function createDragBehavior(simulation) {
-  return drag_default().on("start", (event, d) => {
-    if (!event.active) {
-      simulation.alphaTarget(0.8).restart();
-    }
-    d.fx = d.x;
-    d.fy = d.y;
-  }).on("drag", (event, d) => {
-    d.fx = event.x;
-    d.fy = event.y;
-    simulation.alpha(0.4).restart();
-  }).on("end", (event, d) => {
-    if (!event.active) {
-      simulation.alphaTarget(0);
-    }
-    d.fx = null;
-    d.fy = null;
+var DRAG_ALPHA_TARGET = 0.3;
+function createDragBehavior(simulation, onDragStart, canvasBounds) {
+  let hasActuallyDragged = false;
+  return drag_default().on(
+    "start",
+    (event, node) => {
+      hasActuallyDragged = false;
+      node.fx = node.x;
+      node.fy = node.y;
+    }
+  ).on("drag", (event, node) => {
+    if (!hasActuallyDragged) {
+      hasActuallyDragged = true;
+      if (!event.active) {
+        simulation.alphaTarget(DRAG_ALPHA_TARGET).restart();
+      }
+      onDragStart?.();
+    }
+    node.fx = event.x;
+    node.fy = event.y;
+  }).on("end", (event, node) => {
+    if (hasActuallyDragged && !event.active) {
+      const isOutside = canvasBounds && (event.x < 0 || event.x > canvasBounds.width || event.y < 0 || event.y > canvasBounds.height);
+      if (isOutside) {
+        simulation.alphaTarget(0.1);
+      } else {
+        simulation.alphaTarget(0);
+      }
+    }
+    node.fx = null;
+    node.fy = null;
+    hasActuallyDragged = false;
   });
 }
 
@@ -4191,22 +5113,257 @@ function createNodeHover(nodeSelection, hoverStyle) {
   const svgElement = firstNode.ownerSVGElement;
   if (!svgElement) return;
   const root2 = select_default2(svgElement);
-  const labelSelection = root2.selectAll(".link-label");
-  nodeSelection.on("mouseenter.labels", (_event, d) => {
-    labelSelection.filter((item) => {
-      if (item.style.label.visibility !== "hover") return false;
-      const s = item.link.source;
-      const t = item.link.target;
-      return s.id === d.id || t.id === d.id;
-    }).interrupt().transition().duration(200).style("opacity", 1).style("pointer-events", "auto");
-  }).on("mouseleave.labels", (_event) => {
-    labelSelection.filter(function(item) {
-      return item.style.label.visibility === "hover" && !this.classList.contains("label-selection-pinned");
-    }).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
-  });
-}
-
-// src/utils/resolve-tooltip-position.ts
+  function clearAllHoverLayers() {
+    const hoverNodesLayer = root2.select('[data-layer="hover-nodes"]').node();
+    const nodesLayer = root2.select('[data-layer="nodes"]').node();
+    if (hoverNodesLayer && nodesLayer) {
+      while (hoverNodesLayer.firstChild) {
+        nodesLayer.appendChild(hoverNodesLayer.firstChild);
+      }
+    }
+    const hoverNodeLabelsLayer = root2.select('[data-layer="hover-node-labels"]').node();
+    const nodeLabelsLayer = root2.select('[data-layer="node-labels"]').node();
+    if (hoverNodeLabelsLayer && nodeLabelsLayer) {
+      while (hoverNodeLabelsLayer.firstChild) {
+        nodeLabelsLayer.appendChild(hoverNodeLabelsLayer.firstChild);
+      }
+    }
+    const hoverLinksLayer = root2.select('[data-layer="hover-links"]').node();
+    const linksLayer = root2.select('[data-layer="links"]').node();
+    if (hoverLinksLayer && linksLayer) {
+      while (hoverLinksLayer.firstChild) {
+        const linkElement = hoverLinksLayer.firstChild;
+        linksLayer.appendChild(linkElement);
+        const event = new MouseEvent("mouseleave", {
+          bubbles: true,
+          cancelable: false,
+          view: window
+        });
+        linkElement.dispatchEvent(event);
+      }
+    }
+    const hoverLinkLabelsLayer = root2.select('[data-layer="hover-link-labels"]').node();
+    const linkLabelsLayer = root2.select('[data-layer="link-labels"]').node();
+    if (hoverLinkLabelsLayer && linkLabelsLayer) {
+      while (hoverLinkLabelsLayer.firstChild) {
+        const labelElement = hoverLinkLabelsLayer.firstChild;
+        const labelData = labelElement.__data__;
+        if (labelData && labelData.style.label.visibility === "hover" && !labelElement.classList.contains("label-selection-pinned")) {
+          labelElement.style.opacity = "0";
+          labelElement.style.pointerEvents = "none";
+        }
+        linkLabelsLayer.appendChild(labelElement);
+      }
+    }
+  }
+  nodeSelection.on("mouseenter.links", function(_event, hoveredNode) {
+    const hoveredNodeElement = this;
+    if (hoveredNodeElement.dataset.selected === "true") {
+      return;
+    }
+    clearAllHoverLayers();
+    const hoverNodesLayer = root2.select('[data-layer="hover-nodes"]').node();
+    if (hoverNodesLayer) {
+      hoverNodesLayer.appendChild(hoveredNodeElement);
+    }
+    root2.selectAll("text").filter((d) => d.id === hoveredNode.id).each(function() {
+      const labelElement = this;
+      const hoverNodeLabelsLayer = root2.select('[data-layer="hover-node-labels"]').node();
+      if (hoverNodeLabelsLayer) {
+        hoverNodeLabelsLayer.appendChild(labelElement);
+      }
+    });
+    const connectedLinks = root2.selectAll("line:not(.link-hit-area)").filter((renderableLink) => {
+      const source = renderableLink.link.source;
+      const target = renderableLink.link.target;
+      return source.id === hoveredNode.id || target.id === hoveredNode.id;
+    });
+    connectedLinks.each(function(_renderableLink) {
+      const linkElement = this;
+      const hoverLinksLayer = root2.select('[data-layer="hover-links"]').node();
+      if (hoverLinksLayer) {
+        hoverLinksLayer.appendChild(linkElement);
+      }
+      const event = new MouseEvent("mouseenter", {
+        bubbles: true,
+        cancelable: false,
+        view: window
+      });
+      linkElement.dispatchEvent(event);
+    });
+    root2.selectAll(".link-label").filter((item) => {
+      const source = item.link.source;
+      const target = item.link.target;
+      return source.id === hoveredNode.id || target.id === hoveredNode.id;
+    }).each(function(item) {
+      const labelElement = this;
+      const hoverLinkLabelsLayer = root2.select('[data-layer="hover-link-labels"]').node();
+      if (hoverLinkLabelsLayer) {
+        hoverLinkLabelsLayer.appendChild(labelElement);
+        if (item.style.label.visibility === "hover") {
+          labelElement.style.opacity = "1";
+          labelElement.style.pointerEvents = "auto";
+        }
+      }
+    });
+  }).on("mouseleave.links", function(_event, _hoveredNode) {
+    clearAllHoverLayers();
+  });
+}
+
+// src/interactions/create-link-hover.ts
+function createLinkHover(linkSelection, hoverStyle) {
+  const firstLink = linkSelection.node();
+  if (!firstLink) return;
+  const svgElement = firstLink.ownerSVGElement;
+  if (!svgElement) return;
+  const root2 = select_default2(svgElement);
+  const originalMarkers = /* @__PURE__ */ new Map();
+  function clearAllHoverStates() {
+    root2.selectAll("line[data-hovered]").each(function(_d) {
+      const linkElement = this;
+      delete linkElement.dataset.hovered;
+      const isSelected = linkElement.dataset.selected === "true";
+      if (!isSelected) {
+        linkElement.style.stroke = "";
+        linkElement.style.strokeWidth = "";
+        linkElement.style.opacity = "";
+        const originalMarker = originalMarkers.get(linkElement);
+        if (originalMarker !== void 0) {
+          if (originalMarker) {
+            linkElement.setAttribute("marker-end", originalMarker);
+          } else {
+            linkElement.removeAttribute("marker-end");
+          }
+        }
+      }
+    });
+    root2.select('[data-layer="link-labels"]').selectAll(".link-label").filter(function(item) {
+      return item.style.label.visibility === "hover" && !this.classList.contains("label-selection-pinned");
+    }).style("opacity", 0).style("pointer-events", "none");
+  }
+  linkSelection.on("mouseenter.hover", function(_event, renderableLink) {
+    const hoveredElement = this;
+    clearAllHoverStates();
+    let targetLinkElement;
+    if (hoveredElement.classList.contains("link-hit-area")) {
+      const visibleLinkNode = root2.select('[data-layer="links"]').selectAll("line:not(.link-hit-area)").filter((d) => d.link === renderableLink.link).node();
+      if (!visibleLinkNode) return;
+      targetLinkElement = visibleLinkNode;
+    } else {
+      targetLinkElement = hoveredElement;
+    }
+    if (!originalMarkers.has(targetLinkElement)) {
+      originalMarkers.set(targetLinkElement, targetLinkElement.getAttribute("marker-end"));
+    }
+    if (hoverStyle) {
+      if (hoverStyle.stroke !== void 0) {
+        targetLinkElement.style.stroke = hoverStyle.stroke;
+        if (renderableLink.style.arrow.enabled) {
+          const hoverMarkerStyle = {
+            stroke: hoverStyle.stroke,
+            arrow: { fill: hoverStyle.stroke, size: renderableLink.style.arrow.size }
+          };
+          const hoverMarkerId = createArrowMarker({ svg: svgElement, style: hoverMarkerStyle });
+          targetLinkElement.setAttribute("marker-end", `url(#${hoverMarkerId})`);
+        }
+      }
+      if (hoverStyle.strokeWidth !== void 0) {
+        targetLinkElement.style.strokeWidth = String(hoverStyle.strokeWidth);
+      }
+      if (hoverStyle.opacity !== void 0) {
+        targetLinkElement.style.opacity = String(hoverStyle.opacity);
+      }
+    }
+    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");
+  }).on("mouseleave.hover", function(_event, renderableLink) {
+    const hoveredElement = this;
+    let targetLinkElement;
+    if (hoveredElement.classList.contains("link-hit-area")) {
+      const visibleLinkNode = root2.select('[data-layer="links"]').selectAll("line:not(.link-hit-area)").filter((d) => d.link === renderableLink.link).node();
+      if (!visibleLinkNode) return;
+      targetLinkElement = visibleLinkNode;
+    } else {
+      targetLinkElement = hoveredElement;
+    }
+    const isSelected = targetLinkElement.dataset.selected === "true";
+    if (!isSelected) {
+      targetLinkElement.style.stroke = "";
+      targetLinkElement.style.strokeWidth = "";
+      targetLinkElement.style.opacity = "";
+      const originalMarker = originalMarkers.get(targetLinkElement);
+      if (originalMarker !== void 0) {
+        if (originalMarker) {
+          targetLinkElement.setAttribute("marker-end", originalMarker);
+        } else {
+          targetLinkElement.removeAttribute("marker-end");
+        }
+      }
+    }
+    const labelSelection2 = root2.select('[data-layer="link-labels"]').selectAll(".link-label");
+    labelSelection2.filter(function(item) {
+      return item.style.label.visibility === "hover" && !this.classList.contains("label-selection-pinned");
+    }).style("opacity", 0).style("pointer-events", "none");
+  });
+  const labelSelection = root2.select('[data-layer="link-labels"]').selectAll(".link-label");
+  labelSelection.on("mouseenter.link-hover", function(_event, renderableLinkLabel) {
+    const correspondingHitArea = root2.select('[data-layer="links"]').selectAll("line.link-hit-area").filter((d) => d.link === renderableLinkLabel.link);
+    const correspondingLink = root2.select('[data-layer="links"]').selectAll("line:not(.link-hit-area)").filter((d) => d.link === renderableLinkLabel.link);
+    if (correspondingLink.node() && correspondingHitArea.node()) {
+      const linkElement = correspondingLink.node();
+      const renderableLink = correspondingLink.datum();
+      if (!originalMarkers.has(linkElement)) {
+        originalMarkers.set(linkElement, linkElement.getAttribute("marker-end"));
+      }
+      if (hoverStyle) {
+        if (hoverStyle.stroke !== void 0) {
+          linkElement.style.stroke = hoverStyle.stroke;
+          if (renderableLink.style.arrow.enabled) {
+            const hoverMarkerStyle = {
+              stroke: hoverStyle.stroke,
+              arrow: { fill: hoverStyle.stroke, size: renderableLink.style.arrow.size }
+            };
+            const hoverMarkerId = createArrowMarker({ svg: svgElement, style: hoverMarkerStyle });
+            linkElement.setAttribute("marker-end", `url(#${hoverMarkerId})`);
+          }
+        }
+        if (hoverStyle.strokeWidth !== void 0) {
+          linkElement.style.strokeWidth = String(hoverStyle.strokeWidth);
+        }
+        if (hoverStyle.opacity !== void 0) {
+          linkElement.style.opacity = String(hoverStyle.opacity);
+        }
+      }
+    }
+  }).on("mouseleave.link-hover", function(_event, renderableLinkLabel) {
+    const correspondingHitArea = root2.select('[data-layer="links"]').selectAll("line.link-hit-area").filter((d) => d.link === renderableLinkLabel.link);
+    const correspondingLink = root2.select('[data-layer="links"]').selectAll("line:not(.link-hit-area)").filter((d) => d.link === renderableLinkLabel.link);
+    if (correspondingLink.node() && correspondingHitArea.node()) {
+      const linkElement = correspondingLink.node();
+      const isSelected = linkElement.dataset.selected === "true";
+      if (!isSelected) {
+        linkElement.style.stroke = "";
+        linkElement.style.strokeWidth = "";
+        linkElement.style.opacity = "";
+        const originalMarker = originalMarkers.get(linkElement);
+        if (originalMarker !== void 0) {
+          if (originalMarker) {
+            linkElement.setAttribute("marker-end", originalMarker);
+          } else {
+            linkElement.removeAttribute("marker-end");
+          }
+        }
+      }
+      const labelSelection2 = root2.select('[data-layer="link-labels"]').selectAll(".link-label");
+      labelSelection2.filter(function(item) {
+        return item.style.label.visibility === "hover" && !this.classList.contains("label-selection-pinned");
+      }).style("opacity", 0).style("pointer-events", "none");
+    }
+  });
+}
+
+// src/utils/resolve-tooltip-position.ts
 function resolveTooltipPosition(params) {
   const preferredPlacement = params.placement ?? "auto";
   const resolvedPlacement = preferredPlacement === "auto" ? resolveAutoPlacement(params) : preferredPlacement;
@@ -4400,25 +5557,9 @@ function getDefaultContent(node) {
   `;
 }
 
-// src/utils/observe-resize.ts
-function observeResize(element, onResize) {
-  const observer = new ResizeObserver(
-    (entries) => {
-      const entry = entries[0];
-      if (!entry) {
-        return;
-      }
-      const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
-      const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
-      if (width > 0 && height > 0) {
-        onResize(width, height);
-      }
-    }
-  );
-  observer.observe(element);
-  return () => {
-    observer.disconnect();
-  };
+// 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);
 }
 
 // src/utils/get-link-target-point.ts
@@ -4445,381 +5586,1527 @@ function getLinkTargetPoint(link) {
   };
 }
 
-// src/utils/export-graph.ts
-import html2canvas from "html2canvas";
-async function captureAndDownloadGraph(container, options = {}) {
-  const {
-    fileName = `graph-export-${Date.now()}.png`,
-    backgroundColor = "#ffffff",
-    pixelRatio = 2
-  } = options;
-  const root2 = container.querySelector(".pg-root");
-  if (!root2) return;
-  const controls = root2.querySelector(".pg-controls");
-  const legendToggle = root2.querySelector(".pg-legend-toggle");
-  const interactionLayer = root2.querySelector(".pg-interaction-layer");
-  const legend = root2.querySelector(".pg-legend");
-  const wasCollapsed = legend?.classList.contains("pg-is-collapsed");
-  if (controls) controls.style.display = "none";
-  if (legendToggle) legendToggle.style.display = "none";
-  if (interactionLayer) interactionLayer.style.display = "none";
-  if (legend && wasCollapsed) {
-    legend.classList.remove("pg-is-collapsed");
+// src/utils/performance-tick-manager.ts
+var PerformanceTickManager = class {
+  config;
+  state;
+  animationFrameId = null;
+  isDestroyed = false;
+  constructor(config = {}) {
+    this.config = {
+      frameRate: config.frameRate ?? 30,
+      positionThreshold: config.positionThreshold ?? 0.5,
+      batchSize: config.batchSize ?? 50,
+      enableThrottling: config.enableThrottling ?? true
+    };
+    this.state = {
+      lastUpdateTime: 0,
+      frameInterval: 1e3 / this.config.frameRate,
+      labelDimensionsCache: /* @__PURE__ */ new Map(),
+      lastPositions: /* @__PURE__ */ new Map(),
+      pendingUpdates: /* @__PURE__ */ new Set()
+    };
   }
-  try {
-    const canvas = await html2canvas(root2, {
-      scale: pixelRatio,
-      backgroundColor,
-      useCORS: true,
-      logging: false
+  /**
+   * Optimized tick handler with throttling and batching
+   */
+  createTickHandler(selections) {
+    return () => {
+      if (this.isDestroyed) return;
+      const now2 = performance.now();
+      if (this.config.enableThrottling && now2 - this.state.lastUpdateTime < this.state.frameInterval) {
+        return;
+      }
+      this.state.lastUpdateTime = now2;
+      this.updateLinkPositions(selections.linkSelection);
+      this.updateNodePositions(selections.nodeSelection, selections.labelSelection);
+      this.scheduleFrameUpdate(() => {
+        this.updateLinkLabels(selections.linkLabelSelection);
+        selections.tooltipBinding?.reposition();
+      });
+    };
+  }
+  /**
+   * Fast link position updates - now with proper source and target offsets
+   */
+  updateLinkPositions(linkSelection) {
+    linkSelection.attr("x1", (item) => getShortenedSourcePoint(item.link, item.style).x).attr("y1", (item) => getShortenedSourcePoint(item.link, item.style).y).attr("x2", (item) => getShortenedTargetPoint(item.link, item.style).x).attr("y2", (item) => getShortenedTargetPoint(item.link, item.style).y);
+  }
+  /**
+   * Fast node position updates
+   */
+  updateNodePositions(nodeSelection, labelSelection) {
+    nodeSelection.attr("cx", (d) => d.x ?? 0).attr("cy", (d) => d.y ?? 0);
+    labelSelection.attr("x", (d) => d.x ?? 0).attr("y", (d) => d.y ?? 0);
+  }
+  /**
+   * Optimized link label updates with caching and conditional updates
+   */
+  updateLinkLabels(linkLabelSelection) {
+    let updateCount = 0;
+    linkLabelSelection.attr("transform", (item) => {
+      const link = item.link;
+      const source = link.source;
+      const targetPoint = getLinkTargetPoint(link);
+      const x3 = ((source.x ?? 0) + targetPoint.x) / 2;
+      const y3 = ((source.y ?? 0) + targetPoint.y) / 2;
+      const linkId = this.getLinkId(link);
+      const lastPos = this.state.lastPositions.get(linkId);
+      if (lastPos && Math.abs(lastPos.x - x3) < this.config.positionThreshold && Math.abs(lastPos.y - y3) < this.config.positionThreshold) {
+        return `translate(${lastPos.x}, ${lastPos.y})`;
+      }
+      this.state.lastPositions.set(linkId, { x: x3, y: y3 });
+      this.state.pendingUpdates.add(linkId);
+      return `translate(${x3}, ${y3})`;
+    }).each((item, i, nodes) => {
+      if (updateCount >= this.config.batchSize) {
+        return;
+      }
+      const group = nodes[i];
+      const linkId = this.getLinkId(item.link);
+      if (!this.state.pendingUpdates.has(linkId)) {
+        return;
+      }
+      this.updateLabelDimensions(group, item, linkId);
+      this.state.pendingUpdates.delete(linkId);
+      updateCount++;
     });
-    const dataUrl = canvas.toDataURL("image/png");
-    const link = document.createElement("a");
-    link.download = fileName;
-    link.href = dataUrl;
-    link.click();
-  } finally {
-    if (controls) controls.style.display = "flex";
-    if (legendToggle) legendToggle.style.display = "flex";
-    if (interactionLayer) interactionLayer.style.display = "block";
-    if (legend && wasCollapsed) {
-      legend.classList.add("pg-is-collapsed");
+  }
+  /**
+   * Update label dimensions with caching
+   */
+  updateLabelDimensions(group, item, linkId) {
+    const text = group.querySelector("text");
+    const rect = group.querySelector("rect");
+    if (!text || !rect) return;
+    const textContent = text.textContent || "";
+    const cached = this.state.labelDimensionsCache.get(linkId);
+    if (cached && cached.textContent === textContent) {
+      rect.setAttribute("x", String(cached.x));
+      rect.setAttribute("y", String(cached.y));
+      rect.setAttribute("width", String(cached.width));
+      rect.setAttribute("height", String(cached.height));
+      return;
     }
+    const bBox = text.getBBox();
+    const padding = 6;
+    const dimensions = {
+      width: bBox.width + padding * 2,
+      height: bBox.height + padding * 2,
+      x: bBox.x - padding,
+      y: bBox.y - padding,
+      textContent
+    };
+    this.state.labelDimensionsCache.set(linkId, dimensions);
+    rect.setAttribute("x", String(dimensions.x));
+    rect.setAttribute("y", String(dimensions.y));
+    rect.setAttribute("width", String(dimensions.width));
+    rect.setAttribute("height", String(dimensions.height));
+  }
+  /**
+   * Schedule updates using requestAnimationFrame for better performance
+   */
+  scheduleFrameUpdate(callback) {
+    if (this.animationFrameId !== null) {
+      return;
+    }
+    this.animationFrameId = requestAnimationFrame(() => {
+      this.animationFrameId = null;
+      callback();
+    });
   }
-}
+  /**
+   * Generate unique ID for link caching
+   */
+  getLinkId(link) {
+    const sourceId = typeof link.source === "string" ? link.source : link.source.id;
+    const targetId = typeof link.target === "string" ? link.target : link.target.id;
+    return `${sourceId}::${targetId}::${link.label ?? ""}`;
+  }
+  /**
+   * Clear caches when graph data changes
+   */
+  clearCaches() {
+    this.state.labelDimensionsCache.clear();
+    this.state.lastPositions.clear();
+    this.state.pendingUpdates.clear();
+  }
+  /**
+   * Update configuration at runtime
+   */
+  updateConfig(newConfig) {
+    Object.assign(this.config, newConfig);
+    this.state.frameInterval = 1e3 / this.config.frameRate;
+  }
+  /**
+   * Get performance metrics
+   */
+  getMetrics() {
+    return {
+      cacheSize: this.state.labelDimensionsCache.size,
+      pendingUpdates: this.state.pendingUpdates.size,
+      lastFrameTime: this.state.lastUpdateTime,
+      frameInterval: this.state.frameInterval
+    };
+  }
+  /**
+   * Clean up resources
+   */
+  destroy() {
+    this.isDestroyed = true;
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    this.clearCaches();
+  }
+};
 
-// src/create-graph.ts
-function createGraph(config) {
-  let cleanupResize = null;
-  let cleanupZoom = null;
-  let tooltipBinding = null;
-  let controls = null;
-  let legendCleanup = null;
-  let fitViewTimer = null;
-  let dimensions = { width: 0, height: 0 };
-  let rootGroup = null;
-  let svgElement = null;
-  let zoomBehavior = null;
-  let simulation = null;
-  const nodeSelectHandlers = /* @__PURE__ */ new Set();
-  const linkSelectHandlers = /* @__PURE__ */ new Set();
-  function on(event, handler) {
-    if (event === "nodeSelect") {
-      nodeSelectHandlers.add(handler);
-      return () => {
-        nodeSelectHandlers.delete(handler);
-      };
+// src/utils/selection-manager.ts
+var SelectionManager = class {
+  state = {
+    selectedNode: null,
+    selectedLink: null
+  };
+  eventEmitter;
+  config;
+  layers;
+  linkMarkerSnapshots;
+  root;
+  constructor(eventEmitter, config, layers, linkMarkerSnapshots, root2) {
+    this.eventEmitter = eventEmitter;
+    this.config = config;
+    this.layers = layers;
+    this.linkMarkerSnapshots = linkMarkerSnapshots;
+    this.root = root2;
+  }
+  /**
+   * Select a node, automatically deselecting any current selection
+   */
+  selectNode(nodeElement, nodeData) {
+    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));
+    }
+    this.root.selectAll(".link-label").filter((item) => {
+      if (item.style.label.visibility !== "hover") return false;
+      const source = item.link.source;
+      const target = item.link.target;
+      return source.id === nodeData.id || target.id === nodeData.id;
+    }).classed("label-selection-pinned", true).interrupt().transition().duration(200).style("opacity", 1).style("pointer-events", "auto");
+    this.state.selectedNode = { element: nodeElement, data: nodeData };
+    this.eventEmitter.emit("nodeSelect", { node: nodeData, element: nodeElement });
+  }
+  /**
+   * Select a link, automatically deselecting any current selection
+   */
+  selectLink(linkElement, renderableLink, event) {
+    if (event) {
+      event.stopPropagation();
+    }
+    this.clearSelection();
+    this.bringLinkToFront(linkElement, renderableLink);
+    linkElement.dataset.selected = "true";
+    if (this.config.linkStyle) {
+      const style = this.config.linkStyle;
+      if (style.stroke !== void 0) linkElement.style.stroke = style.stroke;
+      if (style.strokeWidth !== void 0) linkElement.style.strokeWidth = String(style.strokeWidth);
+      if (style.opacity !== void 0) linkElement.style.opacity = String(style.opacity);
+      if (style.stroke !== void 0 && renderableLink.style.arrow.enabled) {
+        const selectionMarkerStyle = {
+          stroke: style.stroke,
+          arrow: { fill: style.stroke, size: renderableLink.style.arrow.size }
+        };
+        const selectionMarkerId = createArrowMarker({ svg: this.layers.svg, style: selectionMarkerStyle });
+        linkElement.setAttribute("marker-end", `url(#${selectionMarkerId})`);
+      }
     }
-    linkSelectHandlers.add(handler);
-    return () => {
-      linkSelectHandlers.delete(handler);
+    this.root.selectAll(".link-label").filter((item) => item.link === renderableLink.link).classed("label-selection-pinned", true).interrupt().transition().duration(200).style("opacity", 1).style("pointer-events", "auto");
+    const originalMarker = this.linkMarkerSnapshots.get(linkElement) || null;
+    this.state.selectedLink = {
+      element: linkElement,
+      data: renderableLink.link,
+      originalMarker
     };
-  }
-  function off(event, handler) {
-    if (event === "nodeSelect") {
-      nodeSelectHandlers.delete(handler);
+    this.eventEmitter.emit("linkSelect", { link: renderableLink.link, element: linkElement });
+  }
+  /**
+   * Deselect the currently selected node
+   */
+  deselectNode() {
+    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;
+    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 });
+  }
+  /**
+   * Deselect the currently selected link
+   */
+  deselectLink() {
+    if (!this.state.selectedLink) return;
+    const { element, data, originalMarker } = this.state.selectedLink;
+    this.layers.links.appendChild(element);
+    this.root.selectAll(".link-label").filter((item) => item.link === data).each((d, i, nodes) => {
+      const element2 = nodes[i];
+      if (element2) {
+        this.layers.linkLabels.appendChild(element2);
+      }
+    });
+    delete element.dataset.selected;
+    element.style.stroke = "";
+    element.style.strokeWidth = "";
+    element.style.opacity = "";
+    if (originalMarker) {
+      element.setAttribute("marker-end", originalMarker);
     } else {
-      linkSelectHandlers.delete(handler);
-    }
+      element.removeAttribute("marker-end");
+    }
+    this.root.selectAll(".link-label.label-selection-pinned").filter((item) => {
+      return item.link === data && item.style.label.visibility === "hover";
+    }).classed("label-selection-pinned", false).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
+    this.state.selectedLink = null;
+    this.eventEmitter.emit("linkDeselect", { link: data, element });
+  }
+  /**
+   * Clear all selections
+   */
+  clearSelection() {
+    this.deselectNode();
+    this.deselectLink();
+  }
+  /**
+   * Get current selection state
+   */
+  getSelectionState() {
+    return { ...this.state };
+  }
+  /**
+   * Check if a specific node is selected
+   */
+  isNodeSelected(nodeData) {
+    return this.state.selectedNode?.data.id === nodeData.id;
+  }
+  /**
+   * Check if a specific link is selected
+   */
+  isLinkSelected(linkData) {
+    if (!this.state.selectedLink) return false;
+    const selectedLink = this.state.selectedLink.data;
+    const sourceId = typeof selectedLink.source === "string" ? selectedLink.source : selectedLink.source.id;
+    const targetId = typeof selectedLink.target === "string" ? selectedLink.target : selectedLink.target.id;
+    const checkSourceId = typeof linkData.source === "string" ? linkData.source : linkData.source.id;
+    const checkTargetId = typeof linkData.target === "string" ? linkData.target : linkData.target.id;
+    return sourceId === checkSourceId && targetId === checkTargetId;
+  }
+  /**
+   * Handle click on background (deselect all)
+   */
+  handleBackgroundClick(event, svg, interactionRect) {
+    if (event.target !== svg && event.target !== interactionRect) return;
+    this.clearSelection();
+  }
+  /**
+   * Bring node and related elements to front using selection layer sub-layers
+   */
+  bringNodeToFront(nodeElement, nodeData) {
+    this.layers.selectionLayer.nodes.appendChild(nodeElement);
+    nodeElement.dataset.selected = "true";
+    const connectedLinks = this.root.selectAll("line:not(.link-hit-area)").filter((d) => {
+      const source = d.link.source;
+      const target = d.link.target;
+      return source.id === nodeData.id || target.id === nodeData.id;
+    });
+    connectedLinks.each((d, i, nodes) => {
+      const element = nodes[i];
+      if (element) {
+        this.layers.selectionLayer.links.appendChild(element);
+      }
+    });
+    this.root.selectAll("text").filter((d) => d.id === nodeData.id).each((d, i, nodes) => {
+      const element = nodes[i];
+      if (element) {
+        this.layers.selectionLayer.nodeLabels.appendChild(element);
+      }
+    });
+    this.root.selectAll(".link-label").filter((item) => {
+      const source = item.link.source;
+      const target = item.link.target;
+      return source.id === nodeData.id || target.id === nodeData.id;
+    }).each((d, i, nodes) => {
+      const element = nodes[i];
+      if (element) {
+        this.layers.selectionLayer.linkLabels.appendChild(element);
+      }
+    });
   }
-  function render() {
-    destroy();
-    const layers = createGraphLayers(config.container);
-    svgElement = layers.svg;
-    rootGroup = layers.root;
-    cleanupResize = observeResize(config.container, (width, height) => {
-      dimensions = { width, height };
-      layers.svg.setAttribute("width", String(width));
-      layers.svg.setAttribute("height", String(height));
-      layers.interactionRect.setAttribute("width", String(width));
-      layers.interactionRect.setAttribute("height", String(height));
-      if (simulation) {
-        simulation.force("center", center_default(width / 2, height / 2));
-        simulation.alpha(0.3).restart();
-      }
-      if (fitViewTimer) {
-        clearTimeout(fitViewTimer);
-      }
-      fitViewTimer = setTimeout(() => {
-        fitView();
-        fitViewTimer = null;
-      }, 150);
+  /**
+   * Bring link and its label to front using selection layer
+   */
+  bringLinkToFront(linkElement, renderableLink) {
+    this.layers.selectionLayer.links.appendChild(linkElement);
+    this.root.selectAll(".link-label").filter((item) => item.link === renderableLink.link).each((d, i, nodes) => {
+      const element = nodes[i];
+      if (element) {
+        this.layers.selectionLayer.linkLabels.appendChild(element);
+      }
     });
-    const zoomResult = createZoom({
-      svg: layers.svg,
-      interactionLayer: layers.interactionLayer,
-      root: layers.root
+  }
+  /**
+   * Restore elements back to their original layers
+   */
+  restoreSelectedElements(nodeData) {
+    this.root.selectAll("circle").filter((d) => d.id === nodeData.id).each((d, i, nodes) => {
+      const element = nodes[i];
+      if (element) {
+        this.layers.nodes.appendChild(element);
+      }
     });
-    zoomBehavior = zoomResult.behavior;
-    cleanupZoom = zoomResult.cleanup;
-    const root2 = select_default2(layers.root);
-    const renderContext = { svg: layers.svg, root: root2, interaction: config.interaction };
-    const linkSelection = renderLinks(renderContext, config.links);
-    const linkLabelSelection = renderLinkLabels(renderContext, config.links);
-    const nodeSelection = renderNodes(renderContext, config.nodes);
-    const labelSelection = renderNodeLabels(renderContext, config.nodes);
-    const simulationConfig = {
-      nodes: config.nodes,
-      links: config.links,
-      // Uses the observed dimensions to ensure physics are calculated on actual container size
-      width: dimensions.width || config.container.clientWidth,
-      height: dimensions.height || config.container.clientHeight
-    };
-    const simulationResult = createGraphSimulation(simulationConfig);
-    simulation = simulationResult.simulation;
-    simulation.on("tick", () => {
-      linkSelection.attr("x1", (item) => item.link.source.x ?? 0).attr("y1", (item) => item.link.source.y ?? 0).attr("x2", (item) => getShortenedTargetPoint(item.link, item.style).x).attr("y2", (item) => getShortenedTargetPoint(item.link, item.style).y);
-      linkLabelSelection.attr("transform", (item) => {
-        const link = item.link;
-        const source = link.source;
-        const targetPoint = getLinkTargetPoint(link);
-        const x3 = ((source.x ?? 0) + targetPoint.x) / 2;
-        const y3 = ((source.y ?? 0) + targetPoint.y) / 2;
-        return `translate(${x3}, ${y3})`;
-      }).each(function() {
-        const group = this;
-        const text = group.querySelector("text");
-        const rect = group.querySelector("rect");
-        if (!text || !rect) return;
-        const bBox = text.getBBox();
-        const padding = 6;
-        rect.setAttribute("x", String(bBox.x - padding));
-        rect.setAttribute("y", String(bBox.y - padding));
-        rect.setAttribute("width", String(bBox.width + padding * 2));
-        rect.setAttribute("height", String(bBox.height + padding * 2));
-      });
-      nodeSelection.attr("cx", (d) => d.x ?? 0).attr("cy", (d) => d.y ?? 0);
-      labelSelection.attr("x", (d) => d.x ?? 0).attr("y", (d) => d.y ?? 0);
-      tooltipBinding?.reposition();
+    this.root.selectAll("line").filter((d) => {
+      const source = d.link.source;
+      const target = d.link.target;
+      return source.id === nodeData.id || target.id === nodeData.id;
+    }).each((d, i, nodes) => {
+      const element = nodes[i];
+      if (element) {
+        this.layers.links.appendChild(element);
+      }
+    });
+    this.root.selectAll("text").filter((d) => d.id === nodeData.id).each((d, i, nodes) => {
+      const element = nodes[i];
+      if (element) {
+        this.layers.nodeLabels.appendChild(element);
+      }
+    });
+    this.root.selectAll(".link-label").filter((item) => {
+      const source = item.link.source;
+      const target = item.link.target;
+      return source.id === nodeData.id || target.id === nodeData.id;
+    }).each((d, i, nodes) => {
+      const element = nodes[i];
+      if (element) {
+        this.layers.linkLabels.appendChild(element);
+      }
     });
-    if (config.interaction?.hover?.enabled) {
-      if (config.interaction?.hover?.tooltip?.enabled) {
-        tooltipBinding = bindNodeTooltip({
-          container: config.container,
-          selection: nodeSelection,
-          tooltipConfig: config.interaction.hover.tooltip
+  }
+  /**
+   * Utility method to bring any SVG element to front using appendChild
+   * Based on the reference implementation pattern
+   */
+  bringElementToFront(element) {
+    if (element.parentNode) {
+      element.parentNode.appendChild(element);
+    }
+  }
+  /**
+   * Clear hover state to prevent conflicts with selection
+   * Similar to the clearAllHoverLayers function in create-node-hover.ts
+   */
+  clearHoverState() {
+    const hoverNodesLayer = this.root.select('[data-layer="hover-nodes"]').node();
+    const nodesLayer = this.root.select('[data-layer="nodes"]').node();
+    if (hoverNodesLayer && nodesLayer) {
+      while (hoverNodesLayer.firstChild) {
+        nodesLayer.appendChild(hoverNodesLayer.firstChild);
+      }
+    }
+    const hoverNodeLabelsLayer = this.root.select('[data-layer="hover-node-labels"]').node();
+    const nodeLabelsLayer = this.root.select('[data-layer="node-labels"]').node();
+    if (hoverNodeLabelsLayer && nodeLabelsLayer) {
+      while (hoverNodeLabelsLayer.firstChild) {
+        nodeLabelsLayer.appendChild(hoverNodeLabelsLayer.firstChild);
+      }
+    }
+    const hoverLinksLayer = this.root.select('[data-layer="hover-links"]').node();
+    const linksLayer = this.root.select('[data-layer="links"]').node();
+    if (hoverLinksLayer && linksLayer) {
+      while (hoverLinksLayer.firstChild) {
+        const linkElement = hoverLinksLayer.firstChild;
+        linksLayer.appendChild(linkElement);
+        const event = new MouseEvent("mouseleave", {
+          bubbles: true,
+          cancelable: false,
+          view: window
         });
+        linkElement.dispatchEvent(event);
       }
-      createNodeHover(nodeSelection, config.interaction.hover.nodeStyle);
     }
-    if (config.interaction?.drag?.enabled !== false) {
-      nodeSelection.call(createDragBehavior(simulation));
+    const hoverLinkLabelsLayer = this.root.select('[data-layer="hover-link-labels"]').node();
+    const linkLabelsLayer = this.root.select('[data-layer="link-labels"]').node();
+    if (hoverLinkLabelsLayer && linkLabelsLayer) {
+      while (hoverLinkLabelsLayer.firstChild) {
+        const labelElement = hoverLinkLabelsLayer.firstChild;
+        const labelData = labelElement.__data__;
+        if (labelData && labelData.style.label.visibility === "hover" && !labelElement.classList.contains("label-selection-pinned")) {
+          labelElement.style.opacity = "0";
+          labelElement.style.pointerEvents = "none";
+        }
+        linkLabelsLayer.appendChild(labelElement);
+      }
     }
-    const selectionConfig = config.interaction?.selection;
-    if (selectionConfig?.enabled) {
-      let selectedNodeElement = null;
-      let selectedLinkElement = null;
-      const linkMarkerSnapshots = /* @__PURE__ */ new Map();
-      linkSelection.each(function() {
-        const linkElement = this;
-        linkMarkerSnapshots.set(linkElement, linkElement.getAttribute("marker-end"));
+  }
+  /**
+   * Clean up resources
+   */
+  destroy() {
+    this.clearSelection();
+  }
+};
+
+// src/core/interaction-manager.ts
+var InteractionManager = class {
+  constructor(manager) {
+    this.manager = manager;
+  }
+  manager;
+  /**
+   * Setup all interactions for the graph
+   */
+  setupInteractions(selections) {
+    this.setupTickManager(selections);
+    this.setupHoverInteractions(selections);
+    this.setupDragBehavior(selections);
+    this.setupSelectionManagement(selections);
+    this.setupLinkHitAreas(selections);
+  }
+  /**
+   * Setup performance tick manager
+   */
+  setupTickManager(selections) {
+    if (!this.manager.tickManager) {
+      this.manager.tickManager = new PerformanceTickManager({
+        frameRate: 30,
+        positionThreshold: 0.5,
+        batchSize: 50,
+        enableThrottling: true
       });
-      const deselectNode = () => {
-        if (!selectedNodeElement) {
-          return;
-        }
-        const nodeElement = selectedNodeElement;
-        nodeElement.style.fill = "";
-        nodeElement.style.stroke = "";
-        nodeElement.style.strokeWidth = "";
-        nodeElement.style.opacity = "";
-        nodeElement.style.removeProperty("r");
-        root2.selectAll(".link-label.label-selection-pinned").classed("label-selection-pinned", false).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
-        selectedNodeElement = null;
+    }
+    const optimizedTickHandler = this.manager.tickManager.createTickHandler({
+      linkSelection: selections.linkSelection,
+      linkLabelSelection: selections.linkLabelSelection,
+      nodeSelection: selections.nodeSelection,
+      labelSelection: selections.labelSelection,
+      tooltipBinding: this.manager.tooltipBinding
+    });
+    if (this.manager.simulation) {
+      this.manager.simulation.on("tick", optimizedTickHandler);
+    }
+  }
+  /**
+   * Setup hover interactions
+   */
+  setupHoverInteractions(selections) {
+    if (this.manager.config.interaction?.hover?.enabled) {
+      if (this.manager.config.interaction.hover.tooltip?.enabled) {
+        this.manager.tooltipBinding = bindNodeTooltip({
+          container: this.manager.config.container,
+          selection: selections.nodeSelection,
+          tooltipConfig: this.manager.config.interaction.hover.tooltip
+        });
+      }
+      createNodeHover(selections.nodeSelection, this.manager.config.interaction.hover.nodeStyle);
+      createLinkHover(selections.linkSelection, this.manager.config.interaction.hover.linkStyle);
+    }
+  }
+  /**
+   * Setup drag behavior
+   */
+  setupDragBehavior(selections) {
+    if (this.manager.config.interaction?.drag?.enabled !== false && this.manager.simulation) {
+      selections.nodeSelection.call(
+        createDragBehavior(
+          this.manager.simulation,
+          () => {
+            this.manager.reheatSimulation(0.3);
+          },
+          this.manager.dimensions
+        )
+      );
+    }
+  }
+  /**
+   * Setup selection management
+   */
+  setupSelectionManagement(selections) {
+    if (this.manager.config.interaction?.selection?.enabled && this.manager.eventEmitter && this.manager.layers && this.manager.rootGroup) {
+      if (!this.manager.linkMarkerSnapshots) {
+        this.manager.linkMarkerSnapshots = /* @__PURE__ */ new Map();
+        const manager = this.manager;
+        selections.linkSelection.each(function() {
+          manager.linkMarkerSnapshots.set(this, this.getAttribute("marker-end"));
+        });
+      }
+      if (!this.manager.rootSelection) {
+        this.manager.rootSelection = select_default2(this.manager.rootGroup);
+      }
+      this.manager.selectionManager = new SelectionManager(
+        this.manager.eventEmitter,
+        this.manager.config.interaction.selection,
+        this.manager.layers,
+        this.manager.linkMarkerSnapshots,
+        this.manager.rootSelection
+      );
+      this.setupSelectionHandlers(selections);
+      this.setupBackgroundClickHandler();
+    }
+  }
+  /**
+   * Setup selection event handlers
+   */
+  setupSelectionHandlers(selections) {
+    if (!this.manager.selectionManager) return;
+    selections.nodeSelection.on("click.select", (event, node) => {
+      const nodeElement = event.currentTarget;
+      this.manager.selectionManager?.selectNode(nodeElement, node);
+    });
+    selections.linkLabelSelection.on("click.select", (event, renderableLinkLabel) => {
+      event.stopPropagation();
+      const correspondingLink = selections.linkSelection.filter((d) => d.link === renderableLinkLabel.link).node();
+      if (correspondingLink && this.manager.selectionManager) {
+        const linkData = selections.linkSelection.filter((d) => d.link === renderableLinkLabel.link).datum();
+        this.manager.selectionManager.selectLink(correspondingLink, linkData, event);
+      }
+    });
+  }
+  /**
+   * Setup background click to clear selection
+   */
+  setupBackgroundClickHandler() {
+    if (!this.manager.selectionManager || !this.manager.layers) return;
+    select_default2(this.manager.layers.svg).on("click.deselect", (event) => {
+      if (this.manager.selectionManager) {
+        this.manager.selectionManager.handleBackgroundClick(
+          event,
+          this.manager.layers.svg,
+          this.manager.layers.interactionRect
+        );
+      }
+    });
+  }
+  /**
+   * Setup link hit areas for better interaction
+   */
+  setupLinkHitAreas(selections) {
+    if (!this.manager.rootGroup) {
+      console.warn("[InteractionManager] No root group available for link hit areas");
+      return;
+    }
+    const rootSelection = select_default2(this.manager.rootGroup);
+    const linkHitAreaSelection = createLinkHitArea(rootSelection, selections.linkSelection);
+    if (linkHitAreaSelection && !linkHitAreaSelection.empty()) {
+      if (this.manager.config.interaction?.hover?.enabled) {
+        createLinkHover(linkHitAreaSelection, this.manager.config.interaction.hover.linkStyle);
+      }
+      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);
+        });
+      }
+      if (this.manager.selectionManager) {
+        linkHitAreaSelection.on("click.select", (event, renderableLink) => {
+          const visibleLinkNode = selections.linkSelection.filter((d) => d === renderableLink).node();
+          if (visibleLinkNode) {
+            this.manager.selectionManager?.selectLink(visibleLinkNode, renderableLink, event);
+          }
+        });
+      }
+    }
+  }
+};
+
+// src/controls/graph-controls.utils.ts
+function resolveControlsPosition(position) {
+  return position ?? "bottom-left";
+}
+function resolveControlsOrientation(orientation) {
+  return orientation ?? "vertical";
+}
+function shouldRenderControl(config, key) {
+  const show = config.show;
+  if (!show) {
+    return true;
+  }
+  const value = show[key];
+  if (value === void 0) {
+    return true;
+  }
+  return value;
+}
+
+// src/assets/plus.svg?raw
+var plus_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M5 12h14m-7-7v14" />\n</svg>';
+
+// src/assets/minus.svg?raw
+var minus_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M19 12H5" />\n</svg>';
+
+// src/assets/fit.svg?raw
+var fit_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M5 9V5H9" />\n  <path d="M19 9V5H15" />\n  <path d="M5 15V19H9" />\n  <path d="M19 15V19H15" />\n</svg>';
+
+// src/assets/reset.svg?raw
+var reset_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M20 12a8 8 0 1 1-2.3-5.7" />\n  <path d="M20 4.5v4h-4" />\n</svg>';
+
+// src/controls/graph-controls.icons.ts
+var ICON_MAP = {
+  "zoom-in": plus_default,
+  "zoom-out": minus_default,
+  fit: fit_default,
+  reset: reset_default
+};
+function getControlIcon(icon) {
+  const raw = ICON_MAP[icon];
+  if (!raw) {
+    throw new Error(`Icon not found: ${icon}`);
+  }
+  return raw.replace("<svg", '<svg class="pg-icon"');
+}
+
+// src/controls/create-graph-controls.ts
+function createGraphControls(overlay, graph, config) {
+  let root2 = null;
+  function mount() {
+    if (!config.enabled) {
+      return;
+    }
+    root2 = document.createElement("div");
+    root2.className = "pg-controls";
+    const position = resolveControlsPosition(config.position);
+    root2.classList.add(`pg-pos-${position}`);
+    const orientation = resolveControlsOrientation(config.orientation);
+    root2.classList.add(`pg-orient-${orientation}`);
+    if (config.offset) {
+      root2.style.setProperty("--pg-controls-offset-x", `${config.offset.x}px`);
+      root2.style.setProperty("--pg-controls-offset-y", `${config.offset.y}px`);
+    }
+    appendControls(root2, config, graph);
+    overlay.appendChild(root2);
+  }
+  function appendControls(root3, config2, graph2) {
+    const actions = [
+      { key: "zoomIn", icon: "zoom-in", label: "Zoom in", fn: graph2.zoomIn.bind(graph2) },
+      { key: "zoomOut", icon: "zoom-out", label: "Zoom out", fn: graph2.zoomOut.bind(graph2) },
+      { key: "fit", icon: "fit", label: "Fit view", fn: graph2.fitView.bind(graph2) },
+      { key: "reset", icon: "reset", label: "Reset view", fn: graph2.resetView.bind(graph2) }
+    ];
+    actions.forEach((action) => {
+      if (shouldRenderControl(config2, action.key)) {
+        root3.appendChild(createButton(action.icon, action.label, action.fn));
+      }
+    });
+  }
+  function createButton(type, label, onClick) {
+    const button = document.createElement("button");
+    button.className = "pg-control-btn";
+    button.type = "button";
+    button.setAttribute("aria-label", label);
+    const wrapper = document.createElement("div");
+    wrapper.className = "pg-icon-wrapper";
+    wrapper.innerHTML = getControlIcon(type);
+    const svg = wrapper.querySelector("svg");
+    if (svg) {
+      svg.classList.add("pg-icon");
+      button.appendChild(svg);
+    }
+    button.addEventListener("click", onClick);
+    return button;
+  }
+  function destroy() {
+    if (!root2) {
+      return;
+    }
+    if (root2.parentNode === overlay) {
+      overlay.removeChild(root2);
+    }
+    root2 = null;
+  }
+  return { mount, destroy };
+}
+
+// src/assets/caret.svg?raw
+var caret_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M9 20L16.5 12L9 4" />\n</svg>';
+
+// src/legends/graph-legend-icon.ts
+var LEGEND_ICON_MAP = { caret: caret_default };
+function getLegendIcon(icon) {
+  const raw = LEGEND_ICON_MAP[icon];
+  if (!raw) {
+    throw new Error(`Legend icon not found: ${icon}`);
+  }
+  return raw.replace("<svg", '<svg class="pg-icon"');
+}
+
+// src/legends/create-graph-legends.ts
+function generateLegendItems(nodes) {
+  const uniqueTypes = Array.from(new Set(nodes.map((node) => node.type)));
+  return uniqueTypes.map((type) => {
+    const sampleNode = nodes.find((node) => node.type === type);
+    return {
+      label: type,
+      color: sampleNode?.style?.fill ?? "#94a3b8",
+      shape: "circle"
+    };
+  });
+}
+function createGraphLegend(overlay, config, nodes) {
+  const legendWrapper = document.createElement("div");
+  legendWrapper.className = "pg-legend";
+  const position = config.position || "bottom-right";
+  legendWrapper.classList.add(`pg-pos-${position}`);
+  if (config.defaultExpanded === false) {
+    legendWrapper.classList.add("pg-is-collapsed");
+  }
+  if (config.collapsible) {
+    const toggleBtn = document.createElement("button");
+    toggleBtn.className = "pg-legend-toggle";
+    toggleBtn.type = "button";
+    toggleBtn.innerHTML = getLegendIcon("caret");
+    toggleBtn.onclick = (e) => {
+      e.stopPropagation();
+      legendWrapper.classList.toggle("pg-is-collapsed");
+    };
+    legendWrapper.appendChild(toggleBtn);
+  }
+  const body = document.createElement("div");
+  body.className = "pg-legend-body";
+  const list = document.createElement("ul");
+  list.className = "pg-legend-list";
+  const legendItems = config.items ?? (nodes ? generateLegendItems(nodes) : []);
+  legendItems.forEach((item) => {
+    const listItem = document.createElement("li");
+    listItem.className = "pg-legend-item";
+    const swatch = document.createElement("span");
+    swatch.className = `pg-legend-swatch is-${item.shape || "circle"}`;
+    swatch.style.backgroundColor = item.color;
+    const label = document.createElement("span");
+    label.className = "pg-legend-label";
+    label.innerText = item.label;
+    listItem.appendChild(swatch);
+    listItem.appendChild(label);
+    list.appendChild(listItem);
+  });
+  body.appendChild(list);
+  legendWrapper.appendChild(body);
+  overlay.appendChild(legendWrapper);
+  return () => {
+    if (legendWrapper.parentNode === overlay) overlay.removeChild(legendWrapper);
+  };
+}
+
+// src/utils/export-graph.ts
+async function captureAndDownloadGraph(container, options = {}) {
+  const {
+    fileName = `graph-export-${Date.now()}.png`,
+    backgroundColor = "#ffffff",
+    scale = 2,
+    includeLegend = true
+  } = options;
+  const svgElement = container.querySelector("svg.pg-canvas");
+  if (!svgElement) {
+    throw new Error("SVG element not found in container");
+  }
+  const svgRect = svgElement.getBoundingClientRect();
+  const graphWidth = svgRect.width || 800;
+  const graphHeight = svgRect.height || 600;
+  const svgClone = svgElement.cloneNode(true);
+  let totalWidth = graphWidth;
+  let totalHeight = graphHeight;
+  if (includeLegend) {
+    const legendEntries = extractLegendData(container);
+    if (legendEntries.length > 0) {
+      const legendDimensions = calculateLegendDimensions(legendEntries, graphWidth);
+      totalWidth = graphWidth + 20 + legendDimensions.width + 20;
+      totalHeight = Math.max(graphHeight, legendDimensions.height + 40);
+      svgClone.setAttribute("width", totalWidth.toString());
+      svgClone.setAttribute("height", totalHeight.toString());
+      svgClone.setAttribute("viewBox", `0 0 ${totalWidth} ${totalHeight}`);
+      const legendGroup = createLegendSVGElement(legendEntries, legendDimensions);
+      svgClone.appendChild(legendGroup);
+    }
+  }
+  svgClone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svgClone.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+  const svgString = new XMLSerializer().serializeToString(svgClone);
+  const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+  const svgUrl = URL.createObjectURL(svgBlob);
+  try {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Could not get canvas context");
+    }
+    canvas.width = totalWidth * scale;
+    canvas.height = totalHeight * scale;
+    ctx.scale(scale, scale);
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, totalWidth, totalHeight);
+    await new Promise((resolve, reject) => {
+      const img = new Image();
+      const cleanup = () => {
+        img.onload = null;
+        img.onerror = null;
+        img.src = "";
+        URL.revokeObjectURL(svgUrl);
       };
-      const deselectLink = () => {
-        if (!selectedLinkElement) {
-          return;
-        }
-        const linkElement = selectedLinkElement;
-        linkElement.style.stroke = "";
-        linkElement.style.strokeWidth = "";
-        linkElement.style.opacity = "";
-        const originalMarkerEnd = linkMarkerSnapshots.get(linkElement);
-        if (originalMarkerEnd) {
-          linkElement.setAttribute("marker-end", originalMarkerEnd);
-        } else {
-          linkElement.removeAttribute("marker-end");
+      img.onload = () => {
+        try {
+          ctx.drawImage(img, 0, 0, totalWidth, totalHeight);
+          canvas.toBlob((blob) => {
+            cleanup();
+            if (blob) {
+              const url = URL.createObjectURL(blob);
+              const link = document.createElement("a");
+              link.href = url;
+              link.download = fileName;
+              document.body.appendChild(link);
+              link.click();
+              document.body.removeChild(link);
+              URL.revokeObjectURL(url);
+              resolve();
+            } else {
+              reject(new Error("Failed to generate image blob"));
+            }
+          }, "image/png", 0.95);
+        } catch (error) {
+          cleanup();
+          reject(error);
         }
-        selectedLinkElement = null;
       };
-      nodeSelection.on("click.select", function(event, node) {
-        event.stopPropagation();
-        const nodeElement = this;
-        if (selectedNodeElement === nodeElement) {
-          deselectNode();
-          return;
-        }
-        deselectNode();
-        deselectLink();
-        selectedNodeElement = nodeElement;
-        const nodeStyle = selectionConfig.nodeStyle;
-        if (nodeStyle) {
-          if (nodeStyle.fill !== void 0) {
-            nodeElement.style.fill = nodeStyle.fill;
-          }
-          if (nodeStyle.stroke !== void 0) {
-            nodeElement.style.stroke = nodeStyle.stroke;
-          }
-          if (nodeStyle.strokeWidth !== void 0) {
-            nodeElement.style.strokeWidth = String(nodeStyle.strokeWidth);
-          }
-          if (nodeStyle.opacity !== void 0) {
-            nodeElement.style.opacity = String(nodeStyle.opacity);
-          }
-          if (nodeStyle.radius !== void 0) {
-            nodeElement.style.setProperty("r", String(nodeStyle.radius));
-          }
-        }
-        root2.selectAll(".link-label").filter((item) => {
-          if (item.style.label.visibility !== "hover") {
-            return false;
-          }
-          const source = item.link.source;
-          const target = item.link.target;
-          return source.id === node.id || target.id === node.id;
-        }).classed("label-selection-pinned", true).interrupt().transition().duration(200).style("opacity", 1).style("pointer-events", "auto");
-        nodeSelectHandlers.forEach((handler) => handler(node, nodeElement));
+      img.onerror = () => {
+        cleanup();
+        reject(new Error("Failed to load SVG image"));
+      };
+      img.src = svgUrl;
+    });
+  } catch (error) {
+    URL.revokeObjectURL(svgUrl);
+    throw error;
+  }
+}
+function extractLegendData(container) {
+  const legendEntries = [];
+  const legendContainer = container.querySelector(".pg-legend");
+  if (!legendContainer) {
+    return legendEntries;
+  }
+  const legendItems = legendContainer.querySelectorAll(".pg-legend-item");
+  legendItems.forEach((item) => {
+    const swatch = item.querySelector(".pg-legend-swatch");
+    const label = item.querySelector(".pg-legend-label");
+    if (swatch && label) {
+      const backgroundColor = swatch.style.backgroundColor || getComputedStyle(swatch).backgroundColor;
+      const type = label.textContent || "Unknown";
+      const color2 = normalizeColor(backgroundColor);
+      legendEntries.push({
+        type: type.trim(),
+        color: color2
       });
-      const selectLink = (event, renderableLink, linkElement) => {
-        event.stopPropagation();
-        if (selectedLinkElement === linkElement) {
-          deselectLink();
-          return;
-        }
-        deselectLink();
-        deselectNode();
-        selectedLinkElement = linkElement;
-        const linkStyle = selectionConfig.linkStyle;
-        if (linkStyle) {
-          if (linkStyle.stroke !== void 0) {
-            linkElement.style.stroke = linkStyle.stroke;
-          }
-          if (linkStyle.strokeWidth !== void 0) {
-            linkElement.style.strokeWidth = String(linkStyle.strokeWidth);
-          }
-          if (linkStyle.opacity !== void 0) {
-            linkElement.style.opacity = String(linkStyle.opacity);
-          }
-          if (linkStyle.stroke !== void 0 && renderableLink.style.arrow.enabled) {
-            const selectionMarkerStyle = {
-              stroke: linkStyle.stroke,
-              arrow: { fill: linkStyle.stroke, size: renderableLink.style.arrow.size }
-            };
-            const selectionMarkerId = createArrowMarker({ svg: layers.svg, style: selectionMarkerStyle });
-            select_default2(linkElement).attr("marker-end", `url(#${selectionMarkerId})`);
-          }
+    }
+  });
+  return legendEntries;
+}
+function calculateLegendDimensions(legendEntries, graphWidth) {
+  const longestTypeName = legendEntries.reduce((max, entry) => {
+    return entry.type.length > max ? entry.type.length : max;
+  }, 0);
+  const minLegendWidth = 180;
+  const calculatedWidth = longestTypeName * 8 + 60;
+  const width = Math.max(minLegendWidth, Math.min(calculatedWidth, 320));
+  const itemHeight = 24;
+  const itemSpacing = 8;
+  const padding = 16;
+  const height = padding + legendEntries.length * (itemHeight + itemSpacing) - itemSpacing + padding;
+  const legendMargin = 20;
+  const x3 = graphWidth + legendMargin;
+  const y3 = 20;
+  return {
+    width,
+    height,
+    x: x3,
+    y: y3,
+    padding,
+    itemHeight,
+    itemSpacing
+  };
+}
+function createLegendSVGElement(legendEntries, dimensions) {
+  const {
+    x: legendX,
+    y: legendY,
+    width: legendWidth,
+    height: legendHeight,
+    padding: legendPadding,
+    itemHeight: legendItemHeight,
+    itemSpacing: legendItemSpacing
+  } = dimensions;
+  const legendGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  legendGroup.setAttribute("class", "export-legend");
+  const legendBg = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  legendBg.setAttribute("x", legendX.toString());
+  legendBg.setAttribute("y", legendY.toString());
+  legendBg.setAttribute("width", legendWidth.toString());
+  legendBg.setAttribute("height", legendHeight.toString());
+  legendBg.setAttribute("fill", "#ffffff");
+  legendBg.setAttribute("stroke", "#e2e8f0");
+  legendBg.setAttribute("stroke-width", "1");
+  legendBg.setAttribute("rx", "8");
+  legendGroup.appendChild(legendBg);
+  legendEntries.forEach((entry, index2) => {
+    const itemY = legendY + legendPadding + index2 * (legendItemHeight + legendItemSpacing);
+    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle.setAttribute("cx", (legendX + legendPadding + 7).toString());
+    circle.setAttribute("cy", (itemY + legendItemHeight / 2).toString());
+    circle.setAttribute("r", "7");
+    circle.setAttribute("fill", entry.color);
+    circle.setAttribute("stroke", "none");
+    legendGroup.appendChild(circle);
+    const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    text.setAttribute("x", (legendX + legendPadding + 24).toString());
+    text.setAttribute("y", (itemY + legendItemHeight / 2).toString());
+    text.setAttribute("font-family", "Inter, -apple-system, BlinkMacSystemFont, sans-serif");
+    text.setAttribute("font-size", "12");
+    text.setAttribute("fill", "#6b7280");
+    text.setAttribute("dominant-baseline", "middle");
+    text.textContent = entry.type;
+    legendGroup.appendChild(text);
+  });
+  return legendGroup;
+}
+function normalizeColor(color2) {
+  const rgbMatch = color2.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    const r = parseInt(rgbMatch[1] ?? "0");
+    const g = parseInt(rgbMatch[2] ?? "0");
+    const b = parseInt(rgbMatch[3] ?? "0");
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+  }
+  return color2;
+}
+
+// src/utils/validation.ts
+var GraphValidator = class {
+  /**
+   * Validate complete graph configuration
+   */
+  static validateConfig(config) {
+    const errors = [];
+    const warnings = [];
+    const containerValidation = this.validateContainer(config.container);
+    errors.push(...containerValidation.errors);
+    warnings.push(...containerValidation.warnings);
+    const nodeValidation = this.validateNodes(config.nodes);
+    errors.push(...nodeValidation.errors);
+    warnings.push(...nodeValidation.warnings);
+    const linkValidation = this.validateLinks(config.links, config.nodes);
+    errors.push(...linkValidation.errors);
+    warnings.push(...linkValidation.warnings);
+    if (config.interaction) {
+      const interactionValidation = this.validateInteraction(config.interaction);
+      errors.push(...interactionValidation.errors);
+      warnings.push(...interactionValidation.warnings);
+    }
+    return {
+      isValid: errors.length === 0,
+      errors,
+      warnings
+    };
+  }
+  /**
+   * Validate container element
+   */
+  static validateContainer(container) {
+    const errors = [];
+    const warnings = [];
+    if (!container) {
+      errors.push({
+        field: "container",
+        message: "Container element is required",
+        value: container,
+        code: "CONTAINER_REQUIRED"
+      });
+      return { isValid: false, errors, warnings };
+    }
+    if (!(container instanceof HTMLElement)) {
+      errors.push({
+        field: "container",
+        message: "Container must be a valid HTMLElement",
+        value: container,
+        code: "CONTAINER_INVALID_TYPE"
+      });
+    }
+    if (!document.contains(container)) {
+      warnings.push("Container element is not attached to the DOM");
+    }
+    const rect = container.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      warnings.push("Container has zero width or height, graph may not render properly");
+    }
+    const styles = window.getComputedStyle(container);
+    if (styles.position === "static") {
+      warnings.push("Container should have position: relative for proper overlay positioning");
+    }
+    return { isValid: errors.length === 0, errors, warnings };
+  }
+  /**
+   * Validate graph nodes
+   */
+  static validateNodes(nodes) {
+    const errors = [];
+    const warnings = [];
+    if (!Array.isArray(nodes)) {
+      errors.push({
+        field: "nodes",
+        message: "Nodes must be an array",
+        value: nodes,
+        code: "NODES_INVALID_TYPE"
+      });
+      return { isValid: false, errors, warnings };
+    }
+    if (nodes.length === 0) {
+      warnings.push("No nodes provided, graph will be empty");
+      return { isValid: true, errors, warnings };
+    }
+    const nodeIds = /* @__PURE__ */ new Set();
+    const duplicateIds = /* @__PURE__ */ new Set();
+    nodes.forEach((node, index2) => {
+      const nodePrefix = `nodes[${index2}]`;
+      if (!node || typeof node !== "object") {
+        errors.push({
+          field: `${nodePrefix}`,
+          message: "Node must be an object",
+          value: node,
+          code: "NODE_INVALID_TYPE"
+        });
+        return;
+      }
+      if (!node.id || typeof node.id !== "string") {
+        errors.push({
+          field: `${nodePrefix}.id`,
+          message: "Node ID is required and must be a string",
+          value: node.id,
+          code: "NODE_ID_REQUIRED"
+        });
+      } else {
+        if (nodeIds.has(node.id)) {
+          duplicateIds.add(node.id);
+          errors.push({
+            field: `${nodePrefix}.id`,
+            message: `Duplicate node ID: ${node.id}`,
+            value: node.id,
+            code: "NODE_ID_DUPLICATE"
+          });
         }
-        linkSelectHandlers.forEach((handler) => handler(renderableLink.link, linkElement));
-      };
-      linkSelection.on("click.select", function(event, renderableLink) {
-        selectLink(event, renderableLink, this);
+        nodeIds.add(node.id);
+      }
+      if (!node.type || typeof node.type !== "string") {
+        errors.push({
+          field: `${nodePrefix}.type`,
+          message: "Node type is required and must be a string",
+          value: node.type,
+          code: "NODE_TYPE_REQUIRED"
+        });
+      }
+      if (node.style) {
+        const styleValidation = this.validateNodeStyle(node.style, `${nodePrefix}.style`);
+        errors.push(...styleValidation.errors);
+        warnings.push(...styleValidation.warnings);
+      }
+    });
+    return { isValid: errors.length === 0, errors, warnings };
+  }
+  /**
+   * Validate graph links
+   */
+  static validateLinks(links, nodes) {
+    const errors = [];
+    const warnings = [];
+    if (!Array.isArray(links)) {
+      errors.push({
+        field: "links",
+        message: "Links must be an array",
+        value: links,
+        code: "LINKS_INVALID_TYPE"
       });
-      const linkHitAreaSelection = 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);
-      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);
+      return { isValid: false, errors, warnings };
+    }
+    const nodeIds = new Set(nodes.map((n) => n.id).filter(Boolean));
+    links.forEach((link, index2) => {
+      const linkPrefix = `links[${index2}]`;
+      if (!link || typeof link !== "object") {
+        errors.push({
+          field: `${linkPrefix}`,
+          message: "Link must be an object",
+          value: link,
+          code: "LINK_INVALID_TYPE"
+        });
+        return;
+      }
+      const sourceId = typeof link.source === "string" ? link.source : link.source?.id;
+      if (!sourceId) {
+        errors.push({
+          field: `${linkPrefix}.source`,
+          message: "Link source is required",
+          value: link.source,
+          code: "LINK_SOURCE_REQUIRED"
+        });
+      } else if (!nodeIds.has(sourceId)) {
+        errors.push({
+          field: `${linkPrefix}.source`,
+          message: `Link source node not found: ${sourceId}`,
+          value: sourceId,
+          code: "LINK_SOURCE_NOT_FOUND"
+        });
+      }
+      const targetId = typeof link.target === "string" ? link.target : link.target?.id;
+      if (!targetId) {
+        errors.push({
+          field: `${linkPrefix}.target`,
+          message: "Link target is required",
+          value: link.target,
+          code: "LINK_TARGET_REQUIRED"
+        });
+      } else if (!nodeIds.has(targetId)) {
+        errors.push({
+          field: `${linkPrefix}.target`,
+          message: `Link target node not found: ${targetId}`,
+          value: targetId,
+          code: "LINK_TARGET_NOT_FOUND"
+        });
+      }
+      if (sourceId === targetId) {
+        warnings.push(`Self-loop detected in link ${index2}: ${sourceId} -> ${targetId}`);
+      }
+    });
+    return { isValid: errors.length === 0, errors, warnings };
+  }
+  /**
+   * Validate interaction configuration
+   */
+  static validateInteraction(interaction) {
+    const errors = [];
+    const warnings = [];
+    if (interaction.hover?.tooltip?.enabled) {
+      if (interaction.hover.tooltip.renderContent && typeof interaction.hover.tooltip.renderContent !== "function") {
+        errors.push({
+          field: "interaction.hover.tooltip.renderContent",
+          message: "renderContent must be a function",
+          value: interaction.hover.tooltip.renderContent,
+          code: "TOOLTIP_RENDER_FUNCTION_INVALID"
+        });
+      }
+    }
+    return { isValid: errors.length === 0, errors, warnings };
+  }
+  /**
+   * Validate node style
+   */
+  static validateNodeStyle(style, fieldPrefix) {
+    const errors = [];
+    const warnings = [];
+    if (typeof style !== "object" || style === null) {
+      errors.push({
+        field: fieldPrefix,
+        message: "Style must be an object",
+        value: style,
+        code: "STYLE_INVALID_TYPE"
       });
-      linkHitAreaSelection.on("click.select", function(event, renderableLink) {
-        const visibleLinkNode = linkSelection.filter((d) => d === renderableLink).node();
-        if (visibleLinkNode) {
-          selectLink(event, renderableLink, visibleLinkNode);
+      return { isValid: false, errors, warnings };
+    }
+    if (style.radius !== void 0) {
+      if (typeof style.radius !== "number" || style.radius < 0) {
+        errors.push({
+          field: `${fieldPrefix}.radius`,
+          message: "Radius must be a non-negative number",
+          value: style.radius,
+          code: "RADIUS_INVALID"
+        });
+      }
+    }
+    const colorFields = ["fill", "stroke", "textColor"];
+    colorFields.forEach((field) => {
+      if (style[field] !== void 0) {
+        if (typeof style[field] !== "string") {
+          errors.push({
+            field: `${fieldPrefix}.${field}`,
+            message: `${field} must be a string`,
+            value: style[field],
+            code: "COLOR_INVALID_TYPE"
+          });
         }
+      }
+    });
+    return { isValid: errors.length === 0, errors, warnings };
+  }
+  /**
+   * Validate runtime environment
+   */
+  static validateEnvironment() {
+    const errors = [];
+    const warnings = [];
+    if (typeof window === "undefined") {
+      errors.push({
+        field: "environment",
+        message: "Graph library requires a browser environment",
+        value: "server",
+        code: "ENVIRONMENT_NOT_BROWSER"
       });
-      select_default2(layers.svg).on("click.deselect", () => {
-        deselectNode();
-        deselectLink();
+    }
+    if (typeof document === "undefined") {
+      errors.push({
+        field: "environment.document",
+        message: "Document API not available",
+        value: void 0,
+        code: "DOCUMENT_API_MISSING"
       });
     }
-    if (config.controls?.enabled) {
-      controls = createGraphControls(
-        layers.overlay,
+    if (typeof ResizeObserver === "undefined") {
+      warnings.push("ResizeObserver not available, responsive features may not work");
+    }
+    if (typeof requestAnimationFrame === "undefined") {
+      warnings.push("requestAnimationFrame not available, performance optimizations disabled");
+    }
+    return { isValid: errors.length === 0, errors, warnings };
+  }
+};
+var GraphValidationError = class extends Error {
+  errors;
+  warnings;
+  constructor(result) {
+    const errorMessages = result.errors.map((e) => `${e.field}: ${e.message}`).join(", ");
+    super(`Graph validation failed: ${errorMessages}`);
+    this.name = "GraphValidationError";
+    this.errors = result.errors;
+    this.warnings = result.warnings;
+  }
+};
+
+// src/create-graph.ts
+function createGraph(config) {
+  const envValidation = GraphValidator.validateEnvironment();
+  if (!envValidation.isValid) {
+    throw new GraphValidationError(envValidation);
+  }
+  if (envValidation.warnings.length > 0) {
+    console.warn("[Polly Graph] Environment warnings:", envValidation.warnings);
+  }
+  const configValidation = GraphValidator.validateConfig(config);
+  if (!configValidation.isValid) {
+    throw new GraphValidationError(configValidation);
+  }
+  if (configValidation.warnings.length > 0) {
+    console.warn("[Polly Graph] Configuration warnings:", configValidation.warnings);
+  }
+  const graphManager = new GraphManager(config);
+  const renderPipeline = new RenderPipeline(graphManager);
+  const interactionManager = new InteractionManager(graphManager);
+  function render() {
+    try {
+      renderPipeline.execute().then((selections) => {
+        interactionManager.setupInteractions(selections);
+        setupAdditionalComponents();
+        if (graphManager.needsImmediateFitView) {
+          graphManager.needsImmediateFitView = false;
+          fitViewWithInitialPositions();
+        }
+      }).catch((error) => {
+        console.error("[Polly Graph] Render failed:", error);
+      });
+    } catch (error) {
+      console.error("[Polly Graph] Render failed:", error);
+    }
+  }
+  function setupAdditionalComponents() {
+    if (config.controls?.enabled && graphManager.layers) {
+      graphManager.controls = createGraphControls(
+        graphManager.layers.overlay,
         { zoomIn, zoomOut, resetView, fitView },
         config.controls
       );
-      controls.mount();
+      graphManager.controls.mount();
+    }
+    if (config.legend?.enabled && graphManager.layers) {
+      const legendCleanup = createGraphLegend(
+        graphManager.layers.overlay,
+        config.legend,
+        config.nodes
+      );
+      graphManager.addCleanup(legendCleanup);
+    }
+    const handleVisibilityChange = () => {
+      if (!graphManager.simulation || !graphManager.timerManager) return;
+      graphManager.timerManager.clearTimer("simulation-cooldown");
+      if (document.hidden) {
+        graphManager.simulation.stop();
+        return;
+      }
+      graphManager.reheatSimulation(0.3);
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    graphManager.addCleanup(() => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    });
+  }
+  function zoomIn() {
+    if (!graphManager.zoomBehavior || !graphManager.svgElement) {
+      console.warn("[Polly Graph] Zoom behavior not available");
+      return;
     }
-    if (config.legend?.enabled) {
-      legendCleanup = createGraphLegend(layers.overlay, config.legend);
+    const svg = graphManager.svgElement;
+    select_default2(svg).transition().duration(400).call(graphManager.zoomBehavior.scaleBy, 1.5);
+  }
+  function zoomOut() {
+    if (!graphManager.zoomBehavior || !graphManager.svgElement) {
+      console.warn("[Polly Graph] Zoom behavior not available");
+      return;
     }
+    const svg = graphManager.svgElement;
+    select_default2(svg).transition().duration(400).call(graphManager.zoomBehavior.scaleBy, 1 / 1.5);
   }
   function resetView() {
-    if (!zoomBehavior || !svgElement) {
+    if (!graphManager.zoomBehavior || !graphManager.svgElement) {
+      console.warn("[Polly Graph] Zoom behavior not available");
       return;
     }
-    select_default2(svgElement).transition().duration(400).call(zoomBehavior.transform, identity2);
+    const svg = graphManager.svgElement;
+    select_default2(svg).transition().duration(400).call(graphManager.zoomBehavior.transform, identity2);
   }
   function fitView() {
-    if (!zoomBehavior || !rootGroup || !svgElement || dimensions.width === 0 || dimensions.height === 0) {
+    if (!graphManager.simulation || !graphManager.svgElement) {
+      console.warn("[Polly Graph] Cannot fit view: simulation or SVG not available");
       return;
     }
-    const bounds = rootGroup.getBBox();
-    if (bounds.width === 0 || bounds.height === 0) {
+    const svg = graphManager.svgElement;
+    const nodes = config.nodes;
+    if (nodes.length === 0) return;
+    const positions = nodes.map((node) => ({
+      x: node.x ?? 0,
+      y: node.y ?? 0
+    }));
+    const xExtent = extent(positions, (d) => d.x);
+    const yExtent = extent(positions, (d) => d.y);
+    const padding = 50;
+    const width = graphManager.dimensions.width - padding * 2;
+    const height = graphManager.dimensions.height - padding * 2;
+    const nodeWidth = xExtent[1] - xExtent[0];
+    const nodeHeight = yExtent[1] - yExtent[0];
+    if (nodeWidth === 0 || nodeHeight === 0) {
       return;
     }
-    const scale = Math.min(dimensions.width / bounds.width, dimensions.height / bounds.height) * 0.9;
-    const translateX = (dimensions.width - bounds.width * scale) / 2 - bounds.x * scale;
-    const translateY = (dimensions.height - bounds.height * scale) / 2 - bounds.y * scale;
-    const transform2 = identity2.translate(translateX, translateY).scale(scale);
-    select_default2(svgElement).transition().duration(400).call(zoomBehavior.transform, transform2);
+    const scale = Math.min(width / nodeWidth, height / nodeHeight, 3);
+    const centerX = (xExtent[0] + xExtent[1]) / 2;
+    const centerY = (yExtent[0] + yExtent[1]) / 2;
+    const transform2 = identity2.translate(graphManager.dimensions.width / 2, graphManager.dimensions.height / 2).scale(scale).translate(-centerX, -centerY);
+    if (graphManager.zoomBehavior) {
+      select_default2(svg).transition().duration(400).call(graphManager.zoomBehavior.transform, transform2);
+    }
   }
-  function zoomIn() {
-    if (!zoomBehavior || !svgElement) {
+  function fitViewWithInitialPositions() {
+    if (!graphManager.simulation || !graphManager.svgElement) {
+      console.warn("[Polly Graph] Cannot fit view: simulation or SVG not available");
       return;
     }
-    select_default2(svgElement).transition().call(zoomBehavior.scaleBy, 1.2);
-  }
-  function zoomOut() {
-    if (!zoomBehavior || !svgElement) {
+    const svg = graphManager.svgElement;
+    const nodes = config.nodes;
+    if (nodes.length === 0) return;
+    const positions = nodes.map((node) => ({
+      x: node.initialX ?? node.x ?? 0,
+      y: node.initialY ?? node.y ?? 0
+    }));
+    const xExtent = extent(positions, (d) => d.x);
+    const yExtent = extent(positions, (d) => d.y);
+    const padding = 50;
+    const width = graphManager.dimensions.width - padding * 2;
+    const height = graphManager.dimensions.height - padding * 2;
+    const nodeWidth = xExtent[1] - xExtent[0];
+    const nodeHeight = yExtent[1] - yExtent[0];
+    if (nodeWidth === 0 || nodeHeight === 0) {
       return;
     }
-    select_default2(svgElement).transition().call(zoomBehavior.scaleBy, 0.8);
+    const scale = Math.min(width / nodeWidth, height / nodeHeight, 3);
+    const centerX = (xExtent[0] + xExtent[1]) / 2;
+    const centerY = (yExtent[0] + yExtent[1]) / 2;
+    const transform2 = identity2.translate(graphManager.dimensions.width / 2, graphManager.dimensions.height / 2).scale(scale).translate(-centerX, -centerY);
+    if (graphManager.zoomBehavior) {
+      select_default2(svg).transition().duration(400).call(graphManager.zoomBehavior.transform, transform2);
+    }
   }
-  async function exportGraph(fileName) {
-    fitView();
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    await captureAndDownloadGraph(config.container, {
-      fileName,
+  function exportGraph(fileName) {
+    if (!graphManager.svgElement) {
+      console.warn("[Polly Graph] Cannot export: no SVG element");
+      return;
+    }
+    captureAndDownloadGraph(config.container, {
+      fileName: fileName ?? "polly-graph-export",
       pixelRatio: 2
     });
   }
-  function destroy() {
-    if (fitViewTimer) {
-      clearTimeout(fitViewTimer);
-      fitViewTimer = null;
-    }
-    if (cleanupResize) {
-      cleanupResize();
-      cleanupResize = null;
+  function clearSelection() {
+    if (graphManager.selectionManager) {
+      graphManager.selectionManager.clearSelection();
     }
-    if (cleanupZoom) {
-      cleanupZoom();
-      cleanupZoom = null;
-    }
-    if (tooltipBinding) {
-      tooltipBinding.destroy();
-      tooltipBinding = null;
-    }
-    if (simulation) {
-      simulation.stop();
-      simulation = null;
-    }
-    if (controls) {
-      controls.destroy();
-      controls = null;
-    }
-    if (legendCleanup) {
-      legendCleanup();
-      legendCleanup = null;
-    }
-    rootGroup = null;
-    svgElement = null;
-    zoomBehavior = null;
-    while (config.container.firstChild) {
-      config.container.removeChild(config.container.firstChild);
+  }
+  function on(event, handler) {
+    if (!graphManager.eventEmitter) {
+      console.warn("[Polly Graph] Event emitter not available");
+      return () => {
+      };
     }
+    switch (event) {
+      case "nodeSelect":
+        return graphManager.eventEmitter.on("nodeSelect", (data) => handler(data.node, data.element));
+      case "nodeDeselect":
+        return graphManager.eventEmitter.on("nodeDeselect", (data) => handler(data.node, data.element));
+      case "linkSelect":
+        return graphManager.eventEmitter.on("linkSelect", (data) => handler(data.link, data.element));
+      case "linkDeselect":
+        return graphManager.eventEmitter.on("linkDeselect", (data) => handler(data.link, data.element));
+      default:
+        console.warn("[Polly Graph] Unknown event:", event);
+        return () => {
+        };
+    }
+  }
+  function off(event, _handler) {
+    if (!graphManager.eventEmitter) return;
+    graphManager.eventEmitter.removeAllListeners(event);
+  }
+  function destroy() {
+    graphManager.destroy();
   }
-  return { render, zoomIn, zoomOut, resetView, fitView, destroy, exportGraph, on, off };
+  graphManager.fitViewCallback = () => {
+    fitView();
+  };
+  return {
+    render,
+    zoomIn,
+    zoomOut,
+    resetView,
+    fitView,
+    destroy,
+    exportGraph,
+    clearSelection,
+    on,
+    off
+  };
 }
 export {
+  ErrorHandler,
+  GraphError,
+  GraphValidationError,
+  GraphValidator,
+  SelectionManager,
+  TypedGraphEventEmitter,
   createGraph
 };