pni 1.0.0

package/dist/components/Summary.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Text, Box } from 'ink';
+export default function Summary({ features, projectPath }) {
+    return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+        React.createElement(Box, { borderStyle: "round", borderColor: "green", paddingX: 2, paddingY: 1, marginBottom: 1 },
+            React.createElement(Text, { color: "green", bold: true }, "\u2728 Setup Complete!")),
+        React.createElement(Box, { flexDirection: "column", paddingLeft: 1 },
+            React.createElement(Text, { color: "cyan", bold: true }, "\uD83D\uDCCB Project Summary"),
+            React.createElement(Text, null, " "),
+            React.createElement(Box, { flexDirection: "column", paddingLeft: 2 },
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "magenta" }, "Project Type:"),
+                    " ",
+                    React.createElement(Text, { color: "green", bold: true }, features.projectType)),
+                features.projectName && (React.createElement(Text, null,
+                    React.createElement(Text, { color: "magenta" }, "Project Name:"),
+                    " ",
+                    React.createElement(Text, { color: "green", bold: true }, features.projectName))),
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "magenta" }, "Three.js:"),
+                    " ",
+                    React.createElement(Text, { color: features.threejs ? 'green' : 'gray', bold: true }, features.threejs ? 'Yes' : 'No')),
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "magenta" }, "CSS Variables:"),
+                    " ",
+                    React.createElement(Text, { color: "green", bold: true }, "Yes"),
+                    " ",
+                    React.createElement(Text, { color: "gray" }, "(auto-generated)")),
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "magenta" }, "Project Path:"),
+                    " ",
+                    React.createElement(Text, { color: "white" }, projectPath))),
+            React.createElement(Text, null, " "),
+            React.createElement(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1, paddingY: 1 },
+                React.createElement(Text, { color: "cyan", bold: true }, "\uD83D\uDE80 Next Steps"),
+                React.createElement(Text, null, " "),
+                React.createElement(Box, { flexDirection: "column", paddingLeft: 2 },
+                    React.createElement(Text, null,
+                        React.createElement(Text, { color: "yellow" }, "1."),
+                        " ",
+                        React.createElement(Text, { color: "white" }, "cd "),
+                        React.createElement(Text, { color: "green", bold: true }, features.projectName || projectPath)),
+                    React.createElement(Text, null,
+                        React.createElement(Text, { color: "yellow" }, "2."),
+                        " ",
+                        React.createElement(Text, { color: "white" }, "Install dependencies (if not already done)")),
+                    React.createElement(Text, null,
+                        React.createElement(Text, { color: "yellow" }, "3."),
+                        " ",
+                        React.createElement(Text, { color: "white" }, "Start development server")))))));
+}

package/dist/components/WelcomeHeader.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function WelcomeHeader(): React.JSX.Element;

package/dist/components/WelcomeHeader.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Text, Box } from 'ink';
+export default function WelcomeHeader() {
+    return (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+        React.createElement(Box, { borderStyle: "double", borderColor: "cyan", paddingX: 2, paddingY: 1 },
+            React.createElement(Text, { color: "magenta", bold: true }, "\uD83D\uDE80 PNI - Project Setup CLI"),
+            React.createElement(Text, { color: "gray" }, "Nuxt/Vue + Three.js + CSS Variables"))));
+}

package/dist/template_code/three/README.md

@@ -0,0 +1,146 @@
+# Three.js Setup for Nuxt
+
+A professional, modular Three.js setup optimized for Nuxt 3 applications with proper cleanup and developer-friendly patterns.
+
+## Structure
+
+```
+three/
+├── World.js              # Main Three.js world orchestrator
+├── camera.js             # Camera configuration
+├── scene.js              # Scene setup with meshes
+├── components/           # 3D objects/meshes
+│   ├── cube.js          # Rotating cube
+│   ├── torus.js         # Animated torus
+│   ├── sphere.js        # Floating sphere
+│   └── lights.js        # Scene lighting
+├── systems/              # Core Three.js systems
+│   ├── renderer.js      # WebGL renderer
+│   ├── Loop.js          # Animation loop
+│   ├── Resizer.js       # Responsive canvas
+│   ├── controls.js      # Camera controls
+│   └── post-processing.js # Post-processing effects
+└── utils/                # Utility functions
+```
+
+## Usage in Nuxt
+
+### Basic Setup
+
+```vue
+<script setup lang="ts">
+import {ref} from 'vue';
+import {useThree} from '@/composables/useThree';
+
+const webglContainer = ref<HTMLElement | null>(null);
+const {world, isLoading, error} = useThree(webglContainer);
+</script>
+
+<template>
+	<div ref="webglContainer" class="webgl-container">
+		<div v-if="isLoading">Loading 3D Scene...</div>
+		<div v-if="error">Error: {{ error.message }}</div>
+	</div>
+</template>
+
+<style scoped>
+.webgl-container {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+}
+</style>
+```
+
+## Features
+
+- ✅ **Proper Cleanup**: Automatic disposal of resources on component unmount
+- ✅ **SSR Safe**: Works with Nuxt's server-side rendering
+- ✅ **Modular**: Easy to add/remove 3D objects
+- ✅ **Performance**: Optimized renderer settings and animation loop
+- ✅ **Responsive**: Auto-resize handling
+- ✅ **Post-processing**: Built-in effects (SMAA, noise, bloom)
+- ✅ **Developer Friendly**: TypeScript support via composable
+
+## Adding New Objects
+
+Create a new file in `components/`:
+
+```js
+// components/myMesh.js
+import {BoxGeometry, Mesh, MeshStandardMaterial} from 'three';
+
+function createMyMesh() {
+	const geometry = new BoxGeometry(1, 1, 1);
+	const material = new MeshStandardMaterial({color: '#ff0000'});
+	const mesh = new Mesh(geometry, material);
+
+	// Optional: Add animation
+	mesh.tick = delta => {
+		mesh.rotation.y += delta;
+	};
+
+	return mesh;
+}
+
+export {createMyMesh};
+```
+
+Then add it to `scene.js`:
+
+```js
+import { createMyMesh } from './components/myMesh.js';
+
+function createScene() {
+  // ...
+  const myMesh = createMyMesh();
+  scene.add(myMesh);
+
+  // Add to updatables if it has tick method
+  scene.userData.updatables = [..., myMesh];
+  // ...
+}
+```
+
+## Performance Tips
+
+1. **Pixel Ratio**: Automatically capped at 2 for performance
+2. **Animation Loop**: Uses `requestAnimationFrame` via Three.js
+3. **Proper Disposal**: All resources cleaned up on unmount
+4. **Post-processing**: Can be disabled for better performance
+
+## Customization
+
+### Adjust Camera
+
+Edit `camera.js`:
+
+```js
+camera.position.set(x, y, z);
+```
+
+### Modify Controls
+
+Edit `systems/controls.js`:
+
+```js
+controls.autoRotate = true;
+controls.autoRotateSpeed = 2;
+```
+
+### Change Background
+
+Edit `scene.js`:
+
+```js
+scene.background = new Color('#yourcolor');
+```
+
+### Toggle Post-processing
+
+Comment out in `World.js`:
+
+```js
+// this.composer = createPostprocessing(...)
+// Use this.renderer.render() instead of this.composer.render()
+```

package/dist/template_code/three/World.js

@@ -0,0 +1,133 @@
+import {camera} from './camera.js';
+import {createScene} from './scene.js';
+import {createControls} from './systems/controls.js';
+import {createRenderer} from './systems/renderer.js';
+import {Resizer} from './systems/Resizer.js';
+import {Loop} from './systems/Loop.js';
+import {createPostprocessing} from './systems/post-processing.js';
+
+class World {
+	constructor(container) {
+		this.container = container;
+		this.camera = camera;
+		this.scene = null;
+		this.renderer = createRenderer();
+		this.loop = null;
+		this.controls = null;
+		this.resizer = null;
+		this.composer = null;
+
+		// Append canvas to container
+		container.append(this.renderer.domElement);
+	}
+
+	init() {
+		// Create scene
+		this.scene = createScene();
+
+		// Create controls
+		this.controls = createControls(this.camera, this.renderer.domElement);
+
+		// Create post-processing composer
+		this.composer = createPostprocessing(
+			this.scene,
+			this.camera,
+			this.renderer,
+		);
+
+		// Create loop
+		this.loop = new Loop(this.camera, this.scene, this.renderer, this.composer);
+
+		// Add scene updatables to loop
+		if (this.scene.userData.updatables) {
+			this.loop.updatables.push(...this.scene.userData.updatables);
+		}
+
+		// Add controls to loop
+		this.loop.updatables.push(this.controls);
+
+		// Initialize resizer
+		this.resizer = new Resizer(
+			this.container,
+			this.camera,
+			this.renderer,
+			this.composer,
+		);
+	}
+
+	start() {
+		if (this.loop) {
+			this.loop.start();
+		}
+	}
+
+	stop() {
+		if (this.loop) {
+			this.loop.stop();
+		}
+	}
+
+	dispose() {
+		// Stop animation loop
+		this.stop();
+
+		// Dispose controls
+		if (this.controls) {
+			this.controls.dispose();
+		}
+
+		// Traverse scene and dispose geometries, materials, and textures
+		if (this.scene) {
+			this.scene.traverse(object => {
+				if (object.geometry) {
+					object.geometry.dispose();
+				}
+				if (object.material) {
+					if (Array.isArray(object.material)) {
+						object.material.forEach(material => {
+							this.disposeMaterial(material);
+						});
+					} else {
+						this.disposeMaterial(object.material);
+					}
+				}
+			});
+		}
+
+		// Dispose composer
+		if (this.composer) {
+			this.composer.dispose();
+		}
+
+		// Dispose renderer and remove canvas
+		if (this.renderer) {
+			this.renderer.dispose();
+			if (this.renderer.domElement && this.renderer.domElement.parentNode) {
+				this.renderer.domElement.parentNode.removeChild(
+					this.renderer.domElement,
+				);
+			}
+		}
+
+		// Clear references
+		this.camera = null;
+		this.scene = null;
+		this.renderer = null;
+		this.composer = null;
+		this.loop = null;
+		this.controls = null;
+		this.resizer = null;
+	}
+
+	disposeMaterial(material) {
+		if (material.map) material.map.dispose();
+		if (material.lightMap) material.lightMap.dispose();
+		if (material.bumpMap) material.bumpMap.dispose();
+		if (material.normalMap) material.normalMap.dispose();
+		if (material.specularMap) material.specularMap.dispose();
+		if (material.envMap) material.envMap.dispose();
+		material.dispose();
+	}
+}
+
+export {World};

package/dist/template_code/three/camera.js

@@ -0,0 +1,30 @@
+import {PerspectiveCamera} from 'three';
+
+const getAspectRatio = () => {
+	if (typeof window !== 'undefined') {
+		return window.innerWidth / window.innerHeight;
+	}
+	return 16 / 9; // Default aspect ratio for SSR
+};
+
+const getFov = (z = 500) => {
+	// avoid accessing window during SSR
+	if (typeof window !== 'undefined') {
+		return (180 * (2 * Math.atan(window.innerHeight / 2 / z))) / Math.PI;
+	}
+	// Use a default 16:9 height for SSR (e.g., 1080p)
+	const defaultHeight = 1080;
+	return (180 * (2 * Math.atan(defaultHeight / 2 / z))) / Math.PI;
+};
+
+const camera = new PerspectiveCamera(
+	50, // fov = Field Of View
+	getAspectRatio(), // aspect ratio
+	0.01, // near clipping plane
+	1000, // far clipping plane
+);
+
+camera.position.set(0, 0, 8);
+
+export {camera};
+export default camera;