@xyo-network/react-node-renderer 2.81.10 → 2.82.0

package/dist/browser/index.cjs

@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -63,48 +64,61 @@ var import_archivist_model = require("@xyo-network/archivist-model");
 var import_diviner_model = require("@xyo-network/diviner-model");
 var import_react_archivist = require("@xyo-network/react-archivist");
 var import_react_module = require("@xyo-network/react-module");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ModuleCardParser = ({ mod }) => {
+var import_react = __toESM(require("react"), 1);
+var ModuleCardParser = /* @__PURE__ */ __name(({ mod }) => {
   switch (true) {
     case (0, import_archivist_model.isArchivistInstance)(mod): {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_archivist.ArchivistCard, { mod: (0, import_archivist_model.asArchivistInstance)(mod) });
+      return /* @__PURE__ */ import_react.default.createElement(import_react_archivist.ArchivistCard, {
+        mod: (0, import_archivist_model.asArchivistInstance)(mod)
+      });
     }
     case (0, import_diviner_model.isDivinerInstance)(mod): {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_module.DivinerCard, { mod: (0, import_diviner_model.asDivinerInstance)(mod) });
+      return /* @__PURE__ */ import_react.default.createElement(import_react_module.DivinerCard, {
+        mod: (0, import_diviner_model.asDivinerInstance)(mod)
+      });
     }
     default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_module.ModuleCard, { mod });
+      return /* @__PURE__ */ import_react.default.createElement(import_react_module.ModuleCard, {
+        mod
+      });
     }
   }
-};
+}, "ModuleCardParser");
 
 // src/components/module/graph/GraphFlexBox.tsx
 var import_material7 = require("@mui/material");
-var import_react15 = require("react");
+var import_react20 = __toESM(require("react"), 1);
 
 // src/contexts/CytoscapeInstance/Context.ts
 var import_react_shared = require("@xyo-network/react-shared");
 var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
 
 // src/contexts/CytoscapeInstance/Provider.tsx
-var import_react = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
-  const [cy, setCy] = (0, import_react.useState)(defaultInstance);
-  (0, import_react.useEffect)(() => {
+var import_react2 = __toESM(require("react"), 1);
+var CytoscapeInstanceProvider = /* @__PURE__ */ __name(({ children, defaultInstance }) => {
+  const [cy, setCy] = (0, import_react2.useState)(defaultInstance);
+  (0, import_react2.useEffect)(() => {
     setCy(defaultInstance);
-  }, [defaultInstance]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CytoscapeInstanceContext.Provider, { value: { cy, provided: true, setCy }, children });
-};
+  }, [
+    defaultInstance
+  ]);
+  return /* @__PURE__ */ import_react2.default.createElement(CytoscapeInstanceContext.Provider, {
+    value: {
+      cy,
+      provided: true,
+      setCy
+    }
+  }, children);
+}, "CytoscapeInstanceProvider");
 
 // src/contexts/CytoscapeInstance/use.ts
 var import_react_shared2 = require("@xyo-network/react-shared");
-var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
+var useCytoscapeInstance = /* @__PURE__ */ __name((required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required), "useCytoscapeInstance");
 
 // src/hooks/cytoscape/elements/useCytoscapeElements.ts
 var import_react_async_effect = require("@xylabs/react-async-effect");
 var import_node_model2 = require("@xyo-network/node-model");
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/Cytoscape/CytoscapeElements.ts
 var import_exists = require("@xylabs/exists");
@@ -112,7 +126,7 @@ var import_exists = require("@xylabs/exists");
 // src/Cytoscape/lib/encodeSvg.ts
 var import_server = require("react-dom/server");
 var dataUri = "data:image/svg+xml,";
-var encodeSvg = (reactElement, color) => {
+var encodeSvg = /* @__PURE__ */ __name((reactElement, color) => {
   const svgString = (0, import_server.renderToStaticMarkup)(reactElement);
   const doc = new DOMParser().parseFromString(svgString, "text/html");
   const svgElement = doc.querySelectorAll("svg")[0];
@@ -122,19 +136,18 @@ var encodeSvg = (reactElement, color) => {
     svgElement.style.fill = color ?? "black";
   }
   return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`;
-};
+}, "encodeSvg");
 
 // src/Cytoscape/lib/iconMap.ts
-var generateIconMap = () => ({
+var generateIconMap = /* @__PURE__ */ __name(() => ({
   archivist: "",
   bridge: "",
   diviner: "",
-  // eslint-disable-next-line id-denylist
   module: "",
   node: "",
   sentinel: "",
   witness: ""
-});
+}), "generateIconMap");
 
 // src/Cytoscape/lib/layout/ColaLayout.ts
 var ColaLayout = {
@@ -145,12 +158,12 @@ var ColaLayout = {
 
 // src/Cytoscape/lib/layout/ConcentricLayout.ts
 var ConcentricLayout = {
-  concentric: function(node) {
+  concentric: /* @__PURE__ */ __name(function(node) {
     return node.degree(false);
-  },
-  levelWidth: function() {
+  }, "concentric"),
+  levelWidth: /* @__PURE__ */ __name(function() {
     return 2;
-  },
+  }, "levelWidth"),
   minNodeSpacing: 75,
   name: "concentric"
 };
@@ -162,7 +175,7 @@ var import_diviner_model2 = require("@xyo-network/diviner-model");
 var import_node_model = require("@xyo-network/node-model");
 var import_sentinel_model = require("@xyo-network/sentinel-model");
 var import_witness_model = require("@xyo-network/witness-model");
-var parseModuleType = (mod) => {
+var parseModuleType = /* @__PURE__ */ __name((mod) => {
   let type = "module";
   if (mod) {
     if ((0, import_archivist_model2.isArchivistInstance)(mod)) {
@@ -182,7 +195,7 @@ var parseModuleType = (mod) => {
     }
   }
   return type;
-};
+}, "parseModuleType");
 
 // src/Cytoscape/CytoscapeElements.ts
 var CytoscapeElements = {
@@ -199,13 +212,23 @@ 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);
     }
@@ -227,25 +250,32 @@ var CytoscapeElements = {
       }
     };
   },
-  buildRootNode: (mod) => {
-    return CytoscapeElements.buildNode(mod, {}, ["activeNode"]);
-  },
+  buildRootNode: /* @__PURE__ */ __name((mod) => {
+    return CytoscapeElements.buildNode(mod, {}, [
+      "activeNode"
+    ]);
+  }, "buildRootNode"),
   normalizeName(name) {
     if (!name) return;
     if (name.length > this.MaxNameLength) return `${name.slice(0, 20)}...`;
     return name;
   },
   async recurseNodes(root, maxDepth = 10, depth = 1) {
-    const info = { children: [], depth, mod: root };
+    const info = {
+      children: [],
+      depth,
+      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(import_exists.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(import_exists.exists);
     }
     return info;
   }
@@ -257,7 +287,6 @@ var CyIconSet = {
   archivist: import_icons_material.Inventory2Rounded,
   bridge: import_icons_material.InsertLinkRounded,
   diviner: import_icons_material.BubbleChartRounded,
-  // eslint-disable-next-line id-denylist
   module: import_icons_material.QuestionMarkRounded,
   node: import_icons_material.Hub,
   sentinel: import_icons_material.TimerRounded,
@@ -265,7 +294,7 @@ var CyIconSet = {
 };
 
 // src/Cytoscape/CytoscapeStyles.ts
-var NodeWithName = (color, outlineColor) => ({
+var NodeWithName = /* @__PURE__ */ __name((color, outlineColor) => ({
   selector: "node[name]",
   style: {
     color,
@@ -277,25 +306,25 @@ var NodeWithName = (color, outlineColor) => ({
     "text-outline-width": "1px",
     "text-valign": "top"
   }
-});
-var Node = (icons, bgColor, hideLabels = false) => ({
+}), "NodeWithName");
+var Node = /* @__PURE__ */ __name((icons, bgColor, hideLabels = false) => ({
   selector: "node",
   style: {
     "background-color": bgColor,
     "background-height": "75%",
-    "background-image": (elem) => icons[elem.data("type")],
+    "background-image": /* @__PURE__ */ __name((elem) => icons[elem.data("type")], "background-image"),
     "background-width": "24",
-    label: hideLabels ? void 0 : "data(name)",
-    shape: "round-rectangle"
+    "label": hideLabels ? void 0 : "data(name)",
+    "shape": "round-rectangle"
   }
-});
-var NodeAsRoot = (bgColor) => ({
+}), "Node");
+var NodeAsRoot = /* @__PURE__ */ __name((bgColor) => ({
   selector: ".activeNode",
   style: {
     "background-color": bgColor
   }
-});
-var EdgeStyled = (lineColor, targetArrowColor) => ({
+}), "NodeAsRoot");
+var EdgeStyled = /* @__PURE__ */ __name((lineColor, targetArrowColor) => ({
   selector: "edge",
   style: {
     "curve-style": "bezier",
@@ -303,25 +332,23 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
     "line-opacity": 0.1,
     "target-arrow-color": targetArrowColor,
     "target-arrow-shape": "triangle",
-    width: 3
+    "width": 3
   }
-});
+}), "EdgeStyled");
 
 // src/hooks/cytoscape/elements/useCytoscapeElements.ts
-var useCytoscapeElements = (mod) => {
-  const [elements, setElements] = (0, import_react2.useState)([]);
-  (0, import_react_async_effect.useAsyncEffect)(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async () => {
-      const moduleInstance = mod?.deref();
-      if (moduleInstance) {
-        const newElements = await CytoscapeElements.buildElements(moduleInstance) ?? [];
-        setElements(newElements);
-      }
-    },
-    [mod]
-  );
-  (0, import_react2.useEffect)(() => {
+var useCytoscapeElements = /* @__PURE__ */ __name((mod) => {
+  const [elements, setElements] = (0, import_react3.useState)([]);
+  (0, import_react_async_effect.useAsyncEffect)(async () => {
+    const moduleInstance = mod?.deref();
+    if (moduleInstance) {
+      const newElements = await CytoscapeElements.buildElements(moduleInstance) ?? [];
+      setElements(newElements);
+    }
+  }, [
+    mod
+  ]);
+  (0, import_react3.useEffect)(() => {
     let attachedListener;
     let detachedListener;
     if (mod && (0, import_node_model2.isNodeInstance)(mod)) {
@@ -338,136 +365,164 @@ var useCytoscapeElements = (mod) => {
       attachedListener?.();
       detachedListener?.();
     };
-  }, [mod]);
+  }, [
+    mod
+  ]);
   return elements;
-};
+}, "useCytoscapeElements");
 
 // src/hooks/cytoscape/elements/useHoveredNode.tsx
-var import_react3 = require("react");
-var useHoveredNode = (renderedElements) => {
+var import_react4 = require("react");
+var useHoveredNode = /* @__PURE__ */ __name((renderedElements) => {
   const { cy } = useCytoscapeInstance(true);
-  const [hoveredNode, setHoveredNode] = (0, import_react3.useState)();
-  const nodeListener = (0, import_react3.useCallback)((node) => {
+  const [hoveredNode, setHoveredNode] = (0, import_react4.useState)();
+  const nodeListener = (0, import_react4.useCallback)((node) => {
     node.on("mouseover tap", () => {
       setHoveredNode(node);
     });
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (renderedElements) {
       renderedElements.nodes().forEach(nodeListener);
     }
-  }, [nodeListener, renderedElements]);
-  (0, import_react3.useEffect)(() => {
+  }, [
+    nodeListener,
+    renderedElements
+  ]);
+  (0, import_react4.useEffect)(() => {
     cy?.deref()?.ready(() => {
       cy?.deref()?.nodes().forEach(nodeListener);
     });
-  }, [cy, nodeListener]);
-  return [hoveredNode, setHoveredNode];
-};
+  }, [
+    cy,
+    nodeListener
+  ]);
+  return [
+    hoveredNode,
+    setHoveredNode
+  ];
+}, "useHoveredNode");
 
 // src/hooks/cytoscape/elements/useNewElements.tsx
 var import_react_node = require("@xyo-network/react-node");
-var import_react4 = require("react");
-var useNewElements = (selectedElement) => {
-  const selectedAddress = (0, import_react4.useMemo)(() => {
+var import_react5 = require("react");
+var useNewElements = /* @__PURE__ */ __name((selectedElement) => {
+  const selectedAddress = (0, import_react5.useMemo)(() => {
     const { address: selectedAddress2 } = selectedElement?.data() ?? {};
     return selectedAddress2;
-  }, [selectedElement]);
+  }, [
+    selectedElement
+  ]);
   const [mod] = (0, import_react_node.useWeakModuleFromNode)(selectedAddress);
   const newElements = useCytoscapeElements(mod);
   return newElements;
-};
+}, "useNewElements");
 
 // src/hooks/cytoscape/elements/useRenderNewElements.tsx
-var import_react5 = require("react");
-var useRenderNewElements = (newElements = [], hideLabels) => {
+var import_react6 = require("react");
+var useRenderNewElements = /* @__PURE__ */ __name((newElements = [], hideLabels) => {
   const { cy } = useCytoscapeInstance(true);
-  const [renderedElements, setRenderedElements] = (0, import_react5.useState)();
-  (0, import_react5.useEffect)(() => {
+  const [renderedElements, setRenderedElements] = (0, import_react6.useState)();
+  (0, import_react6.useEffect)(() => {
     if (newElements.length > 1) {
       const renderedElements2 = cy?.deref()?.add(newElements);
       setRenderedElements(renderedElements2);
       cy?.deref()?.layout(ColaLayout).run();
     }
-  }, [cy, hideLabels, newElements]);
+  }, [
+    cy,
+    hideLabels,
+    newElements
+  ]);
   return renderedElements;
-};
+}, "useRenderNewElements");
 
 // src/hooks/cytoscape/elements/useSelectedElement.tsx
-var import_react6 = require("react");
-var useSelectedElement = () => {
-  const [selectedElement, setSelectedElement] = (0, import_react6.useState)();
+var import_react7 = require("react");
+var useSelectedElement = /* @__PURE__ */ __name(() => {
+  const [selectedElement, setSelectedElement] = (0, import_react7.useState)();
   const { cy } = useCytoscapeInstance(true);
-  const updateStyles = (element) => {
+  const updateStyles = /* @__PURE__ */ __name((element) => {
     const nodes = cy?.deref()?.nodes();
     nodes?.toggleClass("activeNode", false);
     element.toggleClass("activeNode", true);
-  };
-  const toggleSelectedElement = (address) => {
+  }, "updateStyles");
+  const toggleSelectedElement = /* @__PURE__ */ __name((address) => {
     const selectedNode = cy?.deref()?.nodes(`[id="${address}"]`)?.[0];
     if (selectedNode) {
       setSelectedElement(selectedNode);
       updateStyles(selectedNode);
     }
+  }, "toggleSelectedElement");
+  return {
+    selectedElement,
+    toggleSelectedElement
   };
-  return { selectedElement, toggleSelectedElement };
-};
+}, "useSelectedElement");
 
 // src/hooks/cytoscape/elements/useElements.tsx
-var useElements = (hideLabels) => {
+var useElements = /* @__PURE__ */ __name((hideLabels) => {
   const { selectedElement, toggleSelectedElement } = useSelectedElement();
   const newElements = useNewElements(selectedElement);
   const renderedElements = useRenderNewElements(newElements, hideLabels);
   const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements);
-  return { hoveredNode, setHoveredNode, toggleSelectedElement };
-};
+  return {
+    hoveredNode,
+    setHoveredNode,
+    toggleSelectedElement
+  };
+}, "useElements");
 
 // src/hooks/cytoscape/useCytoscapeOptions.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
 var import_material2 = require("@mui/material");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/hooks/cytoscape/useIcons.tsx
 var import_material = require("@mui/material");
-var import_react7 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var useIcons = () => {
+var import_react8 = __toESM(require("react"), 1);
+var useIcons = /* @__PURE__ */ __name(() => {
   const theme = (0, import_material.useTheme)();
-  const icons = (0, import_react7.useMemo)(() => {
+  const icons = (0, import_react8.useMemo)(() => {
     const iconMap = generateIconMap();
     return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-      const icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, { fontSize: "small" });
+      const icon = /* @__PURE__ */ import_react8.default.createElement(IconComponent, {
+        fontSize: "small"
+      });
       acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
       return acc;
     }, iconMap);
-  }, [theme.palette]);
+  }, [
+    theme.palette
+  ]);
   return icons;
-};
+}, "useIcons");
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
-var useCytoscapeStyle = (hideLabels = false) => {
+var useCytoscapeStyle = /* @__PURE__ */ __name((hideLabels = false) => {
   const theme = (0, import_material2.useTheme)();
   const icons = useIcons();
-  const style = (0, import_react8.useMemo)(
-    () => [
-      Node(icons, theme.palette.primary.main, hideLabels),
-      NodeWithName(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
-      NodeAsRoot(theme.palette.secondary.main),
-      EdgeStyled(theme.palette.divider, theme.palette.divider)
-    ],
-    [icons, hideLabels, theme]
-  );
+  const style = (0, import_react9.useMemo)(() => [
+    Node(icons, theme.palette.primary.main, hideLabels),
+    NodeWithName(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
+    NodeAsRoot(theme.palette.secondary.main),
+    EdgeStyled(theme.palette.divider, theme.palette.divider)
+  ], [
+    icons,
+    hideLabels,
+    theme
+  ]);
   return style;
-};
+}, "useCytoscapeStyle");
 
 // src/hooks/cytoscape/useCytoscapeOptions.ts
-var useCytoscapeOptions = (elements, style, layout) => {
+var useCytoscapeOptions = /* @__PURE__ */ __name((elements, style, layout) => {
   const defaultStyle = useCytoscapeStyle();
   const resolvedLayout = layout ?? ConcentricLayout;
   const resolvedStyle = style ?? defaultStyle;
-  const options = (0, import_react9.useMemo)(() => {
+  const options = (0, import_react10.useMemo)(() => {
     if (elements && resolvedLayout && resolvedStyle) {
       return {
         elements,
@@ -475,16 +530,20 @@ var useCytoscapeOptions = (elements, style, layout) => {
         style: resolvedStyle
       };
     }
-  }, [elements, layout, style]);
+  }, [
+    elements,
+    layout,
+    style
+  ]);
   return options;
-};
+}, "useCytoscapeOptions");
 
 // src/hooks/cytoscape/useModuleDetails.tsx
 var import_react_promise = require("@xylabs/react-promise");
-var import_react10 = require("react");
-var useModuleDetails = (rootModule, onFoundModule) => {
+var import_react11 = require("react");
+var useModuleDetails = /* @__PURE__ */ __name((rootModule, onFoundModule) => {
   const { cy } = useCytoscapeInstance();
-  const [moduleAddress, setModuleAddress] = (0, import_react10.useState)();
+  const [moduleAddress, setModuleAddress] = (0, import_react11.useState)();
   const [foundModule] = (0, import_react_promise.usePromise)(async () => {
     if (moduleAddress === null) return null;
     const rootModuleInstance = rootModule?.deref();
@@ -492,8 +551,11 @@ var useModuleDetails = (rootModule, onFoundModule) => {
       const foundModule2 = await rootModuleInstance.resolve(moduleAddress);
       return foundModule2 ?? null;
     }
-  }, [moduleAddress, rootModule]);
-  (0, import_react10.useEffect)(() => {
+  }, [
+    moduleAddress,
+    rootModule
+  ]);
+  (0, import_react11.useEffect)(() => {
     const resizeObserver = new ResizeObserver(() => {
       if (moduleAddress === null) {
         setTimeout(() => {
@@ -513,13 +575,23 @@ var useModuleDetails = (rootModule, onFoundModule) => {
     return () => {
       if (container) resizeObserver.unobserve(container);
     };
-  }, [cy, moduleAddress, foundModule, rootModule]);
-  (0, import_react10.useEffect)(() => {
+  }, [
+    cy,
+    moduleAddress,
+    foundModule,
+    rootModule
+  ]);
+  (0, import_react11.useEffect)(() => {
     if (foundModule) {
       onFoundModule?.();
     }
-  }, [cy, moduleAddress, foundModule, onFoundModule]);
-  const onModuleDetails = (address) => {
+  }, [
+    cy,
+    moduleAddress,
+    foundModule,
+    onFoundModule
+  ]);
+  const onModuleDetails = /* @__PURE__ */ __name((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}"]`);
@@ -533,22 +605,29 @@ var useModuleDetails = (rootModule, onFoundModule) => {
       activeNode?.toggleClass("activeNode", true);
     }
     setModuleAddress(address);
+  }, "onModuleDetails");
+  return {
+    mod: foundModule,
+    onModuleDetails
   };
-  return { mod: foundModule, onModuleDetails };
-};
+}, "useModuleDetails");
 
 // src/hooks/cytoscape/useRelationalGraphOptions.tsx
-var import_react11 = require("react");
-var useRelationalGraphOptions = (mod) => {
-  const [hideLabels, setHideLabels] = (0, import_react11.useState)(true);
-  const handleToggleLabels = () => {
+var import_react12 = require("react");
+var useRelationalGraphOptions = /* @__PURE__ */ __name((mod) => {
+  const [hideLabels, setHideLabels] = (0, import_react12.useState)(true);
+  const handleToggleLabels = /* @__PURE__ */ __name(() => {
     setHideLabels((oldValue) => !oldValue);
-  };
+  }, "handleToggleLabels");
   const elements = useCytoscapeElements(mod);
   const style = useCytoscapeStyle(hideLabels);
   const options = useCytoscapeOptions(elements, style, ConcentricLayout);
-  return { handleToggleLabels, hideLabels, options };
-};
+  return {
+    handleToggleLabels,
+    hideLabels,
+    options
+  };
+}, "useRelationalGraphOptions");
 
 // src/components/cytoscape-extensions/WithExtensions.tsx
 var import_cytoscape = __toESM(require("cytoscape"), 1);
@@ -556,19 +635,18 @@ var import_cytoscape_cola = __toESM(require("cytoscape-cola"), 1);
 var import_cytoscape_cose_bilkent = __toESM(require("cytoscape-cose-bilkent"), 1);
 var import_cytoscape_dagre = __toESM(require("cytoscape-dagre"), 1);
 var import_cytoscape_euler = __toESM(require("cytoscape-euler"), 1);
-var import_react12 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var WithExtensions = ({ children }) => {
-  const [initialized, setInitialized] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
+var import_react13 = __toESM(require("react"), 1);
+var WithExtensions = /* @__PURE__ */ __name(({ children }) => {
+  const [initialized, setInitialized] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
     import_cytoscape.default.use(import_cytoscape_cola.default);
     import_cytoscape.default.use(import_cytoscape_dagre.default);
     import_cytoscape.default.use(import_cytoscape_cose_bilkent.default);
     import_cytoscape.default.use(import_cytoscape_euler.default);
     setInitialized(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: initialized ? children : void 0 });
-};
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, initialized ? children : void 0);
+}, "WithExtensions");
 
 // src/components/relational/graph/Graph.tsx
 var import_material3 = require("@mui/material");
@@ -581,12 +659,14 @@ var import_cytoscape_cola2 = __toESM(require("cytoscape-cola"), 1);
 var import_cytoscape_cose_bilkent2 = __toESM(require("cytoscape-cose-bilkent"), 1);
 var import_cytoscape_dagre2 = __toESM(require("cytoscape-dagre"), 1);
 var import_cytoscape_euler2 = __toESM(require("cytoscape-euler"), 1);
-var import_react13 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var applyLayout = (cy, name = "cola", options) => {
-  cy?.layout({ name, ...options }).run();
-};
-var loadLayout = (layout = "cola") => {
+var import_react14 = __toESM(require("react"), 1);
+var applyLayout = /* @__PURE__ */ __name((cy, name = "cola", options) => {
+  cy?.layout({
+    name,
+    ...options
+  }).run();
+}, "applyLayout");
+var loadLayout = /* @__PURE__ */ __name((layout = "cola") => {
   switch (layout) {
     case "dagre": {
       import_cytoscape2.default.use(import_cytoscape_dagre2.default);
@@ -605,163 +685,230 @@ var loadLayout = (layout = "cola") => {
       break;
     }
   }
-};
-var ModuleHoverDetails = ({ name, address, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material3.Card, { elevation: 3, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_material3.CardHeader,
-    {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material3.Paper, { elevation: 6, sx: { bgcolor: "#fff", p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_identicon.Identicon, { value: address, size: 24 }) }),
-      title: name,
-      subheader: address
-    }
-  ) });
-};
-var NodeRelationalGraphFlexBox = (0, import_react13.forwardRef)(
-  ({ actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props }, ref) => {
-    const theme = (0, import_material3.useTheme)();
-    const [cy, setCy] = (0, import_react13.useState)();
-    const cytoscapeRef = (0, import_react13.useRef)();
-    const [hoverPosition, setHoverBoundingBox] = (0, import_react13.useState)();
-    const [hoverAddress, setHoverAddress] = (0, import_react13.useState)();
-    const [moduleInstance] = (0, import_react_node2.useWeakModuleFromNode)(hoverAddress, { node });
-    (0, import_react13.useEffect)(() => {
-      cy?.on("mouseover tap", ({ target }) => {
-        const cyNode = target;
-        const bb = cyNode?.renderedBoundingBox?.();
-        setHoverBoundingBox(bb);
-        const id = cyNode.id?.();
-        if (id) {
-          if (id.includes("/")) {
-            setHoverAddress(void 0);
-            onHover?.();
-          } else {
-            setHoverAddress((0, import_hex.asAddress)(id));
-            onHover?.((0, import_hex.asAddress)(id));
-          }
+}, "loadLayout");
+var ModuleHoverDetails = /* @__PURE__ */ __name(({ name, address, ...props }) => {
+  return /* @__PURE__ */ import_react14.default.createElement(import_material3.Card, {
+    elevation: 3,
+    ...props
+  }, /* @__PURE__ */ import_react14.default.createElement(import_material3.CardHeader, {
+    avatar: /* @__PURE__ */ import_react14.default.createElement(import_material3.Paper, {
+      elevation: 6,
+      sx: {
+        bgcolor: "#fff",
+        p: 1
+      }
+    }, /* @__PURE__ */ import_react14.default.createElement(import_react_identicon.Identicon, {
+      value: address,
+      size: 24
+    })),
+    title: name,
+    subheader: address
+  }));
+}, "ModuleHoverDetails");
+var NodeRelationalGraphFlexBox = /* @__PURE__ */ (0, import_react14.forwardRef)(({ actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props }, ref) => {
+  const theme = (0, import_material3.useTheme)();
+  const [cy, setCy] = (0, import_react14.useState)();
+  const cytoscapeRef = (0, import_react14.useRef)();
+  const [hoverPosition, setHoverBoundingBox] = (0, import_react14.useState)();
+  const [hoverAddress, setHoverAddress] = (0, import_react14.useState)();
+  const [moduleInstance] = (0, import_react_node2.useWeakModuleFromNode)(hoverAddress, {
+    node
+  });
+  (0, import_react14.useEffect)(() => {
+    cy?.on("mouseover tap", ({ target }) => {
+      const cyNode = target;
+      const bb = cyNode?.renderedBoundingBox?.();
+      setHoverBoundingBox(bb);
+      const id = cyNode.id?.();
+      if (id) {
+        if (id.includes("/")) {
+          setHoverAddress(void 0);
+          onHover?.();
+        } else {
+          setHoverAddress((0, import_hex.asAddress)(id));
+          onHover?.((0, import_hex.asAddress)(id));
         }
+      }
+    });
+  }, [
+    onHover,
+    cy
+  ]);
+  const handleReset = /* @__PURE__ */ __name(() => {
+    cy?.reset();
+    applyLayout(cy, layout ?? "euler", layoutOptions);
+  }, "handleReset");
+  (0, import_react14.useEffect)(() => {
+    let newCy;
+    const container = cytoscapeRef.current;
+    if (container) {
+      newCy = (0, import_cytoscape2.default)({
+        container,
+        ...options
       });
-    }, [onHover, cy]);
-    const handleReset = () => {
-      cy?.reset();
-      applyLayout(cy, layout ?? "euler", layoutOptions);
+      setCy(newCy);
+    }
+    return () => {
+      newCy?.destroy();
+      setCy(void 0);
     };
-    (0, import_react13.useEffect)(() => {
-      let newCy;
-      const container = cytoscapeRef.current;
-      if (container) {
-        newCy = (0, import_cytoscape2.default)({
-          container,
-          ...options
-        });
-        setCy(newCy);
-      }
-      return () => {
-        newCy?.destroy();
-        setCy(void 0);
-      };
-    }, [options, cytoscapeRef, layoutOptions]);
-    (0, import_react13.useEffect)(() => {
-      if (cy) {
-        loadLayout(layout);
-        applyLayout(cy, layout ?? "euler", layoutOptions);
-      }
-    }, [cy, layoutOptions, layout]);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox.FlexCol, { id: "relational-graph-wrapper", ref, ...props, children: [
-      hoverAddress && hoverPosition ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material3.Box, { position: "absolute", top: hoverPosition.y1, left: hoverPosition.x1, zIndex: 100, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModuleHoverDetails, { address: hoverAddress, name: moduleInstance?.deref()?.id ?? "Unknown" }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_flexbox.FlexRow, { justifyContent: "start", width: "100%", children: actions === null ? null : actions ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material3.ButtonGroup, { children: [
-        actions,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox.FlexGrowRow, { width: "100%", alignItems: "start", children: [
-        showDetails ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_flexbox.FlexCol, { height: "100%", width: "85%", children: detail }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-          import_react_flexbox.FlexCol,
-          {
-            justifyContent: "start",
-            classes: "cytoscape-wrap",
-            width: showDetails ? "15%" : "100%",
-            height: showDetails ? "50%" : "100%",
-            border: showDetails ? `1px solid ${theme.palette.divider}` : void 0,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", position: "absolute", width: "100%", height: "100%", ref: cytoscapeRef }),
-              children
-            ]
-          }
-        )
-      ] })
-    ] });
-  }
-);
+  }, [
+    options,
+    cytoscapeRef,
+    layoutOptions
+  ]);
+  (0, import_react14.useEffect)(() => {
+    if (cy) {
+      loadLayout(layout);
+      applyLayout(cy, layout ?? "euler", layoutOptions);
+    }
+  }, [
+    cy,
+    layoutOptions,
+    layout
+  ]);
+  return /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexCol, {
+    id: "relational-graph-wrapper",
+    ref,
+    ...props
+  }, hoverAddress && hoverPosition ? /* @__PURE__ */ import_react14.default.createElement(import_material3.Box, {
+    position: "absolute",
+    top: hoverPosition.y1,
+    left: hoverPosition.x1,
+    zIndex: 100
+  }, /* @__PURE__ */ import_react14.default.createElement(ModuleHoverDetails, {
+    address: hoverAddress,
+    name: moduleInstance?.deref()?.id ?? "Unknown"
+  })) : null, /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexRow, {
+    justifyContent: "start",
+    width: "100%"
+  }, actions === null ? null : actions ? /* @__PURE__ */ import_react14.default.createElement(import_material3.ButtonGroup, null, actions, /* @__PURE__ */ import_react14.default.createElement(import_material3.Button, {
+    size: "small",
+    variant: "contained",
+    onClick: handleReset
+  }, "Reset View")) : /* @__PURE__ */ import_react14.default.createElement(import_material3.Button, {
+    size: "small",
+    variant: "contained",
+    onClick: handleReset
+  }, "Reset")), /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexGrowRow, {
+    width: "100%",
+    alignItems: "start"
+  }, showDetails ? /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexCol, {
+    height: "100%",
+    width: "85%"
+  }, detail) : null, /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexCol, {
+    justifyContent: "start",
+    classes: "cytoscape-wrap",
+    width: showDetails ? "15%" : "100%",
+    height: showDetails ? "50%" : "100%",
+    border: showDetails ? `1px solid ${theme.palette.divider}` : void 0
+  }, /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexCol, {
+    alignItems: "stretch",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    ref: cytoscapeRef
+  }), children)));
+});
 NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
 var NodeRelationalGraph = NodeRelationalGraphFlexBox;
 
 // src/components/relational/graph/ProvidedNodeRenderer.tsx
 var import_react_node3 = require("@xyo-network/react-node");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ProvidedNodeRenderer = ({ node, ...props }) => {
+var import_react15 = __toESM(require("react"), 1);
+var ProvidedNodeRenderer = /* @__PURE__ */ __name(({ node, ...props }) => {
   const [providedNode] = (0, import_react_node3.useWeakProvidedNode)();
   const elements = useCytoscapeElements(node ?? providedNode);
   const options = useCytoscapeOptions(elements);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
-};
+  return /* @__PURE__ */ import_react15.default.createElement(NodeRelationalGraphFlexBox, {
+    alignItems: "stretch",
+    flexGrow: 1,
+    height: "100%",
+    options,
+    ...props
+  });
+}, "ProvidedNodeRenderer");
 
 // src/components/module/graph/DetailsFlexbox.tsx
 var import_icons_material2 = require("@mui/icons-material");
 var import_material4 = require("@mui/material");
 var import_react_flexbox2 = require("@xylabs/react-flexbox");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var DetailsFlexbox = ({ children, onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_flexbox2.FlexGrowCol, { alignItems: "end", justifyContent: "start", id: "module-detail", width: "100%", p: 2, gap: 2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_flexbox2.FlexRow, { justifyContent: "end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material4.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_material2.CancelRounded, {}) }) }),
-    children
-  ] });
-};
+var import_react16 = __toESM(require("react"), 1);
+var DetailsFlexbox = /* @__PURE__ */ __name(({ children, onClose }) => {
+  return /* @__PURE__ */ import_react16.default.createElement(import_react_flexbox2.FlexGrowCol, {
+    alignItems: "end",
+    justifyContent: "start",
+    id: "module-detail",
+    width: "100%",
+    p: 2,
+    gap: 2
+  }, /* @__PURE__ */ import_react16.default.createElement(import_react_flexbox2.FlexRow, {
+    justifyContent: "end"
+  }, /* @__PURE__ */ import_react16.default.createElement(import_material4.IconButton, {
+    onClick: onClose,
+    size: "small"
+  }, /* @__PURE__ */ import_react16.default.createElement(import_icons_material2.CancelRounded, null))), children);
+}, "DetailsFlexbox");
 
 // src/components/module/graph/node/Hover.tsx
 var import_material5 = require("@mui/material");
 var import_react_flexbox3 = require("@xylabs/react-flexbox");
+var import_react18 = __toESM(require("react"), 1);
 
 // src/components/module/graph/node/hooks/useNodeElement.tsx
-var import_react14 = require("react");
-var useNodeElement = (node) => {
-  const ref = (0, import_react14.useRef)(null);
-  const [currentElement, setCurrentElement] = (0, import_react14.useState)(null);
-  const [boundingBox, setBoundingBox] = (0, import_react14.useState)(node?.renderedBoundingBox());
-  (0, import_react14.useEffect)(() => {
+var import_react17 = require("react");
+var useNodeElement = /* @__PURE__ */ __name((node) => {
+  const ref = (0, import_react17.useRef)(null);
+  const [currentElement, setCurrentElement] = (0, import_react17.useState)(null);
+  const [boundingBox, setBoundingBox] = (0, import_react17.useState)(node?.renderedBoundingBox());
+  (0, import_react17.useEffect)(() => {
     setCurrentElement(null);
-  }, [node]);
-  (0, import_react14.useEffect)(() => {
+  }, [
+    node
+  ]);
+  (0, import_react17.useEffect)(() => {
     if (node) {
       setBoundingBox(node.renderedBoundingBox());
     }
-    const listener = () => {
+    const listener = /* @__PURE__ */ __name(() => {
       setBoundingBox(node?.renderedBoundingBox());
-    };
+    }, "listener");
     node?.on("position", listener);
     return () => {
       node?.off("position", void 0, listener);
     };
-  }, [node]);
-  (0, import_react14.useEffect)(() => {
+  }, [
+    node
+  ]);
+  (0, import_react17.useEffect)(() => {
     setCurrentElement(ref.current);
-  }, [boundingBox]);
-  return { boundingBox, currentElement, ref };
-};
+  }, [
+    boundingBox
+  ]);
+  return {
+    boundingBox,
+    currentElement,
+    ref
+  };
+}, "useNodeElement");
 
 // src/components/module/graph/node/Hover.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ModuleGraphNodeHover = ({ children, node }) => {
+var ModuleGraphNodeHover = /* @__PURE__ */ __name(({ children, node }) => {
   const { boundingBox, ref, currentElement } = useNodeElement(node);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledNodeGhostElementFlexCol, { ref, left: boundingBox?.x1, height: boundingBox?.h, top: boundingBox?.y1, width: boundingBox?.w }),
-    node ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: children?.(currentElement) }) : null
-  ] });
-};
-var StyledNodeGhostElementFlexCol = (0, import_material5.styled)(import_react_flexbox3.FlexCol, { name: "StyledNodeGhostElementFlexCol" })(() => ({
+  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(StyledNodeGhostElementFlexCol, {
+    ref,
+    left: boundingBox?.x1,
+    height: boundingBox?.h,
+    top: boundingBox?.y1,
+    width: boundingBox?.w
+  }), node ? /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, children?.(currentElement)) : null);
+}, "ModuleGraphNodeHover");
+var StyledNodeGhostElementFlexCol = (0, import_material5.styled)(import_react_flexbox3.FlexCol, {
+  name: "StyledNodeGhostElementFlexCol"
+})(() => ({
   // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
   // backgroundColor: '#fff',
   // opacity: 0.25,
-  // eslint-disable-next-line sort-keys-fix/sort-keys-fix
   cursor: "pointer",
   pointerEvents: "none",
   position: "absolute"
@@ -771,67 +918,87 @@ var StyledNodeGhostElementFlexCol = (0, import_material5.styled)(import_react_fl
 var import_icons_material3 = require("@mui/icons-material");
 var import_material6 = require("@mui/material");
 var import_react_identicon2 = require("@xylabs/react-identicon");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ModuleHoverPopper = ({ anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props }) => {
+var import_react19 = __toESM(require("react"), 1);
+var ModuleHoverPopper = /* @__PURE__ */ __name(({ anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props }) => {
   const { address, name } = node?.data() ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: anchorEl ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Popper, { anchorEl, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_material6.Card, { elevation: 3, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_material6.CardHeader,
-      {
-        action: onClose ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.IconButton, { size: "small", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons_material3.CancelRounded, {}) }) : null,
-        avatar: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Paper, { elevation: 6, sx: { bgcolor: "#fff", p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_identicon2.Identicon, { value: address, size: 24 }) }),
-        title: name,
-        subheader: address
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, anchorEl ? /* @__PURE__ */ import_react19.default.createElement(import_material6.Popper, {
+    anchorEl,
+    ...props
+  }, /* @__PURE__ */ import_react19.default.createElement(import_material6.Card, {
+    elevation: 3
+  }, /* @__PURE__ */ import_react19.default.createElement(import_material6.CardHeader, {
+    action: onClose ? /* @__PURE__ */ import_react19.default.createElement(import_material6.IconButton, {
+      size: "small",
+      onClick: onClose
+    }, /* @__PURE__ */ import_react19.default.createElement(import_icons_material3.CancelRounded, null)) : null,
+    avatar: /* @__PURE__ */ import_react19.default.createElement(import_material6.Paper, {
+      elevation: 6,
+      sx: {
+        bgcolor: "#fff",
+        p: 1
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(StyledCardActions, { children: [
-      onModuleDetails ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Button, { onClick: () => onModuleDetails?.(address), size: "small", variant: "contained", children: "Details" }) : null,
-      onModuleExplore ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Button, { onClick: () => onModuleExplore?.(address), size: "small", variant: "contained", children: "Explore" }) : null
-    ] })
-  ] }) }) : null });
-};
-var StyledModuleHoverPopper = (0, import_material6.styled)(ModuleHoverPopper, { name: "StyledComponents" })(() => ({
+    }, /* @__PURE__ */ import_react19.default.createElement(import_react_identicon2.Identicon, {
+      value: address,
+      size: 24
+    })),
+    title: name,
+    subheader: address
+  }), /* @__PURE__ */ import_react19.default.createElement(StyledCardActions, null, onModuleDetails ? /* @__PURE__ */ import_react19.default.createElement(import_material6.Button, {
+    onClick: /* @__PURE__ */ __name(() => onModuleDetails?.(address), "onClick"),
+    size: "small",
+    variant: "contained"
+  }, "Details") : null, onModuleExplore ? /* @__PURE__ */ import_react19.default.createElement(import_material6.Button, {
+    onClick: /* @__PURE__ */ __name(() => onModuleExplore?.(address), "onClick"),
+    size: "small",
+    variant: "contained"
+  }, "Explore") : null))) : null);
+}, "ModuleHoverPopper");
+var StyledModuleHoverPopper = (0, import_material6.styled)(ModuleHoverPopper, {
+  name: "StyledComponents"
+})(() => ({
   zIndex: 2
 }));
-var StyledCardActions = (0, import_material6.styled)(import_material6.CardActions, { name: "StyledCardActions" })(() => ({
+var StyledCardActions = (0, import_material6.styled)(import_material6.CardActions, {
+  name: "StyledCardActions"
+})(() => ({
   display: "flex",
   justifyContent: "center"
 }));
 
 // src/components/module/graph/GraphFlexBox.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ModuleGraphFlexBox = ({ hideActions, rootModule, disableModuleDetails, ...props }) => {
-  const cytoscapeRef = (0, import_react15.useRef)(null);
+var ModuleGraphFlexBox = /* @__PURE__ */ __name(({ hideActions, rootModule, disableModuleDetails, ...props }) => {
+  const cytoscapeRef = (0, import_react20.useRef)(null);
   const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? void 0);
   const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels);
   const { mod, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(void 0));
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WithExtensions, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    NodeRelationalGraphFlexBox,
-    {
-      actions: mod ? null : hideActions ? null : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material7.Button, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
-      showDetails: !!mod,
-      detail: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DetailsFlexbox, { onClose: () => onModuleDetails(null) }),
-      options,
-      ref: cytoscapeRef,
-      width: "100%",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModuleGraphNodeHover, { node: hoveredNode, children: (element) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        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__ */ (0, import_jsx_runtime10.jsx)(CytoscapeInstanceProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModuleGraphFlexBox, { ...props }) });
-};
+  return /* @__PURE__ */ import_react20.default.createElement(WithExtensions, null, /* @__PURE__ */ import_react20.default.createElement(NodeRelationalGraphFlexBox, {
+    actions: mod ? null : hideActions ? null : /* @__PURE__ */ import_react20.default.createElement(import_material7.Button, {
+      size: "small",
+      onClick: handleToggleLabels,
+      variant: "contained"
+    }, "Toggle Labels"),
+    showDetails: !!mod,
+    detail: /* @__PURE__ */ import_react20.default.createElement(DetailsFlexbox, {
+      onClose: /* @__PURE__ */ __name(() => onModuleDetails(null), "onClose")
+    }),
+    options,
+    ref: cytoscapeRef,
+    width: "100%",
+    ...props
+  }, /* @__PURE__ */ import_react20.default.createElement(ModuleGraphNodeHover, {
+    node: hoveredNode
+  }, (element) => /* @__PURE__ */ import_react20.default.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__ */ import_react20.default.createElement(CytoscapeInstanceProvider, null, /* @__PURE__ */ import_react20.default.createElement(ModuleGraphFlexBox, props));
+}, "ModuleGraphFlexBoxWithProvider");
 //# sourceMappingURL=index.cjs.map