@xyo-network/react-node-renderer 2.64.5 → 2.64.7

package/dist/browser/hooks/cytoscape/elements/useRenderNewElements.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/hooks/cytoscape/elements/useRenderNewElements.tsx","../../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../../src/contexts/CytoscapeInstance/use.ts","../../../../../src/Cytoscape/lib/layout/ColaLayout.ts"],"sourcesContent":["import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\nimport { ColaLayout } from '../../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n  const { cy } = useCytoscapeInstance(true)\n  const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n  useEffect(() => {\n    if (newElements.length > 1) {\n      const renderedElements = cy?.add(newElements)\n      setRenderedElements(renderedElements)\n      cy?.layout(ColaLayout).run()\n    }\n  }, [cy, hideLabels, newElements])\n\n  return renderedElements\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","export const ColaLayout = {\n  centerGraph: false,\n  convergenceThreshold: 0.01,\n  name: 'cola',\n}\n"],"mappings":";AACA,SAAS,WAAW,gBAAgB;;;ACDpC,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACJhF,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;;;ACJvH,IAAM,aAAa;AAAA,EACxB,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,MAAM;AACR;;;AHEO,IAAM,uBAAuB,CAAC,cAAmC,CAAC,GAAG,eAAyB;AACnG,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgC;AAEhF,YAAU,MAAM;AACd,QAAI,YAAY,SAAS,GAAG;AAC1B,YAAMA,oBAAmB,IAAI,IAAI,WAAW;AAC5C,0BAAoBA,iBAAgB;AACpC,UAAI,OAAO,UAAU,EAAE,IAAI;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,IAAI,YAAY,WAAW,CAAC;AAEhC,SAAO;AACT;","names":["renderedElements"]}

package/dist/browser/hooks/cytoscape/elements/useSelectedElement.cjs

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/cytoscape/elements/useSelectedElement.tsx
+var useSelectedElement_exports = {};
+__export(useSelectedElement_exports, {
+  useSelectedElement: () => useSelectedElement
+});
+module.exports = __toCommonJS(useSelectedElement_exports);
+var import_react = 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/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/elements/useSelectedElement.tsx
+var useSelectedElement = () => {
+  const [selectedElement, setSelectedElement] = (0, import_react.useState)();
+  const { cy } = useCytoscapeInstance(true);
+  const updateStyles = (element) => {
+    const nodes = cy?.nodes();
+    nodes?.toggleClass("activeNode", false);
+    element.toggleClass("activeNode", true);
+  };
+  const toggleSelectedElement = (address) => {
+    const selectedNode = cy?.nodes(`[id="${address}"]`)?.[0];
+    if (selectedNode) {
+      setSelectedElement(selectedNode);
+      updateStyles(selectedNode);
+    }
+  };
+  return { selectedElement, toggleSelectedElement };
+};
+//# sourceMappingURL=useSelectedElement.cjs.map

package/dist/browser/hooks/cytoscape/elements/useSelectedElement.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/hooks/cytoscape/elements/useSelectedElement.tsx","../../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../../src/contexts/CytoscapeInstance/use.ts"],"sourcesContent":["import { NodeSingular } from 'cytoscape'\nimport { useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\n\nexport const useSelectedElement = () => {\n  const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n  const { cy } = useCytoscapeInstance(true)\n\n  const updateStyles = (element: NodeSingular) => {\n    const nodes = cy?.nodes()\n    nodes?.toggleClass('activeNode', false)\n    element.toggleClass('activeNode', true)\n  }\n\n  const toggleSelectedElement = (address?: string) => {\n    const selectedNode = cy?.nodes(`[id=\"${address}\"]`)?.[0]\n    if (selectedNode) {\n      setSelectedElement(selectedNode)\n      updateStyles(selectedNode)\n    }\n  }\n\n  return { selectedElement, toggleSelectedElement }\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAyB;;;ACDzB,0BAAgC;AAIzB,IAAM,+BAA2B,qCAAwC;;;ACJhF,IAAAA,uBAA6B;AAItB,IAAM,uBAAuB,CAAC,WAAW,cAAU,mCAAa,0BAA0B,qBAAqB,QAAQ;;;AFCvH,IAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAuB;AACrE,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AAExC,QAAM,eAAe,CAAC,YAA0B;AAC9C,UAAM,QAAQ,IAAI,MAAM;AACxB,WAAO,YAAY,cAAc,KAAK;AACtC,YAAQ,YAAY,cAAc,IAAI;AAAA,EACxC;AAEA,QAAM,wBAAwB,CAAC,YAAqB;AAClD,UAAM,eAAe,IAAI,MAAM,QAAQ,OAAO,IAAI,IAAI,CAAC;AACvD,QAAI,cAAc;AAChB,yBAAmB,YAAY;AAC/B,mBAAa,YAAY;AAAA,IAC3B;AAAA,EACF;AAEA,SAAO,EAAE,iBAAiB,sBAAsB;AAClD;","names":["import_react_shared"]}

package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.cts

@@ -0,0 +1,6 @@
+import { NodeSingular } from 'cytoscape';
+export declare const useSelectedElement: () => {
+    selectedElement: NodeSingular | undefined;
+    toggleSelectedElement: (address?: string) => void;
+};
+//# sourceMappingURL=useSelectedElement.d.ts.map

package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedElement.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/cytoscape/elements/useSelectedElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,eAAO,MAAM,kBAAkB;;sCAUY,MAAM;CAShD,CAAA"}

package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.mts

@@ -0,0 +1,6 @@
+import { NodeSingular } from 'cytoscape';
+export declare const useSelectedElement: () => {
+    selectedElement: NodeSingular | undefined;
+    toggleSelectedElement: (address?: string) => void;
+};
+//# sourceMappingURL=useSelectedElement.d.ts.map

package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedElement.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/cytoscape/elements/useSelectedElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,eAAO,MAAM,kBAAkB;;sCAUY,MAAM;CAShD,CAAA"}

package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.ts

@@ -0,0 +1,6 @@
+import { NodeSingular } from 'cytoscape';
+export declare const useSelectedElement: () => {
+    selectedElement: NodeSingular | undefined;
+    toggleSelectedElement: (address?: string) => void;
+};
+//# sourceMappingURL=useSelectedElement.d.ts.map

package/dist/browser/hooks/cytoscape/elements/useSelectedElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectedElement.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/cytoscape/elements/useSelectedElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAKxC,eAAO,MAAM,kBAAkB;;sCAUY,MAAM;CAShD,CAAA"}

package/dist/browser/hooks/cytoscape/elements/useSelectedElement.js

@@ -0,0 +1,33 @@
+// src/hooks/cytoscape/elements/useSelectedElement.tsx
+import { useState } from "react";
+
+// src/contexts/CytoscapeInstance/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CytoscapeInstanceContext = createContextEx();
+
+// src/contexts/CytoscapeInstance/use.ts
+import { useContextEx } from "@xyo-network/react-shared";
+var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/hooks/cytoscape/elements/useSelectedElement.tsx
+var useSelectedElement = () => {
+  const [selectedElement, setSelectedElement] = useState();
+  const { cy } = useCytoscapeInstance(true);
+  const updateStyles = (element) => {
+    const nodes = cy?.nodes();
+    nodes?.toggleClass("activeNode", false);
+    element.toggleClass("activeNode", true);
+  };
+  const toggleSelectedElement = (address) => {
+    const selectedNode = cy?.nodes(`[id="${address}"]`)?.[0];
+    if (selectedNode) {
+      setSelectedElement(selectedNode);
+      updateStyles(selectedNode);
+    }
+  };
+  return { selectedElement, toggleSelectedElement };
+};
+export {
+  useSelectedElement
+};
+//# sourceMappingURL=useSelectedElement.js.map

package/dist/browser/hooks/cytoscape/elements/useSelectedElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/hooks/cytoscape/elements/useSelectedElement.tsx","../../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../../src/contexts/CytoscapeInstance/use.ts"],"sourcesContent":["import { NodeSingular } from 'cytoscape'\nimport { useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\n\nexport const useSelectedElement = () => {\n  const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n  const { cy } = useCytoscapeInstance(true)\n\n  const updateStyles = (element: NodeSingular) => {\n    const nodes = cy?.nodes()\n    nodes?.toggleClass('activeNode', false)\n    element.toggleClass('activeNode', true)\n  }\n\n  const toggleSelectedElement = (address?: string) => {\n    const selectedNode = cy?.nodes(`[id=\"${address}\"]`)?.[0]\n    if (selectedNode) {\n      setSelectedElement(selectedNode)\n      updateStyles(selectedNode)\n    }\n  }\n\n  return { selectedElement, toggleSelectedElement }\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n"],"mappings":";AACA,SAAS,gBAAgB;;;ACDzB,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACJhF,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;;;AFCvH,IAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAuB;AACrE,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AAExC,QAAM,eAAe,CAAC,YAA0B;AAC9C,UAAM,QAAQ,IAAI,MAAM;AACxB,WAAO,YAAY,cAAc,KAAK;AACtC,YAAQ,YAAY,cAAc,IAAI;AAAA,EACxC;AAEA,QAAM,wBAAwB,CAAC,YAAqB;AAClD,UAAM,eAAe,IAAI,MAAM,QAAQ,OAAO,IAAI,IAAI,CAAC;AACvD,QAAI,cAAc;AAChB,yBAAmB,YAAY;AAC/B,mBAAa,YAAY;AAAA,IAC3B;AAAA,EACF;AAEA,SAAO,EAAE,iBAAiB,sBAAsB;AAClD;","names":[]}

package/dist/browser/hooks/cytoscape/index.cjs

@@ -22,15 +22,13 @@ var cytoscape_exports = {};
 __export(cytoscape_exports, {
   useCytoscapeElements: () => useCytoscapeElements,
   useCytoscapeOptions: () => useCytoscapeOptions,
-  useHoveredNode: () => useHoveredNode,
-  useNewElements: () => useNewElements,
-  useRelationalGraphOptions: () => useRelationalGraphOptions,
-  useRenderNewElements: () => useRenderNewElements,
-  useSelectedElement: () => useSelectedElement
+  useElements: () => useElements,
+  useModuleDetails: () => useModuleDetails,
+  useRelationalGraphOptions: () => useRelationalGraphOptions
 });
 module.exports = __toCommonJS(cytoscape_exports);
 
-// src/hooks/cytoscape/useCytoscapeElements.ts
+// src/hooks/cytoscape/elements/useCytoscapeElements.ts
 var import_react_async_effect = require("@xylabs/react-async-effect");
 var import_node_model3 = require("@xyo-network/node-model");
 var import_react = require("react");
@@ -130,7 +128,7 @@ var CytoscapeElements = class _CytoscapeElements {
     try {
       const childElements = await _CytoscapeElements.recurseNodes(module2);
       childElements?.forEach((module3) => {
-        const newNode = _CytoscapeElements.buildNode(module3, { rootNodeId: newRootNode.data.id });
+        const newNode = _CytoscapeElements.buildNode(module3);
         newElements.push(newNode);
         const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
         newElements.push(newEdge);
@@ -141,10 +139,11 @@ var CytoscapeElements = class _CytoscapeElements {
       return [];
     }
   }
-  static buildNode(module2, properties) {
+  static buildNode(module2, properties, classes) {
     const { address, config } = module2;
     const normalizedName = config.name ?? address.substring(0, 8);
     return {
+      classes,
       data: {
         address,
         id: address,
@@ -155,7 +154,7 @@ var CytoscapeElements = class _CytoscapeElements {
     };
   }
   static buildRootNode = (module2) => {
-    return _CytoscapeElements.buildNode(module2, { root: true });
+    return _CytoscapeElements.buildNode(module2, {}, ["activeNode"]);
   };
   static normalizeName(name) {
     if (!name)
@@ -200,7 +199,7 @@ var CyIconSet = {
 };
 
 // src/Cytoscape/CytoscapeStyles.ts
-var NodeIdStyles = (color, outlineColor) => ({
+var NodeWithName = (color, outlineColor) => ({
   selector: "node[name]",
   style: {
     color,
@@ -213,7 +212,7 @@ var NodeIdStyles = (color, outlineColor) => ({
     "text-valign": "top"
   }
 });
-var NodeStyled = (icons, bgColor, hideLabels = false) => ({
+var Node = (icons, bgColor, hideLabels = false) => ({
   selector: "node",
   style: {
     "background-color": bgColor,
@@ -224,6 +223,12 @@ var NodeStyled = (icons, bgColor, hideLabels = false) => ({
     shape: "round-rectangle"
   }
 });
+var NodeAsRoot = (bgColor) => ({
+  selector: ".activeNode",
+  style: {
+    "background-color": bgColor
+  }
+});
 var EdgeStyled = (lineColor, targetArrowColor) => ({
   selector: "edge",
   style: {
@@ -235,9 +240,8 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
     width: 3
   }
 });
-var NodeBgStyles = (bgColor) => ["background-color", bgColor];
 
-// src/hooks/cytoscape/useCytoscapeElements.ts
+// src/hooks/cytoscape/elements/useCytoscapeElements.ts
 var useCytoscapeElements = (module2) => {
   const [elements, setElements] = (0, import_react.useState)([]);
   (0, import_react_async_effect.useAsyncEffect)(
@@ -271,20 +275,106 @@ var useCytoscapeElements = (module2) => {
   return elements;
 };
 
-// src/hooks/cytoscape/useCytoscapeOptions.ts
+// src/hooks/cytoscape/elements/useHoveredNode.tsx
+var import_react2 = 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/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/elements/useHoveredNode.tsx
+var useHoveredNode = (renderedElements) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [hoveredNode, setHoveredNode] = (0, import_react2.useState)();
+  const nodeListener = (0, import_react2.useCallback)((node) => {
+    node.on("mouseover tap", () => {
+      setHoveredNode(node);
+    });
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (renderedElements) {
+      renderedElements.nodes().forEach(nodeListener);
+    }
+  }, [nodeListener, renderedElements]);
+  (0, import_react2.useEffect)(() => {
+    cy?.ready(() => {
+      cy.nodes().forEach(nodeListener);
+    });
+  }, [cy, nodeListener]);
+  return [hoveredNode, setHoveredNode];
+};
+
+// src/hooks/cytoscape/elements/useNewElements.tsx
+var import_react_node = require("@xyo-network/react-node");
+var useNewElements = (selectedElement) => {
+  const { address: selectedAddress } = selectedElement?.data() ?? {};
+  const [module2] = (0, import_react_node.useModuleFromNode)(selectedAddress);
+  const newElements = useCytoscapeElements(module2);
+  return newElements;
+};
+
+// src/hooks/cytoscape/elements/useRenderNewElements.tsx
+var import_react3 = require("react");
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy?.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy?.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+
+// src/hooks/cytoscape/elements/useSelectedElement.tsx
 var import_react4 = require("react");
+var useSelectedElement = () => {
+  const [selectedElement, setSelectedElement] = (0, import_react4.useState)();
+  const { cy } = useCytoscapeInstance(true);
+  const updateStyles = (element) => {
+    const nodes = cy?.nodes();
+    nodes?.toggleClass("activeNode", false);
+    element.toggleClass("activeNode", true);
+  };
+  const toggleSelectedElement = (address) => {
+    const selectedNode = cy?.nodes(`[id="${address}"]`)?.[0];
+    if (selectedNode) {
+      setSelectedElement(selectedNode);
+      updateStyles(selectedNode);
+    }
+  };
+  return { selectedElement, toggleSelectedElement };
+};
+
+// src/hooks/cytoscape/elements/useElements.tsx
+var useElements = (hideLabels) => {
+  const { selectedElement, toggleSelectedElement } = useSelectedElement();
+  const newElements = useNewElements(selectedElement);
+  const renderedElements = useRenderNewElements(newElements, hideLabels);
+  const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements);
+  return { hoveredNode, setHoveredNode, toggleSelectedElement };
+};
+
+// src/hooks/cytoscape/useCytoscapeOptions.ts
+var import_react7 = require("react");
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
 var import_material2 = require("@mui/material");
-var import_react3 = require("react");
+var import_react6 = require("react");
 
 // src/hooks/cytoscape/useIcons.tsx
 var import_material = require("@mui/material");
-var import_react2 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var useIcons = () => {
   const theme = (0, import_material.useTheme)();
-  const icons = (0, import_react2.useMemo)(() => {
+  const icons = (0, import_react5.useMemo)(() => {
     const iconMap = generateIconMap();
     return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
       const icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconComponent, { fontSize: "small" });
@@ -299,10 +389,11 @@ var useIcons = () => {
 var useCytoscapeStyle = (hideLabels = false) => {
   const theme = (0, import_material2.useTheme)();
   const icons = useIcons();
-  const style = (0, import_react3.useMemo)(
+  const style = (0, import_react6.useMemo)(
     () => [
-      NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
-      NodeStyled(icons, theme.palette.primary.main, hideLabels),
+      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]
@@ -315,7 +406,7 @@ var useCytoscapeOptions = (elements, style, layout) => {
   const defaultStyle = useCytoscapeStyle();
   const resolvedLayout = layout ?? ConcentricLayout;
   const resolvedStyle = style ?? defaultStyle;
-  const options = (0, import_react4.useMemo)(() => {
+  const options = (0, import_react7.useMemo)(() => {
     if (elements && resolvedLayout && resolvedStyle) {
       return {
         elements,
@@ -327,55 +418,65 @@ var useCytoscapeOptions = (elements, style, layout) => {
   return options;
 };
 
-// src/hooks/cytoscape/useHoveredNode.tsx
-var import_react5 = 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/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/useHoveredNode.tsx
-var useHoveredNode = (renderedElements) => {
-  const { cy } = useCytoscapeInstance(true);
-  const [hoveredNode, setHoveredNode] = (0, import_react5.useState)();
-  const nodeListener = (0, import_react5.useCallback)((node) => {
-    node.on("mouseover tap", () => {
-      setHoveredNode(node);
-    });
-    node.on("mouseout", () => {
-      setHoveredNode(void 0);
-    });
-  }, []);
-  (0, import_react5.useEffect)(() => {
-    if (renderedElements) {
-      renderedElements.nodes().forEach(nodeListener);
+// src/hooks/cytoscape/useModuleDetails.tsx
+var import_react_promise = require("@xylabs/react-promise");
+var import_react8 = require("react");
+var useModuleDetails = (rootModule, onFoundModule) => {
+  const { cy } = useCytoscapeInstance();
+  const [moduleAddress, setModuleAddress] = (0, import_react8.useState)();
+  const [foundModule] = (0, import_react_promise.usePromise)(async () => {
+    if (moduleAddress === null)
+      return null;
+    if (moduleAddress && rootModule) {
+      const foundModule2 = await rootModule.resolve(moduleAddress);
+      return foundModule2 ? foundModule2 : null;
     }
-  }, [nodeListener, renderedElements]);
-  (0, import_react5.useEffect)(() => {
-    cy?.ready(() => {
-      cy.nodes().forEach(nodeListener);
+  }, [moduleAddress, rootModule]);
+  (0, import_react8.useEffect)(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      if (moduleAddress === null) {
+        setTimeout(() => cy?.center(), 100);
+      } else if (foundModule && cy) {
+        const node = cy.nodes(`[id="${moduleAddress}"]`)?.[0];
+        setTimeout(() => cy.center(node), 100);
+      }
     });
-  }, [cy, nodeListener]);
-  return hoveredNode;
-};
-
-// src/hooks/cytoscape/useNewElements.tsx
-var import_react_node = require("@xyo-network/react-node");
-var useNewElements = (selectedElement) => {
-  const { address: selectedAddress } = selectedElement?.data() ?? {};
-  const [module2] = (0, import_react_node.useModuleFromNode)(selectedAddress);
-  const newElements = useCytoscapeElements(module2);
-  return newElements;
+    const container = cy?.container();
+    if (container) {
+      resizeObserver.observe(container);
+    }
+    return () => {
+      if (container)
+        resizeObserver.unobserve(container);
+    };
+  }, [cy, moduleAddress, foundModule, rootModule?.address]);
+  (0, import_react8.useEffect)(() => {
+    if (foundModule) {
+      onFoundModule?.();
+    }
+  }, [cy, moduleAddress, foundModule, onFoundModule]);
+  const onModuleDetails = (address) => {
+    const moduleNode = cy?.nodes(`[id="${address}"]`);
+    const rootModuleNode = cy?.nodes(`[id="${rootModule?.address}"]`);
+    const foundModuleNode = cy?.nodes(`[id="${foundModule?.address}"]`);
+    const notModuleNode = cy?.nodes(`[id != "${address}"]`);
+    if (address) {
+      moduleNode?.toggleClass("activeNode", true);
+      notModuleNode?.toggleClass("activeNode", false);
+    } else {
+      notModuleNode?.toggleClass("activeNode", false);
+      const activeNode = foundModuleNode?.length ? foundModuleNode : rootModuleNode;
+      activeNode?.toggleClass("activeNode", true);
+    }
+    setModuleAddress(address);
+  };
+  return { module: foundModule, onModuleDetails };
 };
 
 // src/hooks/cytoscape/useRelationalGraphOptions.tsx
-var import_react6 = require("react");
+var import_react9 = require("react");
 var useRelationalGraphOptions = (module2) => {
-  const [hideLabels, setHideLabels] = (0, import_react6.useState)(true);
+  const [hideLabels, setHideLabels] = (0, import_react9.useState)(true);
   const handleToggleLabels = () => {
     setHideLabels((oldValue) => !oldValue);
   };
@@ -384,62 +485,4 @@ var useRelationalGraphOptions = (module2) => {
   const options = useCytoscapeOptions(elements, style, ConcentricLayout);
   return { handleToggleLabels, hideLabels, options };
 };
-
-// src/hooks/cytoscape/useRenderNewElements.tsx
-var import_react7 = require("react");
-var useRenderNewElements = (newElements = [], hideLabels) => {
-  const { cy } = useCytoscapeInstance(true);
-  const [renderedElements, setRenderedElements] = (0, import_react7.useState)();
-  (0, import_react7.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_react8 = require("react");
-
-// src/hooks/cytoscape/useToggleSelectedElement.tsx
-var import_material3 = require("@mui/material");
-var useToggleSelectedElement = (setSelectedElement) => {
-  const { cy } = useCytoscapeInstance(true);
-  const theme = (0, import_material3.useTheme)();
-  const updateStyles = (element, styles) => {
-    cy?.style().selector(`node[id="${element.data().id}"]`).style(...styles);
-  };
-  const toggleSelectedElement = (element) => {
-    setSelectedElement((previousSelectedElement) => {
-      if (previousSelectedElement) {
-        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main));
-      }
-      return element;
-    });
-    updateStyles(element, NodeBgStyles(theme.palette.secondary.main));
-  };
-  return toggleSelectedElement;
-};
-
-// src/hooks/cytoscape/useSelectedElement.tsx
-var useSelectedElement = () => {
-  const { cy } = useCytoscapeInstance(true);
-  const [selectedElement, setSelectedElement] = (0, import_react8.useState)();
-  const toggleSelectedElement = useToggleSelectedElement(setSelectedElement);
-  (0, import_react8.useEffect)(() => {
-    const listener = (event) => {
-      const element = event.target[0];
-      if (element.isNode()) {
-        toggleSelectedElement(element);
-      }
-    };
-    cy?.on("select", listener);
-    return () => {
-      cy?.off("select", listener);
-    };
-  }, [cy, toggleSelectedElement]);
-  return selectedElement;
-};
 //# sourceMappingURL=index.cjs.map