polly-graph 0.2.4 → 0.2.5

package/dist/index.cjs

@@ -517,6 +517,15 @@ var DEFAULT_NODE_INTERACTION_STYLE = {
   // Hover strokeWidth from KG component
   // Selection uses radius: 24 and strokeWidth: 4 (handled separately in interaction config)
 };
+var DEFAULT_NODE_HIGHLIGHT_STYLE = {
+  fill: "#fbbf24",
+  // Amber highlight color
+  stroke: "#f59e0b",
+  // Darker amber border
+  strokeWidth: 2,
+  // Highlighted border
+  opacity: 1
+};
 var DEFAULT_LINK_LABEL_STYLE2 = {
   enabled: true,
   visibility: "always",
@@ -573,8 +582,8 @@ var StyleResolver = class {
   /**
    * Generate cache key for node styles (Step 4 optimization)
    */
-  createNodeCacheKey(node, isHovered, isSelected) {
-    return `${node.id}_${!!node.style}_${isHovered}_${isSelected}_${this.interactionConfigHash}`;
+  createNodeCacheKey(node, isHovered, isSelected, isHighlighted = false) {
+    return `${node.id}_${!!node.style}_${isHovered}_${isSelected}_${isHighlighted}_${this.interactionConfigHash}`;
   }
   /**
    * Generate cache key for link styles (Step 4 optimization)
@@ -589,13 +598,13 @@ var StyleResolver = class {
    * Resolve node style using V1-compatible approach with caching (Step 4 optimization)
    */
   resolveNodeStyle(params) {
-    const { node, isHovered = false, isSelected = false } = params;
-    const cacheKey = this.createNodeCacheKey(node, isHovered, isSelected);
+    const { node, isHovered = false, isSelected = false, isHighlighted = false } = params;
+    const cacheKey = this.createNodeCacheKey(node, isHovered, isSelected, isHighlighted);
     const cached = this.nodeStyleCache.get(cacheKey);
     if (cached) {
       return cached;
     }
-    if (!isHovered && !isSelected) {
+    if (!isHovered && !isSelected && !isHighlighted) {
       const result2 = node.style ? { ...DEFAULT_NODE_STYLE, ...node.style } : DEFAULT_NODE_STYLE;
       this.nodeStyleCache.set(cacheKey, result2);
       return result2;
@@ -610,6 +619,12 @@ var StyleResolver = class {
         this.interactionConfig?.selection?.nodeStyle
       );
       result = { ...result, ...interactionStyle };
+    } else if (isHighlighted) {
+      const highlightStyle = this.mergeNodeStyleSmart(
+        DEFAULT_NODE_HIGHLIGHT_STYLE,
+        this.interactionConfig?.highlight?.nodeStyle
+      );
+      result = { ...result, ...highlightStyle };
     } else if (isHovered) {
       const interactionStyle = this.mergeNodeStyleSmart(
         DEFAULT_NODE_INTERACTION_STYLE,
@@ -796,89 +811,6 @@ function calculateCanvasDimensions(width, height) {
   };
 }
 
-// src/v2/utils/z-index-manager.ts
-var ZIndexManager = class {
-  /**
-   * Separate entities into background and foreground layers based on interaction state
-   */
-  static separateIntoLayers(entities, isHighlighted) {
-    try {
-      const background = [];
-      const foreground = [];
-      for (const entity of entities) {
-        if (isHighlighted(entity)) {
-          foreground.push(entity);
-        } else {
-          background.push(entity);
-        }
-      }
-      return { background, foreground };
-    } catch (error) {
-      ErrorHandler.logError(error, {
-        entityCount: entities.length
-      });
-      return { background: entities, foreground: [] };
-    }
-  }
-  /**
-   * Get connected entities for a node (for bringing associated elements to front)
-   */
-  static getConnectedEntities(node, allLinks) {
-    try {
-      const connectedLinks = [];
-      const linkIds = /* @__PURE__ */ new Set();
-      for (const link of allLinks) {
-        const sourceId = typeof link.source === "string" ? link.source : link.source.id;
-        const targetId = typeof link.target === "string" ? link.target : link.target.id;
-        if (sourceId === node.id || targetId === node.id) {
-          connectedLinks.push(link);
-          linkIds.add(`${sourceId}->${targetId}`);
-        }
-      }
-      return { connectedLinks, linkIds };
-    } catch (error) {
-      ErrorHandler.logError(error, {
-        nodeId: node.id
-      });
-      return { connectedLinks: [], linkIds: /* @__PURE__ */ new Set() };
-    }
-  }
-  /**
-   * Create highlight checker for nodes (node is highlighted if hovered or selected)
-   */
-  static createNodeHighlightChecker(hoveredNodeId, selectedNodeId) {
-    return (node) => {
-      return node.id === hoveredNodeId || node.id === selectedNodeId;
-    };
-  }
-  /**
-   * Create highlight checker for links (link is highlighted if hovered, selected, or connected to highlighted node)
-   */
-  static createLinkHighlightChecker(hoveredNodeId, selectedNodeId, hoveredLinkId, selectedLinkId) {
-    return (link) => {
-      const sourceId = typeof link.source === "string" ? link.source : link.source.id;
-      const targetId = typeof link.target === "string" ? link.target : link.target.id;
-      const linkId = `${sourceId}->${targetId}`;
-      if (linkId === hoveredLinkId || linkId === selectedLinkId) {
-        return true;
-      }
-      if (hoveredNodeId && (sourceId === hoveredNodeId || targetId === hoveredNodeId)) {
-        return true;
-      }
-      if (selectedNodeId && (sourceId === selectedNodeId || targetId === selectedNodeId)) {
-        return true;
-      }
-      return false;
-    };
-  }
-  /**
-   * Create highlight checker for labels (same logic as their parent entities)
-   */
-  static createLabelHighlightChecker(entityHighlightChecker) {
-    return entityHighlightChecker;
-  }
-};
-
 // src/v2/utils/timer-manager.ts
 var TimerManager = class {
   activeTimers = /* @__PURE__ */ new Map();
@@ -2054,6 +1986,266 @@ function manyBody_default() {
   return force;
 }
 
+// src/v2/core/state-manager.ts
+var StateManager = class {
+  // Core entity maps for O(1) lookups
+  nodeMap = /* @__PURE__ */ new Map();
+  linkMap = /* @__PURE__ */ new Map();
+  // Using linkId as key
+  // State cache maps for performance
+  nodeStateCache = /* @__PURE__ */ new Map();
+  linkStateCache = /* @__PURE__ */ new Map();
+  // Link ID to Link mapping for efficient lookups
+  linkIdToLinkMap = /* @__PURE__ */ new Map();
+  // Highlight state tracking
+  highlightedNodes = /* @__PURE__ */ new Set();
+  /**
+   * Initialize with graph data
+   */
+  initialize(state) {
+    try {
+      this.buildNodeMap(state.nodes);
+      this.buildLinkMaps(state.links);
+      this.clearStateCache();
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+  /**
+   * Update with new graph data
+   */
+  updateState(state) {
+    try {
+      this.nodeMap.clear();
+      this.linkMap.clear();
+      this.linkIdToLinkMap.clear();
+      this.buildNodeMap(state.nodes);
+      this.buildLinkMaps(state.links);
+      this.clearStateCache();
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+  /**
+   * Build node map for O(1) node lookups
+   */
+  buildNodeMap(nodes) {
+    for (const node of nodes) {
+      this.nodeMap.set(node.id, node);
+    }
+  }
+  /**
+   * Build link maps for O(1) link lookups
+   */
+  buildLinkMaps(links) {
+    for (const link of links) {
+      const linkId = this.getLinkId(link);
+      this.linkMap.set(linkId, link);
+      this.linkIdToLinkMap.set(linkId, link);
+      if (typeof link.source === "string") {
+        const sourceNode = this.nodeMap.get(link.source);
+        if (sourceNode) {
+          link.source = sourceNode;
+        }
+      }
+      if (typeof link.target === "string") {
+        const targetNode = this.nodeMap.get(link.target);
+        if (targetNode) {
+          link.target = targetNode;
+        }
+      }
+    }
+  }
+  /**
+   * Get node by ID (O(1) lookup)
+   */
+  getNode(nodeId) {
+    return this.nodeMap.get(nodeId);
+  }
+  /**
+   * Get link by link ID (O(1) lookup)
+   */
+  getLink(linkId) {
+    return this.linkMap.get(linkId);
+  }
+  /**
+   * Get link by source/target IDs (O(1) lookup)
+   */
+  getLinkByNodes(sourceId, targetId) {
+    const linkId = `${sourceId}->${targetId}`;
+    return this.linkMap.get(linkId);
+  }
+  /**
+   * Get all nodes (returns reference to avoid copying)
+   */
+  getAllNodes() {
+    return Array.from(this.nodeMap.values());
+  }
+  /**
+   * Get all links (returns reference to avoid copying)
+   */
+  getAllLinks() {
+    return Array.from(this.linkMap.values());
+  }
+  /**
+   * Get node map (for renderers that need direct map access)
+   */
+  getNodeMap() {
+    return this.nodeMap;
+  }
+  /**
+   * Get link ID to link map (for renderers that need direct map access)
+   */
+  getLinkIdToLinkMap() {
+    return this.linkIdToLinkMap;
+  }
+  /**
+   * Cache node state for performance (avoid repeated hover/selection checks)
+   */
+  cacheNodeState(nodeId, state) {
+    this.nodeStateCache.set(nodeId, state);
+  }
+  /**
+   * Get cached node state
+   */
+  getCachedNodeState(nodeId) {
+    return this.nodeStateCache.get(nodeId);
+  }
+  /**
+   * Cache link state for performance (avoid repeated hover/selection checks)
+   */
+  cacheLinkState(linkId, state) {
+    this.linkStateCache.set(linkId, state);
+  }
+  /**
+   * Get cached link state
+   */
+  getCachedLinkState(linkId) {
+    return this.linkStateCache.get(linkId);
+  }
+  /**
+   * Clear state caches (call when hover/selection state changes)
+   */
+  clearStateCache() {
+    this.nodeStateCache.clear();
+    this.linkStateCache.clear();
+  }
+  /**
+   * Clear only node state cache
+   */
+  clearNodeStateCache() {
+    this.nodeStateCache.clear();
+  }
+  /**
+   * Clear only link state cache
+   */
+  clearLinkStateCache() {
+    this.linkStateCache.clear();
+  }
+  /**
+   * Generate consistent link ID
+   */
+  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}`;
+  }
+  /**
+   * Calculate link midpoint (common utility)
+   */
+  getLinkMidpoint(link) {
+    const sourceNode = typeof link.source === "string" ? this.nodeMap.get(link.source) : link.source;
+    const targetNode = typeof link.target === "string" ? this.nodeMap.get(link.target) : link.target;
+    if (!sourceNode || !targetNode || sourceNode.x === void 0 || sourceNode.y === void 0 || targetNode.x === void 0 || targetNode.y === void 0) {
+      return null;
+    }
+    return {
+      x: (sourceNode.x + targetNode.x) / 2,
+      y: (sourceNode.y + targetNode.y) / 2
+    };
+  }
+  /**
+   * Highlight a node by ID
+   */
+  highlightNode(nodeId) {
+    if (this.nodeMap.has(nodeId)) {
+      this.highlightedNodes.add(nodeId);
+      this.clearSingleNodeStateCache(nodeId);
+    }
+  }
+  /**
+   * Highlight multiple nodes by IDs
+   */
+  highlightNodes(nodeIds) {
+    for (const nodeId of nodeIds) {
+      if (this.nodeMap.has(nodeId)) {
+        this.highlightedNodes.add(nodeId);
+        this.clearSingleNodeStateCache(nodeId);
+      }
+    }
+  }
+  /**
+   * Remove highlight from a node
+   */
+  unhighlightNode(nodeId) {
+    if (this.highlightedNodes.has(nodeId)) {
+      this.highlightedNodes.delete(nodeId);
+      this.clearSingleNodeStateCache(nodeId);
+    }
+  }
+  /**
+   * Clear all node highlights
+   */
+  clearHighlights() {
+    const highlightedIds = Array.from(this.highlightedNodes);
+    this.highlightedNodes.clear();
+    for (const nodeId of highlightedIds) {
+      this.clearSingleNodeStateCache(nodeId);
+    }
+  }
+  /**
+   * Check if a node is highlighted
+   */
+  isNodeHighlighted(nodeId) {
+    return this.highlightedNodes.has(nodeId);
+  }
+  /**
+   * Get all highlighted node IDs
+   */
+  getHighlightedNodes() {
+    return new Set(this.highlightedNodes);
+  }
+  /**
+   * Clear state cache for a specific node
+   */
+  clearSingleNodeStateCache(nodeId) {
+    this.nodeStateCache.delete(nodeId);
+  }
+  /**
+   * Get statistics about cached state
+   */
+  getStats() {
+    return {
+      nodeCount: this.nodeMap.size,
+      linkCount: this.linkMap.size,
+      cachedNodeStates: this.nodeStateCache.size,
+      cachedLinkStates: this.linkStateCache.size,
+      highlightedNodes: this.highlightedNodes.size
+    };
+  }
+  /**
+   * Destroy and clean up all maps
+   */
+  destroy() {
+    this.nodeMap.clear();
+    this.linkMap.clear();
+    this.linkIdToLinkMap.clear();
+    this.nodeStateCache.clear();
+    this.linkStateCache.clear();
+    this.highlightedNodes.clear();
+  }
+};
+
 // src/v2/core/physics-manager.ts
 var PhysicsManager = class {
   simulation;
@@ -2063,7 +2255,9 @@ var PhysicsManager = class {
   hasInitialAutoFitCompleted = false;
   timerManager;
   isVisibilityListenerAttached = false;
-  nodeMap = /* @__PURE__ */ new Map();
+  stateManager = new StateManager();
+  isWarmingUp = false;
+  warmupSteps = 0;
   constructor(timerManager) {
     this.timerManager = timerManager;
   }
@@ -2094,19 +2288,19 @@ var PhysicsManager = class {
       if (this.simulation) {
         this.simulation.stop();
       }
-      this.buildNodeIndex();
-      const linkDistance = nodeCount > 1e4 ? 220 : nodeCount > 5e3 ? 190 : nodeCount > 2e3 ? 170 : 150;
-      const chargeStrength = nodeCount > 1e4 ? -350 : nodeCount > 5e3 ? -400 : nodeCount > 2e3 ? -450 : -500;
-      const collisionRadius = nodeCount > 1e4 ? 1 : nodeCount > 5e3 ? 2 : 2;
-      const collisionIterations = nodeCount > 1e4 ? 1 : nodeCount > 5e3 ? 1 : 2;
-      const centerStrength = nodeCount > 5e3 ? 0.15 : 0.5;
-      const linkStrength = nodeCount > 1e4 ? 0.15 : nodeCount > 5e3 ? 0.25 : 0.4;
+      this.stateManager.initialize({ nodes: config.nodes, links: config.links });
+      const linkDistance = nodeCount > 1e4 ? 400 : nodeCount > 6e3 ? 350 : nodeCount > 2e3 ? 300 : 250;
+      const linkStrength = nodeCount > 1e4 ? 0.08 : nodeCount > 6e3 ? 0.12 : nodeCount > 2e3 ? 0.2 : 0.4;
+      const chargeStrength = nodeCount > 1e4 ? -800 : nodeCount > 6e3 ? -700 : nodeCount > 2e3 ? -600 : -500;
+      const collisionRadius = nodeCount > 1e4 ? 5 : nodeCount > 6e3 ? 4 : 3;
+      const collisionIterations = nodeCount > 1e4 ? 2 : nodeCount > 6e3 ? 2 : 2;
+      const centerStrength = nodeCount > 6e3 ? 0.05 : 0.3;
       this.simulation = simulation_default(config.nodes).force(
         "link",
         link_default(config.links).id((d) => d.id).distance(linkDistance).strength(linkStrength).iterations(1)
       ).force(
         "charge",
-        manyBody_default().strength(chargeStrength).theta(nodeCount > 5e3 ? 1.2 : 0.9).distanceMax(nodeCount > 5e3 ? 500 : 1e3)
+        manyBody_default().strength(chargeStrength).theta(nodeCount > 6e3 ? 0.8 : 0.9).distanceMax(nodeCount > 1e4 ? 800 : nodeCount > 6e3 ? 700 : 1e3)
       ).force(
         "collision",
         collide_default().radius((node) => (node.style?.radius ?? 20) + collisionRadius).strength(1).iterations(collisionIterations)
@@ -2114,12 +2308,15 @@ var PhysicsManager = class {
         "center",
         center_default(0, 0).strength(centerStrength)
       ).velocityDecay(
-        nodeCount > 5e3 ? 0.65 : adaptiveVelocityDecay
+        nodeCount > 1e4 ? 0.4 : nodeCount > 6e3 ? 0.5 : adaptiveVelocityDecay
       ).alphaDecay(
-        nodeCount > 5e3 ? 0.05 : adaptiveAlphaDecay
+        nodeCount > 1e4 ? 0.01 : nodeCount > 6e3 ? 0.02 : adaptiveAlphaDecay
       ).alphaMin(
-        nodeCount > 5e3 ? 0.05 : 1e-3
-      ).on("tick", config.onTick).on("end", () => this.handleSimulationEnd());
+        nodeCount > 1e4 ? 0.01 : nodeCount > 6e3 ? 0.02 : 1e-3
+      ).on("tick", () => this.handleTick(config.onTick)).on("end", () => this.handleSimulationEnd());
+      if (nodeCount > 1e3) {
+        this.startSmoothWarmup();
+      }
       if (config.cooldownTime) {
         this.setupCooldownTimer(config.cooldownTime);
       }
@@ -2132,12 +2329,64 @@ var PhysicsManager = class {
       throw error;
     }
   }
+  /**
+   * Handle tick with smooth warmup progression
+   */
+  handleTick(originalOnTick) {
+    if (this.isWarmingUp) {
+      this.progressWarmup();
+    }
+    originalOnTick();
+  }
+  /**
+   * Start smooth warmup process for large graphs
+   */
+  startSmoothWarmup() {
+    if (!this.simulation || !this.config) return;
+    this.isWarmingUp = true;
+    this.warmupSteps = 0;
+    this.applyWarmupForces(0.2);
+  }
+  /**
+   * Progress warmup over time for smoother initial animation
+   */
+  progressWarmup() {
+    if (!this.simulation || !this.config) return;
+    this.warmupSteps++;
+    const maxWarmupSteps = 60;
+    const progress = Math.min(this.warmupSteps / maxWarmupSteps, 1);
+    if (progress >= 1) {
+      this.isWarmingUp = false;
+      this.applyWarmupForces(1);
+    } else {
+      const forceMultiplier = 0.2 + progress * 0.8;
+      this.applyWarmupForces(forceMultiplier);
+    }
+  }
+  /**
+   * Apply scaled forces during warmup
+   */
+  applyWarmupForces(multiplier) {
+    if (!this.simulation || !this.config) return;
+    const nodeCount = this.config.nodes.length;
+    const linkStrength = (nodeCount > 1e4 ? 0.08 : nodeCount > 6e3 ? 0.12 : nodeCount > 2e3 ? 0.2 : 0.4) * multiplier;
+    const chargeStrength = (nodeCount > 1e4 ? -800 : nodeCount > 6e3 ? -700 : nodeCount > 2e3 ? -600 : -500) * multiplier;
+    const linkForce = this.simulation.force("link");
+    const chargeForce = this.simulation.force("charge");
+    if (linkForce) {
+      linkForce.strength(linkStrength);
+    }
+    if (chargeForce) {
+      chargeForce.strength(chargeStrength);
+    }
+  }
   /**
    * Handle simulation end
    */
   handleSimulationEnd() {
     try {
       this.simulationEndTime = performance.now();
+      this.isWarmingUp = false;
       if (this.config?.onEnd) {
         this.config.onEnd();
       }
@@ -2172,34 +2421,6 @@ var PhysicsManager = class {
       ErrorHandler.logError(error, { cooldownTime });
     }
   }
-  /**
-   * Build node index for O(1) lookups (Step 3 optimization)
-   */
-  buildNodeIndex() {
-    if (!this.config) return;
-    try {
-      this.nodeMap.clear();
-      for (const node of this.config.nodes) {
-        this.nodeMap.set(node.id, node);
-      }
-      for (const link of this.config.links) {
-        if (typeof link.source === "string") {
-          const sourceNode = this.nodeMap.get(link.source);
-          if (sourceNode) {
-            link.source = sourceNode;
-          }
-        }
-        if (typeof link.target === "string") {
-          const targetNode = this.nodeMap.get(link.target);
-          if (targetNode) {
-            link.target = targetNode;
-          }
-        }
-      }
-    } catch (error) {
-      ErrorHandler.logError(error);
-    }
-  }
   /**
    * Get simulation instance
    */
@@ -2217,7 +2438,7 @@ var PhysicsManager = class {
       return;
     }
     const nodeCount = this.config.nodes.length;
-    const effectiveAlpha = alphaTarget ?? (nodeCount > 1e4 ? 5e-3 : nodeCount > 5e3 ? 0.01 : nodeCount > 2e3 ? 0.02 : 0.1);
+    const effectiveAlpha = alphaTarget ?? (nodeCount > 1e4 ? 0.03 : nodeCount > 5e3 ? 0.05 : nodeCount > 2e3 ? 0.08 : 0.15);
     try {
       this.simulation.alphaTarget(effectiveAlpha).restart();
       if (this.config.cooldownTime) {
@@ -2294,8 +2515,8 @@ var PhysicsManager = class {
       const linkForce = this.simulation.force("link");
       if (linkForce) {
         linkForce.distance((link) => {
-          const sourceNode = typeof link.source === "string" ? this.nodeMap.get(link.source) : link.source;
-          const targetNode = typeof link.target === "string" ? this.nodeMap.get(link.target) : link.target;
+          const sourceNode = typeof link.source === "string" ? this.stateManager.getNode(link.source) : link.source;
+          const targetNode = typeof link.target === "string" ? this.stateManager.getNode(link.target) : link.target;
           const sourceRadius = sourceNode?.style?.radius ?? 20;
           const targetRadius = targetNode?.style?.radius ?? 20;
           const arrowLength = this.getLinkArrowLength(link);
@@ -2313,11 +2534,13 @@ var PhysicsManager = class {
    * Calculate base distance based on graph size and node count
    */
   calculateBaseDistance() {
-    if (!this.config) return 120;
+    if (!this.config) return 150;
     const nodeCount = this.config.nodes.length;
     const graphArea = Math.max(this.config.width * this.config.height, 1);
     const nodeAreaRatio = nodeCount / (graphArea / 1e4);
-    return Math.max(80, Math.min(200, 120 + nodeAreaRatio * 20));
+    const baseDistance = nodeCount > 1e4 ? 300 : nodeCount > 6e3 ? 250 : nodeCount > 2e3 ? 200 : 150;
+    const areaAdjustment = Math.min(100, nodeAreaRatio * 30);
+    return Math.max(baseDistance, baseDistance + areaAdjustment);
   }
   /**
    * Get arrow length from link style or default
@@ -2329,15 +2552,38 @@ var PhysicsManager = class {
     return linkStyle?.arrow?.size ?? 8;
   }
   /**
-   * Initialize node positions if not set
+   * Initialize node positions with improved distribution for smoother startup
    */
   initializePositions() {
     if (!this.config) return;
     try {
-      for (const node of this.config.nodes) {
+      const nodeCount = this.config.nodes.length;
+      const centerX = this.config.width / 2;
+      const centerY = this.config.height / 2;
+      const radius = Math.min(this.config.width, this.config.height) * 0.3;
+      for (let i = 0; i < this.config.nodes.length; i++) {
+        const node = this.config.nodes[i];
+        if (!node) continue;
         if (node.x == null || node.y == null) {
-          node.x = Math.random() * this.config.width;
-          node.y = Math.random() * this.config.height;
+          if (nodeCount === 1) {
+            node.x = centerX;
+            node.y = centerY;
+          } else if (nodeCount <= 10) {
+            const angle = i / nodeCount * 2 * Math.PI;
+            node.x = centerX + Math.cos(angle) * radius * 0.5;
+            node.y = centerY + Math.sin(angle) * radius * 0.5;
+          } else if (nodeCount <= 100) {
+            const angle = i * 0.5;
+            const spiralRadius = i / nodeCount * radius;
+            node.x = centerX + Math.cos(angle) * spiralRadius;
+            node.y = centerY + Math.sin(angle) * spiralRadius;
+          } else {
+            const clusterRadius = radius * 0.6;
+            const angle = Math.random() * 2 * Math.PI;
+            const distance = Math.random() * clusterRadius;
+            node.x = centerX + Math.cos(angle) * distance;
+            node.y = centerY + Math.sin(angle) * distance;
+          }
         }
       }
     } catch (error) {
@@ -2397,7 +2643,7 @@ var PhysicsManager = class {
       return;
     }
     const nodeCount = this.config?.nodes.length ?? 0;
-    const alpha = nodeCount > 1e4 ? 0.01 : nodeCount > 5e3 ? 0.02 : nodeCount > 2e3 ? 0.05 : 0.3;
+    const alpha = nodeCount > 1e4 ? 0.05 : nodeCount > 5e3 ? 0.08 : nodeCount > 2e3 ? 0.12 : 0.3;
     this.simulation.alpha(alpha).alphaTarget(0).restart();
     if (this.config?.cooldownTime) {
       this.setupCooldownTimer(this.config.cooldownTime);
@@ -2408,6 +2654,9 @@ var PhysicsManager = class {
       this.pause();
     } else {
       this.resume();
+      if (this.hasInitialAutoFitCompleted && this.simulation && this.simulation.alpha() > 0) {
+        this.hasInitialAutoFitCompleted = false;
+      }
     }
   };
   /**
@@ -2425,10 +2674,12 @@ var PhysicsManager = class {
         this.simulation = void 0;
       }
       this.config = void 0;
-      this.nodeMap.clear();
+      this.stateManager.destroy();
       this.simulationStartTime = void 0;
       this.simulationEndTime = void 0;
       this.hasInitialAutoFitCompleted = false;
+      this.isWarmingUp = false;
+      this.warmupSteps = 0;
     } catch (error) {
       ErrorHandler.logError(error);
     }
@@ -5214,6 +5465,10 @@ var DragManager = class {
   };
   DRAG_CLICK_TOLERANCE_PX = 3;
   // Force-graph constant
+  // RAF throttling for smooth drag performance
+  dragRenderPending = false;
+  lastDragRenderTime = 0;
+  pendingAnimationFrame;
   /**
    * Initialize drag behavior
    */
@@ -5263,6 +5518,10 @@ var DragManager = class {
         obj.fy = obj.y;
       }
       this.config.canvas.classList.add("grabbable");
+      if (this.config.renderer) {
+        this.config.renderer.setDraggedNode(obj);
+        this.config.renderer.setDragState(true);
+      }
     } catch (error) {
       ErrorHandler.logError(error, {
         nodeId: obj?.id,
@@ -5295,7 +5554,7 @@ var DragManager = class {
       this.state.isDragging = true;
       this.state.isPointerDragging = true;
       obj.__dragged = true;
-      this.config.onRender();
+      this.throttledDragRender();
     } catch (error) {
       ErrorHandler.logError(error, {
         nodeId: obj?.id,
@@ -5303,6 +5562,24 @@ var DragManager = class {
       });
     }
   }
+  /**
+   * RAF-throttled render during drag (like ZoomManager pattern)
+   */
+  throttledDragRender() {
+    if (!this.config) return;
+    const now2 = performance.now();
+    if (now2 - this.lastDragRenderTime < 16) return;
+    if (this.dragRenderPending) return;
+    this.dragRenderPending = true;
+    this.pendingAnimationFrame = requestAnimationFrame(() => {
+      this.pendingAnimationFrame = void 0;
+      this.dragRenderPending = false;
+      this.lastDragRenderTime = performance.now();
+      if (this.config && this.state.isPointerDragging) {
+        this.config.onRender();
+      }
+    });
+  }
   /**
    * Handle drag end
    */
@@ -5327,6 +5604,9 @@ var DragManager = class {
       this.config.canvas.classList.remove("grabbable");
       this.state.isDragging = false;
       this.state.isPointerDragging = false;
+      if (this.config.renderer) {
+        this.config.renderer.setDragState(false);
+      }
       if (obj.__dragged) {
         delete obj.__dragged;
         this.config.onRender();
@@ -5361,6 +5641,10 @@ var DragManager = class {
    */
   destroy() {
     try {
+      if (this.pendingAnimationFrame !== void 0) {
+        cancelAnimationFrame(this.pendingAnimationFrame);
+        this.pendingAnimationFrame = void 0;
+      }
       if (this.config?.canvas) {
         select_default2(this.config.canvas).on(".drag", null);
         this.config.canvas.classList.remove("grabbable");
@@ -5380,6 +5664,10 @@ var DragManager = class {
 var ZoomManager = class {
   config;
   zoomBehavior;
+  isZooming = false;
+  zoomRenderPending = false;
+  isProgrammaticZoom = false;
+  // Flag for programmatic zoom operations
   /**
    * Initialize zoom behavior
    */
@@ -5427,49 +5715,69 @@ var ZoomManager = class {
    * Handle zoom start (when panning begins)
    */
   handleZoomStart(event) {
+    this.isZooming = true;
     if (!this.config) return;
     try {
       event.sourceEvent?.stopPropagation();
       event.sourceEvent?.preventDefault();
-      this.config.canvas.style.cursor = "grabbing";
+      if (this.config.renderer && !this.isProgrammaticZoom) {
+        this.config.renderer.setZoomState(true);
+      }
+      if (!this.isProgrammaticZoom) {
+        this.config.canvas.style.cursor = "grabbing";
+      }
     } catch (error) {
       ErrorHandler.logError(error);
     }
   }
   /**
-   * Handle zoom events
+   * Handle zoom events with RAF throttling for smooth performance
    */
   handleZoom(event) {
     if (!this.config) return;
-    try {
-      event.sourceEvent?.stopPropagation();
-      event.sourceEvent?.preventDefault();
-      const transform2 = event.transform;
-      this.config.canvasManager.clear();
-      this.config.canvasManager.applyTransform(transform2);
-      this.config.onRender();
-    } catch (error) {
-      ErrorHandler.logError(error, {
-        transform: event.transform
-      });
+    event.sourceEvent?.stopPropagation();
+    event.sourceEvent?.preventDefault();
+    if (this.zoomRenderPending) {
+      return;
     }
+    this.zoomRenderPending = true;
+    requestAnimationFrame(() => {
+      this.zoomRenderPending = false;
+      if (!this.config) {
+        return;
+      }
+      this.config.onRender();
+    });
   }
   /**
    * Handle zoom end (when panning ends)
    */
   handleZoomEnd(event) {
+    this.isZooming = false;
     if (!this.config) return;
     try {
       event.sourceEvent?.stopPropagation();
       event.sourceEvent?.preventDefault();
-      const currentCursor = this.config.canvas.style.cursor;
-      if (currentCursor === "grabbing") {
-        this.config.canvas.style.cursor = "grab";
+      if (this.config.renderer && !this.isProgrammaticZoom) {
+        this.config.renderer.setZoomState(false);
+      }
+      if (!this.isProgrammaticZoom) {
+        const currentCursor = this.config.canvas.style.cursor;
+        if (currentCursor === "grabbing") {
+          this.config.canvas.style.cursor = "grab";
+        }
+      }
+      if (this.config.onZoomEnd) {
+        this.config.onZoomEnd();
       }
+      this.isProgrammaticZoom = false;
     } catch (error) {
       ErrorHandler.logError(error);
     }
   }
+  isCurrentlyZooming() {
+    return this.isZooming;
+  }
   /**
    * Get zoom behavior instance
    */
@@ -5501,6 +5809,7 @@ var ZoomManager = class {
   zoomIn(factor = 1.5, center) {
     if (!this.config?.canvas || !this.zoomBehavior) return;
     try {
+      this.isProgrammaticZoom = true;
       const canvas = this.config.canvas;
       if (center) {
         select_default2(canvas).transition().duration(300).call(this.zoomBehavior.scaleBy, factor, center);
@@ -5523,6 +5832,7 @@ var ZoomManager = class {
   resetZoom(duration = 500) {
     if (!this.config?.canvas || !this.zoomBehavior) return;
     try {
+      this.isProgrammaticZoom = true;
       const canvasDims = this.config.canvasManager.getDimensions();
       const transform2 = identity2.translate(canvasDims.width / 2, canvasDims.height / 2);
       select_default2(this.config.canvas).transition().duration(duration).call(this.zoomBehavior.transform, transform2);
@@ -5536,6 +5846,7 @@ var ZoomManager = class {
   setTransform(transform2, duration = 0) {
     if (!this.config?.canvas || !this.zoomBehavior) return;
     try {
+      this.isProgrammaticZoom = true;
       const selection2 = select_default2(this.config.canvas);
       const zoomTransform = identity2.translate(transform2.x, transform2.y).scale(transform2.k);
       if (duration > 0) {
@@ -5557,6 +5868,7 @@ var ZoomManager = class {
         return;
       }
       try {
+        this.isProgrammaticZoom = true;
         const canvas = this.config.canvas;
         const transitionDuration = 750;
         const canvasDims = this.config.canvasManager.getDimensions();
@@ -5645,6 +5957,8 @@ var HoverManager = class {
   flushShadowCanvas;
   hasValidPointerPosition = false;
   containerWarningLogged = false;
+  // Store bound handlers for proper cleanup
+  boundHandlers = /* @__PURE__ */ new Map();
   /**
    * Initialize hover manager with force-graph pattern
    */
@@ -5676,7 +5990,7 @@ var HoverManager = class {
         console.error("Cannot add pointer event listeners - container is null");
         return;
       }
-      this.container.addEventListener(evType, (ev) => {
+      const eventHandler = (ev) => {
         const pointerEvent = ev;
         const container = this.container;
         if (!container) {
@@ -5701,7 +6015,9 @@ var HoverManager = class {
             this.containerWarningLogged = true;
           }
         }
-      }, { passive: true });
+      };
+      this.boundHandlers.set(evType, eventHandler);
+      this.container.addEventListener(evType, eventHandler, { passive: true });
     });
   }
   /**
@@ -5922,6 +6238,12 @@ var HoverManager = class {
    */
   destroy() {
     try {
+      if (this.container) {
+        this.boundHandlers.forEach((handler, eventType) => {
+          this.container.removeEventListener(eventType, handler);
+        });
+      }
+      this.boundHandlers.clear();
       this.eventHandlers.clear();
       this.hoverState = {
         currentHovered: null,
@@ -5950,6 +6272,8 @@ var SelectionManager = class {
   };
   eventHandlers = /* @__PURE__ */ new Map();
   container;
+  // Store bound handlers for proper cleanup
+  boundHandlers = /* @__PURE__ */ new Map();
   /**
    * Initialize selection manager
    */
@@ -5971,14 +6295,19 @@ var SelectionManager = class {
    */
   setupSelectionListeners() {
     if (!this.container || !this.canvasState) return;
-    this.container.addEventListener("click", (event) => {
+    const clickHandler = (event) => {
       this.handleSelectionClick(event);
-    }, { passive: false });
-    document.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
+    };
+    this.boundHandlers.set("click", clickHandler);
+    this.container.addEventListener("click", clickHandler, { passive: false });
+    const keydownHandler = (event) => {
+      const keyboardEvent = event;
+      if (keyboardEvent.key === "Escape") {
         this.clearSelection();
       }
-    });
+    };
+    this.boundHandlers.set("keydown", keydownHandler);
+    document.addEventListener("keydown", keydownHandler);
   }
   /**
    * Handle selection click
@@ -6210,14 +6539,13 @@ var SelectionManager = class {
    */
   destroy() {
     try {
-      if (this.container) {
-        this.container.removeEventListener("click", this.handleSelectionClick.bind(this));
+      if (this.container && this.boundHandlers.has("click")) {
+        this.container.removeEventListener("click", this.boundHandlers.get("click"));
       }
-      document.removeEventListener("keydown", (event) => {
-        if (event.key === "Escape") {
-          this.clearSelection();
-        }
-      });
+      if (this.boundHandlers.has("keydown")) {
+        document.removeEventListener("keydown", this.boundHandlers.get("keydown"));
+      }
+      this.boundHandlers.clear();
       this.eventHandlers.clear();
       this.selectionState = {
         selectedNode: null,
@@ -6295,7 +6623,7 @@ var NodesRenderer = class {
   /**
    * Render nodes to canvas using StyleResolver with performance metrics
    */
-  static renderWithStyleResolver(ctx, nodes, styleResolver, isNodeHovered, isNodeSelected, performanceMetrics) {
+  static renderWithStyleResolver(ctx, nodes, styleResolver, isNodeHovered, isNodeSelected, isNodeHighlighted, performanceMetrics) {
     try {
       for (const node of nodes) {
         const x3 = node.x;
@@ -6303,6 +6631,7 @@ var NodesRenderer = class {
         const hoverStart = performance.now();
         const isHovered = isNodeHovered(node.id);
         const isSelected = isNodeSelected ? isNodeSelected(node.id) : false;
+        const isHighlighted = isNodeHighlighted ? isNodeHighlighted(node.id) : false;
         if (performanceMetrics) {
           performanceMetrics.hoverChecks += performance.now() - hoverStart;
         }
@@ -6310,7 +6639,8 @@ var NodesRenderer = class {
         const style = styleResolver.resolveNodeStyle({
           node,
           isHovered,
-          isSelected
+          isSelected,
+          isHighlighted
         });
         if (performanceMetrics) {
           performanceMetrics.styleResolution += performance.now() - styleStart;
@@ -6460,6 +6790,514 @@ var NodeLabelsRenderer = class {
   }
 };
 
+// src/v2/rendering/z-index-renderer.ts
+var OptimizedZIndexRenderer = class _OptimizedZIndexRenderer {
+  config;
+  styleResolver;
+  // Pre-computed adjacency maps for O(1) lookups
+  nodeToLinksMap = /* @__PURE__ */ new Map();
+  linkToNodesMap = /* @__PURE__ */ new Map();
+  // Reusable arrays to minimize garbage collection
+  reusableArrays = {
+    backgroundNodes: [],
+    foregroundNodes: [],
+    backgroundLinks: [],
+    foregroundLinks: []
+  };
+  // Pre-sorted arrays to avoid redundant sorting
+  sortedBackgroundNodes = [];
+  sortedForegroundNodes = [];
+  // State checkers (injected from parent renderer)
+  isNodeHovered = () => false;
+  isNodeSelected = () => false;
+  isLinkHovered = () => false;
+  isLinkSelected = () => false;
+  getLinkId = () => "";
+  getLinkMidpoint = () => null;
+  // Component renderers (injected)
+  renderNodes;
+  renderLinks;
+  renderNodeLabels;
+  /**
+   * Initialize the optimized z-index renderer
+   */
+  initialize(config) {
+    this.config = { nodes: config.nodes, links: config.links };
+    this.styleResolver = config.styleResolver;
+    this.isNodeHovered = config.isNodeHovered;
+    this.isNodeSelected = config.isNodeSelected;
+    this.isLinkHovered = config.isLinkHovered;
+    this.isLinkSelected = config.isLinkSelected;
+    this.getLinkId = config.getLinkId;
+    this.getLinkMidpoint = config.getLinkMidpoint;
+    this.renderNodes = config.renderNodes;
+    this.renderLinks = config.renderLinks;
+    this.renderNodeLabels = config.renderNodeLabels;
+    this.buildAdjacencyMaps();
+  }
+  /**
+   * Build adjacency maps once at initialization - O(n) complexity
+   */
+  buildAdjacencyMaps() {
+    if (!this.config) return;
+    this.nodeToLinksMap.clear();
+    this.linkToNodesMap.clear();
+    try {
+      for (const link of this.config.links) {
+        const sourceId = typeof link.source === "string" ? link.source : link.source.id;
+        const targetId = typeof link.target === "string" ? link.target : link.target.id;
+        const linkId = this.getLinkId(link);
+        this.linkToNodesMap.set(linkId, [sourceId, targetId]);
+        if (!this.nodeToLinksMap.has(sourceId)) {
+          this.nodeToLinksMap.set(sourceId, /* @__PURE__ */ new Set());
+        }
+        if (!this.nodeToLinksMap.has(targetId)) {
+          this.nodeToLinksMap.set(targetId, /* @__PURE__ */ new Set());
+        }
+        this.nodeToLinksMap.get(sourceId).add(linkId);
+        this.nodeToLinksMap.get(targetId).add(linkId);
+      }
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+  /**
+   * Determine interactive entities - O(n) total complexity
+   */
+  getInteractiveEntities() {
+    if (!this.config) {
+      return { interactiveNodes: /* @__PURE__ */ new Set(), interactiveLinks: /* @__PURE__ */ new Set() };
+    }
+    const interactiveNodes = /* @__PURE__ */ new Set();
+    const interactiveLinks = /* @__PURE__ */ new Set();
+    try {
+      for (const node of this.config.nodes) {
+        if (this.isNodeHovered(node.id) || this.isNodeSelected(node.id)) {
+          interactiveNodes.add(node.id);
+          const connectedLinks = this.nodeToLinksMap.get(node.id);
+          if (connectedLinks) {
+            connectedLinks.forEach((linkId) => interactiveLinks.add(linkId));
+          }
+        }
+      }
+      for (const link of this.config.links) {
+        const linkId = this.getLinkId(link);
+        if (this.isLinkHovered(link) || this.isLinkSelected(link)) {
+          interactiveLinks.add(linkId);
+          const connectedNodes = this.linkToNodesMap.get(linkId);
+          if (connectedNodes) {
+            interactiveNodes.add(connectedNodes[0]);
+            interactiveNodes.add(connectedNodes[1]);
+          }
+        }
+      }
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+    return { interactiveNodes, interactiveLinks };
+  }
+  /**
+   * Clear and prepare reusable arrays to avoid garbage collection
+   */
+  clearReusableArrays() {
+    this.reusableArrays.backgroundNodes.length = 0;
+    this.reusableArrays.foregroundNodes.length = 0;
+    this.reusableArrays.backgroundLinks.length = 0;
+    this.reusableArrays.foregroundLinks.length = 0;
+    this.sortedBackgroundNodes.length = 0;
+    this.sortedForegroundNodes.length = 0;
+  }
+  /**
+   * Main render with optimized layering - O(n) total complexity
+   */
+  render(ctx, performanceMetrics) {
+    if (!this.config || !this.styleResolver) {
+      throw new RenderError("Z-Index renderer not initialized");
+    }
+    const startTime = performance.now();
+    try {
+      const { interactiveNodes, interactiveLinks } = this.getInteractiveEntities();
+      this.clearReusableArrays();
+      this.separateEntitiesIntoLayers(interactiveNodes, interactiveLinks);
+      this.renderAllComponentsInCorrectOrder(ctx);
+      if (performanceMetrics) {
+        performanceMetrics.renderTotal += performance.now() - startTime;
+      }
+    } catch (error) {
+      ErrorHandler.logError(error);
+      throw new RenderError("Failed to render with z-index optimization");
+    }
+  }
+  /**
+   * Separate entities into background/foreground layers - O(n) - OPTIMIZED
+   * CRITICAL: Ensure entities appear in ONLY ONE layer to prevent overlapping labels
+   * OPTIMIZED: Combined with sorting to reduce iterations
+   */
+  separateEntitiesIntoLayers(interactiveNodes, interactiveLinks) {
+    if (!this.config) return;
+    for (const node of this.config.nodes) {
+      if (interactiveNodes.has(node.id)) {
+        this.reusableArrays.foregroundNodes.push(node);
+      } else {
+        this.reusableArrays.backgroundNodes.push(node);
+      }
+    }
+    for (const link of this.config.links) {
+      const linkId = this.getLinkId(link);
+      if (interactiveLinks.has(linkId)) {
+        this.reusableArrays.foregroundLinks.push(link);
+      } else {
+        this.reusableArrays.backgroundLinks.push(link);
+      }
+    }
+    this.sortNodeArrays();
+  }
+  /**
+   * Sort node arrays once after separation - O(n log n) but only once per render
+   */
+  sortNodeArrays() {
+    this.sortedBackgroundNodes = this.sortNodesForSubLayering(this.reusableArrays.backgroundNodes);
+    this.sortedForegroundNodes = this.sortNodesForSubLayering(this.reusableArrays.foregroundNodes);
+  }
+  /**
+   * Render all components in correct z-order across all layers
+   * PROPERLY FIXED: Atomic node+label rendering for correct sub-layering
+   */
+  renderAllComponentsInCorrectOrder(ctx) {
+    if (this.renderLinks) {
+      this.renderLinks(ctx, this.reusableArrays.backgroundLinks);
+    }
+    this.renderLinkLabels(ctx, this.reusableArrays.backgroundLinks);
+    this.renderNodesWithLabelsAtomically(ctx, this.sortedBackgroundNodes);
+    if (this.renderLinks) {
+      this.renderLinks(ctx, this.reusableArrays.foregroundLinks);
+    }
+    this.renderLinkLabels(ctx, this.reusableArrays.foregroundLinks);
+    this.renderNodesWithLabelsAtomically(ctx, this.sortedForegroundNodes);
+  }
+  /**
+   * Render nodes with atomic circle+label rendering for proper sub-layering
+   * OPTIMIZED: Uses pre-sorted nodes and batch rendering when possible
+   */
+  renderNodesWithLabelsAtomically(ctx, sortedNodes) {
+    if (sortedNodes.length === 0) return;
+    try {
+      for (const node of sortedNodes) {
+        if (this.renderNodes) {
+          this.renderNodes(ctx, [node]);
+        }
+        if (this.renderNodeLabels) {
+          this.renderNodeLabels(ctx, [node]);
+        }
+      }
+    } catch (error) {
+      ErrorHandler.logError(error, { nodeCount: sortedNodes.length });
+    }
+  }
+  // Static type order for performance (avoid object creation in hot path)
+  static TYPE_ORDER = {
+    "Server": 1,
+    "Database": 2,
+    "Service": 3,
+    "Client": 4,
+    "Gateway": 5
+  };
+  /**
+   * Sort nodes for consistent sub-layer ordering within the same layer
+   * OPTIMIZED: Reduced object allocations and string operations
+   */
+  sortNodesForSubLayering(nodes) {
+    if (nodes.length <= 1) return [...nodes];
+    return [...nodes].sort((a2, b) => {
+      const aPriority = _OptimizedZIndexRenderer.TYPE_ORDER[a2.type] ?? 999;
+      const bPriority = _OptimizedZIndexRenderer.TYPE_ORDER[b.type] ?? 999;
+      if (aPriority !== bPriority) return aPriority - bPriority;
+      const aRadius = a2.style?.radius ?? 20;
+      const bRadius = b.style?.radius ?? 20;
+      if (aRadius !== bRadius) return bRadius - aRadius;
+      const aY = a2.y ?? 0;
+      const bY = b.y ?? 0;
+      if (aY !== bY) return aY - bY;
+      const aX = a2.x ?? 0;
+      const bX = b.x ?? 0;
+      if (aX !== bX) return aX - bX;
+      return a2.id < b.id ? -1 : a2.id > b.id ? 1 : 0;
+    });
+  }
+  /**
+   * Optimized link label rendering with visibility rules
+   */
+  renderLinkLabels(ctx, links) {
+    if (!this.styleResolver) return;
+    for (const link of links) {
+      if (!link.label) continue;
+      try {
+        const style = this.styleResolver.resolveLinkStyle({
+          link,
+          isHovered: this.isLinkHovered(link),
+          isSelected: this.isLinkSelected(link)
+        });
+        if (!this.shouldShowLinkLabel(style.label || null, link)) continue;
+        const midpoint = this.getLinkMidpoint(link);
+        if (midpoint) {
+          this.renderSingleLinkLabel(ctx, link.label, midpoint.x, midpoint.y, style.label);
+        }
+      } catch (error) {
+        ErrorHandler.logError(error, { linkId: this.getLinkId(link) });
+      }
+    }
+  }
+  /**
+   * Visibility logic for link labels (matches requirements)
+   */
+  shouldShowLinkLabel(labelStyle, link) {
+    if (!labelStyle?.enabled) return false;
+    const isHovered = this.isLinkHovered(link);
+    const isSelected = this.isLinkSelected(link);
+    if (isSelected) return true;
+    switch (labelStyle.visibility) {
+      case "always":
+        return true;
+      case "hover":
+        return isHovered;
+      case "selection":
+        return isSelected;
+      // Already handled above
+      default:
+        return true;
+    }
+  }
+  /**
+   * Render a single link label at given coordinates
+   */
+  renderSingleLinkLabel(ctx, text, x3, y3, style) {
+    try {
+      ctx.font = style.font ?? "10px Arial";
+      const metrics = ctx.measureText(text);
+      const textWidth = metrics.width;
+      const textHeight = (metrics.actualBoundingBoxAscent || 10) + (metrics.actualBoundingBoxDescent || 4);
+      const rectWidth = textWidth + (style.paddingX ?? 8) * 2;
+      const rectHeight = textHeight + (style.paddingY ?? 4) * 2;
+      const rectX = x3 - rectWidth / 2;
+      const rectY = y3 - rectHeight / 2;
+      if (style.backgroundColor && style.backgroundColor !== "transparent") {
+        ctx.fillStyle = style.backgroundColor;
+        this.roundRect(ctx, rectX, rectY, rectWidth, rectHeight, style.borderRadius ?? 4);
+        ctx.fill();
+      }
+      if ((style.borderWidth ?? 0) > 0 && style.borderColor && style.borderColor !== "transparent") {
+        ctx.strokeStyle = style.borderColor;
+        ctx.lineWidth = style.borderWidth ?? 1;
+        this.roundRect(ctx, rectX, rectY, rectWidth, rectHeight, style.borderRadius ?? 4);
+        ctx.stroke();
+      }
+      ctx.fillStyle = style.textColor ?? "#000000";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, x3, y3);
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+  /**
+   * Helper to draw rounded rectangle
+   */
+  roundRect(ctx, x3, y3, width, height, radius) {
+    if (radius === 0) {
+      ctx.rect(x3, y3, width, height);
+      return;
+    }
+    ctx.beginPath();
+    ctx.moveTo(x3 + radius, y3);
+    ctx.lineTo(x3 + width - radius, y3);
+    ctx.quadraticCurveTo(x3 + width, y3, x3 + width, y3 + radius);
+    ctx.lineTo(x3 + width, y3 + height - radius);
+    ctx.quadraticCurveTo(x3 + width, y3 + height, x3 + width - radius, y3 + height);
+    ctx.lineTo(x3 + radius, y3 + height);
+    ctx.quadraticCurveTo(x3, y3 + height, x3, y3 + height - radius);
+    ctx.lineTo(x3, y3 + radius);
+    ctx.quadraticCurveTo(x3, y3, x3 + radius, y3);
+    ctx.closePath();
+  }
+  /**
+   * Update configuration and rebuild adjacency maps
+   */
+  updateConfig(config) {
+    this.config = config;
+    this.buildAdjacencyMaps();
+    this.sortedBackgroundNodes.length = 0;
+    this.sortedForegroundNodes.length = 0;
+  }
+  /**
+   * Destroy and clean up resources
+   */
+  destroy() {
+    this.config = void 0;
+    this.styleResolver = void 0;
+    this.nodeToLinksMap.clear();
+    this.linkToNodesMap.clear();
+    this.clearReusableArrays();
+  }
+};
+
+// src/v2/rendering/zoom-renderer.ts
+var ZoomRenderer = class {
+  config;
+  stateManager;
+  isZooming = false;
+  // Fast zoom cache for O(1) lookups - everything pre-computed
+  fastZoomNodeCache = /* @__PURE__ */ new Map();
+  /**
+   * Initialize zoom renderer
+   */
+  initialize(config) {
+    this.config = config;
+    this.stateManager = config.stateManager;
+    this.buildFastZoomCache();
+  }
+  /**
+   * Render with zoom optimization
+   */
+  render(ctx, zIndexRenderer) {
+    if (!this.config) return;
+    if (this.isZooming) {
+      this.renderFastZoom(ctx);
+    } else {
+      zIndexRenderer.render(ctx);
+    }
+  }
+  /**
+   * Fast rendering during zoom (O(1) cached properties)
+   */
+  renderFastZoom(ctx) {
+    if (!this.config) return;
+    const { nodes, links } = this.config;
+    ctx.strokeStyle = "#999";
+    ctx.lineWidth = 1;
+    for (const link of links) {
+      const sourceNode = typeof link.source === "string" ? this.stateManager.getNode(link.source) : link.source;
+      const targetNode = typeof link.target === "string" ? this.stateManager.getNode(link.target) : link.target;
+      if (sourceNode && targetNode && sourceNode.x && sourceNode.y && targetNode.x && targetNode.y) {
+        ctx.beginPath();
+        ctx.moveTo(sourceNode.x, sourceNode.y);
+        ctx.lineTo(targetNode.x, targetNode.y);
+        ctx.stroke();
+      }
+    }
+    for (const node of nodes) {
+      if (!node.x || !node.y) continue;
+      const cachedProps = this.fastZoomNodeCache.get(node.id);
+      if (!cachedProps) continue;
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, cachedProps.radius, 0, 2 * Math.PI);
+      ctx.fillStyle = cachedProps.fill;
+      ctx.fill();
+    }
+    this.renderFastZoomLabels(ctx);
+  }
+  /**
+   * Render pre-computed node labels during zoom (true O(1) lookups)
+   */
+  renderFastZoomLabels(ctx) {
+    if (!this.config) return;
+    const { nodes } = this.config;
+    ctx.font = "9px Arial";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    for (const node of nodes) {
+      if (!node.x || !node.y) continue;
+      const cachedProps = this.fastZoomNodeCache.get(node.id);
+      if (!cachedProps?.truncatedLabel) continue;
+      ctx.fillStyle = cachedProps.textColor;
+      ctx.fillText(cachedProps.truncatedLabel, node.x, node.y);
+    }
+  }
+  /**
+   * Build fast zoom cache with pre-computed properties for true O(1) performance
+   */
+  buildFastZoomCache() {
+    if (!this.config) return;
+    try {
+      this.fastZoomNodeCache.clear();
+      const tempCanvas = document.createElement("canvas");
+      const tempCtx = tempCanvas.getContext("2d");
+      if (!tempCtx) return;
+      tempCtx.font = "9px Arial";
+      for (const node of this.config.nodes) {
+        const nodeStyle = this.config.styleResolver.resolveNodeStyle({
+          node,
+          isHovered: false,
+          isSelected: false
+        });
+        const label = node.label || node.id;
+        const maxWidth = nodeStyle.radius * 2 - 6;
+        const truncatedLabel = this.preComputeTruncatedLabel(tempCtx, label, maxWidth);
+        const textColor = nodeStyle.label?.textColor || "#ffffff";
+        this.fastZoomNodeCache.set(node.id, {
+          radius: nodeStyle.radius,
+          fill: nodeStyle.fill,
+          truncatedLabel,
+          textColor
+        });
+      }
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+  /**
+   * Pre-compute truncated label (called only during cache build)
+   */
+  preComputeTruncatedLabel(ctx, label, maxWidth) {
+    if (ctx.measureText(label).width <= maxWidth) {
+      return label;
+    }
+    let truncated = label;
+    while (truncated.length > 1 && ctx.measureText(`${truncated}\u2026`).width > maxWidth) {
+      truncated = truncated.slice(0, -1);
+    }
+    return truncated.length < label.length ? `${truncated}\u2026` : truncated;
+  }
+  /**
+   * Set zoom state for performance optimization
+   */
+  setZoomState(isZooming) {
+    this.isZooming = isZooming;
+  }
+  /**
+   * Get current zoom state
+   */
+  getZoomState() {
+    return this.isZooming;
+  }
+  /**
+   * Update configuration and rebuild cache
+   */
+  updateConfig(updates) {
+    if (this.config) {
+      Object.assign(this.config, updates);
+      this.buildFastZoomCache();
+    }
+  }
+  /**
+   * Get performance stats
+   */
+  getStats() {
+    return {
+      cachedNodeProperties: this.fastZoomNodeCache.size,
+      isZooming: this.isZooming
+    };
+  }
+  /**
+   * Destroy and clean up
+   */
+  destroy() {
+    this.config = void 0;
+    this.stateManager = void 0;
+    this.fastZoomNodeCache.clear();
+    this.isZooming = false;
+  }
+};
+
 // src/v2/rendering/link-labels-renderer.ts
 var LinkLabelsRenderer = class {
   static textMetricsCache = /* @__PURE__ */ new Map();
@@ -6666,107 +7504,30 @@ var LinkLabelsRenderer = class {
   }
 };
 
-// src/v2/rendering/renderer.ts
-var Renderer = class {
+// src/v2/rendering/hit-detection-renderer.ts
+var HitDetectionRenderer = class {
   config;
-  canvasState;
-  hoverManager;
-  selectionManager;
-  styleResolver;
-  // Performance optimization: O(1) node lookups
-  nodeMap = /* @__PURE__ */ new Map();
-  // Shadow canvas optimization (Step 6 optimization)
+  stateManager;
+  // Shadow canvas optimization (throttling)
   shadowCanvasDirty = true;
   lastShadowRenderTime = 0;
   SHADOW_RENDER_THROTTLE = 32;
   // ~30 FPS max for shadow canvas
-  // Large graph optimization flag
-  hasLoggedLargeGraphOptimization = false;
-  // Performance metrics
-  performanceMetrics = {
-    renderTotal: 0,
-    renderNodes: 0,
-    renderLinks: 0,
-    renderLinkLabels: 0,
-    renderNodeLabels: 0,
-    styleResolution: 0,
-    hoverChecks: 0,
-    canvasCalls: 0,
-    frameCount: 0
-  };
-  // Force-graph pattern: configurable link hover precision
-  linkHoverPrecision = 4;
-  // Default 4px like force-graph
   /**
-   * Initialize the renderer
+   * Initialize hit detection renderer
    */
-  initialize(config, canvasState, hoverManager, selectionManager) {
+  initialize(config) {
+    this.config = config;
+    this.stateManager = config.stateManager;
+  }
+  /**
+   * Render shadow canvas for hit detection with throttling
+   */
+  renderShadowCanvas() {
+    if (!this.config) return;
+    const now2 = Date.now();
     try {
-      this.config = config;
-      this.canvasState = canvasState;
-      this.hoverManager = hoverManager;
-      this.selectionManager = selectionManager;
-      this.styleResolver = createStyleResolver(config.interaction);
-      this.buildNodeIndex();
-    } catch (error) {
-      ErrorHandler.logError(error, {
-        nodeCount: config.nodes.length,
-        linkCount: config.links.length
-      });
-      throw error;
-    }
-  }
-  /**
-   * Main render method with performance metrics (Instrumented)
-   */
-  render() {
-    if (!this.config || !this.canvasState) {
-      throw new RenderError("Renderer not initialized");
-    }
-    const startTime = performance.now();
-    this.performanceMetrics.frameCount++;
-    try {
-      const { ctx } = this.canvasState;
-      this.clearCanvas(ctx);
-      this.renderWithLayersAndMetrics(ctx);
-      this.markShadowCanvasDirty();
-      this.performanceMetrics.renderTotal += performance.now() - startTime;
-      if (this.performanceMetrics.frameCount % 100 === 0) {
-        this.logPerformanceMetrics();
-      }
-    } catch (error) {
-      ErrorHandler.logError(error);
-      throw new RenderError("Failed to render graph", {
-        nodeCount: this.config.nodes.length,
-        linkCount: this.config.links.length,
-        originalError: error.message
-      });
-    }
-  }
-  /**
-   * Render with transform (called during zoom/pan) with shadow canvas dirty marking (Step 6 optimization)
-   */
-  renderWithTransform() {
-    if (!this.canvasState) return;
-    try {
-      const { canvas, ctx } = this.canvasState;
-      const transform2 = transform(canvas);
-      this.clearCanvas(ctx);
-      this.applyTransform(transform2, ctx);
-      this.renderWithLayers(ctx);
-      this.markShadowCanvasDirty();
-    } catch (error) {
-      ErrorHandler.logError(error);
-    }
-  }
-  /**
-   * Render shadow canvas for hit detection with throttling (Step 6 optimization)
-   */
-  renderShadowCanvas() {
-    if (!this.canvasState || !this.config) return;
-    const now2 = Date.now();
-    try {
-      const { shadowCtx, canvas } = this.canvasState;
+      const { shadowCtx, canvas } = this.config;
       const transform2 = transform(canvas);
       this.clearCanvas(shadowCtx);
       this.applyTransform(transform2, shadowCtx);
@@ -6780,13 +7541,13 @@ var Renderer = class {
     }
   }
   /**
-   * Mark shadow canvas as dirty for next render (Step 6 optimization)
+   * Mark shadow canvas as dirty for next render
    */
   markShadowCanvasDirty() {
     this.shadowCanvasDirty = true;
   }
   /**
-   * Force shadow canvas render (Step 6 optimization)
+   * Force shadow canvas render
    */
   forceShadowCanvasRender() {
     this.shadowCanvasDirty = true;
@@ -6794,96 +7555,53 @@ var Renderer = class {
     this.renderShadowCanvas();
   }
   /**
-   * Clear canvas context
+   * Clear shadow canvas context
    */
   clearCanvas(ctx) {
-    if (!this.canvasState) return;
+    if (!this.config) return;
     try {
-      const { width, height } = this.canvasState;
+      const { canvas } = this.config;
+      const { width, height } = canvas;
       CanvasUtils.resetTransform(ctx);
       ctx.clearRect(0, 0, width, height);
-    } catch {
-      throw new RenderError("Failed to clear canvas");
+    } catch (error) {
+      ErrorHandler.logError(error, { message: "Failed to clear shadow canvas" });
     }
   }
   /**
-   * Apply transform to canvas context
+   * Apply transform to shadow canvas context
    */
   applyTransform(transform2, ctx) {
     try {
       CanvasUtils.resetTransform(ctx);
       ctx.translate(transform2.x, transform2.y);
       ctx.scale(transform2.k, transform2.k);
-    } catch {
-      throw new RenderError("Failed to apply transform");
-    }
-  }
-  /**
-   * Get unique link ID for tracking (consistent with LinkLabelsRenderer)
-   */
-  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}`;
-  }
-  /**
-   * Render main canvas nodes
-   */
-  renderNodes(ctx) {
-    if (!this.config || !this.styleResolver) return;
-    try {
-      const { nodes } = this.config;
-      NodesRenderer.renderWithStyleResolver(
-        ctx,
-        nodes,
-        this.styleResolver,
-        (nodeId) => this.isNodeHovered(nodeId),
-        (nodeId) => this.isNodeSelected(nodeId),
-        this.performanceMetrics
-      );
-    } catch (error) {
-      ErrorHandler.logError(error);
-      throw new RenderError("Failed to render nodes");
-    }
-  }
-  /**
-   * Render node labels
-   */
-  renderNodeLabels(ctx) {
-    if (!this.config || !this.styleResolver) return;
-    try {
-      const { nodes } = this.config;
-      const defaultNodeStyle = this.styleResolver.resolveNodeStyle({
-        node: { id: "temp" }
-      });
-      NodeLabelsRenderer.render(ctx, nodes, defaultNodeStyle.radius);
     } catch (error) {
-      ErrorHandler.logError(error);
-      throw new RenderError("Failed to render node labels");
+      ErrorHandler.logError(error, { message: "Failed to apply transform to shadow canvas" });
     }
   }
   /**
-   * Render shadow links with __indexColor (force-graph pattern)
+   * Render shadow links with __indexColor for hit detection
    */
   renderShadowLinks(shadowCtx) {
-    if (!this.config || !this.styleResolver) return;
+    if (!this.config) return;
     try {
-      const { links } = this.config;
-      const defaultLinkStyle = this.styleResolver.resolveLinkStyle({
+      const { links, stateManager, styleResolver, linkHoverPrecision = 4 } = this.config;
+      const defaultLinkStyle = styleResolver.resolveLinkStyle({
         link: { source: "", target: "" }
       });
       for (const link of links) {
         if (!link.__indexColor) continue;
-        const sourceNode = typeof link.source === "string" ? this.nodeMap.get(link.source) : link.source;
-        const targetNode = typeof link.target === "string" ? this.nodeMap.get(link.target) : link.target;
-        if (sourceNode && targetNode && sourceNode.x && sourceNode.y && targetNode.x && targetNode.y && link.__indexColorRGB) {
+        const sourceNode = typeof link.source === "string" ? stateManager.getNode(link.source) : link.source;
+        const targetNode = typeof link.target === "string" ? stateManager.getNode(link.target) : link.target;
+        if (sourceNode && targetNode && sourceNode.x != null && sourceNode.y != null && targetNode.x != null && targetNode.y != null && link.__indexColorRGB) {
           const [r, g, b] = link.__indexColorRGB;
           const rgbColor = `rgb(${r},${g},${b})`;
           const dx = targetNode.x - sourceNode.x;
           const dy = targetNode.y - sourceNode.y;
           const length = Math.sqrt(dx * dx + dy * dy);
           const angle = Math.atan2(dy, dx);
-          const thickness = defaultLinkStyle.strokeWidth + this.linkHoverPrecision;
+          const thickness = defaultLinkStyle.strokeWidth + linkHoverPrecision;
           shadowCtx.save();
           shadowCtx.translate(sourceNode.x, sourceNode.y);
           shadowCtx.rotate(angle);
@@ -6900,27 +7618,30 @@ var Renderer = class {
    * Render shadow link labels for hit detection
    */
   renderShadowLinkLabels(shadowCtx) {
-    if (!this.config || !this.styleResolver) return;
+    if (!this.config) return;
     try {
+      const { links, styleResolver } = this.config;
       const linkStateCache = /* @__PURE__ */ new Map();
       const linkIdToLinkMap = /* @__PURE__ */ new Map();
-      for (const link of this.config.links) {
+      for (const link of links) {
         const linkId = this.getLinkId(link);
         linkIdToLinkMap.set(linkId, link);
       }
       const labelPositions = LinkLabelsRenderer.calculateLabelPositions(
-        this.config.links,
+        links,
         (link) => {
           const linkId = this.getLinkId(link);
           let linkState = linkStateCache.get(linkId);
           if (!linkState) {
             linkState = {
-              isHovered: this.isLinkHovered(link),
-              isSelected: this.isLinkSelected(link)
+              isHovered: false,
+              // For hit detection, we don't need actual hover state
+              isSelected: false
+              // For hit detection, we don't need actual selection state
             };
             linkStateCache.set(linkId, linkState);
           }
-          const style = this.styleResolver.resolveLinkStyle({
+          const style = styleResolver.resolveLinkStyle({
             link,
             isHovered: linkState.isHovered,
             isSelected: linkState.isSelected
@@ -6928,34 +7649,10 @@ var Renderer = class {
           return style.label || null;
         },
         (link) => this.getLinkMidpoint(link),
-        (linkId) => {
-          let linkState = linkStateCache.get(linkId);
-          if (!linkState) {
-            const link = linkIdToLinkMap.get(linkId);
-            if (link) {
-              linkState = {
-                isHovered: this.isLinkHovered(link),
-                isSelected: this.isLinkSelected(link)
-              };
-              linkStateCache.set(linkId, linkState);
-            }
-          }
-          return linkState?.isHovered || false;
-        },
-        (linkId) => {
-          let linkState = linkStateCache.get(linkId);
-          if (!linkState) {
-            const link = linkIdToLinkMap.get(linkId);
-            if (link) {
-              linkState = {
-                isHovered: this.isLinkHovered(link),
-                isSelected: this.isLinkSelected(link)
-              };
-              linkStateCache.set(linkId, linkState);
-            }
-          }
-          return linkState?.isSelected || false;
-        }
+        (_linkId) => false,
+        // isHovered - not needed for hit detection
+        (_linkId) => false
+        // isSelected - not needed for hit detection
       );
       for (const [linkId, position] of labelPositions) {
         const link = linkIdToLinkMap.get(linkId);
@@ -6971,13 +7668,13 @@ var Renderer = class {
     }
   }
   /**
-   * Render shadow nodes with __indexColor (force-graph pattern)
+   * Render shadow nodes with __indexColor for hit detection
    */
   renderShadowNodes(shadowCtx) {
-    if (!this.config || !this.styleResolver) return;
+    if (!this.config) return;
     try {
-      const { nodes } = this.config;
-      const defaultNodeStyle = this.styleResolver.resolveNodeStyle({
+      const { nodes, styleResolver } = this.config;
+      const defaultNodeStyle = styleResolver.resolveNodeStyle({
         node: { id: "temp" }
       });
       NodesRenderer.renderShadow(
@@ -6990,68 +7687,98 @@ var Renderer = class {
     }
   }
   /**
-   * Get currently hovered node ID directly (Critical Performance Fix)
+   * Get unique link ID for tracking (delegates to StateManager)
    */
-  getCurrentlyHoveredNodeId() {
-    if (!this.hoverManager) return null;
-    const hoverState = this.hoverManager.getHoverState();
-    if (!hoverState.currentHovered || hoverState.currentHovered.d.entityType !== "Node") {
-      return null;
-    }
-    const hoveredNode = hoverState.currentHovered.d;
-    return hoveredNode ? hoveredNode.id : null;
+  getLinkId(link) {
+    return this.stateManager.getLinkId(link);
   }
   /**
-   * Get currently selected node ID directly (Critical Performance Fix)
+   * Calculate midpoint of a link for label positioning (delegates to StateManager)
    */
-  getCurrentlySelectedNodeId() {
-    if (!this.selectionManager) return null;
-    const selectionState = this.selectionManager.getSelectionState();
-    return selectionState.selectedNode?.id || null;
+  getLinkMidpoint(link) {
+    return this.stateManager.getLinkMidpoint(link);
   }
   /**
-   * Get currently hovered link (Critical Performance Fix)
+   * Update configuration
    */
-  getCurrentlyHoveredLink() {
-    if (!this.hoverManager) return null;
-    const hoverState = this.hoverManager.getHoverState();
-    if (!hoverState.currentHovered || hoverState.currentHovered.d.entityType !== "Link") {
-      return null;
+  updateConfig(updates) {
+    if (this.config) {
+      Object.assign(this.config, updates);
     }
-    return hoverState.currentHovered.d;
   }
   /**
-   * Get currently selected link (Critical Performance Fix)
+   * Debug shadow canvas export
    */
-  getCurrentlySelectedLink() {
-    if (!this.selectionManager) return null;
-    const selectionState = this.selectionManager.getSelectionState();
-    return selectionState.selectedLink || null;
+  debugShadowCanvas() {
+    try {
+      if (!this.config) return;
+      const { shadowCtx } = this.config;
+      const shadowCanvas = shadowCtx.canvas;
+      const link = document.createElement("a");
+      link.download = "shadow-canvas-debug.png";
+      link.href = shadowCanvas.toDataURL("image/png");
+      link.click();
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
   }
   /**
-   * Log performance metrics for analysis
+   * Get hit detection stats
    */
-  logPerformanceMetrics() {
-    const frames = this.performanceMetrics.frameCount;
-    const nodeCount = this.config?.nodes.length || 0;
-    const linkCount = this.config?.links.length || 0;
-    console.log("\u{1F50D} PERFORMANCE METRICS (avg per frame over", frames, "frames):");
-    console.log("\u{1F4CA} Graph size:", nodeCount, "nodes,", linkCount, "links");
-    console.log("\u23F1\uFE0F  Total render:", (this.performanceMetrics.renderTotal / frames).toFixed(2), "ms");
-    console.log("\u{1F517} Links render:", (this.performanceMetrics.renderLinks / frames).toFixed(2), "ms");
-    console.log("\u{1F3F7}\uFE0F  Link labels:", (this.performanceMetrics.renderLinkLabels / frames).toFixed(2), "ms");
-    console.log("\u2B55 Nodes render:", (this.performanceMetrics.renderNodes / frames).toFixed(2), "ms");
-    console.log("\u{1F4DD} Node labels:", (this.performanceMetrics.renderNodeLabels / frames).toFixed(2), "ms");
-    console.log("\u{1F3A8} Style resolution:", (this.performanceMetrics.styleResolution / frames).toFixed(2), "ms");
-    console.log("\u{1F446} Hover checks:", (this.performanceMetrics.hoverChecks / frames).toFixed(2), "ms");
-    console.log("\u{1F5BC}\uFE0F  Canvas calls:", (this.performanceMetrics.canvasCalls / frames).toFixed(2), "ms");
-    console.log("---");
+  getStats() {
+    return {
+      shadowCanvasDirty: this.shadowCanvasDirty,
+      throttleRate: this.SHADOW_RENDER_THROTTLE,
+      lastRenderTime: this.lastShadowRenderTime
+    };
   }
   /**
-   * Reset performance metrics
+   * Destroy and clean up
    */
-  resetPerformanceMetrics() {
-    this.performanceMetrics = {
+  destroy() {
+    this.config = void 0;
+    this.stateManager = void 0;
+    this.shadowCanvasDirty = false;
+    this.lastShadowRenderTime = 0;
+  }
+};
+
+// src/v2/rendering/performance-metrics-manager.ts
+var PerformanceMetricsManager = class {
+  metrics = {
+    renderTotal: 0,
+    renderNodes: 0,
+    renderLinks: 0,
+    renderLinkLabels: 0,
+    renderNodeLabels: 0,
+    styleResolution: 0,
+    hoverChecks: 0,
+    canvasCalls: 0,
+    frameCount: 0
+  };
+  /**
+   * Increment frame count
+   */
+  incrementFrame() {
+    this.metrics.frameCount++;
+  }
+  /**
+   * Add timing for a specific metric
+   */
+  addTiming(metric, time) {
+    this.metrics[metric] += time;
+  }
+  /**
+   * Get current metrics (copy to prevent mutation)
+   */
+  getMetrics() {
+    return { ...this.metrics };
+  }
+  /**
+   * Reset all metrics
+   */
+  reset() {
+    this.metrics = {
       renderTotal: 0,
       renderNodes: 0,
       renderLinks: 0,
@@ -7064,69 +7791,204 @@ var Renderer = class {
     };
   }
   /**
-   * Get current performance metrics
-   */
-  getPerformanceMetrics() {
-    return { ...this.performanceMetrics };
-  }
-  /**
-   * Force log performance metrics immediately (for debugging)
+   * Log performance metrics for analysis
    */
-  forceLogMetrics() {
-    this.logPerformanceMetrics();
+  logMetrics(nodeCount, linkCount) {
+    const frames = this.metrics.frameCount;
+    console.log("\u{1F50D} PERFORMANCE METRICS (avg per frame over", frames, "frames):");
+    console.log("\u{1F4CA} Graph size:", nodeCount, "nodes,", linkCount, "links");
+    console.log("\u23F1\uFE0F  Total render:", (this.metrics.renderTotal / frames).toFixed(2), "ms");
+    console.log("\u{1F517} Links render:", (this.metrics.renderLinks / frames).toFixed(2), "ms");
+    console.log("\u{1F3F7}\uFE0F  Link labels:", (this.metrics.renderLinkLabels / frames).toFixed(2), "ms");
+    console.log("\u2B55 Nodes render:", (this.metrics.renderNodes / frames).toFixed(2), "ms");
+    console.log("\u{1F4DD} Node labels:", (this.metrics.renderNodeLabels / frames).toFixed(2), "ms");
+    console.log("\u{1F3A8} Style resolution:", (this.metrics.styleResolution / frames).toFixed(2), "ms");
+    console.log("\u{1F446} Hover checks:", (this.metrics.hoverChecks / frames).toFixed(2), "ms");
+    console.log("\u{1F5BC}\uFE0F  Canvas calls:", (this.metrics.canvasCalls / frames).toFixed(2), "ms");
+    console.log("---");
   }
   /**
-   * Check if a node is currently hovered
+   * Check if it's time to log metrics (every N frames)
    */
-  isNodeHovered(nodeId) {
-    if (!this.hoverManager) return false;
-    const hoverState = this.hoverManager.getHoverState();
-    if (!hoverState.currentHovered || hoverState.currentHovered.d.entityType !== "Node") {
-      return false;
-    }
-    const hoveredNode = hoverState.currentHovered.d;
-    return hoveredNode && hoveredNode.id === nodeId;
+  shouldLogMetrics(intervalFrames = 100) {
+    return this.metrics.frameCount % intervalFrames === 0 && this.metrics.frameCount > 0;
   }
+};
+
+// src/v2/rendering/link-renderer.ts
+var LinkRenderer = class {
   /**
-   * Check if a link is currently hovered (either directly or through associated node hover)
+   * Render a directed link with optional arrow head
    */
-  isLinkHovered(link) {
-    if (!this.hoverManager) return false;
-    const hoverState = this.hoverManager.getHoverState();
-    if (!hoverState.currentHovered) return false;
-    if (hoverState.currentHovered.d.entityType === "Link") {
-      const hoveredLink = hoverState.currentHovered.d;
-      if (!hoveredLink) return false;
-      const sourceId1 = typeof link.source === "string" ? link.source : link.source.id;
-      const targetId1 = typeof link.target === "string" ? link.target : link.target.id;
-      const sourceId2 = typeof hoveredLink.source === "string" ? hoveredLink.source : hoveredLink.source.id;
-      const targetId2 = typeof hoveredLink.target === "string" ? hoveredLink.target : hoveredLink.target.id;
-      return sourceId1 === sourceId2 && targetId1 === targetId2;
-    }
-    if (hoverState.currentHovered.d.entityType === "Node") {
-      const hoveredNode = hoverState.currentHovered.d;
-      if (!hoveredNode) return false;
-      const linkSourceId = typeof link.source === "string" ? link.source : link.source.id;
-      const linkTargetId = typeof link.target === "string" ? link.target : link.target.id;
-      return hoveredNode.id === linkSourceId || hoveredNode.id === linkTargetId;
+  static renderDirectedLink(ctx, source, target, style, styleResolver, isNodeHovered, isNodeSelected) {
+    try {
+      const sourcePoint = this.getShortenedSourcePoint(
+        source,
+        target,
+        style,
+        styleResolver,
+        isNodeHovered,
+        isNodeSelected
+      );
+      const targetPoint = this.getShortenedTargetPoint(
+        source,
+        target,
+        style,
+        styleResolver,
+        isNodeHovered,
+        isNodeSelected
+      );
+      ctx.strokeStyle = style.stroke;
+      ctx.lineWidth = style.strokeWidth;
+      ctx.globalAlpha = style.opacity;
+      ctx.beginPath();
+      ctx.moveTo(sourcePoint.x, sourcePoint.y);
+      ctx.lineTo(targetPoint.x, targetPoint.y);
+      ctx.stroke();
+      if (style.arrow?.enabled) {
+        this.renderArrow(ctx, sourcePoint, targetPoint, style.arrow);
+      }
+      ctx.globalAlpha = 1;
+    } catch (error) {
+      ErrorHandler.logError(error);
     }
-    return false;
   }
   /**
-   * Check if a node is currently selected
+   * V1-compatible link shortening for source point
    */
-  isNodeSelected(nodeId) {
-    if (!this.selectionManager) return false;
-    const selectionState = this.selectionManager.getSelectionState();
-    return selectionState.selectedNode?.id === nodeId;
+  static getShortenedSourcePoint(source, target, _style, styleResolver, isNodeHovered, isNodeSelected) {
+    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 sourceNodeStyle = styleResolver.resolveNodeStyle({
+      node: source,
+      isHovered: isNodeHovered(source.id),
+      isSelected: isNodeSelected(source.id)
+    });
+    const visualRadius = sourceNodeStyle.radius + sourceNodeStyle.strokeWidth / 2;
+    const offset = visualRadius + 1;
+    return {
+      x: sourceX + dx / distance * offset,
+      y: sourceY + dy / distance * offset
+    };
   }
   /**
-   * Check if a link is currently selected
+   * V1-compatible link shortening for target point
    */
-  isLinkSelected(link) {
-    if (!this.selectionManager) return false;
-    const selectionState = this.selectionManager.getSelectionState();
-    if (!selectionState.selectedLink) return false;
+  static getShortenedTargetPoint(source, target, style, styleResolver, isNodeHovered, isNodeSelected) {
+    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 targetNodeStyle = styleResolver.resolveNodeStyle({
+      node: target,
+      isHovered: isNodeHovered(target.id),
+      isSelected: isNodeSelected(target.id)
+    });
+    const visualRadius = targetNodeStyle.radius + targetNodeStyle.strokeWidth / 2;
+    const arrowLength = style.arrow?.enabled ? style.arrow.size ?? 4 : 0;
+    const offset = style.arrow?.enabled ? visualRadius + arrowLength : visualRadius + 1;
+    const shortenedPoint = {
+      x: targetX - dx / distance * offset,
+      y: targetY - dy / distance * offset
+    };
+    return shortenedPoint;
+  }
+  /**
+   * Render arrow head at specific points
+   */
+  static renderArrow(ctx, sourcePoint, targetPoint, arrowStyle) {
+    try {
+      const dx = targetPoint.x - sourcePoint.x;
+      const dy = targetPoint.y - sourcePoint.y;
+      const angle = Math.atan2(dy, dx);
+      const arrowLength = arrowStyle.size ?? 4;
+      const arrowTipX = targetPoint.x + arrowLength * Math.cos(angle);
+      const arrowTipY = targetPoint.y + arrowLength * Math.sin(angle);
+      const x1 = arrowTipX - arrowLength * Math.cos(angle - Math.PI / 6);
+      const y1 = arrowTipY - arrowLength * Math.sin(angle - Math.PI / 6);
+      const x22 = arrowTipX - arrowLength * Math.cos(angle + Math.PI / 6);
+      const y22 = arrowTipY - arrowLength * Math.sin(angle + Math.PI / 6);
+      ctx.fillStyle = arrowStyle.fill ?? "#000000";
+      ctx.beginPath();
+      ctx.moveTo(arrowTipX, arrowTipY);
+      ctx.lineTo(x1, y1);
+      ctx.lineTo(x22, y22);
+      ctx.closePath();
+      ctx.fill();
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+};
+
+// src/v2/rendering/interaction-state-resolver.ts
+var InteractionStateResolver = class {
+  constructor(hoverManager, selectionManager) {
+    this.hoverManager = hoverManager;
+    this.selectionManager = selectionManager;
+  }
+  hoverManager;
+  selectionManager;
+  /**
+   * Check if a node is currently hovered
+   */
+  isNodeHovered(nodeId) {
+    if (!this.hoverManager) return false;
+    const hoverState = this.hoverManager.getHoverState();
+    if (!hoverState.currentHovered || hoverState.currentHovered.d.entityType !== "Node") {
+      return false;
+    }
+    const hoveredNode = hoverState.currentHovered.d;
+    return hoveredNode && hoveredNode.id === nodeId;
+  }
+  /**
+   * Check if a link is currently hovered (either directly or through associated node hover)
+   */
+  isLinkHovered(link) {
+    if (!this.hoverManager) return false;
+    const hoverState = this.hoverManager.getHoverState();
+    if (!hoverState.currentHovered) return false;
+    if (hoverState.currentHovered.d.entityType === "Link") {
+      const hoveredLink = hoverState.currentHovered.d;
+      if (!hoveredLink) return false;
+      const sourceId1 = typeof link.source === "string" ? link.source : link.source.id;
+      const targetId1 = typeof link.target === "string" ? link.target : link.target.id;
+      const sourceId2 = typeof hoveredLink.source === "string" ? hoveredLink.source : hoveredLink.source.id;
+      const targetId2 = typeof hoveredLink.target === "string" ? hoveredLink.target : hoveredLink.target.id;
+      return sourceId1 === sourceId2 && targetId1 === targetId2;
+    }
+    if (hoverState.currentHovered.d.entityType === "Node") {
+      const hoveredNode = hoverState.currentHovered.d;
+      if (!hoveredNode) return false;
+      const linkSourceId = typeof link.source === "string" ? link.source : link.source.id;
+      const linkTargetId = typeof link.target === "string" ? link.target : link.target.id;
+      return hoveredNode.id === linkSourceId || hoveredNode.id === linkTargetId;
+    }
+    return false;
+  }
+  /**
+   * Check if a node is currently selected
+   */
+  isNodeSelected(nodeId) {
+    if (!this.selectionManager) return false;
+    const selectionState = this.selectionManager.getSelectionState();
+    return selectionState.selectedNode?.id === nodeId;
+  }
+  /**
+   * Check if a link is currently selected
+   */
+  isLinkSelected(link) {
+    if (!this.selectionManager) return false;
+    const selectionState = this.selectionManager.getSelectionState();
+    if (!selectionState.selectedLink) return false;
     const sourceId1 = typeof link.source === "string" ? link.source : link.source.id;
     const targetId1 = typeof link.target === "string" ? link.target : link.target.id;
     const selectedLink = selectionState.selectedLink;
@@ -7135,151 +7997,857 @@ var Renderer = class {
     return sourceId1 === sourceId2 && targetId1 === targetId2;
   }
   /**
-   * Check if a link's label should be visible due to selection
-   * (either the link itself is selected, or its connected node is selected)
+   * Get interaction state for a node (optimized for caching)
    */
-  shouldShowLinkLabelForSelection(link) {
-    if (!this.selectionManager) return false;
-    const selectionState = this.selectionManager.getSelectionState();
-    if (selectionState.selectedLink) {
-      const sourceId1 = typeof link.source === "string" ? link.source : link.source.id;
-      const targetId1 = typeof link.target === "string" ? link.target : link.target.id;
-      const selectedLink = selectionState.selectedLink;
-      const sourceId2 = typeof selectedLink.source === "string" ? selectedLink.source : selectedLink.source.id;
-      const targetId2 = typeof selectedLink.target === "string" ? selectedLink.target : selectedLink.target.id;
-      if (sourceId1 === sourceId2 && targetId1 === targetId2) {
-        return true;
+  getNodeState(nodeId) {
+    return {
+      isHovered: this.isNodeHovered(nodeId),
+      isSelected: this.isNodeSelected(nodeId)
+    };
+  }
+  /**
+   * Get interaction state for a link (optimized for caching)
+   */
+  getLinkState(link) {
+    return {
+      isHovered: this.isLinkHovered(link),
+      isSelected: this.isLinkSelected(link)
+    };
+  }
+  /**
+   * Create callback functions for external use (useful for renderers)
+   */
+  createCallbacks() {
+    return {
+      isNodeHovered: (nodeId) => this.isNodeHovered(nodeId),
+      isNodeSelected: (nodeId) => this.isNodeSelected(nodeId),
+      isLinkHovered: (link) => this.isLinkHovered(link),
+      isLinkSelected: (link) => this.isLinkSelected(link)
+    };
+  }
+  /**
+   * Update the managers (useful for re-initialization)
+   */
+  updateManagers(hoverManager, selectionManager) {
+    this.hoverManager = hoverManager;
+    this.selectionManager = selectionManager;
+  }
+};
+
+// src/v2/utils/object-pool.ts
+var ObjectPool = class {
+  pool = [];
+  createFn;
+  resetFn;
+  maxSize;
+  constructor(createFn, resetFn, maxSize = 1e3) {
+    this.createFn = createFn;
+    this.resetFn = resetFn;
+    this.maxSize = maxSize;
+  }
+  /**
+   * Get object from pool or create new one
+   */
+  acquire() {
+    const obj = this.pool.pop();
+    if (obj) {
+      if (this.resetFn) {
+        this.resetFn(obj);
+      } else if (obj.reset) {
+        obj.reset();
       }
+      return obj;
     }
-    if (selectionState.selectedNode) {
-      const selectedNode = selectionState.selectedNode;
-      const linkSourceId = typeof link.source === "string" ? link.source : link.source.id;
-      const linkTargetId = typeof link.target === "string" ? link.target : link.target.id;
-      return selectedNode.id === linkSourceId || selectedNode.id === linkTargetId;
+    return this.createFn();
+  }
+  /**
+   * Return object to pool for reuse
+   */
+  release(obj) {
+    if (this.pool.length < this.maxSize) {
+      this.pool.push(obj);
     }
-    return false;
   }
   /**
-   * Calculate midpoint of a link for label positioning
+   * Pre-warm pool with initial objects
    */
-  getLinkMidpoint(link) {
-    if (!this.config) return null;
-    const sourceNode = typeof link.source === "string" ? this.nodeMap.get(link.source) : link.source;
-    const targetNode = typeof link.target === "string" ? this.nodeMap.get(link.target) : link.target;
-    if (!sourceNode || !targetNode || sourceNode.x === void 0 || sourceNode.y === void 0 || targetNode.x === void 0 || targetNode.y === void 0) {
-      return null;
+  prewarm(count) {
+    for (let i = 0; i < count; i++) {
+      this.pool.push(this.createFn());
     }
+  }
+  /**
+   * Get pool statistics
+   */
+  getStats() {
     return {
-      x: (sourceNode.x + targetNode.x) / 2,
-      y: (sourceNode.y + targetNode.y) / 2
+      available: this.pool.length,
+      maxSize: this.maxSize,
+      utilization: (this.maxSize - this.pool.length) / this.maxSize
     };
   }
   /**
-   * Render directed link with arrow head
+   * Clear the pool
+   */
+  clear() {
+    this.pool.length = 0;
+  }
+};
+var DragObjectPoolManager = class {
+  vector2DPool;
+  nodeStatePool;
+  linkStatePool;
+  renderContextPool;
+  // Pre-allocated arrays to avoid GC during drag
+  reusableNodeArray = [];
+  reusableLinkArray = [];
+  reusableVector2DArray = [];
+  constructor() {
+    this.vector2DPool = new ObjectPool(
+      () => ({ x: 0, y: 0, reset() {
+        this.x = 0;
+        this.y = 0;
+      } }),
+      (obj) => {
+        obj.x = 0;
+        obj.y = 0;
+      },
+      500
+    );
+    this.nodeStatePool = new ObjectPool(
+      () => ({
+        id: "",
+        x: 0,
+        y: 0,
+        isHovered: false,
+        isSelected: false,
+        reset() {
+          this.id = "";
+          this.x = 0;
+          this.y = 0;
+          this.isHovered = false;
+          this.isSelected = false;
+        }
+      }),
+      (obj) => {
+        obj.id = "";
+        obj.x = 0;
+        obj.y = 0;
+        obj.isHovered = false;
+        obj.isSelected = false;
+      },
+      1e3
+    );
+    this.linkStatePool = new ObjectPool(
+      () => ({
+        sourceId: "",
+        targetId: "",
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 0,
+        targetY: 0,
+        isHovered: false,
+        isSelected: false,
+        reset() {
+          this.sourceId = "";
+          this.targetId = "";
+          this.sourceX = 0;
+          this.sourceY = 0;
+          this.targetX = 0;
+          this.targetY = 0;
+          this.isHovered = false;
+          this.isSelected = false;
+        }
+      }),
+      (obj) => {
+        obj.sourceId = "";
+        obj.targetId = "";
+        obj.sourceX = 0;
+        obj.sourceY = 0;
+        obj.targetX = 0;
+        obj.targetY = 0;
+        obj.isHovered = false;
+        obj.isSelected = false;
+      },
+      2e3
+    );
+    this.renderContextPool = new ObjectPool(
+      () => ({
+        nodeStates: /* @__PURE__ */ new Map(),
+        linkStates: /* @__PURE__ */ new Map(),
+        tempVectors: [],
+        reset() {
+          this.nodeStates.clear();
+          this.linkStates.clear();
+          this.tempVectors.length = 0;
+        }
+      }),
+      (obj) => {
+        obj.nodeStates.clear();
+        obj.linkStates.clear();
+        obj.tempVectors.length = 0;
+      },
+      10
+    );
+    this.prewarmPools();
+  }
+  /**
+   * Pre-warm pools with initial objects
+   */
+  prewarmPools() {
+    this.vector2DPool.prewarm(50);
+    this.nodeStatePool.prewarm(100);
+    this.linkStatePool.prewarm(200);
+    this.renderContextPool.prewarm(2);
+  }
+  /**
+   * Acquire temporary 2D vector
+   */
+  acquireVector2D(x3 = 0, y3 = 0) {
+    const vector = this.vector2DPool.acquire();
+    vector.x = x3;
+    vector.y = y3;
+    return vector;
+  }
+  /**
+   * Release 2D vector back to pool
    */
-  renderDirectedLink(ctx, source, target, style) {
+  releaseVector2D(vector) {
+    this.vector2DPool.release(vector);
+  }
+  /**
+   * Acquire node state object
+   */
+  acquireNodeState(id2, x3, y3, isHovered = false, isSelected = false) {
+    const state = this.nodeStatePool.acquire();
+    state.id = id2;
+    state.x = x3;
+    state.y = y3;
+    state.isHovered = isHovered;
+    state.isSelected = isSelected;
+    return state;
+  }
+  /**
+   * Release node state back to pool
+   */
+  releaseNodeState(state) {
+    this.nodeStatePool.release(state);
+  }
+  /**
+   * Acquire link state object
+   */
+  acquireLinkState(sourceId, targetId, sourceX, sourceY, targetX, targetY, isHovered = false, isSelected = false) {
+    const state = this.linkStatePool.acquire();
+    state.sourceId = sourceId;
+    state.targetId = targetId;
+    state.sourceX = sourceX;
+    state.sourceY = sourceY;
+    state.targetX = targetX;
+    state.targetY = targetY;
+    state.isHovered = isHovered;
+    state.isSelected = isSelected;
+    return state;
+  }
+  /**
+   * Release link state back to pool
+   */
+  releaseLinkState(state) {
+    this.linkStatePool.release(state);
+  }
+  /**
+   * Acquire render context
+   */
+  acquireRenderContext() {
+    return this.renderContextPool.acquire();
+  }
+  /**
+   * Release render context back to pool
+   */
+  releaseRenderContext(context) {
+    this.renderContextPool.release(context);
+  }
+  /**
+   * Get reusable node array (cleared and ready for use)
+   */
+  getReusableNodeArray() {
+    this.reusableNodeArray.length = 0;
+    return this.reusableNodeArray;
+  }
+  /**
+   * Get reusable link array (cleared and ready for use)
+   */
+  getReusableLinkArray() {
+    this.reusableLinkArray.length = 0;
+    return this.reusableLinkArray;
+  }
+  /**
+   * Get reusable vector array (cleared and ready for use)
+   */
+  getReusableVector2DArray() {
+    this.reusableVector2DArray.length = 0;
+    return this.reusableVector2DArray;
+  }
+  /**
+   * Batch acquire multiple vectors
+   */
+  batchAcquireVectors(count) {
+    const vectors = this.getReusableVector2DArray();
+    for (let i = 0; i < count; i++) {
+      vectors.push(this.acquireVector2D());
+    }
+    return vectors;
+  }
+  /**
+   * Batch release multiple vectors
+   */
+  batchReleaseVectors(vectors) {
+    for (const vector of vectors) {
+      this.releaseVector2D(vector);
+    }
+  }
+  /**
+   * Get comprehensive pool statistics
+   */
+  getStats() {
+    const vector2DStats = this.vector2DPool.getStats();
+    const nodeStateStats = this.nodeStatePool.getStats();
+    const linkStateStats = this.linkStatePool.getStats();
+    const renderContextStats = this.renderContextPool.getStats();
+    const vector2DBytes = vector2DStats.maxSize * (2 * 8);
+    const nodeStateBytes = nodeStateStats.maxSize * (32 + 2 * 8 + 2 * 1);
+    const linkStateBytes = linkStateStats.maxSize * (64 + 4 * 8 + 2 * 1);
+    return {
+      vector2D: vector2DStats,
+      nodeState: nodeStateStats,
+      linkState: linkStateStats,
+      renderContext: renderContextStats,
+      memoryEstimate: {
+        vector2DBytes,
+        nodeStateBytes,
+        linkStateBytes,
+        totalBytes: vector2DBytes + nodeStateBytes + linkStateBytes
+      }
+    };
+  }
+  /**
+   * Force garbage collection optimization by clearing and re-prewarming pools
+   */
+  optimizeMemory() {
+    this.vector2DPool.clear();
+    this.nodeStatePool.clear();
+    this.linkStatePool.clear();
+    this.renderContextPool.clear();
+    this.reusableNodeArray.length = 0;
+    this.reusableLinkArray.length = 0;
+    this.reusableVector2DArray.length = 0;
+    this.prewarmPools();
+  }
+  /**
+   * Destroy and clean up all pools
+   */
+  destroy() {
+    this.vector2DPool.clear();
+    this.nodeStatePool.clear();
+    this.linkStatePool.clear();
+    this.renderContextPool.clear();
+    this.reusableNodeArray.length = 0;
+    this.reusableLinkArray.length = 0;
+    this.reusableVector2DArray.length = 0;
+  }
+};
+var dragObjectPool = new DragObjectPoolManager();
+
+// src/v2/rendering/drag-optimizer.ts
+var DragOptimizer = class {
+  config;
+  state = {
+    isDragModeActive: false,
+    lastDragRenderTime: 0
+  };
+  // Fast drag cache for O(1) lookups - everything pre-computed
+  fastDragNodeCache = /* @__PURE__ */ new Map();
+  // Object pool optimization
+  reusableNodeStates = [];
+  reusableVectors = [];
+  /**
+   * Initialize drag optimizer with object pooling optimizations
+   */
+  initialize(config) {
+    this.config = config;
+    this.buildFastDragCache();
+    this.reusableNodeStates = dragObjectPool.getReusableNodeArray();
+    this.reusableVectors = dragObjectPool.getReusableVector2DArray();
+  }
+  /**
+   * Set the dragged node (like zoom renderer - simple state tracking)
+   */
+  setDraggedNode(draggedNode) {
+    if (!this.config) return;
     try {
-      const sourcePoint = this.getShortenedSourcePoint(source, target, style);
-      const targetPoint = this.getShortenedTargetPoint(source, target, style);
-      ctx.strokeStyle = style.stroke;
-      ctx.lineWidth = style.strokeWidth;
-      ctx.globalAlpha = style.opacity;
-      ctx.beginPath();
-      ctx.moveTo(sourcePoint.x, sourcePoint.y);
-      ctx.lineTo(targetPoint.x, targetPoint.y);
-      ctx.stroke();
-      if (style.arrow?.enabled) {
-        this.renderArrowAtPoint(ctx, sourcePoint, targetPoint, style.arrow);
+      this.state.draggedNodeId = draggedNode.id;
+      console.log(`\u{1F680} Fast drag mode - rendering ALL ${this.config.nodes.length} nodes and ${this.config.links.length} links with simplified styling`);
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+  /**
+   * Render with drag optimization using object pooling
+   */
+  render(ctx, performanceMetrics) {
+    if (!this.config) return;
+    if (this.state.isDragModeActive) {
+      this.renderFastDragOptimized(ctx);
+    } else {
+      this.config.zIndexRenderer.render(ctx, performanceMetrics);
+    }
+  }
+  /**
+   * Handle drag movement with RAF throttling
+   */
+  handleDragMove() {
+    if (!this.config || !this.state.isDragModeActive) return;
+    this.state.lastDragRenderTime = performance.now();
+  }
+  /**
+   * End drag mode and restore full rendering
+   */
+  endDragMode() {
+    if (!this.config) return;
+    try {
+      this.state.isDragModeActive = false;
+      this.state.draggedNodeId = void 0;
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+  /**
+   * Optimized fast rendering with object pooling and minimal GC
+   */
+  renderFastDragOptimized(ctx) {
+    if (!this.config) return;
+    const { nodes, links } = this.config;
+    const startTime = performance.now();
+    this.reusableNodeStates = dragObjectPool.getReusableNodeArray();
+    this.reusableVectors = dragObjectPool.getReusableVector2DArray();
+    try {
+      const linkVectors = dragObjectPool.batchAcquireVectors(links.length * 2);
+      let vectorIndex = 0;
+      ctx.strokeStyle = "#999";
+      ctx.lineWidth = 1;
+      ctx.globalAlpha = 0.6;
+      for (const link of links) {
+        const sourceNode = typeof link.source === "string" ? this.config.stateManager.getNode(link.source) : link.source;
+        const targetNode = typeof link.target === "string" ? this.config.stateManager.getNode(link.target) : link.target;
+        if (sourceNode?.x != null && sourceNode?.y != null && targetNode?.x != null && targetNode?.y != null) {
+          const sourceVec = linkVectors[vectorIndex++];
+          const targetVec = linkVectors[vectorIndex++];
+          if (sourceVec && targetVec) {
+            sourceVec.x = sourceNode.x;
+            sourceVec.y = sourceNode.y;
+            targetVec.x = targetNode.x;
+            targetVec.y = targetNode.y;
+            ctx.beginPath();
+            ctx.moveTo(sourceVec.x, sourceVec.y);
+            ctx.lineTo(targetVec.x, targetVec.y);
+            ctx.stroke();
+          }
+        }
       }
       ctx.globalAlpha = 1;
+      for (const node of nodes) {
+        if (node.x == null || node.y == null) continue;
+        const cachedProps = this.fastDragNodeCache.get(node.id);
+        if (!cachedProps) continue;
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, cachedProps.radius, 0, 2 * Math.PI);
+        ctx.fillStyle = cachedProps.fill;
+        ctx.fill();
+        if (cachedProps.strokeWidth > 0) {
+          ctx.strokeStyle = cachedProps.stroke;
+          ctx.lineWidth = cachedProps.strokeWidth;
+          ctx.stroke();
+        }
+      }
+      this.renderFastDragLabelsOptimized(ctx);
+      dragObjectPool.batchReleaseVectors(linkVectors);
     } catch (error) {
       ErrorHandler.logError(error);
     }
+    this.state.lastDragRenderTime = performance.now() - startTime;
   }
   /**
-   * V1-compatible link shortening for source point
+   * Optimized label rendering with minimal object allocation
    */
-  getShortenedSourcePoint(source, target, _style) {
-    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 sourceNodeStyle = this.styleResolver.resolveNodeStyle({
-      node: source,
-      isHovered: this.isNodeHovered(source.id),
-      isSelected: this.isNodeSelected(source.id)
-    });
-    const visualRadius = sourceNodeStyle.radius + sourceNodeStyle.strokeWidth / 2;
-    const offset = visualRadius + 1;
+  renderFastDragLabelsOptimized(ctx) {
+    if (!this.config) return;
+    const { nodes } = this.config;
+    ctx.font = "10px Arial";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    for (const node of nodes) {
+      if (node.x == null || node.y == null) continue;
+      const cachedProps = this.fastDragNodeCache.get(node.id);
+      if (!cachedProps?.truncatedLabel) continue;
+      ctx.fillStyle = cachedProps.textColor;
+      ctx.fillText(cachedProps.truncatedLabel, node.x, node.y);
+    }
+  }
+  /**
+   * Build fast drag cache with pre-computed properties (zoom-renderer pattern)
+   */
+  buildFastDragCache() {
+    if (!this.config) return;
+    try {
+      this.fastDragNodeCache.clear();
+      const tempCanvas = document.createElement("canvas");
+      const tempCtx = tempCanvas.getContext("2d");
+      if (!tempCtx) return;
+      tempCtx.font = "10px Arial";
+      for (const node of this.config.nodes) {
+        const nodeStyle = this.config.styleResolver.resolveNodeStyle({
+          node,
+          isHovered: false,
+          isSelected: false
+        });
+        const label = node.label || node.id;
+        const maxWidth = nodeStyle.radius * 2 - 6;
+        const truncatedLabel = this.preComputeTruncatedLabel(tempCtx, label, maxWidth);
+        const textColor = nodeStyle.label?.textColor || "#ffffff";
+        this.fastDragNodeCache.set(node.id, {
+          radius: nodeStyle.radius,
+          fill: nodeStyle.fill,
+          stroke: nodeStyle.stroke,
+          strokeWidth: nodeStyle.strokeWidth,
+          textColor,
+          truncatedLabel
+        });
+      }
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+  /**
+   * Pre-compute truncated label (zoom-renderer pattern)
+   */
+  preComputeTruncatedLabel(ctx, label, maxWidth) {
+    if (ctx.measureText(label).width <= maxWidth) {
+      return label;
+    }
+    let truncated = label;
+    while (truncated.length > 1 && ctx.measureText(`${truncated}\u2026`).width > maxWidth) {
+      truncated = truncated.slice(0, -1);
+    }
+    return truncated.length < label.length ? `${truncated}\u2026` : truncated;
+  }
+  /**
+   * Set drag state for performance optimization (like ZoomRenderer.setZoomState)
+   */
+  setDragState(isDragging) {
+    if (isDragging) {
+      this.state.isDragModeActive = true;
+    } else {
+      this.state.isDragModeActive = false;
+      this.state.draggedNodeId = void 0;
+    }
+  }
+  /**
+   * Update configuration and rebuild cache
+   */
+  updateConfig(updates) {
+    if (this.config) {
+      Object.assign(this.config, updates);
+      this.buildFastDragCache();
+    }
+  }
+  /**
+   * Get drag optimization statistics including object pool metrics
+   */
+  getStats() {
+    const poolStats = dragObjectPool.getStats();
     return {
-      x: sourceX + dx / distance * offset,
-      y: sourceY + dy / distance * offset
+      isDragModeActive: this.state.isDragModeActive,
+      cachedNodeProperties: this.fastDragNodeCache.size,
+      lastRenderTime: this.state.lastDragRenderTime,
+      objectPool: {
+        vector2D: poolStats.vector2D,
+        nodeState: poolStats.nodeState,
+        memoryEstimate: poolStats.memoryEstimate
+      }
     };
   }
   /**
-   * V1-compatible link shortening for target point
+   * Destroy and clean up all resources
+   */
+  destroy() {
+    this.reusableNodeStates.length = 0;
+    this.reusableVectors.length = 0;
+    this.config = void 0;
+    this.fastDragNodeCache.clear();
+    this.state = {
+      isDragModeActive: false,
+      lastDragRenderTime: 0
+    };
+  }
+  /**
+   * Force memory optimization by clearing and rebuilding caches
+   */
+  optimizeMemory() {
+    this.buildFastDragCache();
+    dragObjectPool.optimizeMemory();
+  }
+};
+
+// src/v2/rendering/renderer.ts
+var Renderer = class {
+  config;
+  canvasState;
+  hoverManager;
+  selectionManager;
+  styleResolver;
+  // Centralized state management for O(1) lookups
+  stateManager = new StateManager();
+  // Performance metrics tracking
+  metricsManager = new PerformanceMetricsManager();
+  // Interaction state resolution
+  interactionResolver = new InteractionStateResolver();
+  // Drag optimization
+  dragOptimizer = new DragOptimizer();
+  // Optimized Z-Index Renderer
+  zIndexRenderer = new OptimizedZIndexRenderer();
+  // Dedicated Zoom Renderer for separation of concerns
+  zoomRenderer = new ZoomRenderer();
+  // Dedicated Hit Detection Renderer for shadow canvas
+  hitDetectionRenderer = new HitDetectionRenderer();
+  /**
+   * Initialize the renderer
+   */
+  initialize(config, canvasState, hoverManager, selectionManager) {
+    try {
+      this.config = config;
+      this.canvasState = canvasState;
+      this.hoverManager = hoverManager;
+      this.selectionManager = selectionManager;
+      this.styleResolver = createStyleResolver(config.interaction);
+      this.stateManager.initialize({ nodes: config.nodes, links: config.links });
+      this.interactionResolver.updateManagers(hoverManager, selectionManager);
+      this.initializeZIndexRenderer();
+      this.initializeZoomRenderer();
+      this.initializeHitDetectionRenderer();
+      this.initializeDragOptimizer();
+    } catch (error) {
+      ErrorHandler.logError(error, {
+        nodeCount: config.nodes.length,
+        linkCount: config.links.length
+      });
+      throw error;
+    }
+  }
+  /**
+   * Initialize the optimized z-index renderer with all required dependencies
+   */
+  initializeZIndexRenderer() {
+    if (!this.config || !this.styleResolver) return;
+    const callbacks = this.interactionResolver.createCallbacks();
+    this.zIndexRenderer.initialize({
+      nodes: this.config.nodes,
+      links: this.config.links,
+      styleResolver: this.styleResolver,
+      isNodeHovered: callbacks.isNodeHovered,
+      isNodeSelected: callbacks.isNodeSelected,
+      isLinkHovered: callbacks.isLinkHovered,
+      isLinkSelected: callbacks.isLinkSelected,
+      getLinkId: (link) => this.getLinkId(link),
+      getLinkMidpoint: (link) => this.getLinkMidpoint(link),
+      renderNodes: (ctx, nodes) => this.renderNodesLayer(ctx, nodes),
+      renderLinks: (ctx, links) => this.renderLinksLayer(ctx, links),
+      renderNodeLabels: (ctx, nodes) => this.renderNodeLabelsLayer(ctx, nodes)
+    });
+  }
+  /**
+   * Initialize the zoom renderer for zoom-specific optimizations
+   */
+  initializeZoomRenderer() {
+    if (!this.config || !this.styleResolver) return;
+    this.zoomRenderer.initialize({
+      nodes: this.config.nodes,
+      links: this.config.links,
+      styleResolver: this.styleResolver,
+      stateManager: this.stateManager
+    });
+  }
+  /**
+   * Initialize the hit detection renderer for shadow canvas
+   */
+  initializeHitDetectionRenderer() {
+    if (!this.config || !this.styleResolver || !this.canvasState) return;
+    this.hitDetectionRenderer.initialize({
+      nodes: this.config.nodes,
+      links: this.config.links,
+      styleResolver: this.styleResolver,
+      stateManager: this.stateManager,
+      canvas: this.canvasState.canvas,
+      shadowCtx: this.canvasState.shadowCtx,
+      linkHoverPrecision: 4
+      // Default 4px like force-graph
+    });
+  }
+  /**
+   * Initialize the drag optimizer for fast drag rendering
+   */
+  initializeDragOptimizer() {
+    if (!this.config || !this.styleResolver) return;
+    this.dragOptimizer.initialize({
+      nodes: this.config.nodes,
+      links: this.config.links,
+      stateManager: this.stateManager,
+      styleResolver: this.styleResolver,
+      interactionResolver: this.interactionResolver,
+      zIndexRenderer: this.zIndexRenderer
+    });
+  }
+  /**
+   * Main render method with performance metrics (Instrumented)
+   */
+  render() {
+    if (!this.config || !this.canvasState) {
+      throw new RenderError("Renderer not initialized");
+    }
+    const startTime = performance.now();
+    this.metricsManager.incrementFrame();
+    try {
+      const { ctx } = this.canvasState;
+      this.clearCanvas(ctx);
+      this.dragOptimizer.render(ctx, this.metricsManager.getMetrics());
+      this.hitDetectionRenderer.markShadowCanvasDirty();
+      this.metricsManager.addTiming("renderTotal", performance.now() - startTime);
+      if (this.metricsManager.shouldLogMetrics()) {
+        this.metricsManager.logMetrics(this.config.nodes.length, this.config.links.length);
+      }
+    } catch (error) {
+      ErrorHandler.logError(error);
+      throw new RenderError("Failed to render graph", {
+        nodeCount: this.config.nodes.length,
+        linkCount: this.config.links.length,
+        originalError: error.message
+      });
+    }
+  }
+  /**
+   * Render with transform (called during zoom/pan) - OPTIMIZED PATTERN
+   * Fast rendering during zoom, full rendering when stopped
+   */
+  renderWithTransform() {
+    if (!this.canvasState) return;
+    try {
+      const { canvas, ctx } = this.canvasState;
+      const transform2 = transform(canvas);
+      this.clearCanvas(ctx);
+      this.applyTransform(transform2, ctx);
+      const isDragging = this.dragOptimizer.getStats().isDragModeActive;
+      const isZooming = this.zoomRenderer.getZoomState();
+      if (isDragging) {
+        this.dragOptimizer.render(ctx, this.metricsManager.getMetrics());
+      } else if (isZooming) {
+        this.zoomRenderer.render(ctx, this.zIndexRenderer);
+      } else {
+        this.zIndexRenderer.render(ctx, this.metricsManager.getMetrics());
+      }
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+  /**
+   * Set zoom state for performance optimization (delegates to ZoomRenderer)
+   */
+  setZoomState(isZooming) {
+    this.zoomRenderer.setZoomState(isZooming);
+  }
+  /**
+   * Set drag state for performance optimization (like setZoomState)
+   */
+  setDragState(isDragging) {
+    this.dragOptimizer.setDragState(isDragging);
+  }
+  /**
+   * Set the currently dragged node
+   */
+  setDraggedNode(draggedNode) {
+    this.dragOptimizer.setDraggedNode(draggedNode);
+  }
+  /**
+   * Render shadow canvas for hit detection (delegates to HitDetectionRenderer)
+   */
+  renderShadowCanvas() {
+    this.hitDetectionRenderer.renderShadowCanvas();
+  }
+  /**
+   * Mark shadow canvas as dirty for next render (delegates to HitDetectionRenderer)
+   */
+  markShadowCanvasDirty() {
+    this.hitDetectionRenderer.markShadowCanvasDirty();
+  }
+  /**
+   * Force shadow canvas render (delegates to HitDetectionRenderer)
+   */
+  forceShadowCanvasRender() {
+    this.hitDetectionRenderer.forceShadowCanvasRender();
+  }
+  /**
+   * Clear canvas context
+   */
+  clearCanvas(ctx) {
+    if (!this.canvasState) return;
+    try {
+      const { width, height } = this.canvasState;
+      CanvasUtils.resetTransform(ctx);
+      ctx.clearRect(0, 0, width, height);
+    } catch {
+      throw new RenderError("Failed to clear canvas");
+    }
+  }
+  /**
+   * Apply transform to canvas context
+   */
+  applyTransform(transform2, ctx) {
+    try {
+      CanvasUtils.resetTransform(ctx);
+      ctx.translate(transform2.x, transform2.y);
+      ctx.scale(transform2.k, transform2.k);
+    } catch {
+      throw new RenderError("Failed to apply transform");
+    }
+  }
+  /**
+   * Get unique link ID for tracking (delegates to StateManager)
+   */
+  getLinkId(link) {
+    return this.stateManager.getLinkId(link);
+  }
+  /**
+   * Reset performance metrics
+   */
+  resetPerformanceMetrics() {
+    this.metricsManager.reset();
+  }
+  /**
+   * Get current performance metrics
    */
-  getShortenedTargetPoint(source, target, style) {
-    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 targetNodeStyle = this.styleResolver.resolveNodeStyle({
-      node: target,
-      isHovered: this.isNodeHovered(target.id),
-      isSelected: this.isNodeSelected(target.id)
-    });
-    const visualRadius = targetNodeStyle.radius + targetNodeStyle.strokeWidth / 2;
-    const arrowLength = style.arrow?.enabled ? style.arrow.size ?? 4 : 0;
-    const offset = style.arrow?.enabled ? visualRadius + arrowLength : visualRadius + 1;
-    const shortenedPoint = {
-      x: targetX - dx / distance * offset,
-      y: targetY - dy / distance * offset
-    };
-    return shortenedPoint;
+  getPerformanceMetrics() {
+    return this.metricsManager.getMetrics();
   }
   /**
-   * Render arrow head at specific points
+   * Force log performance metrics immediately (for debugging)
    */
-  renderArrowAtPoint(ctx, sourcePoint, targetPoint, arrowStyle) {
-    try {
-      const dx = targetPoint.x - sourcePoint.x;
-      const dy = targetPoint.y - sourcePoint.y;
-      const angle = Math.atan2(dy, dx);
-      const arrowLength = arrowStyle.size ?? 4;
-      const arrowTipX = targetPoint.x + arrowLength * Math.cos(angle);
-      const arrowTipY = targetPoint.y + arrowLength * Math.sin(angle);
-      const x1 = arrowTipX - arrowLength * Math.cos(angle - Math.PI / 6);
-      const y1 = arrowTipY - arrowLength * Math.sin(angle - Math.PI / 6);
-      const x22 = arrowTipX - arrowLength * Math.cos(angle + Math.PI / 6);
-      const y22 = arrowTipY - arrowLength * Math.sin(angle + Math.PI / 6);
-      ctx.fillStyle = arrowStyle.fill ?? "#000000";
-      ctx.beginPath();
-      ctx.moveTo(arrowTipX, arrowTipY);
-      ctx.lineTo(x1, y1);
-      ctx.lineTo(x22, y22);
-      ctx.closePath();
-      ctx.fill();
-    } catch (error) {
-      ErrorHandler.logError(error);
-    }
+  forceLogMetrics() {
+    const nodeCount = this.config?.nodes.length || 0;
+    const linkCount = this.config?.links.length || 0;
+    this.metricsManager.logMetrics(nodeCount, linkCount);
   }
   /**
-   * Render arrow head (legacy method for backward compatibility)
+   * Calculate midpoint of a link for label positioning (delegates to StateManager)
    */
-  renderArrow(ctx, source, target, arrowStyle) {
-    this.renderArrowAtPoint(
-      ctx,
-      { x: source.x, y: source.y },
-      { x: target.x, y: target.y },
-      arrowStyle
-    );
+  getLinkMidpoint(link) {
+    return this.stateManager.getLinkMidpoint(link);
   }
   /**
    * Initialize node positions if needed
@@ -7304,6 +8872,29 @@ var Renderer = class {
     if (!this.config) return;
     try {
       Object.assign(this.config, updates);
+      this.zIndexRenderer.updateConfig({
+        nodes: this.config.nodes,
+        links: this.config.links
+      });
+      this.stateManager.updateState({ nodes: this.config.nodes, links: this.config.links });
+      this.zoomRenderer.updateConfig({
+        nodes: this.config.nodes,
+        links: this.config.links,
+        stateManager: this.stateManager
+      });
+      this.hitDetectionRenderer.updateConfig({
+        nodes: this.config.nodes,
+        links: this.config.links,
+        stateManager: this.stateManager
+      });
+      this.dragOptimizer.updateConfig({
+        nodes: this.config.nodes,
+        links: this.config.links,
+        stateManager: this.stateManager,
+        styleResolver: this.styleResolver,
+        interactionResolver: this.interactionResolver,
+        zIndexRenderer: this.zIndexRenderer
+      });
     } catch (error) {
       ErrorHandler.logError(error);
     }
@@ -7326,247 +8917,22 @@ var Renderer = class {
     };
   }
   /**
-   * Debug shadow canvas export (force-graph pattern)
+   * Debug shadow canvas export (delegates to HitDetectionRenderer)
    */
   debugShadowCanvas() {
-    try {
-      if (!this.canvasState) return;
-      const { shadowCanvas } = this.canvasState;
-      const link = document.createElement("a");
-      link.download = "shadow-canvas-debug.png";
-      link.href = shadowCanvas.toDataURL("image/png");
-      link.click();
-    } catch (error) {
-      ErrorHandler.logError(error);
-    }
-  }
-  /**
-   * Build node index for O(1) lookups (Step 3 optimization)
-   */
-  buildNodeIndex() {
-    if (!this.config) return;
-    try {
-      this.nodeMap.clear();
-      for (const node of this.config.nodes) {
-        this.nodeMap.set(node.id, node);
-      }
-      for (const link of this.config.links) {
-        if (typeof link.source === "string") {
-          const sourceNode = this.nodeMap.get(link.source);
-          if (sourceNode) {
-            link.source = sourceNode;
-          }
-        }
-        if (typeof link.target === "string") {
-          const targetNode = this.nodeMap.get(link.target);
-          if (targetNode) {
-            link.target = targetNode;
-          }
-        }
-      }
-    } catch (error) {
-      ErrorHandler.logError(error);
-    }
-  }
-  /**
-   * Get node by ID using O(1) lookup (Step 3 optimization)
-   */
-  getNodeById(nodeId) {
-    return this.nodeMap.get(nodeId);
-  }
-  /**
-   * Render with z-index layers (for renderWithTransform)
-   */
-  renderWithLayers(ctx) {
-    if (!this.config) return;
-    try {
-      const hoveredNode = this.getHoveredNode();
-      const selectedNode = this.getSelectedNode();
-      const hoveredLink = this.getHoveredLink();
-      const selectedLink = this.getSelectedLink();
-      const nodeHighlightChecker = ZIndexManager.createNodeHighlightChecker(
-        hoveredNode?.id || null,
-        selectedNode?.id || null
-      );
-      const linkHighlightChecker = ZIndexManager.createLinkHighlightChecker(
-        hoveredNode?.id || null,
-        selectedNode?.id || null,
-        hoveredLink ? this.getLinkId(hoveredLink) : null,
-        selectedLink ? this.getLinkId(selectedLink) : null
-      );
-      const linkLayers = ZIndexManager.separateIntoLayers(this.config.links, linkHighlightChecker);
-      const nodeLayers = ZIndexManager.separateIntoLayers(this.config.nodes, nodeHighlightChecker);
-      this.renderLinksLayer(ctx, linkLayers.background);
-      this.renderLinkLabelsLayer(ctx, linkLayers.background);
-      this.renderNodesWithLabelsLayer(ctx, nodeLayers.background);
-      this.renderLinksLayer(ctx, linkLayers.foreground);
-      this.renderLinkLabelsLayer(ctx, linkLayers.foreground);
-      this.renderNodesWithLabelsLayer(ctx, nodeLayers.foreground);
-    } catch (error) {
-      ErrorHandler.logError(error);
-    }
-  }
-  /**
-   * Render with z-index layers and performance metrics (for main render)
-   */
-  renderWithLayersAndMetrics(ctx) {
-    if (!this.config) return;
-    try {
-      const hoveredNode = this.getHoveredNode();
-      const selectedNode = this.getSelectedNode();
-      const hoveredLink = this.getHoveredLink();
-      const selectedLink = this.getSelectedLink();
-      const nodeHighlightChecker = ZIndexManager.createNodeHighlightChecker(
-        hoveredNode?.id || null,
-        selectedNode?.id || null
-      );
-      const linkHighlightChecker = ZIndexManager.createLinkHighlightChecker(
-        hoveredNode?.id || null,
-        selectedNode?.id || null,
-        hoveredLink ? this.getLinkId(hoveredLink) : null,
-        selectedLink ? this.getLinkId(selectedLink) : null
-      );
-      const linkLayers = ZIndexManager.separateIntoLayers(this.config.links, linkHighlightChecker);
-      const nodeLayers = ZIndexManager.separateIntoLayers(this.config.nodes, nodeHighlightChecker);
-      let stepStart = performance.now();
-      this.renderLinksLayer(ctx, linkLayers.background);
-      this.renderLinksLayer(ctx, linkLayers.foreground);
-      this.performanceMetrics.renderLinks += performance.now() - stepStart;
-      stepStart = performance.now();
-      this.renderNodesLayer(ctx, nodeLayers.background);
-      this.renderNodesLayer(ctx, nodeLayers.foreground);
-      this.performanceMetrics.renderNodes += performance.now() - stepStart;
-      stepStart = performance.now();
-      this.renderLinkLabelsLayer(ctx, linkLayers.background);
-      this.renderLinkLabelsLayer(ctx, linkLayers.foreground);
-      this.performanceMetrics.renderLinkLabels += performance.now() - stepStart;
-      stepStart = performance.now();
-      this.renderNodeLabelsLayer(ctx, nodeLayers.background);
-      this.renderNodeLabelsLayer(ctx, nodeLayers.foreground);
-      this.performanceMetrics.renderNodeLabels += performance.now() - stepStart;
-    } catch (error) {
-      ErrorHandler.logError(error);
-    }
-  }
-  /**
-   * Helper methods for getting current interaction states
-   */
-  getHoveredNode() {
-    if (!this.hoverManager) return null;
-    const hoverState = this.hoverManager.getHoverState();
-    return hoverState.currentHovered?.d.entityType === "Node" ? hoverState.currentHovered.d : null;
-  }
-  getSelectedNode() {
-    if (!this.selectionManager) return null;
-    const selectionState = this.selectionManager.getSelectionState();
-    return selectionState.selectedNode;
-  }
-  getHoveredLink() {
-    if (!this.hoverManager) return null;
-    const hoverState = this.hoverManager.getHoverState();
-    return hoverState.currentHovered?.d.entityType === "Link" ? hoverState.currentHovered.d : null;
-  }
-  getSelectedLink() {
-    if (!this.selectionManager) return null;
-    const selectionState = this.selectionManager.getSelectionState();
-    return selectionState.selectedLink;
-  }
-  /**
-   * Layer-specific rendering methods (render subsets of entities)
-   */
-  renderNodesWithLabelsLayer(ctx, nodes) {
-    if (!this.config || !this.styleResolver) return;
-    const nodeCount = this.config.nodes.length;
-    const isLargeGraph = nodeCount > 1e4;
-    let currentZoom = 1;
-    let isZoomedOutForNodes = false;
-    if (isLargeGraph) {
-      currentZoom = this.canvasState ? transform(this.canvasState.canvas).k : 1;
-      isZoomedOutForNodes = currentZoom <= 0.8;
-    }
-    const nodeStateCache = /* @__PURE__ */ new Map();
-    for (const node of nodes) {
-      if (!node.x || !node.y) continue;
-      const nodeId = node.id;
-      let nodeState = nodeStateCache.get(nodeId);
-      if (!nodeState) {
-        nodeState = {
-          isHovered: this.isNodeHovered(nodeId),
-          isSelected: this.isNodeSelected(nodeId)
-        };
-        nodeStateCache.set(nodeId, nodeState);
-      }
-      const nodeStyle = this.styleResolver.resolveNodeStyle({
-        node,
-        isHovered: nodeState.isHovered,
-        isSelected: nodeState.isSelected
-      });
-      ctx.beginPath();
-      ctx.arc(node.x, node.y, nodeStyle.radius, 0, 2 * Math.PI);
-      ctx.fillStyle = nodeStyle.fill;
-      ctx.fill();
-      if (nodeStyle.stroke && nodeStyle.strokeWidth > 0) {
-        ctx.strokeStyle = nodeStyle.stroke;
-        ctx.lineWidth = nodeStyle.strokeWidth;
-        ctx.stroke();
-      }
-      if (isLargeGraph && isZoomedOutForNodes) {
-        continue;
-      }
-      const nodeStyleWithLabel = nodeStyle;
-      if (nodeStyleWithLabel.label && !nodeStyleWithLabel.label.enabled) continue;
-      const fullLabel = node.label || node.id;
-      const defaultStyle = {
-        font: "9px sans-serif",
-        textAlign: "center",
-        textBaseline: "middle",
-        fillStyle: "#ffffff",
-        offsetY: 0
-      };
-      if (nodeStyleWithLabel.label) {
-        ctx.font = nodeStyleWithLabel.label.font || defaultStyle.font;
-        ctx.textAlign = nodeStyleWithLabel.label.textAlign || defaultStyle.textAlign;
-        ctx.textBaseline = nodeStyleWithLabel.label.textBaseline || defaultStyle.textBaseline;
-        ctx.fillStyle = nodeStyleWithLabel.label.textColor || defaultStyle.fillStyle;
-      } else {
-        ctx.font = defaultStyle.font;
-        ctx.textAlign = defaultStyle.textAlign;
-        ctx.textBaseline = defaultStyle.textBaseline;
-        ctx.fillStyle = defaultStyle.fillStyle;
-      }
-      const maxWidth = nodeStyle.radius * 2 - 6;
-      const truncatedLabel = this.truncateLabel(ctx, fullLabel, maxWidth);
-      const labelY = node.y + (nodeStyleWithLabel.label?.offsetY || defaultStyle.offsetY);
-      ctx.fillText(truncatedLabel, node.x, labelY);
-    }
-  }
-  /**
-   * Helper method to truncate labels (copied from NodeLabelsRenderer)
-   */
-  truncateLabel(ctx, label, maxWidth) {
-    let truncatedLabel = label;
-    if (ctx.measureText(truncatedLabel).width <= maxWidth) {
-      return truncatedLabel;
-    }
-    while (truncatedLabel.length > 1 && ctx.measureText(`${truncatedLabel}\u2026`).width > maxWidth) {
-      truncatedLabel = truncatedLabel.slice(0, -1);
-    }
-    return truncatedLabel.length < label.length ? `${truncatedLabel}\u2026` : truncatedLabel;
+    this.hitDetectionRenderer.debugShadowCanvas();
   }
   renderLinksLayer(ctx, links) {
     if (!this.config || !this.styleResolver) return;
     const linkStateCache = /* @__PURE__ */ new Map();
     for (const link of links) {
-      const sourceNode = typeof link.source === "string" ? this.nodeMap.get(link.source) : link.source;
-      const targetNode = typeof link.target === "string" ? this.nodeMap.get(link.target) : link.target;
+      const sourceNode = typeof link.source === "string" ? this.stateManager.getNode(link.source) : link.source;
+      const targetNode = typeof link.target === "string" ? this.stateManager.getNode(link.target) : link.target;
       if (sourceNode && targetNode && sourceNode.x && sourceNode.y && targetNode.x && targetNode.y) {
         const linkId = this.getLinkId(link);
         let linkState = linkStateCache.get(linkId);
         if (!linkState) {
-          linkState = {
-            isHovered: this.isLinkHovered(link),
-            isSelected: this.isLinkSelected(link)
-          };
+          linkState = this.interactionResolver.getLinkState(link);
           linkStateCache.set(linkId, linkState);
         }
         const style = this.styleResolver.resolveLinkStyle({
@@ -7574,85 +8940,18 @@ var Renderer = class {
           isHovered: linkState.isHovered,
           isSelected: linkState.isSelected
         });
-        this.renderDirectedLink(ctx, sourceNode, targetNode, style);
-      }
-    }
-  }
-  renderLinkLabelsLayer(ctx, links) {
-    if (!this.config || !this.styleResolver) return;
-    const nodeCount = this.config.nodes.length;
-    const isLargeGraph = nodeCount > 1e4;
-    if (isLargeGraph && !this.hasLoggedLargeGraphOptimization) {
-      console.log(`\u{1F680} Large graph optimization: ${nodeCount} nodes detected. Link labels will only show on hover/selection for better performance.`);
-      this.hasLoggedLargeGraphOptimization = true;
-    }
-    if (isLargeGraph) {
-      const currentZoom = this.canvasState ? transform(this.canvasState.canvas).k : 1;
-      const isZoomedOut = currentZoom <= 1;
-      if (isZoomedOut) {
-        return;
+        const callbacks = this.interactionResolver.createCallbacks();
+        LinkRenderer.renderDirectedLink(
+          ctx,
+          sourceNode,
+          targetNode,
+          style,
+          this.styleResolver,
+          callbacks.isNodeHovered,
+          callbacks.isNodeSelected
+        );
       }
     }
-    const linkStateCache = /* @__PURE__ */ new Map();
-    LinkLabelsRenderer.renderWithVisibility(
-      ctx,
-      links,
-      (link) => {
-        if (!link.label) {
-          return null;
-        }
-        const linkId = this.getLinkId(link);
-        let linkState = linkStateCache.get(linkId);
-        if (!linkState) {
-          linkState = {
-            isHovered: this.isLinkHovered(link),
-            isSelected: this.isLinkSelected(link)
-          };
-          linkStateCache.set(linkId, linkState);
-        }
-        if (isLargeGraph) {
-          const isInteractive = linkState.isHovered || linkState.isSelected;
-          if (!isInteractive) {
-            return null;
-          }
-        }
-        const style = this.styleResolver.resolveLinkStyle({
-          link,
-          isHovered: linkState.isHovered,
-          isSelected: linkState.isSelected
-        });
-        return style.label || null;
-      },
-      (link) => this.getLinkMidpoint(link),
-      (linkId) => {
-        let linkState = linkStateCache.get(linkId);
-        if (!linkState) {
-          const link = links.find((l) => this.getLinkId(l) === linkId);
-          if (link) {
-            linkState = {
-              isHovered: this.isLinkHovered(link),
-              isSelected: this.isLinkSelected(link)
-            };
-            linkStateCache.set(linkId, linkState);
-          }
-        }
-        return linkState?.isHovered || false;
-      },
-      (linkId) => {
-        let linkState = linkStateCache.get(linkId);
-        if (!linkState) {
-          const link = links.find((l) => this.getLinkId(l) === linkId);
-          if (link) {
-            linkState = {
-              isHovered: this.isLinkHovered(link),
-              isSelected: this.isLinkSelected(link)
-            };
-            linkStateCache.set(linkId, linkState);
-          }
-        }
-        return linkState?.isSelected || false;
-      }
-    );
   }
   renderNodesLayer(ctx, nodes) {
     if (!this.config || !this.styleResolver) return;
@@ -7664,9 +8963,11 @@ var Renderer = class {
       (nodeId) => {
         let nodeState = nodeStateCache.get(nodeId);
         if (!nodeState) {
+          const interactionState = this.interactionResolver.getNodeState(nodeId);
           nodeState = {
-            isHovered: this.isNodeHovered(nodeId),
-            isSelected: this.isNodeSelected(nodeId)
+            isHovered: interactionState.isHovered,
+            isSelected: interactionState.isSelected,
+            isHighlighted: this.stateManager.isNodeHighlighted(nodeId)
           };
           nodeStateCache.set(nodeId, nodeState);
         }
@@ -7675,13 +8976,28 @@ var Renderer = class {
       (nodeId) => {
         let nodeState = nodeStateCache.get(nodeId);
         if (!nodeState) {
+          const interactionState = this.interactionResolver.getNodeState(nodeId);
           nodeState = {
-            isHovered: this.isNodeHovered(nodeId),
-            isSelected: this.isNodeSelected(nodeId)
+            isHovered: interactionState.isHovered,
+            isSelected: interactionState.isSelected,
+            isHighlighted: this.stateManager.isNodeHighlighted(nodeId)
           };
           nodeStateCache.set(nodeId, nodeState);
         }
         return nodeState.isSelected;
+      },
+      (nodeId) => {
+        let nodeState = nodeStateCache.get(nodeId);
+        if (!nodeState) {
+          const interactionState = this.interactionResolver.getNodeState(nodeId);
+          nodeState = {
+            isHovered: interactionState.isHovered,
+            isSelected: interactionState.isSelected,
+            isHighlighted: this.stateManager.isNodeHighlighted(nodeId)
+          };
+          nodeStateCache.set(nodeId, nodeState);
+        }
+        return nodeState.isHighlighted;
       }
     );
   }
@@ -7704,10 +9020,7 @@ var Renderer = class {
       (nodeId) => {
         let nodeState = nodeStateCache.get(nodeId);
         if (!nodeState) {
-          nodeState = {
-            isHovered: this.isNodeHovered(nodeId),
-            isSelected: this.isNodeSelected(nodeId)
-          };
+          nodeState = this.interactionResolver.getNodeState(nodeId);
           nodeStateCache.set(nodeId, nodeState);
         }
         return nodeState.isHovered;
@@ -7715,28 +9028,33 @@ var Renderer = class {
       (nodeId) => {
         let nodeState = nodeStateCache.get(nodeId);
         if (!nodeState) {
-          nodeState = {
-            isHovered: this.isNodeHovered(nodeId),
-            isSelected: this.isNodeSelected(nodeId)
-          };
+          nodeState = this.interactionResolver.getNodeState(nodeId);
           nodeStateCache.set(nodeId, nodeState);
         }
         return nodeState.isSelected;
       }
     );
   }
+  /**
+   * Get the state manager for highlight operations
+   */
+  getStateManager() {
+    return this.stateManager;
+  }
   /**
    * Destroy renderer and clean up resources
    */
   destroy() {
     try {
+      this.zIndexRenderer.destroy();
+      this.zoomRenderer.destroy();
+      this.hitDetectionRenderer.destroy();
+      this.dragOptimizer.destroy();
       this.config = void 0;
       this.canvasState = void 0;
       this.hoverManager = void 0;
       this.styleResolver = void 0;
-      this.nodeMap.clear();
-      this.shadowCanvasDirty = false;
-      this.lastShadowRenderTime = 0;
+      this.stateManager.destroy();
     } catch (error) {
       ErrorHandler.logError(error);
     }
@@ -8187,13 +9505,22 @@ var V2Graph = class {
         // pointerManager: this.pointerManager,
         physicsManager: this.physicsManager,
         hoverManager: this.hoverManager,
+        renderer: this.renderer,
+        // Pass renderer for drag state management
         onRender: () => this.renderer.renderWithTransform()
       });
       this.coordinateDragHover();
       this.zoomManager.initialize({
         canvas: canvasState.canvas,
         canvasManager: this.canvasManager,
-        onRender: () => this.renderer.renderWithTransform(),
+        renderer: this.renderer,
+        // Pass renderer for zoom state management
+        onRender: () => {
+          this.renderer.renderWithTransform();
+        },
+        onZoomEnd: () => {
+          this.renderer.renderWithTransform();
+        },
         isOverEntity: () => {
           const hoverState = this.hoverManager.getHoverState();
           return hoverState.currentHovered !== null;
@@ -8705,6 +10032,76 @@ var V2Graph = class {
       }
     });
   }
+  /**
+   * Highlight a node by ID
+   */
+  highlightNode(nodeId) {
+    try {
+      if (!this.config) {
+        throw new ValidationError("Graph not initialized");
+      }
+      this.renderer.getStateManager().highlightNode(nodeId);
+      this.renderer.renderWithTransform();
+    } catch (error) {
+      ErrorHandler.logError(error, { nodeId });
+    }
+  }
+  /**
+   * Highlight multiple nodes by IDs
+   */
+  highlightNodes(nodeIds) {
+    try {
+      if (!this.config) {
+        throw new ValidationError("Graph not initialized");
+      }
+      this.renderer.getStateManager().highlightNodes(nodeIds);
+      this.renderer.renderWithTransform();
+    } catch (error) {
+      ErrorHandler.logError(error, { nodeIds });
+    }
+  }
+  /**
+   * Remove highlight from a node
+   */
+  unhighlightNode(nodeId) {
+    try {
+      if (!this.config) {
+        throw new ValidationError("Graph not initialized");
+      }
+      this.renderer.getStateManager().unhighlightNode(nodeId);
+      this.renderer.renderWithTransform();
+    } catch (error) {
+      ErrorHandler.logError(error, { nodeId });
+    }
+  }
+  /**
+   * Clear all node highlights
+   */
+  clearHighlights() {
+    try {
+      if (!this.config) {
+        throw new ValidationError("Graph not initialized");
+      }
+      this.renderer.getStateManager().clearHighlights();
+      this.renderer.renderWithTransform();
+    } catch (error) {
+      ErrorHandler.logError(error);
+    }
+  }
+  /**
+   * Get all highlighted node IDs
+   */
+  getHighlightedNodes() {
+    try {
+      if (!this.config) {
+        throw new ValidationError("Graph not initialized");
+      }
+      return this.renderer.getStateManager().getHighlightedNodes();
+    } catch (error) {
+      ErrorHandler.logError(error);
+      return /* @__PURE__ */ new Set();
+    }
+  }
   /**
    * Destroy the graph and clean up resources
    */