@xyo-network/react-node-renderer 2.77.0 → 2.77.1

package/dist/neutral/index.cjs

@@ -1,841 +1,2 @@
-"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?.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?.();
-      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)(() => {
-    cy?.deref()?.ready(() => {
-      cy?.deref()?.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?.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)(() => {
-    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
-var import_react6 = require("react");
-var useSelectedElement = () => {
-  const [selectedElement, setSelectedElement] = (0, import_react6.useState)();
-  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
-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?.deref();
-    if (moduleAddress && rootModuleInstance) {
-      const foundModule2 = await rootModuleInstance.resolve(moduleAddress);
-      return foundModule2 ?? null;
-    }
-  }, [moduleAddress, rootModule]);
-  (0, import_react10.useEffect)(() => {
-    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]);
-  (0, import_react10.useEffect)(() => {
-    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
-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?.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) => {
-    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?.on("mouseover tap", ({ target }) => {
-        const cyNode = target;
-        const bb = cyNode?.renderedBoundingBox?.();
-        setHoverBoundingBox(bb);
-        const id = cyNode.id?.();
-        if (id) {
-          if (id.includes("/")) {
-            setHoverAddress(void 0);
-            onHover?.();
-          } else {
-            setHoverAddress((0, import_hex.asAddress)(id));
-            onHover?.((0, import_hex.asAddress)(id));
-          }
-        }
-      });
-    }, [onHover, cy]);
-    const handleReset = () => {
-      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?.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: moduleInstance?.deref()?.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?.renderedBoundingBox());
-  (0, import_react14.useEffect)(() => {
-    setCurrentElement(null);
-  }, [node]);
-  (0, import_react14.useEffect)(() => {
-    if (node) {
-      setBoundingBox(node.renderedBoundingBox());
-    }
-    const listener = () => {
-      setBoundingBox(node?.renderedBoundingBox());
-    };
-    node?.on("position", listener);
-    return () => {
-      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?.x1, height: boundingBox?.h, top: boundingBox?.y1, width: boundingBox?.w }),
-    node ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: 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?.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?.(address), size: "small", variant: "contained", children: "Details" }) : null,
-      onModuleExplore ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Button, { onClick: () => 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 }) });
-};
+"use strict";var bo=Object.create;var z=Object.defineProperty;var Ro=Object.getOwnPropertyDescriptor;var Po=Object.getOwnPropertyNames;var So=Object.getPrototypeOf,wo=Object.prototype.hasOwnProperty;var Fo=(e,o)=>{for(var t in o)z(e,t,{get:o[t],enumerable:!0})},xe=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of Po(o))!wo.call(e,r)&&r!==t&&z(e,r,{get:()=>o[r],enumerable:!(n=Ro(o,r))||n.enumerable});return e};var C=(e,o,t)=>(t=e!=null?bo(So(e)):{},xe(o||!e||!e.__esModule?z(t,"default",{value:e,enumerable:!0}):t,e)),Bo=e=>xe(z({},"__esModule",{value:!0}),e);var $o={};Fo($o,{ColaLayout:()=>re,ConcentricLayout:()=>T,CyIconSet:()=>ie,CytoscapeElements:()=>g,CytoscapeInstanceContext:()=>D,CytoscapeInstanceProvider:()=>oe,EdgeStyled:()=>ce,ModuleCardParser:()=>ko,ModuleGraphFlexBox:()=>No,ModuleGraphFlexBoxWithProvider:()=>Oo,Node:()=>de,NodeAsRoot:()=>ae,NodeRelationalGraph:()=>Go,NodeRelationalGraphFlexBox:()=>P,NodeWithName:()=>le,ProvidedNodeRenderer:()=>Lo,encodeSvg:()=>te,generateIconMap:()=>ne,parseModuleType:()=>se,useCytoscapeElements:()=>b,useCytoscapeInstance:()=>x,useCytoscapeOptions:()=>A,useElements:()=>pe,useModuleDetails:()=>ue,useRelationalGraphOptions:()=>me});module.exports=Bo($o);var $=require("@xyo-network/archivist-model"),U=require("@xyo-network/diviner-model"),ge=require("@xyo-network/react-archivist"),V=require("@xyo-network/react-module"),O=require("react/jsx-runtime"),ko=({mod:e})=>{switch(!0){case(0,$.isArchivistInstance)(e):return(0,O.jsx)(ge.ArchivistCard,{mod:(0,$.asArchivistInstance)(e)});case(0,U.isDivinerInstance)(e):return(0,O.jsx)(V.DivinerCard,{mod:(0,U.asDivinerInstance)(e)});default:return(0,O.jsx)(V.ModuleCard,{mod:e})}};var ho=require("@mui/material"),vo=require("react");var he=require("@xyo-network/react-shared"),D=(0,he.createContextEx)();var Q=require("react");var ve=require("react/jsx-runtime"),oe=({children:e,defaultInstance:o})=>{let[t,n]=(0,Q.useState)(o);return(0,Q.useEffect)(()=>{n(o)},[o]),(0,ve.jsx)(D.Provider,{value:{cy:t,provided:!0,setCy:n},children:e})};var Ne=require("@xyo-network/react-shared");var x=(e=!1)=>(0,Ne.useContextEx)(D,"CytoscapeInstance",e);var Fe=require("@xylabs/react-async-effect"),Be=require("@xyo-network/node-model"),q=require("react");var we=require("@xylabs/exists");var Ee=require("react-dom/server"),Do="data:image/svg+xml,",te=(e,o)=>{let t=(0,Ee.renderToStaticMarkup)(e),r=new DOMParser().parseFromString(t,"text/html").querySelectorAll("svg")[0];return r&&(r.setAttribute("xmlns","http://www.w3.org/2000/svg"),r.setAttribute("height","100"),r.style.fill=o??"black"),`${Do}${window.encodeURIComponent(r.outerHTML)}`};var ne=()=>({archivist:"",bridge:"",diviner:"",module:"",node:"",sentinel:"",witness:""});var re={centerGraph:!1,convergenceThreshold:.01,name:"cola"};var T={concentric:function(e){return e.degree(!1)},levelWidth:function(){return 2},minNodeSpacing:75,name:"concentric"};var Me=require("@xyo-network/archivist-model"),Ie=require("@xyo-network/bridge-model"),be=require("@xyo-network/diviner-model"),Re=require("@xyo-network/node-model"),Pe=require("@xyo-network/sentinel-model"),Se=require("@xyo-network/witness-model"),se=e=>{let o="module";return e&&((0,Me.isArchivistInstance)(e)?o="archivist":(0,Ie.isBridgeInstance)(e)?o="bridge":(0,be.isDivinerInstance)(e)?o="diviner":(0,Re.isNodeInstance)(e)?o="node":(0,Pe.isSentinelInstance)(e)?o="sentinel":(0,Se.isWitnessModule)(e)?o="witness":o="module"),o};var g={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 g.recurseNodes(e);return await this.buildElementsFromInfo(o,void 0,["activeNode"])},async buildElementsFromInfo(e,o,t=[]){let n=g.buildNode(e.mod,{childCount:e.children.length,depth:e.depth},t),r=o?g.buildEdge(o,n,{depth:e.depth,siblingCount:e.children.length}):void 0,s=[n];r&&s.push(r);for(let i of e.children)s.push(...await this.buildElementsFromInfo(i,n));return s},buildNode(e,o,t){let{address:n,id:r}=e;return{classes:t,data:{address:n,id:n,name:r,type:se(e),...o}}},buildRootNode:e=>g.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 n={children:[],depth:t,mod:e};if(o>0){let r=await e.resolve("*",{direction:"down",maxDepth:1});n.children=(await Promise.all(r.map(async s=>{if(s.address!==e.address)return await this.recurseNodes(s,o-1,t+1)}))).filter(we.exists)}return n}};var m=require("@mui/icons-material"),ie={archivist:m.Inventory2Rounded,bridge:m.InsertLinkRounded,diviner:m.BubbleChartRounded,module:m.QuestionMarkRounded,node:m.Hub,sentinel:m.TimerRounded,witness:m.VisibilityRounded};var le=(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"}}),de=(e,o,t=!1)=>({selector:"node",style:{"background-color":o,"background-height":"75%","background-image":n=>e[n.data("type")],"background-width":"24",label:t?void 0:"data(name)",shape:"round-rectangle"}}),ae=e=>({selector:".activeNode",style:{"background-color":e}}),ce=(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]=(0,q.useState)([]);return(0,Fe.useAsyncEffect)(async()=>{let n=e?.deref();if(n){let r=await g.buildElements(n)??[];t(r)}},[e]),(0,q.useEffect)(()=>{let n,r;return e&&(0,Be.isNodeInstance)(e)&&(n=e.on("moduleAttached",async()=>{let s=await g.buildElements(e)??[];t(s)}),r=e.on("moduleDetached",async()=>{let s=await g.buildElements(e)??[];t(s)})),()=>{n?.(),r?.()}},[e]),o};var R=require("react");var ke=e=>{let{cy:o}=x(!0),[t,n]=(0,R.useState)(),r=(0,R.useCallback)(s=>{s.on("mouseover tap",()=>{n(s)})},[]);return(0,R.useEffect)(()=>{e&&e.nodes().forEach(r)},[r,e]),(0,R.useEffect)(()=>{o?.deref()?.ready(()=>{o?.deref()?.nodes().forEach(r)})},[o,r]),[t,n]};var De=require("@xyo-network/react-node"),Te=require("react");var Ae=e=>{let o=(0,Te.useMemo)(()=>{let{address:r}=e?.data()??{};return r},[e]),[t]=(0,De.useWeakModuleFromNode)(o);return b(t)};var J=require("react");var Ge=(e=[],o)=>{let{cy:t}=x(!0),[n,r]=(0,J.useState)();return(0,J.useEffect)(()=>{if(e.length>1){let s=t?.deref()?.add(e);r(s),t?.deref()?.layout(re).run()}},[t,o,e]),n};var Le=require("react");var He=()=>{let[e,o]=(0,Le.useState)(),{cy:t}=x(!0),n=s=>{t?.deref()?.nodes()?.toggleClass("activeNode",!1),s.toggleClass("activeNode",!0)};return{selectedElement:e,toggleSelectedElement:s=>{let i=t?.deref()?.nodes(`[id="${s}"]`)?.[0];i&&(o(i),n(i))}}};var pe=e=>{let{selectedElement:o,toggleSelectedElement:t}=He(),n=Ae(o),r=Ge(n,e),[s,i]=ke(r);return{hoveredNode:s,setHoveredNode:i,toggleSelectedElement:t}};var Qe=require("react");var Ue=require("@mui/material"),Ve=require("react");var We=require("@mui/material"),ze=require("react");var $e=require("react/jsx-runtime"),Oe=()=>{let e=(0,We.useTheme)();return(0,ze.useMemo)(()=>{let t=ne();return Object.entries(ie).reduce((n,[r,s])=>{let i=(0,$e.jsx)(s,{fontSize:"small"});return n[r]=te(i,e.palette.getContrastText(e.palette.text.primary)),n},t)},[e.palette])};var K=(e=!1)=>{let o=(0,Ue.useTheme)(),t=Oe();return(0,Ve.useMemo)(()=>[de(t,o.palette.primary.main,e),le(o.palette.text.primary,o.palette.getContrastText(o.palette.text.primary)),ae(o.palette.secondary.main),ce(o.palette.divider,o.palette.divider)],[t,e,o])};var A=(e,o,t)=>{let n=K(),r=t??T,s=o??n;return(0,Qe.useMemo)(()=>{if(e&&r&&s)return{elements:e,layout:r,style:s}},[e,t,o])};var qe=require("@xylabs/react-promise"),G=require("react");var ue=(e,o)=>{let{cy:t}=x(),[n,r]=(0,G.useState)(),[s]=(0,qe.usePromise)(async()=>{if(n===null)return null;let l=e?.deref();if(n&&l)return await l.resolve(n)??null},[n,e]);return(0,G.useEffect)(()=>{let l=new ResizeObserver(()=>{if(n===null)setTimeout(()=>{t?.deref()?.center()},100);else if(s&&t){let E=t?.deref()?.nodes(`[id="${n}"]`)?.[0];setTimeout(()=>{t?.deref()?.center(E)},100)}}),u=t?.deref()?.container();return u&&l.observe(u),()=>{u&&l.unobserve(u)}},[t,n,s,e]),(0,G.useEffect)(()=>{s&&o?.()},[t,n,s,o]),{mod:s,onModuleDetails:l=>{let u=t?.deref()?.nodes(`[id="${l}"]`),E=t?.deref()?.nodes(`[id="${e?.deref()?.address}"]`),S=t?.deref()?.nodes(`[id="${s?.address}"]`),I=t?.deref()?.nodes(`[id != "${l}"]`);l?(u?.toggleClass("activeNode",!0),I?.toggleClass("activeNode",!1)):(I?.toggleClass("activeNode",!1),(S?.length?S:E)?.toggleClass("activeNode",!0)),r(l)}}};var Je=require("react");var me=e=>{let[o,t]=(0,Je.useState)(!0),n=()=>{t(l=>!l)},r=b(e),s=K(o),i=A(r,s,T);return{handleToggleLabels:n,hideLabels:o,options:i}};var L=C(require("cytoscape"),1),Ke=C(require("cytoscape-cola"),1),Xe=C(require("cytoscape-cose-bilkent"),1),Ye=C(require("cytoscape-dagre"),1),Ze=C(require("cytoscape-euler"),1),X=require("react"),Y=require("react/jsx-runtime"),_e=({children:e})=>{let[o,t]=(0,X.useState)(!1);return(0,X.useEffect)(()=>{L.default.use(Ke.default),L.default.use(Ye.default),L.default.use(Xe.default),L.default.use(Ze.default),t(!0)},[]),(0,Y.jsx)(Y.Fragment,{children:o?e:void 0})};var c=require("@mui/material"),fe=require("@xylabs/hex"),h=require("@xylabs/react-flexbox"),eo=require("@xylabs/react-identicon"),oo=require("@xyo-network/react-node"),w=C(require("cytoscape"),1),to=C(require("cytoscape-cola"),1),no=C(require("cytoscape-cose-bilkent"),1),ro=C(require("cytoscape-dagre"),1),so=C(require("cytoscape-euler"),1),f=require("react"),a=require("react/jsx-runtime"),je=(e,o="cola",t)=>{e?.layout({name:o,...t}).run()},To=(e="cola")=>{switch(e){case"dagre":{w.default.use(ro.default);break}case"euler":{w.default.use(so.default);break}case"cose-bilkent":{w.default.use(no.default);break}case"cola":{w.default.use(to.default);break}}},Ao=({name:e,address:o,...t})=>(0,a.jsx)(c.Card,{elevation:3,...t,children:(0,a.jsx)(c.CardHeader,{avatar:(0,a.jsx)(c.Paper,{elevation:6,sx:{bgcolor:"#fff",p:1},children:(0,a.jsx)(eo.Identicon,{value:o,size:24})}),title:e,subheader:o})}),P=(0,f.forwardRef)(({actions:e,children:o,node:t,layout:n,layoutOptions:r,showDetails:s,detail:i,options:l,onHover:u,...E},S)=>{let I=(0,c.useTheme)(),[y,H]=(0,f.useState)(),_=(0,f.useRef)(),[j,Eo]=(0,f.useState)(),[ee,ye]=(0,f.useState)(),[Mo]=(0,oo.useWeakModuleFromNode)(ee,{node:t});(0,f.useEffect)(()=>{y?.on("mouseover tap",({target:B})=>{let k=B,Io=k?.renderedBoundingBox?.();Eo(Io);let W=k.id?.();W&&(W.includes("/")?(ye(void 0),u?.()):(ye((0,fe.asAddress)(W)),u?.((0,fe.asAddress)(W))))})},[u,y]);let Ce=()=>{y?.reset(),je(y,n??"euler",r)};return(0,f.useEffect)(()=>{let B,k=_.current;return k&&(B=(0,w.default)({container:k,...l}),H(B)),()=>{B?.destroy(),H(void 0)}},[l,_,r]),(0,f.useEffect)(()=>{y&&(To(n),je(y,n??"euler",r))},[y,r,n]),(0,a.jsxs)(h.FlexCol,{id:"relational-graph-wrapper",ref:S,...E,children:[ee&&j?(0,a.jsx)(c.Box,{position:"absolute",top:j.y1,left:j.x1,zIndex:100,children:(0,a.jsx)(Ao,{address:ee,name:Mo?.deref()?.id??"Unknown"})}):null,(0,a.jsx)(h.FlexRow,{justifyContent:"start",width:"100%",children:e===null?null:e?(0,a.jsxs)(c.ButtonGroup,{children:[e,(0,a.jsx)(c.Button,{size:"small",variant:"contained",onClick:Ce,children:"Reset View"})]}):(0,a.jsx)(c.Button,{size:"small",variant:"contained",onClick:Ce,children:"Reset"})}),(0,a.jsxs)(h.FlexGrowRow,{width:"100%",alignItems:"start",children:[s?(0,a.jsx)(h.FlexCol,{height:"100%",width:"85%",children:i}):null,(0,a.jsxs)(h.FlexCol,{justifyContent:"start",classes:"cytoscape-wrap",width:s?"15%":"100%",height:s?"50%":"100%",border:s?`1px solid ${I.palette.divider}`:void 0,children:[(0,a.jsx)(h.FlexCol,{alignItems:"stretch",position:"absolute",width:"100%",height:"100%",ref:_}),o]})]})]})});P.displayName="NodeRelationalGraph";var Go=P;var io=require("@xyo-network/react-node");var lo=require("react/jsx-runtime"),Lo=({node:e,...o})=>{let[t]=(0,io.useWeakProvidedNode)(),n=b(e??t),r=A(n);return(0,lo.jsx)(P,{alignItems:"stretch",flexGrow:1,height:"100%",options:r,...o})};var ao=require("@mui/icons-material"),co=require("@mui/material"),Z=require("@xylabs/react-flexbox"),F=require("react/jsx-runtime"),po=({children:e,onClose:o})=>(0,F.jsxs)(Z.FlexGrowCol,{alignItems:"end",justifyContent:"start",id:"module-detail",width:"100%",p:2,gap:2,children:[(0,F.jsx)(Z.FlexRow,{justifyContent:"end",children:(0,F.jsx)(co.IconButton,{onClick:o,size:"small",children:(0,F.jsx)(ao.CancelRounded,{})})}),e]});var mo=require("@mui/material"),fo=require("@xylabs/react-flexbox");var v=require("react"),uo=e=>{let o=(0,v.useRef)(null),[t,n]=(0,v.useState)(null),[r,s]=(0,v.useState)(e?.renderedBoundingBox());return(0,v.useEffect)(()=>{n(null)},[e]),(0,v.useEffect)(()=>{e&&s(e.renderedBoundingBox());let i=()=>{s(e?.renderedBoundingBox())};return e?.on("position",i),()=>{e?.off("position",void 0,i)}},[e]),(0,v.useEffect)(()=>{n(o.current)},[r]),{boundingBox:r,currentElement:t,ref:o}};var M=require("react/jsx-runtime"),yo=({children:e,node:o})=>{let{boundingBox:t,ref:n,currentElement:r}=uo(o);return(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(Ho,{ref:n,left:t?.x1,height:t?.h,top:t?.y1,width:t?.w}),o?(0,M.jsx)(M.Fragment,{children:e?.(r)}):null]})},Ho=(0,mo.styled)(fo.FlexCol,{name:"StyledNodeGhostElementFlexCol"})(()=>({cursor:"pointer",pointerEvents:"none",position:"absolute"}));var Co=require("@mui/icons-material"),d=require("@mui/material"),xo=require("@xylabs/react-identicon"),p=require("react/jsx-runtime"),Wo=({anchorEl:e,onClose:o,onModuleDetails:t,onModuleExplore:n,node:r,...s})=>{let{address:i,name:l}=r?.data()??{};return(0,p.jsx)(p.Fragment,{children:e?(0,p.jsx)(d.Popper,{anchorEl:e,...s,children:(0,p.jsxs)(d.Card,{elevation:3,children:[(0,p.jsx)(d.CardHeader,{action:o?(0,p.jsx)(d.IconButton,{size:"small",onClick:o,children:(0,p.jsx)(Co.CancelRounded,{})}):null,avatar:(0,p.jsx)(d.Paper,{elevation:6,sx:{bgcolor:"#fff",p:1},children:(0,p.jsx)(xo.Identicon,{value:i,size:24})}),title:l,subheader:i}),(0,p.jsxs)(zo,{children:[t?(0,p.jsx)(d.Button,{onClick:()=>t?.(i),size:"small",variant:"contained",children:"Details"}):null,n?(0,p.jsx)(d.Button,{onClick:()=>n?.(i),size:"small",variant:"contained",children:"Explore"}):null]})]})}):null})},go=(0,d.styled)(Wo,{name:"StyledComponents"})(()=>({zIndex:2})),zo=(0,d.styled)(d.CardActions,{name:"StyledCardActions"})(()=>({display:"flex",justifyContent:"center"}));var N=require("react/jsx-runtime"),No=({hideActions:e,rootModule:o,disableModuleDetails:t,...n})=>{let r=(0,vo.useRef)(null),{handleToggleLabels:s,hideLabels:i,options:l}=me(o??void 0),{hoveredNode:u,setHoveredNode:E,toggleSelectedElement:S}=pe(i),{mod:I,onModuleDetails:y}=ue(o,()=>E(void 0));return(0,N.jsx)(_e,{children:(0,N.jsx)(P,{actions:I||e?null:(0,N.jsx)(ho.Button,{size:"small",onClick:s,variant:"contained",children:"Toggle Labels"}),showDetails:!!I,detail:(0,N.jsx)(po,{onClose:()=>y(null)}),options:l,ref:r,width:"100%",...n,children:(0,N.jsx)(yo,{node:u,children:H=>(0,N.jsx)(go,{anchorEl:H,container:r.current,node:u,onClose:()=>E(void 0),onModuleExplore:S,onModuleDetails:t?void 0:y,placement:"top",open:!0})})})})},Oo=e=>(0,N.jsx)(oe,{children:(0,N.jsx)(No,{...e})});
 //# sourceMappingURL=index.cjs.map