@xyo-network/react-node-renderer 2.64.0 → 2.64.3

package/dist/node/components/module/index.cjs

@@ -0,0 +1,596 @@
+"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/components/module/index.ts
+var module_exports = {};
+__export(module_exports, {
+  ModuleCardParser: () => ModuleCardParser,
+  ModuleGraphFlexBox: () => ModuleGraphFlexBox
+});
+module.exports = __toCommonJS(module_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 = ({ module: module2 }) => {
+  switch (true) {
+    case (0, import_archivist_model.isArchivistInstance)(module2):
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_archivist.ArchivistCard, { module: (0, import_archivist_model.asArchivistInstance)(module2) });
+    case (0, import_diviner_model.isDivinerInstance)(module2):
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_module.DivinerCard, { module: (0, import_diviner_model.asDivinerInstance)(module2) });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_module.ModuleCard, { module: module2 });
+  }
+};
+
+// src/components/module/graph/GraphFlexBox.tsx
+var import_material5 = require("@mui/material");
+
+// src/hooks/cytoscape/useCytoscapeElements.ts
+var import_react_async_effect = require("@xylabs/react-async-effect");
+var import_node_model3 = require("@xyo-network/node-model");
+var import_react = require("react");
+
+// src/Cytoscape/CytoscapeElements.ts
+var import_node_model2 = require("@xyo-network/node-model");
+
+// 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.getElementsByTagName("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: "",
+  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
+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 = require("@xyo-network/sentinel");
+var import_witness = require("@xyo-network/witness");
+var parseModuleType = (module2) => {
+  let type = "module";
+  if (module2) {
+    if ((0, import_archivist_model2.isArchivistInstance)(module2)) {
+      type = "archivist";
+    } else if ((0, import_bridge_model.isBridgeInstance)(module2)) {
+      type = "bridge";
+    } else if ((0, import_diviner_model2.isDivinerInstance)(module2)) {
+      type = "diviner";
+    } else if ((0, import_node_model.isNodeInstance)(module2)) {
+      type = "node";
+    } else if ((0, import_sentinel.isSentinelInstance)(module2)) {
+      type = "sentinel";
+    } else if ((0, import_witness.isWitnessModule)(module2)) {
+      type = "witness";
+    } else {
+      type = "module";
+    }
+  }
+  return type;
+};
+
+// src/Cytoscape/CytoscapeElements.ts
+var CytoscapeElements = class _CytoscapeElements {
+  static MaxNameLength = 20;
+  static buildEdge(rootNode, newNode) {
+    return {
+      data: {
+        id: `${rootNode.data.id}/${newNode.data.id}`,
+        source: rootNode.data.id,
+        target: newNode.data.id
+      }
+    };
+  }
+  static async buildElements(module2) {
+    const newRootNode = _CytoscapeElements.buildRootNode(module2);
+    const newElements = [newRootNode];
+    try {
+      const childElements = await _CytoscapeElements.recurseNodes(module2);
+      childElements == null ? void 0 : childElements.forEach((module3) => {
+        const newNode = _CytoscapeElements.buildNode(module3, newRootNode.data.id);
+        newElements.push(newNode);
+        const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
+        newElements.push(newEdge);
+      });
+      return newElements;
+    } catch (e) {
+      console.error("error resolving modules", e);
+      return [];
+    }
+  }
+  static buildNode(module2, rootNodeId) {
+    const { address, config } = module2;
+    const normalizedName = config.name ?? address.substring(0, 8);
+    return {
+      data: {
+        address,
+        id: address,
+        name: normalizedName,
+        rootNodeId,
+        type: parseModuleType(module2)
+      }
+    };
+  }
+  static buildRootNode = (module2) => {
+    return _CytoscapeElements.buildNode(module2);
+  };
+  static normalizeName(name) {
+    if (!name)
+      return;
+    if (name.length > this.MaxNameLength)
+      return `${name.substring(0, 20)}...`;
+    return name;
+  }
+  static async recurseNodes(module2, maxTraversals = 1) {
+    let localDepth = 0;
+    const childModules = [];
+    const traverse = async (nestedNode) => {
+      if (localDepth < maxTraversals) {
+        const modules = await nestedNode.resolve(void 0, { direction: "down", maxDepth: 2 });
+        await Promise.all(
+          modules.map(async (child) => {
+            if (child !== nestedNode && (0, import_node_model2.isNodeInstance)(child)) {
+              localDepth++;
+              await traverse(child);
+            } else if (child !== module2) {
+              childModules.push(child);
+            }
+          })
+        );
+      }
+    };
+    await traverse(module2);
+    return childModules;
+  }
+};
+
+// 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,
+  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 NodeIdStyles = (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 NodeStyled = (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 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/useCytoscapeElements.ts
+var useCytoscapeElements = (module2) => {
+  const [elements, setElements] = (0, import_react.useState)([]);
+  (0, import_react_async_effect.useAsyncEffect)(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      if (module2) {
+        const newElements = await CytoscapeElements.buildElements(module2) ?? [];
+        setElements(newElements);
+      }
+    },
+    [module2]
+  );
+  (0, import_react.useEffect)(() => {
+    let attachedListener = void 0;
+    let detachedListener = void 0;
+    if (module2 && (0, import_node_model3.isNodeInstance)(module2)) {
+      attachedListener = module2.on("moduleAttached", async () => {
+        const newElements = await CytoscapeElements.buildElements(module2) ?? [];
+        setElements(newElements);
+      });
+      detachedListener = module2.on("moduleDetached", async () => {
+        const newElements = await CytoscapeElements.buildElements(module2) ?? [];
+        setElements(newElements);
+      });
+    }
+    return () => {
+      attachedListener == null ? void 0 : attachedListener();
+      detachedListener == null ? void 0 : detachedListener();
+    };
+  }, [module2]);
+  return elements;
+};
+
+// src/hooks/cytoscape/useCytoscapeOptions.ts
+var import_react4 = require("react");
+
+// src/hooks/cytoscape/useCytoscapeStyle.tsx
+var import_material2 = require("@mui/material");
+var import_react3 = require("react");
+
+// src/hooks/cytoscape/useIcons.tsx
+var import_material = require("@mui/material");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var useIcons = () => {
+  const theme = (0, import_material.useTheme)();
+  const icons = (0, import_react2.useMemo)(() => {
+    const iconMap = generateIconMap();
+    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
+      const icon = /* @__PURE__ */ (0, import_jsx_runtime2.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_react3.useMemo)(
+    () => [
+      NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
+      NodeStyled(icons, theme.palette.primary.main, hideLabels),
+      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 options = (0, import_react4.useMemo)(() => {
+    if (elements && layout && style) {
+      return {
+        elements,
+        layout: layout ?? ConcentricLayout,
+        style: style ?? defaultStyle
+      };
+    }
+  }, [elements, layout, style]);
+  return options;
+};
+
+// src/hooks/cytoscape/useHoveredNode.tsx
+var import_react5 = require("react");
+
+// src/contexts/CytoscapeInstance/Context.ts
+var import_react_shared = require("@xyo-network/react-shared");
+var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
+
+// src/contexts/CytoscapeInstance/use.ts
+var import_react_shared2 = require("@xyo-network/react-shared");
+var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/hooks/cytoscape/useHoveredNode.tsx
+var useHoveredNode = (renderedElements) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [hoveredNode, setHoveredNode] = (0, import_react5.useState)();
+  const nodeListener = (0, import_react5.useCallback)((node) => {
+    node.on("mouseover tap", () => {
+      setHoveredNode(node);
+    });
+    node.on("mouseout", () => {
+      setHoveredNode(void 0);
+    });
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    if (renderedElements) {
+      renderedElements.nodes().forEach(nodeListener);
+    }
+  }, [nodeListener, renderedElements]);
+  (0, import_react5.useEffect)(() => {
+    cy == null ? void 0 : cy.ready(() => {
+      cy.nodes().forEach(nodeListener);
+    });
+  }, [cy, nodeListener]);
+  return hoveredNode;
+};
+
+// src/hooks/cytoscape/useNewElements.tsx
+var import_react_node = require("@xyo-network/react-node");
+var import_react6 = require("react");
+var useNewElements = (selectedElement) => {
+  const { cy } = useCytoscapeInstance(true);
+  const { address: selectedAddress } = (selectedElement == null ? void 0 : selectedElement.data()) ?? {};
+  const [module2] = (0, import_react_node.useModuleFromNode)(selectedAddress);
+  const newElements = useCytoscapeElements(module2);
+  (0, import_react6.useEffect)(() => {
+    if (selectedAddress) {
+      const element = cy == null ? void 0 : cy.$(`node[id="${selectedAddress}"]`);
+      if (element == null ? void 0 : element.length)
+        cy == null ? void 0 : cy.center(element);
+    }
+  }, [cy, selectedAddress]);
+  return newElements;
+};
+
+// src/hooks/cytoscape/useRelationalGraphOptions.tsx
+var import_react7 = require("react");
+var useRelationalGraphOptions = (module2) => {
+  const [hideLabels, setHideLabels] = (0, import_react7.useState)(true);
+  const handleToggleLabels = () => {
+    setHideLabels((oldValue) => !oldValue);
+  };
+  const elements = useCytoscapeElements(module2);
+  const style = useCytoscapeStyle(hideLabels);
+  const options = useCytoscapeOptions(elements, style, ConcentricLayout);
+  return { handleToggleLabels, hideLabels, options };
+};
+
+// src/hooks/cytoscape/useRenderNewElements.tsx
+var import_react8 = require("react");
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = (0, import_react8.useState)();
+  (0, import_react8.useEffect)(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy == null ? void 0 : cy.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy == null ? void 0 : cy.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+
+// src/hooks/cytoscape/useSelectedElement.tsx
+var import_react9 = require("react");
+var useSelectedElement = () => {
+  const { cy } = useCytoscapeInstance(true);
+  const [selectedElement, setSelectedElement] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
+    const listener = (event) => {
+      const element = event.target[0];
+      if (element.isNode())
+        setSelectedElement(element);
+    };
+    cy == null ? void 0 : cy.on("select", listener);
+    return () => {
+      cy == null ? void 0 : cy.off("select", listener);
+    };
+  }, [cy, setSelectedElement]);
+  return selectedElement;
+};
+
+// src/components/cytoscape-extensions/WithExtensions.tsx
+var import_cytoscape = require("cytoscape");
+var import_cytoscape_cola = __toESM(require("cytoscape-cola"), 1);
+var import_react10 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var WithExtensions = ({ children }) => {
+  const [initialized, setInitialized] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
+    (0, import_cytoscape.use)(import_cytoscape_cola.default);
+    setInitialized(true);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: initialized ? children : void 0 });
+};
+
+// src/components/RelationalGraph.tsx
+var import_material3 = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react_shared3 = require("@xyo-network/react-shared");
+var import_cytoscape2 = __toESM(require("cytoscape"), 1);
+var import_react11 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var NodeRelationalGraphFlexBox = (0, import_react11.forwardRef)(({ actions, children, options, ...props }, ref) => {
+  const [cy, setCy] = (0, import_react11.useState)();
+  const { setCy: setCyContext } = useCytoscapeInstance();
+  const sharedRef = (0, import_react_shared3.useShareForwardedRef)(ref);
+  const handleReset = () => {
+    cy == null ? void 0 : cy.reset();
+    cy == null ? void 0 : cy.fit(void 0, 20);
+  };
+  (0, import_react11.useEffect)(() => {
+    if (sharedRef) {
+      const newCy = (0, import_cytoscape2.default)({
+        container: sharedRef.current,
+        ...options
+      });
+      setCy(newCy);
+    }
+  }, [options, sharedRef]);
+  (0, import_react11.useEffect)(() => {
+    setCyContext == null ? void 0 : setCyContext(cy);
+  }, [cy, setCyContext]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_flexbox.FlexCol, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.ButtonGroup, { children: [
+      actions,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
+    children
+  ] });
+});
+NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
+var ActionsContainer = (0, import_material3.styled)(import_react_flexbox.FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
+  flexWrap: "wrap",
+  gap: theme.spacing(1),
+  position: "absolute",
+  right: "10px",
+  top: "10px",
+  zIndex: 2
+}));
+
+// src/components/module/graph/NodeHover.tsx
+var import_react12 = require("react");
+
+// src/components/module/graph/Popper.tsx
+var import_material4 = require("@mui/material");
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
+var import_react_identicon = require("@xylabs/react-identicon");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ModuleHoverPopper = ({ address, element, name, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox2.FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => (0, import_material4.alpha)(theme.palette.background.paper, 0.95) }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox2.FlexRow, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_identicon.Identicon, { value: address, size: 24 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Typography, { children: name })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Chip, { label: address, color: "primary" })
+  ] }) });
+};
+
+// src/components/module/graph/NodeHover.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ModuleGraphNodeHover = ({ node }) => {
+  const { address, name } = (node == null ? void 0 : node.data()) ?? {};
+  const [boundingBox, setBoundingBox] = (0, import_react12.useState)(node == null ? void 0 : node.renderedBoundingBox());
+  const ref = (0, import_react12.useRef)(null);
+  const [currentEl, setCurrentEl] = (0, import_react12.useState)(null);
+  (0, import_react12.useLayoutEffect)(() => {
+    if (node && ref.current) {
+      setBoundingBox(node.renderedBoundingBox());
+      setCurrentEl(ref.current);
+    }
+    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]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: node ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        ref,
+        style: {
+          // backgroundColor: '#fff',
+          // opacity: 0.25,
+          cursor: "pointer",
+          height: boundingBox == null ? void 0 : boundingBox.h,
+          left: boundingBox == null ? void 0 : boundingBox.x1,
+          pointerEvents: "none",
+          position: "absolute",
+          top: boundingBox == null ? void 0 : boundingBox.y1,
+          width: boundingBox == null ? void 0 : boundingBox.w
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true })
+  ] }) : null });
+};
+
+// src/components/module/graph/GraphFlexBox.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ModuleGraphFlexBox = ({ rootModule, ...props }) => {
+  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? void 0);
+  const selectedElement = useSelectedElement();
+  const newElements = useNewElements(selectedElement);
+  const renderedElements = useRenderNewElements(newElements, hideLabels);
+  const hoveredNode = useHoveredNode(renderedElements);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WithExtensions, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    NodeRelationalGraphFlexBox,
+    {
+      actions: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material5.Button, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
+      options,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModuleGraphNodeHover, { node: hoveredNode })
+    }
+  ) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModuleCardParser,
+  ModuleGraphFlexBox
+});
+//# sourceMappingURL=index.cjs.map