@xyo-network/react-node-renderer 2.78.0 → 2.78.2

package/dist/node/index.cjs

@@ -1,2 +1,877 @@
-"use strict";var St=Object.create;var V=Object.defineProperty;var Mt=Object.getOwnPropertyDescriptor;var wt=Object.getOwnPropertyNames;var Ft=Object.getPrototypeOf,kt=Object.prototype.hasOwnProperty;var Bt=(e,o)=>{for(var t in o)V(e,t,{get:o[t],enumerable:!0})},Ne=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of wt(o))!kt.call(e,n)&&n!==t&&V(e,n,{get:()=>o[n],enumerable:!(r=Mt(o,n))||r.enumerable});return e};var v=(e,o,t)=>(t=e!=null?St(Ft(e)):{},Ne(o||!e||!e.__esModule?V(t,"default",{value:e,enumerable:!0}):t,e)),Dt=e=>Ne(V({},"__esModule",{value:!0}),e);var Vt={};Bt(Vt,{ColaLayout:()=>ie,ConcentricLayout:()=>W,CyIconSet:()=>le,CytoscapeElements:()=>E,CytoscapeInstanceContext:()=>L,CytoscapeInstanceProvider:()=>re,EdgeStyled:()=>me,ModuleCardParser:()=>Tt,ModuleGraphFlexBox:()=>Rt,ModuleGraphFlexBoxWithProvider:()=>Ut,Node:()=>ce,NodeAsRoot:()=>pe,NodeRelationalGraph:()=>Wt,NodeRelationalGraphFlexBox:()=>B,NodeWithName:()=>de,ProvidedNodeRenderer:()=>Ht,encodeSvg:()=>ne,generateIconMap:()=>se,parseModuleType:()=>ae,useCytoscapeElements:()=>F,useCytoscapeInstance:()=>N,useCytoscapeOptions:()=>H,useElements:()=>ue,useModuleDetails:()=>fe,useRelationalGraphOptions:()=>Ce});module.exports=Dt(Vt);var q=require("@xyo-network/archivist-model"),J=require("@xyo-network/diviner-model"),Ee=require("@xyo-network/react-archivist"),K=require("@xyo-network/react-module"),Q=require("react/jsx-runtime"),Tt=({mod:e})=>{switch(!0){case(0,q.isArchivistInstance)(e):return(0,Q.jsx)(Ee.ArchivistCard,{mod:(0,q.asArchivistInstance)(e)});case(0,J.isDivinerInstance)(e):return(0,Q.jsx)(K.DivinerCard,{mod:(0,J.asDivinerInstance)(e)});default:return(0,Q.jsx)(K.ModuleCard,{mod:e})}};var Et=require("@mui/material"),bt=require("react");var be=require("@xyo-network/react-shared"),L=(0,be.createContextEx)();var X=require("react");var Re=require("react/jsx-runtime"),re=({children:e,defaultInstance:o})=>{let[t,r]=(0,X.useState)(o);return(0,X.useEffect)(()=>{r(o)},[o]),(0,Re.jsx)(L.Provider,{value:{cy:t,provided:!0,setCy:r},children:e})};var Pe=require("@xyo-network/react-shared");var N=(e=!1)=>(0,Pe.useContextEx)(L,"CytoscapeInstance",e);var Ae=require("@xylabs/react-async-effect"),Ge=require("@xyo-network/node-model"),Y=require("react");var Te=require("@xylabs/exists");var Se=require("react-dom/server"),At="data:image/svg+xml,",ne=(e,o)=>{let t=(0,Se.renderToStaticMarkup)(e),n=new DOMParser().parseFromString(t,"text/html").querySelectorAll("svg")[0];return n&&(n.setAttribute("xmlns","http://www.w3.org/2000/svg"),n.setAttribute("height","100"),n.style.fill=o??"black"),`${At}${window.encodeURIComponent(n.outerHTML)}`};var se=()=>({archivist:"",bridge:"",diviner:"",module:"",node:"",sentinel:"",witness:""});var ie={centerGraph:!1,convergenceThreshold:.01,name:"cola"};var W={concentric:function(e){return e.degree(!1)},levelWidth:function(){return 2},minNodeSpacing:75,name:"concentric"};var Me=require("@xyo-network/archivist-model"),we=require("@xyo-network/bridge-model"),Fe=require("@xyo-network/diviner-model"),ke=require("@xyo-network/node-model"),Be=require("@xyo-network/sentinel-model"),De=require("@xyo-network/witness-model"),ae=e=>{let o="module";return e&&((0,Me.isArchivistInstance)(e)?o="archivist":(0,we.isBridgeInstance)(e)?o="bridge":(0,Fe.isDivinerInstance)(e)?o="diviner":(0,ke.isNodeInstance)(e)?o="node":(0,Be.isSentinelInstance)(e)?o="sentinel":(0,De.isWitnessModule)(e)?o="witness":o="module"),o};var E={MaxNameLength:20,buildEdge(e,o,t){return{data:{id:`${e.data.id}/${o.data.id}`,source:e.data.id,target:o.data.id,...t}}},async buildElements(e){let o=await E.recurseNodes(e);return await this.buildElementsFromInfo(o,void 0,["activeNode"])},async buildElementsFromInfo(e,o,t=[]){let r=E.buildNode(e.mod,{childCount:e.children.length,depth:e.depth},t),n=o?E.buildEdge(o,r,{depth:e.depth,siblingCount:e.children.length}):void 0,s=[r];n&&s.push(n);for(let i of e.children)s.push(...await this.buildElementsFromInfo(i,r));return s},buildNode(e,o,t){let{address:r,id:n}=e;return{classes:t,data:{address:r,id:r,name:n,type:ae(e),...o}}},buildRootNode:e=>E.buildNode(e,{},["activeNode"]),normalizeName(e){if(e)return e.length>this.MaxNameLength?`${e.slice(0,20)}...`:e},async recurseNodes(e,o=10,t=1){let r={children:[],depth:t,mod:e};if(o>0){let n=await e.resolve("*",{direction:"down",maxDepth:1});r.children=(await Promise.all(n.map(async s=>{if(s.address!==e.address)return await this.recurseNodes(s,o-1,t+1)}))).filter(Te.exists)}return r}};var C=require("@mui/icons-material"),le={archivist:C.Inventory2Rounded,bridge:C.InsertLinkRounded,diviner:C.BubbleChartRounded,module:C.QuestionMarkRounded,node:C.Hub,sentinel:C.TimerRounded,witness:C.VisibilityRounded};var de=(e,o)=>({selector:"node[name]",style:{color:e,"font-family":"Lexend Deca, Helvetica, sans-serif","font-size":12,"overlay-padding":"6px","text-halign":"center","text-outline-color":o,"text-outline-width":"1px","text-valign":"top"}}),ce=(e,o,t=!1)=>({selector:"node",style:{"background-color":o,"background-height":"75%","background-image":r=>e[r.data("type")],"background-width":"24",label:t?void 0:"data(name)",shape:"round-rectangle"}}),pe=e=>({selector:".activeNode",style:{"background-color":e}}),me=(e,o)=>({selector:"edge",style:{"curve-style":"bezier","line-color":e,"line-opacity":.1,"target-arrow-color":o,"target-arrow-shape":"triangle",width:3}});var F=e=>{let[o,t]=(0,Y.useState)([]);return(0,Ae.useAsyncEffect)(async()=>{let r=e==null?void 0:e.deref();if(r){let n=await E.buildElements(r)??[];t(n)}},[e]),(0,Y.useEffect)(()=>{let r,n;return e&&(0,Ge.isNodeInstance)(e)&&(r=e.on("moduleAttached",async()=>{let s=await E.buildElements(e)??[];t(s)}),n=e.on("moduleDetached",async()=>{let s=await E.buildElements(e)??[];t(s)})),()=>{r==null||r(),n==null||n()}},[e]),o};var k=require("react");var Le=e=>{let{cy:o}=N(!0),[t,r]=(0,k.useState)(),n=(0,k.useCallback)(s=>{s.on("mouseover tap",()=>{r(s)})},[]);return(0,k.useEffect)(()=>{e&&e.nodes().forEach(n)},[n,e]),(0,k.useEffect)(()=>{var s;(s=o==null?void 0:o.deref())==null||s.ready(()=>{var i;(i=o==null?void 0:o.deref())==null||i.nodes().forEach(n)})},[o,n]),[t,r]};var We=require("@xyo-network/react-node"),He=require("react");var ze=e=>{let o=(0,He.useMemo)(()=>{let{address:n}=(e==null?void 0:e.data())??{};return n},[e]),[t]=(0,We.useWeakModuleFromNode)(o);return F(t)};var Z=require("react");var Oe=(e=[],o)=>{let{cy:t}=N(!0),[r,n]=(0,Z.useState)();return(0,Z.useEffect)(()=>{var s,i;if(e.length>1){let a=(s=t==null?void 0:t.deref())==null?void 0:s.add(e);n(a),(i=t==null?void 0:t.deref())==null||i.layout(ie).run()}},[t,o,e]),r};var $e=require("react");var Ue=()=>{let[e,o]=(0,$e.useState)(),{cy:t}=N(!0),r=s=>{var a;let i=(a=t==null?void 0:t.deref())==null?void 0:a.nodes();i==null||i.toggleClass("activeNode",!1),s.toggleClass("activeNode",!0)};return{selectedElement:e,toggleSelectedElement:s=>{var a,l;let i=(l=(a=t==null?void 0:t.deref())==null?void 0:a.nodes(`[id="${s}"]`))==null?void 0:l[0];i&&(o(i),r(i))}}};var ue=e=>{let{selectedElement:o,toggleSelectedElement:t}=Ue(),r=ze(o),n=Oe(r,e),[s,i]=Le(n);return{hoveredNode:s,setHoveredNode:i,toggleSelectedElement:t}};var Ye=require("react");var Ke=require("@mui/material"),Xe=require("react");var Ve=require("@mui/material"),Qe=require("react");var Je=require("react/jsx-runtime"),qe=()=>{let e=(0,Ve.useTheme)();return(0,Qe.useMemo)(()=>{let t=se();return Object.entries(le).reduce((r,[n,s])=>{let i=(0,Je.jsx)(s,{fontSize:"small"});return r[n]=ne(i,e.palette.getContrastText(e.palette.text.primary)),r},t)},[e.palette])};var _=(e=!1)=>{let o=(0,Ke.useTheme)(),t=qe();return(0,Xe.useMemo)(()=>[ce(t,o.palette.primary.main,e),de(o.palette.text.primary,o.palette.getContrastText(o.palette.text.primary)),pe(o.palette.secondary.main),me(o.palette.divider,o.palette.divider)],[t,e,o])};var H=(e,o,t)=>{let r=_(),n=t??W,s=o??r;return(0,Ye.useMemo)(()=>{if(e&&n&&s)return{elements:e,layout:n,style:s}},[e,t,o])};var Ze=require("@xylabs/react-promise"),z=require("react");var fe=(e,o)=>{let{cy:t}=N(),[r,n]=(0,z.useState)(),[s]=(0,Ze.usePromise)(async()=>{if(r===null)return null;let a=e==null?void 0:e.deref();if(r&&a)return await a.resolve(r)??null},[r,e]);return(0,z.useEffect)(()=>{var I;let a=new ResizeObserver(()=>{var h,f;if(r===null)setTimeout(()=>{var d;(d=t==null?void 0:t.deref())==null||d.center()},100);else if(s&&t){let d=(f=(h=t==null?void 0:t.deref())==null?void 0:h.nodes(`[id="${r}"]`))==null?void 0:f[0];setTimeout(()=>{var y;(y=t==null?void 0:t.deref())==null||y.center(d)},100)}}),l=(I=t==null?void 0:t.deref())==null?void 0:I.container();return l&&a.observe(l),()=>{l&&a.unobserve(l)}},[t,r,s,e]),(0,z.useEffect)(()=>{s&&(o==null||o())},[t,r,s,o]),{mod:s,onModuleDetails:a=>{var d,y,D,T,$;let l=(d=t==null?void 0:t.deref())==null?void 0:d.nodes(`[id="${a}"]`),I=(D=t==null?void 0:t.deref())==null?void 0:D.nodes(`[id="${(y=e==null?void 0:e.deref())==null?void 0:y.address}"]`),h=(T=t==null?void 0:t.deref())==null?void 0:T.nodes(`[id="${s==null?void 0:s.address}"]`),f=($=t==null?void 0:t.deref())==null?void 0:$.nodes(`[id != "${a}"]`);if(a)l==null||l.toggleClass("activeNode",!0),f==null||f.toggleClass("activeNode",!1);else{f==null||f.toggleClass("activeNode",!1);let M=h!=null&&h.length?h:I;M==null||M.toggleClass("activeNode",!0)}n(a)}}};var _e=require("react");var Ce=e=>{let[o,t]=(0,_e.useState)(!0),r=()=>{t(a=>!a)},n=F(e),s=_(o),i=H(n,s,W);return{handleToggleLabels:r,hideLabels:o,options:i}};var O=v(require("cytoscape"),1),je=v(require("cytoscape-cola"),1),et=v(require("cytoscape-cose-bilkent"),1),tt=v(require("cytoscape-dagre"),1),ot=v(require("cytoscape-euler"),1),j=require("react"),ee=require("react/jsx-runtime"),rt=({children:e})=>{let[o,t]=(0,j.useState)(!1);return(0,j.useEffect)(()=>{O.default.use(je.default),O.default.use(tt.default),O.default.use(et.default),O.default.use(ot.default),t(!0)},[]),(0,ee.jsx)(ee.Fragment,{children:o?e:void 0})};var m=require("@mui/material"),ge=require("@xylabs/hex"),b=require("@xylabs/react-flexbox"),st=require("@xylabs/react-identicon"),it=require("@xyo-network/react-node"),A=v(require("cytoscape"),1),at=v(require("cytoscape-cola"),1),lt=v(require("cytoscape-cose-bilkent"),1),dt=v(require("cytoscape-dagre"),1),ct=v(require("cytoscape-euler"),1),g=require("react"),p=require("react/jsx-runtime"),nt=(e,o="cola",t)=>{e==null||e.layout({name:o,...t}).run()},Gt=(e="cola")=>{switch(e){case"dagre":{A.default.use(dt.default);break}case"euler":{A.default.use(ct.default);break}case"cose-bilkent":{A.default.use(lt.default);break}case"cola":{A.default.use(at.default);break}}},Lt=({name:e,address:o,...t})=>(0,p.jsx)(m.Card,{elevation:3,...t,children:(0,p.jsx)(m.CardHeader,{avatar:(0,p.jsx)(m.Paper,{elevation:6,sx:{bgcolor:"#fff",p:1},children:(0,p.jsx)(st.Identicon,{value:o,size:24})}),title:e,subheader:o})}),B=(0,g.forwardRef)(({actions:e,children:o,node:t,layout:r,layoutOptions:n,showDetails:s,detail:i,options:a,onHover:l,...I},h)=>{var ye;let f=(0,m.useTheme)(),[d,y]=(0,g.useState)(),D=(0,g.useRef)(),[T,$]=(0,g.useState)(),[M,he]=(0,g.useState)(),[oe]=(0,it.useWeakModuleFromNode)(M,{node:t});(0,g.useEffect)(()=>{d==null||d.on("mouseover tap",({target:w})=>{var ve,Ie;let x=w,Pt=(ve=x==null?void 0:x.renderedBoundingBox)==null?void 0:ve.call(x);$(Pt);let U=(Ie=x.id)==null?void 0:Ie.call(x);U&&(U.includes("/")?(he(void 0),l==null||l()):(he((0,ge.asAddress)(U)),l==null||l((0,ge.asAddress)(U))))})},[l,d]);let xe=()=>{d==null||d.reset(),nt(d,r??"euler",n)};return(0,g.useEffect)(()=>{let w,x=D.current;return x&&(w=(0,A.default)({container:x,...a}),y(w)),()=>{w==null||w.destroy(),y(void 0)}},[a,D,n]),(0,g.useEffect)(()=>{d&&(Gt(r),nt(d,r??"euler",n))},[d,n,r]),(0,p.jsxs)(b.FlexCol,{id:"relational-graph-wrapper",ref:h,...I,children:[M&&T?(0,p.jsx)(m.Box,{position:"absolute",top:T.y1,left:T.x1,zIndex:100,children:(0,p.jsx)(Lt,{address:M,name:((ye=oe==null?void 0:oe.deref())==null?void 0:ye.id)??"Unknown"})}):null,(0,p.jsx)(b.FlexRow,{justifyContent:"start",width:"100%",children:e===null?null:e?(0,p.jsxs)(m.ButtonGroup,{children:[e,(0,p.jsx)(m.Button,{size:"small",variant:"contained",onClick:xe,children:"Reset View"})]}):(0,p.jsx)(m.Button,{size:"small",variant:"contained",onClick:xe,children:"Reset"})}),(0,p.jsxs)(b.FlexGrowRow,{width:"100%",alignItems:"start",children:[s?(0,p.jsx)(b.FlexCol,{height:"100%",width:"85%",children:i}):null,(0,p.jsxs)(b.FlexCol,{justifyContent:"start",classes:"cytoscape-wrap",width:s?"15%":"100%",height:s?"50%":"100%",border:s?`1px solid ${f.palette.divider}`:void 0,children:[(0,p.jsx)(b.FlexCol,{alignItems:"stretch",position:"absolute",width:"100%",height:"100%",ref:D}),o]})]})]})});B.displayName="NodeRelationalGraph";var Wt=B;var pt=require("@xyo-network/react-node");var mt=require("react/jsx-runtime"),Ht=({node:e,...o})=>{let[t]=(0,pt.useWeakProvidedNode)(),r=F(e??t),n=H(r);return(0,mt.jsx)(B,{alignItems:"stretch",flexGrow:1,height:"100%",options:n,...o})};var ut=require("@mui/icons-material"),ft=require("@mui/material"),te=require("@xylabs/react-flexbox"),G=require("react/jsx-runtime"),Ct=({children:e,onClose:o})=>(0,G.jsxs)(te.FlexGrowCol,{alignItems:"end",justifyContent:"start",id:"module-detail",width:"100%",p:2,gap:2,children:[(0,G.jsx)(te.FlexRow,{justifyContent:"end",children:(0,G.jsx)(ft.IconButton,{onClick:o,size:"small",children:(0,G.jsx)(ut.CancelRounded,{})})}),e]});var ht=require("@mui/material"),xt=require("@xylabs/react-flexbox");var R=require("react"),gt=e=>{let o=(0,R.useRef)(null),[t,r]=(0,R.useState)(null),[n,s]=(0,R.useState)(e==null?void 0:e.renderedBoundingBox());return(0,R.useEffect)(()=>{r(null)},[e]),(0,R.useEffect)(()=>{e&&s(e.renderedBoundingBox());let i=()=>{s(e==null?void 0:e.renderedBoundingBox())};return e==null||e.on("position",i),()=>{e==null||e.off("position",void 0,i)}},[e]),(0,R.useEffect)(()=>{r(o.current)},[n]),{boundingBox:n,currentElement:t,ref:o}};var S=require("react/jsx-runtime"),yt=({children:e,node:o})=>{let{boundingBox:t,ref:r,currentElement:n}=gt(o);return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(zt,{ref:r,left:t==null?void 0:t.x1,height:t==null?void 0:t.h,top:t==null?void 0:t.y1,width:t==null?void 0:t.w}),o?(0,S.jsx)(S.Fragment,{children:e==null?void 0:e(n)}):null]})},zt=(0,ht.styled)(xt.FlexCol,{name:"StyledNodeGhostElementFlexCol"})(()=>({cursor:"pointer",pointerEvents:"none",position:"absolute"}));var vt=require("@mui/icons-material"),c=require("@mui/material"),It=require("@xylabs/react-identicon"),u=require("react/jsx-runtime"),Ot=({anchorEl:e,onClose:o,onModuleDetails:t,onModuleExplore:r,node:n,...s})=>{let{address:i,name:a}=(n==null?void 0:n.data())??{};return(0,u.jsx)(u.Fragment,{children:e?(0,u.jsx)(c.Popper,{anchorEl:e,...s,children:(0,u.jsxs)(c.Card,{elevation:3,children:[(0,u.jsx)(c.CardHeader,{action:o?(0,u.jsx)(c.IconButton,{size:"small",onClick:o,children:(0,u.jsx)(vt.CancelRounded,{})}):null,avatar:(0,u.jsx)(c.Paper,{elevation:6,sx:{bgcolor:"#fff",p:1},children:(0,u.jsx)(It.Identicon,{value:i,size:24})}),title:a,subheader:i}),(0,u.jsxs)($t,{children:[t?(0,u.jsx)(c.Button,{onClick:()=>t==null?void 0:t(i),size:"small",variant:"contained",children:"Details"}):null,r?(0,u.jsx)(c.Button,{onClick:()=>r==null?void 0:r(i),size:"small",variant:"contained",children:"Explore"}):null]})]})}):null})},Nt=(0,c.styled)(Ot,{name:"StyledComponents"})(()=>({zIndex:2})),$t=(0,c.styled)(c.CardActions,{name:"StyledCardActions"})(()=>({display:"flex",justifyContent:"center"}));var P=require("react/jsx-runtime"),Rt=({hideActions:e,rootModule:o,disableModuleDetails:t,...r})=>{let n=(0,bt.useRef)(null),{handleToggleLabels:s,hideLabels:i,options:a}=Ce(o??void 0),{hoveredNode:l,setHoveredNode:I,toggleSelectedElement:h}=ue(i),{mod:f,onModuleDetails:d}=fe(o,()=>I(void 0));return(0,P.jsx)(rt,{children:(0,P.jsx)(B,{actions:f||e?null:(0,P.jsx)(Et.Button,{size:"small",onClick:s,variant:"contained",children:"Toggle Labels"}),showDetails:!!f,detail:(0,P.jsx)(Ct,{onClose:()=>d(null)}),options:a,ref:n,width:"100%",...r,children:(0,P.jsx)(yt,{node:l,children:y=>(0,P.jsx)(Nt,{anchorEl:y,container:n.current,node:l,onClose:()=>I(void 0),onModuleExplore:h,onModuleDetails:t?void 0:d,placement:"top",open:!0})})})})},Ut=e=>(0,P.jsx)(re,{children:(0,P.jsx)(Rt,{...e})});0&&(module.exports={ColaLayout,ConcentricLayout,CyIconSet,CytoscapeElements,CytoscapeInstanceContext,CytoscapeInstanceProvider,EdgeStyled,ModuleCardParser,ModuleGraphFlexBox,ModuleGraphFlexBoxWithProvider,Node,NodeAsRoot,NodeRelationalGraph,NodeRelationalGraphFlexBox,NodeWithName,ProvidedNodeRenderer,encodeSvg,generateIconMap,parseModuleType,useCytoscapeElements,useCytoscapeInstance,useCytoscapeOptions,useElements,useModuleDetails,useRelationalGraphOptions});
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ColaLayout: () => ColaLayout,
+  ConcentricLayout: () => ConcentricLayout,
+  CyIconSet: () => CyIconSet,
+  CytoscapeElements: () => CytoscapeElements,
+  CytoscapeInstanceContext: () => CytoscapeInstanceContext,
+  CytoscapeInstanceProvider: () => CytoscapeInstanceProvider,
+  EdgeStyled: () => EdgeStyled,
+  ModuleCardParser: () => ModuleCardParser,
+  ModuleGraphFlexBox: () => ModuleGraphFlexBox,
+  ModuleGraphFlexBoxWithProvider: () => ModuleGraphFlexBoxWithProvider,
+  Node: () => Node,
+  NodeAsRoot: () => NodeAsRoot,
+  NodeRelationalGraph: () => NodeRelationalGraph,
+  NodeRelationalGraphFlexBox: () => NodeRelationalGraphFlexBox,
+  NodeWithName: () => NodeWithName,
+  ProvidedNodeRenderer: () => ProvidedNodeRenderer,
+  encodeSvg: () => encodeSvg,
+  generateIconMap: () => generateIconMap,
+  parseModuleType: () => parseModuleType,
+  useCytoscapeElements: () => useCytoscapeElements,
+  useCytoscapeInstance: () => useCytoscapeInstance,
+  useCytoscapeOptions: () => useCytoscapeOptions,
+  useElements: () => useElements,
+  useModuleDetails: () => useModuleDetails,
+  useRelationalGraphOptions: () => useRelationalGraphOptions
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/module/CardParser.tsx
+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 }) => {
+  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) });
+    }
+    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) });
+    }
+    default: {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_module.ModuleCard, { mod });
+    }
+  }
+};
+
+// src/components/module/graph/GraphFlexBox.tsx
+var import_material7 = require("@mui/material");
+var import_react15 = 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_runtime2 = 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_runtime2.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/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");
+
+// src/Cytoscape/CytoscapeElements.ts
+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) => {
+  const svgString = (0, import_server.renderToStaticMarkup)(reactElement);
+  const doc = new DOMParser().parseFromString(svgString, "text/html");
+  const svgElement = doc.querySelectorAll("svg")[0];
+  if (svgElement) {
+    svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgElement.setAttribute("height", "100");
+    svgElement.style.fill = color ?? "black";
+  }
+  return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`;
+};
+
+// src/Cytoscape/lib/iconMap.ts
+var generateIconMap = () => ({
+  archivist: "",
+  bridge: "",
+  diviner: "",
+  // eslint-disable-next-line id-denylist
+  module: "",
+  node: "",
+  sentinel: "",
+  witness: ""
+});
+
+// src/Cytoscape/lib/layout/ColaLayout.ts
+var ColaLayout = {
+  centerGraph: false,
+  convergenceThreshold: 0.01,
+  name: "cola"
+};
+
+// src/Cytoscape/lib/layout/ConcentricLayout.ts
+var ConcentricLayout = {
+  concentric: function(node) {
+    return node.degree(false);
+  },
+  levelWidth: function() {
+    return 2;
+  },
+  minNodeSpacing: 75,
+  name: "concentric"
+};
+
+// src/Cytoscape/lib/parseModuleType.ts
+var import_archivist_model2 = require("@xyo-network/archivist-model");
+var import_bridge_model = require("@xyo-network/bridge-model");
+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) => {
+  let type = "module";
+  if (mod) {
+    if ((0, import_archivist_model2.isArchivistInstance)(mod)) {
+      type = "archivist";
+    } else if ((0, import_bridge_model.isBridgeInstance)(mod)) {
+      type = "bridge";
+    } else if ((0, import_diviner_model2.isDivinerInstance)(mod)) {
+      type = "diviner";
+    } else if ((0, import_node_model.isNodeInstance)(mod)) {
+      type = "node";
+    } else if ((0, import_sentinel_model.isSentinelInstance)(mod)) {
+      type = "sentinel";
+    } else if ((0, import_witness_model.isWitnessModule)(mod)) {
+      type = "witness";
+    } else {
+      type = "module";
+    }
+  }
+  return type;
+};
+
+// src/Cytoscape/CytoscapeElements.ts
+var CytoscapeElements = {
+  MaxNameLength: 20,
+  buildEdge(rootNode, newNode, properties) {
+    return {
+      data: {
+        id: `${rootNode.data.id}/${newNode.data.id}`,
+        source: rootNode.data.id,
+        target: newNode.data.id,
+        ...properties
+      }
+    };
+  },
+  async buildElements(mod) {
+    const info = await CytoscapeElements.recurseNodes(mod);
+    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];
+    if (newEdge) {
+      newElements.push(newEdge);
+    }
+    for (const childInfo of info.children) {
+      newElements.push(...await this.buildElementsFromInfo(childInfo, newNode));
+    }
+    return newElements;
+  },
+  buildNode(mod, properties, classes) {
+    const { address, id } = mod;
+    return {
+      classes,
+      data: {
+        address,
+        id: address,
+        name: id,
+        type: parseModuleType(mod),
+        ...properties
+      }
+    };
+  },
+  buildRootNode: (mod) => {
+    return CytoscapeElements.buildNode(mod, {}, ["activeNode"]);
+  },
+  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 };
+    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);
+    }
+    return info;
+  }
+};
+
+// src/Cytoscape/CytoscapeIcons.tsx
+var import_icons_material = require("@mui/icons-material");
+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,
+  witness: import_icons_material.VisibilityRounded
+};
+
+// src/Cytoscape/CytoscapeStyles.ts
+var NodeWithName = (color, outlineColor) => ({
+  selector: "node[name]",
+  style: {
+    color,
+    "font-family": "Lexend Deca, Helvetica, sans-serif",
+    "font-size": 12,
+    "overlay-padding": "6px",
+    "text-halign": "center",
+    "text-outline-color": outlineColor,
+    "text-outline-width": "1px",
+    "text-valign": "top"
+  }
+});
+var Node = (icons, bgColor, hideLabels = false) => ({
+  selector: "node",
+  style: {
+    "background-color": bgColor,
+    "background-height": "75%",
+    "background-image": (elem) => icons[elem.data("type")],
+    "background-width": "24",
+    label: hideLabels ? void 0 : "data(name)",
+    shape: "round-rectangle"
+  }
+});
+var NodeAsRoot = (bgColor) => ({
+  selector: ".activeNode",
+  style: {
+    "background-color": bgColor
+  }
+});
+var EdgeStyled = (lineColor, targetArrowColor) => ({
+  selector: "edge",
+  style: {
+    "curve-style": "bezier",
+    "line-color": lineColor,
+    "line-opacity": 0.1,
+    "target-arrow-color": targetArrowColor,
+    "target-arrow-shape": "triangle",
+    width: 3
+  }
+});
+
+// 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 == null ? void 0 : mod.deref();
+      if (moduleInstance) {
+        const newElements = await CytoscapeElements.buildElements(moduleInstance) ?? [];
+        setElements(newElements);
+      }
+    },
+    [mod]
+  );
+  (0, import_react2.useEffect)(() => {
+    let attachedListener;
+    let detachedListener;
+    if (mod && (0, import_node_model2.isNodeInstance)(mod)) {
+      attachedListener = mod.on("moduleAttached", async () => {
+        const newElements = await CytoscapeElements.buildElements(mod) ?? [];
+        setElements(newElements);
+      });
+      detachedListener = mod.on("moduleDetached", async () => {
+        const newElements = await CytoscapeElements.buildElements(mod) ?? [];
+        setElements(newElements);
+      });
+    }
+    return () => {
+      attachedListener == null ? void 0 : attachedListener();
+      detachedListener == null ? void 0 : detachedListener();
+    };
+  }, [mod]);
+  return elements;
+};
+
+// src/hooks/cytoscape/elements/useHoveredNode.tsx
+var import_react3 = require("react");
+var useHoveredNode = (renderedElements) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [hoveredNode, setHoveredNode] = (0, import_react3.useState)();
+  const nodeListener = (0, import_react3.useCallback)((node) => {
+    node.on("mouseover tap", () => {
+      setHoveredNode(node);
+    });
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (renderedElements) {
+      renderedElements.nodes().forEach(nodeListener);
+    }
+  }, [nodeListener, renderedElements]);
+  (0, import_react3.useEffect)(() => {
+    var _a;
+    (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.ready(() => {
+      var _a2;
+      (_a2 = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a2.nodes().forEach(nodeListener);
+    });
+  }, [cy, nodeListener]);
+  return [hoveredNode, setHoveredNode];
+};
+
+// 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)(() => {
+    const { address: selectedAddress2 } = (selectedElement == null ? void 0 : selectedElement.data()) ?? {};
+    return selectedAddress2;
+  }, [selectedElement]);
+  const [mod] = (0, import_react_node.useWeakModuleFromNode)(selectedAddress);
+  const newElements = useCytoscapeElements(mod);
+  return newElements;
+};
+
+// src/hooks/cytoscape/elements/useRenderNewElements.tsx
+var import_react5 = require("react");
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = (0, import_react5.useState)();
+  (0, import_react5.useEffect)(() => {
+    var _a, _b;
+    if (newElements.length > 1) {
+      const renderedElements2 = (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.add(newElements);
+      setRenderedElements(renderedElements2);
+      (_b = cy == null ? void 0 : cy.deref()) == null ? void 0 : _b.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+
+// src/hooks/cytoscape/elements/useSelectedElement.tsx
+var import_react6 = require("react");
+var useSelectedElement = () => {
+  const [selectedElement, setSelectedElement] = (0, import_react6.useState)();
+  const { cy } = useCytoscapeInstance(true);
+  const updateStyles = (element) => {
+    var _a;
+    const nodes = (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.nodes();
+    nodes == null ? void 0 : nodes.toggleClass("activeNode", false);
+    element.toggleClass("activeNode", true);
+  };
+  const toggleSelectedElement = (address) => {
+    var _a, _b;
+    const selectedNode = (_b = (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.nodes(`[id="${address}"]`)) == null ? void 0 : _b[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_react9 = require("react");
+
+// src/hooks/cytoscape/useCytoscapeStyle.tsx
+var import_material2 = require("@mui/material");
+var import_react8 = 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 = () => {
+  const theme = (0, import_material.useTheme)();
+  const icons = (0, import_react7.useMemo)(() => {
+    const iconMap = generateIconMap();
+    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
+      const icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, { fontSize: "small" });
+      acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
+      return acc;
+    }, iconMap);
+  }, [theme.palette]);
+  return icons;
+};
+
+// src/hooks/cytoscape/useCytoscapeStyle.tsx
+var useCytoscapeStyle = (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]
+  );
+  return style;
+};
+
+// src/hooks/cytoscape/useCytoscapeOptions.ts
+var useCytoscapeOptions = (elements, style, layout) => {
+  const defaultStyle = useCytoscapeStyle();
+  const resolvedLayout = layout ?? ConcentricLayout;
+  const resolvedStyle = style ?? defaultStyle;
+  const options = (0, import_react9.useMemo)(() => {
+    if (elements && resolvedLayout && resolvedStyle) {
+      return {
+        elements,
+        layout: resolvedLayout,
+        style: resolvedStyle
+      };
+    }
+  }, [elements, layout, style]);
+  return options;
+};
+
+// src/hooks/cytoscape/useModuleDetails.tsx
+var import_react_promise = require("@xylabs/react-promise");
+var import_react10 = require("react");
+var useModuleDetails = (rootModule, onFoundModule) => {
+  const { cy } = useCytoscapeInstance();
+  const [moduleAddress, setModuleAddress] = (0, import_react10.useState)();
+  const [foundModule] = (0, import_react_promise.usePromise)(async () => {
+    if (moduleAddress === null) return null;
+    const rootModuleInstance = rootModule == null ? void 0 : rootModule.deref();
+    if (moduleAddress && rootModuleInstance) {
+      const foundModule2 = await rootModuleInstance.resolve(moduleAddress);
+      return foundModule2 ?? null;
+    }
+  }, [moduleAddress, rootModule]);
+  (0, import_react10.useEffect)(() => {
+    var _a;
+    const resizeObserver = new ResizeObserver(() => {
+      var _a2, _b;
+      if (moduleAddress === null) {
+        setTimeout(() => {
+          var _a3;
+          (_a3 = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a3.center();
+        }, 100);
+      } else if (foundModule && cy) {
+        const node = (_b = (_a2 = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a2.nodes(`[id="${moduleAddress}"]`)) == null ? void 0 : _b[0];
+        setTimeout(() => {
+          var _a3;
+          (_a3 = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a3.center(node);
+        }, 100);
+      }
+    });
+    const container = (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.container();
+    if (container) {
+      resizeObserver.observe(container);
+    }
+    return () => {
+      if (container) resizeObserver.unobserve(container);
+    };
+  }, [cy, moduleAddress, foundModule, rootModule]);
+  (0, import_react10.useEffect)(() => {
+    if (foundModule) {
+      onFoundModule == null ? void 0 : onFoundModule();
+    }
+  }, [cy, moduleAddress, foundModule, onFoundModule]);
+  const onModuleDetails = (address) => {
+    var _a, _b, _c, _d, _e;
+    const moduleNode = (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.nodes(`[id="${address}"]`);
+    const rootModuleNode = (_c = cy == null ? void 0 : cy.deref()) == null ? void 0 : _c.nodes(`[id="${(_b = rootModule == null ? void 0 : rootModule.deref()) == null ? void 0 : _b.address}"]`);
+    const foundModuleNode = (_d = cy == null ? void 0 : cy.deref()) == null ? void 0 : _d.nodes(`[id="${foundModule == null ? void 0 : foundModule.address}"]`);
+    const notModuleNode = (_e = cy == null ? void 0 : cy.deref()) == null ? void 0 : _e.nodes(`[id != "${address}"]`);
+    if (address) {
+      moduleNode == null ? void 0 : moduleNode.toggleClass("activeNode", true);
+      notModuleNode == null ? void 0 : notModuleNode.toggleClass("activeNode", false);
+    } else {
+      notModuleNode == null ? void 0 : notModuleNode.toggleClass("activeNode", false);
+      const activeNode = (foundModuleNode == null ? void 0 : foundModuleNode.length) ? foundModuleNode : rootModuleNode;
+      activeNode == null ? void 0 : activeNode.toggleClass("activeNode", true);
+    }
+    setModuleAddress(address);
+  };
+  return { mod: foundModule, onModuleDetails };
+};
+
+// src/hooks/cytoscape/useRelationalGraphOptions.tsx
+var import_react11 = require("react");
+var useRelationalGraphOptions = (mod) => {
+  const [hideLabels, setHideLabels] = (0, import_react11.useState)(true);
+  const handleToggleLabels = () => {
+    setHideLabels((oldValue) => !oldValue);
+  };
+  const elements = useCytoscapeElements(mod);
+  const style = useCytoscapeStyle(hideLabels);
+  const options = useCytoscapeOptions(elements, style, ConcentricLayout);
+  return { handleToggleLabels, hideLabels, options };
+};
+
+// src/components/cytoscape-extensions/WithExtensions.tsx
+var import_cytoscape = __toESM(require("cytoscape"), 1);
+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)(() => {
+    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 });
+};
+
+// src/components/relational/graph/Graph.tsx
+var import_material3 = require("@mui/material");
+var import_hex = require("@xylabs/hex");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_identicon = require("@xylabs/react-identicon");
+var import_react_node2 = require("@xyo-network/react-node");
+var import_cytoscape2 = __toESM(require("cytoscape"), 1);
+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 == null ? void 0 : cy.layout({ name, ...options }).run();
+};
+var loadLayout = (layout = "cola") => {
+  switch (layout) {
+    case "dagre": {
+      import_cytoscape2.default.use(import_cytoscape_dagre2.default);
+      break;
+    }
+    case "euler": {
+      import_cytoscape2.default.use(import_cytoscape_euler2.default);
+      break;
+    }
+    case "cose-bilkent": {
+      import_cytoscape2.default.use(import_cytoscape_cose_bilkent2.default);
+      break;
+    }
+    case "cola": {
+      import_cytoscape2.default.use(import_cytoscape_cola2.default);
+      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) => {
+    var _a;
+    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 == null ? void 0 : cy.on("mouseover tap", ({ target }) => {
+        var _a2, _b;
+        const cyNode = target;
+        const bb = (_a2 = cyNode == null ? void 0 : cyNode.renderedBoundingBox) == null ? void 0 : _a2.call(cyNode);
+        setHoverBoundingBox(bb);
+        const id = (_b = cyNode.id) == null ? void 0 : _b.call(cyNode);
+        if (id) {
+          if (id.includes("/")) {
+            setHoverAddress(void 0);
+            onHover == null ? void 0 : onHover();
+          } else {
+            setHoverAddress((0, import_hex.asAddress)(id));
+            onHover == null ? void 0 : onHover((0, import_hex.asAddress)(id));
+          }
+        }
+      });
+    }, [onHover, cy]);
+    const handleReset = () => {
+      cy == null ? void 0 : cy.reset();
+      applyLayout(cy, layout ?? "euler", layoutOptions);
+    };
+    (0, import_react13.useEffect)(() => {
+      let newCy;
+      const container = cytoscapeRef.current;
+      if (container) {
+        newCy = (0, import_cytoscape2.default)({
+          container,
+          ...options
+        });
+        setCy(newCy);
+      }
+      return () => {
+        newCy == null ? void 0 : 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: ((_a = moduleInstance == null ? void 0 : moduleInstance.deref()) == null ? void 0 : _a.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
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+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 }) => {
+  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 });
+};
+
+// 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
+  ] });
+};
+
+// src/components/module/graph/node/Hover.tsx
+var import_material5 = require("@mui/material");
+var import_react_flexbox3 = require("@xylabs/react-flexbox");
+
+// 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 == null ? void 0 : node.renderedBoundingBox());
+  (0, import_react14.useEffect)(() => {
+    setCurrentElement(null);
+  }, [node]);
+  (0, import_react14.useEffect)(() => {
+    if (node) {
+      setBoundingBox(node.renderedBoundingBox());
+    }
+    const listener = () => {
+      setBoundingBox(node == null ? void 0 : node.renderedBoundingBox());
+    };
+    node == null ? void 0 : node.on("position", listener);
+    return () => {
+      node == null ? void 0 : node.off("position", void 0, listener);
+    };
+  }, [node]);
+  (0, import_react14.useEffect)(() => {
+    setCurrentElement(ref.current);
+  }, [boundingBox]);
+  return { boundingBox, currentElement, ref };
+};
+
+// src/components/module/graph/node/Hover.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ModuleGraphNodeHover = ({ 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 == null ? void 0 : boundingBox.x1, height: boundingBox == null ? void 0 : boundingBox.h, top: boundingBox == null ? void 0 : boundingBox.y1, width: boundingBox == null ? void 0 : boundingBox.w }),
+    node ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: children == null ? void 0 : children(currentElement) }) : null
+  ] });
+};
+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"
+}));
+
+// src/components/module/graph/Popper.tsx
+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 }) => {
+  const { address, name } = (node == null ? void 0 : 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
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(StyledCardActions, { children: [
+      onModuleDetails ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Button, { onClick: () => onModuleDetails == null ? void 0 : onModuleDetails(address), size: "small", variant: "contained", children: "Details" }) : null,
+      onModuleExplore ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Button, { onClick: () => onModuleExplore == null ? void 0 : onModuleExplore(address), size: "small", variant: "contained", children: "Explore" }) : null
+    ] })
+  ] }) }) : null });
+};
+var StyledModuleHoverPopper = (0, import_material6.styled)(ModuleHoverPopper, { name: "StyledComponents" })(() => ({
+  zIndex: 2
+}));
+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);
+  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 }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColaLayout,
+  ConcentricLayout,
+  CyIconSet,
+  CytoscapeElements,
+  CytoscapeInstanceContext,
+  CytoscapeInstanceProvider,
+  EdgeStyled,
+  ModuleCardParser,
+  ModuleGraphFlexBox,
+  ModuleGraphFlexBoxWithProvider,
+  Node,
+  NodeAsRoot,
+  NodeRelationalGraph,
+  NodeRelationalGraphFlexBox,
+  NodeWithName,
+  ProvidedNodeRenderer,
+  encodeSvg,
+  generateIconMap,
+  parseModuleType,
+  useCytoscapeElements,
+  useCytoscapeInstance,
+  useCytoscapeOptions,
+  useElements,
+  useModuleDetails,
+  useRelationalGraphOptions
+});
 //# sourceMappingURL=index.cjs.map