@fusefactory/fuse-three-forcegraph 1.0.1

package/dist/index.mjs

@@ -0,0 +1,4213 @@
+import CameraControls from "camera-controls";
+import * as THREE from "three";
+
+//#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/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;
+	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);
+		this.updateHover(pickedIndex);
+		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;
+		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 wasClick = Date.now() - this.mouseDownTime < 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;
+	};
+	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;
+		}
+	}
+	/**
+	* Update hover state even when pointer is stationary
+	* Called from render loop
+	*/
+	update() {
+		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);
+	}
+	/**
+	* Update viewport dimensions on resize
+	*/
+	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.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/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 ui/Tooltips.ts
+var Tooltip = class {
+	element;
+	isVisible = false;
+	cleanup;
+	constructor(type, container) {
+		this.type = type;
+		this.container = container;
+		this.element = this.createElement();
+	}
+	createElement() {
+		const tooltip = document.createElement("div");
+		tooltip.className = `tooltip tooltip-${this.type}`;
+		tooltip.style.position = "absolute";
+		tooltip.style.visibility = "hidden";
+		tooltip.style.pointerEvents = "none";
+		tooltip.style.zIndex = "1000";
+		this.container.appendChild(tooltip);
+		return tooltip;
+	}
+	open(content) {
+		this.element.innerHTML = content;
+		this.element.style.visibility = "visible";
+		this.isVisible = true;
+	}
+	openWithRenderer(renderFn) {
+		const result = renderFn();
+		if (typeof result === "function") this.cleanup = result;
+		this.element.style.visibility = "visible";
+		this.isVisible = true;
+	}
+	close() {
+		this.element.style.visibility = "hidden";
+		this.isVisible = false;
+		if (this.cleanup) {
+			this.cleanup();
+			this.cleanup = void 0;
+		}
+	}
+	updatePos(x, y) {
+		if (this.isVisible) {
+			this.element.style.left = `${x}px`;
+			this.element.style.top = `${y}px`;
+		}
+	}
+	getElement() {
+		return this.element;
+	}
+	destroy() {
+		if (this.cleanup) this.cleanup();
+		this.element.remove();
+	}
+};
+
+//#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.config = {
+			useDefaultStyles: true,
+			...config
+		};
+		this.mainTooltip = new Tooltip("main", container, this.config.useDefaultStyles);
+		this.previewTooltip = new Tooltip("preview", container, this.config.useDefaultStyles);
+	}
+	/**
+	* Show grab cursor when hovering over a node
+	*/
+	showGrabIcon(x, y, progress) {
+		if (this.config.cursorHandler) {
+			const state = progress > 0 ? "grab" : "pointer";
+			this.config.cursorHandler(this.canvas, state);
+		} else this.canvas.style.cursor = progress > 0 ? "grab" : "pointer";
+	}
+	hideGrabIcon() {
+		if (this.config.cursorHandler) this.config.cursorHandler(this.canvas, "default");
+		else this.canvas.style.cursor = "default";
+	}
+	/**
+	* Show preview tooltip (triggered by pop event when hover reaches 1.0)
+	*/
+	showPreview(node, x, y) {
+		if (this.config.renderer) this.previewTooltip.openWithRenderer(() => this.config.renderer(this.previewTooltip.getElement(), node, "preview", x, y));
+		else {
+			const content = this.generatePreviewContent(node);
+			this.previewTooltip.open(content);
+		}
+		this.previewTooltip.updatePos(x + 20, y + 20);
+	}
+	hidePreview() {
+		this.previewTooltip.close();
+	}
+	/**
+	* Show full tooltip (triggered by click)
+	*/
+	showFull(node, x, y) {
+		if (this.config.renderer) this.mainTooltip.openWithRenderer(() => this.config.renderer(this.mainTooltip.getElement(), node, "full", x, y));
+		else {
+			const content = this.generateFullContent(node);
+			this.mainTooltip.open(content);
+		}
+		if (!this.config.renderer) this.addCloseButton();
+		this.mainTooltip.updatePos(x + 20, y + 20);
+	}
+	hideFull() {
+		this.mainTooltip.close();
+		this.removeCloseButton();
+	}
+	/**
+	* Set callback for when tooltip is closed
+	*/
+	setOnCloseCallback(callback) {
+		this.onCloseCallback = callback;
+	}
+	/**
+	* Add close button to tooltip
+	*/
+	addCloseButton() {
+		this.removeCloseButton();
+		const element = this.mainTooltip.getElement();
+		element.style.pointerEvents = "auto";
+		this.closeButton = document.createElement("button");
+		this.closeButton.innerHTML = "×";
+		this.closeButton.className = "tooltip-close";
+		this.closeButton.style.cssText = `
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            color: white;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            cursor: pointer;
+            font-size: 20px;
+            line-height: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s;
+            padding: 0;
+        `;
+		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("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();
+	}
+	/**
+	* Generate preview content (subset of fields)
+	*/
+	generatePreviewContent(node) {
+		return `
+            <div class="tooltip-preview" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+                <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600;">${this.escapeHtml(node.title || node.id)}</h3>
+                <p style="margin: 0; font-size: 13px; opacity: 0.8;">${this.escapeHtml(node.group || "unknown")}</p>
+            </div>
+        `;
+	}
+	/**
+	* Generate full tooltip content (all fields)
+	*/
+	generateFullContent(node) {
+		return `
+            <div class="tooltip-full" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding-right: 24px;">
+                <h2 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${this.escapeHtml(node.title || node.id)}</h2>
+                ${node.thumbnailUrl ? `<img src="${this.escapeHtml(node.thumbnailUrl)}" alt="thumbnail" style="max-width: 100%; height: auto; border-radius: 4px; margin: 0 0 12px 0;" />` : ""}
+                <p style="margin: 0 0 8px 0; font-size: 13px;"><strong>Group:</strong> ${this.escapeHtml(node.group || "unknown")}</p>
+                ${node.description ? `<p style="margin: 0 0 8px 0; font-size: 13px; line-height: 1.5;">${this.escapeHtml(node.description)}</p>` : ""}
+                <p style="margin: 0; font-size: 12px; opacity: 0.6;"><strong>ID:</strong> ${this.escapeHtml(node.id)}</p>
+            </div>
+        `;
+	}
+	escapeHtml(text) {
+		const div = document.createElement("div");
+		div.textContent = text;
+		return div.innerHTML;
+	}
+	showMainTooltip(content, x, y) {
+		this.mainTooltip.open(content);
+		this.mainTooltip.updatePos(x, y);
+	}
+	hideMainTooltip() {
+		this.mainTooltip.close();
+	}
+	showChainTooltip(nodeId, content, x, y) {
+		if (!this.chainTooltips.has(nodeId)) this.chainTooltips.set(nodeId, new Tooltip("label", this.container, this.config.useDefaultStyles));
+		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);
+	}
+	dispose() {
+		this.removeCloseButton();
+		this.mainTooltip.destroy();
+		this.previewTooltip.destroy();
+		this.chainTooltips.forEach((tooltip) => tooltip.destroy());
+		this.chainTooltips.clear();
+	}
+};
+
+//#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.pointerInput = new InputProcessor(pickFunction, canvas, viewport);
+		const tooltipContainer = document.body;
+		this.tooltipManager = new TooltipManager(tooltipContainer, canvas, tooltipConfig);
+		this.tooltipManager.setOnCloseCallback(() => {
+			this.isTooltipSticky = false;
+		});
+		this.hoverHandler = new HoverHandler(getNodeByIndex);
+		this.clickHandler = new ClickHandler(getNodeByIndex);
+		this.dragHandler = new DragHandler(getNodeByIndex, cameraController, forceSimulation, viewport);
+		this.wireEvents();
+		this.wireTooltipEvents();
+		this.wireVisualFeedbackEvents();
+	}
+	wireEvents() {
+		this.pointerInput.on("pointer:hoverstart", (data) => {
+			this.hoverHandler.emit("pointer:hoverstart", data);
+		});
+		this.pointerInput.on("pointer:hover", (data) => {
+			this.hoverHandler.emit("pointer:hover", data);
+		});
+		this.pointerInput.on("pointer:hoverend", (data) => {
+			this.hoverHandler.emit("pointer:hoverend", data);
+		});
+		this.pointerInput.on("pointer:pop", (data) => {
+			this.hoverHandler.emit("pointer:pop", data);
+		});
+		this.pointerInput.on("pointer:click", (data) => {
+			this.clickHandler.emit("pointer:click", data);
+		});
+		this.pointerInput.on("pointer:clickempty", () => {
+			if (this.isTooltipSticky) {
+				this.tooltipManager.hideFull();
+				this.isTooltipSticky = false;
+				this.stickyNodeId = null;
+				const linkRenderer = this.graphScene.getLinkRenderer();
+				const nodeRenderer = this.graphScene.getNodeRenderer();
+				if (this.searchHighlightIds.length > 0) {
+					linkRenderer?.clearHighlights(.05);
+					nodeRenderer?.highlight(this.searchHighlightIds);
+				} else {
+					linkRenderer?.clearHighlights(.05);
+					nodeRenderer?.clearHighlights(.05);
+				}
+			}
+		});
+		this.pointerInput.on("pointer:dragstart", (data) => {
+			this.dragHandler.emit("pointer:dragstart", data);
+			this.isDragging = true;
+		});
+		this.pointerInput.on("pointer:drag", (data) => {
+			this.dragHandler.emit("pointer:drag", data);
+		});
+		this.pointerInput.on("pointer:dragend", (data) => {
+			this.dragHandler.emit("pointer:dragend", data);
+			this.isDragging = false;
+		});
+	}
+	wireTooltipEvents() {
+		this.hoverHandler.on("node:hover", ({ x, y, progress }) => {
+			this.tooltipManager.showGrabIcon(x, y, progress);
+		});
+		this.hoverHandler.on("node:pop", ({ node, x, y, clientX, clientY }) => {
+			if (!this.isTooltipSticky) {
+				this.tooltipManager.showPreview(node, clientX ?? x, clientY ?? y);
+				window.dispatchEvent(new CustomEvent("audio:hover"));
+			}
+		});
+		this.hoverHandler.on("node:hoverend", () => {
+			this.tooltipManager.hideGrabIcon();
+			if (!this.isTooltipSticky) this.tooltipManager.hidePreview();
+		});
+		this.clickHandler.on("node:click", ({ node, x, y, clientX, clientY }) => {
+			if (this.isTooltipSticky && this.stickyNodeId === node.id) {
+				this.tooltipManager.hideFull();
+				this.isTooltipSticky = false;
+				this.stickyNodeId = null;
+				const linkRenderer = this.graphScene.getLinkRenderer();
+				const nodeRenderer = this.graphScene.getNodeRenderer();
+				if (this.searchHighlightIds.length > 0) {
+					linkRenderer?.clearHighlights(.05);
+					nodeRenderer?.highlight(this.searchHighlightIds);
+				} else {
+					linkRenderer?.clearHighlights(.05);
+					nodeRenderer?.clearHighlights(.05);
+				}
+			} else {
+				this.tooltipManager.hidePreview();
+				this.tooltipManager.showFull(node, clientX ?? x, clientY ?? y);
+				this.isTooltipSticky = true;
+				this.stickyNodeId = node.id;
+				window.dispatchEvent(new CustomEvent("audio:open"));
+				this.graphScene.getLinkRenderer()?.highlightConnectedLinks(node.id);
+				const nodeRenderer = this.graphScene.getNodeRenderer();
+				if (this.getConnectedNodeIds) {
+					const connectedIds = this.getConnectedNodeIds(node.id);
+					connectedIds.push(node.id);
+					nodeRenderer?.highlight(connectedIds);
+				}
+			}
+		});
+	}
+	/**
+	* Wire visual feedback events (opacity, highlighting)
+	* Centralized control of visual responses to interactions
+	*/
+	wireVisualFeedbackEvents() {
+		if (!this.graphScene) return;
+		this.hoverHandler.on("node:hoverstart", ({ node }) => {
+			this.graphScene.getLinkRenderer()?.highlightConnectedLinks(node.id);
+			const nodeRenderer = this.graphScene.getNodeRenderer();
+			if (this.getConnectedNodeIds) {
+				const connectedIds = this.getConnectedNodeIds(node.id);
+				connectedIds.push(node.id);
+				nodeRenderer?.highlight(connectedIds);
+			}
+		});
+		this.hoverHandler.on("node:hoverend", () => {
+			const linkRenderer = this.graphScene.getLinkRenderer();
+			const nodeRenderer = this.graphScene.getNodeRenderer();
+			if (this.isTooltipSticky && this.stickyNodeId) {
+				linkRenderer?.highlightConnectedLinks(this.stickyNodeId);
+				if (this.getConnectedNodeIds) {
+					const connectedIds = this.getConnectedNodeIds(this.stickyNodeId);
+					connectedIds.push(this.stickyNodeId);
+					nodeRenderer?.highlight(connectedIds);
+				}
+			} else if (this.searchHighlightIds.length > 0) {
+				linkRenderer?.clearHighlights(.05);
+				nodeRenderer?.highlight(this.searchHighlightIds);
+			} else {
+				linkRenderer?.clearHighlights(.05);
+				nodeRenderer?.clearHighlights(.05);
+			}
+		});
+	}
+	getPointerInput() {
+		return this.pointerInput;
+	}
+	getHoverHandler() {
+		return this.hoverHandler;
+	}
+	getClickHandler() {
+		return this.clickHandler;
+	}
+	getDragHandler() {
+		return this.dragHandler;
+	}
+	getTooltipManager() {
+		return this.tooltipManager;
+	}
+	isTooltipStickyOpen() {
+		return this.isTooltipSticky;
+	}
+	/**
+	* Update viewport dimensions on resize
+	*/
+	resize(width, height) {
+		this.pointerInput.resize(width, height);
+		this.dragHandler.resize(width, height);
+	}
+	cleanup() {
+		this.tooltipManager.hideAll();
+		this.isTooltipSticky = false;
+		this.isDragging = false;
+	}
+	dispose() {
+		this.cleanup();
+		this.pointerInput.dispose();
+		this.hoverHandler.dispose();
+		this.clickHandler.dispose();
+		this.dragHandler.dispose();
+		this.tooltipManager.dispose();
+	}
+};
+
+//#endregion
+//#region types/iCameraMode.ts
+let CameraMode = /* @__PURE__ */ function(CameraMode) {
+	CameraMode["Orbit"] = "orbit";
+	CameraMode["Map"] = "map";
+	return CameraMode;
+}({});
+
+//#endregion
+//#region rendering/CameraController.ts
+var CameraController = class {
+	camera;
+	controls;
+	sceneBounds = null;
+	autorotateEnabled = false;
+	autorotateSpeed = .5;
+	userIsActive = true;
+	constructor(domelement, config) {
+		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);
+		this.controls = new CameraControls(this.camera, domelement);
+		console.log(this.controls, domelement);
+		this.setupDefaultControls(config);
+	}
+	setupDefaultControls(config) {
+		this.controls.smoothTime = .8;
+		this.controls.dollyToCursor = true;
+		this.controls.minDistance = config?.minDistance ?? 100;
+		this.controls.maxDistance = config?.maxDistance ?? 4e3;
+		this.setMode(CameraMode.Orbit);
+	}
+	/**
+	* Set camera control mode
+	*/
+	setMode(mode) {
+		switch (mode) {
+			case CameraMode.Map:
+				this.controls.mouseButtons.left = CameraControls.ACTION.TRUCK;
+				this.controls.mouseButtons.right = CameraControls.ACTION.TRUCK;
+				this.controls.mouseButtons.wheel = CameraControls.ACTION.DOLLY;
+				this.controls.touches.one = CameraControls.ACTION.TOUCH_TRUCK;
+				this.controls.touches.two = CameraControls.ACTION.TOUCH_DOLLY_TRUCK;
+				this.controls.touches.three = CameraControls.ACTION.TOUCH_TRUCK;
+				this.controls.maxPolarAngle = Math.PI / 2 - .1;
+				break;
+			case CameraMode.Orbit:
+			default:
+				this.controls.mouseButtons.left = 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;
+				this.controls.touches.three = CameraControls.ACTION.TOUCH_TRUCK;
+				this.controls.maxPolarAngle = Math.PI;
+				break;
+		}
+	}
+	/**
+	* Set camera boundary
+	*/
+	setBoundary(box) {
+		this.controls.setBoundary(box);
+	}
+	/**
+	* Update camera controls (should be called in render loop)
+	* Only autorotate if enabled and user is inactive
+	*/
+	update(delta) {
+		if (this.autorotateEnabled && !this.userIsActive) this.controls.azimuthAngle += this.autorotateSpeed * delta;
+		return this.controls.update(delta);
+	}
+	/**
+	* Set autorotate enabled/disabled
+	*/
+	setAutorotate(enabled, speed) {
+		this.autorotateEnabled = enabled;
+		this.autorotateSpeed = speed ? speed * THREE.MathUtils.DEG2RAD : 0;
+	}
+	/**
+	* Set user activity state
+	*/
+	setUserIsActive(isActive) {
+		this.userIsActive = isActive;
+	}
+	/**
+	* Configure camera controls
+	*/
+	configureControls(config) {
+		Object.assign(this.controls, config);
+	}
+	/**
+	* Resize camera when window resizes
+	*/
+	resize(width, height) {
+		this.camera.aspect = width / height;
+		this.camera.updateProjectionMatrix();
+	}
+	/**
+	* Animate camera to look at a specific target from a specific position
+	*/
+	async setLookAt(position, target, enableTransition = true) {
+		await this.controls.setLookAt(position.x, position.y, position.z, target.x, target.y, target.z, enableTransition);
+	}
+	/**
+	* Reset camera to default position
+	*/
+	async reset(enableTransition = true) {
+		return this.controls.setLookAt(0, 0, 50, 0, 0, 0, enableTransition);
+	}
+	/**
+	* Enable/disable controls
+	*/
+	setEnabled(enabled) {
+		this.controls.enabled = enabled;
+	}
+	/**
+	* Get current camera target (look-at point)
+	*/
+	getTarget(out) {
+		const target = out ?? new THREE.Vector3();
+		this.controls.getTarget(target);
+		return target;
+	}
+	/**
+	* Dispose camera manager and clean up
+	*/
+	dispose() {
+		this.controls.dispose();
+	}
+	/**
+	* Clear camera bounds (remove boundary restrictions)
+	*/
+	clearBounds() {
+		this.sceneBounds = null;
+	}
+	/**
+	* Get current scene bounds
+	*/
+	getSceneBounds() {
+		return this.sceneBounds;
+	}
+	/**
+	* Update scene bounds used by the camera manager.
+	* Stores the bounds for future use (e.g. constraining controls).
+	*/
+	updateBounds(box) {
+		this.sceneBounds = box.clone();
+		this.controls.setBoundary(box);
+	}
+	/**
+	* Unified configuration method
+	*/
+	setOptions(options) {
+		if (options.controls) this.configureControls(options.controls);
+		if (options.autoRotate !== void 0) this.setAutorotate(options.autoRotate, options.autoRotateSpeed);
+	}
+};
+
+//#endregion
+//#region assets/glsl/lines/lines.frag
+var lines_default$1 = "precision mediump float;\n\nvarying vec3 vColor;\r\nflat varying float vAlphaIndex;\n\nuniform sampler2D uAlphaTexture;\r\nuniform vec2 uAlphaTextureSize; \n\nvec2 alphaUvFromIndex(float idx) {\r\n    float width = uAlphaTextureSize.x;\r\n    float texX = mod(idx, width);\r\n    float texY = floor(idx / width);\r\n    return (vec2(texX + 0.5, texY + 0.5) / uAlphaTextureSize);\r\n}\n\nvoid main() {\r\n    vec2 uv = alphaUvFromIndex(vAlphaIndex);\r\n    float a = texture2D(uAlphaTexture, uv).r;\n\n    gl_FragColor = vec4(vColor, a);\r\n    #include <colorspace_fragment>\r\n}";
+
+//#endregion
+//#region assets/glsl/lines/lines.vert
+var lines_default = "attribute float t;\n\nattribute vec2 instanceLinkA;\r\nattribute vec2 instanceLinkB;\r\nattribute vec3 instanceColorA;\r\nattribute vec3 instanceColorB;\r\nattribute float instanceAlphaIndex;\n\nuniform sampler2D uPositionsTexture;\r\nuniform vec2 uPositionsTextureSize;\r\nuniform float uNoiseStrength;\r\nuniform float uTime;\n\nvarying vec3 vColor;\r\nflat varying float vAlphaIndex;\n\nvec3 organicNoise(vec3 p, float seed) {\r\n    float frequency = 1.5;\r\n    float branchiness = 5.;\r\n    \r\n    \n    vec3 n1 = sin(p * frequency + seed) * 0.5;\r\n    vec3 n2 = sin(p * frequency * 2.3 + seed * 1.5) * 0.25 * (1.0 + branchiness);\r\n    vec3 n3 = sin(p * frequency * 4.7 + seed * 2.3) * 0.125 * (1.0 + branchiness);\r\n    \r\n    return n1 + n2 + n3;\r\n}\n\nfloat smoothCurve(float t) {\r\n    return t * t * (3.0 - 2.0 * t);\r\n}\n\nvoid main() {\r\n    \n    vColor = mix(instanceColorA, instanceColorB, t);\r\n    vAlphaIndex = instanceAlphaIndex;\n\n    \n    vec2 uvA = (instanceLinkA + vec2(0.5)) / uPositionsTextureSize;\r\n    vec2 uvB = (instanceLinkB + vec2(0.5)) / uPositionsTextureSize;\n\n    vec4 posA = texture2D(uPositionsTexture, uvA);\r\n    vec4 posB = texture2D(uPositionsTexture, uvB);\r\n    if (posA.w < 0.5 || posB.w < 0.5) {\r\n        \n        gl_Position = vec4(2.0, 2.0, 2.0, 1.0); \r\n        return;\r\n    }\r\n    vec3 linear = mix(posA.xyz, posB.xyz, t);\r\n    \r\n    \n    vec3 dir = normalize(posB.xyz - posA.xyz);\r\n    float dist = length(posB.xyz - posA.xyz);\r\n    vec3 up = abs(dir.y) < 0.99 ? vec3(0.0, 1.0, 0.0) : vec3(1.0, 0.0, 0.0);\r\n    vec3 perp = normalize(cross(dir, up));\r\n    vec3 upVec = normalize(cross(perp, dir));\n\n    \r\n    \n    float sinPhase = instanceAlphaIndex * 0.1 + uTime * 0.3;\r\n    float sinWave = sin(t * 3.14159265 * 2.0 + sinPhase);\r\n    \r\n    \n    float tSmooth = smoothCurve(t);\r\n    float curve = sin(t * 3.14159265) * tSmooth;\r\n    \r\n    \n    float curvature = 0.1;\r\n    curve = pow(curve, 1.0 - curvature * 0.5);\r\n    \r\n    float intensity = curve * uNoiseStrength;\n\n    vec3 pos = linear;\n\n    if (intensity > 0.001) {\r\n        \n        vec3 samplePos = linear * 0.5 + vec3(instanceAlphaIndex, 0.0, instanceAlphaIndex * 0.7);\r\n        vec3 noise = organicNoise(samplePos, instanceAlphaIndex);\r\n        \r\n        \n        float sinModulation = 0.5 + 0.5 * sinWave;\r\n        pos += perp * noise.x * intensity * sinModulation;\r\n        pos += upVec * noise.y * intensity * 0.7;\r\n        pos += dir * noise.z * intensity * 0.3;\r\n    }\n\n    vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);\r\n    gl_Position = projectionMatrix * mvPosition;\r\n}";
+
+//#endregion
+//#region core/StyleRegistry.ts
+/**
+* Default styles
+*/
+const DEFAULT_NODE_STYLE = {
+	color: new THREE.Color(214748364),
+	size: 6
+};
+const DEFAULT_LINK_STYLE = { color: new THREE.Color(8947848) };
+/**
+* StyleRegistry - Manages visual styles for node and link categories
+*
+* Usage:
+*   styleRegistry.setNodeStyle('person', { color: 0xff0000, size: 20 })
+*   styleRegistry.setLinkStyle('friendship', { color: '#00ff00', width: 2 })
+*
+*   const style = styleRegistry.getNodeStyle('person')
+*/
+var StyleRegistry = class {
+	nodeStyles = /* @__PURE__ */ new Map();
+	linkStyles = /* @__PURE__ */ new Map();
+	defaultNodeStyle = { ...DEFAULT_NODE_STYLE };
+	defaultLinkStyle = { ...DEFAULT_LINK_STYLE };
+	/**
+	* Convert color input to THREE.Color
+	*/
+	toColor(input) {
+		if (input instanceof THREE.Color) return input.clone();
+		return new THREE.Color(input);
+	}
+	/**
+	* Set the default style for nodes without a category
+	*/
+	setDefaultNodeStyle(style) {
+		if (style.color !== void 0) this.defaultNodeStyle.color = this.toColor(style.color);
+		if (style.size !== void 0) this.defaultNodeStyle.size = style.size;
+	}
+	/**
+	* Set the default style for links without a category
+	*/
+	setDefaultLinkStyle(style) {
+		if (style.color !== void 0) this.defaultLinkStyle.color = this.toColor(style.color);
+	}
+	/**
+	* Register a style for a node category
+	*/
+	setNodeStyle(category, style) {
+		this.nodeStyles.set(category, {
+			color: this.toColor(style.color),
+			size: style.size
+		});
+	}
+	/**
+	* Register multiple node styles at once
+	*/
+	setNodeStyles(styles) {
+		for (const [category, style] of Object.entries(styles)) this.setNodeStyle(category, style);
+	}
+	/**
+	* Register a style for a link category
+	*/
+	setLinkStyle(category, style) {
+		this.linkStyles.set(category, { color: this.toColor(style.color) });
+	}
+	/**
+	* Register multiple link styles at once
+	*/
+	setLinkStyles(styles) {
+		for (const [category, style] of Object.entries(styles)) this.setLinkStyle(category, style);
+	}
+	/**
+	* Get the resolved style for a node category
+	*/
+	getNodeStyle(category) {
+		if (!category) return this.defaultNodeStyle;
+		return this.nodeStyles.get(category) || this.defaultNodeStyle;
+	}
+	/**
+	* Get the resolved style for a link category
+	*/
+	getLinkStyle(category) {
+		if (!category) return this.defaultLinkStyle;
+		return this.linkStyles.get(category) || this.defaultLinkStyle;
+	}
+	/**
+	* Check if a node category exists
+	*/
+	hasNodeStyle(category) {
+		return this.nodeStyles.has(category);
+	}
+	/**
+	* Check if a link category exists
+	*/
+	hasLinkStyle(category) {
+		return this.linkStyles.has(category);
+	}
+	/**
+	* Remove a node style
+	*/
+	removeNodeStyle(category) {
+		this.nodeStyles.delete(category);
+	}
+	/**
+	* Remove a link style
+	*/
+	removeLinkStyle(category) {
+		this.linkStyles.delete(category);
+	}
+	/**
+	* Clear all styles
+	*/
+	clear() {
+		this.nodeStyles.clear();
+		this.linkStyles.clear();
+		this.defaultNodeStyle = { ...DEFAULT_NODE_STYLE };
+		this.defaultLinkStyle = { ...DEFAULT_LINK_STYLE };
+	}
+	/**
+	* Get all registered node categories
+	*/
+	getNodeCategories() {
+		return Array.from(this.nodeStyles.keys());
+	}
+	/**
+	* Get all registered link categories
+	*/
+	getLinkCategories() {
+		return Array.from(this.linkStyles.keys());
+	}
+};
+const styleRegistry = new StyleRegistry();
+
+//#endregion
+//#region textures/StaticAssets.ts
+/**
+* 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 {
+	nodeRadiiTexture = null;
+	nodeColorsTexture = null;
+	linkIndicesTexture = null;
+	linkPropertiesTexture = null;
+	nodeLinkMapTexture = null;
+	nodeTextureSize = 0;
+	linkTextureSize = 0;
+	constructor() {}
+	/**
+	* Set/update node radii texture
+	*/
+	setNodeRadii(radii, textureSize) {
+		const expectedSize = textureSize * textureSize;
+		if (radii.length !== expectedSize) {
+			console.warn(`[StaticAssets] Radii array size mismatch! Got ${radii.length}, expected ${expectedSize}`);
+			const correctedRadii = new Float32Array(expectedSize);
+			correctedRadii.set(radii.slice(0, Math.min(radii.length, expectedSize)));
+			radii = correctedRadii;
+		}
+		if (this.nodeRadiiTexture && this.nodeTextureSize === textureSize) {
+			this.nodeRadiiTexture.image.data = radii;
+			this.nodeRadiiTexture.needsUpdate = true;
+		} else {
+			this.nodeRadiiTexture?.dispose();
+			this.nodeRadiiTexture = this.createTexture(radii, textureSize, THREE.RedFormat);
+			this.nodeTextureSize = textureSize;
+		}
+	}
+	/**
+	* Set/update node colors texture
+	*/
+	setNodeColors(colors, textureSize) {
+		if (this.nodeColorsTexture && this.nodeTextureSize === textureSize) {
+			this.nodeColorsTexture.image.data = colors;
+			this.nodeColorsTexture.needsUpdate = true;
+		} else {
+			this.nodeColorsTexture?.dispose();
+			this.nodeColorsTexture = this.createTexture(colors, textureSize, THREE.RGBAFormat);
+			this.nodeTextureSize = textureSize;
+		}
+	}
+	/**
+	* Set link indices (source/target pairs)
+	* Format: [sourceX, sourceY, targetX, targetY] per link
+	*/
+	setLinkIndices(linkIndices, textureSize) {
+		this.linkIndicesTexture?.dispose();
+		this.linkIndicesTexture = this.createTexture(linkIndices, textureSize, THREE.RGBAFormat);
+		this.linkTextureSize = textureSize;
+	}
+	/**
+	* Set link properties (strength, distance, etc.)
+	*/
+	setLinkProperties(linkProperties, textureSize) {
+		this.linkPropertiesTexture?.dispose();
+		this.linkPropertiesTexture = this.createTexture(linkProperties, textureSize, THREE.RGBAFormat);
+		this.linkTextureSize = textureSize;
+	}
+	setNodeLinkMap(linkMap, textureSize) {
+		this.nodeLinkMapTexture?.dispose();
+		this.nodeLinkMapTexture = this.createTexture(linkMap, textureSize, THREE.RGBAFormat);
+	}
+	/**
+	* Create a data texture with proper settings for GPU compute
+	*/
+	createTexture(data, size, format) {
+		const texture = new THREE.DataTexture(data, size, size, format, THREE.FloatType);
+		texture.needsUpdate = true;
+		texture.minFilter = THREE.NearestFilter;
+		texture.magFilter = THREE.NearestFilter;
+		texture.wrapS = THREE.ClampToEdgeWrapping;
+		texture.wrapT = THREE.ClampToEdgeWrapping;
+		texture.generateMipmaps = false;
+		return texture;
+	}
+	getNodeRadiiTexture() {
+		return this.nodeRadiiTexture;
+	}
+	getNodeColorsTexture() {
+		return this.nodeColorsTexture;
+	}
+	getLinkIndicesTexture() {
+		return this.linkIndicesTexture;
+	}
+	getLinkPropertiesTexture() {
+		return this.linkPropertiesTexture;
+	}
+	getLinkMapTexture() {
+		return this.nodeLinkMapTexture;
+	}
+	getNodeTextureSize() {
+		return this.nodeTextureSize;
+	}
+	getLinkTextureSize() {
+		return this.linkTextureSize;
+	}
+	/**
+	* Check if assets are ready
+	*/
+	hasNodeAssets() {
+		return this.nodeRadiiTexture !== null;
+	}
+	hasLinkAssets() {
+		return this.linkIndicesTexture !== null;
+	}
+	/**
+	* Cleanup
+	*/
+	dispose() {
+		this.nodeRadiiTexture?.dispose();
+		this.nodeColorsTexture?.dispose();
+		this.linkIndicesTexture?.dispose();
+		this.linkPropertiesTexture?.dispose();
+		this.nodeLinkMapTexture?.dispose();
+		this.nodeRadiiTexture = null;
+		this.nodeColorsTexture = null;
+		this.linkIndicesTexture = null;
+		this.linkPropertiesTexture = null;
+		this.nodeTextureSize = 0;
+		this.linkTextureSize = 0;
+	}
+};
+const staticAssets = new StaticAssets();
+
+//#endregion
+//#region rendering/links/LinksOpacity.ts
+/**
+* LinksOpacity
+*/
+var LinksOpacity = class {
+	renderer;
+	size;
+	rtA;
+	rtB;
+	ping = 0;
+	scene;
+	camera;
+	quad;
+	computeMaterial;
+	copyMaterial;
+	targetTex = null;
+	constructor(renderer, size) {
+		this.renderer = renderer;
+		this.size = size;
+		const params = {
+			minFilter: THREE.NearestFilter,
+			magFilter: THREE.NearestFilter,
+			wrapS: THREE.ClampToEdgeWrapping,
+			wrapT: THREE.ClampToEdgeWrapping,
+			format: THREE.RGBAFormat,
+			type: THREE.FloatType,
+			depthBuffer: false,
+			stencilBuffer: false
+		};
+		this.rtA = new THREE.WebGLRenderTarget(size, size, params);
+		this.rtB = new THREE.WebGLRenderTarget(size, size, params);
+		this.scene = new THREE.Scene();
+		this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		const geo = new THREE.PlaneGeometry(2, 2);
+		this.computeMaterial = new THREE.ShaderMaterial({
+			vertexShader: `
+        void main() {
+          gl_Position = vec4(position, 1.0);
+        }
+      `,
+			fragmentShader: `
+        precision highp float;
+
+        uniform sampler2D uPrev;
+        uniform sampler2D uTarget;
+        uniform float uStep;
+        uniform vec2 uResolution;
+
+        void main() {
+          // compute stable texcoord from pixel coords
+          vec2 uv = gl_FragCoord.xy / uResolution;
+          float prev = texture2D(uPrev, uv).r;
+          float target = texture2D(uTarget, uv).r;
+          
+          // Lerp towards target
+          float nextVal = mix(prev, target, uStep);
+          
+          // Clamp to valid range
+          nextVal = clamp(nextVal, 0.0, 1.0);
+          
+          gl_FragColor = vec4(nextVal, 0.0, 0.0, 1.0);
+        }
+
+      `,
+			uniforms: {
+				uPrev: { value: null },
+				uTarget: { value: null },
+				uStep: { value: .01 },
+				uResolution: { value: new THREE.Vector2(size, size) }
+			},
+			depthTest: false,
+			depthWrite: false
+		});
+		this.copyMaterial = new THREE.ShaderMaterial({
+			vertexShader: this.computeMaterial.vertexShader,
+			fragmentShader: `
+        precision highp float;
+        uniform sampler2D uSrc;
+        uniform vec2 uResolution;
+        void main() {
+          vec2 uv = gl_FragCoord.xy / uResolution;
+          vec4 s = texture2D(uSrc, uv);
+          gl_FragColor = vec4(s.r, 0.0, 0.0, 1.0);
+        }
+      `,
+			uniforms: {
+				uSrc: { value: null },
+				uResolution: { value: new THREE.Vector2(size, size) }
+			},
+			depthTest: false,
+			depthWrite: false
+		});
+		this.quad = new THREE.Mesh(geo, this.computeMaterial);
+		this.scene.add(this.quad);
+		this.targetTex = new THREE.DataTexture(new Float32Array(size * size * 4).fill(0), size, size, THREE.RGBAFormat, THREE.FloatType);
+		this.targetTex.minFilter = THREE.NearestFilter;
+		this.targetTex.magFilter = THREE.NearestFilter;
+		this.targetTex.wrapS = THREE.ClampToEdgeWrapping;
+		this.targetTex.wrapT = THREE.ClampToEdgeWrapping;
+		this.targetTex.flipY = false;
+		this.targetTex.needsUpdate = true;
+	}
+	init(initialAlphaTexture) {
+		this.copyMaterial.uniforms.uSrc.value = initialAlphaTexture;
+		this.copyMaterial.uniforms.uResolution.value.set(this.size, this.size);
+		this.quad.material = this.copyMaterial;
+		const prevRT = this.renderer.getRenderTarget();
+		this.renderer.setRenderTarget(this.rtA);
+		this.renderer.render(this.scene, this.camera);
+		this.renderer.setRenderTarget(this.rtB);
+		this.renderer.render(this.scene, this.camera);
+		this.renderer.setRenderTarget(prevRT);
+		this.ping = 0;
+		this.quad.material = this.computeMaterial;
+	}
+	setTargets(targets) {
+		const total = this.size * this.size;
+		const data = this.targetTex && this.targetTex.image && this.targetTex.image.data.length === total * 4 ? this.targetTex.image.data : new Float32Array(total * 4);
+		for (let i = 0; i < total; i++) {
+			const v = targets[i] ?? 0;
+			const base = i * 4;
+			data[base] = v;
+			data[base + 1] = 0;
+			data[base + 2] = 0;
+			data[base + 3] = 1;
+		}
+		if (this.targetTex) {
+			this.targetTex.image.data = data;
+			this.targetTex.needsUpdate = true;
+		}
+	}
+	runComputePass() {
+		const prevRT = this.getPrevRT();
+		this.computeMaterial.uniforms.uPrev.value = prevRT.texture;
+		if (this.targetTex) this.computeMaterial.uniforms.uTarget.value = this.targetTex;
+		const targetRT = this.getNextRT();
+		this.renderer.setRenderTarget(targetRT);
+		this.renderer.render(this.scene, this.camera);
+		this.renderer.setRenderTarget(null);
+		this.ping = 1 - this.ping;
+	}
+	update() {
+		this.runComputePass();
+	}
+	getCurrentAlphaTexture() {
+		return this.getPrevRT().texture;
+	}
+	/**
+	* Set the step size for alpha transitions
+	* @param step - Step size (default: 0.01)
+	*/
+	setStep(step) {
+		this.computeMaterial.uniforms.uStep.value = step;
+	}
+	getPrevRT() {
+		return this.ping === 0 ? this.rtA : this.rtB;
+	}
+	getNextRT() {
+		return this.ping === 0 ? this.rtB : this.rtA;
+	}
+	dispose() {
+		this.rtA.dispose();
+		this.rtB.dispose();
+		this.copyMaterial.dispose();
+		this.computeMaterial.dispose();
+		this.quad.geometry.dispose();
+		if (this.targetTex) this.targetTex.dispose();
+	}
+};
+
+//#endregion
+//#region rendering/links/LinksRenderer.ts
+/**
+* LinksRenderer - Renders links as line segments
+* Uses shared SimulationBuffers for node positions
+* Manages link-specific opacity and highlighting
+*/
+var LinksRenderer = class {
+	lines = null;
+	links = [];
+	nodeIndexMap = /* @__PURE__ */ new Map();
+	linkIndexMap = /* @__PURE__ */ new Map();
+	interpolationSteps = 24;
+	params = {
+		noiseStrength: .2,
+		defaultAlpha: .02,
+		highlightAlpha: .8,
+		dimmedAlpha: .02,
+		is2D: true
+	};
+	linkOpacity = null;
+	simulationBuffers = null;
+	constructor(scene, renderer) {
+		this.scene = scene;
+		this.renderer = renderer;
+	}
+	/**
+	* Create link geometry and materials
+	* Receives shared buffers as dependencies
+	*/
+	create(links, nodes, simulationBuffers) {
+		this.links = links;
+		this.simulationBuffers = simulationBuffers;
+		const textureSize = simulationBuffers.getTextureSize();
+		const linkCount = links.length;
+		this.buildNodeMapping(nodes);
+		const { geometry, linkIndexMap } = this.createLinkGeometry(links, nodes, textureSize);
+		this.linkIndexMap = linkIndexMap;
+		const { linkIndicesData, linkPropertiesData, nodeLinkMapData, linksTextureSize } = this.buildLinkTextures(links, nodes, textureSize);
+		staticAssets.setLinkIndices(linkIndicesData, linksTextureSize);
+		staticAssets.setLinkProperties(linkPropertiesData, linksTextureSize);
+		staticAssets.setNodeLinkMap(nodeLinkMapData, textureSize);
+		const alphaTextureSize = Math.ceil(Math.sqrt(linkCount));
+		this.linkOpacity = new LinksOpacity(this.renderer, alphaTextureSize);
+		const total = alphaTextureSize * alphaTextureSize;
+		const initialAlphaData = new Float32Array(total * 4);
+		for (let i = 0; i < total; i++) {
+			initialAlphaData[i * 4] = this.params.defaultAlpha;
+			initialAlphaData[i * 4 + 1] = 0;
+			initialAlphaData[i * 4 + 2] = 0;
+			initialAlphaData[i * 4 + 3] = 1;
+		}
+		const initialAlphaTexture = new THREE.DataTexture(initialAlphaData, alphaTextureSize, alphaTextureSize, THREE.RGBAFormat, THREE.FloatType);
+		initialAlphaTexture.needsUpdate = true;
+		this.linkOpacity.init(initialAlphaTexture);
+		initialAlphaTexture.dispose();
+		const material = this.createRenderMaterial(textureSize, alphaTextureSize);
+		this.lines = new THREE.LineSegments(geometry, material);
+		this.lines.frustumCulled = false;
+		this.lines.renderOrder = 998;
+		this.scene.add(this.lines);
+		this.clearHighlights();
+	}
+	/**
+	* Update position texture from simulation
+	* This is the SHARED texture used by both nodes and links
+	*/
+	setPositionTexture(positionTexture) {
+		if (!this.lines) return;
+		const material = this.lines.material;
+		if (material.uniforms.uPositionsTexture) material.uniforms.uPositionsTexture.value = positionTexture;
+	}
+	/**
+	* Update shader uniforms (called each frame)
+	*/
+	update(time) {
+		if (!this.lines) return;
+		const material = this.lines.material;
+		if (material.uniforms.uTime) material.uniforms.uTime.value = time;
+	}
+	/**
+	* Update link opacity (called every frame)
+	*/
+	updateOpacity() {
+		if (!this.linkOpacity) return;
+		this.linkOpacity.update();
+		if (this.lines && this.lines.material) {
+			const material = this.lines.material;
+			if (material.uniforms.uAlphaTexture) material.uniforms.uAlphaTexture.value = this.linkOpacity.getCurrentAlphaTexture();
+		}
+	}
+	/**
+	* Highlight links connected to a specific node
+	*/
+	highlightConnectedLinks(nodeId, step = .01) {
+		if (!this.lines || !this.linkOpacity) return;
+		const linkCount = this.lines.geometry instanceof THREE.InstancedBufferGeometry ? this.lines.geometry.instanceCount : 0;
+		if (linkCount === 0 || linkCount === void 0) return;
+		const targets = new Array(linkCount).fill(this.params.dimmedAlpha);
+		let hasConnections = false;
+		for (const [linkId, instanceIndex] of this.linkIndexMap.entries()) {
+			const [sourceId, targetId] = linkId.split("-");
+			if (sourceId === nodeId || targetId === nodeId) {
+				targets[instanceIndex] = this.params.highlightAlpha;
+				hasConnections = true;
+			}
+		}
+		if (!hasConnections) return;
+		this.linkOpacity.setStep(step);
+		this.linkOpacity.setTargets(targets);
+	}
+	/**
+	* Clear all highlights (return to defaultAlpha)
+	*/
+	clearHighlights(step = .1) {
+		if (!this.linkOpacity) return;
+		const linkCount = this.lines?.geometry instanceof THREE.InstancedBufferGeometry ? this.lines.geometry.instanceCount : 0;
+		if (linkCount === 0 || linkCount === void 0) return;
+		const targets = new Array(linkCount).fill(this.params.defaultAlpha);
+		this.linkOpacity.setStep(step);
+		this.linkOpacity.setTargets(targets);
+	}
+	/**
+	* Update noise strength parameter
+	*/
+	setNoiseStrength(strength) {
+		this.params.noiseStrength = strength;
+		this.refreshUniforms();
+	}
+	/**
+	* Update alpha parameters
+	*/
+	setAlphaParams(params) {
+		if (params.defaultAlpha !== void 0) this.params.defaultAlpha = params.defaultAlpha;
+		if (params.highlightAlpha !== void 0) this.params.highlightAlpha = params.highlightAlpha;
+		if (params.dimmedAlpha !== void 0) this.params.dimmedAlpha = params.dimmedAlpha;
+	}
+	/**
+	* Unified configuration method
+	*/
+	setOptions(options) {
+		if (options.visible !== void 0) this.setVisible(options.visible);
+		if (options.noiseStrength !== void 0) this.setNoiseStrength(options.noiseStrength);
+		if (options.alpha) {
+			this.setAlphaParams({
+				defaultAlpha: options.alpha.default,
+				highlightAlpha: options.alpha.highlight,
+				dimmedAlpha: options.alpha.dimmed
+			});
+			this.clearHighlights();
+		}
+	}
+	/**
+	* Refresh shader uniforms when params change
+	*/
+	refreshUniforms() {
+		if (!this.lines) return;
+		const material = this.lines.material;
+		if (material.uniforms.uNoiseStrength) material.uniforms.uNoiseStrength.value = this.params.noiseStrength;
+	}
+	/**
+	* Handle window resize
+	*/
+	resize(width, height) {}
+	/**
+	* Set visibility of links
+	*/
+	setVisible(visible) {
+		if (this.lines) this.lines.visible = visible;
+	}
+	/**
+	* Check if links are visible
+	*/
+	isVisible() {
+		return this.lines?.visible ?? false;
+	}
+	/**
+	* Cleanup
+	*/
+	dispose() {
+		if (this.lines) {
+			this.scene.remove(this.lines);
+			this.lines.geometry.dispose();
+			this.lines.material.dispose();
+			this.lines = null;
+		}
+		this.linkOpacity?.dispose();
+		this.linkIndexMap.clear();
+		this.nodeIndexMap.clear();
+		this.simulationBuffers = null;
+	}
+	/**
+	* Build node index mapping
+	*/
+	buildNodeMapping(nodes) {
+		this.nodeIndexMap.clear();
+		nodes.forEach((node, i) => {
+			this.nodeIndexMap.set(node.id, i);
+		});
+	}
+	/**
+	* Create link geometry with interpolated segments
+	*/
+	createLinkGeometry(links, nodes, nodeTextureSize) {
+		const linkIndexMap = /* @__PURE__ */ new Map();
+		const nodeMap = /* @__PURE__ */ new Map();
+		nodes.forEach((node) => nodeMap.set(node.id, node));
+		const baseGeometry = new THREE.BufferGeometry();
+		const baseVertices = this.interpolationSteps * 2;
+		const tValues = new Float32Array(baseVertices);
+		const positions = new Float32Array(baseVertices * 3);
+		let vertexIndex = 0;
+		for (let i = 0; i < this.interpolationSteps; i++) {
+			const t0 = i / this.interpolationSteps;
+			const t1 = (i + 1) / this.interpolationSteps;
+			tValues[vertexIndex] = t0;
+			vertexIndex++;
+			tValues[vertexIndex] = t1;
+			vertexIndex++;
+		}
+		baseGeometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+		baseGeometry.setAttribute("t", new THREE.BufferAttribute(tValues, 1));
+		const geometry = new THREE.InstancedBufferGeometry();
+		geometry.index = baseGeometry.index;
+		geometry.attributes = baseGeometry.attributes;
+		geometry.instanceCount = links.length;
+		const instanceLinkA = new Float32Array(links.length * 2);
+		const instanceLinkB = new Float32Array(links.length * 2);
+		const instanceColorA = new Float32Array(links.length * 3);
+		const instanceColorB = new Float32Array(links.length * 3);
+		const instanceAlphaIndex = new Float32Array(links.length);
+		links.forEach((link, i) => {
+			const sourceId = link.source && typeof link.source === "object" ? link.source.id : link.source;
+			const targetId = link.target && typeof link.target === "object" ? link.target.id : link.target;
+			if (!sourceId || !targetId) {
+				console.warn("Link missing source or target:", link);
+				return;
+			}
+			const sourceIndex = this.nodeIndexMap.get(sourceId);
+			const targetIndex = this.nodeIndexMap.get(targetId);
+			if (sourceIndex === void 0 || targetIndex === void 0) {
+				console.warn("Node not found for link:", link);
+				return;
+			}
+			const sourceX = sourceIndex % nodeTextureSize;
+			const sourceY = Math.floor(sourceIndex / nodeTextureSize);
+			const targetX = targetIndex % nodeTextureSize;
+			const targetY = Math.floor(targetIndex / nodeTextureSize);
+			const sourceNode = nodeMap.get(sourceId);
+			const targetNode = nodeMap.get(targetId);
+			let srcColor;
+			let tgtColor;
+			srcColor = styleRegistry.getNodeStyle(sourceNode?.category).color;
+			tgtColor = styleRegistry.getNodeStyle(targetNode?.category).color;
+			instanceLinkA[i * 2] = sourceX;
+			instanceLinkA[i * 2 + 1] = sourceY;
+			instanceLinkB[i * 2] = targetX;
+			instanceLinkB[i * 2 + 1] = targetY;
+			instanceColorA[i * 3] = srcColor.r;
+			instanceColorA[i * 3 + 1] = srcColor.g;
+			instanceColorA[i * 3 + 2] = srcColor.b;
+			instanceColorB[i * 3] = tgtColor.r;
+			instanceColorB[i * 3 + 1] = tgtColor.g;
+			instanceColorB[i * 3 + 2] = tgtColor.b;
+			instanceAlphaIndex[i] = i;
+			const linkId = `${sourceId}-${targetId}`;
+			linkIndexMap.set(linkId, i);
+		});
+		geometry.setAttribute("instanceLinkA", new THREE.InstancedBufferAttribute(instanceLinkA, 2));
+		geometry.setAttribute("instanceLinkB", new THREE.InstancedBufferAttribute(instanceLinkB, 2));
+		geometry.setAttribute("instanceColorA", new THREE.InstancedBufferAttribute(instanceColorA, 3));
+		geometry.setAttribute("instanceColorB", new THREE.InstancedBufferAttribute(instanceColorB, 3));
+		geometry.setAttribute("instanceAlphaIndex", new THREE.InstancedBufferAttribute(instanceAlphaIndex, 1));
+		return {
+			geometry,
+			linkIndexMap
+		};
+	}
+	/**
+	* Build all link-related textures for simulation
+	* - linkIndicesData: parent node INDEX per link entry (organized by child)
+	* - linkPropertiesData: strength/distance per link entry
+	* - nodeLinkMapData: per-node metadata (startX, startY, count, hasLinks)
+	*/
+	buildLinkTextures(links, nodes, pointsTexSize, groupOrder = [
+		"root",
+		"series",
+		"artwork",
+		"exhibition",
+		"media"
+	]) {
+		const getId = (v) => typeof v === "string" ? v : v?.id ?? "";
+		const counts = new Array(this.nodeIndexMap.size).fill(0);
+		for (const link of links) {
+			if (!link?.source || !link?.target) continue;
+			const tId = getId(link.target);
+			const tIdx = this.nodeIndexMap.get(tId);
+			if (tIdx !== void 0 && tIdx >= 0 && tIdx < counts.length) counts[tIdx] = (counts[tIdx] ?? 0) + 1;
+		}
+		const totalTexels = counts.reduce((a, b) => a + b, 0);
+		const minSize = Math.ceil(Math.sqrt(Math.max(1, totalTexels)));
+		const linksTexSize = Math.max(1, 2 ** Math.ceil(Math.log2(minSize)));
+		const totalLinkTexels = linksTexSize * linksTexSize;
+		const linkIndicesData = new Float32Array(totalLinkTexels * 4).fill(-1);
+		const linkPropertiesData = new Float32Array(totalLinkTexels * 4).fill(0);
+		const infoTotal = pointsTexSize * pointsTexSize;
+		const nodeLinkMapData = new Float32Array(infoTotal * 4).fill(0);
+		let writeIndex = 0;
+		for (let nodeIdx = 0; nodeIdx < counts.length; nodeIdx++) {
+			const count = counts[nodeIdx] || 0;
+			const startX = writeIndex % linksTexSize;
+			const startY = Math.floor(writeIndex / linksTexSize);
+			const infoIdx = nodeIdx * 4;
+			nodeLinkMapData[infoIdx] = startX;
+			nodeLinkMapData[infoIdx + 1] = startY;
+			nodeLinkMapData[infoIdx + 2] = count;
+			nodeLinkMapData[infoIdx + 3] = count > 0 ? 1 : 0;
+			writeIndex += count;
+		}
+		const nodeCategories = Array.from({ length: counts.length }, () => "");
+		for (let i = 0; i < nodes.length; i++) {
+			const node = nodes[i];
+			if (!node) continue;
+			const nodeIdx = this.nodeIndexMap.get(node.id);
+			if (nodeIdx !== void 0 && nodeIdx >= 0) nodeCategories[nodeIdx] = node.category ?? "";
+		}
+		const categoryRankMap = /* @__PURE__ */ new Map();
+		groupOrder.forEach((g, i) => categoryRankMap.set(g, i));
+		let nextRank = groupOrder.length;
+		const nodeCursor = Array.from({ length: counts.length }).fill(0);
+		for (const link of links) {
+			if (!link?.source || !link?.target) continue;
+			const sId = getId(link.source);
+			const tId = getId(link.target);
+			const sIdx = this.nodeIndexMap.get(sId);
+			const tIdx = this.nodeIndexMap.get(tId);
+			if (sIdx === void 0 || tIdx === void 0 || sIdx < 0 || tIdx < 0) continue;
+			const rawStartX = nodeLinkMapData[tIdx * 4] ?? 0;
+			const baseStartTexel = (nodeLinkMapData[tIdx * 4 + 1] ?? 0) * linksTexSize + rawStartX;
+			const offset = nodeCursor[tIdx] || 0;
+			const texelIndex = baseStartTexel + offset;
+			if (texelIndex < totalLinkTexels) {
+				const di = texelIndex * 4;
+				linkIndicesData[di] = sIdx;
+				const category = nodeCategories[tIdx] || "";
+				if (category && !categoryRankMap.has(category)) categoryRankMap.set(category, nextRank++);
+				const rank = categoryRankMap.get(category) ?? 0;
+				const strength = 1 / (rank + 1);
+				const distance = .3 ** rank;
+				linkPropertiesData[di] = strength;
+				linkPropertiesData[di + 1] = distance;
+			}
+			nodeCursor[tIdx] = offset + 1;
+		}
+		return {
+			linkIndicesData,
+			linkPropertiesData,
+			nodeLinkMapData,
+			linksTextureSize: linksTexSize
+		};
+	}
+	/**
+	* Create render material with all uniforms
+	*/
+	createRenderMaterial(nodeTextureSize, alphaTextureSize) {
+		return new THREE.ShaderMaterial({
+			vertexShader: lines_default,
+			fragmentShader: lines_default$1,
+			transparent: true,
+			depthTest: false,
+			depthWrite: false,
+			uniforms: {
+				uPositionsTexture: { value: this.simulationBuffers.getCurrentPositionTexture() },
+				uPositionsTextureSize: { value: new THREE.Vector2(nodeTextureSize, nodeTextureSize) },
+				uAlphaTexture: { value: this.linkOpacity.getCurrentAlphaTexture() },
+				uAlphaTextureSize: { value: new THREE.Vector2(alphaTextureSize, alphaTextureSize) },
+				uNoiseStrength: { value: this.params.noiseStrength },
+				uTime: { value: 0 }
+			}
+		});
+	}
+};
+
+//#endregion
+//#region assets/glsl/points/pickPoint.frag
+var pickPoint_default$1 = "precision mediump float; \r\nvarying float vIndex; \n\nvoid main(){\n\n        vec2 center = vec2(0.5, 0.5);\r\n        vec2 uv = gl_PointCoord - center;\r\n        float dist = length(uv);\n\n        \n        if (dist > 0.4) {\r\n        discard;\r\n        }\n\n        float id = vIndex + 1.0;\r\n        float r = mod(id, 256.0);\r\n        float g = mod(floor(id / 256.0), 256.0);\r\n        float b = mod(floor(id / 65536.0), 256.0);\r\n        gl_FragColor = vec4(r/255.0, g/255.0, b/255.0, 1.0);\r\n}";
+
+//#endregion
+//#region assets/glsl/points/pickPoint.vert
+var pickPoint_default = "attribute vec2 pointIndices;\r\nattribute float scale;\n\nattribute float alphaIndex;\r\nuniform sampler2D uPositionsTexture;\r\nuniform vec2 uPositionsTextureSize;\r\nuniform vec2 uResolution;\r\nuniform float uAspectRatio;\r\nuniform float uPixelRatio;\n\nvarying float vIndex;\n\nvoid main() {\r\n    vIndex = alphaIndex;\n\n    vec2 posUV = (pointIndices + vec2(0.5)) / uPositionsTextureSize;\n\n    vec4 posTex = texture2D(uPositionsTexture, posUV);\r\n    vec3 gpuPos = vec3(posTex.r, posTex.g, posTex.b);\r\n    if(posTex.w < 0.5) {\r\n        \n        gl_PointSize = 0.0;\r\n        gl_Position = vec4(2.0, 2.0, 2.0, 1.0); \r\n        return;\r\n    }\r\n    vec4 mvPosition = modelViewMatrix * vec4(gpuPos, 1.0);\n\n    float distance = 1.0 / max(1e-6, length(mvPosition.xyz));\r\n    gl_PointSize = scale * uPixelRatio * distance;\r\n    gl_Position = projectionMatrix * mvPosition;\r\n    \r\n    }";
+
+//#endregion
+//#region assets/glsl/points/points.frag
+var points_default$1 = "uniform sampler2D pointTexture;\r\nuniform sampler2D uAlphaTexture;\r\nuniform vec2 uTextureSize;\r\nvarying vec3 vColor;\r\nvarying float vAlphaIndex;\r\nvarying float vScale;\r\nvarying vec2 vPointIndices;\n\nvarying float vSelected;\n\nvoid main() {\r\n    \n    vec2 center = vec2(0.5, 0.5);\r\n    vec2 uv = gl_PointCoord - center;\r\n    float dist = length(uv);\n\n    \n    vec2 alphaUV = (vPointIndices + 0.5) / uTextureSize;\r\n    float alpha = texture2D(uAlphaTexture, alphaUV).r;\n\n    \n    if (dist > 0.5) {\r\n        discard;\r\n    }\r\n    vec3 color = vColor ;\n\n    gl_FragColor = vec4(color, alpha);\r\n    #include <colorspace_fragment>\r\n}";
+
+//#endregion
+//#region assets/glsl/points/points.vert
+var points_default = "attribute float scale;\r\nattribute float selected;\r\nattribute float alphaIndex;\r\nattribute vec2 pointIndices;\n\nuniform vec2 uResolution;\r\nuniform float uAspectRatio;\r\nuniform float uPixelRatio;\r\nuniform sampler2D uPositionsTexture;\r\nuniform vec2 uPositionsTextureSize;\n\nvarying float vSelected;\r\nvarying vec3 vColor;\r\nvarying float vAlphaIndex;\r\nvarying float vScale;\r\nvarying vec2 vPointIndices;\n\nvoid main() {\r\n    vColor = color;\r\n    vSelected = selected;\r\n    vScale = scale;\r\n    vAlphaIndex = alphaIndex;\r\n    vPointIndices = pointIndices;\n\n    vec2 posUV = (pointIndices + vec2(0.5)) / uPositionsTextureSize;\n\n    vec4 posTex = texture2D(uPositionsTexture, posUV);\r\n    vec3 gpuPos = vec3(posTex.r, posTex.g, posTex.b);\r\n    bool isActive = posTex.w >= 0.5;\n\n    vec4 mvPosition = modelViewMatrix * vec4(gpuPos, 1.0);\n\n    float distance = 1.0 / length(mvPosition.xyz + 1e-7);\r\n    \r\n    if (!isActive) {\r\n        \n        gl_PointSize = 0.0;\r\n        \n        gl_Position = vec4(2.0, 2.0, 2.0, 1.0); \r\n    } else {\r\n        gl_PointSize = scale * uPixelRatio * distance;\r\n        gl_Position = projectionMatrix * mvPosition;\r\n    }\r\n}";
+
+//#endregion
+//#region rendering/nodes/NodeOpacity.ts
+/**
+* NodeOpacity - Manages per-node opacity using GPU compute
+* 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.renderer = renderer;
+		this.size = size;
+		const params = {
+			minFilter: THREE.NearestFilter,
+			magFilter: THREE.NearestFilter,
+			wrapS: THREE.ClampToEdgeWrapping,
+			wrapT: THREE.ClampToEdgeWrapping,
+			format: THREE.RGBAFormat,
+			type: THREE.FloatType,
+			depthBuffer: false,
+			stencilBuffer: false
+		};
+		this.rtA = new THREE.WebGLRenderTarget(size, size, params);
+		this.rtB = new THREE.WebGLRenderTarget(size, size, params);
+		this.scene = new THREE.Scene();
+		this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		const geo = new THREE.PlaneGeometry(2, 2);
+		this.computeMaterial = new THREE.ShaderMaterial({
+			vertexShader: `
+        void main() {
+          gl_Position = vec4(position, 1.0);
+        }
+      `,
+			fragmentShader: `
+        precision highp float;
+
+        uniform sampler2D uPrev;
+        uniform sampler2D uTarget;
+        uniform float uStep;
+        uniform vec2 uResolution;
+
+        void main() {
+          // compute stable texcoord from pixel coords
+          vec2 uv = gl_FragCoord.xy / uResolution;
+          float prev = texture2D(uPrev, uv).r;
+          float target = texture2D(uTarget, uv).r;
+          
+          // Lerp towards target
+          float nextVal = mix(prev, target, uStep);
+          
+          // Clamp to valid range
+          nextVal = clamp(nextVal, 0.0, 1.0);
+          
+          gl_FragColor = vec4(nextVal, 0.0, 0.0, 1.0);
+        }
+
+      `,
+			uniforms: {
+				uPrev: { value: null },
+				uTarget: { value: null },
+				uStep: { value: .01 },
+				uResolution: { value: new THREE.Vector2(size, size) }
+			},
+			depthTest: false,
+			depthWrite: false
+		});
+		this.copyMaterial = new THREE.ShaderMaterial({
+			vertexShader: this.computeMaterial.vertexShader,
+			fragmentShader: `
+        precision highp float;
+        uniform sampler2D uSrc;
+        uniform vec2 uResolution;
+        void main() {
+          vec2 uv = gl_FragCoord.xy / uResolution;
+          vec4 s = texture2D(uSrc, uv);
+          gl_FragColor = vec4(s.r, 0.0, 0.0, 1.0);
+        }
+      `,
+			uniforms: {
+				uSrc: { value: null },
+				uResolution: { value: new THREE.Vector2(size, size) }
+			},
+			depthTest: false,
+			depthWrite: false
+		});
+		this.quad = new THREE.Mesh(geo, this.computeMaterial);
+		this.scene.add(this.quad);
+		this.targetTex = new THREE.DataTexture(new Float32Array(size * size * 4).fill(0), size, size, THREE.RGBAFormat, THREE.FloatType);
+		this.targetTex.minFilter = THREE.NearestFilter;
+		this.targetTex.magFilter = THREE.NearestFilter;
+		this.targetTex.wrapS = THREE.ClampToEdgeWrapping;
+		this.targetTex.wrapT = THREE.ClampToEdgeWrapping;
+		this.targetTex.flipY = false;
+		this.targetTex.needsUpdate = true;
+	}
+	init(initialAlphaTexture) {
+		this.copyMaterial.uniforms.uSrc.value = initialAlphaTexture;
+		this.copyMaterial.uniforms.uResolution.value.set(this.size, this.size);
+		this.quad.material = this.copyMaterial;
+		const prevRT = this.renderer.getRenderTarget();
+		this.renderer.setRenderTarget(this.rtA);
+		this.renderer.render(this.scene, this.camera);
+		this.renderer.setRenderTarget(this.rtB);
+		this.renderer.render(this.scene, this.camera);
+		this.renderer.setRenderTarget(prevRT);
+		this.ping = 0;
+		this.quad.material = this.computeMaterial;
+	}
+	setTargets(targets) {
+		const total = this.size * this.size;
+		const data = this.targetTex && this.targetTex.image && this.targetTex.image.data.length === total * 4 ? this.targetTex.image.data : new Float32Array(total * 4);
+		for (let i = 0; i < total; i++) {
+			const v = targets[i] ?? 0;
+			const base = i * 4;
+			data[base] = v;
+			data[base + 1] = 0;
+			data[base + 2] = 0;
+			data[base + 3] = 1;
+		}
+		if (this.targetTex) {
+			this.targetTex.image.data = data;
+			this.targetTex.needsUpdate = true;
+		}
+	}
+	runComputePass() {
+		const prevRT = this.getPrevRT();
+		this.computeMaterial.uniforms.uPrev.value = prevRT.texture;
+		if (this.targetTex) this.computeMaterial.uniforms.uTarget.value = this.targetTex;
+		const targetRT = this.getNextRT();
+		this.renderer.setRenderTarget(targetRT);
+		this.renderer.render(this.scene, this.camera);
+		this.renderer.setRenderTarget(null);
+		this.ping = 1 - this.ping;
+	}
+	update() {
+		this.runComputePass();
+	}
+	getCurrentAlphaTexture() {
+		return this.getPrevRT().texture;
+	}
+	/**
+	* Set the step size for alpha transitions
+	* @param step - Step size (default: 0.01)
+	*/
+	setStep(step) {
+		this.computeMaterial.uniforms.uStep.value = step;
+	}
+	getPrevRT() {
+		return this.ping === 0 ? this.rtA : this.rtB;
+	}
+	getNextRT() {
+		return this.ping === 0 ? this.rtB : this.rtA;
+	}
+	dispose() {
+		this.rtA.dispose();
+		this.rtB.dispose();
+		this.copyMaterial.dispose();
+		this.computeMaterial.dispose();
+		this.quad.geometry.dispose();
+		if (this.targetTex) this.targetTex.dispose();
+	}
+};
+
+//#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;
+	}
+	create(nodes, simulationBuffers, pickBuffer) {
+		this.simulationBuffers = simulationBuffers;
+		this.pickBuffer = pickBuffer;
+		const textureSize = simulationBuffers.getTextureSize();
+		const nodeCount = nodes.length;
+		this.buildNodeMapping(nodes);
+		this.nodeOpacity = new NodeOpacity(this.renderer, textureSize);
+		const total = textureSize * textureSize;
+		this.targets = new Float32Array(total).fill(this.params.defaultAlpha);
+		const initialAlphaData = new Float32Array(total * 4);
+		for (let i = 0; i < total; i++) {
+			initialAlphaData[i * 4] = this.params.defaultAlpha;
+			initialAlphaData[i * 4 + 1] = 0;
+			initialAlphaData[i * 4 + 2] = 0;
+			initialAlphaData[i * 4 + 3] = 1;
+		}
+		const initialAlphaTexture = new THREE.DataTexture(initialAlphaData, textureSize, textureSize, THREE.RGBAFormat, THREE.FloatType);
+		initialAlphaTexture.needsUpdate = true;
+		this.nodeOpacity.init(initialAlphaTexture);
+		initialAlphaTexture.dispose();
+		const nodeData = this.createNodeData(nodes, textureSize);
+		staticAssets.setNodeRadii(nodeData.radii, textureSize);
+		staticAssets.setNodeColors(nodeData.colors, textureSize);
+		const geometry = this.createGeometry(nodeData, nodeCount);
+		const material = this.createRenderMaterial(textureSize);
+		this.pickMaterial = this.createPickMaterial(textureSize);
+		this.points = new THREE.Points(geometry, material);
+		this.points.frustumCulled = false;
+		this.points.renderOrder = 999;
+		this.scene.add(this.points);
+		this.clearHighlights();
+	}
+	setPositionTexture(positionTexture) {
+		if (!this.points) return;
+		const material = this.points.material;
+		if (material.uniforms.uPositionsTexture) material.uniforms.uPositionsTexture.value = positionTexture;
+		if (this.pickMaterial?.uniforms.uPositionsTexture) this.pickMaterial.uniforms.uPositionsTexture.value = positionTexture;
+	}
+	pick(pixelX, pixelY, camera) {
+		if (!this.points || !this.pickBuffer || !this.pickMaterial) return -1;
+		const originalMaterial = this.points.material;
+		this.points.material = this.pickMaterial;
+		this.pickBuffer.render(this.scene, camera);
+		this.points.material = originalMaterial;
+		return this.pickBuffer.readIdAt(pixelX, pixelY);
+	}
+	highlight(nodeIds, step = .1) {
+		if (!this.nodeOpacity || !this.simulationBuffers || !this.targets) return;
+		const indices = nodeIds.map((id) => this.nodeIndexMap.get(String(id))).filter((idx) => idx !== void 0);
+		if (indices.length === 0) return;
+		this.targets.fill(this.params.dimmedAlpha);
+		indices.forEach((idx) => {
+			if (idx < this.targets.length) this.targets[idx] = this.params.highlightAlpha;
+		});
+		this.nodeOpacity.setStep(step);
+		this.nodeOpacity.setTargets(this.targets);
+	}
+	clearHighlights(step = .1) {
+		if (!this.nodeOpacity || !this.simulationBuffers || !this.targets) return;
+		this.targets.fill(this.params.defaultAlpha);
+		this.nodeOpacity.setStep(step);
+		this.nodeOpacity.setTargets(this.targets);
+	}
+	/**
+	* Update node opacity (called every frame)
+	*/
+	updateOpacity() {
+		if (!this.nodeOpacity) return;
+		this.nodeOpacity.update();
+		if (this.points && this.points.material) {
+			const material = this.points.material;
+			if (material.uniforms.uAlphaTexture) material.uniforms.uAlphaTexture.value = this.nodeOpacity.getCurrentAlphaTexture();
+		}
+	}
+	resize(width, height) {
+		if (!this.points) return;
+		const material = this.points.material;
+		if (material.uniforms.uResolution) material.uniforms.uResolution.value.set(width, height);
+		if (material.uniforms.uAspectRatio) material.uniforms.uAspectRatio.value = width / height;
+		if (material.uniforms.uPixelRatio) material.uniforms.uPixelRatio.value = window.devicePixelRatio;
+		if (this.pickMaterial) {
+			if (this.pickMaterial.uniforms.uResolution) this.pickMaterial.uniforms.uResolution.value.set(width, height);
+			if (this.pickMaterial.uniforms.uAspectRatio) this.pickMaterial.uniforms.uAspectRatio.value = width / height;
+			if (this.pickMaterial.uniforms.uPixelRatio) this.pickMaterial.uniforms.uPixelRatio.value = window.devicePixelRatio;
+		}
+	}
+	dispose() {
+		if (this.points) {
+			this.scene.remove(this.points);
+			this.points.geometry.dispose();
+			this.points.material.dispose();
+			this.points = null;
+		}
+		this.pickMaterial?.dispose();
+		this.nodeOpacity?.dispose();
+		this.nodeIndexMap.clear();
+		this.idArray = [];
+		this.simulationBuffers = null;
+		this.pickBuffer = null;
+	}
+	buildNodeMapping(nodes) {
+		this.nodeIndexMap.clear();
+		this.idArray = [];
+		nodes.forEach((node, i) => {
+			this.nodeIndexMap.set(String(node.id), i);
+			this.idArray[i] = node.id;
+		});
+	}
+	/**
+	* Create all node data in one pass
+	* Returns: colors, sizes, radii, nodeIds, pointIndices, alphaIndex
+	*/
+	createNodeData(nodes, textureSize) {
+		const count = nodes.length;
+		const totalTexels = textureSize * textureSize;
+		const colorBuffer = new Float32Array(count * 3);
+		const sizeBuffer = new Float32Array(count);
+		const pointIndices = new Float32Array(count * 2);
+		const alphaIndex = new Float32Array(count);
+		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;
+		nodes.forEach((node, i) => {
+			const style = styleRegistry.getNodeStyle(node.category);
+			colorBuffer[i * 3] = style.color.r;
+			colorBuffer[i * 3 + 1] = style.color.g;
+			colorBuffer[i * 3 + 2] = style.color.b;
+			sizeBuffer[i] = style.size;
+			const x = i % textureSize;
+			const y = Math.floor(i / textureSize);
+			pointIndices[i * 2] = x;
+			pointIndices[i * 2 + 1] = y;
+			alphaIndex[i] = i;
+			radii[i] = style.size * window.devicePixelRatio * pixelToWorldRatio / 2;
+			colors[i * 4] = style.color.r;
+			colors[i * 4 + 1] = style.color.g;
+			colors[i * 4 + 2] = style.color.b;
+			colors[i * 4 + 3] = 1;
+		});
+		return {
+			colorBuffer,
+			sizeBuffer,
+			pointIndices,
+			alphaIndex,
+			radii,
+			colors
+		};
+	}
+	createGeometry(nodeData, count) {
+		const geometry = new THREE.BufferGeometry();
+		geometry.setAttribute("color", new THREE.BufferAttribute(nodeData.colorBuffer, 3));
+		geometry.setAttribute("scale", new THREE.BufferAttribute(nodeData.sizeBuffer, 1));
+		geometry.setAttribute("pointIndices", new THREE.BufferAttribute(nodeData.pointIndices, 2));
+		geometry.setAttribute("alphaIndex", new THREE.BufferAttribute(nodeData.alphaIndex, 1));
+		geometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(count * 3), 3));
+		return geometry;
+	}
+	createRenderMaterial(textureSize) {
+		return new THREE.ShaderMaterial({
+			vertexShader: points_default,
+			fragmentShader: points_default$1,
+			vertexColors: true,
+			transparent: true,
+			depthTest: true,
+			depthWrite: true,
+			side: THREE.DoubleSide,
+			uniforms: {
+				uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
+				uAspectRatio: { value: window.innerWidth / window.innerHeight },
+				uPixelRatio: { value: window.devicePixelRatio },
+				pointTexture: { value: this.texture },
+				uAlphaTexture: { value: this.nodeOpacity.getCurrentAlphaTexture() },
+				uTextureSize: { value: new THREE.Vector2(textureSize, textureSize) },
+				uPositionsTexture: { value: this.simulationBuffers.getCurrentPositionTexture() },
+				uPositionsTextureSize: { value: new THREE.Vector2(textureSize, textureSize) }
+			}
+		});
+	}
+	createPickMaterial(textureSize) {
+		return new THREE.ShaderMaterial({
+			vertexShader: pickPoint_default,
+			fragmentShader: pickPoint_default$1,
+			uniforms: {
+				uPositionsTexture: { value: this.simulationBuffers.getCurrentPositionTexture() },
+				uPositionsTextureSize: { value: new THREE.Vector2(textureSize, textureSize) },
+				uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
+				uAspectRatio: { value: window.innerWidth / window.innerHeight },
+				uPixelRatio: { value: window.devicePixelRatio }
+			},
+			blending: THREE.NoBlending,
+			depthTest: true,
+			depthWrite: true,
+			transparent: true
+		});
+	}
+};
+
+//#endregion
+//#region rendering/GraphScene.ts
+/**
+* GraphScene - Manages the 3D scene, camera, and renderers
+* Responsibilities:
+* - Scene setup and lifecycle
+* - Node and link rendering
+* - Camera control
+* - Tooltip management
+* - Mode application (visual changes)
+*/
+var GraphScene = class {
+	scene;
+	renderer;
+	camera;
+	nodeRenderer = null;
+	clock = new THREE.Clock();
+	linkRenderer = null;
+	constructor(canvas, cameraConfig) {
+		this.scene = new THREE.Scene();
+		this.scene.background = new THREE.Color(0);
+		this.renderer = new THREE.WebGLRenderer({
+			canvas,
+			antialias: true,
+			alpha: true,
+			depth: true
+		});
+		this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+		this.renderer.setSize(window.innerWidth, window.innerHeight);
+		this.camera = new CameraController(this.renderer.domElement, cameraConfig);
+	}
+	/**
+	* Initialize scene with nodes and links
+	*/
+	create(nodes, links, simulationBuffers, pickBuffer, groupOrder) {
+		this.nodeRenderer = new NodesRenderer(this.scene, this.renderer);
+		this.nodeRenderer.create(nodes, simulationBuffers, pickBuffer);
+		this.linkRenderer = new LinksRenderer(this.scene, this.renderer);
+		this.linkRenderer.create(links, nodes, simulationBuffers);
+	}
+	/**
+	* Apply visual mode (colors, sizes, camera position)
+	*/
+	applyMode(mode, options = {}) {
+		const duration = options.transitionDuration ?? 1;
+		options.cameraTransitionDuration;
+		switch (mode) {
+			case "default":
+				this.applyDefaultMode(duration);
+				break;
+			default: console.warn(`Unknown mode: ${mode}`);
+		}
+	}
+	/**
+	* Update position textures from simulation
+	*/
+	updatePositions(positionTexture) {
+		this.nodeRenderer?.setPositionTexture(positionTexture);
+		this.linkRenderer?.setPositionTexture(positionTexture);
+	}
+	/**
+	* Update time-based uniforms (called each frame with elapsed time)
+	*/
+	update(elapsedTime) {
+		this.linkRenderer?.update(elapsedTime);
+	}
+	/**
+	* GPU picking at canvas coordinates
+	*/
+	pick(pixelX, pixelY) {
+		if (!this.nodeRenderer) return -1;
+		return this.nodeRenderer.pick(pixelX, pixelY, this.camera.camera);
+	}
+	/**
+	* Render the scene
+	*/
+	render() {
+		const delta = this.clock.getDelta();
+		this.camera.update(delta);
+		this.nodeRenderer?.updateOpacity();
+		this.linkRenderer?.updateOpacity();
+		this.renderer.render(this.scene, this.camera.camera);
+	}
+	/**
+	* Handle window resize
+	*/
+	resize(width, height) {
+		this.camera.resize(width, height);
+		this.nodeRenderer?.resize(width, height);
+		this.linkRenderer?.resize(width, height);
+		this.renderer.setSize(width, height);
+	}
+	/**
+	* Cleanup all resources
+	*/
+	dispose() {
+		this.nodeRenderer?.dispose();
+		this.nodeRenderer = null;
+		this.camera.dispose();
+		this.scene.clear();
+	}
+	applyDefaultMode(duration) {}
+	getCamera() {
+		return this.camera;
+	}
+	getNodeRenderer() {
+		return this.nodeRenderer;
+	}
+	getLinkRenderer() {
+		return this.linkRenderer;
+	}
+};
+
+//#endregion
+//#region assets/glsl/force-sim/attractor.frag
+var attractor_default = "#ifdef GL_ES\r\nprecision highp float;\r\n#endif\n\nuniform sampler2D uPositionsTexture;\r\nuniform sampler2D uVelocityTexture;\r\nuniform sampler2D uNodeCategoriesTexture;    \nuniform sampler2D uAttractorsTexture;         \nuniform sampler2D uAttractorCategoriesTexture; \nuniform sampler2D uAttractorParamsTexture;    \nuniform float uTextureSize;\r\nuniform float uAttractorCount;\r\nuniform float uAttractorStrength;  \nuniform float uAlpha;\r\nuniform bool uIs3D;\n\nvarying vec2 vUv;\n\nconst float ATTRACT_ALL = -1.0;\n\nvoid main() {\r\n  vec4 currentPosition = texture2D(uPositionsTexture, vUv);\r\n  vec3 velocity = texture2D(uVelocityTexture, vUv).xyz;\r\n  vec3 pos = currentPosition.xyz;\r\n  \r\n  \n  vec4 nodeCategories = texture2D(uNodeCategoriesTexture, vUv);\r\n  \r\n  vec3 totalForce = vec3(0.0);\r\n  \r\n  \n  for (float i = 0.0; i < 32.0; i++) {\r\n    if (i >= uAttractorCount) break;\r\n    \r\n    \n    float u = (i + 0.5) / 32.0;\r\n    vec4 attractorData = texture2D(uAttractorsTexture, vec2(u, 0.5));\r\n    vec4 attractorCategories = texture2D(uAttractorCategoriesTexture, vec2(u, 0.5));\r\n    vec4 attractorParams = texture2D(uAttractorParamsTexture, vec2(u, 0.5));\r\n    \r\n    vec3 attractorPos = attractorData.xyz;\r\n    float attractorStrength = attractorParams.r;\r\n    \n    \r\n    \n    \n    bool shouldAttract = false;\r\n    \r\n    if (attractorCategories.r < -1.5) {\r\n      \n      shouldAttract = true;\r\n    } else {\r\n      \n      for (int n = 0; n < 4; n++) {\r\n        float nc = (n == 0) ? nodeCategories.r : (n == 1) ? nodeCategories.g : (n == 2) ? nodeCategories.b : nodeCategories.a;\r\n        if (nc < -0.5) continue; \n\n        if (attractorCategories.r >= 0.0 && abs(attractorCategories.r - nc) < 0.5) { shouldAttract = true; break; }\r\n        if (attractorCategories.g >= 0.0 && abs(attractorCategories.g - nc) < 0.5) { shouldAttract = true; break; }\r\n        if (attractorCategories.b >= 0.0 && abs(attractorCategories.b - nc) < 0.5) { shouldAttract = true; break; }\r\n        if (attractorCategories.a >= 0.0 && abs(attractorCategories.a - nc) < 0.5) { shouldAttract = true; break; }\r\n      }\r\n    }\r\n    \r\n    if (!shouldAttract) continue;\r\n    \r\n    \n    vec3 toAttractor = attractorPos - pos;\r\n    if (!uIs3D) {\r\n      toAttractor.z = 0.0;\r\n    }\r\n    \r\n    float dist = length(toAttractor);\r\n    vec3 direction = dist > 0.001 ? toAttractor / dist : vec3(0.0);\r\n    \r\n    \n    \n    \n    float effectiveDist = min(dist, 10.0);\r\n    \r\n    \n    float forceMagnitude = attractorStrength * uAttractorStrength * effectiveDist;\n\n    totalForce += direction * forceMagnitude;\r\n  }\r\n  \r\n  \n  velocity += totalForce * uAlpha;\r\n  \r\n  gl_FragColor = vec4(velocity, 0.0);\r\n}";
+
+//#endregion
+//#region assets/glsl/force-sim/compute.vert
+var compute_default = "varying vec2 vUv;\n\nvoid main() {\r\n  vUv = uv;\r\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n}";
+
+//#endregion
+//#region types/iAttractor.ts
+/**
+* Apply defaults to an attractor
+*/
+function resolveAttractor(attractor) {
+	return {
+		id: attractor.id,
+		position: {
+			x: attractor.position.x,
+			y: attractor.position.y,
+			z: attractor.position.z
+		},
+		groups: [...attractor.groups || []],
+		strength: attractor.strength ?? 1,
+		radius: attractor.radius ?? 0
+	};
+}
+
+//#endregion
+//#region simulation/BasePass.ts
+/**
+* Base class for GPU force simulation passes
+* Each pass operates on simulation buffers and can read from static assets
+*/
+var BasePass = class {
+	material = null;
+	enabled = true;
+	/**
+	* Execute the pass (renders to current velocity target)
+	*/
+	execute(context) {
+		if (!this.enabled || !this.material) return;
+		this.updateUniforms(context);
+		this.render(context);
+	}
+	/**
+	* Render the compute shader
+	*/
+	render(context) {
+		if (!this.material) return;
+		const mesh = new THREE.Mesh(context.quad, this.material);
+		context.scene.clear();
+		context.scene.add(mesh);
+		context.renderer.render(context.scene, context.camera);
+		context.scene.remove(mesh);
+	}
+	/**
+	* Create a shader material helper
+	*/
+	createMaterial(vertexShader, fragmentShader, uniforms) {
+		return new THREE.ShaderMaterial({
+			uniforms,
+			vertexShader,
+			fragmentShader,
+			transparent: false,
+			depthTest: false,
+			depthWrite: false
+		});
+	}
+	/**
+	* Safe uniform setter - avoids TypeScript strict null check issues
+	*/
+	setUniform(name, value) {
+		if (this.material?.uniforms[name]) this.material.uniforms[name].value = value;
+	}
+	/**
+	* Enable or disable this pass
+	*/
+	setEnabled(enabled) {
+		this.enabled = enabled;
+	}
+	/**
+	* Check if pass is enabled
+	*/
+	isEnabled() {
+		return this.enabled;
+	}
+	/**
+	* Get the material for external access
+	*/
+	getMaterial() {
+		return this.material;
+	}
+	/**
+	* Cleanup resources
+	*/
+	dispose() {
+		this.material?.dispose();
+		this.material = null;
+	}
+};
+
+//#endregion
+//#region simulation/passes/AttractorPass.ts
+const MAX_ATTRACTORS = 32;
+const MAX_GROUPS = 4;
+/**
+* Attractor force pass - attracts nodes to attractor points based on group membership
+*
+* Usage:
+*   attractorPass.setAttractors([
+*     { id: 'center', position: { x: 0, y: 0, z: 0 }, categories: ['root'] }, // categories acts as groups
+*     { id: 'left', position: { x: -100, y: 0, z: 0 }, categories: ['artwork', 'series'] }
+*   ])
+*/
+var AttractorPass = class extends BasePass {
+	attractors = [];
+	groupMap = /* @__PURE__ */ new Map();
+	attractorsTexture = null;
+	attractorGroupsTexture = null;
+	attractorParamsTexture = null;
+	nodeGroupsTexture = null;
+	getName() {
+		return "attractor";
+	}
+	initMaterial(context) {
+		this.createAttractorTextures();
+		this.material = this.createMaterial(compute_default, attractor_default, {
+			uPositionsTexture: { value: null },
+			uVelocityTexture: { value: null },
+			uNodeCategoriesTexture: { value: this.nodeGroupsTexture },
+			uAttractorsTexture: { value: this.attractorsTexture },
+			uAttractorCategoriesTexture: { value: this.attractorGroupsTexture },
+			uAttractorParamsTexture: { value: this.attractorParamsTexture },
+			uTextureSize: { value: context.textureSize },
+			uAttractorCount: { value: 0 },
+			uAttractorStrength: { value: 1 },
+			uAlpha: { value: 0 },
+			uIs3D: { value: false }
+		});
+	}
+	updateUniforms(context) {
+		const c = context.config;
+		this.setUniform("uPositionsTexture", context.simBuffers.getCurrentPositionTexture());
+		this.setUniform("uVelocityTexture", context.simBuffers.getCurrentVelocityTexture());
+		this.setUniform("uNodeCategoriesTexture", this.nodeGroupsTexture);
+		this.setUniform("uAttractorsTexture", this.attractorsTexture);
+		this.setUniform("uAttractorCategoriesTexture", this.attractorGroupsTexture);
+		this.setUniform("uAttractorParamsTexture", this.attractorParamsTexture);
+		this.setUniform("uAttractorCount", this.attractors.length);
+		this.setUniform("uAttractorStrength", c.attractorStrength ?? 1);
+		this.setUniform("uAlpha", c.alpha);
+		this.setUniform("uIs3D", c.is3D);
+	}
+	/**
+	* Set attractors for the simulation
+	*/
+	setAttractors(attractors) {
+		this.attractors = attractors.slice(0, MAX_ATTRACTORS).map(resolveAttractor);
+		this.updateAttractorTextures();
+	}
+	/**
+	* Add a single attractor
+	*/
+	addAttractor(attractor) {
+		if (this.attractors.length >= MAX_ATTRACTORS) {
+			console.warn(`[AttractorPass] Maximum ${MAX_ATTRACTORS} attractors supported`);
+			return;
+		}
+		this.attractors.push(resolveAttractor(attractor));
+		this.updateAttractorTextures();
+	}
+	/**
+	* Remove an attractor by ID
+	*/
+	removeAttractor(id) {
+		this.attractors = this.attractors.filter((a) => a.id !== id);
+		this.updateAttractorTextures();
+	}
+	/**
+	* Update an existing attractor's position
+	*/
+	updateAttractorPosition(id, position) {
+		const attractor = this.attractors.find((a) => a.id === id);
+		if (attractor) {
+			attractor.position.x = position.x;
+			attractor.position.y = position.y;
+			attractor.position.z = position.z;
+			this.updateAttractorTextures();
+		}
+	}
+	/**
+	* Get current attractors
+	*/
+	getAttractors() {
+		return this.attractors;
+	}
+	/**
+	* Set node groups from graph data
+	* Call this when graph data changes or grouping criteria changes
+	*/
+	setNodeGroups(groups, textureSize) {
+		this.groupMap.clear();
+		let nextIndex = 0;
+		for (const nodeGroups of groups) for (const group of nodeGroups) if (group && !this.groupMap.has(group)) this.groupMap.set(group, nextIndex++);
+		const totalTexels = textureSize * textureSize;
+		const data = new Float32Array(totalTexels * 4);
+		data.fill(-1);
+		for (let i = 0; i < groups.length && i < totalTexels; i++) {
+			const nodeGroups = groups[i];
+			const baseIdx = i * 4;
+			for (let j = 0; j < 4; j++) if (j < nodeGroups.length) {
+				const group = nodeGroups[j];
+				data[baseIdx + j] = group ? this.groupMap.get(group) ?? -1 : -1;
+			}
+		}
+		this.nodeGroupsTexture?.dispose();
+		this.nodeGroupsTexture = new THREE.DataTexture(data, textureSize, textureSize, THREE.RGBAFormat, THREE.FloatType);
+		this.nodeGroupsTexture.needsUpdate = true;
+		this.nodeGroupsTexture.minFilter = THREE.NearestFilter;
+		this.nodeGroupsTexture.magFilter = THREE.NearestFilter;
+		this.updateAttractorTextures();
+	}
+	/**
+	* Get the group map (group name -> index)
+	*/
+	getGroupMap() {
+		return new Map(this.groupMap);
+	}
+	createAttractorTextures() {
+		const attractorData = new Float32Array(MAX_ATTRACTORS * 4);
+		this.attractorsTexture = new THREE.DataTexture(attractorData, MAX_ATTRACTORS, 1, THREE.RGBAFormat, THREE.FloatType);
+		this.attractorsTexture.needsUpdate = true;
+		this.attractorsTexture.minFilter = THREE.NearestFilter;
+		this.attractorsTexture.magFilter = THREE.NearestFilter;
+		const groupData = new Float32Array(MAX_ATTRACTORS * 4).fill(-1);
+		this.attractorGroupsTexture = new THREE.DataTexture(groupData, MAX_ATTRACTORS, 1, THREE.RGBAFormat, THREE.FloatType);
+		this.attractorGroupsTexture.needsUpdate = true;
+		this.attractorGroupsTexture.minFilter = THREE.NearestFilter;
+		this.attractorGroupsTexture.magFilter = THREE.NearestFilter;
+		const paramsData = new Float32Array(MAX_ATTRACTORS * 4).fill(0);
+		this.attractorParamsTexture = new THREE.DataTexture(paramsData, MAX_ATTRACTORS, 1, THREE.RGBAFormat, THREE.FloatType);
+		this.attractorParamsTexture.needsUpdate = true;
+		this.attractorParamsTexture.minFilter = THREE.NearestFilter;
+		this.attractorParamsTexture.magFilter = THREE.NearestFilter;
+		this.nodeGroupsTexture = null;
+	}
+	updateAttractorTextures() {
+		if (!this.attractorsTexture || !this.attractorGroupsTexture || !this.attractorParamsTexture) return;
+		const attractorData = this.attractorsTexture.image.data;
+		const groupData = this.attractorGroupsTexture.image.data;
+		const paramsData = this.attractorParamsTexture.image.data;
+		attractorData.fill(0);
+		groupData.fill(-1);
+		paramsData.fill(0);
+		for (let i = 0; i < this.attractors.length; i++) {
+			const attractor = this.attractors[i];
+			if (!attractor) continue;
+			const baseIdx = i * 4;
+			attractorData[baseIdx] = attractor.position.x;
+			attractorData[baseIdx + 1] = attractor.position.y;
+			attractorData[baseIdx + 2] = attractor.position.z;
+			attractorData[baseIdx + 3] = 0;
+			paramsData[baseIdx] = attractor.strength;
+			paramsData[baseIdx + 1] = attractor.radius;
+			if (attractor.groups.length === 0) groupData[baseIdx] = -2;
+			else for (let j = 0; j < Math.min(attractor.groups.length, MAX_GROUPS); j++) {
+				const groupName = attractor.groups[j];
+				if (groupName) {
+					const groupIndex = this.groupMap.get(groupName);
+					groupData[baseIdx + j] = groupIndex !== void 0 ? groupIndex : -1;
+				}
+			}
+		}
+		this.attractorsTexture.needsUpdate = true;
+		this.attractorGroupsTexture.needsUpdate = true;
+		this.attractorParamsTexture.needsUpdate = true;
+	}
+	dispose() {
+		super.dispose();
+		this.attractorsTexture?.dispose();
+		this.attractorGroupsTexture?.dispose();
+		this.attractorParamsTexture?.dispose();
+		this.nodeGroupsTexture?.dispose();
+		this.attractorsTexture = null;
+		this.attractorGroupsTexture = null;
+		this.attractorParamsTexture = null;
+		this.nodeGroupsTexture = null;
+	}
+};
+
+//#endregion
+//#region assets/glsl/force-sim/collision.frag
+var collision_default = "#ifdef GL_ES\r\nprecision highp float;\r\n#endif\n\nuniform sampler2D uPositionsTexture;\r\nuniform sampler2D uVelocityTexture;\r\nuniform float uTextureSize;\r\nuniform float uAlpha; \nuniform float uMaxDistance; \nuniform float uCollisionStrength;\r\nuniform sampler2D uRadiiTexture;\n\nvarying vec2 vUv;\n\nfloat rand(vec2 co){\r\n  return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453);\r\n}\n\nvoid main() {\r\n  vec4 currentPosition = texture2D(uPositionsTexture, vUv);\r\n  if(currentPosition.w < 0.5) discard;\r\n  vec2 pos = currentPosition.xy;\r\n  vec2 velocity = texture2D(uVelocityTexture, vUv).xy;\r\n  float particleIndex = floor(vUv.y * uTextureSize) * uTextureSize + floor(vUv.x * uTextureSize);\n\n  float texStep = 1.0 / uTextureSize;\r\n  float halfTex = 0.5 * texStep;\r\n  float eps = 1e-6;\r\n  float steepness = 1.4;\n\n  float r1 = texture2D(uRadiiTexture, vUv).r;\r\n  vec2 push = vec2(0.0);\r\n  int count = 0;\n\n  for (float y = 0.0; y < 1.0; y += texStep) {\r\n    for (float x = 0.0; x < 1.0; x += texStep) {\r\n      vec2 otherUV = vec2(x + halfTex, y + halfTex);\r\n      float otherIndex = floor(y * uTextureSize) * uTextureSize + floor(x * uTextureSize);\n\n      vec4 otherPosition = texture2D(uPositionsTexture, otherUV);\r\n      \r\n      \n      if (otherPosition.w < 1.5) continue;\n\n      vec2 otherPos = otherPosition.xy;\n\n      vec2 delta = pos - otherPos;\r\n      float dist = length(delta);\r\n\n      float r2 = texture2D(uRadiiTexture, otherUV).r;\r\n      float rsum = r1 + r2;\r\n      \r\n      if (dist < rsum && dist > eps) {\r\n        float normalizedDist = dist / rsum; \r\n        float exponentialFalloff = exp(-normalizedDist * steepness); \r\n        vec2 direction = delta / dist;\r\n        push += direction * exponentialFalloff * uCollisionStrength;\r\n        count++;\r\n      }\r\n    }\r\n  }\n\n    if (count > 0) {\r\n    push /= float(count);\r\n    float pushMagnitude = length(push);\r\n    float maxPush = 0.05; \r\n      push = normalize(push) * maxPush;\r\n      velocity += push; \n  }\r\n    \r\n  gl_FragColor = vec4(velocity.xy, 0.0, 1.0);\r\n}";
+
+//#endregion
+//#region simulation/passes/CollisionPass.ts
+/**
+* Collision force pass - prevents nodes from overlapping
+* Reads configuration directly from context.config
+*/
+var CollisionPass = class extends BasePass {
+	getName() {
+		return "collision";
+	}
+	initMaterial(context) {
+		this.material = this.createMaterial(compute_default, collision_default, {
+			uPositionsTexture: { value: null },
+			uVelocityTexture: { value: null },
+			uTextureSize: { value: context.textureSize },
+			uRadiiTexture: { value: context.assets.getNodeRadiiTexture() },
+			uCollisionStrength: { value: 0 },
+			uCollisionRadius: { value: 0 },
+			uAlpha: { value: 0 },
+			uMaxDistance: { value: 0 },
+			uIs3D: { value: true }
+		});
+	}
+	updateUniforms(context) {
+		const c = context.config;
+		this.setUniform("uPositionsTexture", context.simBuffers.getCurrentPositionTexture());
+		this.setUniform("uVelocityTexture", context.simBuffers.getCurrentVelocityTexture());
+		this.setUniform("uCollisionStrength", c.collisionStrength);
+		this.setUniform("uCollisionRadius", c.collisionRadius);
+		this.setUniform("uAlpha", c.alpha);
+		this.setUniform("uMaxDistance", c.collisionMaxDistance);
+		this.setUniform("uIs3D", c.is3D);
+	}
+};
+
+//#endregion
+//#region assets/glsl/force-sim/drag.frag
+var drag_default = "precision highp float;\n\nuniform sampler2D uPositionsTexture;\r\nuniform sampler2D uVelocityTexture;\r\nuniform vec2 uDraggedUV;   \r\nuniform vec3 uDragTarget;\r\nuniform float uDragStrength;\r\nuniform float uDeltaTime;\r\nvarying vec2 vUv;\n\nvoid main() {\r\n  vec3 currentVel = texture2D(uVelocityTexture, vUv).xyz;\r\n  vec3 outVel = currentVel;\n\n  float texSize = float(textureSize(uPositionsTexture, 0).x);\r\n  float eps = 0.5 / texSize;\r\n  float distUV = distance(vUv, uDraggedUV);\n\n  \n  if (distUV < eps) {\r\n    vec3 pos = texture2D(uPositionsTexture, vUv).xyz;\r\n    vec3 diff = uDragTarget - pos;\r\n    \r\n    \n    \n    vec3 desiredVelocity = diff / max(uDeltaTime, 0.001);\r\n    \r\n    \n    \n    outVel = desiredVelocity * uDragStrength ;\r\n  }\n\n  gl_FragColor = vec4(outVel, 1.0);\r\n}";
+
+//#endregion
+//#region simulation/passes/DragPass.ts
+/**
+* Drag force pass - user interaction dragging
+* Reads configuration from context.config, maintains drag state internally
+*/
+var DragPass = class extends BasePass {
+	draggedIndex = null;
+	dragUV = null;
+	dragTarget = new THREE.Vector3(0, 0, 0);
+	getName() {
+		return "drag";
+	}
+	initMaterial(context) {
+		this.material = this.createMaterial(compute_default, drag_default, {
+			uPositionsTexture: { value: null },
+			uVelocityTexture: { value: null },
+			uDraggedUV: { value: new THREE.Vector2(-1, -1) },
+			uDragTarget: { value: new THREE.Vector3(0, 0, 0) },
+			uDragStrength: { value: 0 },
+			uTextureSize: { value: context.textureSize },
+			uDeltaTime: { value: 0 }
+		});
+	}
+	updateUniforms(context) {
+		const c = context.config;
+		this.setUniform("uPositionsTexture", context.simBuffers.getCurrentPositionTexture());
+		this.setUniform("uVelocityTexture", context.simBuffers.getCurrentVelocityTexture());
+		this.setUniform("uDraggedUV", this.dragUV || new THREE.Vector2(-1, -1));
+		this.setUniform("uDragTarget", this.dragTarget);
+		this.setUniform("uDragStrength", c.dragStrength);
+		this.setUniform("uDeltaTime", c.deltaTime);
+	}
+	startDrag(index, targetWorldPos, textureSize) {
+		this.draggedIndex = index;
+		this.dragUV = this.indexToUV(index, textureSize);
+		this.dragTarget.copy(targetWorldPos);
+		this.setEnabled(true);
+	}
+	updateDrag(targetWorldPos) {
+		if (this.draggedIndex === null) return;
+		this.dragTarget.copy(targetWorldPos);
+	}
+	endDrag() {
+		this.draggedIndex = null;
+		this.dragUV = null;
+		this.setEnabled(false);
+	}
+	isDragging() {
+		return this.draggedIndex !== null;
+	}
+	indexToUV(index, textureSize) {
+		const x = (index % textureSize + .5) / textureSize;
+		const y = (Math.floor(index / textureSize) + .5) / textureSize;
+		return new THREE.Vector2(x, y);
+	}
+};
+
+//#endregion
+//#region assets/glsl/force-sim/elastic.frag
+var elastic_default = "#ifdef GL_ES\r\nprecision highp float;\r\n#endif\n\nuniform sampler2D uPositionsTexture;\r\nuniform sampler2D uVelocityTexture;\r\nuniform sampler2D uOriginalPositionsTexture;\r\nuniform float uElasticStrength;\r\nuniform float uAlpha;\n\nvarying vec2 vUv;\n\nvoid main() {\r\n  vec4 currentPosition = texture2D(uPositionsTexture, vUv);\r\n  vec3 currentVelocity = texture2D(uVelocityTexture, vUv).xyz;\r\n  vec4 originalPosition = texture2D(uOriginalPositionsTexture, vUv);\n\n  \n  vec3 displacement = originalPosition.xyz - currentPosition.xyz;\r\n  float distance = length(displacement);\r\n    \r\n  \n  vec3 force = vec3(0.0);\r\n  if (distance > 0.0) {\r\n    vec3 direction = displacement / distance; \n    \n    force = direction * distance * uElasticStrength;\r\n  }\r\n  \r\n  \n  vec3 newVelocity = currentVelocity + force * uAlpha;\r\n  \r\n  gl_FragColor = vec4(newVelocity, 1.0);\r\n}";
+
+//#endregion
+//#region simulation/passes/ElasticPass.ts
+/**
+* Elastic force pass - spring to original position
+* Reads configuration directly from context.config
+*/
+var ElasticPass = class extends BasePass {
+	getName() {
+		return "elastic";
+	}
+	initMaterial(context) {
+		this.material = this.createMaterial(compute_default, elastic_default, {
+			uPositionsTexture: { value: null },
+			uVelocityTexture: { value: null },
+			uOriginalPositionsTexture: { value: context.simBuffers.getOriginalPositionTexture() },
+			uElasticStrength: { value: 0 },
+			uAlpha: { value: 0 }
+		});
+	}
+	updateUniforms(context) {
+		const c = context.config;
+		this.setUniform("uPositionsTexture", context.simBuffers.getCurrentPositionTexture());
+		this.setUniform("uVelocityTexture", context.simBuffers.getCurrentVelocityTexture());
+		this.setUniform("uOriginalPositionsTexture", context.simBuffers.getOriginalPositionTexture());
+		this.setUniform("uElasticStrength", c.elasticStrength);
+		this.setUniform("uAlpha", c.alpha);
+	}
+};
+
+//#endregion
+//#region assets/glsl/force-sim/gravity.frag
+var gravity_default = "#ifdef GL_ES\r\nprecision highp float;\r\n#endif\n\nuniform sampler2D uPositionsTexture;\r\nuniform sampler2D uVelocityTexture;\r\nuniform float uGravity;\r\nuniform float uAlpha;\r\nuniform float uSpaceSize;\r\nuniform float uTime; \n\nvarying vec2 vUv;\n\nvoid main() {\r\n  vec4 currentPosition = texture2D(uPositionsTexture, vUv);\r\n  vec2 velocity = texture2D(uVelocityTexture, vUv).xy;\r\n  \r\n  \n  vec2 pos = currentPosition.xy;\r\n  \r\n  \n  vec2 center = vec2(0.0);\r\n  \r\n  \n  vec2 toCenter = center - pos;\r\n  float distToCenter = length(toCenter);\r\n  \r\n  \n  if (distToCenter > 0.0) {\r\n    velocity += normalize(toCenter) * uAlpha * distToCenter;\r\n  }\r\n  \r\n  gl_FragColor = vec4(velocity, 0.0, 0.0);\r\n}";
+
+//#endregion
+//#region simulation/passes/GravityPass.ts
+/**
+* Gravity force pass - attracts nodes to center
+* Reads configuration directly from context.config
+*/
+var GravityPass = class extends BasePass {
+	getName() {
+		return "gravity";
+	}
+	initMaterial(context) {
+		this.material = this.createMaterial(compute_default, gravity_default, {
+			uPositionsTexture: { value: null },
+			uVelocityTexture: { value: null },
+			uGravity: { value: 0 },
+			uAlpha: { value: 0 },
+			uSpaceSize: { value: 0 },
+			uTime: { value: 0 }
+		});
+	}
+	updateUniforms(context) {
+		const c = context.config;
+		this.setUniform("uPositionsTexture", context.simBuffers.getCurrentPositionTexture());
+		this.setUniform("uVelocityTexture", context.simBuffers.getCurrentVelocityTexture());
+		this.setUniform("uGravity", c.gravity);
+		this.setUniform("uAlpha", c.alpha);
+		this.setUniform("uSpaceSize", c.spaceSize);
+		this.setUniform("uTime", performance.now() / 1e3);
+	}
+};
+
+//#endregion
+//#region assets/glsl/force-sim/integrate.frag
+var integrate_default = "#ifdef GL_ES\r\nprecision highp float;\r\n#endif\n\nuniform sampler2D uPositionsTexture;\r\nuniform sampler2D uVelocityTexture;\r\nuniform float uDeltaTime;\r\nuniform float uDamping;\r\nuniform float uSpaceSize;\n\nvarying vec2 vUv;\n\nvoid main() {\r\n  vec4 currentPosition = texture2D(uPositionsTexture, vUv);\r\n  vec4 velocityTex = texture2D(uVelocityTexture, vUv);\n\n  \n  vec3 velocity = velocityTex.rgb;\n\n  \n  \n  \n  \n  \n  float state = currentPosition.w;\n\n  \n  vec3 newPosition = currentPosition.xyz;\r\n  \r\n  \n  if (state > 2.5) {\r\n    newPosition += velocity * uDeltaTime;\r\n  }\n\n  gl_FragColor = vec4(newPosition, currentPosition.w);\r\n}";
+
+//#endregion
+//#region simulation/passes/IntegratePass.ts
+/**
+* Integration pass - updates positions from velocities
+* Reads configuration directly from context.config
+*/
+var IntegratePass = class extends BasePass {
+	getName() {
+		return "integrate";
+	}
+	initMaterial(context) {
+		this.material = this.createMaterial(compute_default, integrate_default, {
+			uPositionsTexture: { value: null },
+			uVelocityTexture: { value: null },
+			uDeltaTime: { value: 0 },
+			uDamping: { value: 0 },
+			uSpaceSize: { value: 0 },
+			uAlpha: { value: 0 }
+		});
+	}
+	updateUniforms(context) {
+		const c = context.config;
+		this.setUniform("uPositionsTexture", context.simBuffers.getPreviousPositionTexture());
+		this.setUniform("uVelocityTexture", context.simBuffers.getCurrentVelocityTexture());
+		this.setUniform("uDeltaTime", c.deltaTime);
+		this.setUniform("uDamping", c.damping);
+		this.setUniform("uSpaceSize", c.spaceSize);
+		this.setUniform("uAlpha", c.alpha);
+	}
+};
+
+//#endregion
+//#region assets/glsl/force-sim/link.frag
+var link_default = "#ifdef GL_ES\r\nprecision highp float;\r\n#endif\n\nuniform sampler2D uPositionsTexture;\r\nuniform sampler2D uVelocityTexture;\r\nuniform sampler2D uLinksTexture; \nuniform sampler2D uLinksMapTexture; \nuniform sampler2D uLinkPropertiesTexture; \nuniform float uTextureSize;\r\nuniform float uLinksTextureSize;\r\nuniform float uSpringStrength; \nuniform float uSpringLength; \nuniform float uSpringDamping; \nuniform float uAlpha;\r\nuniform int uMaxLinks;\n\nvarying vec2 vUv;\n\nconst float JIGGLE = 1e-6;\n\nvoid main() {\r\n  vec4 currentPosition = texture2D(uPositionsTexture, vUv);\r\n  vec3 velocity = texture2D(uVelocityTexture, vUv).xyz;\r\n  vec3 pos = currentPosition.xyz;\n\n  \n  vec4 mapEntry = texture2D(uLinksMapTexture, vUv);\r\n  float startXf = mapEntry.r;\r\n  float startYf = mapEntry.g;\r\n  int count = int(mapEntry.b);\n\n  if (count <= 0) {\r\n    gl_FragColor = vec4(velocity, 0.0);\r\n    return;\r\n  }\n\n  \n  float maxIndexF = uLinksTextureSize - 1.0;\r\n  float startXi = clamp(floor(startXf + 0.5), 0.0, maxIndexF);\r\n  float startYi = clamp(floor(startYf + 0.5), 0.0, maxIndexF);\n\n  \n  float baseIndex = startXi + startYi * uLinksTextureSize;\r\n  float totalLinkTexels = uLinksTextureSize * uLinksTextureSize;\n\n  vec3 velocityDelta = vec3(0.0);\n\n  \n  for (int i = 0; i < count; i++) {\n\n    float idx = baseIndex + float(i);\n\n    \n    if (idx < 0.0 || idx >= totalLinkTexels) break;\n\n    float lx = mod(idx, uLinksTextureSize);\r\n    float ly = floor(idx / uLinksTextureSize);\r\n    vec2 linkUV = vec2((lx + 0.5) / uLinksTextureSize, (ly + 0.5) / uLinksTextureSize);\n\n    \n    float otherIndexF = texture2D(uLinksTexture, linkUV).r;\r\n    vec3 linkProps = texture2D(uLinkPropertiesTexture, linkUV).rgb;\r\n    \r\n    \n    float strength = uSpringStrength;\r\n    if (linkProps.r > 0.0) strength *= linkProps.r;\n\n    \n    if (strength <= 0.0 && uSpringDamping <= 0.0) continue;\n\n    float spring_dist = uSpringLength;\r\n    \n\n    \n    float otherIndexRoundedF = floor(otherIndexF + 0.5);\n\n    if (otherIndexRoundedF < 0.0) continue;\n\n    \n    float ox = mod(otherIndexRoundedF, uTextureSize);\r\n    float oy = floor(otherIndexRoundedF / uTextureSize);\r\n    vec2 otherUV = vec2((ox + 0.5) / uTextureSize, (oy + 0.5) / uTextureSize);\n\n    vec4 otherPosTex = texture2D(uPositionsTexture, otherUV);\r\n    vec3 otherPos = otherPosTex.xyz;\n\n    \n    if (otherPosTex.w < 1.5) continue;\n\n    vec3 otherVel = texture2D(uVelocityTexture, otherUV).xyz;\n\n    vec3 delta = otherPos - pos;\r\n    vec3 force = vec3(0.0);\r\n    \r\n    float currentLength = length(delta);\r\n    if (currentLength > 0.0) {\r\n      float displacement = currentLength - spring_dist;\r\n      \r\n      \n      vec3 direction = delta / currentLength;\r\n      float springForce = displacement * strength;\r\n      \r\n      \n      vec3 relVel = velocity - otherVel;\r\n      float dampingForce = dot(relVel, direction) * uSpringDamping;\n\n      \n      force = direction * (springForce - dampingForce);\r\n    }\n\n    \n    velocityDelta += force * uAlpha;\r\n  }\n\n  vec3 newVel = velocity + velocityDelta;\r\n  gl_FragColor = vec4(newVel, 0.0);\r\n}";
+
+//#endregion
+//#region simulation/passes/LinkPass.ts
+/**
+* Link force pass - spring forces between connected nodes
+* Reads configuration directly from context.config
+*/
+var LinkPass = class extends BasePass {
+	getName() {
+		return "link";
+	}
+	initMaterial(context) {
+		const linksTexture = context.assets.getLinkIndicesTexture();
+		const linksTextureSize = linksTexture?.image?.data ? Math.ceil(Math.sqrt(linksTexture.image.data.length / 4)) : 0;
+		this.material = this.createMaterial(compute_default, link_default, {
+			uPositionsTexture: { value: null },
+			uVelocityTexture: { value: null },
+			uLinksTexture: { value: context.assets.getLinkIndicesTexture() },
+			uLinksMapTexture: { value: context.assets.getLinkMapTexture() },
+			uLinkPropertiesTexture: { value: context.assets.getLinkPropertiesTexture() },
+			uTextureSize: { value: context.textureSize },
+			uLinksTextureSize: { value: linksTextureSize },
+			uSpringStrength: { value: context.config.springStrength },
+			uSpringLength: { value: context.config.springLength },
+			uSpringDamping: { value: context.config.springDamping },
+			uAlpha: { value: context.config.alpha },
+			uMaxLinks: { value: context.config.maxLinks }
+		});
+	}
+	updateUniforms(context) {
+		const c = context.config;
+		this.setUniform("uPositionsTexture", context.simBuffers.getCurrentPositionTexture());
+		this.setUniform("uVelocityTexture", context.simBuffers.getCurrentVelocityTexture());
+		this.setUniform("uSpringStrength", c.springStrength);
+		this.setUniform("uSpringLength", c.springLength);
+		this.setUniform("uSpringDamping", c.springDamping);
+		this.setUniform("uAlpha", c.alpha);
+		this.setUniform("uMaxLinks", c.maxLinks);
+	}
+};
+
+//#endregion
+//#region assets/glsl/force-sim/manybody.frag
+var manybody_default = "#ifdef GL_ES\r\nprecision highp float;\r\n#endif\n\nuniform sampler2D uPositionsTexture;\r\nuniform sampler2D uVelocityTexture;\r\nuniform float uTextureSize;\r\nuniform float uManyBodyStrength; \nuniform float uMinDistance; \nuniform float uMaxDistance; \nuniform float uAlpha; \nuniform sampler2D uRadiiTexture;\r\nuniform bool uIs3D; \n\nvarying vec2 vUv;\n\nfloat rand(vec2 co){\r\n  return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453);\r\n}\n\nvoid main() {\r\n  vec4 currentPosition = texture2D(uPositionsTexture, vUv);\r\n  vec3 velocity = texture2D(uVelocityTexture, vUv).xyz;\r\n  float particleIndex = floor(vUv.y * uTextureSize) * uTextureSize + floor(vUv.x * uTextureSize);\n\n  float texStep = 1.0 / uTextureSize;\r\n  float halfTex = 0.5 * texStep;\r\n  float eps = 1e-6;\n\n  float r1 = texture2D(uRadiiTexture, vUv).r;\r\n  vec3 force = vec3(0.0);\n\n  \n  for (float y = 0.0; y < 1.0; y += texStep) {\r\n    for (float x = 0.0; x < 1.0; x += texStep) {\r\n      vec2 otherUV = vec2(x + halfTex, y + halfTex);\r\n      float otherIndex = floor(y * uTextureSize) * uTextureSize + floor(x * uTextureSize);\r\n      if (abs(otherIndex - particleIndex) < 0.5) continue; \n\n      vec4 otherPosition = texture2D(uPositionsTexture, otherUV);\r\n      \r\n      \n      \n      if (otherPosition.w < 1.5) continue;\n\n      vec3 delta;\r\n      if (uIs3D) {\r\n        delta = currentPosition.xyz - otherPosition.xyz;\r\n      } else {\r\n        delta = vec3(currentPosition.xy - otherPosition.xy, 0.0);\r\n      }\n\n      float dist = length(delta);\n\n      if (dist < uMinDistance || dist > uMaxDistance) continue;\n\n      float r2 = texture2D(uRadiiTexture, otherUV).r;\r\n      float distSq = max(dist * dist, eps); \r\n      float forceMagnitude = (uManyBodyStrength * r1 * r2) / distSq;\n\n      vec3 direction = length(delta) > eps ? normalize(delta) : vec3(0.0);\r\n      \r\n      force += direction * forceMagnitude * r1;\r\n    }\r\n  }\r\n  \r\n  \n  velocity += force * uAlpha;\r\n  \r\n  gl_FragColor = vec4(velocity, 0.0);\r\n}";
+
+//#endregion
+//#region simulation/passes/ManyBodyPass.ts
+/**
+* Many-body force pass - charge/repulsion between all nodes
+* Reads configuration directly from context.config
+*/
+var ManyBodyPass = class extends BasePass {
+	getName() {
+		return "manybody";
+	}
+	initMaterial(context) {
+		this.material = this.createMaterial(compute_default, manybody_default, {
+			uPositionsTexture: { value: null },
+			uVelocityTexture: { value: null },
+			uTextureSize: { value: context.textureSize },
+			uRadiiTexture: { value: context.assets.getNodeRadiiTexture() },
+			uManyBodyStrength: { value: 0 },
+			uMinDistance: { value: 0 },
+			uMaxDistance: { value: 0 },
+			uAlpha: { value: 0 },
+			uIs3D: { value: true }
+		});
+	}
+	updateUniforms(context) {
+		const c = context.config;
+		this.setUniform("uPositionsTexture", context.simBuffers.getCurrentPositionTexture());
+		this.setUniform("uVelocityTexture", context.simBuffers.getCurrentVelocityTexture());
+		this.setUniform("uManyBodyStrength", c.manyBodyStrength);
+		this.setUniform("uMinDistance", c.manyBodyMinDistance);
+		this.setUniform("uMaxDistance", c.manyBodyMaxDistance);
+		this.setUniform("uAlpha", c.alpha);
+		this.setUniform("uIs3D", c.is3D);
+	}
+};
+
+//#endregion
+//#region assets/glsl/force-sim/velocity_carry.frag
+var velocity_carry_default = "#ifdef GL_ES\r\nprecision highp float;\r\n#endif\n\nuniform sampler2D uPrevVelocity;\r\nuniform float uDamping;\n\nvarying vec2 vUv;\n\nvoid main() {\r\n  vec3 prev = texture2D(uPrevVelocity, vUv).rgb;\r\n  vec3 carried = prev * uDamping;\r\n  gl_FragColor = vec4(carried, 1.0);\r\n}";
+
+//#endregion
+//#region simulation/passes/VelocityCarryPass.ts
+/**
+* Velocity carry pass - applies damping to previous velocity
+* Reads configuration directly from context.config
+*/
+var VelocityCarryPass = class extends BasePass {
+	getName() {
+		return "velocityCarry";
+	}
+	initMaterial(context) {
+		this.material = this.createMaterial(compute_default, velocity_carry_default, {
+			uPrevVelocity: { value: null },
+			uDamping: { value: 0 }
+		});
+	}
+	updateUniforms(context) {
+		this.setUniform("uPrevVelocity", context.simBuffers.getPreviousVelocityTexture());
+		this.setUniform("uDamping", context.config.damping);
+	}
+};
+
+//#endregion
+//#region simulation/ForceSimulation.ts
+/**
+* ForceSimulation - GPU-based force simulation
+*
+* Simple architecture:
+* - Single shared config object (ForceConfig)
+* - All passes read directly from config via PassContext
+* - Enable flags control which passes execute
+* - 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;
+	constructor(renderer) {
+		this.renderer = renderer;
+		this.computeScene = new THREE.Scene();
+		this.computeCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		this.computeQuad = this.createComputeQuad();
+		this.config = {
+			manyBodyStrength: 3.5,
+			manyBodyMinDistance: .01,
+			manyBodyMaxDistance: .3,
+			enableManyBody: false,
+			collisionStrength: .33,
+			collisionRadius: .33,
+			collisionMaxDistance: .3,
+			enableCollision: true,
+			elasticStrength: .1,
+			enableElastic: false,
+			springStrength: 10,
+			springLength: .1,
+			springDamping: .99,
+			maxLinks: 512,
+			enableLinks: false,
+			gravity: .9,
+			enableGravity: false,
+			attractorStrength: .1,
+			enableAttractors: false,
+			dragStrength: .2,
+			damping: .75,
+			alpha: 1,
+			alphaDecay: .01,
+			deltaTime: .016,
+			spaceSize: 1e3,
+			is3D: true
+		};
+		this.velocityCarryPass = new VelocityCarryPass();
+		this.collisionPass = new CollisionPass();
+		this.manyBodyPass = new ManyBodyPass();
+		this.gravityPass = new GravityPass();
+		this.linkPass = new LinkPass();
+		this.elasticPass = new ElasticPass();
+		this.attractorPass = new AttractorPass();
+		this.dragPass = new DragPass();
+		this.integratePass = new IntegratePass();
+		this.forcePasses = [
+			this.collisionPass,
+			this.manyBodyPass,
+			this.gravityPass,
+			this.attractorPass,
+			this.linkPass,
+			this.elasticPass,
+			this.dragPass
+		];
+	}
+	createComputeQuad() {
+		const quad = new THREE.BufferGeometry();
+		const vertices = new Float32Array([
+			-1,
+			-1,
+			0,
+			1,
+			-1,
+			0,
+			1,
+			1,
+			0,
+			-1,
+			1,
+			0
+		]);
+		const uvs = new Float32Array([
+			0,
+			0,
+			1,
+			0,
+			1,
+			1,
+			0,
+			1
+		]);
+		const indices = new Uint16Array([
+			0,
+			1,
+			2,
+			0,
+			2,
+			3
+		]);
+		quad.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+		quad.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
+		quad.setIndex(new THREE.BufferAttribute(indices, 1));
+		return quad;
+	}
+	/**
+	* Initialize simulation with buffers
+	*/
+	initialize(simulationBuffers) {
+		this.simulationBuffers = simulationBuffers;
+		if (!this.simulationBuffers.isReady()) {
+			console.warn("[ForceSimulation] SimulationBuffers not ready");
+			return;
+		}
+		const context = this.createContext();
+		this.velocityCarryPass.initMaterial(context);
+		this.integratePass.initMaterial(context);
+		for (const pass of this.forcePasses) pass.initMaterial(context);
+		this.isInitialized = true;
+	}
+	createContext() {
+		if (!this.simulationBuffers) throw new Error("[ForceSimulation] Cannot create context without buffers");
+		return {
+			scene: this.computeScene,
+			camera: this.computeCamera,
+			quad: this.computeQuad,
+			simBuffers: this.simulationBuffers,
+			assets: staticAssets,
+			renderer: this.renderer,
+			config: this.config,
+			textureSize: this.simulationBuffers.getTextureSize()
+		};
+	}
+	/**
+	* Check if a pass should execute based on config
+	*/
+	shouldExecutePass(pass) {
+		switch (pass.getName()) {
+			case "collision": return this.config.enableCollision;
+			case "manybody": return this.config.enableManyBody;
+			case "gravity": return this.config.enableGravity;
+			case "attractor": return this.config.enableAttractors && this.attractorPass.getAttractors().length > 0;
+			case "link": return this.config.enableLinks;
+			case "elastic": return this.config.enableElastic;
+			case "drag": return this.dragPass.isDragging();
+			default: return true;
+		}
+	}
+	/**
+	* Run one simulation step
+	*/
+	step(deltaTime) {
+		if (!this.isInitialized || !this.simulationBuffers) return;
+		if (deltaTime !== void 0) this.config.deltaTime = deltaTime;
+		const context = this.createContext();
+		const currentVelocityTarget = this.simulationBuffers.getCurrentVelocityTarget();
+		if (currentVelocityTarget) {
+			this.renderer.setRenderTarget(currentVelocityTarget);
+			this.velocityCarryPass.execute(context);
+		}
+		for (const pass of this.forcePasses) {
+			if (!this.shouldExecutePass(pass)) continue;
+			const prevVelocityTarget = this.simulationBuffers.getPreviousVelocityTarget();
+			if (prevVelocityTarget) {
+				this.renderer.setRenderTarget(prevVelocityTarget);
+				pass.execute(context);
+				this.simulationBuffers.swapVelocities();
+			}
+		}
+		this.simulationBuffers.swapPositions();
+		const newPositionTarget = this.simulationBuffers.getCurrentPositionTarget();
+		if (newPositionTarget) {
+			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 = Math.max(this.config.alpha, 0);
+		this.renderer.setRenderTarget(null);
+		this.iterationCount++;
+	}
+	/**
+	* Get config for GUI binding
+	* Modify this object directly - changes take effect on next step()
+	*/
+	getConfig() {
+		return this.config;
+	}
+	/**
+	* Re-heat the simulation (set alpha to 1)
+	*/
+	reheat(amt = 1) {
+		this.config.alpha = amt;
+	}
+	startDrag(index, targetWorldPos) {
+		if (!this.simulationBuffers) return;
+		this.dragPass.startDrag(index, targetWorldPos, this.simulationBuffers.getTextureSize());
+		this.reheat(.1);
+	}
+	updateDrag(targetWorldPos) {
+		this.dragPass.updateDrag(targetWorldPos);
+		this.reheat(.01);
+	}
+	endDrag() {
+		this.dragPass.endDrag();
+	}
+	/**
+	* Set attractors for category-based attraction
+	* @param attractors Array of attractor definitions
+	*/
+	setAttractors(attractors) {
+		this.attractorPass.setAttractors(attractors);
+		this.config.enableAttractors = attractors.length > 0;
+	}
+	/**
+	* Add a single attractor
+	*/
+	addAttractor(attractor) {
+		this.attractorPass.addAttractor(attractor);
+		this.config.enableAttractors = true;
+	}
+	/**
+	* Remove an attractor by ID
+	*/
+	removeAttractor(id) {
+		this.attractorPass.removeAttractor(id);
+		if (this.attractorPass.getAttractors().length === 0) this.config.enableAttractors = false;
+	}
+	/**
+	* Update an attractor's position (useful for animated attractors)
+	*/
+	updateAttractorPosition(id, position) {
+		this.attractorPass.updateAttractorPosition(id, position);
+	}
+	/**
+	* Get current attractors
+	*/
+	getAttractors() {
+		return this.attractorPass.getAttractors();
+	}
+	/**
+	* Set node logic for attractor matching
+	* Call this when graph data changes
+	*/
+	setNodeGroups(groups) {
+		if (!this.simulationBuffers) return;
+		const textureSize = this.simulationBuffers.getTextureSize();
+		const normalizedGroups = groups.map((g) => Array.isArray(g) ? g : g ? [g] : []);
+		this.attractorPass.setNodeGroups(normalizedGroups, textureSize);
+	}
+	setNodeGroupsFromData(data, accessor) {
+		const groups = data.map((item, i) => accessor(item, i) || []);
+		this.setNodeGroups(groups);
+	}
+	/**
+	* Get the attractor pass for direct access
+	*/
+	getAttractorPass() {
+		return this.attractorPass;
+	}
+	getAlpha() {
+		return this.config.alpha;
+	}
+	getIterationCount() {
+		return this.iterationCount;
+	}
+	reset() {
+		if (!this.isInitialized || !this.simulationBuffers) return;
+		this.config.alpha = 1;
+		this.iterationCount = 0;
+		this.simulationBuffers.resetPositions();
+		this.simulationBuffers.initVelocities();
+	}
+	dispose() {
+		this.velocityCarryPass.dispose();
+		this.integratePass.dispose();
+		for (const pass of this.forcePasses) pass.dispose();
+		this.computeQuad.dispose();
+		this.isInitialized = false;
+	}
+};
+
+//#endregion
+//#region textures/PickBuffer.ts
+/**
+* Manages GPU picking buffer for mouse interaction
+* Separate from simulation buffers as it has different lifecycle
+*/
+var PickBuffer = class {
+	renderer;
+	pickTarget = null;
+	constructor(renderer) {
+		this.renderer = renderer;
+	}
+	/**
+	* Ensure pick buffer matches viewport size
+	*/
+	resize(width, height) {
+		if (!this.pickTarget || this.pickTarget.width !== width || this.pickTarget.height !== height) {
+			this.pickTarget?.dispose();
+			this.pickTarget = this.createPickBuffer(width, height);
+		}
+	}
+	createPickBuffer(width, height) {
+		return new THREE.WebGLRenderTarget(width, height, {
+			minFilter: THREE.NearestFilter,
+			magFilter: THREE.NearestFilter,
+			format: THREE.RGBAFormat,
+			type: THREE.UnsignedByteType,
+			stencilBuffer: false,
+			depthBuffer: true,
+			generateMipmaps: false
+		});
+	}
+	/**
+	* Read node ID at pixel coordinates
+	*/
+	readIdAt(x, y) {
+		if (!this.pickTarget) return -1;
+		this.pickTarget.width;
+		const height = this.pickTarget.height;
+		const buffer = new Uint8Array(4);
+		const readY = height - y - 1;
+		try {
+			this.renderer.readRenderTargetPixels(this.pickTarget, Math.floor(x), Math.floor(readY), 1, 1, buffer);
+		} catch (e) {
+			return -1;
+		}
+		const r = buffer[0] || 0;
+		const g = buffer[1] || 0;
+		const b = buffer[2] || 0;
+		const id = r + (g << 8) + (b << 16) - 1;
+		return id < 0 ? -1 : id;
+	}
+	/**
+	* Render scene to pick buffer
+	*/
+	render(scene, camera) {
+		if (!this.pickTarget) return;
+		const currentRenderTarget = this.renderer.getRenderTarget();
+		this.renderer.setRenderTarget(this.pickTarget);
+		this.renderer.render(scene, camera);
+		this.renderer.setRenderTarget(currentRenderTarget);
+	}
+	getTarget() {
+		return this.pickTarget;
+	}
+	dispose() {
+		this.pickTarget?.dispose();
+	}
+};
+
+//#endregion
+//#region textures/SimulationBuffers.ts
+/**
+* Manages dynamic render targets updated by force simulation
+* Uses ping-pong technique for GPU computation
+* 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.renderer = renderer;
+	}
+	/**
+	* Check if buffers are initialized
+	*/
+	isReady() {
+		return this.isInitialized;
+	}
+	/**
+	* Initialize buffers with point count and initial positions
+	*/
+	init(pointsCount, initialPositions) {
+		if (this.isInitialized) this.dispose();
+		this.textureSize = this.calculateTextureSize(pointsCount);
+		if (this.textureSize === 0 || !Number.isFinite(this.textureSize)) {
+			console.error(`[SimulationBuffers] Invalid texture size calculated: ${this.textureSize}`);
+			throw new Error(`Invalid texture size: ${this.textureSize}`);
+		}
+		this.positionBuffers = {
+			current: this.createDynamicBuffer(),
+			previous: this.createDynamicBuffer(),
+			original: this.createDynamicBuffer()
+		};
+		this.velocityBuffers = {
+			current: this.createDynamicBuffer(),
+			previous: this.createDynamicBuffer()
+		};
+		this.isInitialized = true;
+		if (initialPositions) this.setInitialPositions(initialPositions);
+		else this.setInitialPositions(new Float32Array(pointsCount * 3));
+		this.initVelocities();
+	}
+	/**
+	* Resize buffers (re-initializes with new size)
+	*/
+	resize(pointsCount, preserveData = false) {
+		if (this.calculateTextureSize(pointsCount) === this.textureSize) return;
+		let savedPositions;
+		if (preserveData && this.isInitialized) savedPositions = this.readPositions();
+		this.init(pointsCount, savedPositions);
+	}
+	calculateTextureSize(count) {
+		const size = Math.ceil(Math.sqrt(count));
+		return 2 ** Math.ceil(Math.log2(size));
+	}
+	createDynamicBuffer() {
+		return new THREE.WebGLRenderTarget(this.textureSize, this.textureSize, {
+			minFilter: THREE.NearestFilter,
+			magFilter: THREE.NearestFilter,
+			format: THREE.RGBAFormat,
+			type: THREE.FloatType,
+			stencilBuffer: false,
+			depthBuffer: false,
+			generateMipmaps: false
+		});
+	}
+	/**
+	* Initialize position buffers from initial data
+	*/
+	setInitialPositions(positionArray) {
+		if (!this.isInitialized) throw new Error("SimulationBuffers must be initialized before setting positions");
+		const textureData = this.arrayToTextureData(positionArray, 4);
+		const texture = this.createDataTexture(textureData);
+		this.copyTextureToBuffer(texture, this.positionBuffers.current);
+		this.copyTextureToBuffer(texture, this.positionBuffers.previous);
+		this.copyTextureToBuffer(texture, this.positionBuffers.original);
+		texture.dispose();
+	}
+	/**
+	* Update current and previous positions, but keep original positions intact
+	*/
+	updateCurrentPositions(positionArray) {
+		if (!this.isInitialized) throw new Error("SimulationBuffers must be initialized before updating positions");
+		const textureData = this.arrayToTextureData(positionArray, 4);
+		const texture = this.createDataTexture(textureData);
+		this.copyTextureToBuffer(texture, this.positionBuffers.current);
+		this.copyTextureToBuffer(texture, this.positionBuffers.previous);
+		texture.dispose();
+	}
+	/**
+	* Set original positions (anchors) separately from current positions
+	*/
+	setOriginalPositions(positionArray) {
+		if (!this.isInitialized) throw new Error("SimulationBuffers must be initialized before setting original positions");
+		const textureData = this.arrayToTextureData(positionArray, 4);
+		const texture = this.createDataTexture(textureData);
+		this.copyTextureToBuffer(texture, this.positionBuffers.original);
+		texture.dispose();
+	}
+	/**
+	* Initialize velocity buffers (usually to zero)
+	*/
+	initVelocities() {
+		if (!this.isInitialized) throw new Error("SimulationBuffers must be initialized before setting velocities");
+		const size = this.textureSize * this.textureSize * 4;
+		const textureData = new Float32Array(size).fill(0);
+		const texture = this.createDataTexture(textureData);
+		this.copyTextureToBuffer(texture, this.velocityBuffers.current);
+		this.copyTextureToBuffer(texture, this.velocityBuffers.previous);
+		texture.dispose();
+	}
+	/**
+	* Swap position buffers (ping-pong)
+	*/
+	swapPositions() {
+		if (!this.isInitialized) return;
+		const temp = this.positionBuffers.current;
+		this.positionBuffers.current = this.positionBuffers.previous;
+		this.positionBuffers.previous = temp;
+	}
+	/**
+	* Swap velocity buffers (ping-pong)
+	*/
+	swapVelocities() {
+		if (!this.isInitialized) return;
+		const temp = this.velocityBuffers.current;
+		this.velocityBuffers.current = this.velocityBuffers.previous;
+		this.velocityBuffers.previous = temp;
+	}
+	/**
+	* Reset positions to original state
+	*/
+	resetPositions() {
+		if (!this.isInitialized) return;
+		this.copyBufferToBuffer(this.positionBuffers.original, this.positionBuffers.current);
+		this.copyBufferToBuffer(this.positionBuffers.original, this.positionBuffers.previous);
+	}
+	/**
+	* Read current positions back from GPU (expensive operation)
+	* Returns RGBA float array (x, y, z, state)
+	*/
+	readPositions() {
+		if (!this.isInitialized || !this.positionBuffers.current) return new Float32Array(0);
+		const width = this.positionBuffers.current.width;
+		const height = this.positionBuffers.current.height;
+		const pixels = new Float32Array(width * height * 4);
+		this.renderer.readRenderTargetPixels(this.positionBuffers.current, 0, 0, width, height, pixels);
+		return pixels;
+	}
+	getCurrentPositionTarget() {
+		return this.positionBuffers.current;
+	}
+	getPreviousPositionTarget() {
+		return this.positionBuffers.previous;
+	}
+	getCurrentPositionTexture() {
+		return this.positionBuffers.current.texture;
+	}
+	getPreviousPositionTexture() {
+		return this.positionBuffers.previous?.texture ?? null;
+	}
+	getOriginalPositionTexture() {
+		return this.positionBuffers.original?.texture ?? null;
+	}
+	getCurrentVelocityTarget() {
+		return this.velocityBuffers.current;
+	}
+	getPreviousVelocityTarget() {
+		return this.velocityBuffers.previous;
+	}
+	getCurrentVelocityTexture() {
+		return this.velocityBuffers.current?.texture ?? null;
+	}
+	getPreviousVelocityTexture() {
+		return this.velocityBuffers.previous?.texture ?? null;
+	}
+	getTextureSize() {
+		return this.textureSize;
+	}
+	arrayToTextureData(array, componentsPerItem) {
+		const totalTexels = this.textureSize * this.textureSize;
+		const data = new Float32Array(totalTexels * 4);
+		const itemCount = array.length / componentsPerItem;
+		for (let i = 0; i < itemCount; i++) {
+			const texIndex = i * 4;
+			const arrayIndex = i * componentsPerItem;
+			data[texIndex] = array[arrayIndex] || 0;
+			data[texIndex + 1] = array[arrayIndex + 1] || 0;
+			data[texIndex + 2] = array[arrayIndex + 2] || 0;
+			data[texIndex + 3] = array[arrayIndex + 3] || 0;
+		}
+		return data;
+	}
+	createDataTexture(data) {
+		const expectedSize = this.textureSize * this.textureSize * 4;
+		if (data.length !== expectedSize) {
+			console.error(`[SimulationBuffers] DataTexture size mismatch!`);
+			console.error(`  Expected: ${expectedSize} (${this.textureSize}x${this.textureSize}x4)`);
+			console.error(`  Got: ${data.length}`);
+			console.error(`  Stack trace:`, (/* @__PURE__ */ new Error()).stack);
+			const correctData = new Float32Array(expectedSize);
+			correctData.set(data.slice(0, Math.min(data.length, expectedSize)));
+			data = correctData;
+		}
+		const texture = new THREE.DataTexture(data, this.textureSize, this.textureSize, THREE.RGBAFormat, THREE.FloatType);
+		texture.needsUpdate = true;
+		texture.minFilter = THREE.NearestFilter;
+		texture.magFilter = THREE.NearestFilter;
+		texture.generateMipmaps = false;
+		return texture;
+	}
+	copyTextureToBuffer(source, target) {
+		const copyMaterial = new THREE.ShaderMaterial({
+			uniforms: { tSource: { value: source } },
+			vertexShader: `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+			fragmentShader: `
+        uniform sampler2D tSource;
+        varying vec2 vUv;
+        void main() {
+          gl_FragColor = texture2D(tSource, vUv);
+        }
+      `
+		});
+		const quad = new THREE.PlaneGeometry(2, 2);
+		const mesh = new THREE.Mesh(quad, copyMaterial);
+		const scene = new THREE.Scene();
+		scene.add(mesh);
+		const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		this.renderer.setRenderTarget(target);
+		this.renderer.render(scene, camera);
+		this.renderer.setRenderTarget(null);
+		copyMaterial.dispose();
+		quad.dispose();
+	}
+	copyBufferToBuffer(source, target) {
+		this.copyTextureToBuffer(source.texture, target);
+	}
+	dispose() {
+		this.positionBuffers.current?.dispose();
+		this.positionBuffers.previous?.dispose();
+		this.positionBuffers.original?.dispose();
+		this.velocityBuffers.current?.dispose();
+		this.velocityBuffers.previous?.dispose();
+		this.positionBuffers = {
+			current: null,
+			previous: null,
+			original: null
+		};
+		this.velocityBuffers = {
+			current: null,
+			previous: null
+		};
+		this.textureSize = 0;
+		this.isInitialized = false;
+	}
+};
+
+//#endregion
+//#region core/Clock.ts
+/**
+* Clock - Unified timing for the force graph package
+*/
+var Clock = class {
+	previousTime = 0;
+	elapsedTime = 0;
+	deltaTime = 0;
+	isRunning = false;
+	maxDeltaTime = .1;
+	constructor() {}
+	/**
+	* 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
+/**
+* GraphStore - Central data management
+* Responsibilities:
+* - Store raw graph data (nodes, links)
+* - Node/Link CRUD operations
+* - ID mapping and lookups
+* - Data validation
+* - Change notifications
+*/
+var GraphStore = class {
+	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)
+	*/
+	setData(data) {
+		this.clear();
+		data.nodes.forEach((node, index) => {
+			this.nodes.set(node.id, node);
+			this.nodeIdToIndex.set(node.id, index);
+			this.nodeArray.push(node);
+		});
+		data.links.forEach((link, index) => {
+			const linkId = this.getLinkId(link);
+			this.links.set(linkId, link);
+			this.linkIdToIndex.set(linkId, index);
+			this.linkArray.push(link);
+			this.addLinkConnectivity(link.source, linkId);
+			this.addLinkConnectivity(link.target, linkId);
+		});
+	}
+	/**
+	* Add nodes
+	*/
+	addNodes(nodes) {
+		nodes.forEach((node) => {
+			if (!this.nodes.has(node.id)) {
+				const index = this.nodeArray.length;
+				this.nodes.set(node.id, node);
+				this.nodeIdToIndex.set(node.id, index);
+				this.nodeArray.push(node);
+			}
+		});
+	}
+	/**
+	* Remove nodes (and connected links)
+	*/
+	removeNodes(nodeIds) {
+		nodeIds.forEach((id) => {
+			const connectedLinks = this.nodeToLinks.get(id);
+			if (connectedLinks) this.removeLinks(Array.from(connectedLinks));
+			this.nodes.delete(id);
+			this.nodeIdToIndex.delete(id);
+			this.nodeToLinks.delete(id);
+		});
+		this.rebuildNodeArrays();
+	}
+	/**
+	* Add links
+	*/
+	addLinks(links) {
+		links.forEach((link) => {
+			const linkId = this.getLinkId(link);
+			if (!this.links.has(linkId)) {
+				const index = this.linkArray.length;
+				this.links.set(linkId, link);
+				this.linkIdToIndex.set(linkId, index);
+				this.linkArray.push(link);
+				this.addLinkConnectivity(link.source, linkId);
+				this.addLinkConnectivity(link.target, linkId);
+			}
+		});
+	}
+	/**
+	* Remove links
+	*/
+	removeLinks(linkIds) {
+		linkIds.forEach((id) => {
+			const link = this.links.get(id);
+			if (link) {
+				this.removeLinkConnectivity(link.source, id);
+				this.removeLinkConnectivity(link.target, id);
+				this.links.delete(id);
+				this.linkIdToIndex.delete(id);
+			}
+		});
+		this.rebuildLinkArrays();
+	}
+	/**
+	* Get all nodes as array
+	*/
+	getNodes() {
+		return this.nodeArray;
+	}
+	/**
+	* Get all links as array
+	*/
+	getLinks() {
+		return this.linkArray;
+	}
+	/**
+	* Get connected node IDs for a given node
+	*/
+	getConnectedNodeIds(nodeId) {
+		const connectedLinks = this.nodeToLinks.get(nodeId);
+		if (!connectedLinks) return [];
+		const connectedNodes = /* @__PURE__ */ new Set();
+		connectedLinks.forEach((linkId) => {
+			const link = this.links.get(linkId);
+			if (link) {
+				connectedNodes.add(link.source);
+				connectedNodes.add(link.target);
+			}
+		});
+		connectedNodes.delete(nodeId);
+		return Array.from(connectedNodes);
+	}
+	/**
+	* Get node by ID
+	*/
+	getNodeById(id) {
+		return this.nodes.get(id) ?? null;
+	}
+	/**
+	* Get node by index
+	*/
+	getNodeByIndex(index) {
+		return this.nodeArray[index] ?? null;
+	}
+	/**
+	* Get node index
+	*/
+	getNodeIndex(id) {
+		return this.nodeIdToIndex.get(id) ?? -1;
+	}
+	/**
+	* Get link by ID
+	*/
+	getLinkById(id) {
+		return this.links.get(id) ?? null;
+	}
+	/**
+	* Get links connected to node
+	*/
+	getNodeLinks(nodeId) {
+		const linkIds = this.nodeToLinks.get(nodeId);
+		if (!linkIds) return [];
+		return Array.from(linkIds).map((id) => this.links.get(id)).filter((link) => link !== void 0);
+	}
+	/**
+	* Get node count
+	*/
+	getNodeCount() {
+		return this.nodeArray.length;
+	}
+	/**
+	* Get link count
+	*/
+	getLinkCount() {
+		return this.linkArray.length;
+	}
+	/**
+	* Clear all data
+	*/
+	clear() {
+		this.nodes.clear();
+		this.links.clear();
+		this.nodeArray = [];
+		this.linkArray = [];
+		this.nodeIdToIndex.clear();
+		this.linkIdToIndex.clear();
+		this.nodeToLinks.clear();
+	}
+	getLinkId(link) {
+		return `${link.source}-${link.target}`;
+	}
+	addLinkConnectivity(nodeId, linkId) {
+		if (!this.nodeToLinks.has(nodeId)) this.nodeToLinks.set(nodeId, /* @__PURE__ */ new Set());
+		this.nodeToLinks.get(nodeId).add(linkId);
+	}
+	removeLinkConnectivity(nodeId, linkId) {
+		const links = this.nodeToLinks.get(nodeId);
+		if (links) {
+			links.delete(linkId);
+			if (links.size === 0) this.nodeToLinks.delete(nodeId);
+		}
+	}
+	rebuildNodeArrays() {
+		this.nodeArray = Array.from(this.nodes.values());
+		this.nodeIdToIndex.clear();
+		this.nodeArray.forEach((node, index) => {
+			this.nodeIdToIndex.set(node.id, index);
+		});
+	}
+	rebuildLinkArrays() {
+		this.linkArray = Array.from(this.links.values());
+		this.linkIdToIndex.clear();
+		this.linkArray.forEach((link, index) => {
+			const linkId = this.getLinkId(link);
+			this.linkIdToIndex.set(linkId, index);
+		});
+	}
+};
+
+//#endregion
+//#region core/Engine.ts
+CameraControls.install({ THREE });
+/**
+* Engine - Main orchestrator
+* Responsibilities:
+* - Owns all shared buffers (StaticAssets, SimulationBuffers, PickBuffer)
+* - Coordinates GraphStore, GraphScene, ForceSimulation
+* - Manages render loop
+* - Handles user interaction
+*/
+var Engine = class {
+	graphStore;
+	graphScene;
+	forceSimulation;
+	interactionManager;
+	clock;
+	simulationBuffers;
+	pickBuffer;
+	animationFrameId = null;
+	isRunning = false;
+	boundResizeHandler = null;
+	groupOrder;
+	constructor(canvas, options = {}) {
+		this.canvas = canvas;
+		this.groupOrder = options.groupOrder;
+		const width = options.width ?? window.innerWidth;
+		const height = options.height ?? window.innerHeight;
+		this.clock = new Clock();
+		this.graphStore = new GraphStore();
+		this.graphScene = new GraphScene(canvas, options.cameraConfig);
+		this.graphScene.resize(width, height);
+		this.simulationBuffers = new SimulationBuffers(this.graphScene.renderer);
+		this.pickBuffer = new PickBuffer(this.graphScene.renderer);
+		this.pickBuffer.resize(width, height);
+		this.forceSimulation = new ForceSimulation(this.graphScene.renderer);
+		this.interactionManager = new InteractionManager((x, y) => this.graphScene.pick(x, y), this.graphScene.renderer.domElement, {
+			width,
+			height
+		}, (index) => this.graphStore.getNodeByIndex(index), this.graphScene.camera, this.forceSimulation, options.tooltipConfig, this.graphScene, (nodeId) => this.graphStore.getConnectedNodeIds(nodeId));
+		this.boundResizeHandler = this.handleWindowResize.bind(this);
+		window.addEventListener("resize", this.boundResizeHandler);
+	}
+	/**
+	* Handle window resize event
+	*/
+	handleWindowResize() {
+		const width = window.innerWidth;
+		const height = window.innerHeight;
+		this.resize(width, height);
+	}
+	/**
+	* Set graph data
+	*/
+	setData(data) {
+		this.graphStore.setData(data);
+		const nodes = this.graphStore.getNodes();
+		const links = this.graphStore.getLinks();
+		const startPositions = new Float32Array(nodes.length * 4);
+		const originalPositions = new Float32Array(nodes.length * 4);
+		nodes.forEach((node, i) => {
+			let 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;
+			startPositions[i * 4 + 3] = state;
+			originalPositions[i * 4] = node.fx ?? node.x ?? 0;
+			originalPositions[i * 4 + 1] = node.fy ?? node.y ?? 0;
+			originalPositions[i * 4 + 2] = node.fz ?? node.z ?? 0;
+			originalPositions[i * 4 + 3] = state;
+		});
+		this.simulationBuffers.init(nodes.length, startPositions);
+		this.simulationBuffers.setOriginalPositions(originalPositions);
+		this.graphScene.create(nodes, links, this.simulationBuffers, this.pickBuffer, this.groupOrder);
+		this.forceSimulation.initialize(this.simulationBuffers);
+	}
+	/**
+	* Update node states based on a callback
+	* This allows changing visibility/behavior without resetting the simulation
+	*/
+	updateNodeStates(callback) {
+		if (!this.simulationBuffers.isReady()) return;
+		const nodes = this.graphStore.getNodes();
+		const currentPositions = this.simulationBuffers.readPositions();
+		const newCurrentPositions = new Float32Array(nodes.length * 4);
+		const newOriginalPositions = new Float32Array(nodes.length * 4);
+		nodes.forEach((node, i) => {
+			const newState = callback(node);
+			node.state = newState;
+			newCurrentPositions[i * 4] = currentPositions[i * 4];
+			newCurrentPositions[i * 4 + 1] = currentPositions[i * 4 + 1];
+			newCurrentPositions[i * 4 + 2] = currentPositions[i * 4 + 2];
+			newCurrentPositions[i * 4 + 3] = newState;
+			newOriginalPositions[i * 4] = node.fx ?? node.x ?? 0;
+			newOriginalPositions[i * 4 + 1] = node.fy ?? node.y ?? 0;
+			newOriginalPositions[i * 4 + 2] = node.fz ?? node.z ?? 0;
+			newOriginalPositions[i * 4 + 3] = newState;
+		});
+		this.simulationBuffers.updateCurrentPositions(newCurrentPositions);
+		this.simulationBuffers.setOriginalPositions(newOriginalPositions);
+	}
+	/**
+	* Reheat the simulation
+	*/
+	reheat(alpha = 1) {
+		this.forceSimulation.reheat(alpha);
+	}
+	/**
+	* Set alpha decay
+	*/
+	setAlphaDecay(decay) {
+		this.forceSimulation.config.alphaDecay = decay;
+	}
+	/**
+	* Get current alpha
+	*/
+	getAlpha() {
+		return this.forceSimulation.getAlpha();
+	}
+	/**Apply a preset to the graph
+	*/
+	applyPreset(preset) {
+		if (preset.force) {
+			Object.assign(this.forceSimulation.config, preset.force);
+			this.forceSimulation.reheat();
+		}
+		if (preset.camera) {
+			const { position, target, zoom, transitionDuration, mode, minDistance, maxDistance, boundary } = preset.camera;
+			if (mode) this.graphScene.camera.setMode(mode);
+			if (transitionDuration !== void 0) this.graphScene.camera.configureControls({ smoothTime: transitionDuration });
+			if (minDistance !== void 0 || maxDistance !== void 0) this.graphScene.camera.configureControls({
+				minDistance,
+				maxDistance
+			});
+			if (boundary) {
+				const box = new THREE.Box3(new THREE.Vector3(boundary.min.x, boundary.min.y, boundary.min.z), new THREE.Vector3(boundary.max.x, boundary.max.y, boundary.max.z));
+				this.graphScene.camera.setBoundary(box);
+			} else if (boundary === null) this.graphScene.camera.setBoundary(null);
+			if (position && target) {
+				const posVec = new THREE.Vector3(position.x, position.y, position.z);
+				const targetVec = new THREE.Vector3(target.x, target.y, target.z);
+				this.graphScene.camera.setLookAt(posVec, targetVec, true);
+			} else {
+				if (position) this.graphScene.camera.controls.setPosition(position.x, position.y, position.z, true);
+				if (target) this.graphScene.camera.controls.setTarget(target.x, target.y, target.z, true);
+			}
+			if (zoom !== void 0) this.graphScene.camera.controls.zoomTo(zoom, true);
+		}
+		if (preset.nodes) {
+			if (preset.nodes.state) {
+				this.updateNodeStates(preset.nodes.state);
+				this.forceSimulation.reheat();
+			}
+		}
+		if (preset.links) {
+			const linkRenderer = this.graphScene.getLinkRenderer();
+			if (linkRenderer) linkRenderer.setOptions({ alpha: { default: preset.links.opacity } });
+		}
+	}
+	/**
+	* 
+	* Start render loop
+	*/
+	start() {
+		if (this.isRunning) return;
+		this.isRunning = true;
+		this.clock.start();
+		this.animate();
+	}
+	/**
+	* Stop render loop
+	*/
+	stop() {
+		this.isRunning = false;
+		this.clock.stop();
+		if (this.animationFrameId !== null) {
+			cancelAnimationFrame(this.animationFrameId);
+			this.animationFrameId = null;
+		}
+	}
+	/**
+	* 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.animationFrameId = requestAnimationFrame(this.animate);
+	};
+	/**
+	* GPU pick node at canvas coordinates
+	*/
+	pickNode(x, y) {
+		const nodeRenderer = this.graphScene.getNodeRenderer();
+		if (!nodeRenderer) return null;
+		const camera = this.graphScene.getCamera();
+		const nodeIndex = nodeRenderer.pick(x, y, camera.camera);
+		if (nodeIndex < 0) return null;
+		return this.graphStore.getNodeByIndex(nodeIndex)?.id ?? null;
+	}
+	/**
+	* Get node by ID
+	*/
+	getNodeById(id) {
+		return this.graphStore.getNodeById(id);
+	}
+	/**
+	* Highlight nodes
+	*/
+	highlightNodes(nodeIds) {
+		this.interactionManager.searchHighlightIds = nodeIds;
+		this.graphScene.getNodeRenderer()?.highlight(nodeIds);
+	}
+	/**
+	* Clear highlights
+	*/
+	clearHighlights() {
+		this.interactionManager.searchHighlightIds = [];
+		if (this.interactionManager.isTooltipSticky && this.interactionManager.stickyNodeId) {
+			const node = this.graphStore.getNodeById(this.interactionManager.stickyNodeId);
+			if (node) {
+				const nodeRenderer = this.graphScene.getNodeRenderer();
+				const connectedIds = this.graphStore.getConnectedNodeIds(node.id);
+				connectedIds.push(node.id);
+				nodeRenderer?.highlight(connectedIds);
+				return;
+			}
+		}
+		this.graphScene.getNodeRenderer()?.clearHighlights();
+	}
+	/**
+	* Get node position in 3D space
+	*/
+	getNodePosition(nodeId) {
+		if (!this.graphStore.getNodeById(nodeId)) return null;
+		const index = this.graphStore.getNodes().findIndex((n) => n.id === nodeId);
+		if (index === -1) return null;
+		const positions = this.simulationBuffers.readPositions();
+		return new THREE.Vector3(positions[index * 4], positions[index * 4 + 1], positions[index * 4 + 2]);
+	}
+	/**
+	* Programmatically select a node (highlight + tooltip)
+	*/
+	selectNode(nodeId) {
+		const node = this.graphStore.getNodeById(nodeId);
+		if (!node) return;
+		this.interactionManager.isTooltipSticky = true;
+		this.interactionManager.stickyNodeId = nodeId;
+		this.graphScene.getLinkRenderer()?.highlightConnectedLinks(node.id);
+		const nodeRenderer = this.graphScene.getNodeRenderer();
+		const connectedIds = this.graphStore.getConnectedNodeIds(node.id);
+		connectedIds.push(node.id);
+		nodeRenderer?.highlight(connectedIds);
+		const pos = this.getNodePosition(nodeId);
+		if (pos) {
+			const screenPos = pos.clone().project(this.graphScene.camera.camera);
+			const size = new THREE.Vector2();
+			this.graphScene.renderer.getSize(size);
+			const rect = this.graphScene.renderer.domElement.getBoundingClientRect();
+			const x = (screenPos.x + 1) / 2 * size.x + rect.left;
+			const y = -(screenPos.y - 1) / 2 * size.y + rect.top;
+			this.interactionManager.tooltipManager.showFull(node, x, y);
+		}
+	}
+	/**
+	* Resize canvas and all dependent components
+	*/
+	resize(width, height) {
+		this.graphScene.resize(width, height);
+		this.pickBuffer.resize(width, height);
+		this.interactionManager.resize(width, height);
+	}
+	/**
+	* Get the unified clock for timing information
+	*/
+	getClock() {
+		return this.clock;
+	}
+	/**
+	* Get all nodes
+	*/
+	get nodes() {
+		return this.graphStore.getNodes();
+	}
+	/**
+	* Get all links
+	*/
+	get links() {
+		return this.graphStore.getLinks();
+	}
+	/**
+	* Get force simulation for external configuration (GUI binding)
+	*/
+	get simulation() {
+		return this.forceSimulation;
+	}
+	/**
+	* Get camera controller for external configuration
+	*/
+	get camera() {
+		return this.graphScene.camera;
+	}
+	/**
+	* Set camera mode (Orbit, Map, Fly)
+	*/
+	setCameraMode(mode) {
+		this.graphScene.camera.setMode(mode);
+	}
+	/**
+	* Animate camera to look at a specific target from a specific position
+	*/
+	async setCameraLookAt(position, target, transitionDuration) {
+		if (transitionDuration !== void 0) this.graphScene.camera.configureControls({ smoothTime: transitionDuration });
+		const posVec = new THREE.Vector3(position.x, position.y, position.z);
+		const targetVec = new THREE.Vector3(target.x, target.y, target.z);
+		await this.graphScene.camera.setLookAt(posVec, targetVec, true);
+	}
+	/**
+	* Focus camera on a specific target node 
+	*/
+	async setCameraFocus(target, distance, transitionDuration) {
+		const camPos = this.graphScene.camera.camera.position;
+		const targetVec = new THREE.Vector3(target.x, target.y, target.z);
+		const direction = new THREE.Vector3().subVectors(camPos, targetVec).normalize();
+		if (direction.lengthSq() < .001) direction.set(0, 0, 1);
+		const newPos = targetVec.clone().add(direction.multiplyScalar(distance));
+		await this.setCameraLookAt(newPos, targetVec, transitionDuration);
+	}
+	/**
+	* Cleanup
+	*/
+	dispose() {
+		this.stop();
+		this.graphScene.dispose();
+		this.interactionManager.dispose();
+		staticAssets.dispose();
+		this.simulationBuffers.dispose();
+		this.pickBuffer.dispose();
+		this.graphStore.clear();
+	}
+	calculateTextureSize(nodeCount) {
+		const size = Math.ceil(Math.sqrt(nodeCount));
+		return 2 ** Math.ceil(Math.log2(size));
+	}
+};
+
+//#endregion
+export { CameraMode, Clock, Engine, ForceSimulation, GraphScene, GraphStore, NodeState, PickBuffer, SimulationBuffers, StaticAssets, staticAssets, styleRegistry };