@samoramachel/netuniverse 1.0.0

package/README.md

@@ -0,0 +1,175 @@
+# NetUniverse Explorer
+
+A beautiful 3D graph visualization library for React built with Three.js and React Three Fiber.
+
+![Network Universe](https://img.shields.io/badge/version-1.0.0-blue.svg)
+
+## Features
+
+- 🌌 **3D Network Visualization**: Immersive particle-based graph rendering with 4000+ background nodes
+- ⚡ **Physics Simulation**: Cosmos force-directed layout for main nodes
+- 🎨 **Interactive Animations**: 
+  - Grab interaction (hover to connect)
+  - Color shift on click (customizable)
+  - Smooth camera transitions
+- ⚙️ **Fully Configurable**: Control colors, distances, animations, and camera behavior via `config.json`
+- 📦 **TypeScript Support**: Full type definitions included
+- 🎯 **Zero Dependencies Bundled**: Peer dependencies for minimal bundle size
+
+## Installation
+
+```bash
+npm install netuniverse
+# or
+yarn add netuniverse
+```
+
+### Peer Dependencies
+
+You must install these alongside the library:
+
+```bash
+npm install react react-dom three
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { GraphScene } from 'netuniverse';
+import type { GraphData } from 'netuniverse';
+
+const data: GraphData = {
+  nodes: [
+    { id: '1', label: 'Node 1', cluster: 'CORE', x: 0, y: 0, z: 0 },
+    { id: '2', label: 'Node 2', cluster: 'FINANCE', x: 100, y: 0, z: 0 },
+  ],
+  links: [
+    { source: '1', target: '2' }
+  ]
+};
+
+function App() {
+  const [selectedNode, setSelectedNode] = useState(null);
+
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <GraphScene
+        data={data}
+        onNodeSelect={setSelectedNode}
+        selectedNodeId={selectedNode?.id || null}
+      />
+    </div>
+  );
+}
+```
+
+### Next.js Usage
+
+```tsx
+'use client';
+import dynamic from 'next/dynamic';
+
+const GraphScene = dynamic(
+  () => import('NetUniverse-explorer').then(mod => ({ default: mod.GraphScene })),
+  { ssr: false }
+);
+
+export default function Page() {
+  // ... same as above
+}
+```
+
+## Configuration
+
+You can customize the graph behavior by importing and modifying the default config:
+
+```tsx
+import { defaultConfig } from 'NetUniverse-explorer';
+
+// Modify settings
+const myConfig = {
+  ...defaultConfig,
+  graph: {
+    ...defaultConfig.graph,
+    network_node_count: 5000,
+    connection_distance: 400,
+  },
+  controls: {
+    ...defaultConfig.controls,
+    enablePan: true,
+    enableZoom: true,
+  }
+};
+```
+
+### Key Configuration Options
+
+- **Graph**: Node count, spread, connection distance, colors
+- **Animation**: Bounce physics, camera transitions, highlight scaling
+- **Controls**: Zoom/Pan/Rotate toggles, axis locking
+
+## API
+
+### GraphScene Props
+
+```typescript
+interface GraphSceneProps {
+  data: GraphData;                    // Graph data (nodes & links)
+  onNodeSelect: (node: NodeData | null) => void;  // Node selection callback
+  selectedNodeId: string | null;      // Currently selected node ID
+}
+```
+
+### Types
+
+```typescript
+interface NodeData {
+  id: string;
+  label: string;
+  cluster: string;
+  x?: number;
+  y?: number;
+  z?: number;
+  size?: number;
+  description?: string;
+  connections?: string[];
+}
+
+interface LinkData {
+  source: string | NodeData;
+  target: string | NodeData;
+}
+
+interface GraphData {
+  nodes: NodeData[];
+  links: LinkData[];
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run dev server
+npm run dev
+
+# Build library
+npm run build
+```
+
+## License
+
+MIT
+
+## Credits
+
+Built with:
+- [Three.js](https://threejs.org/)
+- [React Three Fiber](https://docs.pmnd.rs/react-three-fiber)
+- [React Three Drei](https://github.com/pmndrs/drei)
+- [d3-force-3d](https://github.com/vasturiano/d3-force-3d)
+- [GSAP](https://greensock.com/gsap/)

package/dist/GraphScene.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { GraphData, NodeData } from './types';
+interface GraphSceneProps {
+    data: GraphData;
+    onNodeSelect: (node: NodeData | null) => void;
+    selectedNodeId: string | null;
+}
+export declare const GraphScene: React.FC<GraphSceneProps>;
+export {};
+//# sourceMappingURL=GraphScene.d.ts.map

package/dist/GraphScene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphScene.d.ts","sourceRoot":"","sources":["../GraphScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAI9C,UAAU,eAAe;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyChD,CAAC"}

package/dist/components/GalaxyGraph.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { GraphData, NodeData } from '../types';
+interface GalaxyGraphProps {
+    data: GraphData;
+    onNodeSelect: (node: NodeData | null) => void;
+    selectedNodeId: string | null;
+}
+export declare const GalaxyGraph: React.FC<GalaxyGraphProps>;
+export {};
+//# sourceMappingURL=GalaxyGraph.d.ts.map

package/dist/components/GalaxyGraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalaxyGraph.d.ts","sourceRoot":"","sources":["../../components/GalaxyGraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAK/C,UAAU,gBAAgB;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAySlD,CAAC"}

package/dist/components/OverlayUI.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { NodeData } from '../types';
+interface OverlayUIProps {
+    selectedNode: NodeData | null;
+    onClose: () => void;
+}
+export declare const OverlayUI: React.FC<OverlayUIProps>;
+export {};
+//# sourceMappingURL=OverlayUI.d.ts.map

package/dist/components/OverlayUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayUI.d.ts","sourceRoot":"","sources":["../../components/OverlayUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,cAAc;IACtB,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwD9C,CAAC"}

package/dist/components/StarField.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare const StarField: React.FC;
+//# sourceMappingURL=StarField.d.ts.map

package/dist/components/StarField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarField.d.ts","sourceRoot":"","sources":["../../components/StarField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAkE7B,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/index'
+export {}