@xyo-network/react-node-renderer 2.64.1 → 2.64.4

package/dist/browser/components/{ModuleCardParser.cjs → module/CardParser.cjs}

@@ -17,12 +17,12 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/ModuleCardParser.tsx
-var ModuleCardParser_exports = {};
-__export(ModuleCardParser_exports, {
+// src/components/module/CardParser.tsx
+var CardParser_exports = {};
+__export(CardParser_exports, {
   ModuleCardParser: () => ModuleCardParser
 });
-module.exports = __toCommonJS(ModuleCardParser_exports);
+module.exports = __toCommonJS(CardParser_exports);
 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");
@@ -30,12 +30,12 @@ var import_react_module = require("@xyo-network/react-module");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ModuleCardParser = ({ module: module2 }) => {
   switch (true) {
-    case module2?.config.schema.includes("archivist"):
+    case (0, import_archivist_model.isArchivistInstance)(module2):
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_archivist.ArchivistCard, { module: (0, import_archivist_model.asArchivistInstance)(module2) });
-    case module2?.config.schema.includes("diviner"):
+    case (0, import_diviner_model.isDivinerInstance)(module2):
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_module.DivinerCard, { module: (0, import_diviner_model.asDivinerInstance)(module2) });
     default:
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_module.ModuleCard, { module: module2 });
   }
 };
-//# sourceMappingURL=ModuleCardParser.cjs.map
+//# sourceMappingURL=CardParser.cjs.map

package/dist/browser/components/module/CardParser.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/module/CardParser.tsx"],"sourcesContent":["import { asArchivistInstance, isArchivistInstance } from '@xyo-network/archivist-model'\nimport { asDivinerInstance, isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { ArchivistCard } from '@xyo-network/react-archivist'\nimport { DivinerCard, ModuleCard } from '@xyo-network/react-module'\n\nexport interface ModuleCardParserProps {\n  module?: ModuleInstance\n}\n\nexport const ModuleCardParser: React.FC<ModuleCardParserProps> = ({ module }) => {\n  switch (true) {\n    case isArchivistInstance(module):\n      return <ArchivistCard module={asArchivistInstance(module)} />\n    case isDivinerInstance(module):\n      return <DivinerCard module={asDivinerInstance(module)} />\n    default:\n      return <ModuleCard module={module} />\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAyD;AACzD,2BAAqD;AAErD,6BAA8B;AAC9B,0BAAwC;AAS3B;AAHN,IAAM,mBAAoD,CAAC,EAAE,QAAAA,QAAO,MAAM;AAC/E,UAAQ,MAAM;AAAA,IACZ,SAAK,4CAAoBA,OAAM;AAC7B,aAAO,4CAAC,wCAAc,YAAQ,4CAAoBA,OAAM,GAAG;AAAA,IAC7D,SAAK,wCAAkBA,OAAM;AAC3B,aAAO,4CAAC,mCAAY,YAAQ,wCAAkBA,OAAM,GAAG;AAAA,IACzD;AACE,aAAO,4CAAC,kCAAW,QAAQA,SAAQ;AAAA,EACvC;AACF;","names":["module"]}

package/dist/browser/components/{ModuleCardParser.d.mts → module/CardParser.d.cts}

@@ -4,4 +4,4 @@ export interface ModuleCardParserProps {
     module?: ModuleInstance;
 }
 export declare const ModuleCardParser: React.FC<ModuleCardParserProps>;
-//# sourceMappingURL=ModuleCardParser.d.ts.map
+//# sourceMappingURL=CardParser.d.ts.map

package/dist/browser/components/module/CardParser.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardParser.d.ts","sourceRoot":"","sources":["../../../../src/components/module/CardParser.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAIpD,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAS5D,CAAA"}

package/dist/browser/components/{ModuleCardParser.d.ts → module/CardParser.d.mts}

@@ -4,4 +4,4 @@ export interface ModuleCardParserProps {
     module?: ModuleInstance;
 }
 export declare const ModuleCardParser: React.FC<ModuleCardParserProps>;
-//# sourceMappingURL=ModuleCardParser.d.ts.map
+//# sourceMappingURL=CardParser.d.ts.map

package/dist/browser/components/module/CardParser.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardParser.d.ts","sourceRoot":"","sources":["../../../../src/components/module/CardParser.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAIpD,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAS5D,CAAA"}

package/dist/browser/components/{ModuleCardParser.d.cts → module/CardParser.d.ts}

@@ -4,4 +4,4 @@ export interface ModuleCardParserProps {
     module?: ModuleInstance;
 }
 export declare const ModuleCardParser: React.FC<ModuleCardParserProps>;
-//# sourceMappingURL=ModuleCardParser.d.ts.map
+//# sourceMappingURL=CardParser.d.ts.map

package/dist/browser/components/module/CardParser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardParser.d.ts","sourceRoot":"","sources":["../../../../src/components/module/CardParser.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAIpD,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAS5D,CAAA"}

package/dist/browser/components/{ModuleCardParser.js → module/CardParser.js}

@@ -1,14 +1,14 @@
-// src/components/ModuleCardParser.tsx
-import { asArchivistInstance } from "@xyo-network/archivist-model";
-import { asDivinerInstance } from "@xyo-network/diviner-model";
+// 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 { jsx } from "react/jsx-runtime";
 var ModuleCardParser = ({ module }) => {
   switch (true) {
-    case module?.config.schema.includes("archivist"):
+    case isArchivistInstance(module):
       return /* @__PURE__ */ jsx(ArchivistCard, { module: asArchivistInstance(module) });
-    case module?.config.schema.includes("diviner"):
+    case isDivinerInstance(module):
       return /* @__PURE__ */ jsx(DivinerCard, { module: asDivinerInstance(module) });
     default:
       return /* @__PURE__ */ jsx(ModuleCard, { module });
@@ -17,4 +17,4 @@ var ModuleCardParser = ({ module }) => {
 export {
   ModuleCardParser
 };
-//# sourceMappingURL=ModuleCardParser.js.map
+//# sourceMappingURL=CardParser.js.map

package/dist/browser/components/module/CardParser.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/module/CardParser.tsx"],"sourcesContent":["import { asArchivistInstance, isArchivistInstance } from '@xyo-network/archivist-model'\nimport { asDivinerInstance, isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { ArchivistCard } from '@xyo-network/react-archivist'\nimport { DivinerCard, ModuleCard } from '@xyo-network/react-module'\n\nexport interface ModuleCardParserProps {\n  module?: ModuleInstance\n}\n\nexport const ModuleCardParser: React.FC<ModuleCardParserProps> = ({ module }) => {\n  switch (true) {\n    case isArchivistInstance(module):\n      return <ArchivistCard module={asArchivistInstance(module)} />\n    case isDivinerInstance(module):\n      return <DivinerCard module={asDivinerInstance(module)} />\n    default:\n      return <ModuleCard module={module} />\n  }\n}\n"],"mappings":";AAAA,SAAS,qBAAqB,2BAA2B;AACzD,SAAS,mBAAmB,yBAAyB;AAErD,SAAS,qBAAqB;AAC9B,SAAS,aAAa,kBAAkB;AAS3B;AAHN,IAAM,mBAAoD,CAAC,EAAE,OAAO,MAAM;AAC/E,UAAQ,MAAM;AAAA,IACZ,KAAK,oBAAoB,MAAM;AAC7B,aAAO,oBAAC,iBAAc,QAAQ,oBAAoB,MAAM,GAAG;AAAA,IAC7D,KAAK,kBAAkB,MAAM;AAC3B,aAAO,oBAAC,eAAY,QAAQ,kBAAkB,MAAM,GAAG;AAAA,IACzD;AACE,aAAO,oBAAC,cAAW,QAAgB;AAAA,EACvC;AACF;","names":[]}

package/dist/browser/components/{ModuleGraphFlexBox.cjs → module/graph/GraphFlexBox.cjs}

@@ -27,24 +27,37 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/ModuleGraphFlexBox.tsx
-var ModuleGraphFlexBox_exports = {};
-__export(ModuleGraphFlexBox_exports, {
-  ModuleGraphFlexBox: () => ModuleGraphFlexBox
+// src/components/module/graph/GraphFlexBox.tsx
+var GraphFlexBox_exports = {};
+__export(GraphFlexBox_exports, {
+  ModuleGraphFlexBox: () => ModuleGraphFlexBox,
+  ModuleGraphFlexBoxWithProvider: () => ModuleGraphFlexBoxWithProvider
 });
-module.exports = __toCommonJS(ModuleGraphFlexBox_exports);
+module.exports = __toCommonJS(GraphFlexBox_exports);
 var import_material5 = require("@mui/material");
-var import_react11 = require("react");
 
 // 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_runtime = require("react/jsx-runtime");
+var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
+  const [cy, setCy] = (0, import_react.useState)(defaultInstance);
+  (0, import_react.useEffect)(() => {
+    setCy(defaultInstance);
+  }, [defaultInstance]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CytoscapeInstanceContext.Provider, { value: { cy, provided: true, setCy }, children });
+};
+
 // 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);
 
-// src/hooks/cytoscape/useAddNewElements.tsx
+// src/hooks/cytoscape/useCytoscapeElements.ts
+var import_react_async_effect = require("@xylabs/react-async-effect");
+var import_node_model3 = require("@xyo-network/node-model");
 var import_react2 = require("react");
 
 // src/Cytoscape/CytoscapeElements.ts
@@ -248,57 +261,9 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
   }
 });
 
-// src/hooks/cytoscape/usePopperListener.tsx
-var import_material = require("@mui/material");
-var import_react = require("react");
-var usePopperListener = () => {
-  const theme = (0, import_material.useTheme)();
-  const popperListener = (0, import_react.useCallback)(
-    (node, hideLabels, cy) => {
-      const div = document.createElement("div");
-      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary);
-      const popper2 = node.popper({
-        content: () => {
-          div.innerHTML = node.data().name;
-          div.style.opacity = "0";
-          div.style.transition = "opacity .25s";
-          div.style.textShadow = `0 0 3px ${shadowColor}`;
-          document.body.appendChild(div);
-          return div;
-        }
-      });
-      const update = async () => {
-        await popper2.update();
-      };
-      node.on("position", update);
-      node.on("mouseover", () => hideLabels ? div.style.opacity = "1" : void 0);
-      node.on("mouseout", () => hideLabels ? div.style.opacity = "0" : void 0);
-      cy?.on("pan zoom resize", update);
-    },
-    [theme]
-  );
-  return popperListener;
-};
-
-// src/hooks/cytoscape/useAddNewElements.tsx
-var useAddNewElements = (newElements = [], hideLabels) => {
-  const { cy } = useCytoscapeInstance(true);
-  const popperListener = usePopperListener();
-  (0, import_react2.useEffect)(() => {
-    if (newElements.length > 1) {
-      const renderedElements = cy?.add(newElements);
-      renderedElements?.nodes().forEach((node) => popperListener(node, hideLabels, cy));
-      cy?.layout(ColaLayout).run();
-    }
-  }, [cy, hideLabels, newElements, popperListener]);
-};
-
 // src/hooks/cytoscape/useCytoscapeElements.ts
-var import_react_async_effect = require("@xylabs/react-async-effect");
-var import_node_model3 = require("@xyo-network/node-model");
-var import_react3 = require("react");
 var useCytoscapeElements = (module2) => {
-  const [elements, setElements] = (0, import_react3.useState)([]);
+  const [elements, setElements] = (0, import_react2.useState)([]);
   (0, import_react_async_effect.useAsyncEffect)(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
@@ -309,7 +274,7 @@ var useCytoscapeElements = (module2) => {
     },
     [module2]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     let attachedListener = void 0;
     let detachedListener = void 0;
     if (module2 && (0, import_node_model3.isNodeInstance)(module2)) {
@@ -331,22 +296,22 @@ var useCytoscapeElements = (module2) => {
 };
 
 // src/hooks/cytoscape/useCytoscapeOptions.ts
-var import_react6 = require("react");
-
-// src/hooks/cytoscape/useCytoscapeStyle.tsx
-var import_material3 = require("@mui/material");
 var import_react5 = require("react");
 
-// src/hooks/cytoscape/useIcons.tsx
+// src/hooks/cytoscape/useCytoscapeStyle.tsx
 var import_material2 = require("@mui/material");
 var import_react4 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/hooks/cytoscape/useIcons.tsx
+var import_material = require("@mui/material");
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var useIcons = () => {
-  const theme = (0, import_material2.useTheme)();
-  const icons = (0, import_react4.useMemo)(() => {
+  const theme = (0, import_material.useTheme)();
+  const icons = (0, import_react3.useMemo)(() => {
     const iconMap = generateIconMap();
     return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-      const icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconComponent, { fontSize: "small" });
+      const icon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconComponent, { fontSize: "small" });
       acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
       return acc;
     }, iconMap);
@@ -356,9 +321,9 @@ var useIcons = () => {
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
 var useCytoscapeStyle = (hideLabels = false) => {
-  const theme = (0, import_material3.useTheme)();
+  const theme = (0, import_material2.useTheme)();
   const icons = useIcons();
-  const style = (0, import_react5.useMemo)(
+  const style = (0, import_react4.useMemo)(
     () => [
       NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
       NodeStyled(icons, theme.palette.primary.main, hideLabels),
@@ -372,24 +337,51 @@ var useCytoscapeStyle = (hideLabels = false) => {
 // src/hooks/cytoscape/useCytoscapeOptions.ts
 var useCytoscapeOptions = (elements, style, layout) => {
   const defaultStyle = useCytoscapeStyle();
-  const options = (0, import_react6.useMemo)(() => {
-    if (elements && layout && style) {
+  const resolvedLayout = layout ?? ConcentricLayout;
+  const resolvedStyle = style ?? defaultStyle;
+  const options = (0, import_react5.useMemo)(() => {
+    if (elements && resolvedLayout && resolvedStyle) {
       return {
         elements,
-        layout: layout ?? ConcentricLayout,
-        style: style ?? defaultStyle
+        layout: resolvedLayout,
+        style: resolvedStyle
       };
     }
   }, [elements, layout, style]);
   return options;
 };
 
+// src/hooks/cytoscape/useHoveredNode.tsx
+var import_react6 = require("react");
+var useHoveredNode = (renderedElements) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [hoveredNode, setHoveredNode] = (0, import_react6.useState)();
+  const nodeListener = (0, import_react6.useCallback)((node) => {
+    node.on("mouseover tap", () => {
+      setHoveredNode(node);
+    });
+    node.on("mouseout", () => {
+      setHoveredNode(void 0);
+    });
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    if (renderedElements) {
+      renderedElements.nodes().forEach(nodeListener);
+    }
+  }, [nodeListener, renderedElements]);
+  (0, import_react6.useEffect)(() => {
+    cy?.ready(() => {
+      cy.nodes().forEach(nodeListener);
+    });
+  }, [cy, nodeListener]);
+  return hoveredNode;
+};
+
 // src/hooks/cytoscape/useNewElements.tsx
 var import_react_node = require("@xyo-network/react-node");
 var import_react7 = require("react");
-var useNewElements = () => {
+var useNewElements = (selectedElement) => {
   const { cy } = useCytoscapeInstance(true);
-  const [selectedElement, setSelectedElement] = (0, import_react7.useState)();
   const { address: selectedAddress } = selectedElement?.data() ?? {};
   const [module2] = (0, import_react_node.useModuleFromNode)(selectedAddress);
   const newElements = useCytoscapeElements(module2);
@@ -400,54 +392,86 @@ var useNewElements = () => {
         cy?.center(element);
     }
   }, [cy, selectedAddress]);
-  return { newElements, setSelectedElement };
+  return newElements;
 };
 
 // src/hooks/cytoscape/useRelationalGraphOptions.tsx
 var import_react8 = require("react");
 var useRelationalGraphOptions = (module2) => {
-  const [hideLabels, setHideLabels] = (0, import_react8.useState)(false);
+  const [hideLabels, setHideLabels] = (0, import_react8.useState)(true);
   const handleToggleLabels = () => {
     setHideLabels((oldValue) => !oldValue);
   };
   const elements = useCytoscapeElements(module2);
   const style = useCytoscapeStyle(hideLabels);
-  const options = useCytoscapeOptions(elements, style, ColaLayout);
+  const options = useCytoscapeOptions(elements, style, ConcentricLayout);
   return { handleToggleLabels, hideLabels, options };
 };
 
+// src/hooks/cytoscape/useRenderNewElements.tsx
+var import_react9 = require("react");
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy?.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy?.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+
+// src/hooks/cytoscape/useSelectedElement.tsx
+var import_react10 = require("react");
+var useSelectedElement = () => {
+  const { cy } = useCytoscapeInstance(true);
+  const [selectedElement, setSelectedElement] = (0, import_react10.useState)();
+  (0, import_react10.useEffect)(() => {
+    const listener = (event) => {
+      const element = event.target[0];
+      if (element.isNode())
+        setSelectedElement(element);
+    };
+    cy?.on("select", listener);
+    return () => {
+      cy?.off("select", listener);
+    };
+  }, [cy, setSelectedElement]);
+  return selectedElement;
+};
+
 // src/components/cytoscape-extensions/WithExtensions.tsx
 var import_cytoscape = require("cytoscape");
 var import_cytoscape_cola = __toESM(require("cytoscape-cola"), 1);
-var import_cytoscape_popper = __toESM(require("cytoscape-popper"), 1);
-var import_react9 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var WithExtensions = ({ children }) => {
-  const [initialized, setInitialized] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [initialized, setInitialized] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     (0, import_cytoscape.use)(import_cytoscape_cola.default);
-    (0, import_cytoscape.use)(import_cytoscape_popper.default);
     setInitialized(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: initialized ? children : void 0 });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: initialized ? children : void 0 });
 };
 
 // src/components/RelationalGraph.tsx
-var import_material4 = require("@mui/material");
+var import_material3 = require("@mui/material");
 var import_react_flexbox = require("@xylabs/react-flexbox");
 var import_react_shared3 = require("@xyo-network/react-shared");
 var import_cytoscape2 = __toESM(require("cytoscape"), 1);
-var import_react10 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var NodeRelationalGraphFlexBox = (0, import_react10.forwardRef)(({ actions, options, ...props }, ref) => {
-  const [cy, setCy] = (0, import_react10.useState)();
+var import_react12 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var NodeRelationalGraphFlexBox = (0, import_react12.forwardRef)(({ actions, children, options, ...props }, ref) => {
+  const [cy, setCy] = (0, import_react12.useState)();
   const { setCy: setCyContext } = useCytoscapeInstance();
   const sharedRef = (0, import_react_shared3.useShareForwardedRef)(ref);
   const handleReset = () => {
     cy?.reset();
     cy?.fit(void 0, 20);
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (sharedRef) {
       const newCy = (0, import_cytoscape2.default)({
         container: sharedRef.current,
@@ -456,19 +480,20 @@ var NodeRelationalGraphFlexBox = (0, import_react10.forwardRef)(({ actions, opti
       setCy(newCy);
     }
   }, [options, sharedRef]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     setCyContext?.(cy);
   }, [cy, setCyContext]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_flexbox.FlexCol, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ActionsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material4.ButtonGroup, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_flexbox.FlexCol, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: actions ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.ButtonGroup, { children: [
       actions,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material4.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
+    children
   ] });
 });
 NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
-var ActionsContainer = (0, import_material4.styled)(import_react_flexbox.FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
+var ActionsContainer = (0, import_material3.styled)(import_react_flexbox.FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
   flexWrap: "wrap",
   gap: theme.spacing(1),
   position: "absolute",
@@ -477,37 +502,92 @@ var ActionsContainer = (0, import_material4.styled)(import_react_flexbox.FlexRow
   zIndex: 2
 }));
 
-// src/components/ModuleGraphFlexBox.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ModuleGraphFlexBox = ({ rootModule, ...props }) => {
-  const { cy } = useCytoscapeInstance(true);
-  const popperListener = usePopperListener();
-  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? void 0);
-  const { newElements, setSelectedElement } = useNewElements();
-  useAddNewElements(newElements, hideLabels);
-  (0, import_react11.useEffect)(() => {
-    const listener = (event) => {
-      const element = event.target[0];
-      if (element.isNode())
-        setSelectedElement(element);
+// src/components/module/graph/NodeHover.tsx
+var import_react_flexbox3 = require("@xylabs/react-flexbox");
+var import_react13 = require("react");
+
+// src/components/module/graph/Popper.tsx
+var import_material4 = require("@mui/material");
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
+var import_react_identicon = require("@xylabs/react-identicon");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ModuleHoverPopper = ({ address, element, name, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: element ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox2.FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => (0, import_material4.alpha)(theme.palette.background.paper, 0.95) }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox2.FlexRow, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_identicon.Identicon, { value: address, size: 24 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Typography, { children: name })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Chip, { label: address, color: "primary" })
+  ] }) }) : null });
+};
+
+// src/components/module/graph/NodeHover.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ModuleGraphNodeHover = ({ node }) => {
+  const { address, name } = node?.data() ?? {};
+  const [boundingBox, setBoundingBox] = (0, import_react13.useState)(node?.renderedBoundingBox());
+  const ref = (0, import_react13.useRef)(null);
+  const [currentEl, setCurrentEl] = (0, import_react13.useState)(null);
+  (0, import_react13.useEffect)(() => {
+    setCurrentEl(null);
+  }, [node]);
+  (0, import_react13.useEffect)(() => {
+    if (node) {
+      setBoundingBox(node.renderedBoundingBox());
+    }
+    const listener = () => {
+      setBoundingBox(node?.renderedBoundingBox());
     };
-    cy?.on("select", listener);
+    node?.on("position", listener);
     return () => {
-      cy?.off("select", listener);
+      node?.off("position", void 0, listener);
     };
-  }, [cy, setSelectedElement]);
-  (0, import_react11.useEffect)(() => {
-    cy?.ready(() => {
-      cy.nodes().forEach((node) => popperListener(node, hideLabels, cy));
-    });
-  }, [cy, hideLabels, popperListener, setSelectedElement]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WithExtensions, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  }, [node]);
+  (0, import_react13.useLayoutEffect)(() => {
+    setCurrentEl(ref.current);
+  }, [boundingBox]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_flexbox3.FlexCol,
+      {
+        ref,
+        sx: {
+          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
+          // backgroundColor: '#fff',
+          // opacity: 0.25,
+          cursor: "pointer",
+          height: boundingBox?.h,
+          left: boundingBox?.x1,
+          pointerEvents: "none",
+          position: "absolute",
+          top: boundingBox?.y1,
+          width: boundingBox?.w
+        }
+      }
+    ),
+    node ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true }) }) : null
+  ] });
+};
+
+// src/components/module/graph/GraphFlexBox.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ModuleGraphFlexBox = ({ rootModule, ...props }) => {
+  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? void 0);
+  const selectedElement = useSelectedElement();
+  const newElements = useNewElements(selectedElement);
+  const renderedElements = useRenderNewElements(newElements, hideLabels);
+  const hoveredNode = useHoveredNode(renderedElements);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WithExtensions, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     NodeRelationalGraphFlexBox,
     {
-      actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material5.Button, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material5.Button, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
       options,
-      ...props
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModuleGraphNodeHover, { node: hoveredNode })
     }
   ) });
 };
-//# sourceMappingURL=ModuleGraphFlexBox.cjs.map
+var ModuleGraphFlexBoxWithProvider = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CytoscapeInstanceProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModuleGraphFlexBox, { ...props }) });
+};
+//# sourceMappingURL=GraphFlexBox.cjs.map