polly-graph 0.2.5 → 0.2.7

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,3143 @@ 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 {
+      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
+ */
+
+// D3 modules embedded locally to avoid CDN dependency
+// D3 Dispatch v3.0.1
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).d3=n.d3||{})}(this,(function(n){"use strict";var e={value:()=>{}};function t(){for(var n,e=0,t=arguments.length,o={};e<t;++e){if(!(n=arguments[e]+"")||n in o||/[\\s.]/.test(n))throw new Error("illegal type: "+n);o[n]=[]}return new r(o)}function r(n){this._=n}function o(n,e){return n.trim().split(/^|\\s+/).map((function(n){var t="",r=n.indexOf(".");if(r>=0&&(t=n.slice(r+1),n=n.slice(0,r)),n&&!e.hasOwnProperty(n))throw new Error("unknown type: "+n);return{type:n,name:t}}))}function i(n,e){for(var t,r=0,o=n.length;r<o;++r)if((t=n[r]).name===e)return t.value}function f(n,t,r){for(var o=0,i=n.length;o<i;++o)if(n[o].name===t){n[o]=e,n=n.slice(0,o).concat(n.slice(o+1));break}return null!=r&&n.push({name:t,value:r}),n}r.prototype=t.prototype={constructor:r,on:function(n,e){var t,r=this._,l=o(n+"",r),a=-1,u=l.length;if(!(arguments.length<2)){if(null!=e&&"function"!=typeof e)throw new Error("invalid callback: "+e);for(;++a<u;)if(t=(n=l[a]).type)r[t]=f(r[t],n.name,e);else if(null==e)for(t in r)r[t]=f(r[t],n.name,null);return this}for(;++a<u;)if((t=(n=l[a]).type)&&(t=i(r[t],n.name)))return t},copy:function(){var n={},e=this._;for(var t in e)n[t]=e[t].slice();return new r(n)},call:function(n,e){if((t=arguments.length-2)>0)for(var t,r,o=new Array(t),i=0;i<t;++i)o[i]=arguments[i+2];if(!this._.hasOwnProperty(n))throw new Error("unknown type: "+n);for(i=0,t=(r=this._[n]).length;i<t;++i)r[i].value.apply(e,o)},apply:function(n,e,t){if(!this._.hasOwnProperty(n))throw new Error("unknown type: "+n);for(var r=this._[n],o=0,i=r.length;o<i;++o)r[o].value.apply(e,t)}},n.dispatch=t,Object.defineProperty(n,"__esModule",{value:!0})}))
+
+// D3 Quadtree v3.0.1
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";function i(t,i,e,n){if(isNaN(i)||isNaN(e))return t;var r,s,h,o,a,u,l,_,f,c=t._root,x={data:n},y=t._x0,d=t._y0,p=t._x1,v=t._y1;if(!c)return t._root=x,t;for(;c.length;)if((u=i>=(s=(y+p)/2))?y=s:p=s,(l=e>=(h=(d+v)/2))?d=h:v=h,r=c,!(c=c[_=l<<1|u]))return r[_]=x,t;if(o=+t._x.call(null,c.data),a=+t._y.call(null,c.data),i===o&&e===a)return x.next=c,r?r[_]=x:t._root=x,t;do{r=r?r[_]=new Array(4):t._root=new Array(4),(u=i>=(s=(y+p)/2))?y=s:p=s,(l=e>=(h=(d+v)/2))?d=h:v=h}while((_=l<<1|u)==(f=(a>=h)<<1|o>=s));return r[f]=c,r[_]=x,t}function e(t,i,e,n,r){this.node=t,this.x0=i,this.y0=e,this.x1=n,this.y1=r}function n(t){return t[0]}function r(t){return t[1]}function s(t,i,e){var s=new h(null==i?n:i,null==e?r:e,NaN,NaN,NaN,NaN);return null==t?s:s.addAll(t)}function h(t,i,e,n,r,s){this._x=t,this._y=i,this._x0=e,this._y0=n,this._x1=r,this._y1=s,this._root=void 0}function o(t){for(var i={data:t.data},e=i;t=t.next;)e=e.next={data:t.data};return i}var a=s.prototype=h.prototype;a.copy=function(){var t,i,e=new h(this._x,this._y,this._x0,this._y0,this._x1,this._y1),n=this._root;if(!n)return e;if(!n.length)return e._root=o(n),e;for(t=[{source:n,target:e._root=new Array(4)}];n=t.pop();)for(var r=0;r<4;++r)(i=n.source[r])&&(i.length?t.push({source:i,target:n.target[r]=new Array(4)}):n.target[r]=o(i));return e},a.add=function(t){const e=+this._x.call(null,t),n=+this._y.call(null,t);return i(this.cover(e,n),e,n,t)},a.addAll=function(t){var e,n,r,s,h=t.length,o=new Array(h),a=new Array(h),u=1/0,l=1/0,_=-1/0,f=-1/0;for(n=0;n<h;++n)isNaN(r=+this._x.call(null,e=t[n]))||isNaN(s=+this._y.call(null,e))||(o[n]=r,a[n]=s,r<u&&(u=r),r>_&&(_=r),s<l&&(l=s),s>f&&(f=s));if(u>_||l>f)return this;for(this.cover(u,l).cover(_,f),n=0;n<h;++n)i(this,o[n],a[n],t[n]);return this},a.cover=function(t,i){if(isNaN(t=+t)||isNaN(i=+i))return this;var e=this._x0,n=this._y0,r=this._x1,s=this._y1;if(isNaN(e))r=(e=Math.floor(t))+1,s=(n=Math.floor(i))+1;else{for(var h,o,a=r-e||1,u=this._root;e>t||t>=r||n>i||i>=s;)switch(o=(i<n)<<1|t<e,(h=new Array(4))[o]=u,u=h,a*=2,o){case 0:r=e+a,s=n+a;break;case 1:e=r-a,s=n+a;break;case 2:r=e+a,n=s-a;break;case 3:e=r-a,n=s-a}this._root&&this._root.length&&(this._root=u)}return this._x0=e,this._y0=n,this._x1=r,this._y1=s,this},a.data=function(){var t=[];return this.visit((function(i){if(!i.length)do{t.push(i.data)}while(i=i.next)})),t},a.extent=function(t){return arguments.length?this.cover(+t[0][0],+t[0][1]).cover(+t[1][0],+t[1][1]):isNaN(this._x0)?void 0:[[this._x0,this._y0],[this._x1,this._y1]]},a.find=function(t,i,n){var r,s,h,o,a,u,l,_=this._x0,f=this._y0,c=this._x1,x=this._y1,y=[],d=this._root;for(d&&y.push(new e(d,_,f,c,x)),null==n?n=1/0:(_=t-n,f=i-n,c=t+n,x=i+n,n*=n);u=y.pop();)if(!(!(d=u.node)||(s=u.x0)>c||(h=u.y0)>x||(o=u.x1)<_||(a=u.y1)<f))if(d.length){var p=(s+o)/2,v=(h+a)/2;y.push(new e(d[3],p,v,o,a),new e(d[2],s,v,p,a),new e(d[1],p,h,o,v),new e(d[0],s,h,p,v)),(l=(i>=v)<<1|t>=p)&&(u=y[y.length-1],y[y.length-1]=y[y.length-1-l],y[y.length-1-l]=u)}else{var w=t-+this._x.call(null,d.data),N=i-+this._y.call(null,d.data),g=w*w+N*N;if(g<n){var A=Math.sqrt(n=g);_=t-A,f=i-A,c=t+A,x=i+A,r=d.data}}return r},a.remove=function(t){if(isNaN(s=+this._x.call(null,t))||isNaN(h=+this._y.call(null,t)))return this;var i,e,n,r,s,h,o,a,u,l,_,f,c=this._root,x=this._x0,y=this._y0,d=this._x1,p=this._y1;if(!c)return this;if(c.length)for(;;){if((u=s>=(o=(x+d)/2))?x=o:d=o,(l=h>=(a=(y+p)/2))?y=a:p=a,i=c,!(c=c[_=l<<1|u]))return this;if(!c.length)break;(i[_+1&3]||i[_+2&3]||i[_+3&3])&&(e=i,f=_)}for(;c.data!==t;)if(n=c,!(c=c.next))return this;return(r=c.next)&&delete c.next,n?(r?n.next=r:delete n.next,this):i?(r?i[_]=r:delete i[_],(c=i[0]||i[1]||i[2]||i[3])&&c===(i[3]||i[2]||i[1]||i[0])&&!c.length&&(e?e[f]=c:this._root=c),this):(this._root=r,this)},a.removeAll=function(t){for(var i=0,e=t.length;i<e;++i)this.remove(t[i]);return this},a.root=function(){return this._root},a.size=function(){var t=0;return this.visit((function(i){if(!i.length)do{++t}while(i=i.next)})),t},a.visit=function(t){var i,n,r,s,h,o,a=[],u=this._root;for(u&&a.push(new e(u,this._x0,this._y0,this._x1,this._y1));i=a.pop();)if(!t(u=i.node,r=i.x0,s=i.y0,h=i.x1,o=i.y1)&&u.length){var l=(r+h)/2,_=(s+o)/2;(n=u[3])&&a.push(new e(n,l,_,h,o)),(n=u[2])&&a.push(new e(n,r,_,l,o)),(n=u[1])&&a.push(new e(n,l,s,h,_)),(n=u[0])&&a.push(new e(n,r,s,l,_))}return this},a.visitAfter=function(t){var i,n=[],r=[];for(this._root&&n.push(new e(this._root,this._x0,this._y0,this._x1,this._y1));i=n.pop();){var s=i.node;if(s.length){var h,o=i.x0,a=i.y0,u=i.x1,l=i.y1,_=(o+u)/2,f=(a+l)/2;(h=s[0])&&n.push(new e(h,o,a,_,f)),(h=s[1])&&n.push(new e(h,_,a,u,f)),(h=s[2])&&n.push(new e(h,o,f,_,l)),(h=s[3])&&n.push(new e(h,_,f,u,l))}r.push(i)}for(;i=r.pop();)t(i.node,i.x0,i.y0,i.x1,i.y1);return this},a.x=function(t){return arguments.length?(this._x=t,this):this._x},a.y=function(t){return arguments.length?(this._y=t,this):this._y},t.quadtree=s,Object.defineProperty(t,"__esModule",{value:!0})}))
+
+// D3 Timer v3.0.1
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";var n,e,o=0,i=0,r=0,l=0,u=0,a=0,s="object"==typeof performance&&performance.now?performance:Date,c="object"==typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):function(t){setTimeout(t,17)};function f(){return u||(c(_),u=s.now()+a)}function _(){u=0}function m(){this._call=this._time=this._next=null}function p(t,n,e){var o=new m;return o.restart(t,n,e),o}function w(){f(),++o;for(var t,e=n;e;)(t=u-e._time)>=0&&e._call.call(void 0,t),e=e._next;--o}function d(){u=(l=s.now())+a,o=i=0;try{w()}finally{o=0,function(){var t,o,i=n,r=1/0;for(;i;)i._call?(r>i._time&&(r=i._time),t=i,i=i._next):(o=i._next,i._next=null,i=t?t._next=o:n=o);e=t,y(r)}(),u=0}}function h(){var t=s.now(),n=t-l;n>1e3&&(a-=n,l=t)}function y(t){o||(i&&(i=clearTimeout(i)),t-u>24?(t<1/0&&(i=setTimeout(d,t-s.now()-a)),r&&(r=clearInterval(r))):(r||(l=s.now(),r=setInterval(h,1e3)),o=1,c(d)))}m.prototype=p.prototype={constructor:m,restart:function(t,o,i){if("function"!=typeof t)throw new TypeError("callback is not a function");i=(null==i?f():+i)+(null==o?0:+o),this._next||e===this||(e?e._next=this:n=this,e=this),this._call=t,this._time=i,y()},stop:function(){this._call&&(this._call=null,this._time=1/0,y())}},t.interval=function(t,n,e){var o=new m,i=n;return null==n?(o.restart(t,n,e),o):(o._restart=o.restart,o.restart=function(t,n,e){n=+n,e=null==e?f():+e,o._restart((function r(l){l+=i,o._restart(r,i+=n,e),t(l)}),n,e)},o.restart(t,n,e),o)},t.now=f,t.timeout=function(t,n,e){var o=new m;return n=null==n?0:+n,o.restart((e=>{o.stop(),t(e+n)}),n,e),o},t.timer=p,t.timerFlush=w,Object.defineProperty(t,"__esModule",{value:!0})}))
+
+// D3 Force v3.0.0
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("d3-quadtree"),require("d3-dispatch"),require("d3-timer")):"function"==typeof define&&define.amd?define(["exports","d3-quadtree","d3-dispatch","d3-timer"],t):t((n="undefined"!=typeof globalThis?globalThis:n||self).d3=n.d3||{},n.d3,n.d3,n.d3)}(this,(function(n,t,e,r){"use strict";function i(n){return function(){return n}}function u(n){return 1e-6*(n()-.5)}function o(n){return n.x+n.vx}function f(n){return n.y+n.vy}function a(n){return n.index}function c(n,t){var e=n.get(t);if(!e)throw new Error("node not found: "+t);return e}const l=4294967296;function h(n){return n.x}function v(n){return n.y}var y=Math.PI*(3-Math.sqrt(5));n.forceCenter=function(n,t){var e,r=1;function i(){var i,u,o=e.length,f=0,a=0;for(i=0;i<o;++i)f+=(u=e[i]).x,a+=u.y;for(f=(f/o-n)*r,a=(a/o-t)*r,i=0;i<o;++i)(u=e[i]).x-=f,u.y-=a}return null==n&&(n=0),null==t&&(t=0),i.initialize=function(n){e=n},i.x=function(t){return arguments.length?(n=+t,i):n},i.y=function(n){return arguments.length?(t=+n,i):t},i.strength=function(n){return arguments.length?(r=+n,i):r},i},n.forceCollide=function(n){var e,r,a,c,l=1,h=1;function v(){for(var n,i,h,y,d,g,x,s=e.length,p=0;p<h;++p)for(i=t.quadtree(e,o,f).visitAfter(y),n=0;n<s;++n)h=e[n],g=r[h.index],x=g*g,y=h.x+h.vx,d=h.y+h.vy,i.visit(M);function M(n,t,e,r,i){var o=n.data,f=n.r,l=g+f;if(!o)return t>y+l||r<y-l||e>d+l||i<d-l;if(o.index>h.index){var v=y-o.x-o.vx,s=d-o.y-o.vy,p=v*v+s*s;p<l*l&&(0===v&&(p+=(v=u(a))*v),0===s&&(p+=(s=u(a))*s),p=(l-(p=Math.sqrt(p)))/p*c,h.vx+=(v*=p)*(l=(f*=f)/(x+f)),h.vy+=(s*=p)*l,o.vx-=v*(l=1-l),o.vy-=s*l)}}}function y(n){if(n.data)return n.r=r[n.data.index];for(var t=n.r=0;t<4;++t)n[t]&&n[t].r>n.r&&(n.r=n[t].r)}function d(){if(e){var t,i,u=e.length;for(r=new Array(u),t=0;t<u;++t)i=e[t],r[i.index]=+n(i,t,e)}}return"function"!=typeof n&&(n=i(null==n?1:+n)),v.initialize=function(n,t){e=n,a=t,d()},v.iterations=function(n){return arguments.length?(h=+n,v):h},v.strength=function(n){return arguments.length?(c=+n,v):c},v.radius=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),d(),v):n},v},n.forceLink=function(n){var t,e,r,o,f,l,h=a,v=function(n){return 1/Math.min(o[n.source.index],o[n.target.index])},y=i(30),d=1;function g(r){for(var i=0,o=n.length;i<d;++i)for(var a,c,h,v,y,g,x,s=0;s<o;++s)c=(a=n[s]).source,v=(h=a.target).x+h.vx-c.x-c.vx||u(l),y=h.y+h.vy-c.y-c.vy||u(l),v*=g=((g=Math.sqrt(v*v+y*y))-e[s])/g*r*t[s],y*=g,h.vx-=v*(x=f[s]),h.vy-=y*x,c.vx+=v*(x=1-x),c.vy+=y*x}function x(){if(r){var i,u,a=r.length,l=n.length,v=new Map(r.map(((n,t)=>[h(n,t,r),n])));for(i=0,o=new Array(a);i<l;++i)(u=n[i]).index=i,"object"!=typeof u.source&&(u.source=c(v,u.source)),"object"!=typeof u.target&&(u.target=c(v,u.target)),o[u.source.index]=(o[u.source.index]||0)+1,o[u.target.index]=(o[u.target.index]||0)+1;for(i=0,f=new Array(l);i<l;++i)u=n[i],f[i]=o[u.source.index]/(o[u.source.index]+o[u.target.index]);t=new Array(l),s(),e=new Array(l),p()}}function s(){if(r)for(var e=0,i=n.length;e<i;++e)t[e]=+v(n[e],e,n)}function p(){if(r)for(var t=0,i=n.length;t<i;++t)e[t]=+y(n[t],t,n)}return null==n&&(n=[]),g.initialize=function(n,t){r=n,l=t,x()},g.links=function(t){return arguments.length?(n=t,x(),g):n},g.id=function(n){return arguments.length?(h=n,g):h},g.iterations=function(n){return arguments.length?(d=+n,g):d},g.strength=function(n){return arguments.length?(v="function"==typeof n?n:i(+n),s(),g):v},g.distance=function(n){return arguments.length?(y="function"==typeof n?n:i(+n),p(),g):y},g},n.forceManyBody=function(){var n,e,r,o,f,a=i(-30),c=1,l=1/0,y=.81;function d(r){var i,u=n.length,f=t.quadtree(n,h,v).visitAfter(x);for(o=r,i=0;i<u;++i)e=n[i],f.visit(s)}function g(){if(n){var t,e,r=n.length;for(f=new Array(r),t=0;t<r;++t)e=n[t],f[e.index]=+a(e,t,n)}}function x(n){var t,e,r,i,u,o=0,a=0;if(n.length){for(r=i=u=0;u<4;++u)(t=n[u])&&(e=Math.abs(t.value))&&(o+=t.value,a+=e,r+=e*t.x,i+=e*t.y);n.x=r/a,n.y=i/a}else{(t=n).x=t.data.x,t.y=t.data.y;do{o+=f[t.data.index]}while(t=t.next)}n.value=o}function s(n,t,i,a){if(!n.value)return!0;var h=n.x-e.x,v=n.y-e.y,d=a-t,g=h*h+v*v;if(d*d/y<g)return g<l&&(0===h&&(g+=(h=u(r))*h),0===v&&(g+=(v=u(r))*v),g<c&&(g=Math.sqrt(c*g)),e.vx+=h*n.value*o/g,e.vy+=v*n.value*o/g),!0;if(!(n.length||g>=l)){(n.data!==e||n.next)&&(0===h&&(g+=(h=u(r))*h),0===v&&(g+=(v=u(r))*v),g<c&&(g=Math.sqrt(c*g)));do{n.data!==e&&(d=f[n.data.index]*o/g,e.vx+=h*d,e.vy+=v*d)}while(n=n.next)}}return d.initialize=function(t,e){n=t,r=e,g()},d.strength=function(n){return arguments.length?(a="function"==typeof n?n:i(+n),g(),d):a},d.distanceMin=function(n){return arguments.length?(c=n*n,d):Math.sqrt(c)},d.distanceMax=function(n){return arguments.length?(l=n*n,d):Math.sqrt(l)},d.theta=function(n){return arguments.length?(y=n*n,d):Math.sqrt(y)},d},n.forceRadial=function(n,t,e){var r,u,o,f=i(.1);function a(n){for(var i=0,f=r.length;i<f;++i){var a=r[i],c=a.x-t||1e-6,l=a.y-e||1e-6,h=Math.sqrt(c*c+l*l),v=(o[i]-h)*u[i]*n/h;a.vx+=c*v,a.vy+=l*v}}function c(){if(r){var t,e=r.length;for(u=new Array(e),o=new Array(e),t=0;t<e;++t)o[t]=+n(r[t],t,r),u[t]=isNaN(o[t])?0:+f(r[t],t,r)}}return"function"!=typeof n&&(n=i(+n)),null==t&&(t=0),null==e&&(e=0),a.initialize=function(n){r=n,c()},a.strength=function(n){return arguments.length?(f="function"==typeof n?n:i(+n),c(),a):f},a.radius=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),c(),a):n},a.x=function(n){return arguments.length?(t=+n,a):t},a.y=function(n){return arguments.length?(e=+n,a):e},a},n.forceSimulation=function(n){var t,i=1,u=.001,o=1-Math.pow(u,1/300),f=0,a=.6,c=new Map,h=r.timer(g),v=e.dispatch("tick","end"),d=function(){let n=1;return()=>(n=(1664525*n+1013904223)%l)/l}();function g(){x(),v.call("tick",t),i<u&&(h.stop(),v.call("end",t))}function x(e){var r,u,l=n.length;void 0===e&&(e=1);for(var h=0;h<e;++h)for(i+=(f-i)*o,c.forEach((function(n){n(i)})),r=0;r<l;++r)null==(u=n[r]).fx?u.x+=u.vx*=a:(u.x=u.fx,u.vx=0),null==u.fy?u.y+=u.vy*=a:(u.y=u.fy,u.vy=0);return t}function s(){for(var t,e=0,r=n.length;e<r;++e){if((t=n[e]).index=e,null!=t.fx&&(t.x=t.fx),null!=t.fy&&(t.y=t.fy),isNaN(t.x)||isNaN(t.y)){var i=10*Math.sqrt(.5+e),u=e*y;t.x=i*Math.cos(u),t.y=i*Math.sin(u)}(isNaN(t.vx)||isNaN(t.vy))&&(t.vx=t.vy=0)}}function p(t){return t.initialize&&t.initialize(n,d),t}return null==n&&(n=[]),s(),t={tick:x,restart:function(){return h.restart(g),t},stop:function(){return h.stop(),t},nodes:function(e){return arguments.length?(n=e,s(),c.forEach(p),t):n},alpha:function(n){return arguments.length?(i=+n,t):i},alphaMin:function(n){return arguments.length?(u=+n,t):u},alphaDecay:function(n){return arguments.length?(o=+n,t):+o},alphaTarget:function(n){return arguments.length?(f=+n,t):f},velocityDecay:function(n){return arguments.length?(a=1-n,t):1-a},randomSource:function(n){return arguments.length?(d=n,c.forEach(p),t):d},force:function(n,e){return arguments.length>1?(null==e?c.delete(n):c.set(n,p(e)),t):c.get(n)},find:function(t,e,r){var i,u,o,f,a,c=0,l=n.length;for(null==r?r=1/0:r*=r,c=0;c<l;++c)(o=(i=t-(f=n[c]).x)*i+(u=e-f.y)*u)<r&&(a=f,r=o);return a},on:function(n,e){return arguments.length>1?(v.on(n,e),t):v.on(n)}}},n.forceX=function(n){var t,e,r,u=i(.1);function o(n){for(var i,u=0,o=t.length;u<o;++u)(i=t[u]).vx+=(r[u]-i.x)*e[u]*n}function f(){if(t){var i,o=t.length;for(e=new Array(o),r=new Array(o),i=0;i<o;++i)e[i]=isNaN(r[i]=+n(t[i],i,t))?0:+u(t[i],i,t)}}return"function"!=typeof n&&(n=i(null==n?0:+n)),o.initialize=function(n){t=n,f()},o.strength=function(n){return arguments.length?(u="function"==typeof n?n:i(+n),f(),o):u},o.x=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),f(),o):n},o},n.forceY=function(n){var t,e,r,u=i(.1);function o(n){for(var i,u=0,o=t.length;u<o;++u)(i=t[u]).vy+=(r[u]-i.y)*e[u]*n}function f(){if(t){var i,o=t.length;for(e=new Array(o),r=new Array(o),i=0;i<o;++i)e[i]=isNaN(r[i]=+n(t[i],i,t))?0:+u(t[i],i,t)}}return"function"!=typeof n&&(n=i(null==n?0:+n)),o.initialize=function(n){t=n,f()},o.strength=function(n){return arguments.length?(u="function"==typeof n?n:i(+n),f(),o):u},o.y=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),f(),o):n},o},Object.defineProperty(n,"__esModule",{value:!0})}))
+
+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) => {
+      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) {
+      return false;
+    }
+    try {
+      const response = await this.sendMessage({
+        type: "initialize",
+        data: config
+      });
+      return response.success;
+    } catch {
+      return false;
+    }
+  }
+  /**
+   * Run the physics simulation and return final node positions
+   */
+  async runSimulation() {
+    if (!this.worker) {
+      throw new Error("Physics Worker not available");
+    }
+    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);
+    });
+  }
+  /**
+   * 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() {
+  }
+};
+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() {
+    this.imageDataCache.clear();
+    this.pathCache.clear();
+    this.renderQueue.length = 0;
+    this.canvas = null;
+    this.context = null;
+    this.isOptimizing = false;
+  }
+  /**
+   * 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;
+  // Visibility change timeouts for cleanup
+  visibilityTimeoutId = null;
+  intersectionTimeoutId = null;
+  kapsuleTimeoutId = 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) {
+          this.getGraphInstance().d3ReheatSimulation();
+          this.wasInitializedHidden = false;
+        }
+        if (this.pendingFitView) {
+          if (this.visibilityTimeoutId) {
+            clearTimeout(this.visibilityTimeoutId);
+          }
+          this.visibilityTimeoutId = setTimeout(() => {
+            this.zoomToFit(40, 300);
+            this.visibilityTimeoutId = null;
+          }, 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 (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.physicsTimeoutId) {
+                window.clearTimeout(this.physicsTimeoutId);
+                this.physicsTimeoutId = void 0;
+              }
+              if (!this.webWorkerPhysicsCompleted) {
+                this.runWebWorkerPhysics();
+              }
+              this.wasInitializedOutOfView = false;
+            }
+            if (this.pendingFitView) {
+              if (this.intersectionTimeoutId) {
+                clearTimeout(this.intersectionTimeoutId);
+              }
+              this.intersectionTimeoutId = setTimeout(() => {
+                if (this.pendingFitView) {
+                  this.zoomToFit(40, 300);
+                }
+                this.intersectionTimeoutId = null;
+              }, 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)) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+  /**
+   * Setup deferred fitView mechanism using IntersectionObserver
+   * This handles library-level viewport-aware fitView
+   */
+  setupDeferredFitView() {
+    if (this.intersectionObserver || !this.container || !this.deferredFitViewParams) {
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && this.pendingFitView && this.deferredFitViewParams) {
+          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) {
+      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);
+    }
+  }
+  /**
+   * 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 visibility-related timeouts
+   */
+  cleanupVisibilityTimeouts() {
+    if (this.visibilityTimeoutId) {
+      clearTimeout(this.visibilityTimeoutId);
+      this.visibilityTimeoutId = null;
+    }
+    if (this.intersectionTimeoutId) {
+      clearTimeout(this.intersectionTimeoutId);
+      this.intersectionTimeoutId = null;
+    }
+    if (this.kapsuleTimeoutId) {
+      clearTimeout(this.kapsuleTimeoutId);
+      this.kapsuleTimeoutId = 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 };
+    }
+  }
+  /**
+   * 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()) {
+        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
+      };
+      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;
+    } catch {
+    }
+  }
+  /**
+   * 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();
+  }
+  /**
+   * 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();
+    }
+  }
+  stopAnimation() {
+    if (!this.isInitialized) return;
+    if (this.forceGraph) {
+      this.getGraphInstance().pauseAnimation();
+    }
+  }
+  pauseAnimation() {
+    if (!this.isInitialized) return;
+    if (this.forceGraph) {
+      this.getGraphInstance().pauseAnimation();
+    }
+  }
+  resumeAnimation() {
+    if (!this.isInitialized) return;
+    if (this.forceGraph) {
+      this.getGraphInstance().resumeAnimation();
+    }
+  }
+  centerAt(x3, y3, duration) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    if (this.forceGraph) {
+      this.getGraphInstance().centerAt(x3, y3, duration);
+    }
+  }
+  zoom(scale, duration) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    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;
+    }
+    return result;
+  }
+  zoomToFit(padding, duration) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    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 (!isVisible || !hasValidDimensions || !bboxValid) {
+      this.deferredFitViewParams = { padding: padding || 40, duration: duration || 300 };
+      this.pendingFitView = true;
+      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 (width > 0 && height > 0) {
+        this.getGraphInstance().centerAt(centerX, centerY);
+        this.getGraphInstance().zoom(scale, duration || 300);
+        this.pendingFitView = false;
+      }
+    }
+  }
+  screen2GraphCoords(screenX, screenY) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    let result = { x: 0, y: 0 };
+    if (this.forceGraph) {
+      result = this.getGraphInstance().screen2GraphCoords(screenX, screenY) || { x: 0, y: 0 };
+    }
+    return result;
+  }
+  graph2ScreenCoords(graphX, graphY) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    let result = { x: 0, y: 0 };
+    if (this.forceGraph) {
+      result = this.getGraphInstance().graph2ScreenCoords(graphX, graphY) || { x: 0, y: 0 };
+    }
+    return result;
+  }
+  getGraphBbox(nodes) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    let result = { x: [0, 0], y: [0, 0] };
+    if (this.forceGraph) {
+      result = this.getGraphInstance().getGraphBbox(nodes) || { x: [0, 0], y: [0, 0] };
+    }
+    return result;
+  }
+  emitParticle(link) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    if (this.forceGraph) {
+      this.getGraphInstance().emitParticle(link);
+    }
+  }
+  d3Force(forceName, forceImpl) {
+    if (!this.isInitialized) this.initializeForceGraph();
+    if (this.forceGraph) {
+      if (forceImpl !== void 0) {
+        this.getGraphInstance().d3Force(forceName, forceImpl);
+        return this;
+      } else {
+        const result = this.getGraphInstance().d3Force(forceName);
+        return result;
+      }
+    }
+    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.config.deterministicLayout !== false && this.wasInitializedOutOfView && data?.nodes?.length > 0 && !this.webWorkerPhysicsCompleted) {
+      if (this.physicsTimeoutId) {
+        window.clearTimeout(this.physicsTimeoutId);
+      }
+      this.physicsTimeoutId = window.setTimeout(() => {
+        this.runWebWorkerPhysics().catch(() => {
+        });
+      }, 200);
+    }
+    return this;
+  }
+  width(width) {
+    if (width === void 0) {
+      return this.config.width ?? 400;
+    }
+    this.config.width = width;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().width(width);
+    }
+    return this;
+  }
+  height(height) {
+    if (height === void 0) {
+      return this.config.height ?? 300;
+    }
+    this.config.height = height;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().height(height);
+    }
+    return this;
+  }
+  backgroundColor(color2) {
+    if (color2 === void 0) {
+      return this.config.backgroundColor ?? "#ffffff";
+    }
+    this.config.backgroundColor = color2;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().backgroundColor(color2);
+    }
+    return this;
+  }
+  nodeColor(color2) {
+    if (color2 === void 0) return this.config.nodeColor ?? "#999999";
+    this.config.nodeColor = color2;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeColor(color2);
+    }
+    return this;
+  }
+  nodeVal(val) {
+    if (val === void 0) return this.config.nodeVal ?? 1;
+    this.config.nodeVal = val;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeVal(val);
+    }
+    return this;
+  }
+  nodeRelSize(size) {
+    if (size === void 0) return this.config.nodeRelSize ?? 4;
+    this.config.nodeRelSize = size;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeRelSize(size);
+    }
+    return this;
+  }
+  nodeLabel(label) {
+    if (label === void 0) return this.config.nodeLabel ?? "";
+    this.config.nodeLabel = label;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeLabel(label);
+    }
+    return this;
+  }
+  nodeVisibility(visibility) {
+    if (visibility === void 0) return this.config.nodeVisibility ?? true;
+    this.config.nodeVisibility = visibility;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeVisibility(visibility);
+    }
+    return this;
+  }
+  nodeCanvasObjectMode(mode) {
+    if (mode === void 0) return this.config.nodeCanvasObjectMode ?? "replace";
+    this.config.nodeCanvasObjectMode = mode;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeCanvasObjectMode(mode);
+    }
+    return this;
+  }
+  linkColor(color2) {
+    if (color2 === void 0) return this.config.linkColor ?? "#999999";
+    this.config.linkColor = color2;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkColor(color2);
+    }
+    return this;
+  }
+  linkWidth(width) {
+    if (width === void 0) return this.config.linkWidth ?? 1;
+    this.config.linkWidth = width;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkWidth(width);
+    }
+    return this;
+  }
+  linkLabel(label) {
+    if (label === void 0) return this.config.linkLabel ?? "";
+    this.config.linkLabel = label;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkLabel(label);
+    }
+    return this;
+  }
+  linkVisibility(visibility) {
+    if (visibility === void 0) return this.config.linkVisibility ?? true;
+    this.config.linkVisibility = visibility;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkVisibility(visibility);
+    }
+    return this;
+  }
+  linkDirectionalArrowLength(length) {
+    if (length === void 0) return this.config.linkDirectionalArrowLength ?? 0;
+    this.config.linkDirectionalArrowLength = length;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalArrowLength(length);
+    }
+    return this;
+  }
+  linkDirectionalParticles(particles) {
+    if (particles === void 0) return this.config.linkDirectionalParticles ?? 0;
+    this.config.linkDirectionalParticles = particles;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalParticles(particles);
+    }
+    return this;
+  }
+  linkDirectionalArrowColor(color2) {
+    if (color2 === void 0) return this.config.linkDirectionalArrowColor ?? "#999999";
+    this.config.linkDirectionalArrowColor = color2;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalArrowColor(color2);
+    }
+    return this;
+  }
+  linkDirectionalArrowRelPos(position) {
+    if (position === void 0) return this.config.linkDirectionalArrowRelPos ?? 0.5;
+    this.config.linkDirectionalArrowRelPos = position;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalArrowRelPos(position);
+    }
+    return this;
+  }
+  linkDirectionalParticleSpeed(speed) {
+    if (speed === void 0) return this.config.linkDirectionalParticleSpeed ?? 1;
+    this.config.linkDirectionalParticleSpeed = speed;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalParticleSpeed(speed);
+    }
+    return this;
+  }
+  linkDirectionalParticleWidth(width) {
+    if (width === void 0) return this.config.linkDirectionalParticleWidth ?? 4;
+    this.config.linkDirectionalParticleWidth = width;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalParticleWidth(width);
+    }
+    return this;
+  }
+  linkDirectionalParticleColor(color2) {
+    if (color2 === void 0) return this.config.linkDirectionalParticleColor ?? "#999999";
+    this.config.linkDirectionalParticleColor = color2;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkDirectionalParticleColor(color2);
+    }
+    return this;
+  }
+  linkCurvature(curvature) {
+    if (curvature === void 0) return this.config.linkCurvature ?? 0;
+    this.config.linkCurvature = curvature;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkCurvature(curvature);
+    }
+    return this;
+  }
+  linkCanvasObjectMode(mode) {
+    if (mode === void 0) return this.config.linkCanvasObjectMode ?? "replace";
+    this.config.linkCanvasObjectMode = mode;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkCanvasObjectMode(mode);
+    }
+    return this;
+  }
+  onNodeClick(handler) {
+    if (handler === void 0) return this.config.onNodeClick ?? null;
+    this.config.onNodeClick = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onNodeClick(handler);
+    }
+    return this;
+  }
+  onNodeDoubleClick(handler) {
+    if (handler === void 0) return this.config.onNodeDoubleClick ?? null;
+    this.config.onNodeDoubleClick = handler || void 0;
+    return this;
+  }
+  onNodeHover(handler) {
+    if (handler === void 0) return this.config.onNodeHover ?? null;
+    this.config.onNodeHover = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onNodeHover(handler);
+    }
+    return this;
+  }
+  onLinkClick(handler) {
+    if (handler === void 0) return this.config.onLinkClick ?? null;
+    this.config.onLinkClick = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onLinkClick(handler);
+    }
+    return this;
+  }
+  onLinkHover(handler) {
+    if (handler === void 0) return this.config.onLinkHover ?? null;
+    this.config.onLinkHover = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onLinkHover(handler);
+    }
+    return this;
+  }
+  onRenderFramePre(handler) {
+    if (handler === void 0) return this.config.onRenderFramePre ?? null;
+    this.config.onRenderFramePre = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onRenderFramePre(handler);
+    }
+    return this;
+  }
+  onRenderFramePost(handler) {
+    if (handler === void 0) return this.config.onRenderFramePost ?? null;
+    this.config.onRenderFramePost = handler || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onRenderFramePost(handler);
+    }
+    return this;
+  }
+  cooldownTime(time) {
+    if (time === void 0) return this.config.cooldownTime ?? 15e3;
+    this.config.cooldownTime = time;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().cooldownTime(time);
+    }
+    return this;
+  }
+  d3AlphaDecay(decay) {
+    if (decay === void 0) return this.config.d3AlphaDecay ?? 0.0228;
+    this.config.d3AlphaDecay = decay;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().d3AlphaDecay(decay);
+    }
+    return this;
+  }
+  d3VelocityDecay(decay) {
+    if (decay === void 0) return this.config.d3VelocityDecay ?? 0.4;
+    this.config.d3VelocityDecay = decay;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().d3VelocityDecay(decay);
+    }
+    return this;
+  }
+  onEngineStop(handler) {
+    if (handler === void 0) return this.config.onEngineStop;
+    this.config.onEngineStop = handler;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onEngineStop(handler);
+    }
+    return this;
+  }
+  onEngineTick(handler) {
+    if (handler === void 0) return this.config.onEngineTick;
+    this.config.onEngineTick = handler;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().onEngineTick(handler);
+    }
+    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;
+  }
+  /**
+   * Stop rendering performance monitoring
+   */
+  stopRenderingMonitoring() {
+    if (!this.renderingMonitor) return;
+    this.renderingMonitor.stopMonitoring();
+    this.isRenderingOptimized = false;
+  }
+  /**
+   * 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) {
+      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();
+  }
+  cooldownTicks(ticks) {
+    if (ticks === void 0) return this.config.cooldownTicks ?? 100;
+    this.config.cooldownTicks = ticks;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().cooldownTicks(ticks);
+    }
+    return this;
+  }
+  d3AlphaMin(min) {
+    if (min === void 0) return this.config.d3AlphaMin ?? 1e-3;
+    this.config.d3AlphaMin = min;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().d3AlphaMin(min);
+    }
+    return this;
+  }
+  enableNodeDrag(enable) {
+    if (enable === void 0) return this.config.enableNodeDrag ?? true;
+    this.config.enableNodeDrag = enable;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().enableNodeDrag(enable);
+    }
+    return this;
+  }
+  nodeCanvasObject(paintFunction) {
+    if (paintFunction === void 0) return this.config.nodeCanvasObject ?? null;
+    this.config.nodeCanvasObject = paintFunction || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().nodeCanvasObject(paintFunction);
+    }
+    return this;
+  }
+  linkCanvasObject(paintFunction) {
+    if (paintFunction === void 0) return this.config.linkCanvasObject ?? null;
+    this.config.linkCanvasObject = paintFunction || void 0;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().linkCanvasObject(paintFunction);
+    }
+    return this;
+  }
+  autoPauseRedraw(enable) {
+    if (enable === void 0) return this.config.autoPauseRedraw ?? true;
+    this.config.autoPauseRedraw = enable;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().autoPauseRedraw(enable);
+    }
+    return this;
+  }
+  enableZoomInteraction(enable) {
+    if (enable === void 0) {
+      const configValue = this.config.enableZoomInteraction ?? true;
+      return typeof configValue === "function" ? true : configValue;
+    }
+    this.config.enableZoomInteraction = enable;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().enableZoomInteraction(enable);
+    }
+    return this;
+  }
+  enablePanInteraction(enable) {
+    if (enable === void 0) {
+      const configValue = this.config.enablePanInteraction ?? true;
+      return typeof configValue === "function" ? true : configValue;
+    }
+    this.config.enablePanInteraction = enable;
+    if (this.isInitialized && this.forceGraph) {
+      this.getGraphInstance().enablePanInteraction(enable);
+    }
+    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();
+    } 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();
+    } 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");
+    }
+    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;
+      });
+    } 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 = "";
+      });
+      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);
+      if (this.kapsuleTimeoutId) {
+        clearTimeout(this.kapsuleTimeoutId);
+      }
+      this.kapsuleTimeoutId = setTimeout(() => {
+        this.zoom(targetZoom, duration / 2);
+        this.kapsuleTimeoutId = null;
+      }, 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 {
+    }
+  }
+  /**
+   * 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.cleanupVisibilityTimeouts();
+    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 +13218,10 @@ export {
   SelectionManager,
   StandardColor,
   V2Graph,
+  VERSION,
   ValidationError,
   ZoomManager,
+  createForceGraph,
   createV2Graph,
   getIcon,
   getIconSvg,