@xyo-network/react-node-renderer 2.49.2 → 2.49.4

package/dist/esm/components/ProvidedNodeRenderer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useProvidedWrappedNode } from '@xyo-network/react-node';
+import { useCytoscapeElements, useCytoscapeOptions } from '../hooks';
+import { NodeRelationalGraph } from './RelationalGraph';
+export const ProvidedNodeRenderer = ({ node, ...props }) => {
+    const [providedNode] = useProvidedWrappedNode();
+    const elements = useCytoscapeElements(node ?? providedNode);
+    const options = useCytoscapeOptions(elements);
+    return _jsx(NodeRelationalGraph, { alignItems: "stretch", flexGrow: 1, height: "100%", options: options, ...props });
+};
+//# sourceMappingURL=ProvidedNodeRenderer.js.map

package/dist/esm/components/ProvidedNodeRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProvidedNodeRenderer.js","sourceRoot":"","sources":["../../../src/components/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAEpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAMvD,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC9F,MAAM,CAAC,YAAY,CAAC,GAAG,sBAAsB,EAAE,CAAA;IAC/C,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAI,IAAI,YAAY,CAAC,CAAA;IAC3D,MAAM,OAAO,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IAE7C,OAAO,KAAC,mBAAmB,IAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,KAAM,KAAK,GAAI,CAAA;AAC7G,CAAC,CAAA"}

package/dist/esm/components/RelationalGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelationalGraph.js","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAgB,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,SAAqC,MAAM,WAAW,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAOlD,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAAsC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzH,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,EAAQ,CAAA;IACpC,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,oBAAoB,EAAE,CAAA;IACtD,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAE3C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,EAAE,EAAE,KAAK,EAAE,CAAA;QACX,EAAE,EAAE,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,MAAM,KAAK,GAAG,SAAS,CAAC;gBACtB,SAAS,EAAE,SAAS,CAAC,OAAO;gBAC5B,GAAG,OAAO;aACX,CAAC,CAAA;YACF,KAAK,CAAC,KAAK,CAAC,CAAA;SACb;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,EAAE,CAAC,EAAE,CAAC,CAAA;IACpB,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAA;IAEtB,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aAChB,MAAC,gBAAgB,eACd,OAAO,EACR,KAAC,MAAM,IAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,sBAExD,IACQ,EACnB,KAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,UAAU,EAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,GAAW,IAC/F,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA;AAEvD,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5E,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,CAAC;CACV,CAAC,CAAC,CAAA"}
+{"version":3,"file":"RelationalGraph.js","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,SAAmB,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAGlD,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAA2C,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9H,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,EAAQ,CAAA;IACpC,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,oBAAoB,EAAE,CAAA;IACtD,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAE3C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,EAAE,EAAE,KAAK,EAAE,CAAA;QACX,EAAE,EAAE,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,MAAM,KAAK,GAAG,SAAS,CAAC;gBACtB,SAAS,EAAE,SAAS,CAAC,OAAO;gBAC5B,GAAG,OAAO;aACX,CAAC,CAAA;YACF,KAAK,CAAC,KAAK,CAAC,CAAA;SACb;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,EAAE,CAAC,EAAE,CAAC,CAAA;IACpB,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAA;IAEtB,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aAChB,MAAC,gBAAgB,eACd,OAAO,EACR,KAAC,MAAM,IAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,sBAExD,IACQ,EACnB,KAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,UAAU,EAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,GAAW,IAC/F,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA;AAEvD,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5E,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,CAAC;CACV,CAAC,CAAC,CAAA"}

package/dist/esm/components/index.js

@@ -1,2 +1,3 @@
+export * from './ProvidedNodeRenderer';
 export * from './RelationalGraph';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA"}

package/dist/esm/components/lib/RelationalGraphProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RelationalGraphProps.js.map

package/dist/esm/components/lib/RelationalGraphProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationalGraphProps.js","sourceRoot":"","sources":["../../../../src/components/lib/RelationalGraphProps.ts"],"names":[],"mappings":""}

package/dist/esm/components/lib/index.js

@@ -0,0 +1,2 @@
+export * from './RelationalGraphProps';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/dist/types/components/ProvidedNodeRenderer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { NodeWrapper } from '@xyo-network/node';
+import { NodeRelationalGraphProps } from './lib';
+export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
+    node?: NodeWrapper;
+}
+export declare const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps>;
+//# sourceMappingURL=ProvidedNodeRenderer.d.ts.map

package/dist/types/components/ProvidedNodeRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProvidedNodeRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAI/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAGhD,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAMpE,CAAA"}

package/dist/types/components/RelationalGraph.d.ts

@@ -1,9 +1,4 @@
-import { FlexBoxProps } from '@xylabs/react-flexbox';
-import { CytoscapeOptions } from 'cytoscape';
-import { ReactNode } from 'react';
-export interface NodeRelationalGraph extends FlexBoxProps {
-    actions?: ReactNode;
-    options?: CytoscapeOptions;
-}
-export declare const NodeRelationalGraph: import("react").ForwardRefExoticComponent<NodeRelationalGraph & import("react").RefAttributes<HTMLDivElement>>;
+/// <reference types="react" />
+import { NodeRelationalGraphProps } from './lib';
+export declare const NodeRelationalGraph: import("react").ForwardRefExoticComponent<NodeRelationalGraphProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=RelationalGraph.d.ts.map

package/dist/types/components/RelationalGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RelationalGraph.d.ts","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAoB,MAAM,uBAAuB,CAAA;AAEtE,OAAkB,EAAQ,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC7D,OAAO,EAAc,SAAS,EAAuB,MAAM,OAAO,CAAA;AAIlE,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B;AAED,eAAO,MAAM,mBAAmB,gHAmC9B,CAAA"}
+{"version":3,"file":"RelationalGraph.d.ts","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAEhD,eAAO,MAAM,mBAAmB,qHAmC9B,CAAA"}

package/dist/types/components/index.d.ts

@@ -1,2 +1,3 @@
+export * from './ProvidedNodeRenderer';
 export * from './RelationalGraph';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA"}

package/dist/types/components/lib/RelationalGraphProps.d.ts

@@ -0,0 +1,8 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { CytoscapeOptions } from 'cytoscape';
+import { ReactNode } from 'react';
+export interface NodeRelationalGraphProps extends FlexBoxProps {
+    actions?: ReactNode;
+    options?: CytoscapeOptions;
+}
+//# sourceMappingURL=RelationalGraphProps.d.ts.map

package/dist/types/components/lib/RelationalGraphProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationalGraphProps.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/RelationalGraphProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B"}

package/dist/types/components/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RelationalGraphProps';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/package.json

@@ -13,9 +13,10 @@
     "@xylabs/react-async-effect": "^2.17.2",
     "@xylabs/react-flexbox": "^2.17.2",
     "@xylabs/react-shared": "^2.17.2",
-    "@xyo-network/module": "^2.56.0",
-    "@xyo-network/node": "^2.56.0",
-    "@xyo-network/react-shared": "^2.49.2",
+    "@xyo-network/module": "^2.56.2",
+    "@xyo-network/node": "^2.56.2",
+    "@xyo-network/react-node": "^2.49.4",
+    "@xyo-network/react-shared": "^2.49.4",
     "cytoscape": "^3.24.0"
   },
   "peerDependencies": {
@@ -28,21 +29,21 @@
     "react-router-dom": "^6"
   },
   "devDependencies": {
-    "@storybook/react": "^7.0.7",
+    "@storybook/react": "^7.0.8",
     "@types/cytoscape": "^3.19.9",
-    "@types/react-dom": "^18.2.1",
+    "@types/react-dom": "^18.2.3",
     "@xylabs/ts-scripts-yarn3": "^2.17.6",
     "@xylabs/tsconfig-react": "^2.17.5",
-    "@xyo-network/account": "^2.56.0",
-    "@xyo-network/archivist": "^2.56.0",
-    "@xyo-network/bridge": "^2.56.0",
-    "@xyo-network/id-plugin": "^2.56.0",
-    "@xyo-network/module": "^2.56.0",
-    "@xyo-network/node": "^2.56.0",
-    "@xyo-network/react-node": "^2.49.2",
-    "@xyo-network/react-storybook": "^2.49.2",
-    "@xyo-network/react-wallet": "^2.49.2",
-    "@xyo-network/sentinel": "^2.56.0",
+    "@xyo-network/account": "^2.56.2",
+    "@xyo-network/archivist": "^2.56.2",
+    "@xyo-network/bridge": "^2.56.2",
+    "@xyo-network/id-plugin": "^2.56.2",
+    "@xyo-network/module": "^2.56.2",
+    "@xyo-network/node": "^2.56.2",
+    "@xyo-network/react-node": "^2.49.4",
+    "@xyo-network/react-storybook": "^2.49.4",
+    "@xyo-network/react-wallet": "^2.49.4",
+    "@xyo-network/sentinel": "^2.56.2",
     "typescript": "^5.0.4"
   },
   "description": "Common React library for all XYO projects that use React",
@@ -88,5 +89,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.49.2"
+  "version": "2.49.4"
 }

package/src/components/ProvidedNodeRenderer.tsx

@@ -0,0 +1,18 @@
+import { NodeWrapper } from '@xyo-network/node'
+import { useProvidedWrappedNode } from '@xyo-network/react-node'
+
+import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
+import { NodeRelationalGraphProps } from './lib'
+import { NodeRelationalGraph } from './RelationalGraph'
+
+export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
+  node?: NodeWrapper
+}
+
+export const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {
+  const [providedNode] = useProvidedWrappedNode()
+  const elements = useCytoscapeElements(node ?? providedNode)
+  const options = useCytoscapeOptions(elements)
+
+  return <NodeRelationalGraph alignItems="stretch" flexGrow={1} height="100%" options={options} {...props} />
+}

package/src/components/RelationalGraph.stories.tsx

@@ -2,7 +2,7 @@ import { Button, ButtonGroup } from '@mui/material'
 import { Decorator, Meta, StoryFn } from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { HDWallet } from '@xyo-network/account'
-import { ArchivistConfigSchema, MemoryArchivist } from '@xyo-network/archivist'
+import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
 import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge'
 import { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'
 import { MemoryNode, NodeConfigSchema, NodeWrapper } from '@xyo-network/node'
@@ -13,6 +13,7 @@ import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
 import { useMemo, useState } from 'react'
 
 import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
+import { ProvidedNodeRenderer } from './ProvidedNodeRenderer'
 import { NodeRelationalGraph } from './RelationalGraph'
 import { options } from './story'
 
@@ -34,7 +35,7 @@ export const MemoryNodeDecorator: Decorator = (Story, args) => {
         await node.register(bridge)
         await node.attach(bridge.address, true)
 
-        const archivist = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist', schema: ArchivistConfigSchema } })
+        const archivist = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist', schema: MemoryArchivistConfigSchema } })
         await node.register(archivist)
         await node.attach(archivist.address, true)
 
@@ -42,7 +43,7 @@ export const MemoryNodeDecorator: Decorator = (Story, args) => {
         await node.register(sentinel)
         await node.attach(sentinel.address, true)
 
-        const archivist1 = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist1', schema: ArchivistConfigSchema } })
+        const archivist1 = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist1', schema: MemoryArchivistConfigSchema } })
         await node1.register(archivist1)
         await node1.attach(archivist1.address, true)
 
@@ -89,6 +90,8 @@ const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraph> = (props) => {
   return <NodeRelationalGraph options={options} {...props} />
 }
 
+const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer {...props} />
+
 const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraph> = (props) => {
   const [node] = useModule('ChildNode')
   const wrappedNode = useMemo(() => (node ? NodeWrapper.wrap(node) : undefined), [node])
@@ -156,4 +159,8 @@ const WithAttachDetach = TemplateAttachDetach.bind({})
 WithAttachDetach.args = { ...defaultProps }
 WithAttachDetach.decorators = [MemoryNodeDecorator]
 
-export { Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe }
+const WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({})
+WithProvidedNodeRenderer.args = { ...defaultProps }
+WithProvidedNodeRenderer.decorators = [MemoryNodeDecorator]
+
+export { Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer }

package/src/components/RelationalGraph.tsx

@@ -1,17 +1,13 @@
 import { Button, styled } from '@mui/material'
-import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import { useShareForwardedRef } from '@xyo-network/react-shared'
-import cytoscape, { Core, CytoscapeOptions } from 'cytoscape'
-import { forwardRef, ReactNode, useEffect, useState } from 'react'
+import cytoscape, { Core } from 'cytoscape'
+import { forwardRef, useEffect, useState } from 'react'
 
 import { useCytoscapeInstance } from '../contexts'
+import { NodeRelationalGraphProps } from './lib'
 
-export interface NodeRelationalGraph extends FlexBoxProps {
-  actions?: ReactNode
-  options?: CytoscapeOptions
-}
-
-export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGraph>(({ actions, options, ...props }, ref) => {
+export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, options, ...props }, ref) => {
   const [cy, setCy] = useState<Core>()
   const { setCy: setCyContext } = useCytoscapeInstance()
   const sharedRef = useShareForwardedRef(ref)

package/src/components/index.ts

@@ -1 +1,2 @@
+export * from './ProvidedNodeRenderer'
 export * from './RelationalGraph'

package/src/components/lib/RelationalGraphProps.ts

@@ -0,0 +1,8 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { CytoscapeOptions } from 'cytoscape'
+import { ReactNode } from 'react'
+
+export interface NodeRelationalGraphProps extends FlexBoxProps {
+  actions?: ReactNode
+  options?: CytoscapeOptions
+}

package/src/components/lib/index.ts

@@ -0,0 +1 @@
+export * from './RelationalGraphProps'