@xyo-network/react-node-renderer 2.77.0-rc.1 → 2.77.1

package/dist/node/index.js

@@ -1,828 +1,2 @@
-// 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 == null ? void 0 : 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 == null ? void 0 : attachedListener();
-      detachedListener == null ? void 0 : 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(() => {
-    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
-import { useWeakModuleFromNode } from "@xyo-network/react-node";
-import { useMemo } from "react";
-var useNewElements = (selectedElement) => {
-  const selectedAddress = useMemo(() => {
-    const { address: selectedAddress2 } = (selectedElement == null ? void 0 : 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(() => {
-    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
-import { useState as useState5 } from "react";
-var useSelectedElement = () => {
-  const [selectedElement, setSelectedElement] = useState5();
-  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
-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 == null ? void 0 : rootModule.deref();
-    if (moduleAddress && rootModuleInstance) {
-      const foundModule2 = await rootModuleInstance.resolve(moduleAddress);
-      return foundModule2 ?? null;
-    }
-  }, [moduleAddress, rootModule]);
-  useEffect5(() => {
-    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]);
-  useEffect5(() => {
-    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
-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 == null ? void 0 : 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) => {
-    var _a;
-    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 == 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(asAddress(id));
-            onHover == null ? void 0 : onHover(asAddress(id));
-          }
-        }
-      });
-    }, [onHover, cy]);
-    const handleReset = () => {
-      cy == null ? void 0 : cy.reset();
-      applyLayout(cy, layout ?? "euler", layoutOptions);
-    };
-    useEffect7(() => {
-      let newCy;
-      const container = cytoscapeRef.current;
-      if (container) {
-        newCy = cytoscape2({
-          container,
-          ...options
-        });
-        setCy(newCy);
-      }
-      return () => {
-        newCy == null ? void 0 : 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: ((_a = moduleInstance == null ? void 0 : moduleInstance.deref()) == null ? void 0 : _a.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 } 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(IconButton, { 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 == null ? void 0 : node.renderedBoundingBox());
-  useEffect8(() => {
-    setCurrentElement(null);
-  }, [node]);
-  useEffect8(() => {
-    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]);
-  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 == 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__ */ jsx8(Fragment2, { children: children == null ? void 0 : 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 IconButton2, 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 == null ? void 0 : 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(IconButton2, { 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 == null ? void 0 : onModuleDetails(address), size: "small", variant: "contained", children: "Details" }) : null,
-      onModuleExplore ? /* @__PURE__ */ jsx9(Button2, { onClick: () => onModuleExplore == null ? void 0 : 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
-};
+import{asArchivistInstance as Me,isArchivistInstance as we}from"@xyo-network/archivist-model";import{asDivinerInstance as Fe,isDivinerInstance as ke}from"@xyo-network/diviner-model";import{ArchivistCard as Be}from"@xyo-network/react-archivist";import{DivinerCard as De,ModuleCard as Te}from"@xyo-network/react-module";import{jsx as L}from"react/jsx-runtime";var Ro=({mod:e})=>{switch(!0){case we(e):return L(Be,{mod:Me(e)});case ke(e):return L(De,{mod:Fe(e)});default:return L(Te,{mod:e})}};import{Button as xo}from"@mui/material";import{useRef as yo}from"react";import{createContextEx as Ae}from"@xyo-network/react-shared";var w=Ae();import{useEffect as Ge,useState as Le}from"react";import{jsx as We}from"react/jsx-runtime";var J=({children:e,defaultInstance:o})=>{let[t,r]=Le(o);return Ge(()=>{r(o)},[o]),We(w.Provider,{value:{cy:t,provided:!0,setCy:r},children:e})};import{useContextEx as He}from"@xyo-network/react-shared";var h=(e=!1)=>He(w,"CytoscapeInstance",e);import{useAsyncEffect as ot}from"@xylabs/react-async-effect";import{isNodeInstance as rt}from"@xyo-network/node-model";import{useEffect as nt,useState as st}from"react";import{exists as Ke}from"@xylabs/exists";import{renderToStaticMarkup as ze}from"react-dom/server";var Oe="data:image/svg+xml,",K=(e,o)=>{let t=ze(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"),`${Oe}${window.encodeURIComponent(n.outerHTML)}`};var X=()=>({archivist:"",bridge:"",diviner:"",module:"",node:"",sentinel:"",witness:""});var Y={centerGraph:!1,convergenceThreshold:.01,name:"cola"};var F={concentric:function(e){return e.degree(!1)},levelWidth:function(){return 2},minNodeSpacing:75,name:"concentric"};import{isArchivistInstance as $e}from"@xyo-network/archivist-model";import{isBridgeInstance as Ue}from"@xyo-network/bridge-model";import{isDivinerInstance as Ve}from"@xyo-network/diviner-model";import{isNodeInstance as Qe}from"@xyo-network/node-model";import{isSentinelInstance as qe}from"@xyo-network/sentinel-model";import{isWitnessModule as Je}from"@xyo-network/witness-model";var Z=e=>{let o="module";return e&&($e(e)?o="archivist":Ue(e)?o="bridge":Ve(e)?o="diviner":Qe(e)?o="node":qe(e)?o="sentinel":Je(e)?o="witness":o="module"),o};var x={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 x.recurseNodes(e);return await this.buildElementsFromInfo(o,void 0,["activeNode"])},async buildElementsFromInfo(e,o,t=[]){let r=x.buildNode(e.mod,{childCount:e.children.length,depth:e.depth},t),n=o?x.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:Z(e),...o}}},buildRootNode:e=>x.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(Ke)}return r}};import{BubbleChartRounded as Xe,Hub as Ye,InsertLinkRounded as Ze,Inventory2Rounded as _e,QuestionMarkRounded as je,TimerRounded as et,VisibilityRounded as tt}from"@mui/icons-material";var _={archivist:_e,bridge:Ze,diviner:Xe,module:je,node:Ye,sentinel:et,witness:tt};var j=(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"}}),ee=(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"}}),te=e=>({selector:".activeNode",style:{"background-color":e}}),oe=(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 b=e=>{let[o,t]=st([]);return ot(async()=>{let r=e==null?void 0:e.deref();if(r){let n=await x.buildElements(r)??[];t(n)}},[e]),nt(()=>{let r,n;return e&&rt(e)&&(r=e.on("moduleAttached",async()=>{let s=await x.buildElements(e)??[];t(s)}),n=e.on("moduleDetached",async()=>{let s=await x.buildElements(e)??[];t(s)})),()=>{r==null||r(),n==null||n()}},[e]),o};import{useCallback as it,useEffect as re,useState as at}from"react";var ne=e=>{let{cy:o}=h(!0),[t,r]=at(),n=it(s=>{s.on("mouseover tap",()=>{r(s)})},[]);return re(()=>{e&&e.nodes().forEach(n)},[n,e]),re(()=>{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]};import{useWeakModuleFromNode as lt}from"@xyo-network/react-node";import{useMemo as dt}from"react";var se=e=>{let o=dt(()=>{let{address:n}=(e==null?void 0:e.data())??{};return n},[e]),[t]=lt(o);return b(t)};import{useEffect as ct,useState as pt}from"react";var ie=(e=[],o)=>{let{cy:t}=h(!0),[r,n]=pt();return ct(()=>{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(Y).run()}},[t,o,e]),r};import{useState as mt}from"react";var ae=()=>{let[e,o]=mt(),{cy:t}=h(!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 le=e=>{let{selectedElement:o,toggleSelectedElement:t}=ae(),r=se(o),n=ie(r,e),[s,i]=ne(n);return{hoveredNode:s,setHoveredNode:i,toggleSelectedElement:t}};import{useMemo as xt}from"react";import{useTheme as gt}from"@mui/material";import{useMemo as ht}from"react";import{useTheme as ut}from"@mui/material";import{useMemo as ft}from"react";import{jsx as Ct}from"react/jsx-runtime";var de=()=>{let e=ut();return ft(()=>{let t=X();return Object.entries(_).reduce((r,[n,s])=>{let i=Ct(s,{fontSize:"small"});return r[n]=K(i,e.palette.getContrastText(e.palette.text.primary)),r},t)},[e.palette])};var k=(e=!1)=>{let o=gt(),t=de();return ht(()=>[ee(t,o.palette.primary.main,e),j(o.palette.text.primary,o.palette.getContrastText(o.palette.text.primary)),te(o.palette.secondary.main),oe(o.palette.divider,o.palette.divider)],[t,e,o])};var B=(e,o,t)=>{let r=k(),n=t??F,s=o??r;return xt(()=>{if(e&&n&&s)return{elements:e,layout:n,style:s}},[e,t,o])};import{usePromise as yt}from"@xylabs/react-promise";import{useEffect as ce,useState as vt}from"react";var pe=(e,o)=>{let{cy:t}=h(),[r,n]=vt(),[s]=yt(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 ce(()=>{var C;let a=new ResizeObserver(()=>{var p,c;if(r===null)setTimeout(()=>{var d;(d=t==null?void 0:t.deref())==null||d.center()},100);else if(s&&t){let d=(c=(p=t==null?void 0:t.deref())==null?void 0:p.nodes(`[id="${r}"]`))==null?void 0:c[0];setTimeout(()=>{var f;(f=t==null?void 0:t.deref())==null||f.center(d)},100)}}),l=(C=t==null?void 0:t.deref())==null?void 0:C.container();return l&&a.observe(l),()=>{l&&a.unobserve(l)}},[t,r,s,e]),ce(()=>{s&&(o==null||o())},[t,r,s,o]),{mod:s,onModuleDetails:a=>{var d,f,N,E,S;let l=(d=t==null?void 0:t.deref())==null?void 0:d.nodes(`[id="${a}"]`),C=(N=t==null?void 0:t.deref())==null?void 0:N.nodes(`[id="${(f=e==null?void 0:e.deref())==null?void 0:f.address}"]`),p=(E=t==null?void 0:t.deref())==null?void 0:E.nodes(`[id="${s==null?void 0:s.address}"]`),c=(S=t==null?void 0:t.deref())==null?void 0:S.nodes(`[id != "${a}"]`);if(a)l==null||l.toggleClass("activeNode",!0),c==null||c.toggleClass("activeNode",!1);else{c==null||c.toggleClass("activeNode",!1);let v=p!=null&&p.length?p:C;v==null||v.toggleClass("activeNode",!0)}n(a)}}};import{useState as It}from"react";var me=e=>{let[o,t]=It(!0),r=()=>{t(a=>!a)},n=b(e),s=k(o),i=B(n,s,F);return{handleToggleLabels:r,hideLabels:o,options:i}};import D from"cytoscape";import Nt from"cytoscape-cola";import Et from"cytoscape-cose-bilkent";import bt from"cytoscape-dagre";import Rt from"cytoscape-euler";import{useEffect as Pt,useState as St}from"react";import{Fragment as Mt,jsx as wt}from"react/jsx-runtime";var ue=({children:e})=>{let[o,t]=St(!1);return Pt(()=>{D.use(Nt),D.use(bt),D.use(Et),D.use(Rt),t(!0)},[]),wt(Mt,{children:o?e:void 0})};import{Box as Ft,Button as fe,ButtonGroup as kt,Card as Bt,CardHeader as Dt,Paper as Tt,useTheme as At}from"@mui/material";import{asAddress as Ce}from"@xylabs/hex";import{FlexCol as T,FlexGrowRow as Gt,FlexRow as Lt}from"@xylabs/react-flexbox";import{Identicon as Wt}from"@xylabs/react-identicon";import{useWeakModuleFromNode as Ht}from"@xyo-network/react-node";import P from"cytoscape";import zt from"cytoscape-cola";import Ot from"cytoscape-cose-bilkent";import $t from"cytoscape-dagre";import Ut from"cytoscape-euler";import{forwardRef as Vt,useEffect as W,useRef as Qt,useState as H}from"react";import{jsx as u,jsxs as A}from"react/jsx-runtime";var ge=(e,o="cola",t)=>{e==null||e.layout({name:o,...t}).run()},qt=(e="cola")=>{switch(e){case"dagre":{P.use($t);break}case"euler":{P.use(Ut);break}case"cose-bilkent":{P.use(Ot);break}case"cola":{P.use(zt);break}}},Jt=({name:e,address:o,...t})=>u(Bt,{elevation:3,...t,children:u(Dt,{avatar:u(Tt,{elevation:6,sx:{bgcolor:"#fff",p:1},children:u(Wt,{value:o,size:24})}),title:e,subheader:o})}),R=Vt(({actions:e,children:o,node:t,layout:r,layoutOptions:n,showDetails:s,detail:i,options:a,onHover:l,...C},p)=>{var V;let c=At(),[d,f]=H(),N=Qt(),[E,S]=H(),[v,$]=H(),[G]=Ht(v,{node:t});W(()=>{d==null||d.on("mouseover tap",({target:I})=>{var Q,q;let m=I,Se=(Q=m==null?void 0:m.renderedBoundingBox)==null?void 0:Q.call(m);S(Se);let M=(q=m.id)==null?void 0:q.call(m);M&&(M.includes("/")?($(void 0),l==null||l()):($(Ce(M)),l==null||l(Ce(M))))})},[l,d]);let U=()=>{d==null||d.reset(),ge(d,r??"euler",n)};return W(()=>{let I,m=N.current;return m&&(I=P({container:m,...a}),f(I)),()=>{I==null||I.destroy(),f(void 0)}},[a,N,n]),W(()=>{d&&(qt(r),ge(d,r??"euler",n))},[d,n,r]),A(T,{id:"relational-graph-wrapper",ref:p,...C,children:[v&&E?u(Ft,{position:"absolute",top:E.y1,left:E.x1,zIndex:100,children:u(Jt,{address:v,name:((V=G==null?void 0:G.deref())==null?void 0:V.id)??"Unknown"})}):null,u(Lt,{justifyContent:"start",width:"100%",children:e===null?null:e?A(kt,{children:[e,u(fe,{size:"small",variant:"contained",onClick:U,children:"Reset View"})]}):u(fe,{size:"small",variant:"contained",onClick:U,children:"Reset"})}),A(Gt,{width:"100%",alignItems:"start",children:[s?u(T,{height:"100%",width:"85%",children:i}):null,A(T,{justifyContent:"start",classes:"cytoscape-wrap",width:s?"15%":"100%",height:s?"50%":"100%",border:s?`1px solid ${c.palette.divider}`:void 0,children:[u(T,{alignItems:"stretch",position:"absolute",width:"100%",height:"100%",ref:N}),o]})]})]})});R.displayName="NodeRelationalGraph";var En=R;import{useWeakProvidedNode as Kt}from"@xyo-network/react-node";import{jsx as Xt}from"react/jsx-runtime";var wn=({node:e,...o})=>{let[t]=Kt(),r=b(e??t),n=B(r);return Xt(R,{alignItems:"stretch",flexGrow:1,height:"100%",options:n,...o})};import{CancelRounded as Yt}from"@mui/icons-material";import{IconButton as Zt}from"@mui/material";import{FlexGrowCol as _t,FlexRow as jt}from"@xylabs/react-flexbox";import{jsx as z,jsxs as eo}from"react/jsx-runtime";var he=({children:e,onClose:o})=>eo(_t,{alignItems:"end",justifyContent:"start",id:"module-detail",width:"100%",p:2,gap:2,children:[z(jt,{justifyContent:"end",children:z(Zt,{onClick:o,size:"small",children:z(Yt,{})})}),e]});import{styled as oo}from"@mui/material";import{FlexCol as ro}from"@xylabs/react-flexbox";import{useEffect as O,useRef as to,useState as xe}from"react";var ye=e=>{let o=to(null),[t,r]=xe(null),[n,s]=xe(e==null?void 0:e.renderedBoundingBox());return O(()=>{r(null)},[e]),O(()=>{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]),O(()=>{r(o.current)},[n]),{boundingBox:n,currentElement:t,ref:o}};import{Fragment as Ie,jsx as ve,jsxs as so}from"react/jsx-runtime";var Ne=({children:e,node:o})=>{let{boundingBox:t,ref:r,currentElement:n}=ye(o);return so(Ie,{children:[ve(no,{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?ve(Ie,{children:e==null?void 0:e(n)}):null]})},no=oo(ro,{name:"StyledNodeGhostElementFlexCol"})(()=>({cursor:"pointer",pointerEvents:"none",position:"absolute"}));import{CancelRounded as io}from"@mui/icons-material";import{Button as Ee,Card as ao,CardActions as lo,CardHeader as co,IconButton as po,Paper as mo,Popper as uo,styled as Re}from"@mui/material";import{Identicon as fo}from"@xylabs/react-identicon";import{Fragment as ho,jsx as g,jsxs as be}from"react/jsx-runtime";var Co=({anchorEl:e,onClose:o,onModuleDetails:t,onModuleExplore:r,node:n,...s})=>{let{address:i,name:a}=(n==null?void 0:n.data())??{};return g(ho,{children:e?g(uo,{anchorEl:e,...s,children:be(ao,{elevation:3,children:[g(co,{action:o?g(po,{size:"small",onClick:o,children:g(io,{})}):null,avatar:g(mo,{elevation:6,sx:{bgcolor:"#fff",p:1},children:g(fo,{value:i,size:24})}),title:a,subheader:i}),be(go,{children:[t?g(Ee,{onClick:()=>t==null?void 0:t(i),size:"small",variant:"contained",children:"Details"}):null,r?g(Ee,{onClick:()=>r==null?void 0:r(i),size:"small",variant:"contained",children:"Explore"}):null]})]})}):null})},Pe=Re(Co,{name:"StyledComponents"})(()=>({zIndex:2})),go=Re(lo,{name:"StyledCardActions"})(()=>({display:"flex",justifyContent:"center"}));import{jsx as y}from"react/jsx-runtime";var vo=({hideActions:e,rootModule:o,disableModuleDetails:t,...r})=>{let n=yo(null),{handleToggleLabels:s,hideLabels:i,options:a}=me(o??void 0),{hoveredNode:l,setHoveredNode:C,toggleSelectedElement:p}=le(i),{mod:c,onModuleDetails:d}=pe(o,()=>C(void 0));return y(ue,{children:y(R,{actions:c||e?null:y(xo,{size:"small",onClick:s,variant:"contained",children:"Toggle Labels"}),showDetails:!!c,detail:y(he,{onClose:()=>d(null)}),options:a,ref:n,width:"100%",...r,children:y(Ne,{node:l,children:f=>y(Pe,{anchorEl:f,container:n.current,node:l,onClose:()=>C(void 0),onModuleExplore:p,onModuleDetails:t?void 0:d,placement:"top",open:!0})})})})},as=e=>y(J,{children:y(vo,{...e})});export{Y as ColaLayout,F as ConcentricLayout,_ as CyIconSet,x as CytoscapeElements,w as CytoscapeInstanceContext,J as CytoscapeInstanceProvider,oe as EdgeStyled,Ro as ModuleCardParser,vo as ModuleGraphFlexBox,as as ModuleGraphFlexBoxWithProvider,ee as Node,te as NodeAsRoot,En as NodeRelationalGraph,R as NodeRelationalGraphFlexBox,j as NodeWithName,wn as ProvidedNodeRenderer,K as encodeSvg,X as generateIconMap,Z as parseModuleType,b as useCytoscapeElements,h as useCytoscapeInstance,B as useCytoscapeOptions,le as useElements,pe as useModuleDetails,me as useRelationalGraphOptions};
 //# sourceMappingURL=index.js.map