@xyo-network/react-node-renderer 7.5.8 → 7.5.12

package/dist/browser/index.mjs

@@ -1,60 +1,47 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/module/CardParser.tsx
 import { asArchivistInstance, isArchivistInstance } from "@xyo-network/archivist-model";
 import { asDivinerInstance, isDivinerInstance } from "@xyo-network/diviner-model";
 import { ArchivistCard } from "@xyo-network/react-archivist";
 import { DivinerCard, ModuleCard } from "@xyo-network/react-module";
-import React from "react";
-var ModuleCardParser = /* @__PURE__ */ __name(({ mod }) => {
+import { jsx } from "react/jsx-runtime";
+var ModuleCardParser = ({ mod }) => {
   switch (true) {
     case isArchivistInstance(mod): {
-      return /* @__PURE__ */ React.createElement(ArchivistCard, {
-        mod: asArchivistInstance(mod)
-      });
+      return /* @__PURE__ */ jsx(ArchivistCard, { mod: asArchivistInstance(mod) });
     }
     case isDivinerInstance(mod): {
-      return /* @__PURE__ */ React.createElement(DivinerCard, {
-        mod: asDivinerInstance(mod)
-      });
+      return /* @__PURE__ */ jsx(DivinerCard, { mod: asDivinerInstance(mod) });
     }
     default: {
-      return /* @__PURE__ */ React.createElement(ModuleCard, {
-        mod
-      });
+      return /* @__PURE__ */ jsx(ModuleCard, { mod });
     }
   }
-}, "ModuleCardParser");
+};
 
 // src/components/module/graph/GraphFlexBox.tsx
 import { Button as Button3 } from "@mui/material";
-import React10, { useRef as useRef3 } from "react";
+import { useRef as useRef3 } from "react";
 
 // src/contexts/CytoscapeInstance/Context.ts
 import { createContextEx } from "@xylabs/react-shared";
 var CytoscapeInstanceContext = createContextEx();
 
 // src/contexts/CytoscapeInstance/Provider.tsx
-import React2, { useMemo, useState } from "react";
-var CytoscapeInstanceProvider = /* @__PURE__ */ __name(({ children, defaultInstance }) => {
+import { useMemo, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
   const [cy, setCy] = useState(() => defaultInstance);
   const value = useMemo(() => ({
     cy,
     provided: true,
     setCy
-  }), [
-    cy,
-    setCy
-  ]);
-  return /* @__PURE__ */ React2.createElement(CytoscapeInstanceContext, {
-    value
-  }, children);
-}, "CytoscapeInstanceProvider");
+  }), [cy, setCy]);
+  return /* @__PURE__ */ jsx2(CytoscapeInstanceContext, { value, children });
+};
 
 // src/contexts/CytoscapeInstance/use.ts
 import { useContextEx } from "@xylabs/react-shared";
-var useCytoscapeInstance = /* @__PURE__ */ __name((required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required), "useCytoscapeInstance");
+var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
 
 // src/hooks/cytoscape/elements/useCytoscapeElements.ts
 import { useAsyncEffect } from "@xylabs/react-async-effect";
@@ -68,7 +55,7 @@ import { exists, isFalsy } from "@xylabs/sdk-js";
 import { isDefined } from "@xylabs/sdk-js";
 import { renderToStaticMarkup } from "react-dom/server";
 var dataUri = "data:image/svg+xml,";
-var encodeSvg = /* @__PURE__ */ __name((reactElement, color) => {
+var encodeSvg = (reactElement, color) => {
   const svgString = renderToStaticMarkup(reactElement);
   const doc = new DOMParser().parseFromString(svgString, "text/html");
   const svgElement = doc.querySelectorAll("svg")[0];
@@ -78,10 +65,10 @@ var encodeSvg = /* @__PURE__ */ __name((reactElement, color) => {
     svgElement.style.fill = color ?? "black";
   }
   return `${dataUri}${globalThis.encodeURIComponent(svgElement.outerHTML)}`;
-}, "encodeSvg");
+};
 
 // src/Cytoscape/lib/iconMap.ts
-var generateIconMap = /* @__PURE__ */ __name(() => ({
+var generateIconMap = () => ({
   archivist: "",
   bridge: "",
   diviner: "",
@@ -89,7 +76,7 @@ var generateIconMap = /* @__PURE__ */ __name(() => ({
   node: "",
   sentinel: "",
   witness: ""
-}), "generateIconMap");
+});
 
 // src/Cytoscape/lib/layout/ColaLayout.ts
 var ColaLayout = {
@@ -100,12 +87,12 @@ var ColaLayout = {
 
 // src/Cytoscape/lib/layout/ConcentricLayout.ts
 var ConcentricLayout = {
-  concentric: /* @__PURE__ */ __name(function(node) {
+  concentric: function(node) {
     return node.degree(false);
-  }, "concentric"),
-  levelWidth: /* @__PURE__ */ __name(function() {
+  },
+  levelWidth: function() {
     return 2;
-  }, "levelWidth"),
+  },
   minNodeSpacing: 75,
   name: "concentric"
 };
@@ -117,7 +104,7 @@ import { isDivinerInstance as isDivinerInstance2 } from "@xyo-network/diviner-mo
 import { isNodeInstance } from "@xyo-network/node-model";
 import { isSentinelInstance } from "@xyo-network/sentinel-model";
 import { isWitnessModule } from "@xyo-network/witness-model";
-var parseModuleType = /* @__PURE__ */ __name((mod) => {
+var parseModuleType = (mod) => {
   let type = "module";
   if (mod) {
     if (isArchivistInstance2(mod)) {
@@ -135,7 +122,7 @@ var parseModuleType = /* @__PURE__ */ __name((mod) => {
     }
   }
   return type;
-}, "parseModuleType");
+};
 
 // src/Cytoscape/CytoscapeElements.ts
 var CytoscapeElements = {
@@ -152,23 +139,13 @@ var CytoscapeElements = {
   },
   async buildElements(mod) {
     const info = await CytoscapeElements.recurseNodes(mod);
-    const newElements = await this.buildElementsFromInfo(info, void 0, [
-      "activeNode"
-    ]);
+    const newElements = await this.buildElementsFromInfo(info, void 0, ["activeNode"]);
     return newElements;
   },
   async buildElementsFromInfo(info, root, classes = []) {
-    const newNode = CytoscapeElements.buildNode(info.mod, {
-      childCount: info.children.length,
-      depth: info.depth
-    }, classes);
-    const newEdge = root ? CytoscapeElements.buildEdge(root, newNode, {
-      depth: info.depth,
-      siblingCount: info.children.length
-    }) : void 0;
-    const newElements = [
-      newNode
-    ];
+    const newNode = CytoscapeElements.buildNode(info.mod, { childCount: info.children.length, depth: info.depth }, classes);
+    const newEdge = root ? CytoscapeElements.buildEdge(root, newNode, { depth: info.depth, siblingCount: info.children.length }) : void 0;
+    const newElements = [newNode];
     if (newEdge) {
       newElements.push(newEdge);
     }
@@ -190,11 +167,9 @@ var CytoscapeElements = {
       }
     };
   },
-  buildRootNode: /* @__PURE__ */ __name((mod) => {
-    return CytoscapeElements.buildNode(mod, {}, [
-      "activeNode"
-    ]);
-  }, "buildRootNode"),
+  buildRootNode: (mod) => {
+    return CytoscapeElements.buildNode(mod, {}, ["activeNode"]);
+  },
   normalizeName(name) {
     if (isFalsy(name)) return;
     if (name.length > this.MaxNameLength) return `${name.slice(0, 20)}...`;
@@ -207,22 +182,29 @@ var CytoscapeElements = {
       mod: root
     };
     if (maxDepth > 0) {
-      const children = await root.resolve("*", {
-        direction: "down",
-        maxDepth: 1
-      });
-      info.children = (await Promise.all(children.map(async (child) => {
-        if (child.address !== root.address) {
-          return await this.recurseNodes(child, maxDepth - 1, depth + 1);
-        }
-      }))).filter(exists);
+      const children = await root.resolve("*", { direction: "down", maxDepth: 1 });
+      info.children = (await Promise.all(
+        children.map(async (child) => {
+          if (child.address !== root.address) {
+            return await this.recurseNodes(child, maxDepth - 1, depth + 1);
+          }
+        })
+      )).filter(exists);
     }
     return info;
   }
 };
 
 // src/Cytoscape/CytoscapeIcons.tsx
-import { BubbleChartRounded as BubbleChartRoundedIcon, Hub as HubIcon, InsertLinkRounded as InsertLinkRoundedIcon, Inventory2Rounded as Inventory2RoundedIcon, QuestionMarkRounded as QuestionMarkRoundedIcon, TimerRounded as TimerRoundedIcon, VisibilityRounded as VisibilityRoundedIcon } from "@mui/icons-material";
+import {
+  BubbleChartRounded as BubbleChartRoundedIcon,
+  Hub as HubIcon,
+  InsertLinkRounded as InsertLinkRoundedIcon,
+  Inventory2Rounded as Inventory2RoundedIcon,
+  QuestionMarkRounded as QuestionMarkRoundedIcon,
+  TimerRounded as TimerRoundedIcon,
+  VisibilityRounded as VisibilityRoundedIcon
+} from "@mui/icons-material";
 var CyIconSet = {
   archivist: Inventory2RoundedIcon,
   bridge: InsertLinkRoundedIcon,
@@ -234,7 +216,7 @@ var CyIconSet = {
 };
 
 // src/Cytoscape/CytoscapeStyles.ts
-var NodeWithName = /* @__PURE__ */ __name((color, outlineColor) => ({
+var NodeWithName = (color, outlineColor) => ({
   selector: "node[name]",
   css: {
     color,
@@ -246,25 +228,23 @@ var NodeWithName = /* @__PURE__ */ __name((color, outlineColor) => ({
     "text-outline-width": "1px",
     "text-valign": "top"
   }
-}), "NodeWithName");
-var Node = /* @__PURE__ */ __name((icons, bgColor, hideLabels = false) => ({
+});
+var Node = (icons, bgColor, hideLabels = false) => ({
   selector: "node",
   css: {
     "background-color": bgColor,
     "background-height": "75%",
-    "background-image": /* @__PURE__ */ __name((elem) => icons[elem.data("type")], "background-image"),
+    "background-image": (elem) => icons[elem.data("type")],
     "background-width": "24",
     "label": hideLabels ? void 0 : "data(name)",
     "shape": "round-rectangle"
   }
-}), "Node");
-var NodeAsRoot = /* @__PURE__ */ __name((bgColor) => ({
+});
+var NodeAsRoot = (bgColor) => ({
   selector: ".activeNode",
-  css: {
-    "background-color": bgColor
-  }
-}), "NodeAsRoot");
-var EdgeStyled = /* @__PURE__ */ __name((lineColor, targetArrowColor) => ({
+  css: { "background-color": bgColor }
+});
+var EdgeStyled = (lineColor, targetArrowColor) => ({
   selector: "edge",
   css: {
     "curve-style": "bezier",
@@ -274,20 +254,21 @@ var EdgeStyled = /* @__PURE__ */ __name((lineColor, targetArrowColor) => ({
     "target-arrow-shape": "triangle",
     "width": 3
   }
-}), "EdgeStyled");
+});
 
 // src/hooks/cytoscape/elements/useCytoscapeElements.ts
-var useCytoscapeElements = /* @__PURE__ */ __name((mod) => {
+var useCytoscapeElements = (mod) => {
   const [elements, setElements] = useState2([]);
-  useAsyncEffect(async () => {
-    const moduleInstance = mod?.deref();
-    if (moduleInstance) {
-      const newElements = await CytoscapeElements.buildElements(moduleInstance) ?? [];
-      setElements(newElements);
-    }
-  }, [
-    mod
-  ]);
+  useAsyncEffect(
+    async () => {
+      const moduleInstance = mod?.deref();
+      if (moduleInstance) {
+        const newElements = await CytoscapeElements.buildElements(moduleInstance) ?? [];
+        setElements(newElements);
+      }
+    },
+    [mod]
+  );
   useEffect(() => {
     let attachedListener;
     let detachedListener;
@@ -305,15 +286,17 @@ var useCytoscapeElements = /* @__PURE__ */ __name((mod) => {
       attachedListener?.();
       detachedListener?.();
     };
-  }, [
-    mod
-  ]);
+  }, [mod]);
   return elements;
-}, "useCytoscapeElements");
+};
 
 // src/hooks/cytoscape/elements/useHoveredNode.tsx
-import { useCallback, useEffect as useEffect2, useState as useState3 } from "react";
-var useHoveredNode = /* @__PURE__ */ __name((renderedElements) => {
+import {
+  useCallback,
+  useEffect as useEffect2,
+  useState as useState3
+} from "react";
+var useHoveredNode = (renderedElements) => {
   const { cy } = useCytoscapeInstance(true);
   const [hoveredNode, setHoveredNode] = useState3();
   const nodeListener = useCallback((node) => {
@@ -325,42 +308,31 @@ var useHoveredNode = /* @__PURE__ */ __name((renderedElements) => {
     if (renderedElements) {
       renderedElements.nodes().forEach(nodeListener);
     }
-  }, [
-    nodeListener,
-    renderedElements
-  ]);
+  }, [nodeListener, renderedElements]);
   useEffect2(() => {
     cy?.deref()?.ready(() => {
       cy?.deref()?.nodes().forEach(nodeListener);
     });
-  }, [
-    cy,
-    nodeListener
-  ]);
-  return [
-    hoveredNode,
-    setHoveredNode
-  ];
-}, "useHoveredNode");
+  }, [cy, nodeListener]);
+  return [hoveredNode, setHoveredNode];
+};
 
 // src/hooks/cytoscape/elements/useNewElements.tsx
 import { useWeakModuleFromNode } from "@xyo-network/react-node";
 import { useMemo as useMemo2 } from "react";
-var useNewElements = /* @__PURE__ */ __name((selectedElement) => {
+var useNewElements = (selectedElement) => {
   const selectedAddress = useMemo2(() => {
     const { address: selectedAddress2 } = selectedElement?.data() ?? {};
     return selectedAddress2;
-  }, [
-    selectedElement
-  ]);
+  }, [selectedElement]);
   const [mod] = useWeakModuleFromNode(selectedAddress);
   const newElements = useCytoscapeElements(mod);
   return newElements;
-}, "useNewElements");
+};
 
 // src/hooks/cytoscape/elements/useRenderNewElements.tsx
 import { useMemo as useMemo3 } from "react";
-var useRenderNewElements = /* @__PURE__ */ __name((newElements = [], hideLabels) => {
+var useRenderNewElements = (newElements = [], _hideLabels) => {
   const { cy } = useCytoscapeInstance(true);
   return useMemo3(() => {
     if (newElements.length > 1) {
@@ -368,38 +340,31 @@ var useRenderNewElements = /* @__PURE__ */ __name((newElements = [], hideLabels)
       cy?.deref()?.layout(ColaLayout).run();
       return renderedElements;
     }
-  }, [
-    cy,
-    hideLabels,
-    newElements
-  ]);
-}, "useRenderNewElements");
+  }, [cy, newElements]);
+};
 
 // src/hooks/cytoscape/elements/useSelectedElement.tsx
 import { useState as useState4 } from "react";
-var useSelectedElement = /* @__PURE__ */ __name(() => {
+var useSelectedElement = () => {
   const [selectedElement, setSelectedElement] = useState4();
   const { cy } = useCytoscapeInstance(true);
-  const updateStyles = /* @__PURE__ */ __name((element) => {
+  const updateStyles = (element) => {
     const nodes = cy?.deref()?.nodes();
     nodes?.toggleClass("activeNode", false);
     element.toggleClass("activeNode", true);
-  }, "updateStyles");
-  const toggleSelectedElement = /* @__PURE__ */ __name((address) => {
+  };
+  const toggleSelectedElement = (address) => {
     const selectedNode = cy?.deref()?.nodes(`[id="${address}"]`)?.[0];
     if (selectedNode) {
       setSelectedElement(selectedNode);
       updateStyles(selectedNode);
     }
-  }, "toggleSelectedElement");
-  return {
-    selectedElement,
-    toggleSelectedElement
   };
-}, "useSelectedElement");
+  return { selectedElement, toggleSelectedElement };
+};
 
 // src/hooks/cytoscape/elements/useElements.tsx
-var useElements = /* @__PURE__ */ __name((hideLabels) => {
+var useElements = (hideLabels) => {
   const { selectedElement, toggleSelectedElement } = useSelectedElement();
   const newElements = useNewElements(selectedElement);
   const renderedElements = useRenderNewElements(newElements, hideLabels);
@@ -409,7 +374,7 @@ var useElements = /* @__PURE__ */ __name((hideLabels) => {
     setHoveredNode,
     toggleSelectedElement
   };
-}, "useElements");
+};
 
 // src/hooks/cytoscape/useCytoscapeOptions.ts
 import { isDefined as isDefined2 } from "@xylabs/sdk-js";
@@ -422,26 +387,23 @@ import { useMemo as useMemo5 } from "react";
 
 // src/hooks/cytoscape/useIcons.tsx
 import { useTheme } from "@mui/material";
-import React3, { useMemo as useMemo4 } from "react";
-var useIcons = /* @__PURE__ */ __name(() => {
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var useIcons = () => {
   const theme = useTheme();
   const icons = useMemo4(() => {
     const iconMap = generateIconMap();
     return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-      const icon = /* @__PURE__ */ React3.createElement(IconComponent, {
-        fontSize: "small"
-      });
+      const icon = /* @__PURE__ */ jsx3(IconComponent, { fontSize: "small" });
       acc[name] = encodeSvg(icon, theme.vars.palette.primary.contrastText);
       return acc;
     }, iconMap);
-  }, [
-    theme.vars.palette.primary.contrastText
-  ]);
+  }, [theme.vars.palette.primary.contrastText]);
   return icons;
-}, "useIcons");
+};
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
-var useCytoscapeStyle = /* @__PURE__ */ __name((hideLabels = false) => {
+var useCytoscapeStyle = (hideLabels = false) => {
   const theme = useTheme2();
   const dark = useIsDark();
   const icons = useIcons();
@@ -449,21 +411,23 @@ var useCytoscapeStyle = /* @__PURE__ */ __name((hideLabels = false) => {
     // eslint-disable-next-line complexity
     () => [
       Node(icons, dark ? theme.colorSchemes.dark?.palette.primary.main : theme.colorSchemes.light?.palette.primary.main, hideLabels),
-      NodeWithName(dark ? theme.colorSchemes.dark?.palette.primary.contrastText : theme.colorSchemes.light?.palette.primary.contrastText, dark ? theme.colorSchemes.dark?.palette.text.primary : theme.colorSchemes.light?.palette.text.primary),
+      NodeWithName(
+        dark ? theme.colorSchemes.dark?.palette.primary.contrastText : theme.colorSchemes.light?.palette.primary.contrastText,
+        dark ? theme.colorSchemes.dark?.palette.text.primary : theme.colorSchemes.light?.palette.text.primary
+      ),
       NodeAsRoot(dark ? theme.colorSchemes.dark?.palette.secondary.main : theme.colorSchemes.light?.palette.secondary.main),
-      EdgeStyled(dark ? theme.colorSchemes.dark?.palette.divider : theme.colorSchemes.light?.palette.divider, dark ? theme.colorSchemes.dark?.palette.divider : theme.colorSchemes.light?.palette.divider)
+      EdgeStyled(
+        dark ? theme.colorSchemes.dark?.palette.divider : theme.colorSchemes.light?.palette.divider,
+        dark ? theme.colorSchemes.dark?.palette.divider : theme.colorSchemes.light?.palette.divider
+      )
     ],
-    [
-      icons,
-      hideLabels,
-      theme
-    ]
+    [icons, hideLabels, theme, dark]
   );
   return style;
-}, "useCytoscapeStyle");
+};
 
 // src/hooks/cytoscape/useCytoscapeOptions.ts
-var useCytoscapeOptions = /* @__PURE__ */ __name((elements, style, layout) => {
+var useCytoscapeOptions = (elements, style, layout) => {
   const defaultStyle = useCytoscapeStyle();
   const resolvedLayout = layout ?? ConcentricLayout;
   const resolvedStyle = style ?? defaultStyle;
@@ -475,19 +439,23 @@ var useCytoscapeOptions = /* @__PURE__ */ __name((elements, style, layout) => {
         style: resolvedStyle
       };
     }
-  }, [
-    elements,
-    resolvedLayout,
-    resolvedStyle
-  ]);
+  }, [elements, resolvedLayout, resolvedStyle]);
   return options;
-}, "useCytoscapeOptions");
+};
 
 // src/hooks/cytoscape/useModuleDetails.tsx
 import { usePromise } from "@xylabs/react-promise";
-import { isDefined as isDefined3, isDefinedNotNull, isTruthy } from "@xylabs/sdk-js";
-import { useCallback as useCallback2, useEffect as useEffect3, useState as useState5 } from "react";
-var useModuleDetails = /* @__PURE__ */ __name((rootModule, onFoundModule) => {
+import {
+  isDefined as isDefined3,
+  isDefinedNotNull,
+  isTruthy
+} from "@xylabs/sdk-js";
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useState as useState5
+} from "react";
+var useModuleDetails = (rootModule, onFoundModule) => {
   const { cy } = useCytoscapeInstance();
   const [moduleAddress, setModuleAddress] = useState5();
   const [foundModule] = usePromise(async () => {
@@ -497,10 +465,7 @@ var useModuleDetails = /* @__PURE__ */ __name((rootModule, onFoundModule) => {
       const foundModule2 = await rootModuleInstance.resolve(moduleAddress);
       return foundModule2 ?? null;
     }
-  }, [
-    moduleAddress,
-    rootModule
-  ]);
+  }, [moduleAddress, rootModule]);
   const createObserver = useCallback2(() => {
     return new ResizeObserver(() => {
       if (moduleAddress === null) {
@@ -514,11 +479,7 @@ var useModuleDetails = /* @__PURE__ */ __name((rootModule, onFoundModule) => {
         }, 100);
       }
     });
-  }, [
-    cy,
-    moduleAddress,
-    foundModule
-  ]);
+  }, [cy, moduleAddress, foundModule]);
   useEffect3(() => {
     const resizeObserver = createObserver();
     const container = cy?.deref()?.container();
@@ -528,24 +489,13 @@ var useModuleDetails = /* @__PURE__ */ __name((rootModule, onFoundModule) => {
     return () => {
       if (container) resizeObserver.unobserve(container);
     };
-  }, [
-    cy,
-    moduleAddress,
-    foundModule,
-    rootModule
-  ]);
+  }, [cy, moduleAddress, foundModule, rootModule, createObserver]);
   useEffect3(() => {
     if (foundModule) {
       onFoundModule?.();
     }
-  }, [
-    cy,
-    moduleAddress,
-    foundModule,
-    onFoundModule,
-    createObserver
-  ]);
-  const onModuleDetails = /* @__PURE__ */ __name((address) => {
+  }, [cy, moduleAddress, foundModule, onFoundModule, createObserver]);
+  const onModuleDetails = (address) => {
     const moduleNode = cy?.deref()?.nodes(`[id="${address}"]`);
     const rootModuleNode = cy?.deref()?.nodes(`[id="${rootModule?.deref()?.address}"]`);
     const foundModuleNode = cy?.deref()?.nodes(`[id="${foundModule?.address}"]`);
@@ -559,20 +509,17 @@ var useModuleDetails = /* @__PURE__ */ __name((rootModule, onFoundModule) => {
       activeNode?.toggleClass("activeNode", true);
     }
     setModuleAddress(address);
-  }, "onModuleDetails");
-  return {
-    mod: foundModule,
-    onModuleDetails
   };
-}, "useModuleDetails");
+  return { mod: foundModule, onModuleDetails };
+};
 
 // src/hooks/cytoscape/useRelationalGraphOptions.tsx
 import { useState as useState6 } from "react";
-var useRelationalGraphOptions = /* @__PURE__ */ __name((mod) => {
+var useRelationalGraphOptions = (mod) => {
   const [hideLabels, setHideLabels] = useState6(true);
-  const handleToggleLabels = /* @__PURE__ */ __name(() => {
+  const handleToggleLabels = () => {
     setHideLabels((oldValue) => !oldValue);
-  }, "handleToggleLabels");
+  };
   const elements = useCytoscapeElements(mod);
   const style = useCytoscapeStyle(hideLabels);
   const options = useCytoscapeOptions(elements, style, ConcentricLayout);
@@ -581,25 +528,38 @@ var useRelationalGraphOptions = /* @__PURE__ */ __name((mod) => {
     hideLabels,
     options
   };
-}, "useRelationalGraphOptions");
+};
 
 // src/components/cytoscape-extensions/WithExtensions.tsx
 import cytoscape from "cytoscape";
 import cola from "cytoscape-cola";
 import coseBilkent from "cytoscape-cose-bilkent";
-import React4, { useMemo as useMemo7 } from "react";
-var WithExtensions = /* @__PURE__ */ __name(({ children }) => {
+import { useMemo as useMemo7 } from "react";
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+var WithExtensions = ({ children }) => {
   const initialized = useMemo7(() => {
     cytoscape.use(cola);
     cytoscape.use(coseBilkent);
     return true;
   }, []);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, initialized ? children : void 0);
-}, "WithExtensions");
+  return /* @__PURE__ */ jsx4(Fragment, { children: initialized ? children : void 0 });
+};
 
 // src/components/relational/graph/Graph.tsx
-import { Box, Button, ButtonGroup, Card, CardHeader, Paper, useTheme as useTheme3 } from "@mui/material";
-import { FlexCol, FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Card,
+  CardHeader,
+  Paper,
+  useTheme as useTheme3
+} from "@mui/material";
+import {
+  FlexCol,
+  FlexGrowRow,
+  FlexRow
+} from "@xylabs/react-flexbox";
 import { Identicon } from "@xylabs/react-identicon";
 import { asAddress, isDefined as isDefined4 } from "@xylabs/sdk-js";
 import { useWeakModuleFromNode as useWeakModuleFromNode2 } from "@xyo-network/react-node";
@@ -608,14 +568,17 @@ import cola2 from "cytoscape-cola";
 import coseBilkentLayout from "cytoscape-cose-bilkent";
 import dagre from "cytoscape-dagre";
 import euler from "cytoscape-euler";
-import React5, { useEffect as useEffect4, useRef, useState as useState7 } from "react";
-var applyLayout = /* @__PURE__ */ __name((cy, name = "cola", options) => {
-  cy?.layout({
-    name,
-    ...options
-  }).run();
-}, "applyLayout");
-var loadLayout = /* @__PURE__ */ __name((layout = "cola") => {
+import {
+  useEffect as useEffect4,
+  useLayoutEffect,
+  useRef,
+  useState as useState7
+} from "react";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var applyLayout = (cy, name = "cola", options) => {
+  cy?.layout({ name, ...options }).run();
+};
+var loadLayout = (layout = "cola") => {
   switch (layout) {
     case "cose-bilkent": {
       cytoscape2.use(coseBilkentLayout);
@@ -638,37 +601,48 @@ var loadLayout = /* @__PURE__ */ __name((layout = "cola") => {
       break;
     }
   }
-}, "loadLayout");
-var ModuleHoverDetails = /* @__PURE__ */ __name(({ name, address, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(Card, {
-    elevation: 3,
-    ...props
-  }, /* @__PURE__ */ React5.createElement(CardHeader, {
-    avatar: /* @__PURE__ */ React5.createElement(Paper, {
-      elevation: 6,
-      sx: {
-        bgcolor: "#fff",
-        p: 1
-      }
-    }, /* @__PURE__ */ React5.createElement(Identicon, {
-      value: address,
-      size: 24
-    })),
-    title: name,
-    subheader: address
-  }));
-}, "ModuleHoverDetails");
-var NodeRelationalGraphFlexBox = /* @__PURE__ */ __name(({ actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props }) => {
+};
+var ModuleHoverDetails = ({
+  name,
+  address,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx5(Card, { elevation: 3, ...props, children: /* @__PURE__ */ jsx5(
+    CardHeader,
+    {
+      avatar: /* @__PURE__ */ jsx5(
+        Paper,
+        {
+          elevation: 6,
+          sx: { bgcolor: "#fff", p: 1 },
+          children: /* @__PURE__ */ jsx5(Identicon, { value: address, size: 24 })
+        }
+      ),
+      title: name,
+      subheader: address
+    }
+  ) });
+};
+var NodeRelationalGraphFlexBox = ({
+  actions,
+  children,
+  node,
+  layout,
+  layoutOptions,
+  showDetails,
+  detail,
+  options,
+  onHover,
+  ...props
+}) => {
   const theme = useTheme3();
   const [cy, setCy] = useState7();
   const cytoscapeRef = useRef(null);
   const [hoverBoundingBox, setHoverBoundingBox] = useState7();
   const [hoverAddress, setHoverAddress] = useState7();
-  const [moduleInstance] = useWeakModuleFromNode2(hoverAddress, {
-    node
-  });
+  const [moduleInstance] = useWeakModuleFromNode2(hoverAddress, { node });
   useEffect4(() => {
-    const listener = /* @__PURE__ */ __name(({ target }) => {
+    const listener = ({ target }) => {
       const cyNode = target;
       const bb = cyNode?.renderedBoundingBox?.();
       setHoverBoundingBox(bb);
@@ -682,20 +656,17 @@ var NodeRelationalGraphFlexBox = /* @__PURE__ */ __name(({ actions, children, no
           onHover?.(asAddress(id));
         }
       }
-    }, "listener");
+    };
     cy?.on("mouseover tap", listener);
     return () => {
       cy?.off("mouseover tap", listener);
     };
-  }, [
-    onHover,
-    cy
-  ]);
-  const handleReset = /* @__PURE__ */ __name(() => {
+  }, [onHover, cy]);
+  const handleReset = () => {
     cy?.reset();
     applyLayout(cy, layout ?? "euler", layoutOptions);
-  }, "handleReset");
-  useEffect4(() => {
+  };
+  useLayoutEffect(() => {
     let newCy;
     const container = cytoscapeRef.current;
     if (container) {
@@ -712,161 +683,115 @@ var NodeRelationalGraphFlexBox = /* @__PURE__ */ __name(({ actions, children, no
       newCy?.destroy();
       setCy(void 0);
     };
-  }, [
-    options,
-    cytoscapeRef,
-    layoutOptions
-  ]);
+  }, [options, cytoscapeRef, layoutOptions]);
   useEffect4(() => {
     if (cy) {
       loadLayout(layout);
       applyLayout(cy, layout ?? "cola", layoutOptions);
     }
-  }, [
-    cy,
-    layoutOptions,
-    layout
-  ]);
-  return /* @__PURE__ */ React5.createElement(FlexCol, {
-    id: "relational-graph-wrapper",
-    ...props
-  }, hoverAddress && hoverBoundingBox ? /* @__PURE__ */ React5.createElement(Box, {
-    position: "absolute",
-    top: hoverBoundingBox.y1,
-    left: hoverBoundingBox.x1,
-    zIndex: 100
-  }, /* @__PURE__ */ React5.createElement(ModuleHoverDetails, {
-    address: hoverAddress,
-    name: moduleInstance?.deref()?.id ?? "Unknown"
-  })) : null, /* @__PURE__ */ React5.createElement(FlexRow, {
-    justifyContent: "start",
-    width: "100%"
-  }, actions === null ? null : isDefined4(actions) ? /* @__PURE__ */ React5.createElement(ButtonGroup, null, actions, /* @__PURE__ */ React5.createElement(Button, {
-    size: "small",
-    variant: "contained",
-    onClick: handleReset
-  }, "Reset View")) : /* @__PURE__ */ React5.createElement(Button, {
-    size: "small",
-    variant: "contained",
-    onClick: handleReset
-  }, "Reset")), /* @__PURE__ */ React5.createElement(FlexGrowRow, {
-    width: "100%",
-    alignItems: "start"
-  }, showDetails ? /* @__PURE__ */ React5.createElement(FlexCol, {
-    height: "100%",
-    width: "85%"
-  }, detail) : null, /* @__PURE__ */ React5.createElement(FlexCol, {
-    justifyContent: "start",
-    classes: "cytoscape-wrap",
-    width: showDetails ? "15%" : "100%",
-    height: showDetails ? "50%" : "100%",
-    border: showDetails ? `1px solid ${theme.vars.palette.divider}` : void 0
-  }, /* @__PURE__ */ React5.createElement(FlexCol, {
-    alignItems: "stretch",
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    ref: cytoscapeRef
-  }), children)));
-}, "NodeRelationalGraphFlexBox");
+  }, [cy, layoutOptions, layout]);
+  return /* @__PURE__ */ jsxs(FlexCol, { id: "relational-graph-wrapper", ...props, children: [
+    hoverAddress && hoverBoundingBox ? /* @__PURE__ */ jsx5(Box, { position: "absolute", top: hoverBoundingBox.y1, left: hoverBoundingBox.x1, zIndex: 100, children: /* @__PURE__ */ jsx5(ModuleHoverDetails, { address: hoverAddress, name: moduleInstance?.deref()?.id ?? "Unknown" }) }) : null,
+    /* @__PURE__ */ jsx5(FlexRow, { justifyContent: "start", width: "100%", children: actions === null ? null : isDefined4(actions) ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+      actions,
+      /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
+    ] }) : /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }),
+    /* @__PURE__ */ jsxs(FlexGrowRow, { width: "100%", alignItems: "start", children: [
+      showDetails ? /* @__PURE__ */ jsx5(FlexCol, { height: "100%", width: "85%", children: detail }) : null,
+      /* @__PURE__ */ jsxs(
+        FlexCol,
+        {
+          justifyContent: "start",
+          classes: "cytoscape-wrap",
+          width: showDetails ? "15%" : "100%",
+          height: showDetails ? "50%" : "100%",
+          border: showDetails ? `1px solid ${theme.vars.palette.divider}` : void 0,
+          children: [
+            /* @__PURE__ */ jsx5(FlexCol, { alignItems: "stretch", position: "absolute", width: "100%", height: "100%", ref: cytoscapeRef }),
+            children
+          ]
+        }
+      )
+    ] })
+  ] });
+};
 NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
 var NodeRelationalGraph = NodeRelationalGraphFlexBox;
 
 // src/components/relational/graph/ProvidedNodeRenderer.tsx
 import { useWeakProvidedNode } from "@xyo-network/react-node";
-import React6 from "react";
-var ProvidedNodeRenderer = /* @__PURE__ */ __name(({ node, ...props }) => {
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ProvidedNodeRenderer = ({ node, ...props }) => {
   const [providedNode] = useWeakProvidedNode();
   const elements = useCytoscapeElements(node ?? providedNode);
   const options = useCytoscapeOptions(elements);
-  return /* @__PURE__ */ React6.createElement(NodeRelationalGraphFlexBox, {
-    alignItems: "stretch",
-    flexGrow: 1,
-    height: "100%",
-    options,
-    ...props
-  });
-}, "ProvidedNodeRenderer");
+  return /* @__PURE__ */ jsx6(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
+};
 
 // src/components/module/graph/DetailsFlexbox.tsx
 import { CancelRounded } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import { FlexGrowCol, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import React7 from "react";
-var DetailsFlexbox = /* @__PURE__ */ __name(({ children, onClose }) => {
-  return /* @__PURE__ */ React7.createElement(FlexGrowCol, {
-    alignItems: "end",
-    justifyContent: "start",
-    id: "module-detail",
-    width: "100%",
-    p: 2,
-    gap: 2
-  }, /* @__PURE__ */ React7.createElement(FlexRow2, {
-    justifyContent: "end"
-  }, /* @__PURE__ */ React7.createElement(IconButton, {
-    onClick: onClose,
-    size: "small"
-  }, /* @__PURE__ */ React7.createElement(CancelRounded, null))), children);
-}, "DetailsFlexbox");
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var DetailsFlexbox = ({ children, onClose }) => {
+  return /* @__PURE__ */ jsxs2(FlexGrowCol, { alignItems: "end", justifyContent: "start", id: "module-detail", width: "100%", p: 2, gap: 2, children: [
+    /* @__PURE__ */ jsx7(FlexRow2, { justifyContent: "end", children: /* @__PURE__ */ jsx7(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx7(CancelRounded, {}) }) }),
+    children
+  ] });
+};
 
 // src/components/module/graph/node/Hover.tsx
 import { styled } from "@mui/material";
 import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
-import React8 from "react";
 
 // src/components/module/graph/node/hooks/useNodeElement.tsx
-import { useEffect as useEffect5, useRef as useRef2, useState as useState8 } from "react";
-var useNodeElement = /* @__PURE__ */ __name((node) => {
+import {
+  useEffect as useEffect5,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef2,
+  useState as useState8
+} from "react";
+var useNodeElement = (node) => {
   const ref = useRef2(null);
   const [currentElement, setCurrentElement] = useState8(null);
   const [boundingBox, setBoundingBox] = useState8(node?.renderedBoundingBox());
-  useEffect5(() => {
+  useLayoutEffect2(() => {
     setCurrentElement(null);
-  }, [
-    node
-  ]);
-  useEffect5(() => {
     setBoundingBox(node?.renderedBoundingBox());
-  }, [
-    node
-  ]);
+  }, [node]);
   useEffect5(() => {
-    const listener = /* @__PURE__ */ __name(() => {
+    const listener = () => {
       setBoundingBox(node?.renderedBoundingBox());
-    }, "listener");
+    };
     node?.on("position", listener);
     return () => {
       node?.off("position", void 0, listener);
     };
-  }, [
-    node
-  ]);
-  useEffect5(() => {
+  }, [node]);
+  useLayoutEffect2(() => {
     setCurrentElement(ref.current);
-  }, [
-    boundingBox
-  ]);
+  }, [boundingBox]);
   return {
     boundingBox,
     currentElement,
     ref
   };
-}, "useNodeElement");
+};
 
 // src/components/module/graph/node/Hover.tsx
-var ModuleGraphNodeHover = /* @__PURE__ */ __name(({ children, node }) => {
-  const { boundingBox, ref, currentElement } = useNodeElement(node);
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(StyledNodeGhostElementFlexCol, {
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var ModuleGraphNodeHover = ({ children, node }) => {
+  const {
+    boundingBox,
     ref,
-    left: boundingBox?.x1,
-    height: boundingBox?.h,
-    top: boundingBox?.y1,
-    width: boundingBox?.w
-  }), node ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, children?.(currentElement)) : null);
-}, "ModuleGraphNodeHover");
-var StyledNodeGhostElementFlexCol = styled(FlexCol2, {
-  name: "StyledNodeGhostElementFlexCol"
-})(() => ({
+    currentElement
+  } = useNodeElement(node);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(StyledNodeGhostElementFlexCol, { ref, left: boundingBox?.x1, height: boundingBox?.h, top: boundingBox?.y1, width: boundingBox?.w }),
+    node ? /* @__PURE__ */ jsx8(Fragment2, { children: children?.(currentElement) }) : null
+  ] });
+};
+var StyledNodeGhostElementFlexCol = styled(FlexCol2, { name: "StyledNodeGhostElementFlexCol" })(() => ({
   // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
   // backgroundColor: '#fff',
   // opacity: 0.25,
@@ -877,91 +802,105 @@ var StyledNodeGhostElementFlexCol = styled(FlexCol2, {
 
 // src/components/module/graph/Popper.tsx
 import { CancelRounded as CancelRounded2 } from "@mui/icons-material";
-import { Button as Button2, Card as Card2, CardActions, CardHeader as CardHeader2, IconButton as IconButton2, Paper as Paper2, Popper, styled as styled2 } from "@mui/material";
+import {
+  Button as Button2,
+  Card as Card2,
+  CardActions,
+  CardHeader as CardHeader2,
+  IconButton as IconButton2,
+  Paper as Paper2,
+  Popper,
+  styled as styled2
+} from "@mui/material";
 import { Identicon as Identicon2 } from "@xylabs/react-identicon";
-import React9 from "react";
-var ModuleHoverPopper = /* @__PURE__ */ __name(({ anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props }) => {
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var ModuleHoverPopper = ({
+  anchorEl,
+  onClose,
+  onModuleDetails,
+  onModuleExplore,
+  node,
+  ...props
+}) => {
   const { address, name } = node?.data() ?? {};
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, anchorEl ? /* @__PURE__ */ React9.createElement(Popper, {
-    anchorEl,
-    ...props
-  }, /* @__PURE__ */ React9.createElement(Card2, {
-    elevation: 3
-  }, /* @__PURE__ */ React9.createElement(CardHeader2, {
-    action: onClose ? /* @__PURE__ */ React9.createElement(IconButton2, {
-      size: "small",
-      onClick: onClose
-    }, /* @__PURE__ */ React9.createElement(CancelRounded2, null)) : null,
-    avatar: /* @__PURE__ */ React9.createElement(Paper2, {
-      elevation: 6,
-      sx: {
-        bgcolor: "#fff",
-        p: 1
+  return /* @__PURE__ */ jsx9(Fragment3, { children: anchorEl ? /* @__PURE__ */ jsx9(Popper, { anchorEl, ...props, children: /* @__PURE__ */ jsxs4(Card2, { elevation: 3, children: [
+    /* @__PURE__ */ jsx9(
+      CardHeader2,
+      {
+        action: onClose ? /* @__PURE__ */ jsx9(IconButton2, { size: "small", onClick: onClose, children: /* @__PURE__ */ jsx9(CancelRounded2, {}) }) : null,
+        avatar: /* @__PURE__ */ jsx9(
+          Paper2,
+          {
+            elevation: 6,
+            sx: { bgcolor: "#fff", p: 1 },
+            children: /* @__PURE__ */ jsx9(Identicon2, { value: address, size: 24 })
+          }
+        ),
+        title: name,
+        subheader: address
       }
-    }, /* @__PURE__ */ React9.createElement(Identicon2, {
-      value: address,
-      size: 24
-    })),
-    title: name,
-    subheader: address
-  }), /* @__PURE__ */ React9.createElement(StyledCardActions, null, onModuleDetails ? /* @__PURE__ */ React9.createElement(Button2, {
-    onClick: /* @__PURE__ */ __name(() => onModuleDetails?.(address), "onClick"),
-    size: "small",
-    variant: "contained"
-  }, "Details") : null, onModuleExplore ? /* @__PURE__ */ React9.createElement(Button2, {
-    onClick: /* @__PURE__ */ __name(() => onModuleExplore?.(address), "onClick"),
-    size: "small",
-    variant: "contained"
-  }, "Explore") : null))) : null);
-}, "ModuleHoverPopper");
-var StyledModuleHoverPopper = styled2(ModuleHoverPopper, {
-  name: "StyledComponents"
-})(() => ({
-  zIndex: 2
-}));
-var StyledCardActions = styled2(CardActions, {
-  name: "StyledCardActions"
-})(() => ({
+    ),
+    /* @__PURE__ */ jsxs4(StyledCardActions, { children: [
+      onModuleDetails ? /* @__PURE__ */ jsx9(Button2, { onClick: () => onModuleDetails?.(address), size: "small", variant: "contained", children: "Details" }) : null,
+      onModuleExplore ? /* @__PURE__ */ jsx9(Button2, { onClick: () => onModuleExplore?.(address), size: "small", variant: "contained", children: "Explore" }) : null
+    ] })
+  ] }) }) : null });
+};
+var StyledModuleHoverPopper = styled2(ModuleHoverPopper, { name: "StyledComponents" })(() => ({ zIndex: 2 }));
+var StyledCardActions = styled2(CardActions, { name: "StyledCardActions" })(() => ({
   display: "flex",
   justifyContent: "center"
 }));
 
 // src/components/module/graph/GraphFlexBox.tsx
-var ModuleGraphFlexBox = /* @__PURE__ */ __name(({ hideActions, rootModule, disableModuleDetails, ...props }) => {
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ModuleGraphFlexBox = ({
+  hideActions,
+  rootModule,
+  disableModuleDetails,
+  ...props
+}) => {
   const cytoscapeRef = useRef3(null);
-  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? void 0);
-  const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels);
+  const {
+    handleToggleLabels,
+    hideLabels,
+    options
+  } = useRelationalGraphOptions(rootModule ?? void 0);
+  const {
+    hoveredNode,
+    setHoveredNode,
+    toggleSelectedElement
+  } = useElements(hideLabels);
   const { mod, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(void 0));
-  return /* @__PURE__ */ React10.createElement(WithExtensions, null, /* @__PURE__ */ React10.createElement(NodeRelationalGraphFlexBox, {
-    actions: mod ? null : hideActions ? null : /* @__PURE__ */ React10.createElement(Button3, {
-      size: "small",
-      onClick: handleToggleLabels,
-      variant: "contained"
-    }, "Toggle Labels"),
-    showDetails: !!mod,
-    detail: /* @__PURE__ */ React10.createElement(DetailsFlexbox, {
-      onClose: /* @__PURE__ */ __name(() => onModuleDetails(null), "onClose")
-    }),
-    options,
-    ref: cytoscapeRef,
-    width: "100%",
-    ...props
-  }, /* @__PURE__ */ React10.createElement(ModuleGraphNodeHover, {
-    node: hoveredNode
-  }, (element) => /* @__PURE__ */ React10.createElement(StyledModuleHoverPopper, {
-    anchorEl: element,
-    container: cytoscapeRef.current,
-    node: hoveredNode,
-    onClose: /* @__PURE__ */ __name(() => setHoveredNode(void 0), "onClose"),
-    onModuleExplore: toggleSelectedElement,
-    onModuleDetails: disableModuleDetails ? void 0 : onModuleDetails,
-    placement: "top",
-    open: true
-  }))));
-}, "ModuleGraphFlexBox");
-var ModuleGraphFlexBoxWithProvider = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ React10.createElement(CytoscapeInstanceProvider, null, /* @__PURE__ */ React10.createElement(ModuleGraphFlexBox, props));
-}, "ModuleGraphFlexBoxWithProvider");
+  return /* @__PURE__ */ jsx10(WithExtensions, { children: /* @__PURE__ */ jsx10(
+    NodeRelationalGraphFlexBox,
+    {
+      actions: mod ? null : hideActions ? null : /* @__PURE__ */ jsx10(Button3, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
+      showDetails: !!mod,
+      detail: /* @__PURE__ */ jsx10(DetailsFlexbox, { onClose: () => onModuleDetails(null) }),
+      options,
+      ref: cytoscapeRef,
+      width: "100%",
+      ...props,
+      children: /* @__PURE__ */ jsx10(ModuleGraphNodeHover, { node: hoveredNode, children: (element) => /* @__PURE__ */ jsx10(
+        StyledModuleHoverPopper,
+        {
+          anchorEl: element,
+          container: cytoscapeRef.current,
+          node: hoveredNode,
+          onClose: () => setHoveredNode(void 0),
+          onModuleExplore: toggleSelectedElement,
+          onModuleDetails: disableModuleDetails ? void 0 : onModuleDetails,
+          placement: "top",
+          open: true
+        }
+      ) })
+    }
+  ) });
+};
+var ModuleGraphFlexBoxWithProvider = (props) => {
+  return /* @__PURE__ */ jsx10(CytoscapeInstanceProvider, { children: /* @__PURE__ */ jsx10(ModuleGraphFlexBox, { ...props }) });
+};
 export {
   ColaLayout,
   ConcentricLayout,