# Copilot Instructions for infissionline-vite

Welcome to the `infissionline-vite` project! This document provides essential guidelines for AI coding agents to be productive in this codebase. Follow these instructions to understand the architecture, workflows, and conventions specific to this project.

---

## Project Overview

This project is a web-based configurator for infissi (windows and doors) built using Vite. It includes a modular structure for managing assets, data, and JavaScript logic. The primary goal is to provide a dynamic and interactive user experience for configuring and visualizing products.

### Key Components

1. **Frontend**:
   - **HTML Templates**: Located in `src/index.html` and `src/assets/_menu*.html`.
   - **CSS Styles**: Defined in `src/assets/style.css`.
   - **JavaScript Logic**: Core functionality resides in `src/js/`.
     - `app.js`: Entry point for initializing the application.
     - `configurator.js`: Handles product configuration logic.
     - `menu_builder.js`: Dynamically builds menus.
     - `params_parser.js`: Parses URL parameters.
     - `price_calculator.js`: Calculates product prices.
     - `starter.js`: Bootstraps the application.

2. **Data Management**:
   - **JSON Files**: Product data is stored in `src/assets/data/`.
     - `modelli/`: Contains model-specific data for `alluminio` and `pvc`.
     - `sistemi/`: Defines system-level configurations (e.g., handle heights).
   - **Images**: Product images are organized in `src/assets/data/icone/` and `src/assets/data/immagini/`.

3. **Build System**:
   - Vite is used for development and production builds.
   - Configuration is defined in `vite.config.js`.

---

## Developer Workflows

### Building the Project
- Use `pnpm install` to install dependencies.
- Run `pnpm dev` to start the development server.
- Use `pnpm build` to create a production build.

### Debugging
- Open the browser console to inspect JavaScript errors.
- Use `console.log` for debugging specific parts of the code.
- Modify `src/js/` files to test changes dynamically during development.

### Testing
- No explicit testing framework is set up. Use manual testing by interacting with the configurator in the browser.

---

## Project-Specific Conventions

1. **File Organization**:
   - Separate `alluminio` and `pvc` data under `modelli/` and `sistemi/`.
   - Maintain a clear hierarchy for images and models.

2. **Data Format**:
   - JSON files follow a structured format for product attributes.
   - Example: `src/assets/data/modelli/alluminio/finestra_1_anta/modello.json`.

3. **Dynamic Imports**:
   - Use dynamic imports in JavaScript for better performance.

4. **Naming Conventions**:
   - Use lowercase and underscores for file names.
   - Follow camelCase for JavaScript variables and functions.

---

## Integration Points

- **External Libraries**:
  - Vite: Build tool for modern web development.
  - Ensure all dependencies are listed in `package.json`.

- **Cross-Component Communication**:
  - JavaScript modules communicate via imports/exports.
  - Data flows from JSON files to the frontend via `configurator.js`.

---

## Examples

### Adding a New Product Model
1. Create a new folder under `src/assets/data/modelli/{material}/{product_name}`.
2. Add a `modello.json` file with the product's attributes.
3. Update `configurator.js` to include the new model if necessary.

### Debugging Price Calculation
1. Modify `src/js/price_calculator.js`.
2. Add `console.log` statements to inspect intermediate values.
3. Test changes by running `pnpm dev` and interacting with the configurator.

---

For further questions or updates, refer to the `src/js/` directory for examples of existing patterns.