@xyo-network/react-node-renderer 2.64.6 → 2.64.8

package/dist/node/hooks/cytoscape/useSelectedElement.cjs

@@ -1,84 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/hooks/cytoscape/useSelectedElement.tsx
-var useSelectedElement_exports = {};
-__export(useSelectedElement_exports, {
-  useSelectedElement: () => useSelectedElement
-});
-module.exports = __toCommonJS(useSelectedElement_exports);
-var import_react = 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/useToggleSelectedElement.tsx
-var import_material = require("@mui/material");
-
-// src/Cytoscape/CytoscapeStyles.ts
-var NodeBgStyles = (bgColor) => ["background-color", bgColor];
-
-// src/hooks/cytoscape/useToggleSelectedElement.tsx
-var useToggleSelectedElement = (setSelectedElement) => {
-  const { cy } = useCytoscapeInstance(true);
-  const theme = (0, import_material.useTheme)();
-  const updateStyles = (element, styles) => {
-    cy == null ? void 0 : cy.style().selector(`node[id="${element.data().id}"]`).style(...styles);
-  };
-  const toggleSelectedElement = (element) => {
-    setSelectedElement((previousSelectedElement) => {
-      if (previousSelectedElement) {
-        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main));
-      }
-      return element;
-    });
-    updateStyles(element, NodeBgStyles(theme.palette.secondary.main));
-  };
-  return toggleSelectedElement;
-};
-
-// src/hooks/cytoscape/useSelectedElement.tsx
-var useSelectedElement = () => {
-  const { cy } = useCytoscapeInstance(true);
-  const [selectedElement, setSelectedElement] = (0, import_react.useState)();
-  const toggleSelectedElement = useToggleSelectedElement(setSelectedElement);
-  (0, import_react.useEffect)(() => {
-    const listener = (event) => {
-      const element = event.target[0];
-      if (element.isNode()) {
-        toggleSelectedElement(element);
-      }
-    };
-    cy == null ? void 0 : cy.on("select", listener);
-    return () => {
-      cy == null ? void 0 : cy.off("select", listener);
-    };
-  }, [cy, toggleSelectedElement]);
-  return selectedElement;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useSelectedElement
-});
-//# sourceMappingURL=useSelectedElement.cjs.map

package/dist/node/hooks/cytoscape/useSelectedElement.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/hooks/cytoscape/useSelectedElement.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/hooks/cytoscape/useToggleSelectedElement.tsx","../../../../src/Cytoscape/CytoscapeStyles.ts"],"sourcesContent":["import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useToggleSelectedElement } from './useToggleSelectedElement'\n\nexport const useSelectedElement = () => {\n  const { cy } = useCytoscapeInstance(true)\n  const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n  const toggleSelectedElement = useToggleSelectedElement(setSelectedElement)\n\n  useEffect(() => {\n    const listener = (event: EventObject) => {\n      const element: NodeSingular = event.target[0]\n      if (element.isNode()) {\n        toggleSelectedElement(element)\n      }\n    }\n\n    cy?.on('select', listener)\n\n    return () => {\n      cy?.off('select', listener)\n    }\n  }, [cy, toggleSelectedElement])\n\n  return selectedElement\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useTheme } from '@mui/material'\nimport { NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { NodeBgStyles } from '../../Cytoscape'\n\nexport const useToggleSelectedElement = (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => {\n  const { cy } = useCytoscapeInstance(true)\n  const theme = useTheme()\n\n  const updateStyles = (element: NodeSingular, styles: [string, string]) => {\n    cy\n      ?.style()\n      .selector(`node[id=\"${element.data().id}\"]`)\n      .style(...styles)\n  }\n\n  const toggleSelectedElement = (element: NodeSingular) => {\n    setSelectedElement((previousSelectedElement) => {\n      if (previousSelectedElement) {\n        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main))\n      }\n      return element\n    })\n    updateStyles(element, NodeBgStyles(theme.palette.secondary.main))\n  }\n\n  return toggleSelectedElement\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n  selector: 'node[name]',\n  style: {\n    color,\n    'font-family': 'Lexend Deca, Helvetica, sans-serif',\n    'font-size': 12,\n    'overlay-padding': '6px',\n    'text-halign': 'center',\n    'text-outline-color': outlineColor,\n    'text-outline-width': '1px',\n    'text-valign': 'top',\n  },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n  selector: 'node',\n  style: {\n    'background-color': bgColor,\n    'background-height': '75%',\n    'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n    'background-width': '24',\n    label: hideLabels ? undefined : 'data(name)',\n    shape: 'round-rectangle',\n  },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n  selector: 'edge',\n  style: {\n    'curve-style': 'bezier',\n    'line-color': lineColor,\n    'line-opacity': 0.1,\n    'target-arrow-color': targetArrowColor,\n    'target-arrow-shape': 'triangle',\n    width: 3,\n  },\n})\n\nexport const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoC;;;ACDpC,0BAAgC;AAIzB,IAAM,+BAA2B,qCAAwC;;;ACJhF,IAAAA,uBAA6B;AAItB,IAAM,uBAAuB,CAAC,WAAW,cAAU,mCAAa,0BAA0B,qBAAqB,QAAQ;;;ACJ9H,sBAAyB;;;AC0ClB,IAAM,eAAe,CAAC,YAAsC,CAAC,oBAAoB,OAAO;;;ADnCxF,IAAM,2BAA2B,CAAC,uBAA2E;AAClH,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,YAAQ,0BAAS;AAEvB,QAAM,eAAe,CAAC,SAAuB,WAA6B;AACxE,6BACI,QACD,SAAS,YAAY,QAAQ,KAAK,EAAE,EAAE,MACtC,MAAM,GAAG;AAAA,EACd;AAEA,QAAM,wBAAwB,CAAC,YAA0B;AACvD,uBAAmB,CAAC,4BAA4B;AAC9C,UAAI,yBAAyB;AAC3B,qBAAa,yBAAyB,aAAa,MAAM,QAAQ,QAAQ,IAAI,CAAC;AAAA,MAChF;AACA,aAAO;AAAA,IACT,CAAC;AACD,iBAAa,SAAS,aAAa,MAAM,QAAQ,UAAU,IAAI,CAAC;AAAA,EAClE;AAEA,SAAO;AACT;;;AHvBO,IAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAuB;AACrE,QAAM,wBAAwB,yBAAyB,kBAAkB;AAEzE,8BAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAuB;AACvC,YAAM,UAAwB,MAAM,OAAO,CAAC;AAC5C,UAAI,QAAQ,OAAO,GAAG;AACpB,8BAAsB,OAAO;AAAA,MAC/B;AAAA,IACF;AAEA,6BAAI,GAAG,UAAU;AAEjB,WAAO,MAAM;AACX,+BAAI,IAAI,UAAU;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,IAAI,qBAAqB,CAAC;AAE9B,SAAO;AACT;","names":["import_react_shared"]}

package/dist/node/hooks/cytoscape/useSelectedElement.d.cts

@@ -1,3 +0,0 @@
-import { NodeSingular } from 'cytoscape';
-export declare const useSelectedElement: () => NodeSingular | undefined;
-//# sourceMappingURL=useSelectedElement.d.ts.map

package/dist/node/hooks/cytoscape/useSelectedElement.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSelectedElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useSelectedElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,WAAW,CAAA;AAMrD,eAAO,MAAM,kBAAkB,gCAqB9B,CAAA"}

package/dist/node/hooks/cytoscape/useSelectedElement.d.mts

@@ -1,3 +0,0 @@
-import { NodeSingular } from 'cytoscape';
-export declare const useSelectedElement: () => NodeSingular | undefined;
-//# sourceMappingURL=useSelectedElement.d.ts.map

package/dist/node/hooks/cytoscape/useSelectedElement.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSelectedElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useSelectedElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,WAAW,CAAA;AAMrD,eAAO,MAAM,kBAAkB,gCAqB9B,CAAA"}

package/dist/node/hooks/cytoscape/useSelectedElement.d.ts

@@ -1,3 +0,0 @@
-import { NodeSingular } from 'cytoscape';
-export declare const useSelectedElement: () => NodeSingular | undefined;
-//# sourceMappingURL=useSelectedElement.d.ts.map

package/dist/node/hooks/cytoscape/useSelectedElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSelectedElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useSelectedElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,WAAW,CAAA;AAMrD,eAAO,MAAM,kBAAkB,gCAqB9B,CAAA"}

package/dist/node/hooks/cytoscape/useSelectedElement.js

@@ -1,59 +0,0 @@
-// src/hooks/cytoscape/useSelectedElement.tsx
-import { useEffect, useState } from "react";
-
-// src/contexts/CytoscapeInstance/Context.ts
-import { createContextEx } from "@xyo-network/react-shared";
-var CytoscapeInstanceContext = createContextEx();
-
-// src/contexts/CytoscapeInstance/use.ts
-import { useContextEx } from "@xyo-network/react-shared";
-var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
-
-// src/hooks/cytoscape/useToggleSelectedElement.tsx
-import { useTheme } from "@mui/material";
-
-// src/Cytoscape/CytoscapeStyles.ts
-var NodeBgStyles = (bgColor) => ["background-color", bgColor];
-
-// src/hooks/cytoscape/useToggleSelectedElement.tsx
-var useToggleSelectedElement = (setSelectedElement) => {
-  const { cy } = useCytoscapeInstance(true);
-  const theme = useTheme();
-  const updateStyles = (element, styles) => {
-    cy == null ? void 0 : cy.style().selector(`node[id="${element.data().id}"]`).style(...styles);
-  };
-  const toggleSelectedElement = (element) => {
-    setSelectedElement((previousSelectedElement) => {
-      if (previousSelectedElement) {
-        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main));
-      }
-      return element;
-    });
-    updateStyles(element, NodeBgStyles(theme.palette.secondary.main));
-  };
-  return toggleSelectedElement;
-};
-
-// src/hooks/cytoscape/useSelectedElement.tsx
-var useSelectedElement = () => {
-  const { cy } = useCytoscapeInstance(true);
-  const [selectedElement, setSelectedElement] = useState();
-  const toggleSelectedElement = useToggleSelectedElement(setSelectedElement);
-  useEffect(() => {
-    const listener = (event) => {
-      const element = event.target[0];
-      if (element.isNode()) {
-        toggleSelectedElement(element);
-      }
-    };
-    cy == null ? void 0 : cy.on("select", listener);
-    return () => {
-      cy == null ? void 0 : cy.off("select", listener);
-    };
-  }, [cy, toggleSelectedElement]);
-  return selectedElement;
-};
-export {
-  useSelectedElement
-};
-//# sourceMappingURL=useSelectedElement.js.map

package/dist/node/hooks/cytoscape/useSelectedElement.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/hooks/cytoscape/useSelectedElement.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/hooks/cytoscape/useToggleSelectedElement.tsx","../../../../src/Cytoscape/CytoscapeStyles.ts"],"sourcesContent":["import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useToggleSelectedElement } from './useToggleSelectedElement'\n\nexport const useSelectedElement = () => {\n  const { cy } = useCytoscapeInstance(true)\n  const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n  const toggleSelectedElement = useToggleSelectedElement(setSelectedElement)\n\n  useEffect(() => {\n    const listener = (event: EventObject) => {\n      const element: NodeSingular = event.target[0]\n      if (element.isNode()) {\n        toggleSelectedElement(element)\n      }\n    }\n\n    cy?.on('select', listener)\n\n    return () => {\n      cy?.off('select', listener)\n    }\n  }, [cy, toggleSelectedElement])\n\n  return selectedElement\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useTheme } from '@mui/material'\nimport { NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { NodeBgStyles } from '../../Cytoscape'\n\nexport const useToggleSelectedElement = (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => {\n  const { cy } = useCytoscapeInstance(true)\n  const theme = useTheme()\n\n  const updateStyles = (element: NodeSingular, styles: [string, string]) => {\n    cy\n      ?.style()\n      .selector(`node[id=\"${element.data().id}\"]`)\n      .style(...styles)\n  }\n\n  const toggleSelectedElement = (element: NodeSingular) => {\n    setSelectedElement((previousSelectedElement) => {\n      if (previousSelectedElement) {\n        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main))\n      }\n      return element\n    })\n    updateStyles(element, NodeBgStyles(theme.palette.secondary.main))\n  }\n\n  return toggleSelectedElement\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n  selector: 'node[name]',\n  style: {\n    color,\n    'font-family': 'Lexend Deca, Helvetica, sans-serif',\n    'font-size': 12,\n    'overlay-padding': '6px',\n    'text-halign': 'center',\n    'text-outline-color': outlineColor,\n    'text-outline-width': '1px',\n    'text-valign': 'top',\n  },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n  selector: 'node',\n  style: {\n    'background-color': bgColor,\n    'background-height': '75%',\n    'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n    'background-width': '24',\n    label: hideLabels ? undefined : 'data(name)',\n    shape: 'round-rectangle',\n  },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n  selector: 'edge',\n  style: {\n    'curve-style': 'bezier',\n    'line-color': lineColor,\n    'line-opacity': 0.1,\n    'target-arrow-color': targetArrowColor,\n    'target-arrow-shape': 'triangle',\n    width: 3,\n  },\n})\n\nexport const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]\n"],"mappings":";AACA,SAAS,WAAW,gBAAgB;;;ACDpC,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACJhF,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;;;ACJ9H,SAAS,gBAAgB;;;AC0ClB,IAAM,eAAe,CAAC,YAAsC,CAAC,oBAAoB,OAAO;;;ADnCxF,IAAM,2BAA2B,CAAC,uBAA2E;AAClH,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,QAAQ,SAAS;AAEvB,QAAM,eAAe,CAAC,SAAuB,WAA6B;AACxE,6BACI,QACD,SAAS,YAAY,QAAQ,KAAK,EAAE,EAAE,MACtC,MAAM,GAAG;AAAA,EACd;AAEA,QAAM,wBAAwB,CAAC,YAA0B;AACvD,uBAAmB,CAAC,4BAA4B;AAC9C,UAAI,yBAAyB;AAC3B,qBAAa,yBAAyB,aAAa,MAAM,QAAQ,QAAQ,IAAI,CAAC;AAAA,MAChF;AACA,aAAO;AAAA,IACT,CAAC;AACD,iBAAa,SAAS,aAAa,MAAM,QAAQ,UAAU,IAAI,CAAC;AAAA,EAClE;AAEA,SAAO;AACT;;;AHvBO,IAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAuB;AACrE,QAAM,wBAAwB,yBAAyB,kBAAkB;AAEzE,YAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAuB;AACvC,YAAM,UAAwB,MAAM,OAAO,CAAC;AAC5C,UAAI,QAAQ,OAAO,GAAG;AACpB,8BAAsB,OAAO;AAAA,MAC/B;AAAA,IACF;AAEA,6BAAI,GAAG,UAAU;AAEjB,WAAO,MAAM;AACX,+BAAI,IAAI,UAAU;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,IAAI,qBAAqB,CAAC;AAE9B,SAAO;AACT;","names":[]}

package/dist/node/hooks/cytoscape/useToggleSelectedElement.cjs

@@ -1,61 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/hooks/cytoscape/useToggleSelectedElement.tsx
-var useToggleSelectedElement_exports = {};
-__export(useToggleSelectedElement_exports, {
-  useToggleSelectedElement: () => useToggleSelectedElement
-});
-module.exports = __toCommonJS(useToggleSelectedElement_exports);
-var import_material = require("@mui/material");
-
-// 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/Cytoscape/CytoscapeStyles.ts
-var NodeBgStyles = (bgColor) => ["background-color", bgColor];
-
-// src/hooks/cytoscape/useToggleSelectedElement.tsx
-var useToggleSelectedElement = (setSelectedElement) => {
-  const { cy } = useCytoscapeInstance(true);
-  const theme = (0, import_material.useTheme)();
-  const updateStyles = (element, styles) => {
-    cy == null ? void 0 : cy.style().selector(`node[id="${element.data().id}"]`).style(...styles);
-  };
-  const toggleSelectedElement = (element) => {
-    setSelectedElement((previousSelectedElement) => {
-      if (previousSelectedElement) {
-        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main));
-      }
-      return element;
-    });
-    updateStyles(element, NodeBgStyles(theme.palette.secondary.main));
-  };
-  return toggleSelectedElement;
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useToggleSelectedElement
-});
-//# sourceMappingURL=useToggleSelectedElement.cjs.map

package/dist/node/hooks/cytoscape/useToggleSelectedElement.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/hooks/cytoscape/useToggleSelectedElement.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/Cytoscape/CytoscapeStyles.ts"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { NodeBgStyles } from '../../Cytoscape'\n\nexport const useToggleSelectedElement = (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => {\n  const { cy } = useCytoscapeInstance(true)\n  const theme = useTheme()\n\n  const updateStyles = (element: NodeSingular, styles: [string, string]) => {\n    cy\n      ?.style()\n      .selector(`node[id=\"${element.data().id}\"]`)\n      .style(...styles)\n  }\n\n  const toggleSelectedElement = (element: NodeSingular) => {\n    setSelectedElement((previousSelectedElement) => {\n      if (previousSelectedElement) {\n        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main))\n      }\n      return element\n    })\n    updateStyles(element, NodeBgStyles(theme.palette.secondary.main))\n  }\n\n  return toggleSelectedElement\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n  selector: 'node[name]',\n  style: {\n    color,\n    'font-family': 'Lexend Deca, Helvetica, sans-serif',\n    'font-size': 12,\n    'overlay-padding': '6px',\n    'text-halign': 'center',\n    'text-outline-color': outlineColor,\n    'text-outline-width': '1px',\n    'text-valign': 'top',\n  },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n  selector: 'node',\n  style: {\n    'background-color': bgColor,\n    'background-height': '75%',\n    'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n    'background-width': '24',\n    label: hideLabels ? undefined : 'data(name)',\n    shape: 'round-rectangle',\n  },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n  selector: 'edge',\n  style: {\n    'curve-style': 'bezier',\n    'line-color': lineColor,\n    'line-opacity': 0.1,\n    'target-arrow-color': targetArrowColor,\n    'target-arrow-shape': 'triangle',\n    width: 3,\n  },\n})\n\nexport const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyB;;;ACAzB,0BAAgC;AAIzB,IAAM,+BAA2B,qCAAwC;;;ACJhF,IAAAA,uBAA6B;AAItB,IAAM,uBAAuB,CAAC,WAAW,cAAU,mCAAa,0BAA0B,qBAAqB,QAAQ;;;ACsCvH,IAAM,eAAe,CAAC,YAAsC,CAAC,oBAAoB,OAAO;;;AHnCxF,IAAM,2BAA2B,CAAC,uBAA2E;AAClH,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,YAAQ,0BAAS;AAEvB,QAAM,eAAe,CAAC,SAAuB,WAA6B;AACxE,6BACI,QACD,SAAS,YAAY,QAAQ,KAAK,EAAE,EAAE,MACtC,MAAM,GAAG;AAAA,EACd;AAEA,QAAM,wBAAwB,CAAC,YAA0B;AACvD,uBAAmB,CAAC,4BAA4B;AAC9C,UAAI,yBAAyB;AAC3B,qBAAa,yBAAyB,aAAa,MAAM,QAAQ,QAAQ,IAAI,CAAC;AAAA,MAChF;AACA,aAAO;AAAA,IACT,CAAC;AACD,iBAAa,SAAS,aAAa,MAAM,QAAQ,UAAU,IAAI,CAAC;AAAA,EAClE;AAEA,SAAO;AACT;","names":["import_react_shared"]}

package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.cts

@@ -1,4 +0,0 @@
-import { NodeSingular } from 'cytoscape';
-import { Dispatch, SetStateAction } from 'react';
-export declare const useToggleSelectedElement: (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => (element: NodeSingular) => void;
-//# sourceMappingURL=useToggleSelectedElement.d.ts.map

package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToggleSelectedElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useToggleSelectedElement.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAKhD,eAAO,MAAM,wBAAwB,uBAAwB,SAAS,eAAe,YAAY,GAAG,SAAS,CAAC,CAAC,eAWrE,YAAY,SAWrD,CAAA"}

package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.mts

@@ -1,4 +0,0 @@
-import { NodeSingular } from 'cytoscape';
-import { Dispatch, SetStateAction } from 'react';
-export declare const useToggleSelectedElement: (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => (element: NodeSingular) => void;
-//# sourceMappingURL=useToggleSelectedElement.d.ts.map

package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToggleSelectedElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useToggleSelectedElement.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAKhD,eAAO,MAAM,wBAAwB,uBAAwB,SAAS,eAAe,YAAY,GAAG,SAAS,CAAC,CAAC,eAWrE,YAAY,SAWrD,CAAA"}

package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.ts

@@ -1,4 +0,0 @@
-import { NodeSingular } from 'cytoscape';
-import { Dispatch, SetStateAction } from 'react';
-export declare const useToggleSelectedElement: (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => (element: NodeSingular) => void;
-//# sourceMappingURL=useToggleSelectedElement.d.ts.map

package/dist/node/hooks/cytoscape/useToggleSelectedElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToggleSelectedElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useToggleSelectedElement.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAKhD,eAAO,MAAM,wBAAwB,uBAAwB,SAAS,eAAe,YAAY,GAAG,SAAS,CAAC,CAAC,eAWrE,YAAY,SAWrD,CAAA"}

package/dist/node/hooks/cytoscape/useToggleSelectedElement.js

@@ -1,36 +0,0 @@
-// src/hooks/cytoscape/useToggleSelectedElement.tsx
-import { useTheme } from "@mui/material";
-
-// src/contexts/CytoscapeInstance/Context.ts
-import { createContextEx } from "@xyo-network/react-shared";
-var CytoscapeInstanceContext = createContextEx();
-
-// src/contexts/CytoscapeInstance/use.ts
-import { useContextEx } from "@xyo-network/react-shared";
-var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
-
-// src/Cytoscape/CytoscapeStyles.ts
-var NodeBgStyles = (bgColor) => ["background-color", bgColor];
-
-// src/hooks/cytoscape/useToggleSelectedElement.tsx
-var useToggleSelectedElement = (setSelectedElement) => {
-  const { cy } = useCytoscapeInstance(true);
-  const theme = useTheme();
-  const updateStyles = (element, styles) => {
-    cy == null ? void 0 : cy.style().selector(`node[id="${element.data().id}"]`).style(...styles);
-  };
-  const toggleSelectedElement = (element) => {
-    setSelectedElement((previousSelectedElement) => {
-      if (previousSelectedElement) {
-        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main));
-      }
-      return element;
-    });
-    updateStyles(element, NodeBgStyles(theme.palette.secondary.main));
-  };
-  return toggleSelectedElement;
-};
-export {
-  useToggleSelectedElement
-};
-//# sourceMappingURL=useToggleSelectedElement.js.map

package/dist/node/hooks/cytoscape/useToggleSelectedElement.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/hooks/cytoscape/useToggleSelectedElement.tsx","../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../src/contexts/CytoscapeInstance/use.ts","../../../../src/Cytoscape/CytoscapeStyles.ts"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport { NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { NodeBgStyles } from '../../Cytoscape'\n\nexport const useToggleSelectedElement = (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => {\n  const { cy } = useCytoscapeInstance(true)\n  const theme = useTheme()\n\n  const updateStyles = (element: NodeSingular, styles: [string, string]) => {\n    cy\n      ?.style()\n      .selector(`node[id=\"${element.data().id}\"]`)\n      .style(...styles)\n  }\n\n  const toggleSelectedElement = (element: NodeSingular) => {\n    setSelectedElement((previousSelectedElement) => {\n      if (previousSelectedElement) {\n        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main))\n      }\n      return element\n    })\n    updateStyles(element, NodeBgStyles(theme.palette.secondary.main))\n  }\n\n  return toggleSelectedElement\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n  selector: 'node[name]',\n  style: {\n    color,\n    'font-family': 'Lexend Deca, Helvetica, sans-serif',\n    'font-size': 12,\n    'overlay-padding': '6px',\n    'text-halign': 'center',\n    'text-outline-color': outlineColor,\n    'text-outline-width': '1px',\n    'text-valign': 'top',\n  },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n  selector: 'node',\n  style: {\n    'background-color': bgColor,\n    'background-height': '75%',\n    'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n    'background-width': '24',\n    label: hideLabels ? undefined : 'data(name)',\n    shape: 'round-rectangle',\n  },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n  selector: 'edge',\n  style: {\n    'curve-style': 'bezier',\n    'line-color': lineColor,\n    'line-opacity': 0.1,\n    'target-arrow-color': targetArrowColor,\n    'target-arrow-shape': 'triangle',\n    width: 3,\n  },\n})\n\nexport const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]\n"],"mappings":";AAAA,SAAS,gBAAgB;;;ACAzB,SAAS,uBAAuB;AAIzB,IAAM,2BAA2B,gBAAwC;;;ACJhF,SAAS,oBAAoB;AAItB,IAAM,uBAAuB,CAAC,WAAW,UAAU,aAAa,0BAA0B,qBAAqB,QAAQ;;;ACsCvH,IAAM,eAAe,CAAC,YAAsC,CAAC,oBAAoB,OAAO;;;AHnCxF,IAAM,2BAA2B,CAAC,uBAA2E;AAClH,QAAM,EAAE,GAAG,IAAI,qBAAqB,IAAI;AACxC,QAAM,QAAQ,SAAS;AAEvB,QAAM,eAAe,CAAC,SAAuB,WAA6B;AACxE,6BACI,QACD,SAAS,YAAY,QAAQ,KAAK,EAAE,EAAE,MACtC,MAAM,GAAG;AAAA,EACd;AAEA,QAAM,wBAAwB,CAAC,YAA0B;AACvD,uBAAmB,CAAC,4BAA4B;AAC9C,UAAI,yBAAyB;AAC3B,qBAAa,yBAAyB,aAAa,MAAM,QAAQ,QAAQ,IAAI,CAAC;AAAA,MAChF;AACA,aAAO;AAAA,IACT,CAAC;AACD,iBAAa,SAAS,aAAa,MAAM,QAAQ,UAAU,IAAI,CAAC;AAAA,EAClE;AAEA,SAAO;AACT;","names":[]}

package/src/components/RelationalGraph.tsx

@@ -1,71 +0,0 @@
-import { Button, ButtonGroup, styled } from '@mui/material'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import { useShareForwardedRef } from '@xyo-network/react-shared'
-import cytoscape, { Core } from 'cytoscape'
-import { forwardRef, useEffect, useState } from 'react'
-
-import { useCytoscapeInstance } from '../contexts'
-import { NodeRelationalGraphProps } from './lib'
-
-export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, children, options, ...props }, ref) => {
-  const [cy, setCy] = useState<Core>()
-  const { setCy: setCyContext } = useCytoscapeInstance()
-  const sharedRef = useShareForwardedRef(ref)
-
-  const handleReset = () => {
-    cy?.reset()
-    cy?.fit(undefined, 20)
-  }
-
-  useEffect(() => {
-    if (sharedRef) {
-      const newCy = cytoscape({
-        container: sharedRef.current,
-        ...options,
-      })
-      setCy(newCy)
-    }
-  }, [options, sharedRef])
-
-  useEffect(() => {
-    setCyContext?.(cy)
-  }, [cy, setCyContext])
-
-  return (
-    <FlexCol {...props}>
-      <ActionsContainer>
-        <>
-          {actions ? (
-            <ButtonGroup>
-              {actions}
-              <Button size={'small'} variant={'contained'} onClick={handleReset}>
-                Reset View
-              </Button>
-            </ButtonGroup>
-          ) : (
-            <Button size={'small'} variant={'contained'} onClick={handleReset}>
-              Reset
-            </Button>
-          )}
-        </>
-      </ActionsContainer>
-      {/* Cytoscape Element */}
-      <FlexCol alignItems="stretch" height="100%" position="absolute" ref={sharedRef} width="100%"></FlexCol>
-      {children}
-    </FlexCol>
-  )
-})
-
-NodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'
-
-const ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(({ theme }) => ({
-  flexWrap: 'wrap',
-  gap: theme.spacing(1),
-  position: 'absolute',
-  right: '10px',
-  top: '10px',
-  zIndex: 2,
-}))
-
-/** @deprecated */
-export const NodeRelationalGraph = NodeRelationalGraphFlexBox

package/src/components/module/graph/NodeHover.tsx

@@ -1,68 +0,0 @@
-import { PopperProps } from '@mui/material'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { NodeSingular } from 'cytoscape'
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-
-import { ModuleHoverPopper } from './Popper'
-
-export interface ModuleHoverProps {
-  node?: NodeSingular
-}
-
-export const ModuleGraphNodeHover: React.FC<ModuleHoverProps> = ({ node }) => {
-  const { address, name } = node?.data() ?? {}
-  const [boundingBox, setBoundingBox] = useState(node?.renderedBoundingBox())
-  const ref = useRef<HTMLDivElement>(null)
-  const [currentEl, setCurrentEl] = useState<PopperProps['anchorEl'] | null>(null)
-
-  // Ensure first render clears the previous element when node changes to avoid flicker
-  useEffect(() => {
-    setCurrentEl(null)
-  }, [node])
-
-  useEffect(() => {
-    if (node) {
-      setBoundingBox(node.renderedBoundingBox())
-    }
-
-    const listener = () => {
-      setBoundingBox(node?.renderedBoundingBox())
-    }
-
-    node?.on('position', listener)
-
-    return () => {
-      node?.off('position', undefined, listener)
-    }
-  }, [node])
-
-  // Once boundingBox state is set and applied to the layout, update the ref
-  useLayoutEffect(() => {
-    setCurrentEl(ref.current)
-  }, [boundingBox])
-
-  return (
-    <>
-      <FlexCol
-        ref={ref}
-        sx={{
-          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
-          // backgroundColor: '#fff',
-          // opacity: 0.25,
-          cursor: 'pointer',
-          height: boundingBox?.h,
-          left: boundingBox?.x1,
-          pointerEvents: 'none',
-          position: 'absolute',
-          top: boundingBox?.y1,
-          width: boundingBox?.w,
-        }}
-      />
-      {node ? (
-        <>
-          <ModuleHoverPopper address={address} element={currentEl} name={name} placement={'top'} open sx={{ zIndex: 2 }} />
-        </>
-      ) : null}
-    </>
-  )
-}

package/src/hooks/cytoscape/useSelectedElement.tsx

@@ -1,28 +0,0 @@
-import { EventObject, NodeSingular } from 'cytoscape'
-import { useEffect, useState } from 'react'
-
-import { useCytoscapeInstance } from '../../contexts'
-import { useToggleSelectedElement } from './useToggleSelectedElement'
-
-export const useSelectedElement = () => {
-  const { cy } = useCytoscapeInstance(true)
-  const [selectedElement, setSelectedElement] = useState<NodeSingular>()
-  const toggleSelectedElement = useToggleSelectedElement(setSelectedElement)
-
-  useEffect(() => {
-    const listener = (event: EventObject) => {
-      const element: NodeSingular = event.target[0]
-      if (element.isNode()) {
-        toggleSelectedElement(element)
-      }
-    }
-
-    cy?.on('select', listener)
-
-    return () => {
-      cy?.off('select', listener)
-    }
-  }, [cy, toggleSelectedElement])
-
-  return selectedElement
-}

package/src/hooks/cytoscape/useToggleSelectedElement.tsx

@@ -1,30 +0,0 @@
-import { useTheme } from '@mui/material'
-import { NodeSingular } from 'cytoscape'
-import { Dispatch, SetStateAction } from 'react'
-
-import { useCytoscapeInstance } from '../../contexts'
-import { NodeBgStyles } from '../../Cytoscape'
-
-export const useToggleSelectedElement = (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => {
-  const { cy } = useCytoscapeInstance(true)
-  const theme = useTheme()
-
-  const updateStyles = (element: NodeSingular, styles: [string, string]) => {
-    cy
-      ?.style()
-      .selector(`node[id="${element.data().id}"]`)
-      .style(...styles)
-  }
-
-  const toggleSelectedElement = (element: NodeSingular) => {
-    setSelectedElement((previousSelectedElement) => {
-      if (previousSelectedElement) {
-        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main))
-      }
-      return element
-    })
-    updateStyles(element, NodeBgStyles(theme.palette.secondary.main))
-  }
-
-  return toggleSelectedElement
-}