polly-graph 0.2.5 → 0.2.6

package/dist/index.js

@@ -9120,28 +9120,32 @@ function shouldRenderControl(config, key) {
   return value;
 }
 
-// src/shared/icons/fit.svg?raw
-var fit_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M5 9V5H9" />\n  <path d="M19 9V5H15" />\n  <path d="M5 15V19H9" />\n  <path d="M19 15V19H15" />\n</svg>';
-
-// src/shared/icons/reset.svg?raw
-var reset_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M20 12a8 8 0 1 1-2.3-5.7" />\n  <path d="M20 4.5v4h-4" />\n</svg>';
-
-// src/shared/icons/plus.svg?raw
-var plus_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M5 12h14m-7-7v14" />\n</svg>';
-
-// src/shared/icons/minus.svg?raw
-var minus_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M19 12H5" />\n</svg>';
-
-// src/shared/icons/caret.svg?raw
-var caret_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M9 20L16.5 12L9 4" />\n</svg>';
-
 // src/shared/icons/index.ts
+var fitIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 9V5H9" />
+  <path d="M19 9V5H15" />
+  <path d="M5 15V19H9" />
+  <path d="M19 15V19H15" />
+</svg>`;
+var resetIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 12a8 8 0 1 1-2.3-5.7" />
+  <path d="M20 4.5v4h-4" />
+</svg>`;
+var plusIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14m-7-7v14" />
+</svg>`;
+var minusIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14" />
+</svg>`;
+var caretIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M6 9l6 6 6-6" />
+</svg>`;
 var icons = {
-  fit: fit_default,
-  reset: reset_default,
-  plus: plus_default,
-  minus: minus_default,
-  caret: caret_default
+  fit: fitIconSvg,
+  reset: resetIconSvg,
+  plus: plusIconSvg,
+  minus: minusIconSvg,
+  caret: caretIconSvg
 };
 var iconSvg = {
   fit: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -10069,16 +10073,3559 @@ function createV2Graph(config) {
   graph.initialize(config);
   return graph;
 }
+
+// src/force-graph-wrapper/core/force-graph-wrapper.ts
+import ForceGraph from "force-graph";
+
+// src/force-graph-wrapper/ui/graph-controls.ts
+function createGraphControls(container, actions, config) {
+  let root2 = null;
+  function mount() {
+    if (!config.enabled) return;
+    root2 = document.createElement("div");
+    root2.className = "fg-controls";
+    const position = config.position || "bottom-left";
+    root2.classList.add(`fg-pos-${position}`);
+    const orientation = config.orientation || "vertical";
+    root2.classList.add(`fg-orient-${orientation}`);
+    if (config.offset) {
+      root2.style.setProperty("--fg-controls-offset-x", `${config.offset.x}px`);
+      root2.style.setProperty("--fg-controls-offset-y", `${config.offset.y}px`);
+    }
+    appendControls2(root2, config, actions);
+    container.appendChild(root2);
+  }
+  function destroy() {
+    if (root2 && root2.parentNode) {
+      root2.parentNode.removeChild(root2);
+      root2 = null;
+    }
+  }
+  return { mount, destroy };
+}
+function appendControls2(root2, config, actions) {
+  const controls = [
+    {
+      key: "zoomIn",
+      icon: getControlIcon("zoom-in"),
+      label: "Zoom In",
+      action: () => actions.zoomIn()
+    },
+    {
+      key: "zoomOut",
+      icon: getControlIcon("zoom-out"),
+      label: "Zoom Out",
+      action: () => actions.zoomOut()
+    },
+    {
+      key: "fit",
+      icon: getControlIcon("fit"),
+      label: "Fit View",
+      action: () => actions.fitView()
+    },
+    {
+      key: "reset",
+      icon: getControlIcon("reset"),
+      label: "Reset View",
+      action: () => actions.resetView()
+    }
+  ];
+  controls.forEach((control) => {
+    if (shouldShowControl(config, control.key)) {
+      const button = createControlButton2(control.icon, control.label, control.action);
+      root2.appendChild(button);
+    }
+  });
+}
+function shouldShowControl(config, key) {
+  return config.show?.[key] !== false;
+}
+function createControlButton2(icon, label, onClick) {
+  const button = document.createElement("button");
+  button.className = "fg-control-btn";
+  button.type = "button";
+  button.innerHTML = icon;
+  button.setAttribute("aria-label", label);
+  button.setAttribute("title", label);
+  button.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick();
+  });
+  return button;
+}
+
+// src/force-graph-wrapper/ui/graph-legends.ts
+function createGraphLegends(container, config) {
+  let root2 = null;
+  function mount() {
+    if (!config.enabled) return;
+    root2 = document.createElement("div");
+    root2.className = "fg-legends";
+    const position = config.position || "top-right";
+    root2.classList.add(`fg-pos-${position}`);
+    if (config.offset) {
+      root2.style.setProperty("--fg-legends-offset-x", `${config.offset.x}px`);
+      root2.style.setProperty("--fg-legends-offset-y", `${config.offset.y}px`);
+    }
+    container.appendChild(root2);
+  }
+  function destroy() {
+    if (root2 && root2.parentNode) {
+      root2.parentNode.removeChild(root2);
+      root2 = null;
+    }
+  }
+  function update(nodeTypes, colorMap) {
+    if (!root2 || !config.enabled) return;
+    root2.innerHTML = "";
+    const validTypes = nodeTypes.filter((type) => type && type.trim()).sort((a2, b) => a2.localeCompare(b));
+    if (validTypes.length === 0) return;
+    const displayTypes = config.maxItems ? validTypes.slice(0, config.maxItems) : validTypes;
+    if (config.showTitle) {
+      const titleElement = document.createElement("div");
+      titleElement.className = "fg-legend-title";
+      titleElement.textContent = config.title || "Legend";
+      root2.appendChild(titleElement);
+    }
+    displayTypes.forEach((type) => {
+      const itemElement = createLegendItem(type, colorMap[type] || "#ccc");
+      root2.appendChild(itemElement);
+    });
+    if (config.maxItems && validTypes.length > config.maxItems) {
+      const moreElement = document.createElement("div");
+      moreElement.className = "fg-legend-item fg-legend-more";
+      moreElement.innerHTML = `
+        <div class="fg-legend-dot" style="background-color: #999;"></div>
+        <span class="fg-legend-label">and ${validTypes.length - config.maxItems} more...</span>
+      `;
+      root2.appendChild(moreElement);
+    }
+  }
+  function createLegendItem(type, color2) {
+    const itemElement = document.createElement("div");
+    itemElement.className = "fg-legend-item";
+    const dotElement = document.createElement("div");
+    dotElement.className = "fg-legend-dot";
+    dotElement.style.backgroundColor = color2;
+    const labelElement = document.createElement("span");
+    labelElement.className = "fg-legend-label";
+    labelElement.textContent = type;
+    itemElement.appendChild(dotElement);
+    itemElement.appendChild(labelElement);
+    return itemElement;
+  }
+  return { mount, destroy, update };
+}
+
+// src/force-graph-wrapper/workers/physics-worker-manager.ts
+var PhysicsWorkerManagerImpl = class {
+  worker = null;
+  workerUrl = null;
+  messageId = 0;
+  pendingPromises = /* @__PURE__ */ new Map();
+  promiseTimeouts = /* @__PURE__ */ new Map();
+  constructor() {
+    this.initializeWorker();
+  }
+  /**
+   * Initialize the web worker
+   */
+  initializeWorker() {
+    try {
+      const workerScript = this.getWorkerScript();
+      const blob = new Blob([workerScript], { type: "application/javascript" });
+      this.workerUrl = URL.createObjectURL(blob);
+      this.worker = new Worker(this.workerUrl);
+      this.setupWorkerEventListeners();
+    } catch (error) {
+      console.warn("Physics Worker initialization failed:", error);
+      this.worker = null;
+    }
+  }
+  /**
+   * Get the worker script content
+   */
+  getWorkerScript() {
+    return `
+/**
+ * Physics Web Worker for Force Graph
+ * Runs D3 force simulation in a dedicated worker thread for consistent timing
+ */
+
+// Import D3 dependencies for force simulation
+importScripts('https://cdn.jsdelivr.net/npm/d3-dispatch@3/dist/d3-dispatch.min.js');
+importScripts('https://cdn.jsdelivr.net/npm/d3-quadtree@3/dist/d3-quadtree.min.js');
+importScripts('https://cdn.jsdelivr.net/npm/d3-timer@3/dist/d3-timer.min.js');
+importScripts('https://cdn.jsdelivr.net/npm/d3-force@3/dist/d3-force.min.js');
+
+class PhysicsWorker {
+  constructor() {
+    this.simulation = null;
+    this.nodes = [];
+    this.links = [];
+    this.isRunning = false;
+    this.tickCount = 0;
+    this.maxTicks = 300;
+    this.intervalId = null; // Track interval for cleanup
+  }
+
+  initializeSimulation(config) {
+    const {
+      nodes,
+      links,
+      width = 400,
+      height = 300,
+      forces = {},
+      maxTicks = 300,
+      alphaDecay = 0.0228,
+      velocityDecay = 0.4
+    } = config;
+
+    this.nodes = nodes.map(node => ({ ...node }));
+    this.links = links.map(link => ({ ...link }));
+    this.maxTicks = maxTicks;
+    this.tickCount = 0;
+
+    this.simulation = d3.forceSimulation(this.nodes)
+      .alphaDecay(alphaDecay)
+      .velocityDecay(velocityDecay);
+
+    if (this.links.length > 0) {
+      this.simulation.force('link',
+        d3.forceLink(this.links)
+          .id(d => d.id)
+          .distance(forces.linkDistance || 30)
+          .strength(forces.linkStrength || 1)
+      );
+    }
+
+    this.simulation.force('charge',
+      d3.forceManyBody()
+        .strength(forces.chargeStrength || -300)
+    );
+
+    this.simulation.force('center',
+      d3.forceCenter(width / 2, height / 2)
+        .strength(forces.centerStrength || 1)
+    );
+
+    if (forces.collisionRadius) {
+      this.simulation.force('collision',
+        d3.forceCollide(forces.collisionRadius)
+          .strength(forces.collisionStrength || 0.7)
+      );
+    }
+
+    return {
+      success: true,
+      message: \`Simulation initialized with \${this.nodes.length} nodes and \${this.links.length} links\`
+    };
+  }
+
+  runSimulation() {
+    if (!this.simulation || this.isRunning) {
+      return { success: false, message: 'Simulation not initialized or already running' };
+    }
+
+    // Clear any existing interval
+    this.clearInterval();
+
+    this.isRunning = true;
+    this.tickCount = 0;
+
+    this.intervalId = setInterval(() => {
+      try {
+        if (this.tickCount >= this.maxTicks || this.simulation.alpha() < 0.01) {
+          this.completeSimulation();
+          return;
+        }
+
+        this.simulation.tick();
+        this.tickCount++;
+
+        if (this.tickCount % 20 === 0) {
+          postMessage({
+            type: 'simulation_progress',
+            data: {
+              tickCount: this.tickCount,
+              alpha: this.simulation.alpha(),
+              progress: this.tickCount / this.maxTicks
+            }
+          });
+        }
+      } catch (error) {
+        this.handleSimulationError(error);
+      }
+    }, 16);
+
+    return { success: true, message: 'Simulation started' };
+  }
+
+  completeSimulation() {
+    this.clearInterval();
+    this.isRunning = false;
+
+    // Create final node data with memory-efficient copying
+    const finalNodes = this.nodes.map(node => ({
+      id: node.id,
+      x: node.x || 0,
+      y: node.y || 0,
+      vx: node.vx || 0,
+      vy: node.vy || 0
+    }));
+
+    postMessage({
+      type: 'simulation_complete',
+      data: {
+        nodes: finalNodes,
+        tickCount: this.tickCount,
+        finalAlpha: this.simulation ? this.simulation.alpha() : 0
+      }
+    });
+
+    // Clean up simulation resources
+    this.cleanupSimulation();
+  }
+
+  handleSimulationError(error) {
+    this.clearInterval();
+    this.isRunning = false;
+    this.cleanupSimulation();
+
+    postMessage({
+      type: 'error',
+      data: {
+        success: false,
+        message: 'Simulation error: ' + error.message,
+        stack: error.stack
+      }
+    });
+  }
+
+  stopSimulation() {
+    this.clearInterval();
+
+    if (this.simulation) {
+      this.simulation.stop();
+      this.isRunning = false;
+      this.cleanupSimulation();
+      return { success: true, message: 'Simulation stopped' };
+    }
+    return { success: false, message: 'No active simulation' };
+  }
+
+  clearInterval() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  cleanupSimulation() {
+    // Clear D3 simulation references
+    if (this.simulation) {
+      this.simulation.stop();
+      this.simulation = null;
+    }
+
+    // Clear node and link arrays to free memory
+    this.nodes.length = 0;
+    this.links.length = 0;
+
+    // Reset state
+    this.tickCount = 0;
+    this.isRunning = false;
+  }
+}
+
+const physicsWorker = new PhysicsWorker();
+
+self.onmessage = function(event) {
+  const { type, data } = event.data;
+
+  try {
+    let result;
+
+    switch (type) {
+      case 'initialize':
+        result = physicsWorker.initializeSimulation(data);
+        break;
+      case 'run':
+        result = physicsWorker.runSimulation();
+        break;
+      case 'stop':
+        result = physicsWorker.stopSimulation();
+        break;
+      default:
+        result = { success: false, message: \`Unknown command: \${type}\` };
+    }
+
+    postMessage({
+      type: 'response',
+      data: result
+    });
+
+  } catch (error) {
+    postMessage({
+      type: 'error',
+      data: {
+        success: false,
+        message: error.message,
+        stack: error.stack
+      }
+    });
+  }
+};
+`;
+  }
+  /**
+   * Set up worker event listeners
+   */
+  setupWorkerEventListeners() {
+    if (!this.worker) return;
+    this.worker.onmessage = (event) => {
+      const { type, data } = event.data;
+      switch (type) {
+        case "response":
+        case "simulation_complete":
+          this.resolvePromise(data);
+          break;
+        case "simulation_progress":
+          break;
+        case "error":
+          this.rejectPromise(new Error(data.message));
+          break;
+      }
+    };
+    this.worker.onerror = (error) => {
+      console.error("Physics Worker error:", error);
+      this.rejectPromise(new Error(`Worker error: ${error.message}`));
+    };
+  }
+  /**
+   * Send message to worker with promise handling
+   */
+  sendMessage(message) {
+    return new Promise((resolve, reject) => {
+      if (!this.worker) {
+        reject(new Error("Physics Worker not available"));
+        return;
+      }
+      const id2 = ++this.messageId;
+      this.pendingPromises.set(id2, {
+        resolve,
+        reject
+      });
+      const timeoutId = window.setTimeout(() => {
+        if (this.pendingPromises.has(id2)) {
+          this.pendingPromises.delete(id2);
+          this.promiseTimeouts.delete(id2);
+          reject(new Error("Physics Worker timeout"));
+        }
+      }, 3e4);
+      this.promiseTimeouts.set(id2, timeoutId);
+      this.worker.postMessage({ ...message, id: id2 });
+    });
+  }
+  /**
+   * Resolve pending promise
+   */
+  resolvePromise(data) {
+    const promises = Array.from(this.pendingPromises.values());
+    this.clearAllTimeouts();
+    this.pendingPromises.clear();
+    promises.forEach(({ resolve }) => resolve(data));
+  }
+  /**
+   * Reject pending promise
+   */
+  rejectPromise(error) {
+    const promises = Array.from(this.pendingPromises.values());
+    this.clearAllTimeouts();
+    this.pendingPromises.clear();
+    promises.forEach(({ reject }) => reject(error));
+  }
+  /**
+   * Clear all promise timeouts
+   */
+  clearAllTimeouts() {
+    for (const timeoutId of this.promiseTimeouts.values()) {
+      window.clearTimeout(timeoutId);
+    }
+    this.promiseTimeouts.clear();
+  }
+  /**
+   * Initialize physics simulation with given configuration
+   */
+  async initialize(config) {
+    if (!this.worker) {
+      console.warn("Physics Worker not available, falling back to main thread");
+      return false;
+    }
+    try {
+      const response = await this.sendMessage({
+        type: "initialize",
+        data: config
+      });
+      return response.success;
+    } catch (error) {
+      console.error("Failed to initialize physics simulation:", error);
+      return false;
+    }
+  }
+  /**
+   * Run the physics simulation and return final node positions
+   */
+  async runSimulation() {
+    if (!this.worker) {
+      throw new Error("Physics Worker not available");
+    }
+    try {
+      await this.sendMessage({
+        type: "run"
+      });
+      return new Promise((resolve, reject) => {
+        if (!this.worker) {
+          reject(new Error("Physics Worker not available"));
+          return;
+        }
+        const handleMessage = (event) => {
+          const { type, data } = event.data;
+          if (type === "simulation_complete") {
+            this.worker?.removeEventListener("message", handleMessage);
+            resolve(data.nodes);
+          } else if (type === "error") {
+            this.worker?.removeEventListener("message", handleMessage);
+            reject(new Error(data.message));
+          }
+        };
+        this.worker.addEventListener("message", handleMessage);
+      });
+    } catch (error) {
+      console.error("Physics simulation failed:", error);
+      throw error;
+    }
+  }
+  /**
+   * Stop the current simulation
+   */
+  stopSimulation() {
+    if (this.worker) {
+      this.worker.postMessage({ type: "stop" });
+    }
+  }
+  /**
+   * Terminate the worker and cleanup resources
+   */
+  terminate() {
+    this.clearAllTimeouts();
+    if (this.worker) {
+      this.worker.terminate();
+      this.worker = null;
+    }
+    if (this.workerUrl) {
+      URL.revokeObjectURL(this.workerUrl);
+      this.workerUrl = null;
+    }
+    this.pendingPromises.clear();
+    this.messageId = 0;
+  }
+  /**
+   * Check if web worker is available
+   */
+  isAvailable() {
+    return this.worker !== null && typeof Worker !== "undefined";
+  }
+};
+var physicsWorkerManager = new PhysicsWorkerManagerImpl();
+
+// src/force-graph-wrapper/utils/performance-monitor.ts
+var PerformanceMonitor = class {
+  metrics = {
+    creation: 0,
+    dataLoad: 0,
+    firstRender: 0,
+    render: 0,
+    methodCalls: 0,
+    memoryUsage: 0,
+    nodeCount: 0,
+    linkCount: 0,
+    optimizedForNodeCount: 0,
+    timestamp: Date.now()
+  };
+  // Internal detailed tracking
+  methodCallsDetailed = /* @__PURE__ */ new Map();
+  /**
+   * Track execution time of any operation
+   */
+  track(operation, fn) {
+    const start2 = performance.now();
+    const result = fn();
+    const duration = performance.now() - start2;
+    if (!this.methodCallsDetailed.has(operation)) {
+      this.methodCallsDetailed.set(operation, []);
+    }
+    this.methodCallsDetailed.get(operation).push(duration);
+    this.metrics["methodCalls"]++;
+    return result;
+  }
+  /**
+   * Set specific metric values
+   */
+  setMetric(key, value) {
+    if (key !== "timestamp") {
+      this.metrics[key] = value;
+    }
+  }
+  /**
+   * Get current metrics snapshot
+   */
+  getMetrics() {
+    if (typeof performance.memory !== "undefined") {
+      const perfMemory = performance.memory;
+      this.metrics["memoryUsage"] = perfMemory.usedJSHeapSize / 1024 / 1024;
+    }
+    return {
+      ...this.metrics,
+      timestamp: Date.now()
+    };
+  }
+  /**
+   * Get performance summary with statistics
+   */
+  getSummary() {
+    const averages = {};
+    const peaks = {};
+    const warnings = [];
+    this.methodCallsDetailed.forEach((times, operation) => {
+      const avg = times.reduce((sum2, time) => sum2 + time, 0) / times.length;
+      const peak = Math.max(...times);
+      averages[operation] = Math.round(avg * 1e3) / 1e3;
+      peaks[operation] = Math.round(peak * 1e3) / 1e3;
+      if (avg > 100) {
+        warnings.push(`${operation} averaging ${avg.toFixed(1)}ms - consider optimization`);
+      }
+      if (peak > 500) {
+        warnings.push(`${operation} peaked at ${peak.toFixed(1)}ms - investigate bottleneck`);
+      }
+    });
+    averages["creation"] = this.metrics["creation"];
+    averages["dataLoad"] = this.metrics["dataLoad"];
+    averages["firstRender"] = this.metrics["firstRender"];
+    averages["render"] = this.metrics["render"];
+    let nodeScaling = "Linear";
+    if (this.metrics["nodeCount"] > 1e3 && this.metrics["dataLoad"] > 100) {
+      nodeScaling = "Sub-optimal - may be O(n\xB2)";
+      warnings.push("Data loading appears to scale poorly with node count");
+    }
+    return {
+      averages,
+      peaks,
+      warnings,
+      nodeScaling
+    };
+  }
+  /**
+   * Reset all metrics
+   */
+  reset() {
+    this.metrics = {
+      creation: 0,
+      dataLoad: 0,
+      firstRender: 0,
+      render: 0,
+      methodCalls: 0,
+      memoryUsage: 0,
+      nodeCount: 0,
+      linkCount: 0,
+      optimizedForNodeCount: 0,
+      timestamp: Date.now()
+    };
+    this.methodCallsDetailed.clear();
+  }
+  /**
+   * Log performance summary to console
+   */
+  logSummary() {
+    const summary = this.getSummary();
+    console.group("\u{1F680} Force-Graph Wrapper Performance Summary");
+    console.log("\u{1F4CA} Averages:", summary.averages);
+    console.log("\u26A1 Peaks:", summary.peaks);
+    console.log("\u{1F4C8} Node Scaling:", summary.nodeScaling);
+    console.log("\u{1F4BE} Memory Usage:", `${this.metrics["memoryUsage"].toFixed(2)} MB`);
+    console.log("\u{1F4CF} Graph Size:", `${this.metrics["nodeCount"]} nodes, ${this.metrics["linkCount"]} links`);
+    if (summary.warnings.length > 0) {
+      console.warn("\u26A0\uFE0F Performance Warnings:");
+      summary.warnings.forEach((warning) => console.warn(`  \u2022 ${warning}`));
+    } else {
+      console.log("\u2705 No performance warnings");
+    }
+    console.groupEnd();
+  }
+};
+var globalPerformanceMonitor = new PerformanceMonitor();
+
+// src/force-graph-wrapper/core/rendering-performance-monitor.ts
+var RenderingPerformanceMonitor = class {
+  frames = [];
+  frameTimes = [];
+  lastFrameTime = 0;
+  renderCallCount = 0;
+  canvasOpCount = 0;
+  droppedFrameCount = 0;
+  isMonitoring = false;
+  animationFrameId = null;
+  maxSamples = 120;
+  // 2 seconds at 60fps
+  targets = {
+    targetFps: 60,
+    maxFrameTime: 16.67,
+    // 1000ms / 60fps
+    maxDroppedFrames: 5,
+    efficiencyThreshold: 0.8
+  };
+  nodeCount = 0;
+  linkCount = 0;
+  constructor(targets) {
+    if (targets) {
+      this.targets = { ...this.targets, ...targets };
+    }
+  }
+  /**
+   * Start monitoring rendering performance
+   */
+  startMonitoring() {
+    if (this.isMonitoring) return;
+    this.isMonitoring = true;
+    this.frames = [];
+    this.frameTimes = [];
+    this.renderCallCount = 0;
+    this.canvasOpCount = 0;
+    this.droppedFrameCount = 0;
+    this.lastFrameTime = performance.now();
+    this.monitorFrame();
+  }
+  /**
+   * Stop monitoring rendering performance
+   */
+  stopMonitoring() {
+    this.isMonitoring = false;
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+  /**
+   * Record a render call (called by wrapper during rendering)
+   */
+  recordRenderCall() {
+    this.renderCallCount++;
+  }
+  /**
+   * Record canvas operations (drawing calls, transforms, etc.)
+   */
+  recordCanvasOperation() {
+    this.canvasOpCount++;
+  }
+  /**
+   * Update node and link counts for efficiency calculations
+   */
+  updateCounts(nodeCount, linkCount) {
+    this.nodeCount = nodeCount;
+    this.linkCount = linkCount;
+  }
+  /**
+   * Get current rendering metrics
+   */
+  getMetrics() {
+    const now2 = performance.now();
+    const currentFps = this.calculateCurrentFps();
+    const averageFps = this.calculateAverageFps();
+    const currentFrameTime = this.calculateCurrentFrameTime();
+    const averageFrameTime = this.calculateAverageFrameTime();
+    return {
+      fps: currentFps,
+      averageFps,
+      frameTime: currentFrameTime,
+      averageFrameTime,
+      droppedFrames: this.droppedFrameCount,
+      renderCalls: this.renderCallCount,
+      canvasOperations: this.canvasOpCount,
+      nodeCount: this.nodeCount,
+      linkCount: this.linkCount,
+      lastMeasurement: now2,
+      renderingEfficiency: this.calculateEfficiency(averageFps, averageFrameTime),
+      memoryUsage: this.getMemoryUsage()
+    };
+  }
+  /**
+   * Check if performance targets are being met
+   */
+  isPerformanceTargetMet() {
+    const metrics = this.getMetrics();
+    return metrics.averageFps >= this.targets.targetFps * 0.9 && // Allow 10% tolerance
+    metrics.averageFrameTime <= this.targets.maxFrameTime * 1.1 && metrics.droppedFrames <= this.targets.maxDroppedFrames && metrics.renderingEfficiency >= this.targets.efficiencyThreshold;
+  }
+  /**
+   * Get performance validation results
+   */
+  validatePerformance() {
+    const metrics = this.getMetrics();
+    const fpsTest = {
+      expected: this.targets.targetFps,
+      actual: metrics.averageFps,
+      passed: metrics.averageFps >= this.targets.targetFps * 0.9
+    };
+    const frameTimeTest = {
+      expected: this.targets.maxFrameTime,
+      actual: metrics.averageFrameTime,
+      passed: metrics.averageFrameTime <= this.targets.maxFrameTime * 1.1
+    };
+    const droppedFramesTest = {
+      expected: this.targets.maxDroppedFrames,
+      actual: metrics.droppedFrames,
+      passed: metrics.droppedFrames <= this.targets.maxDroppedFrames
+    };
+    const efficiencyTest = {
+      expected: this.targets.efficiencyThreshold,
+      actual: metrics.renderingEfficiency,
+      passed: metrics.renderingEfficiency >= this.targets.efficiencyThreshold
+    };
+    const results = {
+      fpsTarget: fpsTest,
+      frameTimeTarget: frameTimeTest,
+      droppedFramesTarget: droppedFramesTest,
+      efficiencyTarget: efficiencyTest
+    };
+    const passedTests = Object.values(results).filter((test) => test.passed).length;
+    const overallScore = passedTests / Object.keys(results).length;
+    const passed = overallScore >= 0.75;
+    return {
+      passed,
+      results,
+      overallScore
+    };
+  }
+  /**
+   * Reset performance counters
+   */
+  reset() {
+    this.frames = [];
+    this.frameTimes = [];
+    this.renderCallCount = 0;
+    this.canvasOpCount = 0;
+    this.droppedFrameCount = 0;
+    this.lastFrameTime = performance.now();
+  }
+  /**
+   * Get rendering optimization recommendations
+   */
+  getOptimizationRecommendations() {
+    const metrics = this.getMetrics();
+    const recommendations = [];
+    if (metrics.averageFps < this.targets.targetFps * 0.8) {
+      recommendations.push("FPS is significantly below target - consider reducing node count or simplifying rendering");
+    }
+    if (metrics.averageFrameTime > this.targets.maxFrameTime * 1.5) {
+      recommendations.push("Frame time is too high - optimize canvas operations or reduce complexity");
+    }
+    if (metrics.droppedFrames > this.targets.maxDroppedFrames * 2) {
+      recommendations.push("Too many dropped frames - consider implementing frame skipping or LOD");
+    }
+    if (metrics.renderingEfficiency < 0.5) {
+      recommendations.push("Low rendering efficiency - review canvas drawing operations");
+    }
+    if (metrics.canvasOperations / metrics.renderCalls > 1e3) {
+      recommendations.push("High canvas operations per render - consider batching or caching");
+    }
+    if (recommendations.length === 0) {
+      recommendations.push("Performance targets are being met - no optimizations needed");
+    }
+    return recommendations;
+  }
+  monitorFrame = () => {
+    if (!this.isMonitoring) return;
+    const currentTime = performance.now();
+    const frameTime = currentTime - this.lastFrameTime;
+    this.frameTimes.push(frameTime);
+    if (this.frameTimes.length > this.maxSamples) {
+      this.frameTimes.shift();
+    }
+    const fps = frameTime > 0 ? 1e3 / frameTime : 0;
+    this.frames.push(fps);
+    if (this.frames.length > this.maxSamples) {
+      this.frames.shift();
+    }
+    if (frameTime > this.targets.maxFrameTime * 2) {
+      this.droppedFrameCount++;
+    }
+    this.lastFrameTime = currentTime;
+    this.animationFrameId = requestAnimationFrame(this.monitorFrame);
+  };
+  calculateCurrentFps() {
+    if (this.frames.length === 0) return 0;
+    return this.frames[this.frames.length - 1] || 0;
+  }
+  calculateAverageFps() {
+    if (this.frames.length === 0) return 0;
+    const sum2 = this.frames.reduce((a2, b) => a2 + b, 0);
+    return sum2 / this.frames.length;
+  }
+  calculateCurrentFrameTime() {
+    if (this.frameTimes.length === 0) return 0;
+    return this.frameTimes[this.frameTimes.length - 1] || 0;
+  }
+  calculateAverageFrameTime() {
+    if (this.frameTimes.length === 0) return 0;
+    const sum2 = this.frameTimes.reduce((a2, b) => a2 + b, 0);
+    return sum2 / this.frameTimes.length;
+  }
+  calculateEfficiency(fps, frameTime) {
+    const fpsEfficiency = Math.min(fps / this.targets.targetFps, 1);
+    const frameTimeEfficiency = Math.min(this.targets.maxFrameTime / frameTime, 1);
+    return fpsEfficiency * 0.7 + frameTimeEfficiency * 0.3;
+  }
+  getMemoryUsage() {
+    if (typeof performance.memory !== "undefined") {
+      return performance.memory.usedJSHeapSize / 1024 / 1024;
+    }
+    return 0;
+  }
+};
+var rendering_performance_monitor_default = RenderingPerformanceMonitor;
+
+// src/force-graph-wrapper/core/canvas-optimizer.ts
+var CanvasOptimizer = class {
+  canvas = null;
+  context = null;
+  imageDataCache = /* @__PURE__ */ new Map();
+  pathCache = /* @__PURE__ */ new Map();
+  renderQueue = [];
+  isOptimizing = false;
+  settings = {
+    enableBatching: true,
+    enableCaching: true,
+    enableLOD: true,
+    lodThreshold: 500,
+    // Start LOD optimizations at 500+ nodes
+    cacheSize: 100,
+    batchSize: 50,
+    cullingEnabled: true,
+    cullingMargin: 100
+    // pixels outside viewport to still render
+  };
+  viewport = {
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+    scale: 1
+  };
+  constructor(settings) {
+    if (settings) {
+      this.settings = { ...this.settings, ...settings };
+    }
+  }
+  /**
+   * Initialize optimizer with canvas element
+   */
+  initialize(canvas) {
+    this.canvas = canvas;
+    this.context = canvas.getContext("2d");
+    this.updateViewport();
+  }
+  /**
+   * Clean up all cached data and references
+   */
+  destroy() {
+    console.log("\u{1F9F9} Cleaning up CanvasOptimizer...");
+    this.imageDataCache.clear();
+    this.pathCache.clear();
+    this.renderQueue.length = 0;
+    this.canvas = null;
+    this.context = null;
+    this.isOptimizing = false;
+    console.log("\u2705 CanvasOptimizer cleanup completed");
+  }
+  /**
+   * Update viewport information for culling calculations
+   */
+  updateViewport(x3, y3, scale) {
+    if (!this.canvas) return;
+    this.viewport = {
+      x: x3 ?? this.viewport.x,
+      y: y3 ?? this.viewport.y,
+      width: this.canvas.width,
+      height: this.canvas.height,
+      scale: scale ?? this.viewport.scale
+    };
+  }
+  /**
+   * Optimize node rendering based on current settings and viewport
+   */
+  optimizeNodeRendering(nodes, renderFunction) {
+    if (!this.context || !this.settings.enableLOD) {
+      nodes.forEach((node) => renderFunction(node, 0));
+      return;
+    }
+    const nodeCount = nodes.length;
+    const shouldUseLOD = nodeCount > this.settings.lodThreshold;
+    const lodLevel = shouldUseLOD ? this.calculateLODLevel(nodeCount, this.viewport.scale) : 0;
+    if (this.settings.enableBatching) {
+      this.batchRender(nodes, (node) => renderFunction(node, lodLevel));
+    } else {
+      const visibleNodes = this.settings.cullingEnabled ? this.cullNodes(nodes) : nodes;
+      visibleNodes.forEach((node) => renderFunction(node, lodLevel));
+    }
+  }
+  /**
+   * Optimize link rendering with batching and culling
+   */
+  optimizeLinkRendering(links, renderFunction) {
+    if (!this.context) {
+      links.forEach((link) => renderFunction(link, 0));
+      return;
+    }
+    const linkCount = links.length;
+    const lodLevel = linkCount > this.settings.lodThreshold ? this.calculateLODLevel(linkCount, this.viewport.scale) : 0;
+    if (this.settings.enableBatching) {
+      this.batchRender(links, (link) => renderFunction(link, lodLevel));
+    } else {
+      const visibleLinks = this.settings.cullingEnabled ? this.cullLinks(links) : links;
+      visibleLinks.forEach((link) => renderFunction(link, lodLevel));
+    }
+  }
+  /**
+   * Cache commonly used drawing operations
+   */
+  getCachedPath(key, createPath) {
+    if (!this.settings.enableCaching) {
+      return createPath();
+    }
+    if (this.pathCache.has(key)) {
+      return this.pathCache.get(key);
+    }
+    const path = createPath();
+    if (this.pathCache.size >= this.settings.cacheSize) {
+      const firstKey = this.pathCache.keys().next().value;
+      if (firstKey !== void 0) {
+        this.pathCache.delete(firstKey);
+      }
+    }
+    this.pathCache.set(key, path);
+    return path;
+  }
+  /**
+   * Cache image data for complex shapes or textures
+   */
+  getCachedImageData(key, createImageData) {
+    if (!this.settings.enableCaching) {
+      return createImageData();
+    }
+    if (this.imageDataCache.has(key)) {
+      return this.imageDataCache.get(key);
+    }
+    const imageData = createImageData();
+    if (this.imageDataCache.size >= this.settings.cacheSize) {
+      const firstKey = this.imageDataCache.keys().next().value;
+      if (firstKey !== void 0) {
+        this.imageDataCache.delete(firstKey);
+      }
+    }
+    this.imageDataCache.set(key, imageData);
+    return imageData;
+  }
+  /**
+   * Batch render operations for better performance
+   */
+  batchRender(items, renderFunction) {
+    if (!this.context) return;
+    for (let i = 0; i < items.length; i += this.settings.batchSize) {
+      const batch = items.slice(i, i + this.settings.batchSize);
+      const visibleItems = this.settings.cullingEnabled ? batch.filter((item) => this.isItemVisible(item)) : batch;
+      this.context.save();
+      visibleItems.forEach(renderFunction);
+      this.context.restore();
+    }
+  }
+  /**
+   * Calculate appropriate LOD level based on node count and zoom
+   */
+  calculateLODLevel(itemCount, scale) {
+    if (itemCount < this.settings.lodThreshold) return 0;
+    if (scale > 2) return 0;
+    if (scale > 1) return 1;
+    if (itemCount < 1e3) return 1;
+    if (itemCount < 2e3) return 2;
+    return 3;
+  }
+  /**
+   * Cull nodes outside the visible viewport
+   */
+  cullNodes(nodes) {
+    return nodes.filter((node) => this.isNodeVisible(node));
+  }
+  /**
+   * Cull links outside the visible viewport
+   */
+  cullLinks(links) {
+    return links.filter((link) => this.isLinkVisible(link));
+  }
+  /**
+   * Check if a node is visible in the current viewport
+   */
+  isNodeVisible(node) {
+    if (!node.x || !node.y) return true;
+    const margin = this.settings.cullingMargin;
+    const { x: x3, y: y3, width, height, scale } = this.viewport;
+    const worldX = (node.x - x3) * scale;
+    const worldY = (node.y - y3) * scale;
+    return worldX >= -margin && worldX <= width + margin && worldY >= -margin && worldY <= height + margin;
+  }
+  /**
+   * Check if a link is visible in the current viewport
+   */
+  isLinkVisible(link) {
+    const source = link.source;
+    const target = link.target;
+    if (!source || !target) return true;
+    return this.isNodeVisible(source) || this.isNodeVisible(target) || this.lineIntersectsViewport(source, target);
+  }
+  /**
+   * Generic item visibility check
+   */
+  isItemVisible(item) {
+    const itemWithXY = item;
+    const itemWithSourceTarget = item;
+    if (itemWithXY.x !== void 0 && itemWithXY.y !== void 0) {
+      return this.isNodeVisible(itemWithXY);
+    }
+    if (itemWithSourceTarget.source && itemWithSourceTarget.target) {
+      return this.isLinkVisible(itemWithSourceTarget);
+    }
+    return true;
+  }
+  /**
+   * Check if a line intersects with the viewport
+   */
+  lineIntersectsViewport(source, target) {
+    const { x: x3, y: y3, width, height } = this.viewport;
+    const margin = this.settings.cullingMargin;
+    if (source.x === void 0 || source.y === void 0 || target.x === void 0 || target.y === void 0) {
+      return true;
+    }
+    const minX = Math.min(source.x, target.x);
+    const maxX = Math.max(source.x, target.x);
+    const minY = Math.min(source.y, target.y);
+    const maxY = Math.max(source.y, target.y);
+    return !(maxX < x3 - margin || minX > x3 + width + margin || maxY < y3 - margin || minY > y3 + height + margin);
+  }
+  /**
+   * Clear all caches
+   */
+  clearCaches() {
+    this.imageDataCache.clear();
+    this.pathCache.clear();
+  }
+  /**
+   * Get cache statistics
+   */
+  getCacheStats() {
+    return {
+      pathCacheSize: this.pathCache.size,
+      imageCacheSize: this.imageDataCache.size,
+      pathCacheHitRate: 0,
+      // Would need hit/miss tracking
+      imageCacheHitRate: 0
+      // Would need hit/miss tracking
+    };
+  }
+  /**
+   * Update optimization settings
+   */
+  updateSettings(newSettings) {
+    this.settings = { ...this.settings, ...newSettings };
+  }
+  /**
+   * Get current optimization settings
+   */
+  getSettings() {
+    return { ...this.settings };
+  }
+};
+var canvas_optimizer_default = CanvasOptimizer;
+
+// src/force-graph-wrapper/core/force-graph-wrapper.ts
+var ForceGraphWrapper = class {
+  // Core force-graph instance (strategic use of 'unknown' for library integration)
+  forceGraph = null;
+  // Container element
+  container;
+  // Performance monitor
+  performanceMonitor;
+  // Step 4: Advanced rendering performance monitoring
+  renderingMonitor = null;
+  canvasOptimizer = null;
+  // Configuration
+  config;
+  // State tracking
+  isInitialized = false;
+  isDestroyed = false;
+  isRenderingOptimized = false;
+  enableVerboseLogging = false;
+  // Disable by default for performance
+  // Page visibility handling for deterministic layouts
+  wasInitializedHidden = false;
+  visibilityChangeHandler = null;
+  // Element viewport visibility handling for deterministic physics
+  wasInitializedOutOfView = false;
+  intersectionObserver = null;
+  // Web Worker physics for all graphs (deterministic layouts)
+  webWorkerPhysicsCompleted = false;
+  physicsTimeoutId = void 0;
+  // Cached container dimensions when visible
+  lastKnownDimensions = null;
+  // Deferred fitView parameters for library-level handling
+  deferredFitViewParams = null;
+  pendingFitView = false;
+  // Performance testing interval tracking for cleanup
+  performanceTestInterval = null;
+  // Canvas event listener for cleanup
+  canvasClickHandler = null;
+  // Export animation timeout for cleanup
+  exportTimeoutId = null;
+  // Graph controls UI
+  controlsInstance = null;
+  // Graph legends UI
+  legendsInstance = null;
+  /**
+   * Helper method to safely cast and call methods on the force graph instance
+   */
+  getGraphInstance() {
+    return this.forceGraph;
+  }
+  /**
+   * Constructor - Step 1 Performance Test
+   * Target: < 1ms creation time
+   */
+  constructor(container, config) {
+    const creationStart = performance.now();
+    if (!container || !(container instanceof HTMLElement)) {
+      throw new Error("Invalid container: must be an HTMLElement");
+    }
+    this.container = container;
+    this.performanceMonitor = new PerformanceMonitor();
+    if (config?.enablePerformanceMonitoring) {
+      this.renderingMonitor = new rendering_performance_monitor_default({
+        targetFps: 60,
+        maxFrameTime: 16.67,
+        maxDroppedFrames: 5,
+        efficiencyThreshold: 0.8
+      });
+      this.canvasOptimizer = new canvas_optimizer_default({
+        enableBatching: false,
+        // Keep it simple like react-force-graph
+        enableCaching: false,
+        enableLOD: false,
+        lodThreshold: 500,
+        cullingEnabled: false
+      });
+    }
+    this.config = {
+      container,
+      width: container.clientWidth || 400,
+      height: container.clientHeight || 300,
+      backgroundColor: "#ffffff",
+      enablePerformanceMonitoring: false,
+      // Disable by default for better performance
+      controls: {
+        enabled: true,
+        position: "bottom-left",
+        orientation: "vertical"
+      },
+      legends: {
+        enabled: true,
+        position: "top-right",
+        maxItems: 10
+      },
+      ...config
+    };
+    this.enableVerboseLogging = config?.enablePerformanceMonitoring === true && config?.performanceTargets?.methodCall !== void 0;
+    this.setupPageVisibilityHandling();
+    this.setupDeterministicPhysics();
+    const creationTime = performance.now() - creationStart;
+    this.performanceMonitor.setMetric("creation", creationTime);
+    if (this.enableVerboseLogging) {
+      this.validateCreationPerformance(creationTime);
+    }
+  }
+  /**
+   * Step 1 Performance Validation
+   */
+  validateCreationPerformance(_creationTime) {
+  }
+  /**
+   * Setup automatic page visibility handling for deterministic layouts
+   * Ensures consistent graph layouts regardless of tab visibility during initialization
+   */
+  setupPageVisibilityHandling() {
+    if (this.config.handlePageVisibility === false) {
+      return;
+    }
+    this.wasInitializedHidden = document.hidden;
+    this.visibilityChangeHandler = () => {
+      if (!document.hidden && this.isInitialized) {
+        if (this.wasInitializedHidden) {
+          if (this.enableVerboseLogging) {
+            console.log("\u{1F504} Restarting simulation due to visibility change for layout consistency");
+          }
+          this.getGraphInstance().d3ReheatSimulation();
+          this.wasInitializedHidden = false;
+        }
+        if (this.pendingFitView) {
+          setTimeout(() => {
+            if (this.enableVerboseLogging) {
+              console.log("\u{1F3AF} Executing deferred fitView after visibility change");
+            }
+            this.zoomToFit(40, 300);
+          }, 100);
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+  }
+  /**
+   * Cleanup page visibility handling
+   */
+  cleanupPageVisibilityHandling() {
+    if (this.visibilityChangeHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+      this.visibilityChangeHandler = null;
+    }
+  }
+  /**
+   * Setup deterministic physics handling for viewport visibility
+   * Ensures consistent physics timing regardless of element visibility
+   */
+  setupDeterministicPhysics() {
+    if (this.config.deterministicLayout === false) {
+      return;
+    }
+    const isInViewport = this.isElementInViewport(this.container);
+    this.wasInitializedOutOfView = !isInViewport;
+    if (this.enableVerboseLogging) {
+      const rect = this.container.getBoundingClientRect();
+      console.log(`\u{1F4CD} Graph initialized:`, {
+        wasInitializedOutOfView: this.wasInitializedOutOfView,
+        isInViewport,
+        containerDimensions: `${this.container.clientWidth}x${this.container.clientHeight}`,
+        boundingRect: {
+          top: rect.top,
+          bottom: rect.bottom,
+          left: rect.left,
+          right: rect.right
+        },
+        windowSize: `${window.innerWidth}x${window.innerHeight}`
+      });
+    }
+    if (typeof IntersectionObserver !== "undefined") {
+      const scrollableParent = this.findScrollableParent(this.container);
+      this.intersectionObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && this.isInitialized) {
+            if (this.wasInitializedOutOfView) {
+              if (this.enableVerboseLogging) {
+                console.log("\u{1F504} Element entered viewport - ensuring consistent physics");
+              }
+              if (this.physicsTimeoutId) {
+                window.clearTimeout(this.physicsTimeoutId);
+                this.physicsTimeoutId = void 0;
+              }
+              if (!this.webWorkerPhysicsCompleted) {
+                this.runWebWorkerPhysics();
+              }
+              this.wasInitializedOutOfView = false;
+            }
+            if (this.pendingFitView) {
+              setTimeout(() => {
+                if (this.pendingFitView) {
+                  if (this.enableVerboseLogging) {
+                    console.log("\u{1F3AF} Executing deferred fitView after entering viewport");
+                  }
+                  this.zoomToFit(40, 300);
+                }
+              }, 100);
+            }
+          }
+        });
+      }, {
+        root: scrollableParent,
+        // Use found scrollable parent as root
+        threshold: 0.1,
+        // Trigger when 10% visible
+        rootMargin: "100px"
+        // Larger margin like Angular component
+      });
+      this.intersectionObserver.observe(this.container);
+    }
+  }
+  /**
+   * Find the scrollable parent container for intersection observer
+   * Similar to Angular component approach but more generic
+   */
+  findScrollableParent(element) {
+    let current = element.parentElement;
+    while (current && current !== document.body) {
+      const style = window.getComputedStyle(current);
+      const overflow = style.overflow + style.overflowY + style.overflowX;
+      if (/(auto|scroll)/.test(overflow) && (current.scrollHeight > current.clientHeight || current.scrollWidth > current.clientWidth)) {
+        if (this.enableVerboseLogging) {
+          console.log("\u{1F4CD} Found scrollable parent:", current.className || current.tagName);
+        }
+        return current;
+      }
+      current = current.parentElement;
+    }
+    if (this.enableVerboseLogging) {
+      console.log("\u{1F4CD} No scrollable parent found, using viewport as root");
+    }
+    return null;
+  }
+  /**
+   * Setup deferred fitView mechanism using IntersectionObserver
+   * This handles library-level viewport-aware fitView
+   */
+  setupDeferredFitView() {
+    if (this.intersectionObserver || !this.container || !this.deferredFitViewParams) {
+      return;
+    }
+    if (this.enableVerboseLogging) {
+      console.log("\u{1F3AF} Setting up library-level deferred fitView");
+    }
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && this.pendingFitView && this.deferredFitViewParams) {
+          if (this.enableVerboseLogging) {
+            console.log("\u{1F3AF} Library executing deferred fitView (now visible)");
+          }
+          const { padding, duration } = this.deferredFitViewParams;
+          this.pendingFitView = false;
+          this.deferredFitViewParams = null;
+          if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+          }
+          requestAnimationFrame(() => {
+            this.executeFitViewNow(padding, duration);
+          });
+        }
+      });
+    }, {
+      threshold: 0.1,
+      rootMargin: "50px"
+      // Start checking slightly before fully visible
+    });
+    this.intersectionObserver.observe(this.container);
+  }
+  /**
+   * Execute fitView immediately (bypass visibility checks)
+   */
+  executeFitViewNow(padding, duration) {
+    if (!this.forceGraph || !this.container) return;
+    const containerWidth = this.container.clientWidth;
+    const containerHeight = this.container.clientHeight;
+    if (containerWidth === 0 || containerHeight === 0) {
+      if (this.enableVerboseLogging) {
+        console.warn("\u26A0\uFE0F Still no valid dimensions for deferred fitView");
+      }
+      return;
+    }
+    this.cacheContainerDimensions();
+    const bbox = this.getGraphInstance().getGraphBbox();
+    const width = bbox.x[1] - bbox.x[0];
+    const height = bbox.y[1] - bbox.y[0];
+    const centerX = (bbox.x[0] + bbox.x[1]) / 2;
+    const centerY = (bbox.y[0] + bbox.y[1]) / 2;
+    const viewportWidth = containerWidth - padding * 2;
+    const viewportHeight = containerHeight - padding * 2;
+    if (width > 0 && height > 0) {
+      const scale = Math.min(viewportWidth / width, viewportHeight / height);
+      this.getGraphInstance().centerAt(centerX, centerY, duration);
+      this.getGraphInstance().zoom(scale, duration);
+      if (this.enableVerboseLogging) {
+        console.log("\u2705 Library deferred fitView executed successfully");
+      }
+    }
+  }
+  /**
+   * Cleanup deferred fitView intersection observer
+   */
+  cleanupDeferredFitView() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    this.deferredFitViewParams = null;
+    this.pendingFitView = false;
+  }
+  /**
+   * Cleanup performance test interval
+   */
+  cleanupPerformanceTest() {
+    if (this.performanceTestInterval) {
+      clearInterval(this.performanceTestInterval);
+      this.performanceTestInterval = null;
+    }
+  }
+  /**
+   * Cleanup export animation timeout
+   */
+  cleanupExportTimeout() {
+    if (this.exportTimeoutId) {
+      clearTimeout(this.exportTimeoutId);
+      this.exportTimeoutId = null;
+    }
+  }
+  /**
+   * Cleanup canvas event listeners
+   */
+  cleanupCanvasEventListeners() {
+    if (this.canvasClickHandler && this.container) {
+      const canvas = this.container.querySelector("canvas");
+      if (canvas) {
+        canvas.removeEventListener("click", this.canvasClickHandler);
+      }
+      this.canvasClickHandler = null;
+    }
+  }
+  /**
+   * Check if element is currently visible (even partially) in viewport
+   */
+  isElementInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+    return rect.bottom > 0 && // Not above viewport
+    rect.right > 0 && // Not to the left of viewport
+    rect.top < windowHeight && // Not below viewport
+    rect.left < windowWidth;
+  }
+  /**
+   * Cache container dimensions when they're valid (non-zero)
+   */
+  cacheContainerDimensions() {
+    const width = this.container.clientWidth;
+    const height = this.container.clientHeight;
+    if (width > 0 && height > 0) {
+      this.lastKnownDimensions = { width, height };
+      if (this.enableVerboseLogging) {
+        console.log("\u{1F4D0} Cached container dimensions:", this.lastKnownDimensions);
+      }
+    }
+  }
+  /**
+   * Check if container has valid dimensions and cache them
+   */
+  hasValidDimensions() {
+    const width = this.container.clientWidth;
+    const height = this.container.clientHeight;
+    if (width > 0 && height > 0) {
+      this.cacheContainerDimensions();
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Run deterministic physics using Web Worker for off-screen graphs only
+   */
+  async runWebWorkerPhysics() {
+    if (!this.config.graphData || !this.container || this.webWorkerPhysicsCompleted) return;
+    const { nodes, links } = this.config.graphData;
+    if (!nodes || nodes.length === 0) return;
+    if (this.physicsTimeoutId) {
+      window.clearTimeout(this.physicsTimeoutId);
+      this.physicsTimeoutId = void 0;
+    }
+    try {
+      if (!physicsWorkerManager.isAvailable()) {
+        if (this.enableVerboseLogging) {
+          console.warn("\u26A0\uFE0F Web Worker not available, using main thread physics");
+        }
+        return;
+      }
+      const containerWidth = this.container.clientWidth || this.config.width || 800;
+      const containerHeight = this.container.clientHeight || this.config.height || 600;
+      const config = {
+        nodes: nodes.map((node) => ({ ...node })),
+        links: links ? links.map((link) => ({ ...link })) : [],
+        width: containerWidth,
+        height: containerHeight,
+        maxTicks: 300,
+        // Deterministic tick count for off-screen graphs
+        alphaDecay: this.config.d3AlphaDecay || 0.0228,
+        // Use wrapper config or default
+        velocityDecay: this.config.d3VelocityDecay || 0.4,
+        // Use wrapper config or default
+        forces: {}
+        // Let worker use force-graph defaults
+      };
+      if (this.enableVerboseLogging) {
+        console.log("\u{1F3AF} Web Worker physics config:", {
+          containerDimensions: `${containerWidth}x${containerHeight}`,
+          configDimensions: `${this.config.width || "auto"}x${this.config.height || "auto"}`,
+          nodeCount: nodes.length
+        });
+      }
+      if (this.enableVerboseLogging) {
+        console.log("\u{1F504} Running Web Worker physics for ALL graphs (visible & hidden)...");
+      }
+      const initialized = await physicsWorkerManager.initialize(config);
+      if (!initialized) {
+        throw new Error("Failed to initialize Web Worker physics");
+      }
+      const finalNodes = await physicsWorkerManager.runSimulation();
+      this.applyWebWorkerResults(finalNodes);
+      this.webWorkerPhysicsCompleted = true;
+      if (this.enableVerboseLogging) {
+        console.log(`\u2705 Web Worker physics completed for ALL graphs with ${finalNodes.length} nodes`);
+      }
+    } catch (error) {
+      if (this.enableVerboseLogging) {
+        console.warn("\u26A0\uFE0F Web Worker physics failed:", error);
+      }
+    }
+  }
+  /**
+   * Apply Web Worker results to force-graph instance WITHOUT disrupting interactions
+   */
+  applyWebWorkerResults(physicsNodes) {
+    if (!this.forceGraph || !this.config.graphData?.nodes) return;
+    const nodeMap = new Map(physicsNodes.map((node) => [node.id, node]));
+    this.config.graphData.nodes.forEach((node) => {
+      const physicsNode = nodeMap.get(node.id);
+      if (physicsNode) {
+        if (typeof node.fx === "undefined") {
+          node.x = physicsNode.x;
+          node.y = physicsNode.y;
+        }
+      }
+    });
+    if (this.forceGraph) {
+      const graphInstance = this.getGraphInstance();
+      graphInstance.graphData(this.config.graphData);
+      if (!document.hidden && this.isElementInViewport(this.container)) {
+        graphInstance.d3ReheatSimulation();
+      }
+    }
+    this.triggerKapsuleUpdate();
+    if (this.enableVerboseLogging) {
+      console.log("\u2705 Applied Web Worker results without disrupting interactions");
+    }
+  }
+  /**
+   * Cleanup deterministic physics handling
+   */
+  cleanupDeterministicPhysics() {
+    if (this.physicsTimeoutId) {
+      window.clearTimeout(this.physicsTimeoutId);
+      this.physicsTimeoutId = void 0;
+    }
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+  }
+  /**
+   * Initialize the underlying force-graph instance
+   * Step 2: Data loading with performance validation
+   * Target: Linear scaling, < 10ms per 1000 nodes
+   */
+  initializeForceGraph() {
+    if (this.isInitialized || this.isDestroyed) {
+      return;
+    }
+    const initStart = performance.now();
+    try {
+      this.forceGraph = ForceGraph()(this.container);
+      if (!this.forceGraph) {
+        throw new Error("Failed to create force-graph instance");
+      }
+      this.applyConfiguration();
+      this.isInitialized = true;
+      if (this.config.enablePerformanceMonitoring) {
+        this.setupRenderingMonitoring();
+      }
+      const initTime = performance.now() - initStart;
+      this.performanceMonitor.setMetric("firstRender", initTime);
+      if (this.config.enablePerformanceMonitoring) {
+        this.validateInitializationPerformance(initTime);
+      }
+    } catch (error) {
+      this.isInitialized = false;
+      throw new Error(`Failed to initialize force-graph: ${error}`);
+    }
+  }
+  /**
+   * Apply configuration to force-graph instance
+   * Step 2: Performance-optimized configuration application
+   */
+  applyConfiguration() {
+    if (!this.forceGraph || !this.config) return;
+    const graph = this.getGraphInstance();
+    graph.width(this.config.width || 400).height(this.config.height || 300).backgroundColor(this.config.backgroundColor || "#ffffff").autoPauseRedraw(this.config.autoPauseRedraw ?? true);
+    if (this.config.d3AlphaDecay !== void 0) {
+      graph.d3AlphaDecay(this.config.d3AlphaDecay);
+    }
+    if (this.config.d3VelocityDecay !== void 0) {
+      graph.d3VelocityDecay(this.config.d3VelocityDecay);
+    }
+    if (this.config.d3AlphaMin !== void 0) {
+      graph.d3AlphaMin(this.config.d3AlphaMin);
+    }
+    if (this.config.cooldownTime !== void 0) {
+      graph.cooldownTime(this.config.cooldownTime);
+    }
+    if (this.config.cooldownTicks !== void 0) {
+      graph.cooldownTicks(this.config.cooldownTicks);
+    }
+    if (this.config.nodeColor) {
+      graph.nodeColor(this.config.nodeColor);
+    }
+    if (this.config.nodeVal) {
+      graph.nodeVal(this.config.nodeVal);
+    }
+    if (this.config.nodeRelSize !== void 0) {
+      graph.nodeRelSize(this.config.nodeRelSize);
+    }
+    if (this.config.nodeLabel) {
+      graph.nodeLabel(this.config.nodeLabel);
+    }
+    if (this.config.nodeVisibility) {
+      graph.nodeVisibility(this.config.nodeVisibility);
+    }
+    if (this.config.nodeCanvasObjectMode) {
+      graph.nodeCanvasObjectMode(this.config.nodeCanvasObjectMode);
+    }
+    if (this.config.linkColor) {
+      graph.linkColor(this.config.linkColor);
+    }
+    if (this.config.linkWidth) {
+      graph.linkWidth(this.config.linkWidth);
+    }
+    if (this.config.linkLabel) {
+      graph.linkLabel(this.config.linkLabel);
+    }
+    if (this.config.linkVisibility) {
+      graph.linkVisibility(this.config.linkVisibility);
+    }
+    if (this.config.linkDirectionalArrowLength !== void 0) {
+      graph.linkDirectionalArrowLength(this.config.linkDirectionalArrowLength);
+    }
+    if (this.config.linkDirectionalArrowColor) {
+      graph.linkDirectionalArrowColor(this.config.linkDirectionalArrowColor);
+    }
+    if (this.config.linkDirectionalArrowRelPos !== void 0) {
+      graph.linkDirectionalArrowRelPos(this.config.linkDirectionalArrowRelPos);
+    }
+    if (this.config.linkDirectionalParticles !== void 0) {
+      graph.linkDirectionalParticles(this.config.linkDirectionalParticles);
+    }
+    if (this.config.linkDirectionalParticleSpeed !== void 0) {
+      graph.linkDirectionalParticleSpeed(this.config.linkDirectionalParticleSpeed);
+    }
+    if (this.config.linkDirectionalParticleWidth !== void 0) {
+      graph.linkDirectionalParticleWidth(this.config.linkDirectionalParticleWidth);
+    }
+    if (this.config.linkDirectionalParticleColor) {
+      graph.linkDirectionalParticleColor(this.config.linkDirectionalParticleColor);
+    }
+    if (this.config.linkCurvature !== void 0) {
+      graph.linkCurvature(this.config.linkCurvature);
+    }
+    if (this.config.linkCanvasObjectMode) {
+      graph.linkCanvasObjectMode(this.config.linkCanvasObjectMode);
+    }
+    if (this.config.enableNodeDrag !== void 0) {
+      graph.enableNodeDrag(this.config.enableNodeDrag);
+    }
+    if (this.config.enableZoomInteraction !== void 0) {
+      graph.enableZoomInteraction(this.config.enableZoomInteraction);
+    }
+    if (this.config.enablePanInteraction !== void 0) {
+      graph.enablePanInteraction(this.config.enablePanInteraction);
+    }
+    if (this.config.enablePerformanceMonitoring) {
+      this.setupRenderingMonitoring();
+    }
+    if (this.config.onNodeClick) {
+      graph.onNodeClick(this.config.onNodeClick);
+    }
+    if (this.config.onNodeHover) {
+      graph.onNodeHover(this.config.onNodeHover);
+    }
+    if (this.config.onLinkClick) {
+      graph.onLinkClick(this.config.onLinkClick);
+    }
+    if (this.config.onLinkHover) {
+      graph.onLinkHover(this.config.onLinkHover);
+    }
+    if (this.config.onRenderFramePre) {
+      graph.onRenderFramePre(this.config.onRenderFramePre);
+    }
+    if (this.config.onRenderFramePost) {
+      graph.onRenderFramePost(this.config.onRenderFramePost);
+    }
+    if (this.config.onEngineTick) {
+      graph.onEngineTick(this.config.onEngineTick);
+    }
+    if (this.config.onEngineStop) {
+      graph.onEngineStop(this.config.onEngineStop);
+    }
+  }
+  /**
+   * Step 2 Performance Validation for Initialization
+   */
+  validateInitializationPerformance(_initTime) {
+  }
+  /**
+   * Validate data loading performance based on node/link count
+   * Step 2: Linear scaling validation
+   */
+  validateDataLoadingPerformance(_loadTime, nodeCount, linkCount) {
+    this.performanceMonitor.setMetric("nodeCount", nodeCount);
+    this.performanceMonitor.setMetric("linkCount", linkCount);
+  }
+  // =============================================================================
+  // PUBLIC API - ForceGraphMethods
+  // =============================================================================
+  d3ReheatSimulation() {
+    if (!this.isInitialized) this.initializeForceGraph();
+    if (this.forceGraph) {
+      this.getGraphInstance().d3ReheatSimulation();
+    }
+    if (this.enableVerboseLogging) {
+      console.log("\u2705 d3ReheatSimulation called");
+    }
+  }
+  stopAnimation() {
+    if (!this.isInitialized) return;
+    const start2 = performance.now();
+    if (this.forceGraph) {
+      this.getGraphInstance().pauseAnimation();
+    }
+    const duration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 stopAnimation completed in ${duration.toFixed(3)}ms`);
+    }
+  }
+  pauseAnimation() {
+    if (!this.isInitialized) return;
+    const start2 = performance.now();
+    if (this.forceGraph) {
+      this.getGraphInstance().pauseAnimation();
+    }
+    const duration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 pauseAnimation completed in ${duration.toFixed(3)}ms`);
+    }
+  }
+  resumeAnimation() {
+    if (!this.isInitialized) return;
+    const start2 = performance.now();
+    if (this.forceGraph) {
+      this.getGraphInstance().resumeAnimation();
+    }
+    const duration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 resumeAnimation completed in ${duration.toFixed(3)}ms`);
+    }
+  }
+  centerAt(x3, y3, duration) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    const start2 = performance.now();
+    if (this.forceGraph) {
+      this.getGraphInstance().centerAt(x3, y3, duration);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 centerAt(${x3}, ${y3}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+  }
+  zoom(scale, duration) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    const start2 = performance.now();
+    let result = void 0;
+    if (this.forceGraph) {
+      if (scale === void 0) {
+        result = this.getGraphInstance().zoom();
+      } else {
+        this.getGraphInstance().zoom(scale, duration);
+        result = void 0;
+      }
+    } else if (scale === void 0) {
+      result = 1;
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      if (scale === void 0) {
+        console.log(`\u2705 zoom() getter completed in ${callDuration.toFixed(3)}ms`);
+      } else {
+        console.log(`\u2705 zoom(${scale}) setter completed in ${callDuration.toFixed(3)}ms`);
+      }
+    }
+    return result;
+  }
+  zoomToFit(padding, duration) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    const start2 = performance.now();
+    const containerWidth = this.container.clientWidth;
+    const containerHeight = this.container.clientHeight;
+    const isInViewport = this.container ? this.isElementInViewport(this.container) : false;
+    const isVisible = !document.hidden && isInViewport;
+    const hasValidDimensions = containerWidth > 0 && containerHeight > 0;
+    let bboxValid = false;
+    if (this.forceGraph) {
+      const bbox = this.getGraphInstance().getGraphBbox();
+      bboxValid = bbox && bbox.x[1] - bbox.x[0] > 0 && bbox.y[1] - bbox.y[0] > 0;
+    }
+    if (this.enableVerboseLogging) {
+      console.log("\u{1F3AF} Library zoomToFit called:", {
+        containerDimensions: `${containerWidth}x${containerHeight}`,
+        isInViewport,
+        isVisible,
+        hasValidDimensions,
+        bboxValid,
+        documentHidden: document.hidden,
+        padding: padding || 40,
+        duration: duration || 300
+      });
+    }
+    if (!isVisible || !hasValidDimensions || !bboxValid) {
+      this.deferredFitViewParams = { padding: padding || 40, duration: duration || 300 };
+      this.pendingFitView = true;
+      if (this.enableVerboseLogging) {
+        console.log("\u{1F3AF} Library DEFERRING fitView:", {
+          reason: !isVisible ? "not visible" : !hasValidDimensions ? "invalid dimensions" : "invalid bbox"
+        });
+      }
+      this.setupDeferredFitView();
+      return;
+    }
+    if (this.forceGraph && this.container) {
+      this.cacheContainerDimensions();
+      const bbox = this.getGraphInstance().getGraphBbox();
+      const width = bbox.x[1] - bbox.x[0];
+      const height = bbox.y[1] - bbox.y[0];
+      const centerX = (bbox.x[0] + bbox.x[1]) / 2;
+      const centerY = (bbox.y[0] + bbox.y[1]) / 2;
+      const paddingValue = padding || 40;
+      const viewportWidth = containerWidth - paddingValue;
+      const viewportHeight = containerHeight - paddingValue;
+      const scale = Math.min(viewportWidth / width, viewportHeight / height);
+      if (this.enableVerboseLogging) {
+        console.log("\u{1F3AF} zoomToFit calculations:", {
+          bbox: { width, height, centerX, centerY },
+          container: {
+            clientWidth: containerWidth,
+            clientHeight: containerHeight,
+            viewportWidth,
+            viewportHeight
+          },
+          scale,
+          willApply: width > 0 && height > 0
+        });
+      }
+      if (width > 0 && height > 0) {
+        this.getGraphInstance().centerAt(centerX, centerY);
+        this.getGraphInstance().zoom(scale, duration || 300);
+        this.pendingFitView = false;
+        if (this.enableVerboseLogging) {
+          console.log("\u2705 zoomToFit applied successfully");
+        }
+      } else if (this.enableVerboseLogging) {
+        console.warn("\u26A0\uFE0F zoomToFit skipped - invalid bbox:", {
+          bboxValid: width > 0 && height > 0
+        });
+      }
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 zoomToFit() completed in ${callDuration.toFixed(3)}ms`);
+    }
+  }
+  screen2GraphCoords(screenX, screenY) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    const start2 = performance.now();
+    let result = { x: 0, y: 0 };
+    if (this.forceGraph) {
+      result = this.getGraphInstance().screen2GraphCoords(screenX, screenY) || { x: 0, y: 0 };
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 screen2GraphCoords(${screenX}, ${screenY}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return result;
+  }
+  graph2ScreenCoords(graphX, graphY) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    const start2 = performance.now();
+    let result = { x: 0, y: 0 };
+    if (this.forceGraph) {
+      result = this.getGraphInstance().graph2ScreenCoords(graphX, graphY) || { x: 0, y: 0 };
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 graph2ScreenCoords(${graphX}, ${graphY}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return result;
+  }
+  getGraphBbox(nodes) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    const start2 = performance.now();
+    let result = { x: [0, 0], y: [0, 0] };
+    if (this.forceGraph) {
+      result = this.getGraphInstance().getGraphBbox(nodes) || { x: [0, 0], y: [0, 0] };
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 getGraphBbox() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return result;
+  }
+  emitParticle(link) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    const start2 = performance.now();
+    if (this.forceGraph) {
+      this.getGraphInstance().emitParticle(link);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 emitParticle() completed in ${callDuration.toFixed(3)}ms`);
+    }
+  }
+  d3Force(forceName, forceImpl) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    const start2 = performance.now();
+    if (this.forceGraph) {
+      if (forceImpl !== void 0) {
+        this.getGraphInstance().d3Force(forceName, forceImpl);
+        const callDuration2 = performance.now() - start2;
+        if (this.config.enablePerformanceMonitoring) {
+          console.log(`\u2705 d3Force(set ${forceName}) completed in ${callDuration2.toFixed(3)}ms`);
+        }
+        return this;
+      } else {
+        const result = this.getGraphInstance().d3Force(forceName);
+        const callDuration2 = performance.now() - start2;
+        if (this.config.enablePerformanceMonitoring) {
+          console.log(`\u2705 d3Force(get ${forceName}) completed in ${callDuration2.toFixed(3)}ms`);
+        }
+        return result;
+      }
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      const action = forceImpl !== void 0 ? "set" : "get";
+      console.log(`\u2705 d3Force(${action} ${forceName}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return forceImpl !== void 0 ? this : null;
+  }
+  graphData(data) {
+    if (data === void 0) {
+      return this.config.graphData ?? { nodes: [], links: [] };
+    }
+    this.config.graphData = data;
+    const nodeCount = data.nodes.length;
+    const linkCount = data.links.length;
+    this.pendingFitView = false;
+    this.performanceMonitor.setMetric("nodeCount", nodeCount);
+    this.performanceMonitor.setMetric("linkCount", linkCount);
+    this.webWorkerPhysicsCompleted = false;
+    if (!this.isInitialized) {
+      this.initializeForceGraph();
+    }
+    if (this.forceGraph) {
+      const loadStart = performance.now();
+      this.getGraphInstance().graphData(data);
+      const loadTime = performance.now() - loadStart;
+      this.performanceMonitor.setMetric("dataLoad", loadTime);
+      if (this.config.enablePerformanceMonitoring) {
+        this.validateDataLoadingPerformance(loadTime, nodeCount, linkCount);
+      }
+      this.updateLegends();
+    }
+    if (this.enableVerboseLogging) {
+      console.log(`\u{1F50D} Web Worker trigger check:`, {
+        deterministicLayout: this.config.deterministicLayout !== false,
+        wasInitializedOutOfView: this.wasInitializedOutOfView,
+        hasNodes: data?.nodes?.length > 0,
+        webWorkerCompleted: this.webWorkerPhysicsCompleted,
+        nodeCount: data?.nodes?.length || 0
+      });
+    }
+    if (this.config.deterministicLayout !== false && this.wasInitializedOutOfView && data?.nodes?.length > 0 && !this.webWorkerPhysicsCompleted) {
+      if (this.enableVerboseLogging) {
+        console.log(`\u{1F3AF} Triggering Web Worker physics for off-screen graph with ${data.nodes.length} nodes`);
+      }
+      if (this.physicsTimeoutId) {
+        window.clearTimeout(this.physicsTimeoutId);
+      }
+      this.physicsTimeoutId = window.setTimeout(() => {
+        this.runWebWorkerPhysics().catch((error) => {
+          if (this.enableVerboseLogging) {
+            console.warn("\u26A0\uFE0F Web Worker physics failed:", error);
+          }
+        });
+      }, 200);
+    }
+    return this;
+  }
+  width(width) {
+    if (width === void 0) {
+      return this.config.width ?? 400;
+    }
+    const start2 = performance.now();
+    this.config.width = width;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().width(width);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 width(${width}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  height(height) {
+    if (height === void 0) {
+      return this.config.height ?? 300;
+    }
+    const start2 = performance.now();
+    this.config.height = height;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().height(height);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 height(${height}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  backgroundColor(color2) {
+    if (color2 === void 0) {
+      return this.config.backgroundColor ?? "#ffffff";
+    }
+    const start2 = performance.now();
+    this.config.backgroundColor = color2;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().backgroundColor(color2);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 backgroundColor(${color2}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  nodeColor(color2) {
+    if (color2 === void 0) return this.config.nodeColor ?? "#999999";
+    const start2 = performance.now();
+    this.config.nodeColor = color2;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeColor(color2);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 nodeColor() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  nodeVal(val) {
+    if (val === void 0) return this.config.nodeVal ?? 1;
+    const start2 = performance.now();
+    this.config.nodeVal = val;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeVal(val);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 nodeVal() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  nodeRelSize(size) {
+    if (size === void 0) return this.config.nodeRelSize ?? 4;
+    const start2 = performance.now();
+    this.config.nodeRelSize = size;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeRelSize(size);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 nodeRelSize(${size}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  nodeLabel(label) {
+    if (label === void 0) return this.config.nodeLabel ?? "";
+    const start2 = performance.now();
+    this.config.nodeLabel = label;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeLabel(label);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 nodeLabel() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  nodeVisibility(visibility) {
+    if (visibility === void 0) return this.config.nodeVisibility ?? true;
+    const start2 = performance.now();
+    this.config.nodeVisibility = visibility;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeVisibility(visibility);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 nodeVisibility() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  nodeCanvasObjectMode(mode) {
+    if (mode === void 0) return this.config.nodeCanvasObjectMode ?? "replace";
+    const start2 = performance.now();
+    this.config.nodeCanvasObjectMode = mode;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeCanvasObjectMode(mode);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 nodeCanvasObjectMode() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkColor(color2) {
+    if (color2 === void 0) return this.config.linkColor ?? "#999999";
+    const start2 = performance.now();
+    this.config.linkColor = color2;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkColor(color2);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkColor() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkWidth(width) {
+    if (width === void 0) return this.config.linkWidth ?? 1;
+    const start2 = performance.now();
+    this.config.linkWidth = width;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkWidth(width);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkWidth() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkLabel(label) {
+    if (label === void 0) return this.config.linkLabel ?? "";
+    const start2 = performance.now();
+    this.config.linkLabel = label;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkLabel(label);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkLabel() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkVisibility(visibility) {
+    if (visibility === void 0) return this.config.linkVisibility ?? true;
+    const start2 = performance.now();
+    this.config.linkVisibility = visibility;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkVisibility(visibility);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkVisibility() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkDirectionalArrowLength(length) {
+    if (length === void 0) return this.config.linkDirectionalArrowLength ?? 0;
+    const start2 = performance.now();
+    this.config.linkDirectionalArrowLength = length;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalArrowLength(length);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkDirectionalArrowLength() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkDirectionalParticles(particles) {
+    if (particles === void 0) return this.config.linkDirectionalParticles ?? 0;
+    const start2 = performance.now();
+    this.config.linkDirectionalParticles = particles;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalParticles(particles);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkDirectionalParticles() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkDirectionalArrowColor(color2) {
+    if (color2 === void 0) return this.config.linkDirectionalArrowColor ?? "#999999";
+    const start2 = performance.now();
+    this.config.linkDirectionalArrowColor = color2;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalArrowColor(color2);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkDirectionalArrowColor() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkDirectionalArrowRelPos(position) {
+    if (position === void 0) return this.config.linkDirectionalArrowRelPos ?? 0.5;
+    const start2 = performance.now();
+    this.config.linkDirectionalArrowRelPos = position;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalArrowRelPos(position);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkDirectionalArrowRelPos(${position}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkDirectionalParticleSpeed(speed) {
+    if (speed === void 0) return this.config.linkDirectionalParticleSpeed ?? 1;
+    const start2 = performance.now();
+    this.config.linkDirectionalParticleSpeed = speed;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalParticleSpeed(speed);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkDirectionalParticleSpeed(${speed}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkDirectionalParticleWidth(width) {
+    if (width === void 0) return this.config.linkDirectionalParticleWidth ?? 4;
+    const start2 = performance.now();
+    this.config.linkDirectionalParticleWidth = width;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalParticleWidth(width);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkDirectionalParticleWidth(${width}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkDirectionalParticleColor(color2) {
+    if (color2 === void 0) return this.config.linkDirectionalParticleColor ?? "#999999";
+    const start2 = performance.now();
+    this.config.linkDirectionalParticleColor = color2;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalParticleColor(color2);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkDirectionalParticleColor() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkCurvature(curvature) {
+    if (curvature === void 0) return this.config.linkCurvature ?? 0;
+    const start2 = performance.now();
+    this.config.linkCurvature = curvature;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkCurvature(curvature);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkCurvature(${curvature}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkCanvasObjectMode(mode) {
+    if (mode === void 0) return this.config.linkCanvasObjectMode ?? "replace";
+    const start2 = performance.now();
+    this.config.linkCanvasObjectMode = mode;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkCanvasObjectMode(mode);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkCanvasObjectMode() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  onNodeClick(handler) {
+    if (handler === void 0) return this.config.onNodeClick ?? null;
+    const start2 = performance.now();
+    this.config.onNodeClick = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onNodeClick(handler);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 onNodeClick() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  onNodeDoubleClick(handler) {
+    if (handler === void 0) return this.config.onNodeDoubleClick ?? null;
+    const start2 = performance.now();
+    this.config.onNodeDoubleClick = handler || void 0;
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 onNodeDoubleClick() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  onNodeHover(handler) {
+    if (handler === void 0) return this.config.onNodeHover ?? null;
+    const start2 = performance.now();
+    this.config.onNodeHover = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onNodeHover(handler);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 onNodeHover() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  onLinkClick(handler) {
+    if (handler === void 0) return this.config.onLinkClick ?? null;
+    const start2 = performance.now();
+    this.config.onLinkClick = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onLinkClick(handler);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 onLinkClick() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  onLinkHover(handler) {
+    if (handler === void 0) return this.config.onLinkHover ?? null;
+    const start2 = performance.now();
+    this.config.onLinkHover = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onLinkHover(handler);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 onLinkHover() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  onRenderFramePre(handler) {
+    if (handler === void 0) return this.config.onRenderFramePre ?? null;
+    const start2 = performance.now();
+    this.config.onRenderFramePre = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onRenderFramePre(handler);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 onRenderFramePre() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  onRenderFramePost(handler) {
+    if (handler === void 0) return this.config.onRenderFramePost ?? null;
+    const start2 = performance.now();
+    this.config.onRenderFramePost = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onRenderFramePost(handler);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 onRenderFramePost() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  cooldownTime(time) {
+    if (time === void 0) return this.config.cooldownTime ?? 15e3;
+    const start2 = performance.now();
+    this.config.cooldownTime = time;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().cooldownTime(time);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 cooldownTime(${time}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  d3AlphaDecay(decay) {
+    if (decay === void 0) return this.config.d3AlphaDecay ?? 0.0228;
+    const start2 = performance.now();
+    this.config.d3AlphaDecay = decay;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().d3AlphaDecay(decay);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 d3AlphaDecay(${decay}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  d3VelocityDecay(decay) {
+    if (decay === void 0) return this.config.d3VelocityDecay ?? 0.4;
+    const start2 = performance.now();
+    this.config.d3VelocityDecay = decay;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().d3VelocityDecay(decay);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 d3VelocityDecay(${decay}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  onEngineStop(handler) {
+    if (handler === void 0) return this.config.onEngineStop;
+    const start2 = performance.now();
+    this.config.onEngineStop = handler;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onEngineStop(handler);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 onEngineStop() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  onEngineTick(handler) {
+    if (handler === void 0) return this.config.onEngineTick;
+    const start2 = performance.now();
+    this.config.onEngineTick = handler;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onEngineTick(handler);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 onEngineTick() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  // =============================================================================
+  // PUBLIC API - ForceGraphPerformanceMethods
+  // =============================================================================
+  getPerformanceMetrics() {
+    return this.performanceMonitor.getMetrics();
+  }
+  resetPerformanceMetrics() {
+    this.performanceMonitor.reset();
+  }
+  logPerformanceSummary() {
+    this.performanceMonitor.logSummary();
+  }
+  validatePerformance() {
+    const metrics = this.performanceMonitor.getMetrics();
+    const targets = this.config.performanceTargets ?? {};
+    const warnings = [];
+    const recommendations = [];
+    if (targets.creation && metrics.creation > targets.creation) {
+      warnings.push(`Creation time ${metrics.creation.toFixed(2)}ms exceeds target ${targets.creation}ms`);
+      recommendations.push("Consider reducing initialization complexity");
+    }
+    if (targets.dataLoad && metrics.dataLoad > targets.dataLoad) {
+      warnings.push(`Data load time ${metrics.dataLoad.toFixed(2)}ms exceeds target ${targets.dataLoad}ms`);
+      recommendations.push("Consider data preprocessing or pagination for large datasets");
+    }
+    return {
+      passed: warnings.length === 0,
+      warnings,
+      recommendations
+    };
+  }
+  // =============================================================================
+  // STEP 4: RENDERING PERFORMANCE OPTIMIZATION
+  // =============================================================================
+  /**
+   * Setup advanced rendering performance monitoring
+   * Target: 60fps @ 1000 nodes with optimizations
+   */
+  setupRenderingMonitoring() {
+    if (!this.forceGraph || !this.renderingMonitor || !this.canvasOptimizer) return;
+    const canvas = this.container.querySelector("canvas");
+    if (canvas) {
+      this.canvasOptimizer.initialize(canvas);
+    }
+    if (this.config.enablePerformanceMonitoring && this.config.performanceTargets?.render) {
+      let frameCount = 0;
+      this.getGraphInstance().onRenderFramePost(() => {
+        frameCount++;
+        if (frameCount % 10 === 0) {
+          this.renderingMonitor?.recordRenderCall();
+        }
+      });
+      this.startRenderingMonitoring();
+    }
+  }
+  /**
+   * Start advanced rendering performance monitoring
+   */
+  startRenderingMonitoring() {
+    if (!this.renderingMonitor) return;
+    this.renderingMonitor.startMonitoring();
+    this.isRenderingOptimized = true;
+    if (this.enableVerboseLogging) {
+      console.log("\u{1F3AC} Started rendering performance monitoring");
+    }
+  }
+  /**
+   * Stop rendering performance monitoring
+   */
+  stopRenderingMonitoring() {
+    if (!this.renderingMonitor) return;
+    this.renderingMonitor.stopMonitoring();
+    this.isRenderingOptimized = false;
+    if (this.enableVerboseLogging) {
+      const metrics = this.renderingMonitor.getMetrics();
+      console.log(`\u{1F3AC} Rendering performance: ${metrics.averageFps.toFixed(1)}fps, efficiency: ${(metrics.renderingEfficiency * 100).toFixed(1)}%`);
+    }
+  }
+  /**
+   * Get current rendering performance metrics
+   */
+  getRenderingMetrics() {
+    if (!this.isRenderingOptimized || !this.renderingMonitor) {
+      return null;
+    }
+    const currentData = this.forceGraph?.graphData?.();
+    if (currentData) {
+      this.renderingMonitor.updateCounts(
+        currentData.nodes?.length ?? 0,
+        currentData.links?.length ?? 0
+      );
+    }
+    return this.renderingMonitor.getMetrics();
+  }
+  /**
+   * Validate rendering performance against Step 4 targets
+   */
+  validateRenderingPerformance() {
+    const metrics = this.getRenderingMetrics();
+    if (!metrics) {
+      return {
+        passed: false,
+        metrics: {},
+        validation: {
+          passed: false,
+          results: {
+            fpsTarget: { expected: 60, actual: 0, passed: false },
+            frameTimeTarget: { expected: 16.67, actual: 0, passed: false },
+            droppedFramesTarget: { expected: 0, actual: 0, passed: false },
+            efficiencyTarget: { expected: 0.9, actual: 0, passed: false }
+          },
+          overallScore: 0
+        },
+        recommendations: ["Rendering monitoring not started"]
+      };
+    }
+    const validation = this.renderingMonitor?.validatePerformance() ?? {
+      passed: false,
+      results: {
+        fpsTarget: { expected: 60, actual: 0, passed: false },
+        frameTimeTarget: { expected: 16.67, actual: 0, passed: false },
+        droppedFramesTarget: { expected: 0, actual: 0, passed: false },
+        efficiencyTarget: { expected: 0.9, actual: 0, passed: false }
+      },
+      overallScore: 0
+    };
+    const recommendations = this.renderingMonitor?.getOptimizationRecommendations() ?? ["Rendering monitoring not available"];
+    return {
+      passed: validation.passed,
+      metrics,
+      validation,
+      recommendations
+    };
+  }
+  /**
+   * Optimize rendering for large datasets
+   * Implements performance optimizations based on node count
+   */
+  optimizeForDataset(nodeCount) {
+    if (!this.forceGraph) {
+      console.warn("Cannot optimize: graph not initialized");
+      return;
+    }
+    if (nodeCount > 5e3) {
+      this.forceGraph.nodeCanvasObject(null).linkCanvasObject(null).nodeLabel("").linkLabel("").cooldownTicks(50).d3AlphaDecay(0.05);
+    } else if (nodeCount > 1e3) {
+      this.forceGraph.nodeCanvasObject(null).cooldownTicks(100).d3AlphaDecay(0.04);
+    } else if (nodeCount > 500) {
+      this.getGraphInstance().cooldownTicks(200);
+    }
+    this.performanceMonitor.setMetric("optimizedForNodeCount", nodeCount);
+  }
+  /**
+   * Force a rendering performance test
+   * Useful for validation during data loading
+   */
+  async testRenderingPerformance(durationMs = 5e3) {
+    return new Promise((resolve) => {
+      const fpsReadings = [];
+      const target = this.config.performanceTargets?.render ?? 60;
+      const tempTracker = {
+        startTime: performance.now(),
+        frames: 0,
+        lastTime: performance.now()
+      };
+      if (this.performanceTestInterval) {
+        clearInterval(this.performanceTestInterval);
+      }
+      this.performanceTestInterval = setInterval(() => {
+        const now2 = performance.now();
+        tempTracker.frames++;
+        if (now2 - tempTracker.lastTime >= 1e3) {
+          const fps = tempTracker.frames * 1e3 / (now2 - tempTracker.lastTime);
+          fpsReadings.push(fps);
+          tempTracker.frames = 0;
+          tempTracker.lastTime = now2;
+        }
+        if (now2 - tempTracker.startTime >= durationMs) {
+          if (this.performanceTestInterval) {
+            clearInterval(this.performanceTestInterval);
+            this.performanceTestInterval = null;
+          }
+          const averageFPS = fpsReadings.reduce((a2, b) => a2 + b, 0) / fpsReadings.length;
+          const minFPS = Math.min(...fpsReadings);
+          const maxFPS = Math.max(...fpsReadings);
+          const passed = averageFPS >= target * 0.8;
+          resolve({
+            averageFPS,
+            minFPS,
+            maxFPS,
+            passed,
+            targetFPS: target
+          });
+        }
+      }, 16);
+    });
+  }
+  // =============================================================================
+  // PUBLIC API - Core Methods
+  // =============================================================================
+  render() {
+    if (!this.isInitialized) {
+      this.initializeForceGraph();
+    }
+    const renderStart = performance.now();
+    if (this.forceGraph) {
+      const graphInstance = this.getGraphInstance();
+      if (graphInstance.refresh) {
+        graphInstance.refresh();
+      }
+    }
+    const renderTime = performance.now() - renderStart;
+    this.performanceMonitor.setMetric("firstRender", renderTime);
+    this.initializeControls();
+    this.initializeLegends();
+    this.setupDoubleClickHandling();
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 First render completed in ${renderTime.toFixed(2)}ms`);
+    }
+  }
+  cooldownTicks(ticks) {
+    if (ticks === void 0) return this.config.cooldownTicks ?? 100;
+    const start2 = performance.now();
+    this.config.cooldownTicks = ticks;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().cooldownTicks(ticks);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 cooldownTicks(${ticks}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  d3AlphaMin(min) {
+    if (min === void 0) return this.config.d3AlphaMin ?? 1e-3;
+    const start2 = performance.now();
+    this.config.d3AlphaMin = min;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().d3AlphaMin(min);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 d3AlphaMin(${min}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  enableNodeDrag(enable) {
+    if (enable === void 0) return this.config.enableNodeDrag ?? true;
+    const start2 = performance.now();
+    this.config.enableNodeDrag = enable;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().enableNodeDrag(enable);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 enableNodeDrag(${enable}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  nodeCanvasObject(paintFunction) {
+    if (paintFunction === void 0) return this.config.nodeCanvasObject ?? null;
+    const start2 = performance.now();
+    this.config.nodeCanvasObject = paintFunction || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeCanvasObject(paintFunction);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 nodeCanvasObject() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  linkCanvasObject(paintFunction) {
+    if (paintFunction === void 0) return this.config.linkCanvasObject ?? null;
+    const start2 = performance.now();
+    this.config.linkCanvasObject = paintFunction || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkCanvasObject(paintFunction);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 linkCanvasObject() completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  autoPauseRedraw(enable) {
+    if (enable === void 0) return this.config.autoPauseRedraw ?? true;
+    const start2 = performance.now();
+    this.config.autoPauseRedraw = enable;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().autoPauseRedraw(enable);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 autoPauseRedraw(${enable}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  enableZoomInteraction(enable) {
+    if (enable === void 0) {
+      const configValue = this.config.enableZoomInteraction ?? true;
+      return typeof configValue === "function" ? true : configValue;
+    }
+    const start2 = performance.now();
+    this.config.enableZoomInteraction = enable;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().enableZoomInteraction(enable);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 enableZoomInteraction(${enable}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  enablePanInteraction(enable) {
+    if (enable === void 0) {
+      const configValue = this.config.enablePanInteraction ?? true;
+      return typeof configValue === "function" ? true : configValue;
+    }
+    const start2 = performance.now();
+    this.config.enablePanInteraction = enable;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().enablePanInteraction(enable);
+    }
+    const callDuration = performance.now() - start2;
+    if (this.config.enablePerformanceMonitoring) {
+      console.log(`\u2705 enablePanInteraction(${enable}) completed in ${callDuration.toFixed(3)}ms`);
+    }
+    return this;
+  }
+  // =============================================================================
+  // GRAPH CONTROLS METHODS
+  // =============================================================================
+  /**
+   * Initialize graph controls if enabled
+   */
+  initializeControls() {
+    if (!this.config.controls?.enabled) return;
+    const controlsConfig = {
+      ...this.config.controls,
+      enabled: true
+    };
+    if (!controlsConfig.position) {
+      controlsConfig.position = "bottom-left";
+    }
+    const controlActions = {
+      zoomIn: () => this.zoomIn(),
+      zoomOut: () => this.zoomOut(),
+      fitView: () => this.fitView(),
+      resetView: () => this.resetView()
+    };
+    try {
+      this.controlsInstance = createGraphControls(this.container, controlActions, controlsConfig);
+      this.controlsInstance.mount();
+      if (this.config.enablePerformanceMonitoring) {
+        console.log("\u2705 Graph controls initialized");
+      }
+    } catch {
+    }
+  }
+  /**
+   * Zoom in by a factor of 1.5
+   */
+  zoomIn() {
+    if (!this.isInitialized) return;
+    const currentZoom = this.zoom();
+    this.zoom(currentZoom * 1.5, 200);
+  }
+  /**
+   * Zoom out by a factor of 0.67
+   */
+  zoomOut() {
+    if (!this.isInitialized) return;
+    const currentZoom = this.zoom();
+    this.zoom(currentZoom * 0.67, 200);
+  }
+  /**
+   * Fit the graph to the viewport
+   */
+  fitView() {
+    this.zoomToFit(20, 300);
+  }
+  /**
+   * Reset the view to initial state
+   */
+  resetView() {
+    this.centerAt(0, 0, 300);
+    this.zoom(1, 300);
+  }
+  /**
+   * Cleanup graph controls
+   */
+  cleanupControls() {
+    if (this.controlsInstance) {
+      this.controlsInstance.destroy();
+      this.controlsInstance = null;
+    }
+  }
+  /**
+   * Initialize graph legends if enabled
+   */
+  initializeLegends() {
+    if (!this.config.legends?.enabled) return;
+    const legendsConfig = {
+      ...this.config.legends,
+      enabled: true
+    };
+    if (!legendsConfig.position) {
+      legendsConfig.position = "top-right";
+    }
+    try {
+      this.legendsInstance = createGraphLegends(this.container, legendsConfig);
+      this.legendsInstance.mount();
+      this.updateLegends();
+      if (this.config.enablePerformanceMonitoring) {
+        console.log("\u2705 Graph legends initialized");
+      }
+    } catch {
+    }
+  }
+  /**
+   * Update legends with current graph data
+   */
+  updateLegends() {
+    if (!this.legendsInstance || !this.config.legends?.enabled) return;
+    const graphData = this.config.graphData;
+    if (!graphData || !graphData.nodes || graphData.nodes.length === 0) return;
+    const nodeTypes = Array.from(
+      new Set(
+        graphData.nodes.map((node) => node.data?.type).filter((type) => Boolean(type && typeof type === "string"))
+      )
+    );
+    const colorMap = {};
+    const nodeColorAccessor = this.config.nodeColor;
+    if (nodeColorAccessor && typeof nodeColorAccessor === "function") {
+      graphData.nodes.forEach((node) => {
+        const type = node.data?.type;
+        if (type) {
+          const color2 = nodeColorAccessor(node);
+          if (color2) {
+            colorMap[type] = color2;
+          }
+        }
+      });
+    } else if (nodeColorAccessor && typeof nodeColorAccessor === "string") {
+      nodeTypes.forEach((type) => {
+        if (type) {
+          colorMap[type] = nodeColorAccessor;
+        }
+      });
+    } else {
+      const defaultColors = [
+        "#3b82f6",
+        "#ef4444",
+        "#10b981",
+        "#f59e0b",
+        "#8b5cf6",
+        "#06b6d4",
+        "#84cc16",
+        "#f97316",
+        "#ec4899",
+        "#6b7280"
+      ];
+      nodeTypes.forEach((type, index2) => {
+        const color2 = defaultColors[index2 % defaultColors.length];
+        if (type && color2) {
+          colorMap[type] = color2;
+        }
+      });
+    }
+    this.legendsInstance.update(nodeTypes, colorMap);
+  }
+  /**
+   * Cleanup graph legends
+   */
+  cleanupLegends() {
+    if (this.legendsInstance) {
+      this.legendsInstance.destroy();
+      this.legendsInstance = null;
+    }
+  }
+  /**
+   * Draw legends on the export canvas (similar to React implementation)
+   */
+  drawLegendsOnExportCanvas(ctx, canvasWidth, canvasHeight) {
+    if (!this.config.legends?.enabled || !this.legendsInstance) return;
+    const graphData = this.config.graphData;
+    if (!graphData || !graphData.nodes || graphData.nodes.length === 0) return;
+    const nodeTypes = Array.from(
+      new Set(
+        graphData.nodes.map((node) => node.data?.type).filter((type) => Boolean(type && typeof type === "string"))
+      )
+    ).sort();
+    if (nodeTypes.length === 0) return;
+    const colorMap = {};
+    const nodeColorAccessor = this.config.nodeColor;
+    if (nodeColorAccessor && typeof nodeColorAccessor === "function") {
+      graphData.nodes.forEach((node) => {
+        const type = node.data?.type;
+        if (type) {
+          const color2 = nodeColorAccessor(node);
+          if (color2) {
+            colorMap[type] = color2;
+          }
+        }
+      });
+    } else {
+      const defaultColors = [
+        "#3b82f6",
+        "#ef4444",
+        "#10b981",
+        "#f59e0b",
+        "#8b5cf6",
+        "#06b6d4",
+        "#84cc16",
+        "#f97316",
+        "#ec4899",
+        "#6b7280"
+      ];
+      nodeTypes.forEach((type, index2) => {
+        const color2 = defaultColors[index2 % defaultColors.length];
+        if (type && color2) {
+          colorMap[type] = color2;
+        }
+      });
+    }
+    const LEGEND_CONFIG = {
+      padding: 20,
+      circleRadius: 10,
+      lineHeight: 40,
+      circleTextGap: 12,
+      containerPadding: 16,
+      borderRadius: 16
+    };
+    ctx.save();
+    ctx.font = "20px sans-serif";
+    ctx.textBaseline = "middle";
+    let maxTextWidth = 0;
+    nodeTypes.forEach((type) => {
+      if (type) {
+        const textWidth = ctx.measureText(type).width;
+        maxTextWidth = Math.max(maxTextWidth, textWidth);
+      }
+    });
+    const legendContentWidth = LEGEND_CONFIG.circleRadius * 2 + LEGEND_CONFIG.circleTextGap + maxTextWidth;
+    const legendContentHeight = nodeTypes.length * LEGEND_CONFIG.lineHeight - (LEGEND_CONFIG.lineHeight - LEGEND_CONFIG.circleRadius * 2);
+    const containerWidth = legendContentWidth + LEGEND_CONFIG.containerPadding * 2;
+    const containerHeight = legendContentHeight + LEGEND_CONFIG.containerPadding * 2;
+    const position = this.config.legends.position || "top-right";
+    let containerX, containerY;
+    switch (position) {
+      case "top-left":
+        containerX = LEGEND_CONFIG.padding;
+        containerY = LEGEND_CONFIG.padding;
+        break;
+      case "top-right":
+      default:
+        containerX = canvasWidth - containerWidth - LEGEND_CONFIG.padding;
+        containerY = LEGEND_CONFIG.padding;
+        break;
+      case "bottom-left":
+        containerX = LEGEND_CONFIG.padding;
+        containerY = canvasHeight - containerHeight - LEGEND_CONFIG.padding;
+        break;
+      case "bottom-right":
+        containerX = canvasWidth - containerWidth - LEGEND_CONFIG.padding;
+        containerY = canvasHeight - containerHeight - LEGEND_CONFIG.padding;
+        break;
+    }
+    ctx.shadowColor = "rgba(0, 0, 0, 0.1)";
+    ctx.shadowBlur = 10;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 2;
+    ctx.fillStyle = "#ffffff";
+    this.drawRoundedRect(ctx, containerX, containerY, containerWidth, containerHeight, LEGEND_CONFIG.borderRadius);
+    ctx.fill();
+    ctx.restore();
+    const startX = containerX + LEGEND_CONFIG.containerPadding;
+    const startY = containerY + LEGEND_CONFIG.containerPadding;
+    nodeTypes.forEach((type, index2) => {
+      if (!type) return;
+      const y3 = startY + index2 * LEGEND_CONFIG.lineHeight;
+      const color2 = colorMap[type] || "#ccc";
+      ctx.beginPath();
+      ctx.arc(startX + LEGEND_CONFIG.circleRadius, y3 + LEGEND_CONFIG.circleRadius, LEGEND_CONFIG.circleRadius, 0, 2 * Math.PI);
+      ctx.fillStyle = color2;
+      ctx.fill();
+      ctx.fillStyle = "#374151";
+      ctx.fillText(type, startX + LEGEND_CONFIG.circleRadius * 2 + LEGEND_CONFIG.circleTextGap, y3 + LEGEND_CONFIG.circleRadius);
+    });
+  }
+  /**
+   * Draw rounded rectangle helper method
+   */
+  drawRoundedRect(ctx, x3, y3, width, height, radius) {
+    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();
+  }
+  /**
+   * Export graph as PNG image
+   */
+  async exportGraph(fileName) {
+    if (!this.isInitialized) {
+      throw new Error("Graph not initialized");
+    }
+    const start2 = performance.now();
+    try {
+      const defaultFileName = `polly-graph-export-${Date.now()}.png`;
+      const finalFileName = fileName || defaultFileName;
+      this.zoomToFit(40, 300);
+      await new Promise((resolve) => {
+        this.exportTimeoutId = setTimeout(() => {
+          this.exportTimeoutId = null;
+          resolve(void 0);
+        }, 350);
+      });
+      const canvas = this.container.querySelector("canvas");
+      if (!canvas) {
+        throw new Error("Canvas not found");
+      }
+      const elementsToHide = [];
+      const controls = this.container.querySelectorAll(".fg-controls");
+      controls.forEach((control) => {
+        const element = control;
+        elementsToHide.push({ element, originalDisplay: element.style.display });
+        element.style.display = "none";
+      });
+      const legends = this.container.querySelectorAll(".fg-legends");
+      legends.forEach((legend) => {
+        const element = legend;
+        elementsToHide.push({ element, originalDisplay: element.style.display });
+        element.style.display = "none";
+      });
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      const exportCanvas = document.createElement("canvas");
+      const ctx = exportCanvas.getContext("2d");
+      if (!ctx) {
+        throw new Error("Could not get canvas context");
+      }
+      exportCanvas.width = canvas.width;
+      exportCanvas.height = canvas.height;
+      ctx.fillStyle = this.config.backgroundColor || "#ffffff";
+      ctx.fillRect(0, 0, exportCanvas.width, exportCanvas.height);
+      ctx.drawImage(canvas, 0, 0);
+      this.drawLegendsOnExportCanvas(ctx, exportCanvas.width, exportCanvas.height);
+      exportCanvas.toBlob((blob) => {
+        if (!blob) {
+          throw new Error("Failed to create image blob");
+        }
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = finalFileName;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }, "image/png");
+      elementsToHide.forEach(({ element, originalDisplay }) => {
+        element.style.display = originalDisplay;
+      });
+      const duration = performance.now() - start2;
+      if (this.config.enablePerformanceMonitoring) {
+        console.log(`\u2705 exportGraph completed in ${duration.toFixed(3)}ms`);
+      }
+    } catch (error) {
+      const controls = this.container.querySelectorAll(".fg-controls");
+      controls.forEach((control) => {
+        const element = control;
+        element.style.display = "";
+      });
+      const legends = this.container.querySelectorAll(".fg-legends");
+      legends.forEach((legend) => {
+        const element = legend;
+        element.style.display = "";
+      });
+      const duration = performance.now() - start2;
+      if (this.config.enablePerformanceMonitoring) {
+        console.log(`\u274C exportGraph failed in ${duration.toFixed(3)}ms`);
+      }
+      throw error;
+    }
+  }
+  /**
+   * Setup double-click functionality
+   * - Double-click on node: center and zoom to node
+   * - Double-click on canvas: fit view
+   */
+  setupDoubleClickHandling() {
+    if (!this.isInitialized) return;
+    const canvas = this.container.querySelector("canvas");
+    if (!canvas) return;
+    let clickTimeout = null;
+    let clickCount = 0;
+    let lastClickTime = 0;
+    const DOUBLE_CLICK_DELAY = 300;
+    const originalOnNodeClick = this.config.onNodeClick;
+    if (this.canvasClickHandler) {
+      canvas.removeEventListener("click", this.canvasClickHandler);
+    }
+    this.canvasClickHandler = (event) => {
+      const currentTime = Date.now();
+      clickCount++;
+      if (clickCount === 1) {
+        clickTimeout = window.setTimeout(() => {
+          if (clickCount === 1) {
+            const rect = canvas.getBoundingClientRect();
+            const x3 = event.clientX - rect.left;
+            const y3 = event.clientY - rect.top;
+            const graphCoords = this.getGraphInstance().screen2GraphCoords(x3, y3);
+            const clickedNode = this.findNodeAtPosition(graphCoords.x, graphCoords.y);
+            if (clickedNode && originalOnNodeClick) {
+              originalOnNodeClick(clickedNode, event);
+            }
+          }
+          clickCount = 0;
+        }, DOUBLE_CLICK_DELAY);
+      } else if (clickCount === 2 && currentTime - lastClickTime < DOUBLE_CLICK_DELAY) {
+        if (clickTimeout) {
+          window.clearTimeout(clickTimeout);
+          clickTimeout = null;
+        }
+        const rect = canvas.getBoundingClientRect();
+        const x3 = event.clientX - rect.left;
+        const y3 = event.clientY - rect.top;
+        const graphCoords = this.getGraphInstance().screen2GraphCoords(x3, y3);
+        const clickedNode = this.findNodeAtPosition(graphCoords.x, graphCoords.y);
+        if (clickedNode) {
+          if (this.config.onNodeDoubleClick) {
+            this.config.onNodeDoubleClick(clickedNode, event);
+          } else {
+            this.centerAt(clickedNode.x || 0, clickedNode.y || 0, 400);
+            this.zoom(8, 400);
+          }
+        } else {
+          this.smoothZoomToFit(500);
+        }
+        clickCount = 0;
+      } else {
+        clickCount = 1;
+        if (clickTimeout) {
+          window.clearTimeout(clickTimeout);
+        }
+        clickTimeout = window.setTimeout(() => {
+          clickCount = 0;
+        }, DOUBLE_CLICK_DELAY);
+      }
+      lastClickTime = currentTime;
+    };
+    canvas.addEventListener("click", this.canvasClickHandler);
+    if (this.forceGraph && originalOnNodeClick) {
+      this.getGraphInstance().onNodeClick(null);
+    }
+  }
+  /**
+   * Smooth zoom to fit that animates from current position
+   */
+  smoothZoomToFit(duration = 500) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    if (this.forceGraph && this.container) {
+      const bbox = this.getGraphInstance().getGraphBbox();
+      const width = bbox.x[1] - bbox.x[0];
+      const height = bbox.y[1] - bbox.y[0];
+      const centerX = (bbox.x[0] + bbox.x[1]) / 2;
+      const centerY = (bbox.y[0] + bbox.y[1]) / 2;
+      const paddingValue = 50;
+      const viewportWidth = this.container.clientWidth - paddingValue;
+      const viewportHeight = this.container.clientHeight - paddingValue;
+      const targetZoom = Math.min(viewportWidth / width, viewportHeight / height);
+      this.getGraphInstance().centerAt(centerX, centerY, duration / 2);
+      setTimeout(() => {
+        this.zoom(targetZoom, duration / 2);
+      }, duration / 2);
+    }
+  }
+  /**
+   * Trigger Kapsule update to ensure render callbacks continue working
+   * This is essential for onRenderFramePost callbacks after physics simulation stops
+   */
+  triggerKapsuleUpdate() {
+    if (!this.isInitialized || !this.forceGraph) return;
+    try {
+      const kapsuleInstance = this._getForceGraphInstance();
+      if (kapsuleInstance) {
+        const state = kapsuleInstance["__state"];
+        if (state && typeof state === "object") {
+          state["needsRedraw"] = true;
+          return;
+        }
+        const zoomFn = kapsuleInstance["zoom"];
+        if (typeof zoomFn === "function") {
+          const currentZoom = zoomFn();
+          if (typeof currentZoom === "number") {
+            zoomFn(currentZoom);
+          }
+        }
+      }
+    } catch (error) {
+      if (this.config.enablePerformanceMonitoring) {
+        console.log("Kapsule update fallback used:", error);
+      }
+    }
+  }
+  /**
+   * Find node at given graph coordinates
+   */
+  findNodeAtPosition(graphX, graphY) {
+    if (!this.config.graphData?.nodes) return null;
+    const nodeRadius = 4;
+    const tolerance = nodeRadius + 2;
+    for (const node of this.config.graphData.nodes) {
+      if (typeof node.x === "number" && typeof node.y === "number") {
+        const distance = Math.sqrt(
+          Math.pow(node.x - graphX, 2) + Math.pow(node.y - graphY, 2)
+        );
+        if (distance <= tolerance) {
+          return node;
+        }
+      }
+    }
+    return null;
+  }
+  destroy() {
+    if (this.isDestroyed) return;
+    this.cleanupControls();
+    this.cleanupLegends();
+    this.cleanupPageVisibilityHandling();
+    this.cleanupDeterministicPhysics();
+    this.cleanupDeferredFitView();
+    this.cleanupPerformanceTest();
+    this.cleanupExportTimeout();
+    this.cleanupCanvasEventListeners();
+    physicsWorkerManager.terminate();
+    this.stopRenderingMonitoring();
+    if (this.canvasOptimizer) {
+      this.canvasOptimizer.destroy?.();
+    }
+    if (this.forceGraph) {
+      this.getGraphInstance().onRenderFramePre(void 0);
+      this.getGraphInstance().onRenderFramePost(void 0);
+      this.getGraphInstance().onNodeClick(void 0);
+      this.getGraphInstance().onNodeHover(void 0);
+      this.getGraphInstance().onLinkClick(void 0);
+      this.getGraphInstance().onLinkHover(void 0);
+      this.getGraphInstance().onEngineTick(void 0);
+      this.getGraphInstance().onEngineStop(void 0);
+      const graphInstance = this.getGraphInstance();
+      if (typeof graphInstance.destroy === "function") {
+        graphInstance.destroy();
+      }
+    }
+    if (this.container) {
+      this.container.innerHTML = "";
+    }
+    this.performanceMonitor.logSummary();
+    this.forceGraph = null;
+    this.renderingMonitor = null;
+    this.canvasOptimizer = null;
+    this.isDestroyed = true;
+    this.isInitialized = false;
+  }
+  _getForceGraphInstance() {
+    return this.forceGraph;
+  }
+};
+function createForceGraph(container, config) {
+  return new ForceGraphWrapper(container, config);
+}
+
+// src/force-graph-wrapper/types/config.types.ts
+var ConfigPresets = {
+  /**
+   * High-performance preset for large graphs (5000+ nodes)
+   */
+  highPerformance: () => ({
+    autoPauseRedraw: true,
+    warmupTicks: 100,
+    cooldownTime: 1e3,
+    d3AlphaDecay: 0.05,
+    d3VelocityDecay: 0.4,
+    enablePerformanceMonitoring: true,
+    performanceTargets: {
+      creation: 5,
+      // 5ms
+      dataLoad: 100,
+      // 100ms
+      firstRender: 500,
+      // 500ms
+      methodCall: 1,
+      // 1ms
+      memoryGrowth: 10
+      // 10MB per 1000 nodes
+    }
+  }),
+  /**
+   * Interactive preset for medium graphs (50-1000 nodes)
+   */
+  interactive: () => ({
+    enablePointerInteraction: true,
+    enableNodeDrag: true,
+    enableZoomInteraction: true,
+    enablePanInteraction: true,
+    linkHoverPrecision: 2,
+    cooldownTime: 2e3,
+    controls: {
+      enabled: true,
+      position: "bottom-left",
+      orientation: "vertical"
+    },
+    legends: {
+      enabled: true,
+      position: "top-right",
+      maxItems: 10
+    },
+    performanceTargets: {
+      creation: 1,
+      dataLoad: 20,
+      firstRender: 50,
+      methodCall: 0.5,
+      memoryGrowth: 5
+    }
+  }),
+  /**
+   * Minimal preset for small graphs (5-50 nodes)
+   */
+  minimal: () => ({
+    width: 400,
+    height: 300,
+    backgroundColor: "#ffffff",
+    cooldownTime: 1e3,
+    enablePerformanceMonitoring: false
+  })
+};
+var ForceGraphConfigBuilder = class {
+  config = {};
+  constructor(container) {
+    this.config.container = container;
+  }
+  data(graphData) {
+    this.config.graphData = graphData;
+    return this;
+  }
+  size(width, height) {
+    this.config.width = width;
+    this.config.height = height;
+    return this;
+  }
+  performance(preset) {
+    Object.assign(this.config, ConfigPresets[preset]());
+    return this;
+  }
+  nodeColor(accessor) {
+    this.config.nodeColor = accessor;
+    return this;
+  }
+  onNodeClick(handler) {
+    this.config.onNodeClick = handler;
+    return this;
+  }
+  build() {
+    if (!this.config.container || !this.config.graphData) {
+      throw new Error("Container and graphData are required");
+    }
+    return this.config;
+  }
+};
+
+// src/force-graph-wrapper/index.ts
+var VERSION = "1.0.0-alpha.1";
+var LIBRARY_INFO = {
+  name: "force-graph-wrapper",
+  version: VERSION,
+  description: "Framework-independent TypeScript wrapper for force-graph library",
+  performance: "Built-in performance monitoring and optimization",
+  compatibility: "Vanilla JS, React, Angular, Vue.js"
+};
 export {
   CanvasManager,
+  ConfigPresets,
   DEFAULT_COLORS,
   DEFAULT_HOVER_STYLES,
   DEFAULT_LINK_LABEL_STYLE,
   DEFAULT_LINK_STYLE,
   DragManager,
   ErrorHandler,
+  ForceGraphConfigBuilder,
+  ForceGraphWrapper,
   HoverManager,
+  LIBRARY_INFO,
   NeutralColor,
+  PerformanceMonitor,
   PhysicsManager,
   PointerManager,
   PrimaryColor,
@@ -10087,8 +13634,10 @@ export {
   SelectionManager,
   StandardColor,
   V2Graph,
+  VERSION,
   ValidationError,
   ZoomManager,
+  createForceGraph,
   createV2Graph,
   getIcon,
   getIconSvg,