@cyvest/cyvest-vis 4.3.0 → 4.4.1

package/dist/index.js

@@ -1,54 +1,22 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  CyvestGraph: () => CyvestGraph,
-  DEFAULT_FORCE_CONFIG: () => DEFAULT_FORCE_CONFIG,
-  INVESTIGATION_ICON_MAP: () => INVESTIGATION_ICON_MAP,
-  InvestigationGraph: () => InvestigationGraph,
-  OBSERVABLE_ICON_MAP: () => OBSERVABLE_ICON_MAP,
-  ObservablesGraph: () => ObservablesGraph,
-  getInvestigationIcon: () => getInvestigationIcon,
-  getObservableIcon: () => getObservableIcon
-});
-module.exports = __toCommonJS(index_exports);
-
 // src/components/CyvestGraph.tsx
-var import_react14 = require("react");
+import { useState as useState2, useCallback as useCallback4, useMemo as useMemo8 } from "react";
 
 // src/components/ObservablesGraph.tsx
-var import_react7 = __toESM(require("react"));
-var import_react8 = require("@xyflow/react");
-var import_style = require("@xyflow/react/dist/style.css");
-var import_cyvest_js2 = require("@cyvest/cyvest-js");
+import React3, { useMemo as useMemo4, useCallback as useCallback2, useState, useRef as useRef2 } from "react";
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  ConnectionMode,
+  BackgroundVariant,
+  Panel
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { getObservableGraph } from "@cyvest/cyvest-js";
 
 // src/types.ts
 var DEFAULT_FORCE_CONFIG = {
@@ -60,11 +28,11 @@ var DEFAULT_FORCE_CONFIG = {
 };
 
 // src/components/ObservableNode.tsx
-var import_react = require("react");
-var import_react2 = require("@xyflow/react");
+import { memo, useMemo } from "react";
+import { Handle, Position } from "@xyflow/react";
 
 // src/utils/observables.ts
-var import_cyvest_js = require("@cyvest/cyvest-js");
+import { getColorForLevel } from "@cyvest/cyvest-js";
 function truncateLabel(value, maxLength = 20, truncateMiddle = true) {
   if (value.length <= maxLength) {
     return value;
@@ -76,7 +44,7 @@ function truncateLabel(value, maxLength = 20, truncateMiddle = true) {
   return `${value.slice(0, maxLength - 1)}\u2026`;
 }
 function getLevelColor(level) {
-  return (0, import_cyvest_js.getColorForLevel)(level);
+  return getColorForLevel(level);
 }
 function lightenHexColor(hex, amount) {
   const normalized = hex.startsWith("#") ? hex.slice(1) : hex;
@@ -95,14 +63,14 @@ function getLevelBackgroundColor(level) {
 }
 
 // src/components/Icons.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+import { jsx, jsxs } from "react/jsx-runtime";
 var defaultSize = 16;
 var defaultColor = "currentColor";
 var GlobeIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -115,9 +83,9 @@ var GlobeIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 12h20" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 12h20" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
     ]
   }
 );
@@ -125,7 +93,7 @@ var DomainIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -138,8 +106,8 @@ var DomainIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9,22 9,12 15,12 15,22" })
+      /* @__PURE__ */ jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+      /* @__PURE__ */ jsx("polyline", { points: "9,22 9,12 15,12 15,22" })
     ]
   }
 );
@@ -147,7 +115,7 @@ var LinkIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -160,8 +128,8 @@ var LinkIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+      /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
     ]
   }
 );
@@ -169,7 +137,7 @@ var MailIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -182,8 +150,8 @@ var MailIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
     ]
   }
 );
@@ -191,7 +159,7 @@ var EnvelopeIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -204,8 +172,8 @@ var EnvelopeIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
+      /* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
+      /* @__PURE__ */ jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
     ]
   }
 );
@@ -213,7 +181,7 @@ var FileIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -226,8 +194,8 @@ var FileIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "14,2 14,8 20,8" })
+      /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ jsx("polyline", { points: "14,2 14,8 20,8" })
     ]
   }
 );
@@ -235,7 +203,7 @@ var HashIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -248,10 +216,10 @@ var HashIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "10", y1: "3", x2: "8", y2: "21" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", y1: "3", x2: "14", y2: "21" })
+      /* @__PURE__ */ jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
+      /* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
+      /* @__PURE__ */ jsx("line", { x1: "10", y1: "3", x2: "8", y2: "21" }),
+      /* @__PURE__ */ jsx("line", { x1: "16", y1: "3", x2: "14", y2: "21" })
     ]
   }
 );
@@ -259,7 +227,7 @@ var UserIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -272,8 +240,8 @@ var UserIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "8", r: "5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 21a8 8 0 1 0-16 0" })
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "5" }),
+      /* @__PURE__ */ jsx("path", { d: "M20 21a8 8 0 1 0-16 0" })
     ]
   }
 );
@@ -281,7 +249,7 @@ var IdCardIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -294,10 +262,10 @@ var IdCardIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "12", r: "2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 10h4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 14h4" })
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" }),
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "12", r: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 10h4" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 14h4" })
     ]
   }
 );
@@ -305,7 +273,7 @@ var GearIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -318,8 +286,8 @@ var GearIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+      /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
     ]
   }
 );
@@ -327,7 +295,7 @@ var AppIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -340,9 +308,9 @@ var AppIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 3v18" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 9h18" })
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+      /* @__PURE__ */ jsx("path", { d: "M3 9h18" })
     ]
   }
 );
@@ -350,7 +318,7 @@ var RegistryIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+}) => /* @__PURE__ */ jsx(
   "svg",
   {
     width: size,
@@ -362,14 +330,14 @@ var RegistryIcon = ({
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4" })
+    children: /* @__PURE__ */ jsx("path", { d: "m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4" })
   }
 );
 var ThreatActorIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -382,12 +350,12 @@ var ThreatActorIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "10", r: "7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "9", r: "1.5", fill: color }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "15", cy: "9", r: "1.5", fill: color }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 17v-2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 17v-2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 17v-2" })
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "7" }),
+      /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "1.5", fill: color }),
+      /* @__PURE__ */ jsx("circle", { cx: "15", cy: "9", r: "1.5", fill: color }),
+      /* @__PURE__ */ jsx("path", { d: "M9 17v-2" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17v-2" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 17v-2" })
     ]
   }
 );
@@ -395,7 +363,7 @@ var BugIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -408,17 +376,17 @@ var BugIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m8 2 1.88 1.88" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14.12 3.88 16 2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20v-9" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 13H2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M22 13h-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
+      /* @__PURE__ */ jsx("path", { d: "m8 2 1.88 1.88" }),
+      /* @__PURE__ */ jsx("path", { d: "M14.12 3.88 16 2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 20v-9" }),
+      /* @__PURE__ */ jsx("path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }),
+      /* @__PURE__ */ jsx("path", { d: "M6 13H2" }),
+      /* @__PURE__ */ jsx("path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }),
+      /* @__PURE__ */ jsx("path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }),
+      /* @__PURE__ */ jsx("path", { d: "M22 13h-4" }),
+      /* @__PURE__ */ jsx("path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" })
     ]
   }
 );
@@ -426,7 +394,7 @@ var SwordIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -439,10 +407,10 @@ var SwordIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "14.5,17.5 3,6 3,3 6,3 17.5,14.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "13", y1: "19", x2: "19", y2: "13" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", y1: "16", x2: "20", y2: "20" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "19", y1: "21", x2: "21", y2: "19" })
+      /* @__PURE__ */ jsx("polyline", { points: "14.5,17.5 3,6 3,3 6,3 17.5,14.5" }),
+      /* @__PURE__ */ jsx("line", { x1: "13", y1: "19", x2: "19", y2: "13" }),
+      /* @__PURE__ */ jsx("line", { x1: "16", y1: "16", x2: "20", y2: "20" }),
+      /* @__PURE__ */ jsx("line", { x1: "19", y1: "21", x2: "21", y2: "19" })
     ]
   }
 );
@@ -450,7 +418,7 @@ var TargetIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -463,9 +431,9 @@ var TargetIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "2" })
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" })
     ]
   }
 );
@@ -473,7 +441,7 @@ var AlertIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -486,9 +454,9 @@ var AlertIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      /* @__PURE__ */ jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
     ]
   }
 );
@@ -496,7 +464,7 @@ var FlaskIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -509,9 +477,9 @@ var FlaskIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.5 2h7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 16h10" })
+      /* @__PURE__ */ jsx("path", { d: "M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.5 2h7" }),
+      /* @__PURE__ */ jsx("path", { d: "M7 16h10" })
     ]
   }
 );
@@ -519,7 +487,7 @@ var CertificateIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -532,9 +500,9 @@ var CertificateIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m9.5 15.5-3 3v3l3.5-1.5 3.5 1.5v-3l-3-3" })
+      /* @__PURE__ */ jsx("path", { d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z" }),
+      /* @__PURE__ */ jsx("path", { d: "m9.5 15.5-3 3v3l3.5-1.5 3.5 1.5v-3l-3-3" })
     ]
   }
 );
@@ -542,7 +510,7 @@ var WifiIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -555,10 +523,10 @@ var WifiIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "20", x2: "12.01", y2: "20" })
+      /* @__PURE__ */ jsx("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
+      /* @__PURE__ */ jsx("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "20", x2: "12.01", y2: "20" })
     ]
   }
 );
@@ -566,7 +534,7 @@ var WorldIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -579,9 +547,9 @@ var WorldIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 12h20" })
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 12h20" })
     ]
   }
 );
@@ -589,7 +557,7 @@ var QuestionIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -602,9 +570,9 @@ var QuestionIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
     ]
   }
 );
@@ -612,7 +580,7 @@ var CheckIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+}) => /* @__PURE__ */ jsx(
   "svg",
   {
     width: size,
@@ -624,14 +592,14 @@ var CheckIcon = ({
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
   }
 );
 var BoxIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -644,9 +612,9 @@ var BoxIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m3.3 7 8.7 5 8.7-5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 22V12" })
+      /* @__PURE__ */ jsx("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
+      /* @__PURE__ */ jsx("path", { d: "m3.3 7 8.7 5 8.7-5" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 22V12" })
     ]
   }
 );
@@ -654,7 +622,7 @@ var CrosshairIcon = ({
   size = defaultSize,
   color = defaultColor,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+}) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: size,
@@ -667,11 +635,11 @@ var CrosshairIcon = ({
     strokeLinejoin: "round",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "22", y1: "12", x2: "18", y2: "12" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "12", x2: "2", y2: "12" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "6", x2: "12", y2: "2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "22", x2: "12", y2: "18" })
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("line", { x1: "22", y1: "12", x2: "18", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "12", x2: "2", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "6", x2: "12", y2: "2" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "22", x2: "12", y2: "18" })
     ]
   }
 );
@@ -727,7 +695,7 @@ function getInvestigationIcon(nodeType) {
 }
 
 // src/components/ObservableNode.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var NODE_SIZE = 40;
 var ROOT_NODE_WIDTH = 56;
 var ROOT_NODE_HEIGHT = 40;
@@ -778,11 +746,11 @@ function ObservableNodeComponent({ data, selected }) {
   const { label, level, isRoot, whitelisted, fullValue, observableType } = nodeData;
   const borderColor = getLevelColor(level);
   const backgroundColor = getLevelBackgroundColor(level);
-  const IconComponent = (0, import_react.useMemo)(() => {
+  const IconComponent = useMemo(() => {
     if (isRoot) return CrosshairIcon;
     return getObservableIcon(observableType);
   }, [isRoot, observableType]);
-  const shapeStyle = (0, import_react.useMemo)(() => {
+  const shapeStyle = useMemo(() => {
     if (isRoot) {
       return {
         width: ROOT_NODE_WIDTH,
@@ -812,34 +780,34 @@ function ObservableNodeComponent({ data, selected }) {
       transition: "box-shadow 0.15s ease-out, transform 0.1s ease-out"
     };
   }, [isRoot, backgroundColor, borderColor, selected, whitelisted]);
-  const labelStyle = (0, import_react.useMemo)(
+  const labelStyle = useMemo(
     () => ({
       ...nodeStyles.label,
       color: whitelisted ? "#9ca3af" : "#374151"
     }),
     [whitelisted]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "observable-node", style: nodeStyles.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: nodeStyles.shapeWrapper, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: shapeStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ jsxs2("div", { className: "observable-node", style: nodeStyles.container, children: [
+    /* @__PURE__ */ jsxs2("div", { style: nodeStyles.shapeWrapper, children: [
+      /* @__PURE__ */ jsx2("div", { style: shapeStyle, children: /* @__PURE__ */ jsx2(
         IconComponent,
         {
           size: isRoot ? ROOT_ICON_SIZE : ICON_SIZE,
           color: borderColor
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Handle, { type: "source", position: import_react2.Position.Right, style: nodeStyles.handle }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Handle, { type: "target", position: import_react2.Position.Left, style: nodeStyles.handle })
+      /* @__PURE__ */ jsx2(Handle, { type: "source", position: Position.Right, style: nodeStyles.handle }),
+      /* @__PURE__ */ jsx2(Handle, { type: "target", position: Position.Left, style: nodeStyles.handle })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: labelStyle, title: fullValue, children: label })
+    /* @__PURE__ */ jsx2("div", { style: labelStyle, title: fullValue, children: label })
   ] });
 }
-var ObservableNode = (0, import_react.memo)(ObservableNodeComponent);
+var ObservableNode = memo(ObservableNodeComponent);
 
 // src/components/FloatingEdge.tsx
-var import_react3 = require("react");
-var import_react4 = require("@xyflow/react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+import { memo as memo2, useMemo as useMemo2 } from "react";
+import { BaseEdge, getBezierPath } from "@xyflow/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function getControlOffset(sourceX, sourceY, targetX, targetY) {
   const dx = targetX - sourceX;
   const dy = targetY - sourceY;
@@ -856,18 +824,18 @@ function FloatingEdgeComponent({
   markerEnd,
   selected
 }) {
-  const offset = (0, import_react3.useMemo)(
+  const offset = useMemo2(
     () => getControlOffset(sourceX, sourceY, targetX, targetY),
     [sourceX, sourceY, targetX, targetY]
   );
-  const [edgePath] = (0, import_react4.getBezierPath)({
+  const [edgePath] = getBezierPath({
     sourceX,
     sourceY,
     targetX,
     targetY,
     curvature: 0.15
   });
-  const edgeStyle = (0, import_react3.useMemo)(
+  const edgeStyle = useMemo2(
     () => ({
       strokeWidth: selected ? 2.5 : 1.5,
       stroke: selected ? "#3b82f6" : "#94a3b8",
@@ -876,8 +844,8 @@ function FloatingEdgeComponent({
     }),
     [selected, style]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react4.BaseEdge,
+  return /* @__PURE__ */ jsx3(
+    BaseEdge,
     {
       id,
       path: edgePath,
@@ -886,31 +854,43 @@ function FloatingEdgeComponent({
     }
   );
 }
-var FloatingEdge = (0, import_react3.memo)(FloatingEdgeComponent);
+var FloatingEdge = memo2(FloatingEdgeComponent);
 
 // src/hooks/useForceLayout.ts
-var import_react5 = require("react");
-var import_d3_force = require("d3-force");
-var import_react6 = require("@xyflow/react");
+import { useEffect, useRef, useCallback, useMemo as useMemo3 } from "react";
+import {
+  forceSimulation,
+  forceLink,
+  forceManyBody,
+  forceCenter,
+  forceCollide,
+  forceX,
+  forceY
+} from "d3-force";
+import {
+  useReactFlow,
+  useNodesInitialized,
+  useStore
+} from "@xyflow/react";
 var nodeIdsSelector = (state) => {
   const ids = Array.from(state.nodeLookup.keys()).sort();
   return ids.join(",");
 };
 function useForceLayout(config = {}, rootNodeId) {
-  const { getNodes, getEdges, setNodes } = (0, import_react6.useReactFlow)();
-  const nodesInitialized = (0, import_react6.useNodesInitialized)();
-  const nodeIds = (0, import_react6.useStore)(nodeIdsSelector);
-  const forceConfig = (0, import_react5.useMemo)(
+  const { getNodes, getEdges, setNodes } = useReactFlow();
+  const nodesInitialized = useNodesInitialized();
+  const nodeIds = useStore(nodeIdsSelector);
+  const forceConfig = useMemo3(
     () => ({ ...DEFAULT_FORCE_CONFIG, ...config }),
     [config]
   );
-  const simulationRef = (0, import_react5.useRef)(null);
-  const draggingRef = (0, import_react5.useRef)({ nodeId: null, active: false });
-  const nodePositionsRef = (0, import_react5.useRef)(
+  const simulationRef = useRef(null);
+  const draggingRef = useRef({ nodeId: null, active: false });
+  const nodePositionsRef = useRef(
     /* @__PURE__ */ new Map()
   );
-  const rafRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const rafRef = useRef(null);
+  useEffect(() => {
     if (!nodesInitialized || !nodeIds) {
       return;
     }
@@ -952,13 +932,13 @@ function useForceLayout(config = {}, rootNodeId) {
       cancelAnimationFrame(rafRef.current);
       rafRef.current = null;
     }
-    const simulation = (0, import_d3_force.forceSimulation)(simNodes).force(
+    const simulation = forceSimulation(simNodes).force(
       "link",
-      (0, import_d3_force.forceLink)(simLinks).id((d) => d.id).distance(forceConfig.linkDistance).strength(0.4)
+      forceLink(simLinks).id((d) => d.id).distance(forceConfig.linkDistance).strength(0.4)
     ).force(
       "charge",
-      (0, import_d3_force.forceManyBody)().strength(forceConfig.chargeStrength)
-    ).force("center", (0, import_d3_force.forceCenter)(0, 0).strength(forceConfig.centerStrength)).force("collision", (0, import_d3_force.forceCollide)(forceConfig.collisionRadius)).force("x", (0, import_d3_force.forceX)(0).strength(8e-3)).force("y", (0, import_d3_force.forceY)(0).strength(8e-3)).alphaDecay(0.02).velocityDecay(0.35);
+      forceManyBody().strength(forceConfig.chargeStrength)
+    ).force("center", forceCenter(0, 0).strength(forceConfig.centerStrength)).force("collision", forceCollide(forceConfig.collisionRadius)).force("x", forceX(0).strength(8e-3)).force("y", forceY(0).strength(8e-3)).alphaDecay(0.02).velocityDecay(0.35);
     const updateNodes = () => {
       if (draggingRef.current.active) {
         rafRef.current = requestAnimationFrame(updateNodes);
@@ -1010,7 +990,7 @@ function useForceLayout(config = {}, rootNodeId) {
     forceConfig,
     rootNodeId
   ]);
-  const onNodeDragStart = (0, import_react5.useCallback)(
+  const onNodeDragStart = useCallback(
     (_, node) => {
       const simulation = simulationRef.current;
       if (!simulation) return;
@@ -1024,7 +1004,7 @@ function useForceLayout(config = {}, rootNodeId) {
     },
     []
   );
-  const onNodeDrag = (0, import_react5.useCallback)((_, node) => {
+  const onNodeDrag = useCallback((_, node) => {
     const simulation = simulationRef.current;
     if (!simulation) return;
     const simNode = simulation.nodes().find((n) => n.id === node.id);
@@ -1037,7 +1017,7 @@ function useForceLayout(config = {}, rootNodeId) {
       });
     }
   }, []);
-  const onNodeDragStop = (0, import_react5.useCallback)(
+  const onNodeDragStop = useCallback(
     (_, node) => {
       const simulation = simulationRef.current;
       draggingRef.current = { nodeId: null, active: false };
@@ -1058,14 +1038,14 @@ function useForceLayout(config = {}, rootNodeId) {
     },
     [rootNodeId]
   );
-  const updateForceConfig = (0, import_react5.useCallback)(
+  const updateForceConfig = useCallback(
     (updates) => {
       const simulation = simulationRef.current;
       if (!simulation) return;
       if (updates.chargeStrength !== void 0) {
         simulation.force(
           "charge",
-          (0, import_d3_force.forceManyBody)().strength(updates.chargeStrength)
+          forceManyBody().strength(updates.chargeStrength)
         );
       }
       if (updates.linkDistance !== void 0) {
@@ -1077,14 +1057,14 @@ function useForceLayout(config = {}, rootNodeId) {
       if (updates.collisionRadius !== void 0) {
         simulation.force(
           "collision",
-          (0, import_d3_force.forceCollide)(updates.collisionRadius)
+          forceCollide(updates.collisionRadius)
         );
       }
       simulation.alpha(0.3).restart();
     },
     []
   );
-  const restartSimulation = (0, import_react5.useCallback)(() => {
+  const restartSimulation = useCallback(() => {
     const simulation = simulationRef.current;
     if (!simulation) return;
     simulation.alpha(1).restart();
@@ -1099,7 +1079,7 @@ function useForceLayout(config = {}, rootNodeId) {
 }
 
 // src/components/ObservablesGraph.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var nodeTypes = {
   observable: ObservableNode
 };
@@ -1111,7 +1091,7 @@ var defaultEdgeOptions = {
   style: { stroke: "#94a3b8", strokeWidth: 1.5 }
 };
 function createObservableNodes(investigation, rootObservableIds) {
-  const graph = (0, import_cyvest_js2.getObservableGraph)(investigation);
+  const graph = getObservableGraph(investigation);
   return graph.nodes.map((graphNode, index) => {
     const isRoot = rootObservableIds.has(graphNode.id);
     const nodeData = {
@@ -1142,7 +1122,7 @@ function createObservableNodes(investigation, rootObservableIds) {
   });
 }
 function createObservableEdges(investigation) {
-  const graph = (0, import_cyvest_js2.getObservableGraph)(investigation);
+  const graph = getObservableGraph(investigation);
   return graph.edges.map((graphEdge, index) => {
     const edgeData = {
       relationshipType: graphEdge.type,
@@ -1161,7 +1141,7 @@ function createObservableEdges(investigation) {
   });
 }
 var ForceControls = ({ config, onChange, onRestart }) => {
-  const [isExpanded, setIsExpanded] = (0, import_react7.useState)(false);
+  const [isExpanded, setIsExpanded] = useState(false);
   const panelStyle = {
     background: "rgba(255, 255, 255, 0.95)",
     backdropFilter: "blur(8px)",
@@ -1233,18 +1213,18 @@ var ForceControls = ({ config, onChange, onRestart }) => {
     transition: "transform 0.1s ease, box-shadow 0.1s ease",
     boxShadow: "0 2px 4px rgba(59, 130, 246, 0.3)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: panelStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: headerStyle, onClick: () => setIsExpanded(!isExpanded), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: titleStyle, children: "\u26A1 Force Layout" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { style: toggleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "6 9 12 15 18 9" }) }) })
+  return /* @__PURE__ */ jsxs3("div", { style: panelStyle, children: [
+    /* @__PURE__ */ jsxs3("div", { style: headerStyle, onClick: () => setIsExpanded(!isExpanded), children: [
+      /* @__PURE__ */ jsx4("span", { style: titleStyle, children: "\u26A1 Force Layout" }),
+      /* @__PURE__ */ jsx4("button", { style: toggleStyle, children: /* @__PURE__ */ jsx4("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx4("polyline", { points: "6 9 12 15 18 9" }) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: sliderContainerStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 10 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: sliderLabelStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Repulsion" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: config.chargeStrength })
+    /* @__PURE__ */ jsxs3("div", { style: sliderContainerStyle, children: [
+      /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 10 }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: sliderLabelStyle, children: [
+          /* @__PURE__ */ jsx4("span", { children: "Repulsion" }),
+          /* @__PURE__ */ jsx4("span", { children: config.chargeStrength })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "range",
@@ -1256,12 +1236,12 @@ var ForceControls = ({ config, onChange, onRestart }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 10 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: sliderLabelStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Link Distance" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: config.linkDistance })
+      /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 10 }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: sliderLabelStyle, children: [
+          /* @__PURE__ */ jsx4("span", { children: "Link Distance" }),
+          /* @__PURE__ */ jsx4("span", { children: config.linkDistance })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "range",
@@ -1273,12 +1253,12 @@ var ForceControls = ({ config, onChange, onRestart }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 6 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: sliderLabelStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Collision" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: config.collisionRadius })
+      /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 6 }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: sliderLabelStyle, children: [
+          /* @__PURE__ */ jsx4("span", { children: "Collision" }),
+          /* @__PURE__ */ jsx4("span", { children: config.collisionRadius })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "range",
@@ -1290,7 +1270,7 @@ var ForceControls = ({ config, onChange, onRestart }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           onClick: onRestart,
@@ -1321,14 +1301,14 @@ var ObservablesGraphInner = ({
   className,
   showControls = true
 }) => {
-  const [forceConfig, setForceConfig] = (0, import_react7.useState)({
+  const [forceConfig, setForceConfig] = useState({
     ...DEFAULT_FORCE_CONFIG,
     ...initialForceConfig
   });
-  const initialFitDone = (0, import_react7.useRef)(false);
-  const [nodes, setNodes, onNodesChange] = (0, import_react8.useNodesState)(initialNodes);
-  const [edges, setEdges, onEdgesChange] = (0, import_react8.useEdgesState)(initialEdges);
-  import_react7.default.useEffect(() => {
+  const initialFitDone = useRef2(false);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  React3.useEffect(() => {
     setNodes(initialNodes);
     setEdges(initialEdges);
     initialFitDone.current = false;
@@ -1340,30 +1320,30 @@ var ObservablesGraphInner = ({
     updateForceConfig,
     restartSimulation
   } = useForceLayout(forceConfig, primaryRootId);
-  const handleNodeClick = (0, import_react7.useCallback)(
+  const handleNodeClick = useCallback2(
     (_, node) => {
       onNodeClick?.(node.id);
     },
     [onNodeClick]
   );
-  const handleNodeDoubleClick = (0, import_react7.useCallback)(
+  const handleNodeDoubleClick = useCallback2(
     (_, node) => {
       onNodeDoubleClick?.(node.id);
     },
     [onNodeDoubleClick]
   );
-  const handleConfigChange = (0, import_react7.useCallback)(
+  const handleConfigChange = useCallback2(
     (updates) => {
       setForceConfig((prev) => ({ ...prev, ...updates }));
       updateForceConfig(updates);
     },
     [updateForceConfig]
   );
-  const miniMapNodeColor = (0, import_react7.useCallback)((node) => {
+  const miniMapNodeColor = useCallback2((node) => {
     const data = node.data;
     return getLevelColor(data.level);
   }, []);
-  const containerStyle = (0, import_react7.useMemo)(
+  const containerStyle = useMemo4(
     () => ({
       width,
       height,
@@ -1372,8 +1352,8 @@ var ObservablesGraphInner = ({
     }),
     [width, height]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    import_react8.ReactFlow,
+  return /* @__PURE__ */ jsx4("div", { className, style: containerStyle, children: /* @__PURE__ */ jsxs3(
+    ReactFlow,
     {
       nodes,
       edges,
@@ -1387,7 +1367,7 @@ var ObservablesGraphInner = ({
       nodeTypes,
       edgeTypes,
       defaultEdgeOptions,
-      connectionMode: import_react8.ConnectionMode.Loose,
+      connectionMode: ConnectionMode.Loose,
       fitView: true,
       fitViewOptions: { padding: 0.4, maxZoom: 1.5 },
       minZoom: 0.1,
@@ -1402,17 +1382,17 @@ var ObservablesGraphInner = ({
       zoomOnPinch: true,
       panOnScroll: false,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_react8.Background,
+        /* @__PURE__ */ jsx4(
+          Background,
           {
-            variant: import_react8.BackgroundVariant.Dots,
+            variant: BackgroundVariant.Dots,
             gap: 24,
             size: 1,
             color: "#d1d5db"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_react8.Controls,
+        /* @__PURE__ */ jsx4(
+          Controls,
           {
             showInteractive: false,
             style: {
@@ -1422,8 +1402,8 @@ var ObservablesGraphInner = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_react8.MiniMap,
+        /* @__PURE__ */ jsx4(
+          MiniMap,
           {
             nodeColor: miniMapNodeColor,
             zoomable: true,
@@ -1437,7 +1417,7 @@ var ObservablesGraphInner = ({
             maskColor: "rgba(0,0,0,0.08)"
           }
         ),
-        showControls && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Panel, { position: "top-right", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        showControls && /* @__PURE__ */ jsx4(Panel, { position: "top-right", children: /* @__PURE__ */ jsx4(
           ForceControls,
           {
             config: forceConfig,
@@ -1451,7 +1431,7 @@ var ObservablesGraphInner = ({
 };
 var ObservablesGraph = (props) => {
   const { investigation } = props;
-  const { rootKeys, primaryRootId } = (0, import_react7.useMemo)(() => {
+  const { rootKeys, primaryRootId } = useMemo4(() => {
     const rootType = investigation.data_extraction.root_type;
     if (!rootType) {
       return { rootKeys: /* @__PURE__ */ new Set(), primaryRootId: void 0 };
@@ -1465,12 +1445,12 @@ var ObservablesGraph = (props) => {
       primaryRootId: rootsByType[0]?.key
     };
   }, [investigation]);
-  const { initialNodes, initialEdges } = (0, import_react7.useMemo)(() => {
+  const { initialNodes, initialEdges } = useMemo4(() => {
     const nodes = createObservableNodes(investigation, rootKeys);
     const edges = createObservableEdges(investigation);
     return { initialNodes: nodes, initialEdges: edges };
   }, [investigation, rootKeys]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ jsx4(ReactFlowProvider, { children: /* @__PURE__ */ jsx4(
     ObservablesGraphInner,
     {
       ...props,
@@ -1482,14 +1462,23 @@ var ObservablesGraph = (props) => {
 };
 
 // src/components/InvestigationGraph.tsx
-var import_react12 = __toESM(require("react"));
-var import_react13 = require("@xyflow/react");
-var import_style2 = require("@xyflow/react/dist/style.css");
+import React5, { useMemo as useMemo7, useCallback as useCallback3 } from "react";
+import {
+  ReactFlow as ReactFlow2,
+  Background as Background2,
+  Controls as Controls2,
+  MiniMap as MiniMap2,
+  useNodesState as useNodesState2,
+  useEdgesState as useEdgesState2,
+  BackgroundVariant as BackgroundVariant2,
+  MarkerType
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
 
 // src/components/InvestigationNode.tsx
-var import_react9 = require("react");
-var import_react10 = require("@xyflow/react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+import { memo as memo3, useMemo as useMemo5 } from "react";
+import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var NODE_CONFIG = {
   root: {
     minWidth: 140,
@@ -1530,11 +1519,11 @@ function InvestigationNodeComponent({ data, selected }) {
   const borderColor = getLevelColor(level);
   const backgroundColor = getLevelBackgroundColor(level);
   const config = NODE_CONFIG[nodeType] || NODE_CONFIG.check;
-  const IconComponent = (0, import_react9.useMemo)(
+  const IconComponent = useMemo5(
     () => getInvestigationIcon(nodeType),
     [nodeType]
   );
-  const nodeStyle = (0, import_react9.useMemo)(
+  const nodeStyle = useMemo5(
     () => ({
       minWidth: config.minWidth,
       padding: config.padding,
@@ -1551,7 +1540,7 @@ function InvestigationNodeComponent({ data, selected }) {
     }),
     [config, backgroundColor, borderColor, selected]
   );
-  const headerStyle = (0, import_react9.useMemo)(
+  const headerStyle = useMemo5(
     () => ({
       display: "flex",
       alignItems: "center",
@@ -1560,7 +1549,7 @@ function InvestigationNodeComponent({ data, selected }) {
     }),
     [config.alignCenter]
   );
-  const labelStyle = (0, import_react9.useMemo)(
+  const labelStyle = useMemo5(
     () => ({
       fontSize: config.fontSize,
       fontWeight: config.fontWeight,
@@ -1573,7 +1562,7 @@ function InvestigationNodeComponent({ data, selected }) {
     }),
     [config]
   );
-  const descriptionStyle = (0, import_react9.useMemo)(
+  const descriptionStyle = useMemo5(
     () => ({
       marginTop: 4,
       fontSize: 10,
@@ -1595,21 +1584,21 @@ function InvestigationNodeComponent({ data, selected }) {
     border: "none",
     opacity: 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "investigation-node", style: nodeStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: headerStyle, children: [
-      config.showIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconComponent, { size: config.iconSize, color: borderColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: labelStyle, title: label, children: label })
+  return /* @__PURE__ */ jsxs4("div", { className: "investigation-node", style: nodeStyle, children: [
+    /* @__PURE__ */ jsxs4("div", { style: headerStyle, children: [
+      config.showIcon && /* @__PURE__ */ jsx5(IconComponent, { size: config.iconSize, color: borderColor }),
+      /* @__PURE__ */ jsx5("span", { style: labelStyle, title: label, children: label })
     ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: descriptionStyle, title: description, children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react10.Handle, { type: "target", position: import_react10.Position.Left, style: handleStyle }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react10.Handle, { type: "source", position: import_react10.Position.Right, style: handleStyle })
+    description && /* @__PURE__ */ jsx5("div", { style: descriptionStyle, title: description, children: description }),
+    /* @__PURE__ */ jsx5(Handle2, { type: "target", position: Position2.Left, style: handleStyle }),
+    /* @__PURE__ */ jsx5(Handle2, { type: "source", position: Position2.Right, style: handleStyle })
   ] });
 }
-var InvestigationNode = (0, import_react9.memo)(InvestigationNodeComponent);
+var InvestigationNode = memo3(InvestigationNodeComponent);
 
 // src/hooks/useDagreLayout.ts
-var import_react11 = require("react");
-var import_dagre = __toESM(require("@dagrejs/dagre"));
+import { useMemo as useMemo6 } from "react";
+import Dagre from "@dagrejs/dagre";
 var DEFAULT_OPTIONS = {
   direction: "LR",
   // Horizontal layout by default
@@ -1621,7 +1610,7 @@ function computeDagreLayout(nodes, edges, options = {}) {
     return { nodes, edges };
   }
   const opts = { ...DEFAULT_OPTIONS, ...options };
-  const g = new import_dagre.default.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+  const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   g.setGraph({
     rankdir: opts.direction,
     nodesep: opts.nodeSpacing,
@@ -1637,7 +1626,7 @@ function computeDagreLayout(nodes, edges, options = {}) {
   for (const edge of edges) {
     g.setEdge(edge.source, edge.target);
   }
-  import_dagre.default.layout(g);
+  Dagre.layout(g);
   const positionedNodes = nodes.map((node) => {
     const dagNode = g.node(node.id);
     const width = node.measured?.width ?? 150;
@@ -1654,7 +1643,7 @@ function computeDagreLayout(nodes, edges, options = {}) {
 }
 
 // src/components/InvestigationGraph.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var nodeTypes2 = {
   investigation: InvestigationNode
 };
@@ -1665,7 +1654,7 @@ var defaultEdgeOptions2 = {
     strokeWidth: 1.5
   },
   markerEnd: {
-    type: import_react13.MarkerType.ArrowClosed,
+    type: MarkerType.ArrowClosed,
     width: 16,
     height: 16,
     color: "#94a3b8"
@@ -1794,35 +1783,35 @@ var InvestigationGraph = ({
   onNodeClick,
   className
 }) => {
-  const { initialNodes, initialEdges } = (0, import_react12.useMemo)(() => {
+  const { initialNodes, initialEdges } = useMemo7(() => {
     const { nodes: nodes2, edges: edges2 } = createInvestigationGraph(investigation);
     return { initialNodes: nodes2, initialEdges: edges2 };
   }, [investigation]);
-  const { nodes: layoutNodes, edges: layoutEdges } = (0, import_react12.useMemo)(() => {
+  const { nodes: layoutNodes, edges: layoutEdges } = useMemo7(() => {
     return computeDagreLayout(initialNodes, initialEdges, {
       direction: "LR",
       nodeSpacing: 40,
       rankSpacing: 140
     });
   }, [initialNodes, initialEdges]);
-  const [nodes, setNodes, onNodesChange] = (0, import_react13.useNodesState)(layoutNodes);
-  const [edges, setEdges, onEdgesChange] = (0, import_react13.useEdgesState)(layoutEdges);
-  import_react12.default.useEffect(() => {
+  const [nodes, setNodes, onNodesChange] = useNodesState2(layoutNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState2(layoutEdges);
+  React5.useEffect(() => {
     setNodes(layoutNodes);
     setEdges(layoutEdges);
   }, [layoutNodes, layoutEdges, setNodes, setEdges]);
-  const handleNodeClick = (0, import_react12.useCallback)(
+  const handleNodeClick = useCallback3(
     (_, node) => {
       const data = node.data;
       onNodeClick?.(node.id, data.nodeType);
     },
     [onNodeClick]
   );
-  const miniMapNodeColor = (0, import_react12.useCallback)((node) => {
+  const miniMapNodeColor = useCallback3((node) => {
     const data = node.data;
     return getLevelColor(data.level);
   }, []);
-  const containerStyle = (0, import_react12.useMemo)(
+  const containerStyle = useMemo7(
     () => ({
       width,
       height,
@@ -1831,8 +1820,8 @@ var InvestigationGraph = ({
     }),
     [width, height]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_react13.ReactFlow,
+  return /* @__PURE__ */ jsx6("div", { className, style: containerStyle, children: /* @__PURE__ */ jsxs5(
+    ReactFlow2,
     {
       nodes,
       edges,
@@ -1855,17 +1844,17 @@ var InvestigationGraph = ({
       zoomOnPinch: true,
       panOnScroll: false,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react13.Background,
+        /* @__PURE__ */ jsx6(
+          Background2,
           {
-            variant: import_react13.BackgroundVariant.Dots,
+            variant: BackgroundVariant2.Dots,
             gap: 24,
             size: 1,
             color: "#d1d5db"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react13.Controls,
+        /* @__PURE__ */ jsx6(
+          Controls2,
           {
             showInteractive: false,
             style: {
@@ -1875,8 +1864,8 @@ var InvestigationGraph = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react13.MiniMap,
+        /* @__PURE__ */ jsx6(
+          MiniMap2,
           {
             nodeColor: miniMapNodeColor,
             zoomable: true,
@@ -1896,9 +1885,9 @@ var InvestigationGraph = ({
 };
 
 // src/components/CyvestGraph.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var ViewToggle = ({ currentView, onChange }) => {
-  const containerStyle = (0, import_react14.useMemo)(
+  const containerStyle = useMemo8(
     () => ({
       position: "absolute",
       top: 12,
@@ -1916,7 +1905,7 @@ var ViewToggle = ({ currentView, onChange }) => {
     }),
     []
   );
-  const getButtonStyle = (0, import_react14.useCallback)(
+  const getButtonStyle = useCallback4(
     (isActive) => ({
       padding: "8px 14px",
       border: "none",
@@ -1931,8 +1920,8 @@ var ViewToggle = ({ currentView, onChange }) => {
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: containerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ jsxs6("div", { style: containerStyle, children: [
+    /* @__PURE__ */ jsx7(
       "button",
       {
         onClick: () => onChange("observables"),
@@ -1949,8 +1938,8 @@ var ViewToggle = ({ currentView, onChange }) => {
             e.currentTarget.style.color = "#4b5563";
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: /* @__PURE__ */ jsxs6("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsxs6(
             "svg",
             {
               width: "14",
@@ -1962,12 +1951,12 @@ var ViewToggle = ({ currentView, onChange }) => {
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "20", y1: "12", x2: "22", y2: "12" })
+                /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "3" }),
+                /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx7("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
+                /* @__PURE__ */ jsx7("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
+                /* @__PURE__ */ jsx7("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
+                /* @__PURE__ */ jsx7("line", { x1: "20", y1: "12", x2: "22", y2: "12" })
               ]
             }
           ),
@@ -1975,7 +1964,7 @@ var ViewToggle = ({ currentView, onChange }) => {
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         onClick: () => onChange("investigation"),
@@ -1992,8 +1981,8 @@ var ViewToggle = ({ currentView, onChange }) => {
             e.currentTarget.style.color = "#4b5563";
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: /* @__PURE__ */ jsxs6("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsxs6(
             "svg",
             {
               width: "14",
@@ -2005,9 +1994,9 @@ var ViewToggle = ({ currentView, onChange }) => {
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 3v18" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 9h18" })
+                /* @__PURE__ */ jsx7("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+                /* @__PURE__ */ jsx7("path", { d: "M9 3v18" }),
+                /* @__PURE__ */ jsx7("path", { d: "M3 9h18" })
               ]
             }
           ),
@@ -2026,16 +2015,16 @@ var CyvestGraph = ({
   className,
   showViewToggle = true
 }) => {
-  const [view, setView] = (0, import_react14.useState)(
+  const [view, setView] = useState2(
     initialView
   );
-  const handleNodeClick = (0, import_react14.useCallback)(
+  const handleNodeClick = useCallback4(
     (nodeId, _nodeType) => {
       onNodeClick?.(nodeId);
     },
     [onNodeClick]
   );
-  const containerStyle = (0, import_react14.useMemo)(
+  const containerStyle = useMemo8(
     () => ({
       width,
       height,
@@ -2043,9 +2032,9 @@ var CyvestGraph = ({
     }),
     [width, height]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, style: containerStyle, children: [
-    showViewToggle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ViewToggle, { currentView: view, onChange: setView }),
-    view === "observables" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ jsxs6("div", { className, style: containerStyle, children: [
+    showViewToggle && /* @__PURE__ */ jsx7(ViewToggle, { currentView: view, onChange: setView }),
+    view === "observables" ? /* @__PURE__ */ jsx7(
       ObservablesGraph,
       {
         investigation,
@@ -2054,7 +2043,7 @@ var CyvestGraph = ({
         onNodeClick: handleNodeClick,
         showControls: true
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ) : /* @__PURE__ */ jsx7(
       InvestigationGraph,
       {
         investigation,
@@ -2065,8 +2054,7 @@ var CyvestGraph = ({
     )
   ] });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   CyvestGraph,
   DEFAULT_FORCE_CONFIG,
   INVESTIGATION_ICON_MAP,
@@ -2075,4 +2063,4 @@ var CyvestGraph = ({
   ObservablesGraph,
   getInvestigationIcon,
   getObservableIcon
-});
+};