feat: some stuff for publishing

Author: rorychatt

README.md

@@ -11,6 +11,94 @@ This application renders interactive 3D plane-mesh wireframe structures with clo
 - Responsive design for various screen sizes
 - Performance-optimized rendering
 
+## Using as a Package
+
+### Import from Git (Recommended for Development)
+
+You can import this package directly from Git without publishing to npm:
+
+```bash
+npm install git+https://github.com/yourusername/toroid-wireframe-clouds.git
+```
+
+Or add to your `package.json`:
+
+```json
+{
+  "dependencies": {
+    "toroid-wireframe-clouds": "git+https://github.com/yourusername/toroid-wireframe-clouds.git"
+  }
+}
+```
+
+### Usage Examples
+
+#### Basic Scene Component
+
+```tsx
+import { MainScene } from 'toroid-wireframe-clouds';
+
+function App() {
+  return <MainScene />;
+}
+```
+
+#### Custom Three.js Scene
+
+```tsx
+import { ThreeScene, type SceneParameters } from 'toroid-wireframe-clouds';
+
+function MyScene() {
+  const parameters: SceneParameters = {
+    gridWidth: 10,
+    gridHeight: 10,
+    arcReach: 0.5,
+    twistX: 45,
+    twistY: 30,
+    twistZ: 15,
+    twistNoise: 0.2,
+    cameraPositionX: 0,
+    cameraPositionY: 0,
+    cameraPositionZ: 10,
+    cameraTargetX: 0,
+    cameraTargetY: 0,
+    cameraTargetZ: 0,
+  };
+
+  return (
+    <ThreeScene 
+      parameters={parameters}
+      onCameraStateChange={(cameraState) => console.log('Camera:', cameraState)}
+    />
+  );
+}
+```
+
+#### Programmatic Scene Creation
+
+```tsx
+import { createScene, type SceneSetup } from 'toroid-wireframe-clouds';
+
+const container = document.getElementById('scene-container');
+const sceneSetup: SceneSetup = createScene(container);
+
+// Start animation loop
+function animate() {
+  sceneSetup.animate();
+  requestAnimationFrame(animate);
+}
+animate();
+
+// Cleanup when done
+sceneSetup.cleanup();
+```
+
+### Available Exports
+
+- **Components**: `MainScene`, `ThreeScene`, `SceneForm`, `StatsOverlay`, `DrawCallsOverlay`
+- **Functions**: `createScene`
+- **Types**: `SceneParameters`, `CameraState`, `SceneSetup`
+
 ## Getting Started
 
 ### Prerequisites
@@ -40,6 +128,12 @@ This application renders interactive 3D plane-mesh wireframe structures with clo
 npm run build
 ```
 
+### Building Library Distribution
+
+```bash
+npm run build:lib
+```
+
 The built files will be in the `dist` directory, ready for deployment.
 
 ## Project Structure

package.json

@@ -1,11 +1,23 @@
 {
   "name": "toroid-wireframe-clouds",
-  "private": true,
   "version": "0.0.0",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "build:lib": "tsc -p tsconfig.lib.json",
     "lint": "eslint .",
     "preview": "vite preview"
   },

src/index.ts

@@ -0,0 +1,18 @@
+// Main exports for the toroid-wireframe-clouds package
+
+// Core components
+export { MainScene } from './layouts/main-scene';
+export { ThreeScene } from './components/three-scene';
+export { SceneForm } from './components/scene-form';
+export { StatsOverlay } from './components/stats-overlay';
+export { DrawCallsOverlay } from './components/draw-calls-overlay';
+
+// Scene creation and management
+export { createScene } from './layouts/main-scene/scene-initiation';
+
+// Types
+export type { SceneSetup, CameraState } from './layouts/main-scene/scene-initiation';
+export type { SceneParameters } from './components/scene-form';
+
+// Re-export Three.js for convenience
+export * as THREE from 'three'; 

tsconfig.lib.json

@@ -0,0 +1,34 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "noEmit": false,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src/index.ts",
+    "src/layouts/**/*",
+    "src/components/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "src/main.tsx",
+    "src/App.tsx",
+    "src/App.css",
+    "src/index.css"
+  ]
+}