@xyo-network/react-node-renderer 2.75.7 → 2.76.1

package/dist/neutral/index.js

@@ -0,0 +1,817 @@
+// 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 = ({ mod }) => {
+  switch (true) {
+    case isArchivistInstance(mod): {
+      return /* @__PURE__ */ jsx(ArchivistCard, { mod: asArchivistInstance(mod) });
+    }
+    case isDivinerInstance(mod): {
+      return /* @__PURE__ */ jsx(DivinerCard, { mod: asDivinerInstance(mod) });
+    }
+    default: {
+      return /* @__PURE__ */ jsx(ModuleCard, { mod });
+    }
+  }
+};
+
+// src/components/module/graph/GraphFlexBox.tsx
+import { Button as Button3 } from "@mui/material";
+import { useRef as useRef3 } from "react";
+
+// src/contexts/CytoscapeInstance/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CytoscapeInstanceContext = createContextEx();
+
+// src/contexts/CytoscapeInstance/Provider.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
+  const [cy, setCy] = useState(defaultInstance);
+  useEffect(() => {
+    setCy(defaultInstance);
+  }, [defaultInstance]);
+  return /* @__PURE__ */ jsx2(CytoscapeInstanceContext.Provider, { value: { cy, provided: true, setCy }, children });
+};
+
+// src/contexts/CytoscapeInstance/use.ts
+import { useContextEx } from "@xyo-network/react-shared";
+var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/hooks/cytoscape/elements/useCytoscapeElements.ts
+import { useAsyncEffect } from "@xylabs/react-async-effect";
+import { isNodeInstance as isNodeInstance2 } from "@xyo-network/node-model";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/Cytoscape/CytoscapeElements.ts
+import { exists } from "@xylabs/exists";
+
+// src/Cytoscape/lib/encodeSvg.ts
+import { renderToStaticMarkup } from "react-dom/server";
+var dataUri = "data:image/svg+xml,";
+var encodeSvg = (reactElement, color) => {
+  const svgString = 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();
+  },
+  levelWidth: function() {
+    return 2;
+  },
+  minNodeSpacing: 75,
+  name: "concentric"
+};
+
+// src/Cytoscape/lib/parseModuleType.ts
+import { isArchivistInstance as isArchivistInstance2 } from "@xyo-network/archivist-model";
+import { isBridgeInstance } from "@xyo-network/bridge-model";
+import { isDivinerInstance as isDivinerInstance2 } from "@xyo-network/diviner-model";
+import { isNodeInstance } from "@xyo-network/node-model";
+import { isSentinelInstance } from "@xyo-network/sentinel-model";
+import { isWitnessModule } from "@xyo-network/witness-model";
+var parseModuleType = (mod) => {
+  let type = "module";
+  if (mod) {
+    if (isArchivistInstance2(mod)) {
+      type = "archivist";
+    } else if (isBridgeInstance(mod)) {
+      type = "bridge";
+    } else if (isDivinerInstance2(mod)) {
+      type = "diviner";
+    } else if (isNodeInstance(mod)) {
+      type = "node";
+    } else if (isSentinelInstance(mod)) {
+      type = "sentinel";
+    } else if (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(exists);
+    }
+    return info;
+  }
+};
+
+// src/Cytoscape/CytoscapeIcons.tsx
+import {
+  BubbleChartRounded as BubbleChartRoundedIcon,
+  Hub as HubIcon,
+  InsertLinkRounded as InsertLinkRoundedIcon,
+  Inventory2Rounded as Inventory2RoundedIcon,
+  QuestionMarkRounded as QuestionMarkRoundedIcon,
+  TimerRounded as TimerRoundedIcon,
+  VisibilityRounded as VisibilityRoundedIcon
+} from "@mui/icons-material";
+var CyIconSet = {
+  archivist: Inventory2RoundedIcon,
+  bridge: InsertLinkRoundedIcon,
+  diviner: BubbleChartRoundedIcon,
+  // eslint-disable-next-line id-denylist
+  module: QuestionMarkRoundedIcon,
+  node: HubIcon,
+  sentinel: TimerRoundedIcon,
+  witness: VisibilityRoundedIcon
+};
+
+// 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] = useState2([]);
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      const moduleInstance = mod?.deref();
+      if (moduleInstance) {
+        const newElements = await CytoscapeElements.buildElements(moduleInstance) ?? [];
+        setElements(newElements);
+      }
+    },
+    [mod]
+  );
+  useEffect2(() => {
+    let attachedListener;
+    let detachedListener;
+    if (mod && isNodeInstance2(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?.();
+      detachedListener?.();
+    };
+  }, [mod]);
+  return elements;
+};
+
+// src/hooks/cytoscape/elements/useHoveredNode.tsx
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
+var useHoveredNode = (renderedElements) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [hoveredNode, setHoveredNode] = useState3();
+  const nodeListener = useCallback((node) => {
+    node.on("mouseover tap", () => {
+      setHoveredNode(node);
+    });
+  }, []);
+  useEffect3(() => {
+    if (renderedElements) {
+      renderedElements.nodes().forEach(nodeListener);
+    }
+  }, [nodeListener, renderedElements]);
+  useEffect3(() => {
+    cy?.deref()?.ready(() => {
+      cy?.deref()?.nodes().forEach(nodeListener);
+    });
+  }, [cy, nodeListener]);
+  return [hoveredNode, setHoveredNode];
+};
+
+// src/hooks/cytoscape/elements/useNewElements.tsx
+import { useWeakModuleFromNode } from "@xyo-network/react-node";
+import { useMemo } from "react";
+var useNewElements = (selectedElement) => {
+  const selectedAddress = useMemo(() => {
+    const { address: selectedAddress2 } = selectedElement?.data() ?? {};
+    return selectedAddress2;
+  }, [selectedElement]);
+  const [mod] = useWeakModuleFromNode(selectedAddress);
+  const newElements = useCytoscapeElements(mod);
+  return newElements;
+};
+
+// src/hooks/cytoscape/elements/useRenderNewElements.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = useState4();
+  useEffect4(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy?.deref()?.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy?.deref()?.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+
+// src/hooks/cytoscape/elements/useSelectedElement.tsx
+import { useState as useState5 } from "react";
+var useSelectedElement = () => {
+  const [selectedElement, setSelectedElement] = useState5();
+  const { cy } = useCytoscapeInstance(true);
+  const updateStyles = (element) => {
+    const nodes = cy?.deref()?.nodes();
+    nodes?.toggleClass("activeNode", false);
+    element.toggleClass("activeNode", true);
+  };
+  const toggleSelectedElement = (address) => {
+    const selectedNode = cy?.deref()?.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
+import { useMemo as useMemo4 } from "react";
+
+// src/hooks/cytoscape/useCytoscapeStyle.tsx
+import { useTheme as useTheme2 } from "@mui/material";
+import { useMemo as useMemo3 } from "react";
+
+// src/hooks/cytoscape/useIcons.tsx
+import { useTheme } from "@mui/material";
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var useIcons = () => {
+  const theme = useTheme();
+  const icons = useMemo2(() => {
+    const iconMap = generateIconMap();
+    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
+      const icon = /* @__PURE__ */ jsx3(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 = useTheme2();
+  const icons = useIcons();
+  const style = useMemo3(
+    () => [
+      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 = useMemo4(() => {
+    if (elements && resolvedLayout && resolvedStyle) {
+      return {
+        elements,
+        layout: resolvedLayout,
+        style: resolvedStyle
+      };
+    }
+  }, [elements, layout, style]);
+  return options;
+};
+
+// src/hooks/cytoscape/useModuleDetails.tsx
+import { usePromise } from "@xylabs/react-promise";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+var useModuleDetails = (rootModule, onFoundModule) => {
+  const { cy } = useCytoscapeInstance();
+  const [moduleAddress, setModuleAddress] = useState6();
+  const [foundModule] = usePromise(async () => {
+    if (moduleAddress === null)
+      return null;
+    const rootModuleInstance = rootModule?.deref();
+    if (moduleAddress && rootModuleInstance) {
+      const foundModule2 = await rootModuleInstance.resolve(moduleAddress);
+      return foundModule2 ?? null;
+    }
+  }, [moduleAddress, rootModule]);
+  useEffect5(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      if (moduleAddress === null) {
+        setTimeout(() => {
+          cy?.deref()?.center();
+        }, 100);
+      } else if (foundModule && cy) {
+        const node = cy?.deref()?.nodes(`[id="${moduleAddress}"]`)?.[0];
+        setTimeout(() => {
+          cy?.deref()?.center(node);
+        }, 100);
+      }
+    });
+    const container = cy?.deref()?.container();
+    if (container) {
+      resizeObserver.observe(container);
+    }
+    return () => {
+      if (container)
+        resizeObserver.unobserve(container);
+    };
+  }, [cy, moduleAddress, foundModule, rootModule]);
+  useEffect5(() => {
+    if (foundModule) {
+      onFoundModule?.();
+    }
+  }, [cy, moduleAddress, foundModule, onFoundModule]);
+  const onModuleDetails = (address) => {
+    const moduleNode = cy?.deref()?.nodes(`[id="${address}"]`);
+    const rootModuleNode = cy?.deref()?.nodes(`[id="${rootModule?.deref()?.address}"]`);
+    const foundModuleNode = cy?.deref()?.nodes(`[id="${foundModule?.address}"]`);
+    const notModuleNode = cy?.deref()?.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 { mod: foundModule, onModuleDetails };
+};
+
+// src/hooks/cytoscape/useRelationalGraphOptions.tsx
+import { useState as useState7 } from "react";
+var useRelationalGraphOptions = (mod) => {
+  const [hideLabels, setHideLabels] = useState7(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
+import cytoscape from "cytoscape";
+import cola from "cytoscape-cola";
+import coseBilkent from "cytoscape-cose-bilkent";
+import dagre from "cytoscape-dagre";
+import euler from "cytoscape-euler";
+import { useEffect as useEffect6, useState as useState8 } from "react";
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+var WithExtensions = ({ children }) => {
+  const [initialized, setInitialized] = useState8(false);
+  useEffect6(() => {
+    cytoscape.use(cola);
+    cytoscape.use(dagre);
+    cytoscape.use(coseBilkent);
+    cytoscape.use(euler);
+    setInitialized(true);
+  }, []);
+  return /* @__PURE__ */ jsx4(Fragment, { children: initialized ? children : void 0 });
+};
+
+// src/components/relational/graph/Graph.tsx
+import { Box, Button, ButtonGroup, Card, CardHeader, Paper, useTheme as useTheme3 } from "@mui/material";
+import { asAddress } from "@xylabs/hex";
+import { FlexCol, FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
+import { Identicon } from "@xylabs/react-identicon";
+import { useWeakModuleFromNode as useWeakModuleFromNode2 } from "@xyo-network/react-node";
+import cytoscape2 from "cytoscape";
+import cola2 from "cytoscape-cola";
+import coseBilkentLayout from "cytoscape-cose-bilkent";
+import dagre2 from "cytoscape-dagre";
+import eulerLayout from "cytoscape-euler";
+import { forwardRef, useEffect as useEffect7, useRef, useState as useState9 } from "react";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var applyLayout = (cy, name = "cola", options) => {
+  cy?.layout({ name, ...options }).run();
+};
+var loadLayout = (layout = "cola") => {
+  switch (layout) {
+    case "dagre": {
+      cytoscape2.use(dagre2);
+      break;
+    }
+    case "euler": {
+      cytoscape2.use(eulerLayout);
+      break;
+    }
+    case "cose-bilkent": {
+      cytoscape2.use(coseBilkentLayout);
+      break;
+    }
+    case "cola": {
+      cytoscape2.use(cola2);
+      break;
+    }
+  }
+};
+var ModuleHoverDetails = ({ name, address, ...props }) => {
+  return /* @__PURE__ */ jsx5(Card, { elevation: 3, ...props, children: /* @__PURE__ */ jsx5(
+    CardHeader,
+    {
+      avatar: /* @__PURE__ */ jsx5(Paper, { elevation: 6, sx: { bgcolor: "#fff", p: 1 }, children: /* @__PURE__ */ jsx5(Identicon, { value: address, size: 24 }) }),
+      title: name,
+      subheader: address
+    }
+  ) });
+};
+var NodeRelationalGraphFlexBox = forwardRef(
+  ({ actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props }, ref) => {
+    const theme = useTheme3();
+    const [cy, setCy] = useState9();
+    const cytoscapeRef = useRef();
+    const [hoverPosition, setHoverBoundingBox] = useState9();
+    const [hoverAddress, setHoverAddress] = useState9();
+    const [moduleInstance] = useWeakModuleFromNode2(hoverAddress, { node });
+    useEffect7(() => {
+      cy?.on("mouseover tap", ({ target }) => {
+        const cyNode = target;
+        const bb = cyNode?.renderedBoundingBox?.();
+        console.log(bb);
+        setHoverBoundingBox(bb);
+        const id = cyNode.id?.();
+        if (id) {
+          if (id.includes("/")) {
+            setHoverAddress(void 0);
+            onHover?.();
+          } else {
+            setHoverAddress(asAddress(id));
+            onHover?.(asAddress(id));
+          }
+        }
+      });
+    }, [onHover, cy]);
+    const handleReset = () => {
+      cy?.reset();
+      applyLayout(cy, layout ?? "euler", layoutOptions);
+    };
+    useEffect7(() => {
+      let newCy;
+      const container = cytoscapeRef.current;
+      if (container) {
+        newCy = cytoscape2({
+          container,
+          ...options
+        });
+        setCy(newCy);
+      }
+      return () => {
+        newCy?.destroy();
+        setCy(void 0);
+      };
+    }, [options, cytoscapeRef, layoutOptions]);
+    useEffect7(() => {
+      if (cy) {
+        loadLayout(layout);
+        applyLayout(cy, layout ?? "euler", layoutOptions);
+      }
+    }, [cy, layoutOptions, layout]);
+    return /* @__PURE__ */ jsxs(FlexCol, { id: "relational-graph-wrapper", ref, ...props, children: [
+      hoverAddress && hoverPosition ? /* @__PURE__ */ jsx5(Box, { position: "absolute", top: hoverPosition.y1, left: hoverPosition.x1, zIndex: 100, children: /* @__PURE__ */ jsx5(ModuleHoverDetails, { address: hoverAddress, name: moduleInstance?.deref()?.id ?? "Unknown" }) }) : null,
+      /* @__PURE__ */ jsx5(FlexRow, { justifyContent: "start", width: "100%", children: actions === null ? null : actions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+        actions,
+        /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
+      ] }) : /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }),
+      /* @__PURE__ */ jsxs(FlexGrowRow, { width: "100%", alignItems: "start", children: [
+        showDetails ? /* @__PURE__ */ jsx5(FlexCol, { height: "100%", width: "85%", children: detail }) : null,
+        /* @__PURE__ */ jsxs(
+          FlexCol,
+          {
+            justifyContent: "start",
+            classes: "cytoscape-wrap",
+            width: showDetails ? "15%" : "100%",
+            height: showDetails ? "50%" : "100%",
+            border: showDetails ? `1px solid ${theme.palette.divider}` : void 0,
+            children: [
+              /* @__PURE__ */ jsx5(FlexCol, { alignItems: "stretch", position: "absolute", width: "100%", height: "100%", ref: cytoscapeRef }),
+              children
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
+var NodeRelationalGraph = NodeRelationalGraphFlexBox;
+
+// src/components/relational/graph/ProvidedNodeRenderer.tsx
+import { useWeakProvidedNode } from "@xyo-network/react-node";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ProvidedNodeRenderer = ({ node, ...props }) => {
+  const [providedNode] = useWeakProvidedNode();
+  const elements = useCytoscapeElements(node ?? providedNode);
+  const options = useCytoscapeOptions(elements);
+  return /* @__PURE__ */ jsx6(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
+};
+
+// src/components/module/graph/DetailsFlexbox.tsx
+import { CancelRounded } from "@mui/icons-material";
+import { IconButton as IconButton2 } from "@mui/material";
+import { FlexGrowCol, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var DetailsFlexbox = ({ children, onClose }) => {
+  return /* @__PURE__ */ jsxs2(FlexGrowCol, { alignItems: "end", justifyContent: "start", id: "module-detail", width: "100%", p: 2, gap: 2, children: [
+    /* @__PURE__ */ jsx7(FlexRow2, { justifyContent: "end", children: /* @__PURE__ */ jsx7(IconButton2, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx7(CancelRounded, {}) }) }),
+    children
+  ] });
+};
+
+// src/components/module/graph/node/Hover.tsx
+import { styled } from "@mui/material";
+import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
+
+// src/components/module/graph/node/hooks/useNodeElement.tsx
+import { useEffect as useEffect8, useRef as useRef2, useState as useState10 } from "react";
+var useNodeElement = (node) => {
+  const ref = useRef2(null);
+  const [currentElement, setCurrentElement] = useState10(null);
+  const [boundingBox, setBoundingBox] = useState10(node?.renderedBoundingBox());
+  useEffect8(() => {
+    setCurrentElement(null);
+  }, [node]);
+  useEffect8(() => {
+    if (node) {
+      setBoundingBox(node.renderedBoundingBox());
+    }
+    const listener = () => {
+      setBoundingBox(node?.renderedBoundingBox());
+    };
+    node?.on("position", listener);
+    return () => {
+      node?.off("position", void 0, listener);
+    };
+  }, [node]);
+  useEffect8(() => {
+    setCurrentElement(ref.current);
+  }, [boundingBox]);
+  return { boundingBox, currentElement, ref };
+};
+
+// src/components/module/graph/node/Hover.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var ModuleGraphNodeHover = ({ children, node }) => {
+  const { boundingBox, ref, currentElement } = useNodeElement(node);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(StyledNodeGhostElementFlexCol, { ref, left: boundingBox?.x1, height: boundingBox?.h, top: boundingBox?.y1, width: boundingBox?.w }),
+    node ? /* @__PURE__ */ jsx8(Fragment2, { children: children?.(currentElement) }) : null
+  ] });
+};
+var StyledNodeGhostElementFlexCol = styled(FlexCol2, { name: "StyledNodeGhostElementFlexCol" })(() => ({
+  // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
+  // backgroundColor: '#fff',
+  // opacity: 0.25,
+  // eslint-disable-next-line sort-keys-fix/sort-keys-fix
+  cursor: "pointer",
+  pointerEvents: "none",
+  position: "absolute"
+}));
+
+// src/components/module/graph/Popper.tsx
+import { CancelRounded as CancelRounded2 } from "@mui/icons-material";
+import { Button as Button2, Card as Card2, CardActions, CardHeader as CardHeader2, IconButton as IconButton3, Paper as Paper2, Popper, styled as styled2 } from "@mui/material";
+import { Identicon as Identicon2 } from "@xylabs/react-identicon";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var ModuleHoverPopper = ({ anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props }) => {
+  const { address, name } = node?.data() ?? {};
+  return /* @__PURE__ */ jsx9(Fragment3, { children: anchorEl ? /* @__PURE__ */ jsx9(Popper, { anchorEl, ...props, children: /* @__PURE__ */ jsxs4(Card2, { elevation: 3, children: [
+    /* @__PURE__ */ jsx9(
+      CardHeader2,
+      {
+        action: onClose ? /* @__PURE__ */ jsx9(IconButton3, { size: "small", onClick: onClose, children: /* @__PURE__ */ jsx9(CancelRounded2, {}) }) : null,
+        avatar: /* @__PURE__ */ jsx9(Paper2, { elevation: 6, sx: { bgcolor: "#fff", p: 1 }, children: /* @__PURE__ */ jsx9(Identicon2, { value: address, size: 24 }) }),
+        title: name,
+        subheader: address
+      }
+    ),
+    /* @__PURE__ */ jsxs4(StyledCardActions, { children: [
+      onModuleDetails ? /* @__PURE__ */ jsx9(Button2, { onClick: () => onModuleDetails?.(address), size: "small", variant: "contained", children: "Details" }) : null,
+      onModuleExplore ? /* @__PURE__ */ jsx9(Button2, { onClick: () => onModuleExplore?.(address), size: "small", variant: "contained", children: "Explore" }) : null
+    ] })
+  ] }) }) : null });
+};
+var StyledModuleHoverPopper = styled2(ModuleHoverPopper, { name: "StyledComponents" })(() => ({
+  zIndex: 2
+}));
+var StyledCardActions = styled2(CardActions, { name: "StyledCardActions" })(() => ({
+  display: "flex",
+  justifyContent: "center"
+}));
+
+// src/components/module/graph/GraphFlexBox.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ModuleGraphFlexBox = ({ hideActions, rootModule, disableModuleDetails, ...props }) => {
+  const cytoscapeRef = useRef3(null);
+  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? void 0);
+  const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels);
+  const { mod, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(void 0));
+  return /* @__PURE__ */ jsx10(WithExtensions, { children: /* @__PURE__ */ jsx10(
+    NodeRelationalGraphFlexBox,
+    {
+      actions: mod ? null : hideActions ? null : /* @__PURE__ */ jsx10(Button3, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
+      showDetails: !!mod,
+      detail: /* @__PURE__ */ jsx10(DetailsFlexbox, { onClose: () => onModuleDetails(null) }),
+      options,
+      ref: cytoscapeRef,
+      width: "100%",
+      ...props,
+      children: /* @__PURE__ */ jsx10(ModuleGraphNodeHover, { node: hoveredNode, children: (element) => /* @__PURE__ */ jsx10(
+        StyledModuleHoverPopper,
+        {
+          anchorEl: element,
+          container: cytoscapeRef.current,
+          node: hoveredNode,
+          onClose: () => setHoveredNode(void 0),
+          onModuleExplore: toggleSelectedElement,
+          onModuleDetails: disableModuleDetails ? void 0 : onModuleDetails,
+          placement: "top",
+          open: true
+        }
+      ) })
+    }
+  ) });
+};
+var ModuleGraphFlexBoxWithProvider = (props) => {
+  return /* @__PURE__ */ jsx10(CytoscapeInstanceProvider, { children: /* @__PURE__ */ jsx10(ModuleGraphFlexBox, { ...props }) });
+};
+export {
+  ColaLayout,
+  ConcentricLayout,
+  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.js.map