@fusefactory/fuse-three-forcegraph 1.0.5 → 1.0.6

package/dist/index.mjs

@@ -1,434 +1,80 @@
 import CameraControls from "camera-controls";
 import * as THREE from "three";
 import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
-import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
 import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
-import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
 import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
+import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
 import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js";
 
-//#region core/EventEmitter.ts
-var EventEmitter = class {
-	constructor() {
-		this.listeners = {};
-	}
-	listenerCount(event) {
-		return this.listeners[event] ? this.listeners[event].length : 0;
-	}
-	on(event, listener) {
-		if (!this.listeners[event]) this.listeners[event] = [];
-		this.listeners[event].push(listener);
-		return () => this.off(event, listener);
-	}
-	off(event, listener) {
-		if (!this.listeners[event]) return;
-		const index = this.listeners[event].indexOf(listener);
-		if (index === -1) return;
-		this.listeners[event].splice(index, 1);
-	}
-	emit(event, ...args) {
-		if (!this.listeners[event]) return;
-		this.listeners[event].forEach((listener) => listener(...args));
-	}
-};
-
-//#endregion
-//#region controls/InputProcessor.ts
+//#region core/Clock.ts
 /**
-* Manages pointer/mouse input and emits interaction events
-* Uses GPU picking for efficient node detection
+* Clock - Unified timing for the force graph package
 */
-var InputProcessor = class extends EventEmitter {
-	constructor(pickFn, canvas, viewport) {
-		super();
-		this.pickFn = pickFn;
-		this.canvas = canvas;
-		this.viewport = viewport;
-		this.CLICK_THRESHOLD = 200;
-		this.HOVER_TO_POP_MS = 800;
-		this.pointer = new THREE.Vector2();
-		this.canvasPointer = new THREE.Vector2();
-		this.isPointerDown = false;
-		this.isDragging = false;
-		this.mouseDownTime = 0;
-		this.draggedIndex = -1;
-		this.currentHoverIndex = -1;
-		this.hoverStartTime = 0;
-		this.hoverProgress = 0;
-		this.hasPopped = false;
-		this.isTouch = false;
-		this.TOUCH_MOVE_THRESHOLD = 10;
-		this.pointerDownX = 0;
-		this.pointerDownY = 0;
-		this.lastClientX = null;
-		this.lastClientY = null;
-		this.handlePointerMove = (event) => {
-			this.updatePointer(event);
-			this.lastClientX = event.clientX;
-			this.lastClientY = event.clientY;
-			const pickedIndex = this.pickFn(this.canvasPointer.x, this.canvasPointer.y);
-			if (!this.isTouch) this.updateHover(pickedIndex);
-			if (this.isTouch && !this.isDragging) {
-				const dx = event.clientX - this.pointerDownX;
-				const dy = event.clientY - this.pointerDownY;
-				if (dx * dx + dy * dy < this.TOUCH_MOVE_THRESHOLD * this.TOUCH_MOVE_THRESHOLD) return;
-			}
-			if (this.isPointerDown && this.draggedIndex >= 0) {
-				if (!this.isDragging) {
-					this.isDragging = true;
-					this.emit("pointer:dragstart", {
-						index: this.draggedIndex,
-						x: this.canvasPointer.x,
-						y: this.canvasPointer.y,
-						clientX: event.clientX,
-						clientY: event.clientY
-					});
-				}
-				this.emit("pointer:drag", {
-					index: this.draggedIndex,
-					x: this.canvasPointer.x,
-					y: this.canvasPointer.y,
-					clientX: event.clientX,
-					clientY: event.clientY
-				});
-			}
-		};
-		this.handlePointerDown = (event) => {
-			this.updatePointer(event);
-			this.mouseDownTime = Date.now();
-			this.isPointerDown = true;
-			this.isTouch = event.pointerType === "touch";
-			this.pointerDownX = event.clientX;
-			this.pointerDownY = event.clientY;
-			const pickedIndex = this.pickFn(this.canvasPointer.x, this.canvasPointer.y);
-			this.draggedIndex = pickedIndex;
-			if (pickedIndex >= 0) this.emit("pointer:down", {
-				index: pickedIndex,
-				x: this.canvasPointer.x,
-				y: this.canvasPointer.y,
-				clientX: event.clientX,
-				clientY: event.clientY
-			});
-		};
-		this.handlePointerUp = (event) => {
-			const clickDuration = Date.now() - this.mouseDownTime;
-			const wasClick = this.isTouch ? !this.isDragging : clickDuration < this.CLICK_THRESHOLD;
-			if (this.isDragging) this.emit("pointer:dragend", {
-				index: this.draggedIndex,
-				x: this.canvasPointer.x,
-				y: this.canvasPointer.y,
-				clientX: event.clientX,
-				clientY: event.clientY
-			});
-			else if (wasClick && this.draggedIndex >= 0) this.emit("pointer:click", {
-				index: this.draggedIndex,
-				x: this.canvasPointer.x,
-				y: this.canvasPointer.y,
-				clientX: event.clientX,
-				clientY: event.clientY
-			});
-			else if (wasClick && this.draggedIndex < 0) this.emit("pointer:clickempty", {
-				x: this.canvasPointer.x,
-				y: this.canvasPointer.y,
-				clientX: event.clientX,
-				clientY: event.clientY
-			});
-			this.isPointerDown = false;
-			this.isDragging = false;
-			this.draggedIndex = -1;
-		};
-		this.handlePointerLeave = () => {
-			this.lastClientX = null;
-			this.lastClientY = null;
-			this.updateHover(-1);
-		};
-		this.setupEventListeners();
-	}
-	setupEventListeners() {
-		this.canvas.addEventListener("pointermove", this.handlePointerMove);
-		this.canvas.addEventListener("pointerdown", this.handlePointerDown);
-		this.canvas.addEventListener("pointerup", this.handlePointerUp);
-		this.canvas.addEventListener("pointerleave", this.handlePointerLeave);
-	}
-	updateHover(index) {
-		const prevIndex = this.currentHoverIndex;
-		if (index === prevIndex) {
-			if (index >= 0) {
-				const elapsed = Date.now() - this.hoverStartTime;
-				this.hoverProgress = Math.min(1, elapsed / this.HOVER_TO_POP_MS);
-				this.emit("pointer:hover", {
-					index,
-					progress: this.hoverProgress,
-					x: this.canvasPointer.x,
-					y: this.canvasPointer.y,
-					clientX: this.lastClientX,
-					clientY: this.lastClientY
-				});
-				if (this.hoverProgress >= 1 && !this.hasPopped) {
-					this.hasPopped = true;
-					this.emit("pointer:pop", {
-						index,
-						x: this.canvasPointer.x,
-						y: this.canvasPointer.y,
-						clientX: this.lastClientX,
-						clientY: this.lastClientY
-					});
-				}
-			}
-			return;
-		}
-		if (prevIndex >= 0) this.emit("pointer:hoverend", { index: prevIndex });
-		if (index >= 0) {
-			this.currentHoverIndex = index;
-			this.hoverStartTime = Date.now();
-			this.hoverProgress = 0;
-			this.hasPopped = false;
-			this.emit("pointer:hoverstart", {
-				index,
-				x: this.canvasPointer.x,
-				y: this.canvasPointer.y,
-				clientX: this.lastClientX,
-				clientY: this.lastClientY
-			});
-		} else {
-			this.currentHoverIndex = -1;
-			this.hoverStartTime = 0;
-			this.hoverProgress = 0;
-			this.hasPopped = false;
-		}
-	}
+var Clock = class {
+	previousTime = 0;
+	elapsedTime = 0;
+	deltaTime = 0;
+	isRunning = false;
+	maxDeltaTime = .1;
+	constructor() {}
 	/**
-	* Update hover state even when pointer is stationary
-	* Called from render loop
+	* Start the clock
 	*/
-	update() {
-		if (this.isTouch) return;
-		if (this.lastClientX !== null && this.lastClientY !== null) {
-			const rect = this.canvas.getBoundingClientRect();
-			const x = this.lastClientX - rect.left;
-			const y = this.lastClientY - rect.top;
-			const pickedIndex = this.pickFn(x, y);
-			this.updateHover(pickedIndex);
-		}
-	}
-	updatePointer(event) {
-		const rect = this.canvas.getBoundingClientRect();
-		const x = event.clientX - rect.left;
-		const y = event.clientY - rect.top;
-		const ndcX = x / rect.width * 2 - 1;
-		const ndcY = -(y / rect.height) * 2 + 1;
-		this.pointer.set(ndcX, ndcY);
-		this.canvasPointer.set(x, y);
+	start() {
+		if (this.isRunning) return;
+		this.previousTime = performance.now() / 1e3;
+		this.isRunning = true;
 	}
 	/**
-	* Update viewport dimensions on resize
+	* Stop the clock
 	*/
-	resize(width, height) {
-		this.viewport.width = width;
-		this.viewport.height = height;
-	}
-	dispose() {
-		this.canvas.removeEventListener("pointermove", this.handlePointerMove);
-		this.canvas.removeEventListener("pointerdown", this.handlePointerDown);
-		this.canvas.removeEventListener("pointerup", this.handlePointerUp);
-		this.canvas.removeEventListener("pointerleave", this.handlePointerLeave);
-	}
-};
-
-//#endregion
-//#region controls/handlers/HoverHandler.ts
-var HoverHandler = class extends EventEmitter {
-	constructor(getNodeByIndex) {
-		super();
-		this.getNodeByIndex = getNodeByIndex;
-		this.handleHoverStart = (data) => {
-			const node = this.getNodeByIndex(data.index);
-			if (!node) return;
-			this.emit("node:hoverstart", {
-				node,
-				x: data.x,
-				y: data.y,
-				clientX: data.clientX,
-				clientY: data.clientY
-			});
-		};
-		this.handleHover = (data) => {
-			const node = this.getNodeByIndex(data.index);
-			if (!node) return;
-			const progress = data.progress ?? 0;
-			this.emit("node:hover", {
-				node,
-				x: data.x,
-				y: data.y,
-				progress,
-				clientX: data.clientX,
-				clientY: data.clientY
-			});
-		};
-		this.handlePop = (data) => {
-			const node = this.getNodeByIndex(data.index);
-			if (!node) return;
-			this.emit("node:pop", {
-				node,
-				x: data.x,
-				y: data.y,
-				clientX: data.clientX,
-				clientY: data.clientY
-			});
-		};
-		this.handleHoverEnd = (data) => {
-			if (!this.getNodeByIndex(data.index)) return;
-			this.emit("node:hoverend");
-		};
-		this.on("pointer:hoverstart", this.handleHoverStart);
-		this.on("pointer:hover", this.handleHover);
-		this.on("pointer:pop", this.handlePop);
-		this.on("pointer:hoverend", this.handleHoverEnd);
-	}
-	dispose() {
-		this.off("pointer:hoverstart", this.handleHoverStart);
-		this.off("pointer:hover", this.handleHover);
-		this.off("pointer:pop", this.handlePop);
-		this.off("pointer:hoverend", this.handleHoverEnd);
-	}
-};
-
-//#endregion
-//#region controls/handlers/ClickHandler.ts
-var ClickHandler = class extends EventEmitter {
-	constructor(getNodeByIndex) {
-		super();
-		this.getNodeByIndex = getNodeByIndex;
-		this.handleClick = (data) => {
-			const node = this.getNodeByIndex(data.index);
-			if (!node) return;
-			this.emit("node:click", {
-				node,
-				x: data.x,
-				y: data.y,
-				clientX: data.clientX,
-				clientY: data.clientY
-			});
-		};
-		this.on("pointer:click", this.handleClick);
-	}
-	dispose() {
-		this.off("pointer:click", this.handleClick);
+	stop() {
+		this.isRunning = false;
 	}
-};
-
-//#endregion
-//#region types/iGraphNode.ts
-let NodeState = /* @__PURE__ */ function(NodeState) {
-	NodeState[NodeState["Hidden"] = 0] = "Hidden";
-	NodeState[NodeState["Passive"] = 1] = "Passive";
-	NodeState[NodeState["Fixed"] = 2] = "Fixed";
-	NodeState[NodeState["Active"] = 3] = "Active";
-	return NodeState;
-}({});
-
-//#endregion
-//#region controls/handlers/DragHandler.ts
-var DragHandler = class extends EventEmitter {
-	constructor(getNodeByIndex, cameraController, forceSimulation, viewport) {
-		super();
-		this.getNodeByIndex = getNodeByIndex;
-		this.cameraController = cameraController;
-		this.forceSimulation = forceSimulation;
-		this.viewport = viewport;
-		this.isDragging = false;
-		this.raycaster = new THREE.Raycaster();
-		this.dragPlane = new THREE.Plane();
-		this.pointer = new THREE.Vector2();
-		this.handleDragStart = (data) => {
-			const node = this.getNodeByIndex(data.index);
-			if (!node) return;
-			let state = node.state ?? NodeState.Active;
-			if (node.state === void 0) state = NodeState.Fixed;
-			if (state !== NodeState.Active || node.metadata?.hidden) return;
-			this.isDragging = true;
-			if (this.cameraController) this.cameraController.setEnabled(false);
-			if (this.cameraController) {
-				this.cameraController.camera;
-				const target = this.cameraController.getTarget();
-				this.setupDragPlane(target);
-			}
-			if (this.forceSimulation) {
-				const worldPos = this.screenToWorld(data.x, data.y);
-				if (worldPos) this.forceSimulation.startDrag(data.index, worldPos);
-			}
-			this.emit("node:dragstart", { node });
-		};
-		this.handleDrag = (data) => {
-			const node = this.getNodeByIndex(data.index);
-			if (!node) return;
-			if (this.forceSimulation) {
-				const worldPos = this.screenToWorld(data.x, data.y);
-				if (worldPos) this.forceSimulation.updateDrag(worldPos);
-			}
-			this.emit("node:drag", {
-				node,
-				x: data.x,
-				y: data.y
-			});
-		};
-		this.handleDragEnd = (data) => {
-			const node = this.getNodeByIndex(data.index);
-			if (!node) return;
-			this.isDragging = false;
-			if (this.cameraController) this.cameraController.setEnabled(true);
-			if (this.forceSimulation) this.forceSimulation.endDrag();
-			this.emit("node:dragend", { node });
-		};
-		this.on("pointer:dragstart", this.handleDragStart);
-		this.on("pointer:drag", this.handleDrag);
-		this.on("pointer:dragend", this.handleDragEnd);
+	/**
+	* Update the clock - call once per frame
+	* @returns delta time in seconds
+	*/
+	update() {
+		if (!this.isRunning) this.start();
+		const now = performance.now() / 1e3;
+		const rawDelta = now - this.previousTime;
+		this.previousTime = now;
+		this.deltaTime = Math.min(rawDelta, this.maxDeltaTime);
+		this.elapsedTime += this.deltaTime;
+		return this.deltaTime;
 	}
 	/**
-	* Set up drag plane perpendicular to camera, passing through a world point
+	* Get delta time in seconds
 	*/
-	setupDragPlane(worldPoint) {
-		if (!this.cameraController) return;
-		const camera = this.cameraController.camera;
-		const cameraDirection = new THREE.Vector3();
-		camera.getWorldDirection(cameraDirection);
-		const planeNormal = cameraDirection.clone().negate();
-		this.dragPlane.setFromNormalAndCoplanarPoint(planeNormal, worldPoint);
+	getDeltaTime() {
+		return this.deltaTime;
 	}
 	/**
-	* Convert screen coordinates to world position on drag plane
+	* Get total elapsed time in seconds
 	*/
-	screenToWorld(clientX, clientY) {
-		if (!this.cameraController || !this.viewport) return null;
-		this.pointer.x = clientX / this.viewport.width * 2 - 1;
-		this.pointer.y = -(clientY / this.viewport.height) * 2 + 1;
-		this.raycaster.setFromCamera(this.pointer, this.cameraController.camera);
-		const target = new THREE.Vector3();
-		return this.raycaster.ray.intersectPlane(this.dragPlane, target);
+	getElapsedTime() {
+		return this.elapsedTime;
 	}
 	/**
-	* Update viewport dimensions on resize
+	* Check if clock is running
 	*/
-	resize(width, height) {
-		if (this.viewport) {
-			this.viewport.width = width;
-			this.viewport.height = height;
-		}
-	}
-	dispose() {
-		this.off("pointer:dragstart", this.handleDragStart);
-		this.off("pointer:drag", this.handleDrag);
-		this.off("pointer:dragend", this.handleDragEnd);
+	getIsRunning() {
+		return this.isRunning;
 	}
 };
 
 //#endregion
 //#region ui/Tooltips.ts
 var Tooltip = class {
+	element;
+	isVisible = false;
+	cleanup;
+	positionCallback;
 	constructor(type, container) {
 		this.type = type;
 		this.container = container;
-		this.isVisible = false;
 		this.element = this.createElement();
 	}
 	createElement() {
@@ -493,11 +139,15 @@ var Tooltip = class {
 //#endregion
 //#region ui/TooltipManager.ts
 var TooltipManager = class {
+	mainTooltip;
+	previewTooltip;
+	chainTooltips = /* @__PURE__ */ new Map();
+	config;
+	closeButton = null;
+	onCloseCallback;
 	constructor(container, canvas, config) {
 		this.container = container;
 		this.canvas = canvas;
-		this.chainTooltips = /* @__PURE__ */ new Map();
-		this.closeButton = null;
 		this.config = { ...config };
 		this.mainTooltip = new Tooltip("main", container);
 		this.previewTooltip = new Tooltip("preview", container);
@@ -593,82 +243,501 @@ var TooltipManager = class {
 		this.closeButton.addEventListener("mouseenter", () => {
 			if (this.closeButton) this.closeButton.style.background = "rgba(255, 255, 255, 0.3)";
 		});
-		this.closeButton.addEventListener("mouseleave", () => {
-			if (this.closeButton) this.closeButton.style.background = "rgba(255, 255, 255, 0.2)";
+		this.closeButton.addEventListener("mouseleave", () => {
+			if (this.closeButton) this.closeButton.style.background = "rgba(255, 255, 255, 0.2)";
+		});
+		this.closeButton.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.hideFull();
+			if (this.onCloseCallback) this.onCloseCallback();
+		});
+		element.appendChild(this.closeButton);
+	}
+	/**
+	* Remove close button from tooltip
+	*/
+	removeCloseButton() {
+		if (this.closeButton) {
+			this.closeButton.remove();
+			this.closeButton = null;
+		}
+		const element = this.mainTooltip.getElement();
+		element.style.pointerEvents = "none";
+	}
+	/**
+	* Hide all tooltips
+	*/
+	hideAll() {
+		this.hideGrabIcon();
+		this.hidePreview();
+		this.hideFull();
+		this.hideChainTooltips();
+	}
+	showMainTooltip(content, x, y) {
+		this.mainTooltip.open(content);
+		this.mainTooltip.updatePos(x, y);
+		console.log("Showing main tooltip");
+	}
+	hideMainTooltip() {
+		this.mainTooltip.close();
+	}
+	showChainTooltip(nodeId, content, x, y) {
+		if (!this.chainTooltips.has(nodeId)) this.chainTooltips.set(nodeId, new Tooltip("label", this.container));
+		const tooltip = this.chainTooltips.get(nodeId);
+		tooltip.open(content);
+		tooltip.updatePos(x, y);
+	}
+	hideChainTooltips() {
+		this.chainTooltips.forEach((tooltip) => tooltip.close());
+	}
+	updateMainTooltipPos(x, y) {
+		this.mainTooltip.updatePos(x, y);
+	}
+	/**
+	* Set main tooltip visibility (doesn't affect open state or content)
+	*/
+	setMainTooltipVisibility(visible) {
+		if (visible) this.mainTooltip.show();
+		else this.mainTooltip.hide();
+	}
+	dispose() {
+		this.removeCloseButton();
+		this.mainTooltip.destroy();
+		this.previewTooltip.destroy();
+		this.chainTooltips.forEach((tooltip) => tooltip.destroy());
+		this.chainTooltips.clear();
+	}
+};
+
+//#endregion
+//#region core/EventEmitter.ts
+var EventEmitter = class {
+	listeners = {};
+	listenerCount(event) {
+		return this.listeners[event] ? this.listeners[event].length : 0;
+	}
+	on(event, listener) {
+		if (!this.listeners[event]) this.listeners[event] = [];
+		this.listeners[event].push(listener);
+		return () => this.off(event, listener);
+	}
+	off(event, listener) {
+		if (!this.listeners[event]) return;
+		const index = this.listeners[event].indexOf(listener);
+		if (index === -1) return;
+		this.listeners[event].splice(index, 1);
+	}
+	emit(event, ...args) {
+		if (!this.listeners[event]) return;
+		this.listeners[event].forEach((listener) => listener(...args));
+	}
+};
+
+//#endregion
+//#region controls/handlers/ClickHandler.ts
+var ClickHandler = class extends EventEmitter {
+	constructor(getNodeByIndex) {
+		super();
+		this.getNodeByIndex = getNodeByIndex;
+		this.on("pointer:click", this.handleClick);
+	}
+	handleClick = (data) => {
+		const node = this.getNodeByIndex(data.index);
+		if (!node) return;
+		this.emit("node:click", {
+			node,
+			x: data.x,
+			y: data.y,
+			clientX: data.clientX,
+			clientY: data.clientY
+		});
+	};
+	dispose() {
+		this.off("pointer:click", this.handleClick);
+	}
+};
+
+//#endregion
+//#region types/iGraphNode.ts
+let NodeState = /* @__PURE__ */ function(NodeState) {
+	NodeState[NodeState["Hidden"] = 0] = "Hidden";
+	NodeState[NodeState["Passive"] = 1] = "Passive";
+	NodeState[NodeState["Fixed"] = 2] = "Fixed";
+	NodeState[NodeState["Active"] = 3] = "Active";
+	return NodeState;
+}({});
+
+//#endregion
+//#region controls/handlers/DragHandler.ts
+var DragHandler = class extends EventEmitter {
+	isDragging = false;
+	raycaster = new THREE.Raycaster();
+	dragPlane = new THREE.Plane();
+	pointer = new THREE.Vector2();
+	constructor(getNodeByIndex, cameraController, forceSimulation, viewport) {
+		super();
+		this.getNodeByIndex = getNodeByIndex;
+		this.cameraController = cameraController;
+		this.forceSimulation = forceSimulation;
+		this.viewport = viewport;
+		this.on("pointer:dragstart", this.handleDragStart);
+		this.on("pointer:drag", this.handleDrag);
+		this.on("pointer:dragend", this.handleDragEnd);
+	}
+	/**
+	* Set up drag plane perpendicular to camera, passing through a world point
+	*/
+	setupDragPlane(worldPoint) {
+		if (!this.cameraController) return;
+		const camera = this.cameraController.camera;
+		const cameraDirection = new THREE.Vector3();
+		camera.getWorldDirection(cameraDirection);
+		const planeNormal = cameraDirection.clone().negate();
+		this.dragPlane.setFromNormalAndCoplanarPoint(planeNormal, worldPoint);
+	}
+	handleDragStart = (data) => {
+		const node = this.getNodeByIndex(data.index);
+		if (!node) return;
+		let state = node.state ?? NodeState.Active;
+		if (node.state === void 0) state = NodeState.Fixed;
+		if (state !== NodeState.Active || node.metadata?.hidden) return;
+		this.isDragging = true;
+		if (this.cameraController) this.cameraController.setEnabled(false);
+		if (this.cameraController) {
+			this.cameraController.camera;
+			const target = this.cameraController.getTarget();
+			this.setupDragPlane(target);
+		}
+		if (this.forceSimulation) {
+			const worldPos = this.screenToWorld(data.x, data.y);
+			if (worldPos) this.forceSimulation.startDrag(data.index, worldPos);
+		}
+		this.emit("node:dragstart", { node });
+	};
+	handleDrag = (data) => {
+		const node = this.getNodeByIndex(data.index);
+		if (!node) return;
+		if (this.forceSimulation) {
+			const worldPos = this.screenToWorld(data.x, data.y);
+			if (worldPos) this.forceSimulation.updateDrag(worldPos);
+		}
+		this.emit("node:drag", {
+			node,
+			x: data.x,
+			y: data.y
+		});
+	};
+	handleDragEnd = (data) => {
+		const node = this.getNodeByIndex(data.index);
+		if (!node) return;
+		this.isDragging = false;
+		if (this.cameraController) this.cameraController.setEnabled(true);
+		if (this.forceSimulation) this.forceSimulation.endDrag();
+		this.emit("node:dragend", { node });
+	};
+	/**
+	* Convert screen coordinates to world position on drag plane
+	*/
+	screenToWorld(clientX, clientY) {
+		if (!this.cameraController || !this.viewport) return null;
+		this.pointer.x = clientX / this.viewport.width * 2 - 1;
+		this.pointer.y = -(clientY / this.viewport.height) * 2 + 1;
+		this.raycaster.setFromCamera(this.pointer, this.cameraController.camera);
+		const target = new THREE.Vector3();
+		return this.raycaster.ray.intersectPlane(this.dragPlane, target);
+	}
+	/**
+	* Update viewport dimensions on resize
+	*/
+	resize(width, height) {
+		if (this.viewport) {
+			this.viewport.width = width;
+			this.viewport.height = height;
+		}
+	}
+	dispose() {
+		this.off("pointer:dragstart", this.handleDragStart);
+		this.off("pointer:drag", this.handleDrag);
+		this.off("pointer:dragend", this.handleDragEnd);
+	}
+};
+
+//#endregion
+//#region controls/handlers/HoverHandler.ts
+var HoverHandler = class extends EventEmitter {
+	constructor(getNodeByIndex) {
+		super();
+		this.getNodeByIndex = getNodeByIndex;
+		this.on("pointer:hoverstart", this.handleHoverStart);
+		this.on("pointer:hover", this.handleHover);
+		this.on("pointer:pop", this.handlePop);
+		this.on("pointer:hoverend", this.handleHoverEnd);
+	}
+	handleHoverStart = (data) => {
+		const node = this.getNodeByIndex(data.index);
+		if (!node) return;
+		this.emit("node:hoverstart", {
+			node,
+			x: data.x,
+			y: data.y,
+			clientX: data.clientX,
+			clientY: data.clientY
+		});
+	};
+	handleHover = (data) => {
+		const node = this.getNodeByIndex(data.index);
+		if (!node) return;
+		const progress = data.progress ?? 0;
+		this.emit("node:hover", {
+			node,
+			x: data.x,
+			y: data.y,
+			progress,
+			clientX: data.clientX,
+			clientY: data.clientY
+		});
+	};
+	handlePop = (data) => {
+		const node = this.getNodeByIndex(data.index);
+		if (!node) return;
+		this.emit("node:pop", {
+			node,
+			x: data.x,
+			y: data.y,
+			clientX: data.clientX,
+			clientY: data.clientY
+		});
+	};
+	handleHoverEnd = (data) => {
+		if (!this.getNodeByIndex(data.index)) return;
+		this.emit("node:hoverend");
+	};
+	dispose() {
+		this.off("pointer:hoverstart", this.handleHoverStart);
+		this.off("pointer:hover", this.handleHover);
+		this.off("pointer:pop", this.handlePop);
+		this.off("pointer:hoverend", this.handleHoverEnd);
+	}
+};
+
+//#endregion
+//#region controls/InputProcessor.ts
+/**
+* Manages pointer/mouse input and emits interaction events
+* Uses GPU picking for efficient node detection
+*/
+var InputProcessor = class extends EventEmitter {
+	CLICK_THRESHOLD = 200;
+	HOVER_TO_POP_MS = 800;
+	pointer = new THREE.Vector2();
+	canvasPointer = new THREE.Vector2();
+	isPointerDown = false;
+	isDragging = false;
+	mouseDownTime = 0;
+	draggedIndex = -1;
+	currentHoverIndex = -1;
+	hoverStartTime = 0;
+	hoverProgress = 0;
+	hasPopped = false;
+	isTouch = false;
+	TOUCH_MOVE_THRESHOLD = 10;
+	pointerDownX = 0;
+	pointerDownY = 0;
+	lastClientX = null;
+	lastClientY = null;
+	constructor(pickFn, canvas, viewport) {
+		super();
+		this.pickFn = pickFn;
+		this.canvas = canvas;
+		this.viewport = viewport;
+		this.setupEventListeners();
+	}
+	setupEventListeners() {
+		this.canvas.addEventListener("pointermove", this.handlePointerMove);
+		this.canvas.addEventListener("pointerdown", this.handlePointerDown);
+		this.canvas.addEventListener("pointerup", this.handlePointerUp);
+		this.canvas.addEventListener("pointerleave", this.handlePointerLeave);
+	}
+	handlePointerMove = (event) => {
+		this.updatePointer(event);
+		this.lastClientX = event.clientX;
+		this.lastClientY = event.clientY;
+		const pickedIndex = this.pickFn(this.canvasPointer.x, this.canvasPointer.y);
+		if (!this.isTouch) this.updateHover(pickedIndex);
+		if (this.isTouch && !this.isDragging) {
+			const dx = event.clientX - this.pointerDownX;
+			const dy = event.clientY - this.pointerDownY;
+			if (dx * dx + dy * dy < this.TOUCH_MOVE_THRESHOLD * this.TOUCH_MOVE_THRESHOLD) return;
+		}
+		if (this.isPointerDown && this.draggedIndex >= 0) {
+			if (!this.isDragging) {
+				this.isDragging = true;
+				this.emit("pointer:dragstart", {
+					index: this.draggedIndex,
+					x: this.canvasPointer.x,
+					y: this.canvasPointer.y,
+					clientX: event.clientX,
+					clientY: event.clientY
+				});
+			}
+			this.emit("pointer:drag", {
+				index: this.draggedIndex,
+				x: this.canvasPointer.x,
+				y: this.canvasPointer.y,
+				clientX: event.clientX,
+				clientY: event.clientY
+			});
+		}
+	};
+	handlePointerDown = (event) => {
+		this.updatePointer(event);
+		this.mouseDownTime = Date.now();
+		this.isPointerDown = true;
+		this.isTouch = event.pointerType === "touch";
+		this.pointerDownX = event.clientX;
+		this.pointerDownY = event.clientY;
+		const pickedIndex = this.pickFn(this.canvasPointer.x, this.canvasPointer.y);
+		this.draggedIndex = pickedIndex;
+		if (pickedIndex >= 0) this.emit("pointer:down", {
+			index: pickedIndex,
+			x: this.canvasPointer.x,
+			y: this.canvasPointer.y,
+			clientX: event.clientX,
+			clientY: event.clientY
+		});
+	};
+	handlePointerUp = (event) => {
+		const clickDuration = Date.now() - this.mouseDownTime;
+		const wasClick = this.isTouch ? !this.isDragging : clickDuration < this.CLICK_THRESHOLD;
+		if (this.isDragging) this.emit("pointer:dragend", {
+			index: this.draggedIndex,
+			x: this.canvasPointer.x,
+			y: this.canvasPointer.y,
+			clientX: event.clientX,
+			clientY: event.clientY
 		});
-		this.closeButton.addEventListener("click", (e) => {
-			e.stopPropagation();
-			this.hideFull();
-			if (this.onCloseCallback) this.onCloseCallback();
+		else if (wasClick && this.draggedIndex >= 0) this.emit("pointer:click", {
+			index: this.draggedIndex,
+			x: this.canvasPointer.x,
+			y: this.canvasPointer.y,
+			clientX: event.clientX,
+			clientY: event.clientY
 		});
-		element.appendChild(this.closeButton);
-	}
-	/**
-	* Remove close button from tooltip
-	*/
-	removeCloseButton() {
-		if (this.closeButton) {
-			this.closeButton.remove();
-			this.closeButton = null;
+		else if (wasClick && this.draggedIndex < 0) this.emit("pointer:clickempty", {
+			x: this.canvasPointer.x,
+			y: this.canvasPointer.y,
+			clientX: event.clientX,
+			clientY: event.clientY
+		});
+		this.isPointerDown = false;
+		this.isDragging = false;
+		this.draggedIndex = -1;
+	};
+	handlePointerLeave = () => {
+		this.lastClientX = null;
+		this.lastClientY = null;
+		this.updateHover(-1);
+	};
+	updateHover(index) {
+		const prevIndex = this.currentHoverIndex;
+		if (index === prevIndex) {
+			if (index >= 0) {
+				const elapsed = Date.now() - this.hoverStartTime;
+				this.hoverProgress = Math.min(1, elapsed / this.HOVER_TO_POP_MS);
+				this.emit("pointer:hover", {
+					index,
+					progress: this.hoverProgress,
+					x: this.canvasPointer.x,
+					y: this.canvasPointer.y,
+					clientX: this.lastClientX,
+					clientY: this.lastClientY
+				});
+				if (this.hoverProgress >= 1 && !this.hasPopped) {
+					this.hasPopped = true;
+					this.emit("pointer:pop", {
+						index,
+						x: this.canvasPointer.x,
+						y: this.canvasPointer.y,
+						clientX: this.lastClientX,
+						clientY: this.lastClientY
+					});
+				}
+			}
+			return;
+		}
+		if (prevIndex >= 0) this.emit("pointer:hoverend", { index: prevIndex });
+		if (index >= 0) {
+			this.currentHoverIndex = index;
+			this.hoverStartTime = Date.now();
+			this.hoverProgress = 0;
+			this.hasPopped = false;
+			this.emit("pointer:hoverstart", {
+				index,
+				x: this.canvasPointer.x,
+				y: this.canvasPointer.y,
+				clientX: this.lastClientX,
+				clientY: this.lastClientY
+			});
+		} else {
+			this.currentHoverIndex = -1;
+			this.hoverStartTime = 0;
+			this.hoverProgress = 0;
+			this.hasPopped = false;
 		}
-		const element = this.mainTooltip.getElement();
-		element.style.pointerEvents = "none";
 	}
 	/**
-	* Hide all tooltips
+	* Update hover state even when pointer is stationary
+	* Called from render loop
 	*/
-	hideAll() {
-		this.hideGrabIcon();
-		this.hidePreview();
-		this.hideFull();
-		this.hideChainTooltips();
-	}
-	showMainTooltip(content, x, y) {
-		this.mainTooltip.open(content);
-		this.mainTooltip.updatePos(x, y);
-		console.log("Showing main tooltip");
-	}
-	hideMainTooltip() {
-		this.mainTooltip.close();
-	}
-	showChainTooltip(nodeId, content, x, y) {
-		if (!this.chainTooltips.has(nodeId)) this.chainTooltips.set(nodeId, new Tooltip("label", this.container));
-		const tooltip = this.chainTooltips.get(nodeId);
-		tooltip.open(content);
-		tooltip.updatePos(x, y);
-	}
-	hideChainTooltips() {
-		this.chainTooltips.forEach((tooltip) => tooltip.close());
+	update() {
+		if (this.isTouch) return;
+		if (this.lastClientX !== null && this.lastClientY !== null) {
+			const rect = this.canvas.getBoundingClientRect();
+			const x = this.lastClientX - rect.left;
+			const y = this.lastClientY - rect.top;
+			const pickedIndex = this.pickFn(x, y);
+			this.updateHover(pickedIndex);
+		}
 	}
-	updateMainTooltipPos(x, y) {
-		this.mainTooltip.updatePos(x, y);
+	updatePointer(event) {
+		const rect = this.canvas.getBoundingClientRect();
+		const x = event.clientX - rect.left;
+		const y = event.clientY - rect.top;
+		const ndcX = x / rect.width * 2 - 1;
+		const ndcY = -(y / rect.height) * 2 + 1;
+		this.pointer.set(ndcX, ndcY);
+		this.canvasPointer.set(x, y);
 	}
 	/**
-	* Set main tooltip visibility (doesn't affect open state or content)
+	* Update viewport dimensions on resize
 	*/
-	setMainTooltipVisibility(visible) {
-		if (visible) this.mainTooltip.show();
-		else this.mainTooltip.hide();
+	resize(width, height) {
+		this.viewport.width = width;
+		this.viewport.height = height;
 	}
 	dispose() {
-		this.removeCloseButton();
-		this.mainTooltip.destroy();
-		this.previewTooltip.destroy();
-		this.chainTooltips.forEach((tooltip) => tooltip.destroy());
-		this.chainTooltips.clear();
+		this.canvas.removeEventListener("pointermove", this.handlePointerMove);
+		this.canvas.removeEventListener("pointerdown", this.handlePointerDown);
+		this.canvas.removeEventListener("pointerup", this.handlePointerUp);
+		this.canvas.removeEventListener("pointerleave", this.handlePointerLeave);
 	}
 };
 
 //#endregion
 //#region controls/InteractionManager.ts
 var InteractionManager = class {
+	pointerInput;
+	hoverHandler;
+	clickHandler;
+	dragHandler;
+	tooltipManager;
+	isDragging = false;
+	isTooltipSticky = false;
+	stickyNodeId = null;
+	searchHighlightIds = [];
 	constructor(pickFunction, canvas, viewport, getNodeByIndex, cameraController, forceSimulation, tooltipConfig, graphScene, getConnectedNodeIds) {
 		this.graphScene = graphScene;
 		this.getConnectedNodeIds = getConnectedNodeIds;
-		this.isDragging = false;
-		this.isTooltipSticky = false;
-		this.stickyNodeId = null;
-		this.searchHighlightIds = [];
 		this.pointerInput = new InputProcessor(pickFunction, canvas, viewport);
 		const tooltipContainer = document.body;
 		this.tooltipManager = new TooltipManager(tooltipContainer, canvas, tooltipConfig);
@@ -855,11 +924,13 @@ let CameraMode = /* @__PURE__ */ function(CameraMode) {
 //#endregion
 //#region rendering/CameraController.ts
 var CameraController = class {
+	camera;
+	controls;
+	sceneBounds = null;
+	autorotateEnabled = false;
+	autorotateSpeed = .5;
+	userIsActive = true;
 	constructor(domelement, config) {
-		this.sceneBounds = null;
-		this.autorotateEnabled = false;
-		this.autorotateSpeed = .5;
-		this.userIsActive = true;
 		this.camera = new THREE.PerspectiveCamera(config?.fov ?? 50, config?.aspect ?? window.innerWidth / window.innerHeight, config?.near ?? 1e-5, config?.far ?? 1e4);
 		if (config?.position) this.camera.position.copy(config.position);
 		else this.camera.position.set(0, 0, 2);
@@ -890,7 +961,7 @@ var CameraController = class {
 			case CameraMode.Orbit:
 			default:
 				this.controls.mouseButtons.left = CameraControls.ACTION.ROTATE;
-				this.controls.mouseButtons.right = CameraControls.ACTION.ROTATE;
+				this.controls.mouseButtons.right = CameraControls.ACTION.TRUCK;
 				this.controls.mouseButtons.wheel = CameraControls.ACTION.DOLLY;
 				this.controls.touches.one = CameraControls.ACTION.TOUCH_ROTATE;
 				this.controls.touches.two = CameraControls.ACTION.TOUCH_DOLLY_TRUCK;
@@ -948,8 +1019,11 @@ var CameraController = class {
 	/**
 	* Reset camera to default position
 	*/
-	async reset(enableTransition = true) {
-		return this.controls.setLookAt(0, 0, 50, 0, 0, 0, enableTransition);
+	async reset(position, target, enableTransition = true) {
+		this.controls.normalizeRotations();
+		const { x: px, y: py, z: pz } = position ?? new THREE.Vector3(0, 0, 50);
+		const { x: tx, y: ty, z: tz } = target ?? new THREE.Vector3(0, 0, 0);
+		return this.controls.setLookAt(px, py, pz, tx, ty, tz, enableTransition);
 	}
 	/**
 	* Enable/disable controls
@@ -1028,12 +1102,10 @@ const DEFAULT_LINK_STYLE = { color: new THREE.Color(8947848) };
 *   const style = styleRegistry.getNodeStyle('person')
 */
 var StyleRegistry = class {
-	constructor() {
-		this.nodeStyles = /* @__PURE__ */ new Map();
-		this.linkStyles = /* @__PURE__ */ new Map();
-		this.defaultNodeStyle = { ...DEFAULT_NODE_STYLE };
-		this.defaultLinkStyle = { ...DEFAULT_LINK_STYLE };
-	}
+	nodeStyles = /* @__PURE__ */ new Map();
+	linkStyles = /* @__PURE__ */ new Map();
+	defaultNodeStyle = { ...DEFAULT_NODE_STYLE };
+	defaultLinkStyle = { ...DEFAULT_LINK_STYLE };
 	/**
 	* Convert color input to THREE.Color
 	*/
@@ -1148,20 +1220,19 @@ const styleRegistry = new StyleRegistry();
 /**
 * Manages read-only GPU textures created at initialization
 * These never change during simulation (except for mode changes)
-* 
+*
 * Node data: radii, colors
 * Link data: source/target indices, properties
 */
 var StaticAssets = class {
-	constructor() {
-		this.nodeRadiiTexture = null;
-		this.nodeColorsTexture = null;
-		this.linkIndicesTexture = null;
-		this.linkPropertiesTexture = null;
-		this.nodeLinkMapTexture = null;
-		this.nodeTextureSize = 0;
-		this.linkTextureSize = 0;
-	}
+	nodeRadiiTexture = null;
+	nodeColorsTexture = null;
+	linkIndicesTexture = null;
+	linkPropertiesTexture = null;
+	nodeLinkMapTexture = null;
+	nodeTextureSize = 0;
+	linkTextureSize = 0;
+	constructor() {}
 	/**
 	* Set/update node radii texture
 	*/
@@ -1284,9 +1355,18 @@ const staticAssets = new StaticAssets();
 * LinksOpacity
 */
 var LinksOpacity = class {
+	renderer;
+	size;
+	rtA;
+	rtB;
+	ping = 0;
+	scene;
+	camera;
+	quad;
+	computeMaterial;
+	copyMaterial;
+	targetTex = null;
 	constructor(renderer, size) {
-		this.ping = 0;
-		this.targetTex = null;
 		this.renderer = renderer;
 		this.size = size;
 		const params = {
@@ -1448,23 +1528,23 @@ var LinksOpacity = class {
 * Manages link-specific opacity and highlighting
 */
 var LinksRenderer = class {
+	lines = null;
+	links = [];
+	nodeIndexMap = /* @__PURE__ */ new Map();
+	linkIndexMap = /* @__PURE__ */ new Map();
+	interpolationSteps = 24;
+	params = {
+		noiseStrength: .1,
+		defaultAlpha: .02,
+		highlightAlpha: .8,
+		dimmedAlpha: .02,
+		is2D: true
+	};
+	linkOpacity = null;
+	simulationBuffers = null;
 	constructor(scene, renderer) {
 		this.scene = scene;
 		this.renderer = renderer;
-		this.lines = null;
-		this.links = [];
-		this.nodeIndexMap = /* @__PURE__ */ new Map();
-		this.linkIndexMap = /* @__PURE__ */ new Map();
-		this.interpolationSteps = 24;
-		this.params = {
-			noiseStrength: .1,
-			defaultAlpha: .02,
-			highlightAlpha: .8,
-			dimmedAlpha: .02,
-			is2D: true
-		};
-		this.linkOpacity = null;
-		this.simulationBuffers = null;
 	}
 	/**
 	* Create link geometry and materials
@@ -1903,9 +1983,18 @@ var points_default = "attribute float scale;\r\nattribute float selected;\r\natt
 * Similar to LinkOpacity but optimized for nodes
 */
 var NodeOpacity = class {
+	renderer;
+	size;
+	rtA;
+	rtB;
+	ping = 0;
+	scene;
+	camera;
+	quad;
+	computeMaterial;
+	copyMaterial;
+	targetTex = null;
 	constructor(renderer, size) {
-		this.ping = 0;
-		this.targetTex = null;
 		this.renderer = renderer;
 		this.size = size;
 		const params = {
@@ -2062,22 +2151,22 @@ var NodeOpacity = class {
 //#endregion
 //#region rendering/nodes/NodesRenderer.ts
 var NodesRenderer = class {
+	points = null;
+	pickMaterial = null;
+	nodeIndexMap = /* @__PURE__ */ new Map();
+	idArray = [];
+	nodeOpacity = null;
+	targets = null;
+	params = {
+		defaultAlpha: 1,
+		highlightAlpha: 1,
+		dimmedAlpha: .2
+	};
+	simulationBuffers = null;
+	pickBuffer = null;
 	constructor(scene, renderer) {
 		this.scene = scene;
 		this.renderer = renderer;
-		this.points = null;
-		this.pickMaterial = null;
-		this.nodeIndexMap = /* @__PURE__ */ new Map();
-		this.idArray = [];
-		this.nodeOpacity = null;
-		this.targets = null;
-		this.params = {
-			defaultAlpha: 1,
-			highlightAlpha: 1,
-			dimmedAlpha: .2
-		};
-		this.simulationBuffers = null;
-		this.pickBuffer = null;
 	}
 	create(nodes, simulationBuffers, pickBuffer) {
 		this.simulationBuffers = simulationBuffers;
@@ -2201,7 +2290,10 @@ var NodesRenderer = class {
 		const radii = new Float32Array(totalTexels);
 		const colors = new Float32Array(totalTexels * 4);
 		const fovRadians = 75 * Math.PI / 180;
-		const pixelToWorldRatio = 2 * Math.tan(fovRadians / 2) / window.innerHeight;
+		const viewHeightAtDistance1 = 2 * Math.tan(fovRadians / 2);
+		const REFERENCE_HEIGHT = 1080;
+		const REFERENCE_DPR = 1;
+		const pixelToWorldRatio = viewHeightAtDistance1 / REFERENCE_HEIGHT;
 		nodes.forEach((node, i) => {
 			const style = styleRegistry.getNodeStyle(node.category);
 			colorBuffer[i * 3] = style.color.r;
@@ -2213,7 +2305,7 @@ var NodesRenderer = class {
 			pointIndices[i * 2] = x;
 			pointIndices[i * 2 + 1] = y;
 			alphaIndex[i] = i;
-			radii[i] = style.size * window.devicePixelRatio * pixelToWorldRatio / 2;
+			radii[i] = style.size * REFERENCE_DPR * pixelToWorldRatio / 2;
 			colors[i * 4] = style.color.r;
 			colors[i * 4 + 1] = style.color.g;
 			colors[i * 4 + 2] = style.color.b;
@@ -2288,9 +2380,16 @@ var NodesRenderer = class {
 * SMAA operates in linear space (before tone mapping), FXAA in sRGB (after OutputPass).
 */
 var PostProcessing = class {
+	composer;
+	renderer;
+	scene;
+	camera;
+	mode;
+	renderPass;
+	outputPass;
+	smaaPass = null;
+	fxaaPass = null;
 	constructor(renderer, scene, camera, mode) {
-		this.smaaPass = null;
-		this.fxaaPass = null;
 		this.renderer = renderer;
 		this.scene = scene;
 		this.camera = camera;
@@ -2326,7 +2425,7 @@ var PostProcessing = class {
 		const pixelRatio = this.renderer.getPixelRatio();
 		this.composer.setSize(width, height);
 		this.composer.setPixelRatio(pixelRatio);
-		if (this.fxaaPass) this.fxaaPass.material.uniforms["resolution"].value.set(1 / (width * pixelRatio), 1 / (height * pixelRatio));
+		if (this.fxaaPass) this.fxaaPass.material.uniforms.resolution.value.set(1 / (width * pixelRatio), 1 / (height * pixelRatio));
 		if (this.smaaPass) this.smaaPass.setSize(width * pixelRatio, height * pixelRatio);
 	}
 	/**
@@ -2364,7 +2463,7 @@ var PostProcessing = class {
 				this.fxaaPass = new ShaderPass(FXAAShader);
 				const size = this.renderer.getSize(new THREE.Vector2());
 				const pixelRatio = this.renderer.getPixelRatio();
-				this.fxaaPass.material.uniforms["resolution"].value.set(1 / (size.x * pixelRatio), 1 / (size.y * pixelRatio));
+				this.fxaaPass.material.uniforms.resolution.value.set(1 / (size.x * pixelRatio), 1 / (size.y * pixelRatio));
 			}
 			this.composer.addPass(this.fxaaPass);
 		}
@@ -2383,11 +2482,15 @@ var PostProcessing = class {
 * - Mode application (visual changes)
 */
 var GraphScene = class {
+	scene;
+	renderer;
+	camera;
+	nodeRenderer = null;
+	clock = new THREE.Clock();
+	linkRenderer = null;
+	postProcessing = null;
+	antialiasingMode;
 	constructor(canvas, cameraConfig, antialiasing = "msaa") {
-		this.nodeRenderer = null;
-		this.clock = new THREE.Clock();
-		this.linkRenderer = null;
-		this.postProcessing = null;
 		this.antialiasingMode = antialiasing;
 		this.scene = new THREE.Scene();
 		this.scene.background = new THREE.Color(0);
@@ -2546,10 +2649,8 @@ function resolveAttractor(attractor) {
 * Each pass operates on simulation buffers and can read from static assets
 */
 var BasePass = class {
-	constructor() {
-		this.material = null;
-		this.enabled = true;
-	}
+	material = null;
+	enabled = true;
 	/**
 	* Execute the pass (renders to current velocity target)
 	*/
@@ -2629,15 +2730,12 @@ const MAX_GROUPS = 4;
 *   ])
 */
 var AttractorPass = class extends BasePass {
-	constructor(..._args) {
-		super(..._args);
-		this.attractors = [];
-		this.groupMap = /* @__PURE__ */ new Map();
-		this.attractorsTexture = null;
-		this.attractorGroupsTexture = null;
-		this.attractorParamsTexture = null;
-		this.nodeGroupsTexture = null;
-	}
+	attractors = [];
+	groupMap = /* @__PURE__ */ new Map();
+	attractorsTexture = null;
+	attractorGroupsTexture = null;
+	attractorParamsTexture = null;
+	nodeGroupsTexture = null;
 	getName() {
 		return "attractor";
 	}
@@ -2857,12 +2955,9 @@ var drag_default = "precision highp float;\n\nuniform sampler2D uPositionsTextur
 * Reads configuration from context.config, maintains drag state internally
 */
 var DragPass = class extends BasePass {
-	constructor(..._args) {
-		super(..._args);
-		this.draggedIndex = null;
-		this.dragUV = null;
-		this.dragTarget = new THREE.Vector3(0, 0, 0);
-	}
+	draggedIndex = null;
+	dragUV = null;
+	dragTarget = new THREE.Vector3(0, 0, 0);
 	getName() {
 		return "drag";
 	}
@@ -3137,10 +3232,28 @@ var VelocityCarryPass = class extends BasePass {
 * - No manual syncing required
 */
 var ForceSimulation = class {
+	renderer;
+	simulationBuffers = null;
+	computeScene;
+	computeCamera;
+	computeQuad;
+	velocityCarryPass;
+	collisionPass;
+	manyBodyPass;
+	gravityPass;
+	linkPass;
+	elasticPass;
+	attractorPass;
+	dragPass;
+	integratePass;
+	forcePasses;
+	config;
+	isInitialized = false;
+	iterationCount = 0;
+	FIXED_DT = 1 / 60;
+	MAX_STEPS_PER_FRAME = 4;
+	timeAccumulator = 0;
 	constructor(renderer) {
-		this.simulationBuffers = null;
-		this.isInitialized = false;
-		this.iterationCount = 0;
 		this.renderer = renderer;
 		this.computeScene = new THREE.Scene();
 		this.computeCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
@@ -3171,7 +3284,6 @@ var ForceSimulation = class {
 			alphaDecay: .01,
 			deltaTime: .016,
 			spaceSize: 1e3,
-			maxVelocity: 10,
 			is3D: true
 		};
 		this.velocityCarryPass = new VelocityCarryPass();
@@ -3276,13 +3388,25 @@ var ForceSimulation = class {
 		}
 	}
 	/**
-	* Run one simulation step
+	* Run simulation steps using a fixed timestep accumulator.
+	* Regardless of monitor refresh rate, physics always steps at 1/60s intervals.
 	*/
 	step(deltaTime) {
 		if (!this.isInitialized || !this.simulationBuffers) return;
-		if (deltaTime !== void 0) this.config.deltaTime = deltaTime;
+		this.timeAccumulator += deltaTime ?? this.config.deltaTime;
+		let steps = 0;
+		while (this.timeAccumulator >= this.FIXED_DT && steps < this.MAX_STEPS_PER_FRAME) {
+			this.timeAccumulator -= this.FIXED_DT;
+			this.config.deltaTime = this.FIXED_DT;
+			this.fixedStep();
+			steps++;
+		}
+	}
+	/**
+	* Execute one fixed-rate physics step (always at 1/60s)
+	*/
+	fixedStep() {
 		const context = this.createContext();
-		this.simulationBuffers.swapVelocities();
 		const currentVelocityTarget = this.simulationBuffers.getCurrentVelocityTarget();
 		if (currentVelocityTarget) {
 			this.renderer.setRenderTarget(currentVelocityTarget);
@@ -3303,9 +3427,7 @@ var ForceSimulation = class {
 			this.renderer.setRenderTarget(newPositionTarget);
 			this.integratePass.execute(context);
 		}
-		const timeScale = (this.config.deltaTime || .016) * 60;
-		const decayFactor = Math.pow(1 - this.config.alphaDecay, timeScale);
-		this.config.alpha *= decayFactor;
+		this.config.alpha *= 1 - this.config.alphaDecay;
 		this.config.alpha = Math.max(this.config.alpha, 0);
 		this.renderer.setRenderTarget(null);
 		this.iterationCount++;
@@ -3399,6 +3521,7 @@ var ForceSimulation = class {
 		if (!this.isInitialized || !this.simulationBuffers) return;
 		this.config.alpha = 1;
 		this.iterationCount = 0;
+		this.timeAccumulator = 0;
 		this.simulationBuffers.resetPositions();
 		this.simulationBuffers.initVelocities();
 	}
@@ -3418,8 +3541,9 @@ var ForceSimulation = class {
 * Separate from simulation buffers as it has different lifecycle
 */
 var PickBuffer = class {
+	renderer;
+	pickTarget = null;
 	constructor(renderer) {
-		this.pickTarget = null;
 		this.renderer = renderer;
 	}
 	/**
@@ -3488,18 +3612,19 @@ var PickBuffer = class {
 * Buffers are created lazily when data is initialized
 */
 var SimulationBuffers = class {
+	renderer;
+	textureSize = 0;
+	positionBuffers = {
+		current: null,
+		previous: null,
+		original: null
+	};
+	velocityBuffers = {
+		current: null,
+		previous: null
+	};
+	isInitialized = false;
 	constructor(renderer) {
-		this.textureSize = 0;
-		this.positionBuffers = {
-			current: null,
-			previous: null,
-			original: null
-		};
-		this.velocityBuffers = {
-			current: null,
-			previous: null
-		};
-		this.isInitialized = false;
 		this.renderer = renderer;
 	}
 	/**
@@ -3753,66 +3878,6 @@ var SimulationBuffers = class {
 	}
 };
 
-//#endregion
-//#region core/Clock.ts
-/**
-* Clock - Unified timing for the force graph package
-*/
-var Clock = class {
-	constructor() {
-		this.previousTime = 0;
-		this.elapsedTime = 0;
-		this.deltaTime = 0;
-		this.isRunning = false;
-		this.maxDeltaTime = .1;
-	}
-	/**
-	* Start the clock
-	*/
-	start() {
-		if (this.isRunning) return;
-		this.previousTime = performance.now() / 1e3;
-		this.isRunning = true;
-	}
-	/**
-	* Stop the clock
-	*/
-	stop() {
-		this.isRunning = false;
-	}
-	/**
-	* Update the clock - call once per frame
-	* @returns delta time in seconds
-	*/
-	update() {
-		if (!this.isRunning) this.start();
-		const now = performance.now() / 1e3;
-		let rawDelta = now - this.previousTime;
-		this.previousTime = now;
-		this.deltaTime = Math.min(rawDelta, this.maxDeltaTime);
-		this.elapsedTime += this.deltaTime;
-		return this.deltaTime;
-	}
-	/**
-	* Get delta time in seconds
-	*/
-	getDeltaTime() {
-		return this.deltaTime;
-	}
-	/**
-	* Get total elapsed time in seconds
-	*/
-	getElapsedTime() {
-		return this.elapsedTime;
-	}
-	/**
-	* Check if clock is running
-	*/
-	getIsRunning() {
-		return this.isRunning;
-	}
-};
-
 //#endregion
 //#region core/GraphStore.ts
 /**
@@ -3825,15 +3890,14 @@ var Clock = class {
 * - Change notifications
 */
 var GraphStore = class {
-	constructor() {
-		this.nodes = /* @__PURE__ */ new Map();
-		this.links = /* @__PURE__ */ new Map();
-		this.nodeArray = [];
-		this.linkArray = [];
-		this.nodeIdToIndex = /* @__PURE__ */ new Map();
-		this.linkIdToIndex = /* @__PURE__ */ new Map();
-		this.nodeToLinks = /* @__PURE__ */ new Map();
-	}
+	nodes = /* @__PURE__ */ new Map();
+	links = /* @__PURE__ */ new Map();
+	nodeArray = [];
+	linkArray = [];
+	nodeIdToIndex = /* @__PURE__ */ new Map();
+	linkIdToIndex = /* @__PURE__ */ new Map();
+	nodeToLinks = /* @__PURE__ */ new Map();
+	constructor() {}
 	/**
 	* Set graph data (replaces all)
 	*/
@@ -4038,25 +4102,20 @@ CameraControls.install({ THREE });
 * - Handles user interaction
 */
 var Engine = class {
+	graphStore;
+	graphScene;
+	forceSimulation;
+	interactionManager;
+	clock;
+	simulationBuffers;
+	pickBuffer;
+	animationFrameId = null;
+	isRunning = false;
+	boundResizeHandler = null;
+	groupOrder;
+	smoothedTooltipPos = null;
 	constructor(canvas, options = {}) {
 		this.canvas = canvas;
-		this.animationFrameId = null;
-		this.isRunning = false;
-		this.boundResizeHandler = null;
-		this.smoothedTooltipPos = null;
-		this.animate = () => {
-			if (!this.isRunning) return;
-			const deltaTime = this.clock.update();
-			const elapsedTime = this.clock.getElapsedTime();
-			this.forceSimulation.step(deltaTime);
-			const positionTexture = this.simulationBuffers.getCurrentPositionTexture();
-			this.graphScene.updatePositions(positionTexture);
-			this.graphScene.update(elapsedTime);
-			this.interactionManager.getPointerInput().update();
-			this.graphScene.render();
-			this.updateStickyTooltipPosition();
-			this.animationFrameId = requestAnimationFrame(this.animate);
-		};
 		console.log("Initializing Engine with options:", options);
 		this.groupOrder = options.groupOrder;
 		const width = options.width ?? window.innerWidth;
@@ -4094,7 +4153,7 @@ var Engine = class {
 		const startPositions = new Float32Array(nodes.length * 4);
 		const originalPositions = new Float32Array(nodes.length * 4);
 		nodes.forEach((node, i) => {
-			let state = node.state ?? 3;
+			const state = node.state ?? 3;
 			startPositions[i * 4] = node.x ?? node.fx ?? 0;
 			startPositions[i * 4 + 1] = node.y ?? node.fy ?? 0;
 			startPositions[i * 4 + 2] = node.z ?? node.fz ?? 0;
@@ -4179,7 +4238,8 @@ var Engine = class {
 	getAlpha() {
 		return this.forceSimulation.getAlpha();
 	}
-	/**Apply a preset to the graph
+	/**
+	Apply a preset to the graph
 	*/
 	applyPreset(preset) {
 		if (preset.force) {
@@ -4248,6 +4308,22 @@ var Engine = class {
 		}
 	}
 	/**
+	* Render loop
+	*/
+	animate = () => {
+		if (!this.isRunning) return;
+		const deltaTime = this.clock.update();
+		const elapsedTime = this.clock.getElapsedTime();
+		this.forceSimulation.step(deltaTime);
+		const positionTexture = this.simulationBuffers.getCurrentPositionTexture();
+		this.graphScene.updatePositions(positionTexture);
+		this.graphScene.update(elapsedTime);
+		this.interactionManager.getPointerInput().update();
+		this.graphScene.render();
+		this.updateStickyTooltipPosition();
+		this.animationFrameId = requestAnimationFrame(this.animate);
+	};
+	/**
 	* GPU pick node at canvas coordinates
 	*/
 	pickNode(x, y) {
@@ -4415,7 +4491,7 @@ var Engine = class {
 		await this.graphScene.camera.setLookAt(posVec, targetVec, true);
 	}
 	/**
-	* Focus camera on a specific target node 
+	* Focus camera on a specific target node
 	*/
 	async setCameraFocus(target, distance, transitionDuration) {
 		const camPos = this.graphScene.camera.camera.position;