@fxhash/open-form-graph 0.0.2 → 0.0.4

package/dist/OpenFormGraph-Ccizmxbo.js

@@ -0,0 +1,2527 @@
+import { DEFAULT_GRAPH_CONFIG, VOID_DETACH_ID, VOID_ROOT_ID, useOpenFormGraph } from "./provider-CPq89n3a.js";
+import { useEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forceCenter, forceCollide, forceManyBody, forceSimulation } from "d3-force";
+import { EventEmitter, MappedArray, xorshiftString } from "@fxhash/utils";
+import groupBy from "lodash.groupby";
+import { scaleLinear, scaleLog } from "d3-scale";
+
+//#region src/util/canvas.ts
+/**
+* draws a circle on the canvas
+* @param ctx - The canvas rendering context
+* @param x - The x-coordinate of the circle's center
+* @param y - The y-coordinate of the circle's center
+* @param radius - The radius of the circle (default is 5)
+* @param options - Optional parameters for styling the circle
+* @param options.fill - Whether to fill the circle (default is true)
+* @param options.fillStyle - The fill color of the circle
+* @param options.stroke - Whether to stroke the circle (default is false)
+* @param options.strokeStyle - The stroke color of the circle
+* @param options.lineWidth - The width of the stroke (default is 0.2)
+* @returns void
+*/
+function circle(ctx, x, y, radius = 5, options) {
+	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2 } = options || {};
+	ctx.save();
+	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
+	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
+	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
+	ctx.beginPath();
+	ctx.arc(x, y, radius, 0, 2 * Math.PI);
+	ctx.closePath();
+	if (fill) ctx.fill();
+	if (stroke) ctx.stroke();
+	ctx.restore();
+}
+/**
+* draws a rectangle on the canvas
+* @param ctx - The canvas rendering context
+* @param x - The x-coordinate of the rectangle's top-left corner
+* @param y - The y-coordinate of the rectangle's top-left corner
+* @param width - The width of the rectangle
+* @param height - The height of the rectangle
+* @param options - Optional parameters for styling the rectangle
+* @param options.fill - Whether to fill the rectangle (default is true)
+* @param options.fillStyle - The fill color of the rectangle
+* @param options.stroke - Whether to stroke the rectangle (default is false)
+* @param options.strokeStyle - The stroke color of the rectangle
+* @param options.lineWidth - The width of the stroke (default is 0.2)
+* @param options.borderRadius - The radius of the corners (default is 0)
+* @returns void
+*/
+function rect(ctx, x, y, width, height, options) {
+	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2, borderRadius = 0 } = options || {};
+	ctx.save();
+	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
+	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
+	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
+	const r = Math.min(borderRadius, width / 2, height / 2);
+	ctx.beginPath();
+	if (r > 0) {
+		ctx.moveTo(x + r, y);
+		ctx.lineTo(x + width - r, y);
+		ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+		ctx.lineTo(x + width, y + height - r);
+		ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+		ctx.lineTo(x + r, y + height);
+		ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+		ctx.lineTo(x, y + r);
+		ctx.quadraticCurveTo(x, y, x + r, y);
+	} else ctx.rect(x, y, width, height);
+	ctx.closePath();
+	if (fill) ctx.fill();
+	if (stroke) ctx.stroke();
+	ctx.restore();
+}
+/**
+* draws an image on the canvas with optional border radius and opacity
+* @param ctx - The canvas rendering context
+* @param image - The HTMLImageElement to draw
+* @param x - The x-coordinate of the image's top-left corner
+* @param y - The y-coordinate of the image's top-left corner
+* @param width - The width of the image
+* @param height - The height of the image
+* @param borderRadius - The radius of the corners (default is 0)
+* @param opacity - The opacity of the image (default is 1.0)
+* @param bgColor - Optional background color to fill the clipped area
+* @returns void
+*/
+function img(ctx, image, x, y, width, height, borderRadius = 0, opacity = 1, bgColor) {
+	ctx.save();
+	ctx.beginPath();
+	ctx.globalAlpha = 1;
+	if (borderRadius > 0) {
+		const r = Math.min(borderRadius, width / 2, height / 2);
+		ctx.moveTo(x + r, y);
+		ctx.lineTo(x + width - r, y);
+		ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+		ctx.lineTo(x + width, y + height - r);
+		ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+		ctx.lineTo(x + r, y + height);
+		ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+		ctx.lineTo(x, y + r);
+		ctx.quadraticCurveTo(x, y, x + r, y);
+	} else ctx.rect(x, y, width, height);
+	ctx.closePath();
+	if (bgColor && opacity < 1) {
+		ctx.save();
+		ctx.fillStyle = bgColor;
+		ctx.fill();
+		ctx.restore();
+	}
+	ctx.clip();
+	ctx.globalAlpha = opacity;
+	ctx.drawImage(image, x, y, width, height);
+	ctx.restore();
+}
+function hexagon(ctx, x, y, radius, options) {
+	const { fill = true, fillStyle, stroke = false, strokeStyle, lineWidth = .2, rotation = 0, borderRadius = 0 } = options || {};
+	ctx.save();
+	if (fillStyle !== void 0) ctx.fillStyle = fillStyle;
+	if (strokeStyle !== void 0) ctx.strokeStyle = strokeStyle;
+	if (lineWidth !== void 0) ctx.lineWidth = lineWidth;
+	const sides = 6;
+	const angleStep = Math.PI * 2 / sides;
+	ctx.beginPath();
+	const points = [];
+	for (let i = 0; i < sides; i++) {
+		const angle = rotation + i * angleStep;
+		points.push({
+			x: x + radius * Math.cos(angle),
+			y: y + radius * Math.sin(angle)
+		});
+	}
+	if (borderRadius > 0) {
+		const maxBorderRadius = Math.min(borderRadius, radius / 3);
+		for (let i = 0; i < sides; i++) {
+			const current = points[i];
+			const next = points[(i + 1) % sides];
+			const prev = points[(i - 1 + sides) % sides];
+			const toPrev = {
+				x: prev.x - current.x,
+				y: prev.y - current.y
+			};
+			const toNext = {
+				x: next.x - current.x,
+				y: next.y - current.y
+			};
+			const lenPrev = Math.sqrt(toPrev.x * toPrev.x + toPrev.y * toPrev.y);
+			const lenNext = Math.sqrt(toNext.x * toNext.x + toNext.y * toNext.y);
+			const normPrev = {
+				x: toPrev.x / lenPrev,
+				y: toPrev.y / lenPrev
+			};
+			const normNext = {
+				x: toNext.x / lenNext,
+				y: toNext.y / lenNext
+			};
+			const cpPrev = {
+				x: current.x + normPrev.x * maxBorderRadius,
+				y: current.y + normPrev.y * maxBorderRadius
+			};
+			const cpNext = {
+				x: current.x + normNext.x * maxBorderRadius,
+				y: current.y + normNext.y * maxBorderRadius
+			};
+			if (i === 0) ctx.moveTo(cpPrev.x, cpPrev.y);
+			else ctx.lineTo(cpPrev.x, cpPrev.y);
+			ctx.quadraticCurveTo(current.x, current.y, cpNext.x, cpNext.y);
+		}
+	} else {
+		ctx.moveTo(points[0].x, points[0].y);
+		for (let i = 1; i < sides; i++) ctx.lineTo(points[i].x, points[i].y);
+	}
+	ctx.closePath();
+	if (fill) ctx.fill();
+	if (stroke) ctx.stroke();
+	ctx.restore();
+}
+
+//#endregion
+//#region src/util/color.ts
+/**
+* Some utility functions to handle colors
+*/
+function color(rgb) {
+	const colorHandler = function(arg) {
+		if (typeof arg === "number") return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${arg})`;
+		if (typeof arg === "function") {
+			const transformedRGB = arg(rgb);
+			return color(transformedRGB);
+		}
+		return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
+	};
+	colorHandler.rgb = rgb;
+	return colorHandler;
+}
+/**
+* Dims a color to white or black
+* @param color An array of 3 numbers representing RGB values (0-255)
+* @param dimFactor A value between 0 and 1 where 0 is completely black and 1 is the original color
+* @returns A new array with the dimmed RGB values
+*/
+function dim(factor = .6, white = true) {
+	const base = white ? 255 : 0;
+	return function(rgb) {
+		return [
+			Math.round(rgb[0] + (base - rgb[0]) * (1 - factor)),
+			Math.round(rgb[1] + (base - rgb[1]) * (1 - factor)),
+			Math.round(rgb[2] + (base - rgb[2]) * (1 - factor))
+		];
+	};
+}
+
+//#endregion
+//#region src/util/types.ts
+function isSimNode(node) {
+	return typeof node === "object" && "id" in node;
+}
+function getNodeId(node) {
+	return isSimNode(node) ? node.id : node.toString();
+}
+function getLinkId(link) {
+	return `${getNodeId(link.target)}-${getNodeId(link.source)}`;
+}
+function isSimLink(link) {
+	return typeof link === "object" && "source" in link && typeof link.source !== "string";
+}
+function isCustomHighlight(highlight) {
+	if (typeof highlight === "string") return false;
+	return true;
+}
+
+//#endregion
+//#region src/util/graph.ts
+function getParent(id, links) {
+	const linkToParent = links.maps.targetId.get(id);
+	if (!linkToParent) return null;
+	return getNodeId(linkToParent.source);
+}
+function getAllParentsUntil(nodeId, links, stopAtId) {
+	const parent = getParent(nodeId, links);
+	if (parent === null || parent === stopAtId) return [];
+	return [parent, ...getAllParentsUntil(parent, links, stopAtId)];
+}
+function getChildren(id, links) {
+	return (links.maps.sourceId.get(id) || []).map((link) => getNodeId(link.target));
+}
+function getClusterSize(id, links) {
+	const children = getChildren(id, links);
+	return children.reduce((acc, childId) => {
+		return acc + getClusterSize(childId, links);
+	}, children.length || 0);
+}
+function getNodeDepth(id, links) {
+	function getDepth(id$1, depth) {
+		const parent = getParent(id$1, links);
+		if (parent === null) return depth;
+		return getDepth(parent, depth + 1);
+	}
+	return getDepth(id, 0);
+}
+function getRootParent(id, links, stop) {
+	let currentId = id;
+	while (true) {
+		const parent = getParent(currentId, links);
+		if (stop && parent === stop) return currentId;
+		if (parent === null) return currentId;
+		currentId = parent;
+	}
+}
+function hasOnlyLeafs(id, links) {
+	return getChildren(id, links).every((childId) => getChildren(childId, links).length === 0);
+}
+function getNodeSubgraph(nodeId, nodes, links, rootId) {
+	const parentSet = /* @__PURE__ */ new Set();
+	const childSet = /* @__PURE__ */ new Set();
+	const subLinks = /* @__PURE__ */ new Set();
+	let currentId = nodeId;
+	while (currentId !== rootId) {
+		const parentLink = links.maps.targetId.get(currentId);
+		if (!parentLink) break;
+		const parentId = getNodeId(parentLink.source);
+		if (parentSet.has(parentId)) break;
+		parentSet.add(parentId);
+		subLinks.add(parentLink);
+		currentId = parentId;
+	}
+	function collectChildren(id) {
+		for (const link of links.values) {
+			const sourceId = getNodeId(link.source);
+			const targetId = getNodeId(link.target);
+			if (sourceId === id && !childSet.has(targetId)) {
+				childSet.add(targetId);
+				subLinks.add(link);
+				collectChildren(targetId);
+			}
+		}
+	}
+	collectChildren(nodeId);
+	const validIds = new Set([
+		...parentSet,
+		nodeId,
+		...childSet
+	]);
+	const filteredLinks = Array.from(subLinks).filter((link) => {
+		const sourceId = getNodeId(link.source);
+		const targetId = getNodeId(link.target);
+		return validIds.has(sourceId.toString()) && validIds.has(targetId.toString());
+	});
+	const subNodes = Array.from(validIds).map((id) => nodes.maps.id.get(id)).filter(Boolean);
+	return newGraphData({
+		nodes: subNodes,
+		links: filteredLinks
+	});
+}
+
+//#endregion
+//#region src/util/data.ts
+const images = [];
+function generateTree(maxNodes, maxChildren) {
+	const nodes = [];
+	const links = [];
+	let index$1 = 0;
+	function createNode(label) {
+		const isRoot = label === VOID_ROOT_ID;
+		return {
+			id: (isRoot ? VOID_ROOT_ID : index$1++).toString(),
+			label,
+			imgSrc: isRoot ? void 0 : images[index$1 % images.length]
+		};
+	}
+	const root = createNode(VOID_ROOT_ID);
+	nodes.push(root);
+	const queue = [root];
+	while (queue.length > 0 && nodes.length < maxNodes) {
+		const parent = queue.shift();
+		const rand = Math.random();
+		const biased = Math.floor(Math.pow(rand, 2) * (maxChildren + 1));
+		const childrenCount = Math.min(biased, maxChildren);
+		for (let i = 0; i < childrenCount; i++) {
+			if (nodes.length >= maxNodes) break;
+			const child = createNode(`Node ${nodes.length}`);
+			nodes.push(child);
+			links.push({
+				source: parent.id,
+				target: child.id
+			});
+			queue.push(child);
+		}
+	}
+	return {
+		nodes,
+		links
+	};
+}
+function isSpecialNode(node) {
+	const state = node.state;
+	return !!(state?.emitterNode || state?.sessionNode || state?.rootNode || state?.groupNode);
+}
+function groupGraphNodes(startId, nodes, links, options = {
+	skip: false,
+	existingGroups: [],
+	openedGroups: []
+}) {
+	if (options.skip) return {
+		nodes,
+		links
+	};
+	const visited = /* @__PURE__ */ new Set();
+	const nodesToRemove = /* @__PURE__ */ new Set();
+	function markRemovableNodes(id) {
+		if (visited.has(id)) return;
+		visited.add(id);
+		const children = getChildren(id, links);
+		let removableChildren = [];
+		for (const childId of children) {
+			const child = nodes.maps.id.get(childId);
+			if (!child) continue;
+			if ((child.clusterSize || 0) < 1 && !isSpecialNode(child)) removableChildren.push(childId);
+		}
+		if (removableChildren.length > 3) removableChildren.forEach((id$1) => nodesToRemove.add(id$1));
+	}
+	markRemovableNodes(startId);
+	const groupedNodesToRemove = groupBy(Array.from(nodesToRemove), (id) => {
+		const sourceLink = links.maps.targetId.get(id);
+		return isSimNode(sourceLink?.source) ? sourceLink?.source.id : sourceLink?.source.toString();
+	});
+	const GROUP_CHUNK_SIZE = 100;
+	const groupNodesToAdd = [];
+	const groupLinksToAdd = [];
+	function createGroupChunkNodes(groupSourceId, groupContent) {
+		const chunks = [];
+		for (let i = 0; i < groupContent.length; i += GROUP_CHUNK_SIZE) chunks.push(groupContent.slice(i, i + GROUP_CHUNK_SIZE));
+		chunks.forEach((chunk, index$1) => {
+			const chunkId = `${groupSourceId}-group-${index$1}`;
+			if (options.openedGroups?.includes(chunkId)) {
+				chunk.forEach((id) => {
+					nodesToRemove.delete(id);
+				});
+				return;
+			}
+			const existingGroup = options.existingGroups?.find((n) => n.id === chunkId);
+			const originNode = nodes.maps.id.get(groupSourceId);
+			const groupNode = {
+				...existingGroup,
+				x: existingGroup?.x || originNode?.x || 0,
+				y: existingGroup?.y || originNode?.y || 0,
+				id: chunkId,
+				clusterSize: chunk.length,
+				state: {
+					...existingGroup?.state,
+					groupNode: true,
+					groupContent: chunk,
+					collapsed: true
+				}
+			};
+			groupNodesToAdd.push(groupNode);
+			groupLinksToAdd.push({
+				source: nodes.maps.id.get(groupSourceId),
+				target: groupNode
+			});
+		});
+	}
+	Object.keys(groupedNodesToRemove).forEach((groupSourceId) => {
+		const groupContent = groupedNodesToRemove[groupSourceId];
+		createGroupChunkNodes(groupSourceId, groupContent);
+	});
+	const _nodes = nodes.values.filter((n) => !nodesToRemove.has(n.id));
+	const _links = links.values.filter((l) => {
+		const targetId = isSimNode(l.target) ? l.target.id : l.target.toString();
+		return !nodesToRemove.has(targetId);
+	});
+	return newGraphData({
+		nodes: [..._nodes, ...groupNodesToAdd],
+		links: [..._links, ...groupLinksToAdd]
+	});
+}
+function getPrunedData(startId, nodes, links, highlights = [], options = {
+	nodeVisibility: "all",
+	emittedNodes: [],
+	groupNodes: [],
+	skipGrouping: false,
+	openedGroups: []
+}) {
+	const visibleNodes = [];
+	const visibleLinks = [];
+	const visited = /* @__PURE__ */ new Set();
+	const isLocked = (node) => node.status === "LOCKED" || node.status === "EVOLVED";
+	const isEmitted = (node) => options.emittedNodes.includes(node.id);
+	const isOwnedHighlight = (nodeId) => highlights.find((h) => h.id === nodeId && h.type === "mine");
+	const isOnSale = (node) => highlights.find((h) => h.id === node.id && h.type === "on-sale");
+	const isHighlighted = (nodeId, type) => highlights.some((h) => type ? h.id === nodeId && h.type === type : h.id === nodeId);
+	const isChildHighlighted = (nodeId, type) => {
+		const children = getChildren(nodeId, links);
+		if (children.some((h) => isHighlighted(h, type))) return true;
+		else return children.some((c) => isChildHighlighted(c, type));
+	};
+	function visbilityFilter() {
+		switch (options.nodeVisibility) {
+			case "on-sale": return (node) => !isEmitted(node) && !isSpecialNode(node) && !isOnSale(node) && !isChildHighlighted(node.id, "on-sale");
+			case "locked": return (node) => !isEmitted(node) && !isSpecialNode(node) && !isLocked(node) && !isChildHighlighted(node.id, "locked");
+			case "mine": return (node) => {
+				return !isEmitted(node) && !isSpecialNode(node) && !isOwnedHighlight(node.id) && !isChildHighlighted(node.id, "mine");
+			};
+			case "all":
+			default: return () => false;
+		}
+	}
+	const liquidatedFilter = (node) => {
+		return node.status === "LIQUIDATED" && !highlights.find((h) => h.id === node.id);
+	};
+	(function traverseTree(node = nodes.maps.id.get(startId)) {
+		if (!node || visited.has(node.id)) return;
+		visited.add(node.id);
+		if (liquidatedFilter(node)) return;
+		if (visbilityFilter()(node)) return;
+		visibleNodes.push(node);
+		if (node?.state?.collapsed) return;
+		const childLinks = links.maps.sourceId.get(node.id) || [];
+		for (const link of childLinks) {
+			const targetNode = isSimNode(link.target) ? link.target : nodes.maps.id.get(link.target.toString());
+			if (!targetNode) continue;
+			if (liquidatedFilter(targetNode)) continue;
+			if (visbilityFilter()(targetNode)) continue;
+			visibleLinks.push(link);
+			traverseTree(targetNode);
+		}
+	})();
+	const visible = newGraphData({
+		nodes: visibleNodes,
+		links: visibleLinks
+	});
+	return groupGraphNodes(startId, visible.nodes, visible.links, {
+		skip: options.skipGrouping || false,
+		existingGroups: options.groupNodes,
+		openedGroups: options.openedGroups
+	});
+}
+/**
+* Automatically identifies root nodes and builds a nested structure
+* @param nodes Array of raw nodes
+* @param links Array of links between nodes
+* @returns Array of nested nodes starting from identified roots
+*/
+function buildTreeFromGraphData(nodes, links) {
+	const nodeMap = /* @__PURE__ */ new Map();
+	nodes.forEach((node) => nodeMap.set(node.id, node));
+	const childrenMap = /* @__PURE__ */ new Map();
+	const parentMap = /* @__PURE__ */ new Map();
+	nodes.forEach((node) => {
+		childrenMap.set(node.id, []);
+		parentMap.set(node.id, []);
+	});
+	links.forEach((link) => {
+		if (nodeMap.has(link.source) && nodeMap.has(link.target)) {
+			const children = childrenMap.get(link.source) || [];
+			if (!children.includes(link.target)) {
+				children.push(link.target);
+				childrenMap.set(link.source, children);
+			}
+			const parents = parentMap.get(link.target) || [];
+			if (!parents.includes(link.source)) {
+				parents.push(link.source);
+				parentMap.set(link.target, parents);
+			}
+		}
+	});
+	const rootHashes = [];
+	nodeMap.forEach((_, hash) => {
+		if ((parentMap.get(hash) || []).length === 0) rootHashes.push(hash);
+	});
+	const buildNode = (hash, visited = /* @__PURE__ */ new Set()) => {
+		if (visited.has(hash)) return null;
+		visited.add(hash);
+		const node = nodeMap.get(hash);
+		if (!node) return null;
+		const childHashes = childrenMap.get(hash) || [];
+		const nestedChildren = [];
+		childHashes.forEach((childHash) => {
+			const childNode = buildNode(childHash, new Set([...visited]));
+			if (childNode) nestedChildren.push(childNode);
+		});
+		return {
+			...node,
+			children: nestedChildren
+		};
+	};
+	const result = [];
+	rootHashes.forEach((rootHash) => {
+		const nestedRoot = buildNode(rootHash);
+		if (nestedRoot) result.push(nestedRoot);
+	});
+	const processedNodes = /* @__PURE__ */ new Set();
+	const markProcessed = (node) => {
+		processedNodes.add(node.id);
+		node.children.forEach(markProcessed);
+	};
+	result.forEach(markProcessed);
+	nodeMap.forEach((_, hash) => {
+		if (!processedNodes.has(hash)) {
+			const orphanedRoot = buildNode(hash);
+			if (orphanedRoot) result.push(orphanedRoot);
+		}
+	});
+	return result;
+}
+/**
+* Recursively retrieves all parents of a node from a graph data structure
+* @param {string} nodeHash - The hash of the node to find parents for
+* @param {RawNode[]} nodes - Array of nodes in the graph
+* @param {RawLink[]} links - Array of links connecting the nodes
+* @returns {RawNode[]} - Array of parent nodes
+*/
+function searchParents(nodeHash, nodes, links) {
+	const visited = /* @__PURE__ */ new Set();
+	function findParents(hash) {
+		if (visited.has(hash)) return [];
+		visited.add(hash);
+		const immediateParents = links.filter((link) => link.target === hash).map((link) => link.source);
+		const parentNodes = nodes.filter((node) => immediateParents.includes(node.id));
+		const ancestorNodes = immediateParents.flatMap((parentHash) => findParents(parentHash));
+		return [...parentNodes, ...ancestorNodes];
+	}
+	return findParents(nodeHash);
+}
+
+//#endregion
+//#region src/util/img.ts
+function loadHTMLImageElement(src) {
+	return new Promise((resolve, reject) => {
+		const img$1 = new Image();
+		img$1.onload = () => resolve(img$1);
+		img$1.onerror = reject;
+		img$1.src = src;
+	});
+}
+
+//#endregion
+//#region src/util/highlights.ts
+const blue = [
+	94,
+	112,
+	235
+];
+const red = [
+	238,
+	125,
+	121
+];
+const redred = [
+	255,
+	0,
+	0
+];
+var Highlight = class {
+	static owner = (id) => {
+		return {
+			id,
+			type: "mine",
+			strokeColor: red
+		};
+	};
+	static onSale = (id) => {
+		return {
+			id,
+			type: "on-sale",
+			strokeColor: blue
+		};
+	};
+	static primary = (id) => {
+		return {
+			id,
+			type: "any",
+			linkTo: id,
+			scale: 4,
+			strokeColor: redred,
+			linkColor: redred,
+			onTop: true,
+			isDetached: true
+		};
+	};
+	static minted = (id) => {
+		return {
+			id,
+			type: "any",
+			linkTo: id,
+			scale: 1.5,
+			strokeColor: redred,
+			linkColor: redred,
+			isDetached: true,
+			onTop: true
+		};
+	};
+};
+
+//#endregion
+//#region src/sim/_interfaces.ts
+var OpenGraphEventEmitter = class extends EventEmitter {};
+
+//#endregion
+//#region src/sim/TransformCanvas.ts
+const MIN_ZOOM = .1;
+const MAX_ZOOM = 10;
+const CLICK_THRESHOLD = 5;
+const ANIMATION_SPEED = .07;
+const DRAG_ANIMATION_SPEED = .5;
+const ANIMATION_THRESHOLD = {
+	x: .5,
+	y: .5,
+	scale: .001
+};
+const MOMENTUM_DAMPING = .91;
+const MIN_VELOCITY = .5;
+var TransformCanvas = class {
+	canvas;
+	transform = {
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	targetTransform = {
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	isAnimating = false;
+	animationFrame = null;
+	focus = null;
+	offset = {
+		x: 0,
+		y: 0
+	};
+	isDragging = false;
+	dragStart = null;
+	hasMoved = false;
+	lastPointerPos = {
+		x: 0,
+		y: 0
+	};
+	lastMovePos = {
+		x: 0,
+		y: 0
+	};
+	velocity = {
+		x: 0,
+		y: 0
+	};
+	lastDragTime = 0;
+	momentumFrame = null;
+	touchStart = null;
+	pinchStartDist = null;
+	pinchStartScale = 1;
+	noInteraction = false;
+	dpr = 1;
+	resizeObserver = null;
+	mediaQueryList = null;
+	onUpdate;
+	onClick;
+	onMove;
+	constructor(canvas, options) {
+		this.canvas = canvas;
+		this.onUpdate = options?.onUpdate;
+		this.onClick = options?.onClick;
+		this.onMove = options?.onMove;
+		this.offset = options?.offset || {
+			x: 0,
+			y: 0
+		};
+		this.dpr = window.devicePixelRatio || 1;
+		this.bindEventHandlers();
+		this.attachEventListeners();
+		this.setupDPRMonitoring();
+	}
+	bindEventHandlers() {
+		this.handleWheel = this.handleWheel.bind(this);
+		this.handleMouseDown = this.handleMouseDown.bind(this);
+		this.handleMouseMove = this.handleMouseMove.bind(this);
+		this.handleMouseUp = this.handleMouseUp.bind(this);
+		this.handleCanvasClick = this.handleCanvasClick.bind(this);
+		this.handleTouchStart = this.handleTouchStart.bind(this);
+		this.handleTouchMove = this.handleTouchMove.bind(this);
+		this.handleTouchEnd = this.handleTouchEnd.bind(this);
+	}
+	attachEventListeners() {
+		this.canvas.addEventListener("wheel", this.handleWheel, { passive: false });
+		this.canvas.addEventListener("mousedown", this.handleMouseDown);
+		this.canvas.addEventListener("click", this.handleCanvasClick);
+		window.addEventListener("mousemove", this.handleMouseMove);
+		window.addEventListener("mouseup", this.handleMouseUp);
+		this.canvas.addEventListener("touchstart", this.handleTouchStart, { passive: false });
+		this.canvas.addEventListener("touchmove", this.handleTouchMove, { passive: false });
+		this.canvas.addEventListener("touchend", this.handleTouchEnd, { passive: false });
+		this.canvas.addEventListener("touchcancel", this.handleTouchEnd, { passive: false });
+	}
+	setupDPRMonitoring() {
+		if (typeof ResizeObserver !== "undefined") {
+			this.resizeObserver = new ResizeObserver(() => {
+				this.updateDPR();
+			});
+			this.resizeObserver.observe(this.canvas);
+		}
+		const updateDPRFromMediaQuery = () => {
+			this.updateDPR();
+		};
+		const dpr = window.devicePixelRatio || 1;
+		this.mediaQueryList = window.matchMedia(`(resolution: ${dpr}dppx)`);
+		if (this.mediaQueryList.addEventListener) this.mediaQueryList.addEventListener("change", updateDPRFromMediaQuery);
+	}
+	updateDPR() {
+		const newDPR = window.devicePixelRatio || 1;
+		if (newDPR !== this.dpr) {
+			const oldDPR = this.dpr;
+			this.dpr = newDPR;
+			const scale = newDPR / oldDPR;
+			this.transform.x *= scale;
+			this.transform.y *= scale;
+			this.targetTransform.x *= scale;
+			this.targetTransform.y *= scale;
+			this.onUpdate?.(this.transform);
+			if (this.mediaQueryList) {
+				const updateDPRFromMediaQuery = () => {
+					this.updateDPR();
+				};
+				if (this.mediaQueryList.removeEventListener) this.mediaQueryList.removeEventListener("change", updateDPRFromMediaQuery);
+				this.mediaQueryList = window.matchMedia(`(resolution: ${newDPR}dppx)`);
+				if (this.mediaQueryList.addEventListener) this.mediaQueryList.addEventListener("change", updateDPRFromMediaQuery);
+			}
+		}
+	}
+	toCanvasCoords(clientX, clientY) {
+		const rect$1 = this.canvas.getBoundingClientRect();
+		return {
+			x: (clientX - rect$1.left) * this.dpr,
+			y: (clientY - rect$1.top) * this.dpr
+		};
+	}
+	toCSSCoords(clientX, clientY) {
+		const rect$1 = this.canvas.getBoundingClientRect();
+		return {
+			x: clientX - rect$1.left,
+			y: clientY - rect$1.top
+		};
+	}
+	startMomentum() {
+		if (Math.abs(this.velocity.x) > MIN_VELOCITY || Math.abs(this.velocity.y) > MIN_VELOCITY) {
+			if (!this.momentumFrame) this.momentumFrame = requestAnimationFrame(this.applyMomentum);
+		}
+	}
+	applyMomentum = () => {
+		this.targetTransform.x += this.velocity.x * this.dpr;
+		this.targetTransform.y += this.velocity.y * this.dpr;
+		this.velocity.x *= MOMENTUM_DAMPING;
+		this.velocity.y *= MOMENTUM_DAMPING;
+		if (Math.abs(this.velocity.x) > MIN_VELOCITY || Math.abs(this.velocity.y) > MIN_VELOCITY) {
+			this.startAnimation();
+			this.momentumFrame = requestAnimationFrame(this.applyMomentum);
+		} else {
+			this.velocity = {
+				x: 0,
+				y: 0
+			};
+			this.momentumFrame = null;
+		}
+	};
+	lerp(a, b, t) {
+		return a + (b - a) * t;
+	}
+	animateTransform = () => {
+		const target = this.focus?.() || this.targetTransform;
+		const prev = this.transform;
+		const animationSpeed = this.isDragging ? DRAG_ANIMATION_SPEED : ANIMATION_SPEED;
+		const next = {
+			x: this.lerp(prev.x, target.x, animationSpeed / this.dpr),
+			y: this.lerp(prev.y, target.y, animationSpeed / this.dpr),
+			scale: this.lerp(prev.scale, target.scale, animationSpeed / this.dpr)
+		};
+		if (Math.abs(next.x - target.x) < ANIMATION_THRESHOLD.x && Math.abs(next.y - target.y) < ANIMATION_THRESHOLD.y && Math.abs(next.scale - target.scale) < ANIMATION_THRESHOLD.scale) {
+			this.transform = { ...target };
+			this.stopAnimation();
+		} else {
+			this.transform = next;
+			this.onUpdate?.(this.transform);
+			this.animationFrame = requestAnimationFrame(this.animateTransform);
+		}
+	};
+	startAnimation() {
+		if (!this.isAnimating) {
+			this.isAnimating = true;
+			this.animationFrame = requestAnimationFrame(this.animateTransform);
+		}
+	}
+	stopAnimation() {
+		this.isAnimating = false;
+		this.focus = null;
+		if (this.animationFrame) {
+			cancelAnimationFrame(this.animationFrame);
+			this.animationFrame = null;
+		}
+	}
+	interruptAnimation() {
+		this.targetTransform = { ...this.transform };
+		if (this.isAnimating) this.stopAnimation();
+		if (this.momentumFrame) {
+			cancelAnimationFrame(this.momentumFrame);
+			this.momentumFrame = null;
+			this.velocity = {
+				x: 0,
+				y: 0
+			};
+		}
+	}
+	handleWheel(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (this.noInteraction) return;
+		if (this.momentumFrame) {
+			cancelAnimationFrame(this.momentumFrame);
+			this.momentumFrame = null;
+			this.velocity = {
+				x: 0,
+				y: 0
+			};
+		}
+		if (this.focus) {
+			this.interruptAnimation();
+			this.focus = null;
+		}
+		const canvasCoords = this.toCanvasCoords(e.clientX, e.clientY);
+		const scaleFactor = e.deltaY > 0 ? .95 : 1.05;
+		const newScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, this.targetTransform.scale * scaleFactor));
+		const { x: currentX, y: currentY, scale: currentScale } = this.transform;
+		const worldX = (canvasCoords.x - currentX - this.offset.x * currentScale) / currentScale;
+		const worldY = (canvasCoords.y - currentY - this.offset.y * currentScale) / currentScale;
+		const newX = canvasCoords.x - worldX * newScale - this.offset.x * newScale;
+		const newY = canvasCoords.y - worldY * newScale - this.offset.y * newScale;
+		this.targetTransform = {
+			x: newX,
+			y: newY,
+			scale: newScale
+		};
+		this.startAnimation();
+	}
+	handleMouseDown(e) {
+		if (this.noInteraction) return;
+		this.interruptAnimation();
+		this.isDragging = true;
+		this.hasMoved = false;
+		this.dragStart = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		this.lastPointerPos = {
+			x: e.clientX,
+			y: e.clientY
+		};
+	}
+	handleMouseMove(e) {
+		if (this.noInteraction) return;
+		this.lastMovePos = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		const cssCoords = this.toCSSCoords(e.clientX, e.clientY);
+		this.onMove?.(cssCoords.x, cssCoords.y);
+		if (!this.isDragging || !this.dragStart) return;
+		const dx = e.clientX - this.dragStart.x;
+		const dy = e.clientY - this.dragStart.y;
+		if (Math.abs(dx) > CLICK_THRESHOLD || Math.abs(dy) > CLICK_THRESHOLD) {
+			this.hasMoved = true;
+			const deltaX = (e.clientX - this.lastPointerPos.x) * this.dpr;
+			const deltaY = (e.clientY - this.lastPointerPos.y) * this.dpr;
+			this.targetTransform.x += deltaX;
+			this.targetTransform.y += deltaY;
+			const now = Date.now();
+			const dt = now - this.lastDragTime;
+			if (dt > 0 && dt < 100) {
+				this.velocity.x = deltaX / dt * 16;
+				this.velocity.y = deltaY / dt * 16;
+			}
+			this.lastPointerPos = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			this.lastDragTime = now;
+			this.startAnimation();
+		}
+	}
+	handleMouseUp(e) {
+		if (this.isDragging && this.hasMoved) this.startMomentum();
+		this.isDragging = false;
+		this.dragStart = null;
+	}
+	handleCanvasClick(e) {
+		if (this.noInteraction || this.hasMoved) return;
+		const cssCoords = this.toCSSCoords(e.clientX, e.clientY);
+		this.onClick?.(cssCoords.x, cssCoords.y);
+	}
+	handleTouchStart(e) {
+		if (this.noInteraction) return;
+		e.preventDefault();
+		this.interruptAnimation();
+		if (e.touches.length === 1) {
+			const touch = e.touches[0];
+			this.isDragging = true;
+			this.hasMoved = false;
+			this.touchStart = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.lastPointerPos = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.lastMovePos = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+		} else if (e.touches.length === 2) {
+			this.isDragging = false;
+			const [t1, t2] = Array.from(e.touches);
+			this.pinchStartDist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+			this.pinchStartScale = this.targetTransform.scale;
+		}
+	}
+	handleTouchMove(e) {
+		if (this.noInteraction) return;
+		e.preventDefault();
+		if (e.touches.length === 1 && this.isDragging && this.touchStart) {
+			const touch = e.touches[0];
+			const dx = touch.clientX - this.touchStart.x;
+			const dy = touch.clientY - this.touchStart.y;
+			if (Math.abs(dx) > CLICK_THRESHOLD || Math.abs(dy) > CLICK_THRESHOLD) {
+				this.hasMoved = true;
+				const deltaX = touch.clientX - this.lastPointerPos.x;
+				const deltaY = touch.clientY - this.lastPointerPos.y;
+				this.targetTransform.x += deltaX * this.dpr;
+				this.targetTransform.y += deltaY * this.dpr;
+				const now = Date.now();
+				const dt = now - this.lastDragTime;
+				if (dt > 0 && dt < 100) {
+					this.velocity.x = deltaX / dt * 16;
+					this.velocity.y = deltaY / dt * 16;
+				}
+				this.lastPointerPos = {
+					x: touch.clientX,
+					y: touch.clientY
+				};
+				this.lastMovePos = {
+					x: touch.clientX,
+					y: touch.clientY
+				};
+				this.lastDragTime = now;
+				this.startAnimation();
+				const cssCoords = this.toCSSCoords(touch.clientX, touch.clientY);
+				this.onMove?.(cssCoords.x, cssCoords.y);
+			}
+		} else if (e.touches.length === 2 && this.pinchStartDist != null) {
+			if (this.momentumFrame) {
+				cancelAnimationFrame(this.momentumFrame);
+				this.momentumFrame = null;
+				this.velocity = {
+					x: 0,
+					y: 0
+				};
+			}
+			const [t1, t2] = Array.from(e.touches);
+			let newScale = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY) / this.pinchStartDist * this.pinchStartScale;
+			newScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newScale));
+			const centerX = (t1.clientX + t2.clientX) / 2;
+			const centerY = (t1.clientY + t2.clientY) / 2;
+			const canvasCenter = this.toCanvasCoords(centerX, centerY);
+			const { x: currentX, y: currentY, scale: currentScale } = this.transform;
+			const worldX = (canvasCenter.x - currentX - this.offset.x * currentScale) / currentScale;
+			const worldY = (canvasCenter.y - currentY - this.offset.y * currentScale) / currentScale;
+			const newX = canvasCenter.x - worldX * newScale - this.offset.x * newScale;
+			const newY = canvasCenter.y - worldY * newScale - this.offset.y * newScale;
+			this.targetTransform = {
+				x: newX,
+				y: newY,
+				scale: newScale
+			};
+			this.startAnimation();
+		}
+	}
+	handleTouchEnd(e) {
+		if (this.noInteraction) return;
+		if (e.touches.length === 0) {
+			if (this.isDragging && this.hasMoved) this.startMomentum();
+			else if (this.isDragging && !this.hasMoved && this.onClick && this.touchStart) {
+				const cssCoords = this.toCSSCoords(this.touchStart.x, this.touchStart.y);
+				this.onClick(cssCoords.x, cssCoords.y);
+			}
+			this.isDragging = false;
+			this.touchStart = null;
+			this.hasMoved = false;
+			this.pinchStartDist = null;
+		} else if (e.touches.length === 1) {
+			const touch = e.touches[0];
+			this.isDragging = true;
+			this.hasMoved = false;
+			this.touchStart = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.lastPointerPos = {
+				x: touch.clientX,
+				y: touch.clientY
+			};
+			this.pinchStartDist = null;
+			this.velocity = {
+				x: 0,
+				y: 0
+			};
+			this.lastDragTime = Date.now();
+		}
+	}
+	resetZoom() {
+		this.targetTransform = {
+			x: 0,
+			y: 0,
+			scale: 1
+		};
+		this.startAnimation();
+	}
+	transformTo(update) {
+		this.targetTransform = {
+			...this.targetTransform,
+			...update
+		};
+		this.startAnimation();
+	}
+	getTransformationFromWorld(worldX, worldY, newScale) {
+		const scale = newScale ?? this.transform.scale;
+		const x = this.canvas.width / 2 + this.offset.x * this.dpr - worldX * scale - (this.canvas.width / 2 + this.offset.x * this.dpr) * scale;
+		const y = this.canvas.height / 2 + this.offset.y * this.dpr - worldY * scale - (this.canvas.height / 2 + this.offset.y * this.dpr) * scale;
+		return {
+			x,
+			y,
+			scale
+		};
+	}
+	transformToWorld(worldX, worldY, newScale) {
+		const transform = this.getTransformationFromWorld(worldX, worldY, newScale);
+		this.transformTo(transform);
+	}
+	trackCursor() {
+		const cssCoords = this.toCSSCoords(this.lastMovePos.x, this.lastMovePos.y);
+		this.onMove?.(cssCoords.x, cssCoords.y);
+	}
+	setNoInteraction(noInteraction) {
+		this.noInteraction = noInteraction;
+		if (noInteraction) {
+			this.isDragging = false;
+			this.dragStart = null;
+		}
+	}
+	focusOn(focus) {
+		this.focus = focus;
+		if (focus) {
+			const _focus = focus;
+			this.focus = () => {
+				const worldFocus = _focus();
+				if (!worldFocus) return null;
+				return this.getTransformationFromWorld(worldFocus.x, worldFocus.y, worldFocus.scale);
+			};
+			this.startAnimation();
+		}
+	}
+	resetFocus() {
+		this.focus = null;
+	}
+	destroy() {
+		this.stopAnimation();
+		if (this.momentumFrame) {
+			cancelAnimationFrame(this.momentumFrame);
+			this.momentumFrame = null;
+		}
+		this.canvas.removeEventListener("wheel", this.handleWheel);
+		this.canvas.removeEventListener("mousedown", this.handleMouseDown);
+		this.canvas.removeEventListener("click", this.handleCanvasClick);
+		this.canvas.removeEventListener("touchstart", this.handleTouchStart);
+		this.canvas.removeEventListener("touchmove", this.handleTouchMove);
+		this.canvas.removeEventListener("touchend", this.handleTouchEnd);
+		this.canvas.removeEventListener("touchcancel", this.handleTouchEnd);
+		window.removeEventListener("mousemove", this.handleMouseMove);
+		window.removeEventListener("mouseup", this.handleMouseUp);
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = null;
+		}
+		if (this.mediaQueryList) {
+			const updateDPRFromMediaQuery = () => {
+				this.updateDPR();
+			};
+			if (this.mediaQueryList.removeEventListener) this.mediaQueryList.removeEventListener("change", updateDPRFromMediaQuery);
+			this.mediaQueryList = null;
+		}
+	}
+	getTransform() {
+		return { ...this.transform };
+	}
+	getTargetTransform() {
+		return { ...this.targetTransform };
+	}
+	getFocus() {
+		return this.focus ? { ...this.focus } : null;
+	}
+	getIsDragging() {
+		return this.isDragging;
+	}
+	setOffset(offset) {
+		this.offset = offset;
+	}
+};
+
+//#endregion
+//#region src/_types.ts
+function newGraphData(data) {
+	return {
+		nodes: new MappedArray({
+			id: {
+				getKey: (node) => node.id,
+				multi: false
+			},
+			collapsed: {
+				getKey: (node) => (!!node.state?.collapsed).toString(),
+				multi: true
+			},
+			groupNode: {
+				getKey: (node) => (!!node.state?.groupNode).toString(),
+				multi: true
+			}
+		}, data?.nodes),
+		links: new MappedArray({
+			targetId: {
+				getKey: (link) => (isSimNode(link.target) ? link.target.id : link.target).toString(),
+				multi: false
+			},
+			linkId: {
+				getKey: (link) => getLinkId(link),
+				multi: false
+			},
+			sourceId: {
+				getKey: (link) => (isSimNode(link.source) ? link.source.id : link.source).toString(),
+				multi: true
+			}
+		}, data?.links)
+	};
+}
+
+//#endregion
+//#region src/util/math.ts
+function getRadialPoint(r, cx, cy, angle = Math.random() * 2 * Math.PI) {
+	return {
+		x: cx + r * Math.cos(angle),
+		y: cy + r * Math.sin(angle)
+	};
+}
+function getAngle(cx, cy, x, y) {
+	return Math.atan2(y - cy, x - cx);
+}
+
+//#endregion
+//#region src/sim/asymmetric-link.ts
+function constant(x) {
+	return function() {
+		return x;
+	};
+}
+function jiggle(random) {
+	return (random() - .5) * 1e-6;
+}
+function index(d) {
+	return d.index;
+}
+function find(nodeById, nodeId) {
+	const node = nodeById.get(nodeId);
+	if (!node) throw new Error("node not found: " + nodeId);
+	return node;
+}
+function asymmetricLinks(links) {
+	let id = index;
+	let strength = defaultStrength;
+	let strengths;
+	let distance = constant(30);
+	let distances;
+	let nodes;
+	let count;
+	let bias;
+	let random;
+	let iterations = 1;
+	if (links == null) links = [];
+	function defaultStrength(link) {
+		return 1 / Math.min(count[link.source.index], count[link.target.index]);
+	}
+	function force(alpha) {
+		for (let k = 0, n = links.length; k < iterations; ++k) for (let i = 0; i < n; ++i) {
+			const link = links[i];
+			const source = link.source;
+			const target = link.target;
+			let x = target.x + target.vx - source.x - source.vx || jiggle(random);
+			let y = target.y + target.vy - source.y - source.vy || jiggle(random);
+			let l = Math.sqrt(x * x + y * y);
+			l = (l - distances[i]) / l * alpha;
+			x *= l;
+			y *= l;
+			const b = bias[i];
+			const strengthValue = strengths[i];
+			let s0, s1;
+			if (Array.isArray(strengthValue)) [s0, s1] = strengthValue;
+			else s0 = s1 = strengthValue;
+			target.vx -= x * b * s0;
+			target.vy -= y * b * s0;
+			source.vx += x * (1 - b) * s1;
+			source.vy += y * (1 - b) * s1;
+		}
+	}
+	function initialize() {
+		if (!nodes) return;
+		const n = nodes.length;
+		const m = links.length;
+		const nodeById = new Map(nodes.map((d, i) => [id(d, i, nodes), d]));
+		count = new Array(n).fill(0);
+		for (let i = 0; i < m; ++i) {
+			const link = links[i];
+			link.index = i;
+			if (typeof link.source !== "object") link.source = find(nodeById, link.source);
+			if (typeof link.target !== "object") link.target = find(nodeById, link.target);
+			count[link.source.index]++;
+			count[link.target.index]++;
+		}
+		bias = new Array(m);
+		for (let i = 0; i < m; ++i) {
+			const link = links[i];
+			const sourceCount = count[link.source.index];
+			const targetCount = count[link.target.index];
+			bias[i] = sourceCount / (sourceCount + targetCount);
+		}
+		strengths = new Array(m);
+		initializeStrength();
+		distances = new Array(m);
+		initializeDistance();
+	}
+	function initializeStrength() {
+		if (!nodes) return;
+		for (let i = 0, n = links.length; i < n; ++i) strengths[i] = strength(links[i], i, links);
+	}
+	function initializeDistance() {
+		if (!nodes) return;
+		for (let i = 0, n = links.length; i < n; ++i) distances[i] = +distance(links[i], i, links);
+	}
+	force.initialize = function(_nodes, _random) {
+		nodes = _nodes;
+		random = _random;
+		initialize();
+	};
+	force.links = function(_) {
+		return arguments.length ? (links = _, initialize(), force) : links;
+	};
+	force.id = function(_) {
+		return arguments.length ? (id = _, force) : id;
+	};
+	force.iterations = function(_) {
+		return arguments.length ? (iterations = +_, force) : iterations;
+	};
+	force.strength = function(_) {
+		return arguments.length ? (strength = typeof _ === "function" ? _ : constant(+_), initializeStrength(), force) : strength;
+	};
+	force.distance = function(_) {
+		return arguments.length ? (distance = typeof _ === "function" ? _ : constant(+_), initializeDistance(), force) : distance;
+	};
+	return force;
+}
+
+//#endregion
+//#region src/util/hash.ts
+function quickHash(data) {
+	return xorshiftString(data).toString(16);
+}
+
+//#endregion
+//#region src/sim/measurements.ts
+/**
+* @dev Temp utility to make performance measurements on the graph.
+*/
+const arr = {
+	sum(A, getV = (v) => v) {
+		return A.reduce((acc, val) => acc + getV(val), 0);
+	},
+	avg(A, getV = (v) => v) {
+		return this.sum(A, getV) / A.length;
+	}
+};
+const Measure = {
+	measures: {},
+	samples: {},
+	collect(name, value) {
+		if (!this.samples[name]) this.samples[name] = [];
+		this.samples[name].push(value);
+	},
+	start(name) {
+		this.measures[name] = performance.now();
+	},
+	end(name, ignoreError = false) {
+		if (!(name in this.measures)) {
+			if (ignoreError) return;
+			throw `invalid timer end on "${name}"`;
+		}
+		this.collect(name, performance.now() - this.measures[name]);
+	},
+	export() {
+		const samples = Object.entries(this.samples);
+		const rows = [samples.map((s) => s[0]).join(",")];
+		rows.push(samples.map((s) => arr.avg(s[1])).join(","));
+		downloadAsCsvFile("samples.csv", rows.join("\n"));
+	},
+	getSamples() {
+		return this.samples;
+	}
+};
+function downloadAsCsvFile(filename, content) {
+	const blob = new Blob([content], { type: "text/csv" });
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = filename.endsWith(".csv") ? filename : filename + ".csv";
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+	URL.revokeObjectURL(url);
+}
+
+//#endregion
+//#region src/sim/OpenGraphSimulation.ts
+const RENDER_EMITTER_NODES = false;
+const INITIAL_RADIUS = 300;
+const INCREMENTAL = 200;
+function getRadius(depth) {
+	if (depth === 0) return INITIAL_RADIUS;
+	return INCREMENTAL * depth + INITIAL_RADIUS;
+}
+var OpenGraphSimulation = class {
+	width;
+	height;
+	config;
+	rootImageSources;
+	canvas;
+	transformCanvas;
+	theme;
+	groupRootOrphans = false;
+	rawData;
+	emitter;
+	translate = {
+		x: 0,
+		y: 0
+	};
+	data = newGraphData();
+	prunedData = newGraphData();
+	subGraph = newGraphData();
+	rootId = "";
+	simulation = null;
+	clusterSizeRange = [0, 1];
+	emitterClusterSizeRange = [0, 1];
+	maxDepth = 0;
+	isTicking = false;
+	isDrawing = false;
+	tickCount = 0;
+	loadNodeImage;
+	imageCache = /* @__PURE__ */ new Map();
+	rootImages = [];
+	hideThumbnails = false;
+	noInteraction = false;
+	lockedNodeId;
+	selectedNode = null;
+	hoveredNode = null;
+	highlights;
+	nodeVisibility = "all";
+	secondaryNodes = /* @__PURE__ */ new Map();
+	emittedNodes = [];
+	openedGroups = [];
+	renderLayers = {
+		links: {
+			regular: [],
+			highlighted: []
+		},
+		nodes: {
+			regular: [],
+			highlighted: []
+		}
+	};
+	constructor(props) {
+		this.emitter = new OpenGraphEventEmitter();
+		this.theme = props.theme || "light";
+		this.width = props.width;
+		this.height = props.height;
+		this.config = props.config || DEFAULT_GRAPH_CONFIG;
+		this.rootImageSources = props.rootImageSources || [];
+		this.canvas = props.canvas;
+		this.lockedNodeId = props.lockedNodeId;
+		this.loadNodeImage = props.loadNodeImage;
+		this.translate = props.translate || {
+			x: 0,
+			y: 0
+		};
+		this.transformCanvas = new TransformCanvas(this.canvas, {
+			onUpdate: this.handleTransform,
+			onClick: this.handleClick,
+			onMove: this.handleMove
+		});
+		this.rootImageSources.forEach((src, idx) => {
+			if (src && !this.imageCache.get(src)) loadHTMLImageElement(src).then((img$1) => {
+				this.imageCache.set(src, img$1);
+				this.rootImages[idx] = img$1;
+			});
+		});
+		this.groupRootOrphans = props.groupRootOrphans || false;
+		this.nodeVisibility = props.nodeVisibility || "all";
+		this.highlights = new MappedArray({
+			nodeId: {
+				getKey: (highlight) => highlight.id,
+				multi: false
+			},
+			detached: {
+				getKey: (highlight) => (highlight.isDetached || false).toString(),
+				multi: true
+			}
+		}, props.highlights || []);
+	}
+	get center() {
+		return {
+			x: 0,
+			y: 0
+		};
+	}
+	get origin() {
+		const dpi = devicePixelRatio || 1;
+		return {
+			x: (this.translate.x + this.width / 2) * dpi,
+			y: (this.translate.y + this.height / 2) * dpi
+		};
+	}
+	getNodeAtPosition = (cx, cy) => {
+		const { x: tx, y: ty, scale } = this.transformCanvas.getTransform();
+		const dpi = devicePixelRatio || 1;
+		const canvasX = cx * dpi;
+		const canvasY = cy * dpi;
+		const scaledX = (canvasX - tx) / scale;
+		const scaledY = (canvasY - ty) / scale;
+		const graphX = scaledX - this.origin.x;
+		const graphY = scaledY - this.origin.y;
+		const candidates = [];
+		for (let node of this.prunedData.nodes.values) {
+			const r = this.getNodeSize(node.id) / 2;
+			if (node.x == null || node.y == null) continue;
+			const dx = node.x - graphX;
+			const dy = node.y - graphY;
+			if (dx * dx + dy * dy < r * r) {
+				if (!this.prunedData.nodes.maps.id.get(node.id)) continue;
+				candidates.push(node);
+			}
+		}
+		if (candidates.length === 0) return null;
+		if (candidates.length === 1) return candidates[0];
+		for (let i = this.renderLayers.nodes.highlighted.length - 1; i >= 0; i--) {
+			const node = this.renderLayers.nodes.highlighted[i];
+			if (candidates.find((c) => c.id === node.id)) return node;
+		}
+		for (let node of this.renderLayers.nodes.regular) if (candidates.find((c) => c.id === node.id)) return node;
+		return candidates[0];
+	};
+	getNodeScreenPosition = (node) => {
+		const transform = this.transformCanvas.getTransform();
+		const x = transform.x + (node.x || 0 + this.origin.x) * transform.scale;
+		const y = transform.y + (node.y || 0 + this.origin.y) * transform.scale;
+		return {
+			x,
+			y
+		};
+	};
+	getNodeCanvasPosition = (node) => {
+		const _x = node.x || 0;
+		const _y = node.y || 0;
+		const transform = this.transformCanvas.getTransform();
+		const x = this.origin.x - _x * transform.scale;
+		const y = this.origin.y - _y * transform.scale;
+		return {
+			x,
+			y
+		};
+	};
+	screenToWorld(_x, _y) {
+		const { x: tx, y: ty, scale } = this.transformCanvas.getTransform();
+		const dpi = devicePixelRatio || 1;
+		const canvasX = _x * dpi;
+		const canvasY = _y * dpi;
+		const scaledX = (canvasX - tx) / scale;
+		const scaledY = (canvasY - ty) / scale;
+		const x = scaledX - this.origin.x;
+		const y = scaledY - this.origin.y;
+		return {
+			x,
+			y
+		};
+	}
+	worldToScreen(worldX, worldY) {
+		const { x: tx, y: ty, scale } = this.transformCanvas.getTransform();
+		const dpi = devicePixelRatio || 1;
+		const scaledX = (worldX + this.origin.x) * scale;
+		const scaledY = (worldY + this.origin.y) * scale;
+		const canvasX = scaledX + tx;
+		const canvasY = scaledY + ty;
+		const screenX = canvasX / dpi;
+		const screenY = canvasY / dpi;
+		return {
+			x: screenX,
+			y: screenY
+		};
+	}
+	handleClick = (x, y) => {
+		let node = this.getNodeAtPosition(x, y);
+		if (node?.state?.sessionNode) return;
+		if (node?.state?.groupNode) {
+			this.data.nodes.values.forEach((n) => {
+				if (node?.state?.groupContent?.includes(n.id)) {
+					const circlePos = getRadialPoint(getRadius(0), this.rootNode?.x, this.rootNode?.y);
+					n.x = circlePos.x;
+					n.y = circlePos.y;
+				}
+			});
+			this.openedGroups.push(node.id);
+			this.updateHighlights();
+			return;
+		}
+		if (this.lockedNodeId && !node) node = this.getNodeById(this.lockedNodeId);
+		if (node === this.selectedNode) return;
+		if (node?.state?.emitterNode && RENDER_EMITTER_NODES);
+		else this.handleClickNode(node);
+	};
+	emitNodeAt = (depth) => {
+		const nodes = this.secondaryNodes[depth].filter((n) => !this.emittedNodes.includes(n.id)) || [];
+		const randomIndex = Math.floor(Math.random() * nodes.length);
+		if (randomIndex < 0 || randomIndex >= nodes.length) return;
+		const depthNode = this.emitterNodes[depth];
+		const node = nodes[randomIndex];
+		node.x = depthNode.x;
+		node.y = depthNode.y;
+		const parents = getAllParentsUntil(node.id, this.data.links, this.rootId);
+		this.emittedNodes.push(node.id);
+		node.state.collapsed = false;
+		if (parents.length > 0) {
+			parents.forEach((parentId) => {
+				const parentNode = this.data.nodes.maps.id.get(parentId);
+				if (parentNode) {
+					if (parentNode.state) parentNode.state.collapsed = false;
+				}
+			});
+			this.emittedNodes.push(...parents);
+		}
+		console.log("Emitting node at depth", depth, ":", node.id);
+		this.updateHighlights();
+	};
+	handleClickNode = (node, options = {
+		noToggle: false,
+		triggerFocus: false,
+		triggerRestart: false
+	}) => {
+		let wasOpened = false;
+		if (node) {
+			if (node.id === this.rootId) {
+				this.selectedNode = null;
+				this.emitter.emit("selected-node-changed", null);
+				this.subGraph = newGraphData();
+				this.updateRenderLayers();
+				this.updateScene();
+				return;
+			}
+			if (node.state) {
+				const children = getChildren(node.id, this.data.links);
+				if (children.length > 0) {
+					if (this.selectedNode?.id !== node.id) {
+						if (node.state.collapsed) wasOpened = true;
+						node.state.collapsed = false;
+					} else if (!options.noToggle) node.state.collapsed = !node.state.collapsed;
+					if (!node.state.collapsed && wasOpened) {
+						const clusterDistance = 100;
+						const clusterRadius = 50;
+						const parentX = node.x || this.center.x;
+						const parentY = node.y || this.center.y;
+						const dirX = parentX - this.center.x;
+						const dirY = parentY - this.center.y;
+						const length = Math.sqrt(dirX * dirX + dirY * dirY) || 1;
+						const normX = dirX / length;
+						const normY = dirY / length;
+						parentX + normX * clusterDistance;
+						parentY + normY * clusterDistance;
+						children.forEach((childId) => {
+							const childNode = this.data.nodes.maps.id.get(childId);
+							if (childNode?.state?.groupNode) return;
+							if (childNode && isSimNode(childNode)) {
+								Math.random() * 2 * Math.PI;
+								Math.random() * clusterRadius;
+							}
+						});
+					}
+				}
+			}
+			this.subGraph = getNodeSubgraph(node.id, this.prunedData.nodes, this.prunedData.links, this.rootId);
+			if (this.selectedNode?.id !== node?.id) {
+				this.selectedNode = node;
+				this.emitter.emit("selected-node-changed", node);
+			}
+			if (wasOpened || options?.triggerFocus) this.transformCanvas.focusOn(() => {
+				const t = this.transformCanvas.getTransform();
+				const _node = this.getNodeById(node.id);
+				return {
+					x: _node?.x,
+					y: _node?.y,
+					scale: t.scale
+				};
+			});
+		} else if (!node && this.selectedNode) {
+			this.selectedNode = null;
+			this.emitter.emit("selected-node-changed", null);
+			this.subGraph = newGraphData();
+			this.updateRenderLayers();
+			this.updateScene();
+		}
+	};
+	updateEmitterNodes() {
+		this.emitterNodes.forEach((node, depth) => {
+			node.clusterSize = (this.secondaryNodes[depth] || []).filter((n) => this.emittedNodes.indexOf(n.id) === -1).length;
+		});
+		this.emitterClusterSizeRange = this.emitterNodes.reduce((acc, node) => [Math.min(acc[0], node.clusterSize || 1), Math.max(acc[1], node.clusterSize || 1)], [Infinity, -Infinity]);
+	}
+	get emitterNodes() {
+		return this.data.nodes.values.filter((n) => n.state?.emitterNode).sort((a, b) => (a.depth || 0) - (b.depth || 0)) || [];
+	}
+	updateScene = () => {
+		if (this.isTicking) return;
+		this.onDraw();
+	};
+	handleMove = (x, y) => {
+		if (this.transformCanvas.getIsDragging()) return;
+		const world = this.screenToWorld(x, y);
+		const node = this.simulation?.find(world.x, world.y, 10) || null;
+		if (node?.state?.sessionNode) return;
+		if (this.hoveredNode === node) return;
+		this.hoveredNode = node;
+		this.emitter.emit("hovered-node-changed", node);
+		this.canvas.style.cursor = node ? "pointer" : "default";
+		this.updateScene();
+	};
+	handleTransform = (t) => {
+		this.emitter.emit("transform-changed", t);
+		this.updateScene();
+	};
+	updateHighlights = () => {
+		const detachedHighlights = this.highlights.maps.detached.get("true") || [];
+		const validSessionIds = /* @__PURE__ */ new Set();
+		let focusSessionNode = null;
+		detachedHighlights.forEach((h) => {
+			const highlightedNode = this.data.nodes.maps.id.get(h.id);
+			if (!highlightedNode) return;
+			const existingLink = this.data.links.maps.targetId.get(h.id);
+			if (!existingLink) return;
+			const id = isSimNode(existingLink.source) ? existingLink.source.id : existingLink.source.toString();
+			const parentNode = this.getNodeById(id);
+			if (!parentNode) return;
+			const _sessionId = h.sessionId || parentNode.id;
+			const sessionId = parentNode.state?.sessionNode ? parentNode.id : `${VOID_DETACH_ID}-${_sessionId}`;
+			validSessionIds.add(sessionId);
+			let sessionNode = this.data.nodes.maps.id.get(sessionId);
+			if (!sessionNode) {
+				const depth = (highlightedNode?.depth || 1) + 1;
+				const angle = getAngle(this.rootNode?.x, this.rootNode?.y, parentNode?.x, parentNode?.y);
+				const circlePos = getRadialPoint(getRadius(depth), this.rootNode?.x, this.rootNode?.y, angle);
+				sessionNode = {
+					id: sessionId,
+					state: {
+						collapsed: false,
+						image: void 0,
+						sessionNode: true
+					},
+					depth,
+					clusterSize: 1,
+					x: circlePos.x,
+					y: circlePos.y
+				};
+				this.data.nodes.push(sessionNode);
+				this.data.links.push({
+					target: sessionNode,
+					source: parentNode
+				});
+			}
+			const existingLinkIndex = this.data.links.values.findIndex((l) => l === existingLink);
+			this.data.links.splice(existingLinkIndex, 1);
+			this.data.links.push({
+				target: highlightedNode,
+				source: sessionNode
+			});
+			getAllParentsUntil(highlightedNode.id, this.data.links, this.rootId).forEach((parentId) => {
+				if (this.data.nodes.maps.id.get(parentId)?.state) {}
+			});
+			if (highlightedNode.state) highlightedNode.state.collapsed = false;
+			if (!focusSessionNode) focusSessionNode = sessionNode;
+		});
+		this.data.nodes.values.filter((n) => n.state?.sessionNode && !validSessionIds.has(n.id)).forEach((sessionNode) => {
+			const childLinks = this.data.links.maps.sourceId.get(sessionNode.id);
+			const incomingLink = this.data.links.maps.targetId.get(sessionNode.id);
+			const parentNode = incomingLink ? isSimNode(incomingLink.source) ? incomingLink.source : this.getNodeById(incomingLink.source.toString()) : null;
+			this.data.links.reset(this.data.links.values.filter((l) => !(isSimNode(l.source) && l.source.id === sessionNode.id) && !(isSimNode(l.target) && l.target.id === sessionNode.id)));
+			if (parentNode) childLinks?.forEach((link) => {
+				const targetNode = isSimNode(link.target) ? link.target : this.getNodeById(link.target.toString());
+				if (targetNode) this.data.links.push({
+					source: parentNode,
+					target: targetNode
+				});
+			});
+			const index$1 = this.data.nodes.values.findIndex((n) => n.id === sessionNode.id);
+			if (index$1 !== -1) this.data.nodes.splice(index$1, 1);
+		});
+		const isHighlighted = (nodeId) => this.highlights.maps.nodeId.get(nodeId);
+		const isChildHighlighted = (nodeId) => {
+			const children = getChildren(nodeId, this.data.links);
+			if (children.some(isHighlighted)) return true;
+			else return children.some(isHighlighted);
+		};
+		const nodesWithoutHighlight = this.data.nodes.values.filter((n) => {
+			if (n.state?.sessionNode) return false;
+			if (n.id === this.rootId) return false;
+			if (n.state?.emitterNode) return false;
+			if (isHighlighted(n.id)) return false;
+			if (isChildHighlighted(n.id)) return false;
+			return true;
+		});
+		this.secondaryNodes = groupBy(nodesWithoutHighlight, (n) => n.depth || 0);
+		if (this.selectedNode) this.subGraph = getNodeSubgraph(this.selectedNode.id, this.data.nodes, this.data.links, this.rootId);
+		this.updateEmitterNodes();
+		this.restart();
+		if (focusSessionNode) this.transformCanvas.focusOn(() => {
+			if (!focusSessionNode) return null;
+			const t = this.transformCanvas.getTransform();
+			const _node = this.getNodeById(focusSessionNode.id);
+			if (!_node) return null;
+			return {
+				x: _node?.x,
+				y: _node?.y,
+				scale: t.scale
+			};
+		});
+		else this.transformCanvas.focusOn(() => {
+			if (!this.rootNode) return null;
+			const t = this.transformCanvas.getTransform();
+			return {
+				x: this.rootNode.x,
+				y: this.rootNode.y,
+				scale: t.scale
+			};
+		});
+	};
+	setNodeVisibility = (visibility, groupRootOrphans) => {
+		if (this.nodeVisibility === visibility && groupRootOrphans === this.groupRootOrphans) return;
+		this.groupRootOrphans = groupRootOrphans;
+		this.nodeVisibility = visibility;
+		this.updateHighlights();
+	};
+	initialize = (data, rootId) => {
+		Measure.start("initialize");
+		this.emittedNodes = [];
+		this.rawData = data;
+		this.rootId = rootId;
+		const newData = newGraphData({
+			nodes: [],
+			links: data.links.map((l) => ({ ...l }))
+		});
+		newData.nodes.reset(data.nodes.map((n) => {
+			const existingData = this.data.nodes.maps.id.get(n.id);
+			const parent = getParent(n.id, newData.links);
+			const parentNode = parent ? newData.nodes.maps.id.get(parent) : null;
+			const clusterSize = getClusterSize(n.id, newData.links);
+			const depth = getNodeDepth(n.id, newData.links);
+			const circlePos = getRadialPoint(getRadius(Math.max(depth, 2)), this.center.x, this.center.y);
+			const x = depth > 0 ? void 0 : existingData?.x || parentNode?.x || circlePos.x;
+			const y = depth > 0 ? void 0 : existingData?.y || parentNode?.y || circlePos.y;
+			return {
+				...n,
+				state: {
+					collapsed: false,
+					...existingData?.state
+				},
+				clusterSize,
+				depth,
+				x,
+				y
+			};
+		}).sort((a, b) => a.depth - b.depth));
+		newData.nodes.values.forEach((n, i, arr$1) => {
+			const parent = getParent(n.id, newData.links);
+			const parentNode = parent ? newData.nodes.maps.id.get(parent) : null;
+			const depth = Math.max(2, n.depth || 0);
+			const parentAngle = getAngle(this.center.x, this.center.y, parentNode?.x, parentNode?.y);
+			const circlePos = getRadialPoint(getRadius(depth), this.center.x, this.center.y, parentAngle);
+			n.x = n.x || circlePos.x;
+			n.y = n.y || circlePos.y;
+		});
+		if (!newData.nodes.maps.id.get(this.rootId)) newData.nodes.push({
+			id: this.rootId,
+			state: {
+				collapsed: false,
+				image: void 0,
+				rootNode: true
+			},
+			depth: -1,
+			clusterSize: 1,
+			x: this.center.x,
+			y: this.center.y
+		});
+		const rootNodes = newData.nodes.values.filter((node) => !newData.links.maps.targetId.get(node.id));
+		for (const node of rootNodes) newData.links.push({
+			source: this.rootId,
+			target: node.id
+		});
+		this.maxDepth = Math.max(...newData.nodes.values.map((n) => n.depth || 0));
+		this.data = newData;
+		this.loadNodeImages();
+		this.updateHighlights();
+		this.triggerSelected(true);
+		Measure.end("initialize");
+	};
+	get lockedNode() {
+		return this.lockedNodeId ? this.getNodeById(this.lockedNodeId) : null;
+	}
+	triggerSelected = (triggerFocus = false) => {
+		if (this.selectedNode) this.handleClickNode(this.selectedNode, {
+			noToggle: true,
+			triggerFocus
+		});
+		else if (this.lockedNode) this.handleClickNode(this.lockedNode, {
+			noToggle: true,
+			triggerFocus,
+			triggerRestart: true
+		});
+		else this.setSelectedNode(null);
+	};
+	get groupNodes() {
+		return this.prunedData.nodes.maps.groupNode.get("true");
+	}
+	restart = (alpha = .3) => {
+		this.tickCount = 0;
+		console.log("Restarting simulation with alpha:", this.groupNodes);
+		this.prunedData = getPrunedData(this.rootId, this.data.nodes, this.data.links, this.highlights.values, {
+			nodeVisibility: this.nodeVisibility,
+			emittedNodes: this.emittedNodes,
+			groupNodes: this.groupNodes,
+			skipGrouping: !this.groupRootOrphans || this.data.nodes.values.length < 200,
+			openedGroups: this.openedGroups
+		});
+		this.updateRenderLayers();
+		this.clusterSizeRange = (this.prunedData.nodes.maps.collapsed.get("true") || []).reduce((acc, node) => [Math.min(acc[0], node.clusterSize || 1), Math.max(acc[1], node.clusterSize || 1)], [Infinity, -Infinity]);
+		if (this.simulation) {
+			this.simulation.stop();
+			this.simulation.on("tick", null);
+			this.simulation.on("end", null);
+		}
+		this.simulation = forceSimulation(this.prunedData.nodes.values).alpha(this.simulation ? alpha : .5).force("collide", forceCollide((n) => {
+			return this.getNodeSize(n.id) / 2 + 2;
+		})).force("link", asymmetricLinks(this.prunedData.links.values).id((d) => d.id).distance((l) => {
+			const size = this.getNodeSize(isSimNode(l.target) ? l.target.id : l.target.toString());
+			if (isSimNode(l.target)) {
+				const state = l.target?.state;
+				if (state?.emitterNode) {
+					if (isSimNode(l.source) && l.source.id === this.rootId) return 100;
+					return 1;
+				}
+				if (!state?.collapsed) return size;
+				if (state.groupNode) return 5;
+			}
+			return size * 3;
+		}).strength((l) => {
+			return [.66, .08];
+		})).force("charge", forceManyBody().strength((node) => {
+			return -150;
+		})).force("center", forceCenter(this.center.x, this.center.y).strength(.1)).restart();
+		this.simulation.restart();
+		Measure.start("simulation");
+		this.simulation.on("tick", () => {
+			Measure.end("tick", true);
+			this.handleTick();
+			Measure.start("tick");
+		});
+		this.simulation.on("end", () => {
+			Measure.end("simulation");
+			this.onEnd();
+		});
+	};
+	get rootNode() {
+		return this.data.nodes.maps.id.get(this.rootId) || null;
+	}
+	handleTick = () => {
+		this.isTicking = true;
+		if (this.rootNode) {
+			this.rootNode.vx = 0;
+			this.rootNode.vy = 0;
+		}
+		this.onDraw();
+		this.tickCount++;
+	};
+	setTranslate({ x, y }) {
+		this.translate = {
+			x,
+			y
+		};
+		this.transformCanvas.setOffset(this.translate);
+	}
+	get visiblityScale() {
+		return scaleLog().domain(this.clusterSizeRange).range([1.5, .9]).clamp(true);
+	}
+	get color() {
+		return color(this.theme === "light" ? this.config.theme.dark : this.config.theme.light);
+	}
+	get colorContrast() {
+		return color(this.theme === "light" ? this.config.theme.light : this.config.theme.dark);
+	}
+	getNodeSize = (nodeId) => {
+		const { nodeSize } = this.config;
+		const sizeScale = this.highlights.maps.nodeId.get(nodeId)?.scale || 1;
+		if (nodeId === this.rootId) return nodeSize * 2 * sizeScale;
+		const node = this.prunedData.nodes.maps.id.get(nodeId);
+		if (node?.state?.sessionNode) return 5;
+		const isEmitterNode = node?.state?.emitterNode;
+		if (isEmitterNode) {
+			if (node.clusterSize === 0) return 5;
+			return scaleLinear().domain(this.emitterClusterSizeRange).range([nodeSize, nodeSize * 3])(node.clusterSize || 1);
+		}
+		const isCollapsed = !!node?.state?.collapsed;
+		const isGroupNode = !!node?.state?.groupNode;
+		if (isCollapsed || isEmitterNode || isGroupNode) return scaleLinear().domain(this.clusterSizeRange).range([nodeSize, nodeSize * 3])(node.clusterSize || 1);
+		const isSelected = this.selectedNode?.id === nodeId;
+		const _size = node?.status === "LIQUIDATED" || node?.status === "REGENERATED" ? nodeSize * .2 : nodeSize;
+		return isSelected ? _size * 4 : _size * sizeScale;
+	};
+	updateRenderLayers() {
+		const isHighlighted = (id) => {
+			const highlight = this.highlights.maps.nodeId.get(id);
+			return !this.selectedNode && highlight?.onTop || this.selectedNode?.id === id || this.subGraph.nodes.maps.id.get(id);
+		};
+		this.renderLayers.nodes.regular = [];
+		this.renderLayers.nodes.highlighted = [];
+		this.prunedData.nodes.values.forEach((node) => {
+			if (isHighlighted(node.id)) this.renderLayers.nodes.highlighted.push(node);
+			else this.renderLayers.nodes.regular.push(node);
+		});
+		this.renderLayers.links.regular = [];
+		this.renderLayers.links.highlighted = [];
+		const isLinkInSubgraph = (link) => {
+			if (!this.selectedNode) return false;
+			return this.subGraph.links.maps.linkId.has(getLinkId(link));
+		};
+		const isLinkInHighlights = (link) => {
+			const sourceId = isSimNode(link.source) ? link.source.id : link.source;
+			const targetId = isSimNode(link.target) ? link.target.id : link.target;
+			return !this.selectedNode && !!this.highlights.maps.detached.get("true")?.some((h) => h.id === sourceId || h.id === targetId);
+		};
+		this.prunedData.links.values.forEach((link) => {
+			const inSubgraph = isLinkInSubgraph(link);
+			const inHighlights = isLinkInHighlights(link);
+			if (inSubgraph || inHighlights) this.renderLayers.links.highlighted.push(link);
+			else this.renderLayers.links.regular.push(link);
+		});
+		this.renderLayers.links.highlighted.sort((a, b) => {
+			const inSubgraphA = isLinkInSubgraph(a);
+			const inSubgraphB = isLinkInSubgraph(b);
+			if (inSubgraphA || inSubgraphB) return 2;
+			return -1;
+		});
+		this.renderLayers.nodes.highlighted.sort((a, b) => {
+			const highlightA = this.highlights.maps.nodeId.get(a.id);
+			const highlightB = this.highlights.maps.nodeId.get(b.id);
+			if (this.subGraph.nodes.maps.id.get(a.id) || this.subGraph.nodes.maps.id.get(b.id)) return 2;
+			if (a.id === this.selectedNode?.id || b.id === this.selectedNode?.id) return 2;
+			if (highlightA?.onTop || highlightB?.onTop) return 1;
+			return -1;
+		});
+	}
+	renderLink(ctx, link, options) {
+		const sourceId = isSimNode(link.source) ? link.source.id : link.source;
+		const sourceNode = this.prunedData.nodes.maps.id.get(sourceId.toString());
+		if (isSimNode(link.target)) {
+			if (this.nodeVisibility === "all" || true) {
+				if (link.target.state?.emitterNode || isSimNode(link.source) && link.source.state?.emitterNode) return;
+			}
+			const isSourceNode = this.prunedData.links.maps.sourceId.has(getNodeId(link.target));
+			if (link.target.state?.emitterNode && link.target.clusterSize === 0 && !isSourceNode) return;
+		}
+		const isLight = this.theme === "light";
+		const { dim: _dim, hasSelection, highlight } = options;
+		let stroke = _dim ? this.color(dim(.09, isLight))() : hasSelection ? this.color(dim(.4, isLight))() : this.color(dim(.18, isLight))();
+		ctx.globalAlpha = highlight ? 1 : .5;
+		const sx = sourceNode && sourceNode.x || 0;
+		const sy = sourceNode && sourceNode.y || 0;
+		const tx = isSimNode(link.target) && link.target.x || 0;
+		const ty = isSimNode(link.target) && link.target.y || 0;
+		if (highlight?.linkColor) {
+			const gradient = ctx.createLinearGradient(sx, sy, tx, ty);
+			gradient.addColorStop(0, stroke);
+			gradient.addColorStop(1, color(highlight.linkColor)());
+			ctx.strokeStyle = gradient;
+		} else ctx.strokeStyle = stroke;
+		ctx.lineWidth = _dim ? .3 : .8;
+		ctx.beginPath();
+		ctx.moveTo(sx, sy);
+		ctx.lineTo(tx, ty);
+		ctx.stroke();
+		ctx.closePath();
+	}
+	renderNode(ctx, node, options) {
+		const x = node.x || 0;
+		const y = node.y || 0;
+		const isSelected = this.selectedNode?.id === node.id;
+		const isHovered = this.hoveredNode?.id === node.id;
+		const isCollapsed = !!node.state?.collapsed;
+		const isLiquidated = node.status === "LIQUIDATED" || node.status === "REGENERATED";
+		const isLight = this.theme === "light";
+		const { dim: _dim, transform } = options;
+		const fill = _dim ? this.color(dim(.075, isLight))() : isCollapsed ? this.color(dim(.18, isLight))() : isHovered ? this.color(dim(.4, isLight))() : this.color();
+		const stroke = this.colorContrast();
+		const nodeSize = this.getNodeSize(node.id);
+		const highlight = this.highlights.maps.nodeId.get(node.id);
+		const highlighted = !!highlight;
+		let highlightedStroke = _dim ? color(highlight?.strokeColor || red)(dim(.4, isLight))() : color(highlight?.strokeColor || red)();
+		if (node.id === this.rootId) this.renderRootNode(ctx, x, y, nodeSize, _dim, isLight);
+		else if (node.state?.emitterNode) return;
+		else if (node.state?.sessionNode) this.renderSessionNode(ctx, x, y, nodeSize);
+		else if (isCollapsed || node.state?.groupNode) this.renderCollapsedNode(ctx, x, y, nodeSize, {
+			fill,
+			stroke,
+			highlighted,
+			highlightedStroke,
+			isSelected,
+			dim: _dim,
+			transform,
+			clusterSize: node.clusterSize || 1,
+			isLight
+		});
+		else this.renderExpandedNode(ctx, x, y, nodeSize, {
+			fill,
+			stroke,
+			highlighted,
+			highlightedStroke,
+			isHovered,
+			isLiquidated,
+			dim: _dim,
+			image: node.state?.image
+		});
+	}
+	renderEmitterNode(ctx, x, y, size, node, dimmed) {
+		if (this.nodeVisibility === "all") return;
+		if (node.clusterSize === 0) return;
+		this.theme;
+		circle(ctx, x, y, size / 2, {
+			stroke: true,
+			strokeStyle: this.colorContrast(),
+			lineWidth: .2,
+			fill: true,
+			fillStyle: "#0000ff"
+		});
+		const transform = this.transformCanvas.getTransform();
+		const clusterSize = node.clusterSize || 1;
+		if (transform.scale - .5 >= this.visiblityScale(clusterSize) ? 1 : 0) {
+			ctx.font = `${14 / transform.scale}px Sans-Serif`;
+			ctx.textAlign = "center";
+			ctx.textBaseline = "middle";
+			ctx.fillStyle = this.colorContrast();
+			ctx.fillText(clusterSize.toString(), x, y);
+			ctx.font = `${10 / transform.scale}px Sans-Serif`;
+			ctx.fillText("click to emit", x, y + 5);
+		}
+	}
+	renderSessionNode(ctx, x, y, size) {
+		const isLight = this.theme === "light";
+		circle(ctx, x, y, size / 2, {
+			stroke: true,
+			strokeStyle: this.colorContrast(),
+			lineWidth: .2,
+			fill: true,
+			fillStyle: this.color(dim(.18, isLight))()
+		});
+	}
+	renderRootNode(ctx, x, y, size, dimmed, isLight) {
+		circle(ctx, x, y, size / 2, {
+			stroke: false,
+			strokeStyle: this.colorContrast(),
+			lineWidth: .2,
+			fill: true,
+			fillStyle: this.color(dim(.18, isLight))()
+		});
+		if (this.rootImages) {
+			const _idx = Math.min(isLight ? 0 : 1, this.rootImages.length - 1);
+			const _img = this.rootImages[_idx];
+			const _imgSize = size * .55;
+			if (_img) img(ctx, _img, x - _imgSize / 2, y - _imgSize / 2, _imgSize, _imgSize, 0, dimmed ? .1 : 1);
+		}
+	}
+	renderCollapsedNode(ctx, x, y, size, options) {
+		const { fill, stroke, highlighted, highlightedStroke, isSelected, dim: _dim, transform, clusterSize, isLight } = options;
+		if (highlighted) {
+			const _size = size + 4;
+			circle(ctx, x, y, _size / 2, {
+				stroke: true,
+				strokeStyle: highlightedStroke,
+				lineWidth: 1,
+				fill: false,
+				fillStyle: fill
+			});
+		}
+		circle(ctx, x, y, size / 2, {
+			stroke: true,
+			strokeStyle: stroke,
+			lineWidth: isSelected ? 1 : .2,
+			fill: true,
+			fillStyle: fill
+		});
+		if (transform.scale >= this.visiblityScale(clusterSize) ? 1 : 0) {
+			ctx.font = `${14 / transform.scale}px Sans-Serif`;
+			ctx.textAlign = "center";
+			ctx.textBaseline = "middle";
+			ctx.fillStyle = this.color(dim(_dim ? .2 : .5, isLight))();
+			ctx.fillText(clusterSize.toString(), x, y);
+		}
+	}
+	renderExpandedNode(ctx, x, y, size, options) {
+		const { fill, highlighted, highlightedStroke, isHovered, isLiquidated, dim: _dim, image } = options;
+		const _size = size + 1;
+		rect(ctx, x - _size / 2, y - _size / 2, _size, _size, {
+			stroke: highlighted || isHovered,
+			strokeStyle: isHovered ? fill : highlightedStroke,
+			lineWidth: 1,
+			fill: this.hideThumbnails || isLiquidated || !image,
+			fillStyle: fill,
+			borderRadius: 1
+		});
+		if (image && !this.hideThumbnails && !isLiquidated) img(ctx, image, x - size / 2, y - size / 2, size, size, 1, _dim ? .1 : 1, fill);
+	}
+	onDraw = () => {
+		Measure.start("draw");
+		this.isDrawing = true;
+		const context = this.canvas?.getContext("2d");
+		const transform = this.transformCanvas.getTransform();
+		if (!context) {
+			this.isDrawing = false;
+			return;
+		}
+		const dpi = devicePixelRatio || 1;
+		context.save();
+		context.scale(dpi, dpi);
+		context.clearRect(0, 0, this.width, this.height);
+		context.setTransform(transform.scale, 0, 0, transform.scale, transform.x, transform.y);
+		context.translate(this.origin.x, this.origin.y);
+		context.save();
+		const dimmedByHighlights = (nodeId) => {
+			if (this.nodeVisibility === "all") return false;
+			if (nodeId === this.rootId) return false;
+			if (this.prunedData.nodes.maps.id.get(nodeId)?.state?.groupNode) return false;
+			if (this.nodeVisibility === "locked") {
+				const node = this.getNodeById(nodeId);
+				return !(node?.status === "LOCKED" || node?.status === "EVOLVED");
+			}
+			return !this.highlights.maps.nodeId.get(nodeId);
+		};
+		const hasSelection = !!this.selectedNode;
+		this.renderLayers.links.regular.forEach((link) => {
+			const sourceId = getNodeId(link.source);
+			const targetId = getNodeId(link.target);
+			const _dim = hasSelection ? !this.subGraph.links.maps.linkId.has(getLinkId(link)) : dimmedByHighlights(sourceId) || dimmedByHighlights(targetId);
+			this.renderLink(context, link, {
+				dim: _dim,
+				hasSelection
+			});
+		});
+		context.globalAlpha = 1;
+		this.renderLayers.nodes.regular.forEach((node) => {
+			const _dim = hasSelection ? !this.subGraph.nodes.maps.id.has(node.id) : dimmedByHighlights(node.id);
+			this.renderNode(context, node, {
+				dim: _dim,
+				transform
+			});
+		});
+		this.renderLayers.links.highlighted.forEach((link) => {
+			const sourceId = getNodeId(link.source);
+			const targetId = getNodeId(link.target);
+			const _dim = hasSelection ? !this.subGraph.links.maps.linkId.has(getLinkId(link)) : dimmedByHighlights(sourceId) || dimmedByHighlights(targetId);
+			const highlight = this.highlights.maps.nodeId.get(sourceId) || this.highlights.maps.nodeId.get(targetId);
+			this.renderLink(context, link, {
+				dim: _dim,
+				hasSelection,
+				highlight
+			});
+		});
+		context.globalAlpha = 1;
+		this.renderLayers.nodes.highlighted.forEach((node) => {
+			const _dim = hasSelection ? !this.subGraph.nodes.maps.id.has(node.id) : dimmedByHighlights(node.id);
+			this.renderNode(context, node, {
+				dim: _dim,
+				transform
+			});
+		});
+		context.restore();
+		context.restore();
+		this.transformCanvas.trackCursor();
+		this.isDrawing = false;
+		Measure.end("draw");
+	};
+	drawDebug(context) {
+		const transform = this.transformCanvas.getTransform();
+		context.font = `14px Sans-Serif`;
+		context.textAlign = "left";
+		context.fillStyle = "#000000";
+		context.fillText(`${transform.x}, ${transform.y}, ${transform.scale}`, 0, 15);
+		const center = this.worldToScreen(this.rootNode?.x, this.rootNode?.y);
+		context.fillText(`${center.x}, ${center.y}`, 0, 30);
+	}
+	drawDebugDepthCircles(context) {
+		const transform = this.transformCanvas.getTransform();
+		for (let i = 0; i < this.maxDepth; i++) {
+			const depth = i;
+			const r = getRadius(depth);
+			const x = this.center.x;
+			const y = this.center.y;
+			circle(context, x, y, r, {
+				fill: false,
+				stroke: true,
+				strokeStyle: "#00ff00"
+			});
+			context.font = `${40 / transform.scale}px Sans-Serif`;
+			context.textAlign = "center";
+			context.textBaseline = "middle";
+			context.fillStyle = this.color();
+			context.fillText(depth.toString(), x + r, y);
+		}
+	}
+	onEnd = () => {
+		this.isTicking = false;
+		this.emitter.emit("simulation:ended", this);
+	};
+	loadNodeImages = () => {
+		this.data.nodes.values.forEach((node) => {
+			if (node.id === this.rootId) return;
+			if (node.imgSrc && this.imageCache.get(node.imgSrc)) {
+				const html = this.imageCache.get(node.imgSrc);
+				node.state = node.state || {};
+				node.state.image = html;
+				return;
+			}
+			const loadImage = async () => {
+				const src = this.loadNodeImage ? await this.loadNodeImage(node) : node.imgSrc;
+				if (!src) return;
+				const html = this.imageCache.get(src) || await loadHTMLImageElement(src);
+				this.imageCache.set(src, html);
+				node.state = node.state || {};
+				node.state.image = html;
+			};
+			loadImage();
+		});
+	};
+	destroy = () => {
+		this.simulation?.stop();
+		this.simulation?.on("tick", null);
+		this.simulation?.on("end", null);
+		this.transformCanvas.destroy();
+	};
+	resize = (width, height) => {
+		this.width = width;
+		this.height = height;
+		this.updateScene();
+	};
+	setTheme = (theme) => {
+		this.theme = theme;
+		this.updateScene();
+	};
+	setNodeImage = (nodeId, src) => {
+		const node = this.getNodeById(nodeId);
+		if (!node) return;
+		const load = async () => {
+			const html = this.imageCache.get(src) || await loadHTMLImageElement(src);
+			this.imageCache.set(src, html);
+			node.state = node.state || {};
+			node.state.image = html;
+			if (!this.isTicking && !this.isDrawing) this.updateScene();
+		};
+		load();
+	};
+	setHideThumbnails = (hide) => {
+		this.hideThumbnails = hide;
+		this.updateScene();
+	};
+	setSelectedNode = (node) => {
+		this.selectedNode = node;
+		this.updateRenderLayers();
+		this.updateScene();
+	};
+	_highlightHash;
+	setHighlights = (highlights) => {
+		const hash = quickHash(JSON.stringify(highlights));
+		if (hash === this._highlightHash) return;
+		this._highlightHash = hash;
+		this.highlights.reset(highlights);
+		this.updateHighlights();
+	};
+	setNoInteraction = (noInteraction) => {
+		this.noInteraction = noInteraction;
+		this.transformCanvas.setNoInteraction(this.noInteraction);
+		this.updateScene();
+	};
+	getNodeById = (nodeId) => {
+		return this.data.nodes.maps.id.get(nodeId) || null;
+	};
+	setLockedNodeId = (nodeId) => {
+		this.lockedNodeId = nodeId || void 0;
+	};
+	handleClickDebug = (x, y) => {
+		const p = this.screenToWorld(x, y);
+		this.circles.push(p);
+		this.transformCanvas.focusOn(() => {
+			const circle$1 = this.circles[this.circles.length - 1];
+			return {
+				x: circle$1.x,
+				y: circle$1.y,
+				scale: this.transformCanvas.getTransform().scale
+			};
+		});
+		this.updateScene();
+	};
+	circles = [];
+	onDrawDebug = () => {
+		const context = this.canvas?.getContext("2d");
+		const transform = this.transformCanvas.getTransform();
+		if (!context) return;
+		const dpi = devicePixelRatio || 1;
+		context.save();
+		context.scale(dpi, dpi);
+		context.clearRect(0, 0, this.width, this.height);
+		context.setTransform(transform.scale, 0, 0, transform.scale, transform.x, transform.y);
+		context.translate(this.origin.x, this.origin.y);
+		context.save();
+		this.circles.map((c) => {
+			circle(context, c.x, c.y, 5, {
+				fill: true,
+				fillStyle: "#ff0000",
+				stroke: false
+			});
+		});
+		circle(context, 0, 0, 5, {
+			fill: true,
+			fillStyle: "#ff0000",
+			stroke: false
+		});
+		context.restore();
+		context.restore();
+	};
+	get measures() {
+		return Measure.getSamples();
+	}
+};
+
+//#endregion
+//#region src/components/OpenFormGraph.tsx
+function OpenFormGraph(props) {
+	const { width, height, highlights = [], className, noInteraction = false, loadNodeImage, translate, onTransform, onSimulationEnded, nodeVisibility = "all", children, groupRootOrphans = false } = props;
+	const { simulation, data, rootId, rootImageSources, theme, hideThumbnails, setHoveredNode, setSelectedNode, lockedNodeId } = useOpenFormGraph();
+	const canvasRef = useRef(null);
+	useEffect(() => {
+		if (!canvasRef.current) return;
+		simulation.current = new OpenGraphSimulation({
+			width,
+			height,
+			canvas: canvasRef.current,
+			rootImageSources,
+			loadNodeImage,
+			theme,
+			translate,
+			lockedNodeId,
+			nodeVisibility,
+			highlights,
+			groupRootOrphans
+		});
+		return () => {
+			simulation.current?.destroy();
+		};
+	}, []);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.emitter.on("selected-node-changed", setSelectedNode);
+		simulation.current.emitter.on("hovered-node-changed", setHoveredNode);
+		return () => {
+			simulation.current?.emitter.off("selected-node-changed", setSelectedNode);
+			simulation.current?.emitter.off("hovered-node-changed", setHoveredNode);
+		};
+	}, [setSelectedNode, setHoveredNode]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		if (!onTransform) return;
+		simulation.current.emitter.on("transform-changed", onTransform);
+		return () => {
+			simulation.current?.emitter.off("transform-changed", onTransform);
+		};
+	}, [onTransform]);
+	useEffect(() => {
+		if (!simulation.current || !onSimulationEnded) return;
+		return simulation.current.emitter.on("simulation:ended", onSimulationEnded);
+	}, [onSimulationEnded]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.resize(width, height);
+	}, [width, height]);
+	useEffect(() => {
+		if (!simulation.current || !theme) return;
+		simulation.current.setTheme(theme);
+	}, [theme]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.setHideThumbnails(hideThumbnails);
+	}, [hideThumbnails]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.setNodeVisibility(nodeVisibility, groupRootOrphans);
+	}, [nodeVisibility, groupRootOrphans]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.setHighlights(highlights);
+	}, [highlights]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.setNoInteraction(noInteraction);
+	}, [noInteraction]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		simulation.current.initialize(data, rootId);
+	}, [data, rootId]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		if (!translate) return;
+		simulation.current.setTranslate(translate);
+	}, [translate?.y, translate?.x]);
+	useEffect(() => {
+		if (!simulation.current) return;
+		if (simulation.current.lockedNodeId === lockedNodeId) return;
+		simulation.current.setLockedNodeId(lockedNodeId);
+	}, [lockedNodeId]);
+	const dpi = devicePixelRatio || 1;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("canvas", {
+		onMouseEnter: props.onMouseEnter,
+		onMouseLeave: props.onMouseLeave,
+		ref: canvasRef,
+		className,
+		width: `${width * dpi}px`,
+		height: `${height * dpi}px`,
+		style: {
+			width: `${width}px`,
+			height: `${height}px`
+		}
+	}), children] });
+}
+
+//#endregion
+export { Highlight, OpenFormGraph, OpenGraphEventEmitter, OpenGraphSimulation, TransformCanvas, buildTreeFromGraphData, circle, color, dim, generateTree, getAllParentsUntil, getChildren, getClusterSize, getLinkId, getNodeDepth, getNodeId, getNodeSubgraph, getParent, getPrunedData, getRootParent, groupGraphNodes, hasOnlyLeafs, hexagon, img, isCustomHighlight, isSimLink, isSimNode, loadHTMLImageElement, newGraphData, rect, red, searchParents };
+//# sourceMappingURL=OpenFormGraph-Ccizmxbo.js.map