valence-cli 1.3.0 → 1.3.1

package/dist/templates/angular.d.ts

@@ -1,6 +1,6 @@
 export declare const stylesScssTemplate = "\nhtml, body {\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background-color: #0d0d0d;\n    font-family: 'Segoe UI', sans-serif;\n    color: #fff;\n}\n";
 export declare const appComponentTsTemplate = "\nimport { Component, NgZone, AfterViewInit, OnDestroy } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RouterOutlet } from '@angular/router';\nimport { ValenceEngineService } from './valence-engine.service';\nimport { TopnavComponent } from './core/topnav/topnav.component';\n\n@Component({\n    selector: 'app-root',\n    standalone: true,\n    imports: [CommonModule, RouterOutlet, TopnavComponent],\n    templateUrl: './app.component.html',\n    styleUrl: './app.component.scss'\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n    public title: string = 'Valence Project';\n\n    constructor(public engineService: ValenceEngineService, private ngZone: NgZone) {}\n\n    ngAfterViewInit(): void {\n        const canvas = document.getElementById('renderCanvas') as HTMLCanvasElement;\n        if (canvas) {\n            this.ngZone.runOutsideAngular(() => {\n                this.engineService.initEngine(canvas);\n            });\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.engineService.dispose();\n    }\n}\n";
-export declare const appComponentHtmlTemplate = "\n<div class=\"app-container\">\n    <app-topnav [title]=\"title\"></app-topnav>\n    <div class=\"canvas-wrapper\">\n        <canvas #renderCanvas id=\"renderCanvas\"></canvas>\n        \n        <!-- UI Overlay -->\n        <div class=\"ui-overlay\">\n            <div class=\"logo-container\">\n                <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <defs>\n                        <filter id=\"bloom\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n                            <feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"/>\n                            <feMerge>\n                                <feMergeNode in=\"coloredBlur\"/>\n                                <feMergeNode in=\"SourceGraphic\"/>\n                            </feMerge>\n                        </filter>\n                        <linearGradient id=\"lineGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                            <stop offset=\"0%\" style=\"stop-color:#47848F;stop-opacity:0.2\" />\n                            <stop offset=\"50%\" style=\"stop-color:#47848F;stop-opacity:0.8\" />\n                            <stop offset=\"100%\" style=\"stop-color:#DD0031;stop-opacity:0.2\" />\n                        </linearGradient>\n                    </defs>\n                    \n                    <!-- Neural Connections (Axons) -->\n                    <g stroke=\"url(#lineGradient)\" stroke-width=\"2\" filter=\"url(#bloom)\">\n                        <!-- Main V Structure -->\n                        <line x1=\"50\" y1=\"50\" x2=\"100\" y2=\"150\" />\n                        <line x1=\"150\" y1=\"50\" x2=\"100\" y2=\"150\" />\n                        \n                        <!-- Network Interconnects -->\n                        <line x1=\"50\" y1=\"50\" x2=\"80\" y2=\"90\" />\n                        <line x1=\"150\" y1=\"50\" x2=\"120\" y2=\"90\" />\n                        <line x1=\"80\" y1=\"90\" x2=\"120\" y2=\"90\" opacity=\"0.5\"/>\n                        <line x1=\"80\" y1=\"90\" x2=\"100\" y2=\"150\" />\n                        <line x1=\"120\" y1=\"90\" x2=\"100\" y2=\"150\" />\n                    </g>\n\n                    <!-- Data Flow Particles -->\n                    <circle r=\"2\" fill=\"#fff\" filter=\"url(#bloom)\">\n                        <animateMotion dur=\"3s\" repeatCount=\"indefinite\" path=\"M50,50 L80,90 L100,150\" />\n                    </circle>\n                    <circle r=\"2\" fill=\"#fff\" filter=\"url(#bloom)\">\n                        <animateMotion dur=\"3s\" begin=\"1.5s\" repeatCount=\"indefinite\" path=\"M150,50 L120,90 L100,150\" />\n                    </circle>\n                    <circle r=\"2\" fill=\"#DD0031\" filter=\"url(#bloom)\">\n                         <animateMotion dur=\"4s\" begin=\"0.5s\" repeatCount=\"indefinite\" path=\"M50,50 L100,150\" />\n                    </circle>\n\n                    <!-- Nodes -->\n                    <g fill=\"#47848F\" filter=\"url(#bloom)\">\n                        <!-- Top Nodes -->\n                        <circle cx=\"50\" cy=\"50\" r=\"6\">\n                            <animate attributeName=\"r\" values=\"6;8;6\" dur=\"2s\" repeatCount=\"indefinite\" />\n                            <animate attributeName=\"fill-opacity\" values=\"0.6;1;0.6\" dur=\"2s\" repeatCount=\"indefinite\" />\n                        </circle>\n                        <circle cx=\"150\" cy=\"50\" r=\"6\">\n                            <animate attributeName=\"r\" values=\"6;8;6\" dur=\"2.2s\" repeatCount=\"indefinite\" />\n                            <animate attributeName=\"fill-opacity\" values=\"0.6;1;0.6\" dur=\"2.2s\" repeatCount=\"indefinite\" />\n                        </circle>\n                        \n                        <!-- Mid Nodes -->\n                        <circle cx=\"80\" cy=\"90\" r=\"5\">\n                            <animate attributeName=\"r\" values=\"5;7;5\" dur=\"1.8s\" repeatCount=\"indefinite\" />\n                        </circle>\n                        <circle cx=\"120\" cy=\"90\" r=\"5\">\n                             <animate attributeName=\"r\" values=\"5;7;5\" dur=\"1.9s\" repeatCount=\"indefinite\" />\n                        </circle>\n\n                        <!-- Bottom Node (The Combine) -->\n                        <circle cx=\"100\" cy=\"150\" r=\"8\" fill=\"#DD0031\">\n                             <animate attributeName=\"r\" values=\"8;12;8\" dur=\"1s\" repeatCount=\"indefinite\" />\n                             <animate attributeName=\"fill-opacity\" values=\"0.8;1;0.8\" dur=\"1s\" repeatCount=\"indefinite\" />\n                        </circle>\n                    </g>\n                    \n                    <text x=\"100\" y=\"190\" font-family=\"Segoe UI, Arial\" font-size=\"20\" fill=\"#fff\" text-anchor=\"middle\" letter-spacing=\"8\" font-weight=\"300\" opacity=\"0.8\">VALENCE</text>\n                </svg>\n            </div>\n\n            <div class=\"debug-panel\">\n                <div class=\"stat-row\"><span class=\"label\">FPS:</span> <span class=\"value\">{{ engineService.fps() }}</span></div>\n                <div class=\"stat-row\"><span class=\"label\">CAM:</span> <span class=\"value\">{{ engineService.rotation() }}</span></div>\n                <div class=\"stat-row info\"><small>Angular + Electron + Babylon</small></div>\n            </div>\n        </div>\n    </div>\n</div>\n";
+export declare const appComponentHtmlTemplate = "\n<div class=\"app-container\">\n    <app-topnav [title]=\"title\"></app-topnav>\n    <div class=\"canvas-wrapper\">\n        <canvas #renderCanvas id=\"renderCanvas\"></canvas>\n        \n        <!-- UI Overlay -->\n        <div class=\"ui-overlay\">\n            <div class=\"logo-container\">\n                <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <defs>\n                        <filter id=\"bloom\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n                            <feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"/>\n                            <feMerge>\n                                <feMergeNode in=\"coloredBlur\"/>\n                                <feMergeNode in=\"SourceGraphic\"/>\n                            </feMerge>\n                        </filter>\n                        <linearGradient id=\"lineGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                            <stop offset=\"0%\" style=\"stop-color:#47848F;stop-opacity:0.2\" />\n                            <stop offset=\"50%\" style=\"stop-color:#47848F;stop-opacity:0.8\" />\n                            <stop offset=\"100%\" style=\"stop-color:#DD0031;stop-opacity:0.2\" />\n                        </linearGradient>\n                    </defs>\n                    \n                    <!-- Neural Connections (Axons) -->\n                    <g stroke=\"url(#lineGradient)\" stroke-width=\"2\" filter=\"url(#bloom)\">\n                        <!-- Main V Structure -->\n                        <line x1=\"50\" y1=\"50\" x2=\"100\" y2=\"150\" />\n                        <line x1=\"150\" y1=\"50\" x2=\"100\" y2=\"150\" />\n                        \n                        <!-- Network Interconnects -->\n                        <line x1=\"50\" y1=\"50\" x2=\"80\" y2=\"90\" />\n                        <line x1=\"150\" y1=\"50\" x2=\"120\" y2=\"90\" />\n                        <line x1=\"80\" y1=\"90\" x2=\"120\" y2=\"90\" opacity=\"0.5\"/>\n                        <line x1=\"80\" y1=\"90\" x2=\"100\" y2=\"150\" />\n                        <line x1=\"120\" y1=\"90\" x2=\"100\" y2=\"150\" />\n                    </g>\n\n                    <!-- Data Flow Particles -->\n                    <circle r=\"2\" fill=\"#fff\" filter=\"url(#bloom)\">\n                        <animateMotion dur=\"3s\" repeatCount=\"indefinite\" path=\"M50,50 L80,90 L100,150\" />\n                    </circle>\n                    <circle r=\"2\" fill=\"#fff\" filter=\"url(#bloom)\">\n                        <animateMotion dur=\"3s\" begin=\"1.5s\" repeatCount=\"indefinite\" path=\"M150,50 L120,90 L100,150\" />\n                    </circle>\n                    <circle r=\"2\" fill=\"#DD0031\" filter=\"url(#bloom)\">\n                         <animateMotion dur=\"4s\" begin=\"0.5s\" repeatCount=\"indefinite\" path=\"M50,50 L100,150\" />\n                    </circle>\n\n                    <!-- Nodes -->\n                    <g fill=\"#47848F\" filter=\"url(#bloom)\">\n                        <!-- Top Nodes -->\n                        <circle cx=\"50\" cy=\"50\" r=\"6\">\n                            <animate attributeName=\"r\" values=\"6;8;6\" dur=\"2s\" repeatCount=\"indefinite\" />\n                            <animate attributeName=\"fill-opacity\" values=\"0.6;1;0.6\" dur=\"2s\" repeatCount=\"indefinite\" />\n                        </circle>\n                        <circle cx=\"150\" cy=\"50\" r=\"6\">\n                            <animate attributeName=\"r\" values=\"6;8;6\" dur=\"2.2s\" repeatCount=\"indefinite\" />\n                            <animate attributeName=\"fill-opacity\" values=\"0.6;1;0.6\" dur=\"2.2s\" repeatCount=\"indefinite\" />\n                        </circle>\n                        \n                        <!-- Mid Nodes -->\n                        <circle cx=\"80\" cy=\"90\" r=\"5\">\n                            <animate attributeName=\"r\" values=\"5;7;5\" dur=\"1.8s\" repeatCount=\"indefinite\" />\n                        </circle>\n                        <circle cx=\"120\" cy=\"90\" r=\"5\">\n                             <animate attributeName=\"r\" values=\"5;7;5\" dur=\"1.9s\" repeatCount=\"indefinite\" />\n                        </circle>\n\n                        <!-- Bottom Node (The Combine) -->\n                        <circle cx=\"100\" cy=\"150\" r=\"8\" fill=\"#DD0031\">\n                             <animate attributeName=\"r\" values=\"8;12;8\" dur=\"1s\" repeatCount=\"indefinite\" />\n                             <animate attributeName=\"fill-opacity\" values=\"0.8;1;0.8\" dur=\"1s\" repeatCount=\"indefinite\" />\n                        </circle>\n                    </g>\n                    \n                    <text x=\"100\" y=\"190\" font-family=\"Segoe UI, Arial\" font-size=\"20\" fill=\"#fff\" text-anchor=\"middle\" letter-spacing=\"8\" font-weight=\"300\" opacity=\"0.8\">VALENCE</text>\n                </svg>\n            </div>\n\n            <div class=\"debug-panel\">\n                <div class=\"stat-row\"><span class=\"label\">FPS:</span> <span class=\"value\">{{ engineService.fps() }}</span></div>\n                <div class=\"stat-row\"><span class=\"label\">OBJ:</span> <span class=\"value vec3\">{{ engineService.rotation() }}</span></div>\n                <div class=\"stat-row info\"><small>Angular + Electron + Babylon</small></div>\n            </div>\n        </div>\n    </div>\n</div>\n";
 export declare const appComponentScssTemplate = "\n.app-container {\n    width: 100vw;\n    height: 100vh;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    background: #000;\n}\n\n.canvas-wrapper {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);\n}\n\n#renderCanvas {\n    width: 100%;\n    height: 100%;\n    touch-action: none;\n    outline: none;\n}\n\n.ui-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none; // Let clicks pass to canvas\n    \n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n\n.logo-container {\n    padding: 2rem;\n    opacity: 0.8;\n    animation: float 6s ease-in-out infinite;\n    filter: drop-shadow(0 0 20px rgba(71, 132, 143, 0.3));\n}\n\n.debug-panel {\n    position: absolute;\n    top: 2rem;\n    right: 2rem;\n    \n    // Glassmorphism\n    background: rgba(13, 13, 13, 0.65);\n    backdrop-filter: blur(16px);\n    -webkit-backdrop-filter: blur(16px);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);\n    \n    // Accent\n    border-left: 3px solid #47848F;\n    \n    padding: 1.25rem;\n    border-radius: 6px;\n    color: #fff;\n    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;\n    pointer-events: auto;\n    min-width: 220px;\n    \n    transition: all 0.3s ease;\n    \n    &:hover {\n        background: rgba(13, 13, 13, 0.8);\n        border-color: rgba(255, 255, 255, 0.15);\n        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);\n    }\n    \n    .stat-row {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 0.75rem;\n        \n        &:last-of-type {\n            margin-bottom: 0;\n        }\n        \n        .label {\n            color: #888;\n            font-size: 0.85rem;\n            letter-spacing: 1px;\n            font-weight: 500;\n        }\n        \n        .value {\n            color: #4dbf00;\n            font-weight: 600;\n            font-size: 1rem;\n            text-shadow: 0 0 10px rgba(77, 191, 0, 0.3);\n            \n            // Fixed width for alignment of rotation numbers\n            &.vec3 {\n                font-size: 0.9rem;\n            }\n        }\n    }\n\n    .info {\n        margin-top: 1.25rem;\n        padding-top: 1rem;\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\n        text-align: right;\n        opacity: 0.6;\n        \n        small {\n            font-size: 0.75rem;\n            letter-spacing: 0.5px;\n            font-family: 'Segoe UI', sans-serif;\n            text-transform: uppercase;\n        }\n    }\n}\n\n@keyframes float {\n    0% { transform: translateY(0px); }\n    50% { transform: translateY(-10px); }\n    100% { transform: translateY(0px); }\n}\n";
-export declare const valenceEngineServiceTemplate = "\nimport { Injectable, NgZone, OnDestroy, signal, WritableSignal } from '@angular/core';\nimport { Engine, WebGPUEngine, Scene, FreeCamera, Vector3, HemisphericLight, MeshBuilder, StandardMaterial, Color3, Color4, Mesh } from 'babylonjs';\n// VALENCE: IMPORTS\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ValenceEngineService implements OnDestroy {\n  private engine?: Engine | WebGPUEngine;\n  private scene?: Scene;\n  private plane?: Mesh;\n  // VALENCE: PROPERTIES\n\n  public fps: WritableSignal<string> = signal('0');\n  public rotation: WritableSignal<string> = signal('X: 0.00 Y: 0.00 Z: 0.00');\n\n  constructor(private ngZone: NgZone) {}\n\n  public async initEngine(canvas: HTMLCanvasElement): Promise<void> {\n    // Attempt WebGPU, fall back to WebGL\n    try {\n        if (await WebGPUEngine.IsSupportedAsync) {\n            this.engine = new WebGPUEngine(canvas);\n            await (this.engine as WebGPUEngine).initAsync();\n        } else {\n             this.engine = new Engine(canvas, true);\n        }\n    } catch (e) {\n        console.warn('WebGPU failed, falling back to WebGL', e);\n        this.engine = new Engine(canvas, true);\n    }\n    \n    // VALENCE: PRE_SCENE_INIT\n\n    this.scene = this.createScene();\n\n    // VALENCE: POST_SCENE_INIT\n\n    this.ngZone.runOutsideAngular(() => {\n        if (!this.engine) return;\n        \n        this.engine.runRenderLoop(() => {\n            if (this.scene) {\n                this.scene.render();\n                // Update specific meshes\n                if (this.plane) {\n                    this.plane.rotation.y += 0.01;\n                    this.plane.rotation.x += 0.005;\n                }\n                \n                // Update Camera Stats\n                const cam = this.scene.activeCamera as FreeCamera;\n                if (cam && cam.rotation) {\n                    const { x, y, z } = cam.rotation;\n                    this.rotation.set(`X: ${x.toFixed(2)}  Y: ${y.toFixed(2)}  Z: ${z.toFixed(2)}`);\n                }\n\n                // VALENCE: RENDER_LOOP\n            }\n            \n            // Update FPS rarely to avoid UI thrashing, or just every frame if signal handles it efficient?\n            // actually better to throttle it slightly for UI, but signal is fine.\n            this.fps.set(this.engine?.getFps().toFixed(0) || '0');\n        });\n    });\n\n    window.addEventListener('resize', () => {\n        this.engine?.resize();\n    });\n  }\n\n  private createScene(): Scene {\n    if (!this.engine) throw new Error('Engine not initialized');\n    const scene = new Scene(this.engine);\n    scene.clearColor = new Color4(0.1, 0.1, 0.1, 1);\n    \n    // Camera\n    const camera = new FreeCamera('camera1', new Vector3(0, 0, -5), scene);\n    camera.setTarget(Vector3.Zero());\n    \n    // Attach control needs to happen on the canvas. \n    // Since we created engine with canvas, we can attach to it.\n    // Note: In WebGPU engine.getRenderingCanvas() might differ slightly but usually works.\n    const canvas = this.engine.getRenderingCanvas();\n    if (canvas) {\n        camera.attachControl(canvas, true);\n    }\n\n    // Light\n    const light = new HemisphericLight('light1', new Vector3(0, 1, 0), scene);\n    light.intensity = 0.7;\n\n    // Rotating Plane\n    this.plane = MeshBuilder.CreatePlane('plane', { size: 2 }, scene);\n    this.plane.material = new StandardMaterial('mat', scene);\n    (this.plane.material as StandardMaterial).backFaceCulling = false;\n    (this.plane.material as StandardMaterial).diffuseColor = new Color3(0.4, 0.8, 1);\n    (this.plane.material as StandardMaterial).wireframe = true;\n\n    return scene;\n  }\n\n  public dispose(): void {\n    if (this.engine) {\n      this.engine.dispose();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.dispose();\n  }\n}\n";
+export declare const valenceEngineServiceTemplate = "\nimport { Injectable, NgZone, OnDestroy, signal, WritableSignal } from '@angular/core';\nimport { Engine, WebGPUEngine, Scene, FreeCamera, Vector3, HemisphericLight, MeshBuilder, StandardMaterial, Color3, Color4, Mesh } from 'babylonjs';\n// VALENCE: IMPORTS\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ValenceEngineService implements OnDestroy {\n  private engine?: Engine | WebGPUEngine;\n  private scene?: Scene;\n  private plane?: Mesh;\n  // VALENCE: PROPERTIES\n\n  public fps: WritableSignal<string> = signal('0');\n  public rotation: WritableSignal<string> = signal('X: 0.00 Y: 0.00 Z: 0.00');\n\n  constructor(private ngZone: NgZone) {}\n\n  public async initEngine(canvas: HTMLCanvasElement): Promise<void> {\n    // Attempt WebGPU, fall back to WebGL\n    try {\n        if (await WebGPUEngine.IsSupportedAsync) {\n            this.engine = new WebGPUEngine(canvas);\n            await (this.engine as WebGPUEngine).initAsync();\n        } else {\n             this.engine = new Engine(canvas, true);\n        }\n    } catch (e) {\n        console.warn('WebGPU failed, falling back to WebGL', e);\n        this.engine = new Engine(canvas, true);\n    }\n    \n    // VALENCE: PRE_SCENE_INIT\n\n    this.scene = this.createScene();\n\n    // VALENCE: POST_SCENE_INIT\n\n    this.ngZone.runOutsideAngular(() => {\n        if (!this.engine) return;\n        \n        this.engine.runRenderLoop(() => {\n            if (this.scene) {\n                this.scene.render();\n                // Update specific meshes\n                if (this.plane) {\n                    this.plane.rotation.y += 0.01;\n                    this.plane.rotation.x += 0.005;\n                }\n                \n                // Update Object Stats\n                if (this.plane) {\n                    const { x, y, z } = this.plane.rotation;\n                    this.rotation.set(`X: ${x.toFixed(2)}  Y: ${y.toFixed(2)}  Z: ${z.toFixed(2)}`);\n                }\n\n                // VALENCE: RENDER_LOOP\n            }\n            \n            // Update FPS rarely to avoid UI thrashing, or just every frame if signal handles it efficient?\n            // actually better to throttle it slightly for UI, but signal is fine.\n            this.fps.set(this.engine?.getFps().toFixed(0) || '0');\n        });\n    });\n\n    window.addEventListener('resize', () => {\n        this.engine?.resize();\n    });\n  }\n\n  private createScene(): Scene {\n    if (!this.engine) throw new Error('Engine not initialized');\n    const scene = new Scene(this.engine);\n    scene.clearColor = new Color4(0.1, 0.1, 0.1, 1);\n    \n    // Camera\n    const camera = new FreeCamera('camera1', new Vector3(0, 0, -5), scene);\n    camera.setTarget(Vector3.Zero());\n    \n    // Attach control needs to happen on the canvas. \n    // Since we created engine with canvas, we can attach to it.\n    // Note: In WebGPU engine.getRenderingCanvas() might differ slightly but usually works.\n    const canvas = this.engine.getRenderingCanvas();\n    if (canvas) {\n        camera.attachControl(canvas, true);\n    }\n\n    // Light\n    const light = new HemisphericLight('light1', new Vector3(0, 1, 0), scene);\n    light.intensity = 0.7;\n\n    // Rotating Plane\n    this.plane = MeshBuilder.CreatePlane('plane', { size: 2 }, scene);\n    this.plane.material = new StandardMaterial('mat', scene);\n    (this.plane.material as StandardMaterial).backFaceCulling = false;\n    (this.plane.material as StandardMaterial).diffuseColor = new Color3(0.4, 0.8, 1);\n    (this.plane.material as StandardMaterial).wireframe = true;\n\n    return scene;\n  }\n\n  public dispose(): void {\n    if (this.engine) {\n      this.engine.dispose();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.dispose();\n  }\n}\n";
 //# sourceMappingURL=angular.d.ts.map

package/dist/templates/angular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"angular.d.ts","sourceRoot":"","sources":["../../src/templates/angular.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,iNAW9B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mkCAgClC,CAAC;AAEF,eAAO,MAAM,wBAAwB,44KAyFpC,CAAC;AAEF,eAAO,MAAM,wBAAwB,i2FA6HpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,wxHAiHxC,CAAC"}
+{"version":3,"file":"angular.d.ts","sourceRoot":"","sources":["../../src/templates/angular.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,iNAW9B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mkCAgClC,CAAC;AAEF,eAAO,MAAM,wBAAwB,i5KAyFpC,CAAC;AAEF,eAAO,MAAM,wBAAwB,i2FA6HpC,CAAC;AAEF,eAAO,MAAM,4BAA4B,ktHAgHxC,CAAC"}

package/dist/templates/angular.js

@@ -126,7 +126,7 @@ export const appComponentHtmlTemplate = `
 
             <div class="debug-panel">
                 <div class="stat-row"><span class="label">FPS:</span> <span class="value">{{ engineService.fps() }}</span></div>
-                <div class="stat-row"><span class="label">CAM:</span> <span class="value">{{ engineService.rotation() }}</span></div>
+                <div class="stat-row"><span class="label">OBJ:</span> <span class="value vec3">{{ engineService.rotation() }}</span></div>
                 <div class="stat-row info"><small>Angular + Electron + Babylon</small></div>
             </div>
         </div>
@@ -310,10 +310,9 @@ export class ValenceEngineService implements OnDestroy {
                     this.plane.rotation.x += 0.005;
                 }
                 
-                // Update Camera Stats
-                const cam = this.scene.activeCamera as FreeCamera;
-                if (cam && cam.rotation) {
-                    const { x, y, z } = cam.rotation;
+                // Update Object Stats
+                if (this.plane) {
+                    const { x, y, z } = this.plane.rotation;
                     this.rotation.set(\`X: \${x.toFixed(2)}  Y: \${y.toFixed(2)}  Z: \${z.toFixed(2)}\`);
                 }
 

package/dist/templates/angular.js.map

@@ -1 +1 @@
-{"version":3,"file":"angular.js","sourceRoot":"","sources":["../../src/templates/angular.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;CAWjC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCrC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFvC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HvC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiH3C,CAAC"}
+{"version":3,"file":"angular.js","sourceRoot":"","sources":["../../src/templates/angular.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;CAWjC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCrC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFvC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HvC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgH3C,CAAC"}

package/dist/templates/audio.d.ts

@@ -0,0 +1,2 @@
+export declare const audioServiceTemplate = "\nimport { Injectable, signal } from '@angular/core';\nimport { Howl, Howler } from 'howler';\n\nexport enum SoundChannel {\n  MASTER = 'master',\n  MUSIC = 'music',\n  SFX = 'sfx',\n  VOICE = 'voice'\n}\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class AudioService {\n  \n  // Volume Signals (0.0 - 1.0)\n  public masterVolume = signal(1.0);\n  public musicVolume = signal(0.8);\n  public sfxVolume = signal(1.0);\n\n  // Asset Registry\n  private sounds = new Map<string, Howl>();\n  private activeMusic: Howl | null = null;\n\n  constructor() {\n    this.initVolume();\n  }\n\n  // --- API ---\n\n  public play(key: string, channel: SoundChannel = SoundChannel.SFX): number | null {\n    const sound = this.sounds.get(key);\n    if (!sound) {\n      console.warn(`Sound not found: ${key}`);\n      return null;\n    }\n\n    const id = sound.play();\n    sound.volume(this.getChannelVolume(channel), id);\n    return id;\n  }\n\n  public playMusic(key: string, fadeDuration = 1000) {\n    if (this.activeMusic) {\n       this.activeMusic.fade(this.activeMusic.volume(), 0, fadeDuration);\n       setTimeout(() => this.activeMusic?.stop(), fadeDuration);\n    }\n\n    const sound = this.sounds.get(key);\n    if (sound) {\n      this.activeMusic = sound;\n      sound.loop(true);\n      sound.volume(0);\n      sound.play();\n      sound.fade(0, this.musicVolume(), fadeDuration);\n    }\n  }\n\n  public load(key: string, src: string[]) {\n    const sound = new Howl({ src });\n    this.sounds.set(key, sound);\n  }\n\n  public setVolume(channel: SoundChannel, value: number) {\n    switch(channel) {\n      case SoundChannel.MASTER: \n        this.masterVolume.set(value); \n        Howler.volume(value);\n        break;\n      case SoundChannel.MUSIC: \n        this.musicVolume.set(value);\n        if (this.activeMusic) this.activeMusic.volume(value);\n        break;\n      case SoundChannel.SFX: \n        this.sfxVolume.set(value);\n        // Updating active SFX is harder without tracking IDs, usually play-time is enough.\n        break;\n    }\n  }\n\n  private getChannelVolume(channel: SoundChannel): number {\n    switch(channel) {\n      case SoundChannel.MUSIC: return this.musicVolume();\n      case SoundChannel.SFX: return this.sfxVolume();\n      default: return 1.0;\n    }\n  }\n\n  private initVolume() {\n     Howler.volume(this.masterVolume());\n  }\n}\n";
+//# sourceMappingURL=audio.d.ts.map

package/dist/templates/audio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.d.ts","sourceRoot":"","sources":["../../src/templates/audio.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,41EA6FhC,CAAC"}

package/dist/templates/audio.js

@@ -0,0 +1,95 @@
+export const audioServiceTemplate = `
+import { Injectable, signal } from '@angular/core';
+import { Howl, Howler } from 'howler';
+
+export enum SoundChannel {
+  MASTER = 'master',
+  MUSIC = 'music',
+  SFX = 'sfx',
+  VOICE = 'voice'
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AudioService {
+  
+  // Volume Signals (0.0 - 1.0)
+  public masterVolume = signal(1.0);
+  public musicVolume = signal(0.8);
+  public sfxVolume = signal(1.0);
+
+  // Asset Registry
+  private sounds = new Map<string, Howl>();
+  private activeMusic: Howl | null = null;
+
+  constructor() {
+    this.initVolume();
+  }
+
+  // --- API ---
+
+  public play(key: string, channel: SoundChannel = SoundChannel.SFX): number | null {
+    const sound = this.sounds.get(key);
+    if (!sound) {
+      console.warn(\`Sound not found: \${key}\`);
+      return null;
+    }
+
+    const id = sound.play();
+    sound.volume(this.getChannelVolume(channel), id);
+    return id;
+  }
+
+  public playMusic(key: string, fadeDuration = 1000) {
+    if (this.activeMusic) {
+       this.activeMusic.fade(this.activeMusic.volume(), 0, fadeDuration);
+       setTimeout(() => this.activeMusic?.stop(), fadeDuration);
+    }
+
+    const sound = this.sounds.get(key);
+    if (sound) {
+      this.activeMusic = sound;
+      sound.loop(true);
+      sound.volume(0);
+      sound.play();
+      sound.fade(0, this.musicVolume(), fadeDuration);
+    }
+  }
+
+  public load(key: string, src: string[]) {
+    const sound = new Howl({ src });
+    this.sounds.set(key, sound);
+  }
+
+  public setVolume(channel: SoundChannel, value: number) {
+    switch(channel) {
+      case SoundChannel.MASTER: 
+        this.masterVolume.set(value); 
+        Howler.volume(value);
+        break;
+      case SoundChannel.MUSIC: 
+        this.musicVolume.set(value);
+        if (this.activeMusic) this.activeMusic.volume(value);
+        break;
+      case SoundChannel.SFX: 
+        this.sfxVolume.set(value);
+        // Updating active SFX is harder without tracking IDs, usually play-time is enough.
+        break;
+    }
+  }
+
+  private getChannelVolume(channel: SoundChannel): number {
+    switch(channel) {
+      case SoundChannel.MUSIC: return this.musicVolume();
+      case SoundChannel.SFX: return this.sfxVolume();
+      default: return 1.0;
+    }
+  }
+
+  private initVolume() {
+     Howler.volume(this.masterVolume());
+  }
+}
+`;
+//# sourceMappingURL=audio.js.map

package/dist/templates/audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.js","sourceRoot":"","sources":["../../src/templates/audio.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FnC,CAAC"}

package/dist/templates/index.d.ts

@@ -4,4 +4,9 @@ export * from './components.js';
 export * from './config.js';
 export * from './multiplayer.js';
 export * from './native.js';
+export * from './input.js';
+export * from './audio.js';
+export * from './storage.js';
+export * from './settings.js';
+export * from './state.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}

package/dist/templates/index.js

@@ -4,4 +4,9 @@ export * from './components.js';
 export * from './config.js';
 export * from './multiplayer.js';
 export * from './native.js';
+export * from './input.js';
+export * from './audio.js';
+export * from './storage.js';
+export * from './settings.js';
+export * from './state.js';
 //# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}

package/dist/templates/input.d.ts

@@ -0,0 +1,2 @@
+export declare const inputServiceTemplate = "\nimport { Injectable, signal, WritableSignal } from '@angular/core';\n\nexport enum InputState {\n  PRESSED,\n  HELD,\n  RELEASED,\n  IDLE\n}\n\nexport interface InputAction {\n  name: string;\n  keys?: string[];     // KeyboardEvent.code (e.g., 'Space', 'KeyW')\n  buttons?: number[];  // Gamepad Button Indices\n  axis?: {\n    index: number;     // Gamepad Axis Index\n    threshold: number; // Trigger threshold\n  };\n}\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class InputService {\n  \n  // State Map: Action Name -> Current State\n  private actions = new Map<string, WritableSignal<InputState>>();\n  private values = new Map<string, WritableSignal<number>>(); // For analog axes\n\n  // Configuration\n  private config: InputAction[] = [\n    { name: 'MoveForward', keys: ['KeyW', 'ArrowUp'], axis: { index: 1, threshold: -0.5 } },\n    { name: 'MoveBackward', keys: ['KeyS', 'ArrowDown'], axis: { index: 1, threshold: 0.5 } },\n    { name: 'MoveLeft', keys: ['KeyA', 'ArrowLeft'], axis: { index: 0, threshold: -0.5 } },\n    { name: 'MoveRight', keys: ['KeyD', 'ArrowRight'], axis: { index: 0, threshold: 0.5 } },\n    { name: 'Jump', keys: ['Space'], buttons: [0] },\n    { name: 'Run', keys: ['ShiftLeft', 'ShiftRight'], buttons: [1] },\n  ];\n\n  constructor() {\n    this.initSignals();\n    this.bindEvents();\n  }\n\n  // --- Public API ---\n\n  public getState(action: string): InputState {\n    return this.actions.get(action)?.() ?? InputState.IDLE;\n  }\n\n  public getValue(action: string): number {\n    return this.values.get(action)?.() ?? 0;\n  }\n\n  public isPressed(action: string): boolean {\n    const s = this.getState(action);\n    return s === InputState.PRESSED || s === InputState.HELD;\n  }\n\n  public getActionSignal(action: string) {\n    if (!this.actions.has(action)) this.initAction(action);\n    return this.actions.get(action)!;\n  }\n\n  // --- Internal Logic ---\n\n  private initSignals() {\n    this.config.forEach(c => this.initAction(c.name));\n  }\n\n  private initAction(name: string) {\n    if (!this.actions.has(name)) {\n      this.actions.set(name, signal(InputState.IDLE));\n      this.values.set(name, signal(0));\n    }\n  }\n\n  private bindEvents() {\n    window.addEventListener('keydown', (e) => this.handleKey(e.code, true));\n    window.addEventListener('keyup', (e) => this.handleKey(e.code, false));\n    \n    // Poll Gamepad every frame\n    this.pollGamepad();\n  }\n\n  private handleKey(code: string, pressed: boolean) {\n    this.config.forEach(action => {\n      if (action.keys?.includes(code)) {\n        this.updateActionState(action.name, pressed ? 1 : 0);\n      }\n    });\n  }\n\n  private updateActionState(name: string, value: number) {\n    const signalState = this.actions.get(name)!;\n    const signalValue = this.values.get(name)!;\n\n    const currentState = signalState();\n    const isActive = Math.abs(value) > 0.1;\n\n    signalValue.set(value);\n\n    if (isActive) {\n      if (currentState === InputState.IDLE || currentState === InputState.RELEASED) {\n        signalState.set(InputState.PRESSED);\n        // Auto-switch to HELD after next tick? \n        // For simplicity, we keep as PRESSED for one frame logic usually handled by game loop.\n        // Here we just toggle active.\n      } else {\n        signalState.set(InputState.HELD);\n      }\n    } else {\n      if (currentState === InputState.PRESSED || currentState === InputState.HELD) {\n        signalState.set(InputState.RELEASED);\n        // Reset to IDLE shortly after\n        setTimeout(() => signalState.set(InputState.IDLE), 50); \n      }\n    }\n  }\n\n  private pollGamepad() {\n    // Simple rAF loop for gamepad polling\n    const loop = () => {\n      const pads = navigator.getGamepads();\n      const gp = pads[0]; // Assuming P1\n      \n      if (gp) {\n        this.config.forEach(action => {\n          let maxVal = 0;\n\n          // Check Buttons\n          if (action.buttons) {\n             for (const btnIdx of action.buttons) {\n                if (gp.buttons[btnIdx]?.pressed) maxVal = 1;\n             }\n          }\n\n          // Check Axis\n          if (action.axis) {\n             const val = gp.axes[action.axis.index];\n             if (Math.abs(val) > 0.1) { // Deadzone\n                 // Direction check\n                 if (action.axis.threshold < 0 && val < action.axis.threshold) maxVal = Math.abs(val);\n                 if (action.axis.threshold > 0 && val > action.axis.threshold) maxVal = Math.abs(val);\n             }\n          }\n\n          if (maxVal > 0) this.updateActionState(action.name, maxVal);\n          // Note: Logic needs to handle \"release\" if gamepad stops\n          // Implementation simplified for brevity\n        });\n      }\n      requestAnimationFrame(loop);\n    };\n    loop();\n  }\n}\n";
+//# sourceMappingURL=input.d.ts.map

package/dist/templates/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/templates/input.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,+uJA6JhC,CAAC"}

package/dist/templates/input.js

@@ -0,0 +1,159 @@
+export const inputServiceTemplate = `
+import { Injectable, signal, WritableSignal } from '@angular/core';
+
+export enum InputState {
+  PRESSED,
+  HELD,
+  RELEASED,
+  IDLE
+}
+
+export interface InputAction {
+  name: string;
+  keys?: string[];     // KeyboardEvent.code (e.g., 'Space', 'KeyW')
+  buttons?: number[];  // Gamepad Button Indices
+  axis?: {
+    index: number;     // Gamepad Axis Index
+    threshold: number; // Trigger threshold
+  };
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InputService {
+  
+  // State Map: Action Name -> Current State
+  private actions = new Map<string, WritableSignal<InputState>>();
+  private values = new Map<string, WritableSignal<number>>(); // For analog axes
+
+  // Configuration
+  private config: InputAction[] = [
+    { name: 'MoveForward', keys: ['KeyW', 'ArrowUp'], axis: { index: 1, threshold: -0.5 } },
+    { name: 'MoveBackward', keys: ['KeyS', 'ArrowDown'], axis: { index: 1, threshold: 0.5 } },
+    { name: 'MoveLeft', keys: ['KeyA', 'ArrowLeft'], axis: { index: 0, threshold: -0.5 } },
+    { name: 'MoveRight', keys: ['KeyD', 'ArrowRight'], axis: { index: 0, threshold: 0.5 } },
+    { name: 'Jump', keys: ['Space'], buttons: [0] },
+    { name: 'Run', keys: ['ShiftLeft', 'ShiftRight'], buttons: [1] },
+  ];
+
+  constructor() {
+    this.initSignals();
+    this.bindEvents();
+  }
+
+  // --- Public API ---
+
+  public getState(action: string): InputState {
+    return this.actions.get(action)?.() ?? InputState.IDLE;
+  }
+
+  public getValue(action: string): number {
+    return this.values.get(action)?.() ?? 0;
+  }
+
+  public isPressed(action: string): boolean {
+    const s = this.getState(action);
+    return s === InputState.PRESSED || s === InputState.HELD;
+  }
+
+  public getActionSignal(action: string) {
+    if (!this.actions.has(action)) this.initAction(action);
+    return this.actions.get(action)!;
+  }
+
+  // --- Internal Logic ---
+
+  private initSignals() {
+    this.config.forEach(c => this.initAction(c.name));
+  }
+
+  private initAction(name: string) {
+    if (!this.actions.has(name)) {
+      this.actions.set(name, signal(InputState.IDLE));
+      this.values.set(name, signal(0));
+    }
+  }
+
+  private bindEvents() {
+    window.addEventListener('keydown', (e) => this.handleKey(e.code, true));
+    window.addEventListener('keyup', (e) => this.handleKey(e.code, false));
+    
+    // Poll Gamepad every frame
+    this.pollGamepad();
+  }
+
+  private handleKey(code: string, pressed: boolean) {
+    this.config.forEach(action => {
+      if (action.keys?.includes(code)) {
+        this.updateActionState(action.name, pressed ? 1 : 0);
+      }
+    });
+  }
+
+  private updateActionState(name: string, value: number) {
+    const signalState = this.actions.get(name)!;
+    const signalValue = this.values.get(name)!;
+
+    const currentState = signalState();
+    const isActive = Math.abs(value) > 0.1;
+
+    signalValue.set(value);
+
+    if (isActive) {
+      if (currentState === InputState.IDLE || currentState === InputState.RELEASED) {
+        signalState.set(InputState.PRESSED);
+        // Auto-switch to HELD after next tick? 
+        // For simplicity, we keep as PRESSED for one frame logic usually handled by game loop.
+        // Here we just toggle active.
+      } else {
+        signalState.set(InputState.HELD);
+      }
+    } else {
+      if (currentState === InputState.PRESSED || currentState === InputState.HELD) {
+        signalState.set(InputState.RELEASED);
+        // Reset to IDLE shortly after
+        setTimeout(() => signalState.set(InputState.IDLE), 50); 
+      }
+    }
+  }
+
+  private pollGamepad() {
+    // Simple rAF loop for gamepad polling
+    const loop = () => {
+      const pads = navigator.getGamepads();
+      const gp = pads[0]; // Assuming P1
+      
+      if (gp) {
+        this.config.forEach(action => {
+          let maxVal = 0;
+
+          // Check Buttons
+          if (action.buttons) {
+             for (const btnIdx of action.buttons) {
+                if (gp.buttons[btnIdx]?.pressed) maxVal = 1;
+             }
+          }
+
+          // Check Axis
+          if (action.axis) {
+             const val = gp.axes[action.axis.index];
+             if (Math.abs(val) > 0.1) { // Deadzone
+                 // Direction check
+                 if (action.axis.threshold < 0 && val < action.axis.threshold) maxVal = Math.abs(val);
+                 if (action.axis.threshold > 0 && val > action.axis.threshold) maxVal = Math.abs(val);
+             }
+          }
+
+          if (maxVal > 0) this.updateActionState(action.name, maxVal);
+          // Note: Logic needs to handle "release" if gamepad stops
+          // Implementation simplified for brevity
+        });
+      }
+      requestAnimationFrame(loop);
+    };
+    loop();
+  }
+}
+`;
+//# sourceMappingURL=input.js.map

package/dist/templates/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/templates/input.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JnC,CAAC"}

package/dist/templates/phaser-scene.d.ts

@@ -0,0 +1,2 @@
+export declare const phaserSceneTemplate: (name: string, className: string) => string;
+//# sourceMappingURL=phaser-scene.d.ts.map

package/dist/templates/phaser-scene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phaser-scene.d.ts","sourceRoot":"","sources":["../../src/templates/phaser-scene.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,EAAE,WAAW,MAAM,WAyBlE,CAAC"}

package/dist/templates/phaser-scene.js

@@ -0,0 +1,27 @@
+export const phaserSceneTemplate = (name, className) => `
+import Phaser from 'phaser';
+
+export class ${className} extends Phaser.Scene {
+    constructor() {
+        super({ key: '${className}' });
+    }
+
+    preload() {
+        // Load assets
+    }
+
+    create() {
+        const { width, height } = this.scale;
+        
+        this.add.text(width / 2, height / 2, 'Scene: ${name}', {
+            fontSize: '32px',
+            color: '#ffffff'
+        }).setOrigin(0.5);
+    }
+
+    update(time: number, delta: number) {
+        // Game loop
+    }
+}
+`;
+//# sourceMappingURL=phaser-scene.js.map

package/dist/templates/phaser-scene.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phaser-scene.js","sourceRoot":"","sources":["../../src/templates/phaser-scene.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,SAAiB,EAAE,EAAE,CAAC;;;eAGzD,SAAS;;wBAEA,SAAS;;;;;;;;;;uDAUsB,IAAI;;;;;;;;;;CAU1D,CAAC"}

package/dist/templates/phaser.d.ts

@@ -0,0 +1,2 @@
+export declare const phaserEngineServiceTemplate = "\nimport { Injectable, NgZone, ElementRef, OnDestroy, signal, WritableSignal } from '@angular/core';\nimport Phaser from 'phaser';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class PhaserEngineService implements OnDestroy {\n  public game: Phaser.Game | null = null;\n  public fps: WritableSignal<string> = signal('0');\n  public rotation: WritableSignal<string> = signal('2D Mode');\n  \n  private canvas: HTMLCanvasElement | null = null;\n\n  constructor(private ngZone: NgZone) {}\n\n  public initGame(canvas: HTMLCanvasElement) {\n    this.canvas = canvas;\n    this.ngZone.runOutsideAngular(() => {\n        if (!this.game) {\n            this.createGame();\n        }\n    });\n  }\n\n  private createGame() {\n    if (!this.canvas) return;\n\n    const config: Phaser.Types.Core.GameConfig = {\n      type: Phaser.WEBGL,\n      canvas: this.canvas,\n      width: window.innerWidth,\n      height: window.innerHeight,\n      backgroundColor: '#0d0d0d', // Match 3D background\n      physics: {\n          default: 'arcade',\n          arcade: {\n              gravity: { x: 0, y: 0 },\n              debug: false\n          }\n      },\n      scene: [MainScene],\n      scale: {\n          mode: Phaser.Scale.RESIZE,\n          autoCenter: Phaser.Scale.CENTER_BOTH\n      },\n      callbacks: {\n          postBoot: (game) => {\n             // Hook into the loop for stats\n             const originalStep = game.loop.step;\n             game.loop.step = (time: number, delta: number) => {\n                 originalStep.call(game.loop, time, delta);\n                 this.fps.set(game.loop.actualFps.toFixed(0));\n             };\n          }\n      }\n    };\n\n    this.game = new Phaser.Game(config);\n    \n    window.addEventListener('resize', this.onResize.bind(this));\n  }\n\n  private onResize() {\n    if (this.game) {\n      this.game.scale.resize(window.innerWidth, window.innerHeight);\n    }\n  }\n\n  ngOnDestroy(): void {\n    if (this.game) {\n        this.game.destroy(true);\n        this.game = null;\n    }\n    window.removeEventListener('resize', this.onResize.bind(this));\n  }\n}\n\nclass MainScene extends Phaser.Scene {\n    private logoContainer!: Phaser.GameObjects.Container;\n\n    constructor() {\n        super({ key: 'MainScene' });\n    }\n\n    create() {\n        const centerX = this.scale.width / 2;\n        const centerY = this.scale.height / 2;\n\n        this.logoContainer = this.add.container(centerX, centerY);\n\n        // V Logo Graphics\n        const graphics = this.add.graphics();\n        \n        // Glow effect (simulated with multiple overlapping strokes)\n        graphics.lineStyle(4, 0x47848F, 0.3);\n        this.drawV(graphics, 6); // Outer glow\n        \n        graphics.lineStyle(2, 0x47848F, 1);\n        this.drawV(graphics, 0); // Main Stroke\n\n        // Red Accent\n        const accent = this.add.graphics();\n        accent.lineStyle(2, 0xDD0031, 1);\n        accent.beginPath();\n        accent.moveTo(-50, 0);\n        accent.lineTo(0, 100);\n        accent.strokePath();\n\n        this.logoContainer.add([graphics, accent]);\n\n        // Text\n        const text = this.add.text(0, 140, 'VALENCE 2D', {\n            fontFamily: 'Segoe UI',\n            fontSize: '32px',\n            color: '#ffffff',\n            align: 'center'\n        }).setOrigin(0.5);\n        \n        const subtext = this.add.text(0, 180, 'Angular + Electron + Phaser', {\n            fontFamily: 'Segoe UI',\n            fontSize: '14px',\n            color: '#888888',\n            align: 'center'\n        }).setOrigin(0.5);\n\n        this.logoContainer.add([text, subtext]);\n    }\n\n    private drawV(graphics: Phaser.GameObjects.Graphics, offset: number) {\n        // V Shape\n        graphics.beginPath();\n        graphics.moveTo(-50 - offset, -50 - offset);\n        graphics.lineTo(0, 50 + offset);\n        graphics.lineTo(50 + offset, -50 - offset);\n        graphics.strokePath();\n    }\n\n    update() {\n        if (this.logoContainer) {\n            this.logoContainer.rotation = Math.sin(this.time.now / 1000) * 0.05;\n            this.logoContainer.scale = 1 + Math.sin(this.time.now / 2000) * 0.02;\n        }\n    }\n}\n";
+//# sourceMappingURL=phaser.d.ts.map

package/dist/templates/phaser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phaser.d.ts","sourceRoot":"","sources":["../../src/templates/phaser.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,2BAA2B,8nIAiJvC,CAAC"}

package/dist/templates/phaser.js

@@ -0,0 +1,147 @@
+export const phaserEngineServiceTemplate = `
+import { Injectable, NgZone, ElementRef, OnDestroy, signal, WritableSignal } from '@angular/core';
+import Phaser from 'phaser';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PhaserEngineService implements OnDestroy {
+  public game: Phaser.Game | null = null;
+  public fps: WritableSignal<string> = signal('0');
+  public rotation: WritableSignal<string> = signal('2D Mode');
+  
+  private canvas: HTMLCanvasElement | null = null;
+
+  constructor(private ngZone: NgZone) {}
+
+  public initGame(canvas: HTMLCanvasElement) {
+    this.canvas = canvas;
+    this.ngZone.runOutsideAngular(() => {
+        if (!this.game) {
+            this.createGame();
+        }
+    });
+  }
+
+  private createGame() {
+    if (!this.canvas) return;
+
+    const config: Phaser.Types.Core.GameConfig = {
+      type: Phaser.WEBGL,
+      canvas: this.canvas,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      backgroundColor: '#0d0d0d', // Match 3D background
+      physics: {
+          default: 'arcade',
+          arcade: {
+              gravity: { x: 0, y: 0 },
+              debug: false
+          }
+      },
+      scene: [MainScene],
+      scale: {
+          mode: Phaser.Scale.RESIZE,
+          autoCenter: Phaser.Scale.CENTER_BOTH
+      },
+      callbacks: {
+          postBoot: (game) => {
+             // Hook into the loop for stats
+             const originalStep = game.loop.step;
+             game.loop.step = (time: number, delta: number) => {
+                 originalStep.call(game.loop, time, delta);
+                 this.fps.set(game.loop.actualFps.toFixed(0));
+             };
+          }
+      }
+    };
+
+    this.game = new Phaser.Game(config);
+    
+    window.addEventListener('resize', this.onResize.bind(this));
+  }
+
+  private onResize() {
+    if (this.game) {
+      this.game.scale.resize(window.innerWidth, window.innerHeight);
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.game) {
+        this.game.destroy(true);
+        this.game = null;
+    }
+    window.removeEventListener('resize', this.onResize.bind(this));
+  }
+}
+
+class MainScene extends Phaser.Scene {
+    private logoContainer!: Phaser.GameObjects.Container;
+
+    constructor() {
+        super({ key: 'MainScene' });
+    }
+
+    create() {
+        const centerX = this.scale.width / 2;
+        const centerY = this.scale.height / 2;
+
+        this.logoContainer = this.add.container(centerX, centerY);
+
+        // V Logo Graphics
+        const graphics = this.add.graphics();
+        
+        // Glow effect (simulated with multiple overlapping strokes)
+        graphics.lineStyle(4, 0x47848F, 0.3);
+        this.drawV(graphics, 6); // Outer glow
+        
+        graphics.lineStyle(2, 0x47848F, 1);
+        this.drawV(graphics, 0); // Main Stroke
+
+        // Red Accent
+        const accent = this.add.graphics();
+        accent.lineStyle(2, 0xDD0031, 1);
+        accent.beginPath();
+        accent.moveTo(-50, 0);
+        accent.lineTo(0, 100);
+        accent.strokePath();
+
+        this.logoContainer.add([graphics, accent]);
+
+        // Text
+        const text = this.add.text(0, 140, 'VALENCE 2D', {
+            fontFamily: 'Segoe UI',
+            fontSize: '32px',
+            color: '#ffffff',
+            align: 'center'
+        }).setOrigin(0.5);
+        
+        const subtext = this.add.text(0, 180, 'Angular + Electron + Phaser', {
+            fontFamily: 'Segoe UI',
+            fontSize: '14px',
+            color: '#888888',
+            align: 'center'
+        }).setOrigin(0.5);
+
+        this.logoContainer.add([text, subtext]);
+    }
+
+    private drawV(graphics: Phaser.GameObjects.Graphics, offset: number) {
+        // V Shape
+        graphics.beginPath();
+        graphics.moveTo(-50 - offset, -50 - offset);
+        graphics.lineTo(0, 50 + offset);
+        graphics.lineTo(50 + offset, -50 - offset);
+        graphics.strokePath();
+    }
+
+    update() {
+        if (this.logoContainer) {
+            this.logoContainer.rotation = Math.sin(this.time.now / 1000) * 0.05;
+            this.logoContainer.scale = 1 + Math.sin(this.time.now / 2000) * 0.02;
+        }
+    }
+}
+`;
+//# sourceMappingURL=phaser.js.map

package/dist/templates/phaser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phaser.js","sourceRoot":"","sources":["../../src/templates/phaser.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJ1C,CAAC"}

package/dist/templates/settings.d.ts

@@ -0,0 +1,2 @@
+export declare const settingsServiceTemplate = "\nimport { Injectable, signal, effect } from '@angular/core';\nimport { StorageService } from '../storage/storage.service';\nimport { AudioService, SoundChannel } from '../audio/audio.service';\n\nexport interface GameSettings {\n  audio: {\n    master: number;\n    music: number;\n    sfx: number;\n  };\n  graphics: {\n    resolutionScale: number;\n    antialiasing: boolean;\n  };\n}\n\nconst DEFAULT_SETTINGS: GameSettings = {\n  audio: { master: 1.0, music: 0.8, sfx: 1.0 },\n  graphics: { resolutionScale: 1.0, antialiasing: true }\n};\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class SettingsService {\n\n  public settings = signal<GameSettings>(DEFAULT_SETTINGS);\n\n  constructor(\n    private storage: StorageService,\n    private audio: AudioService\n  ) {\n\n    // Auto-save on change (debounced effect could be better, but simple for now)\n    effect(() => {\n      const s = this.settings();\n      this.applySettings(s);\n      this.storage.save('settings', s);\n    });\n  }\n\n  private async loadSettings() {\n    const saved = await this.storage.load<GameSettings>('settings');\n    if (saved) {\n      this.settings.set({ ...DEFAULT_SETTINGS, ...saved });\n    }\n  }\n\n  private applySettings(s: GameSettings) {\n    this.audio.setVolume(SoundChannel.MASTER, s.audio.master);\n    this.audio.setVolume(SoundChannel.MUSIC, s.audio.music);\n    this.audio.setVolume(SoundChannel.SFX, s.audio.sfx);\n    \n    // Graphics would typically be pulled by the EngineService from this signal\n  }\n\n  public updateAudio(channel: keyof GameSettings['audio'], value: number) {\n    this.settings.update(s => ({\n      ...s,\n      audio: { ...s.audio, [channel]: value }\n    }));\n  }\n}\n";
+//# sourceMappingURL=settings.d.ts.map

package/dist/templates/settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/templates/settings.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,qrDAgEnC,CAAC"}