SteelBase/.kiro/steering/structure.md

Project Structure

File Organization

/
├── index.html              # Main application entry point
├── app.js                  # UI logic and navigation
├── calculations.js         # Calculation engine
├── style.css               # Complete design system
├── BD/                     # Material database (CSV)
│   ├── perfis_w.csv
│   ├── perfis_i.csv
│   ├── cantoneiras.csv
│   ├── tubos_circulares.csv
│   ├── tubos_rhs.csv
│   ├── chapas.csv
│   ├── barras.csv
│   ├── eletrodos.csv
│   ├── parafusos.csv
│   └── tintas.csv
├── ORIGINAL/               # Backup of original files
└── aco-calc-pro-v7-5.zip   # Archive

Code Organization

app.js

• Application state management (appState, adminConfig)
• Navigation and section switching
• Modal management (history, favorites, admin, help)
• Theme toggling (light/dark)
• Expert mode functionality
• CSV loading and parsing
• Material database (in-memory fallback)
• Content generation functions for each section

calculations.js

• Calculation functions for all engineering tools
• Result formatting and display
• Chart generation (Charpy curves)
• History tracking
• Input validation

style.css

• Design system with CSS variables
• Theme support (light/dark modes)
• Responsive layout
• Component styles (buttons, forms, cards, modals)
• Utility classes

Key Patterns

Section Loading

Each tool section has a content generator function (e.g., getCEVContent(), getParafusosContent()) that returns HTML strings dynamically injected into the main content area.

State Management

Global objects store application state:

• appState: Current section, theme, mode, history, favorites, budget items
• adminConfig: Branding, tool visibility, preferences

CSV Data Loading

Materials are loaded from CSV files with fallback to in-memory database:

1. Attempt to fetch CSV from /BD/ directory
2. Parse CSV into JavaScript objects
3. Fall back to materialsDatabase if fetch fails

Calculation Flow

1. User inputs values in form
2. Calculation function reads inputs
3. Performs calculations following engineering standards
4. Generates formatted result HTML
5. Adds entry to history

Naming Conventions

• Functions: camelCase (e.g., calcularPreaquecimento, showSection)
• Variables: camelCase (e.g., currentChart, appState)
• CSS Classes: kebab-case (e.g., sidebar-item, result-box)
• IDs: kebab-case (e.g., main-content, history-modal)
• Constants: camelCase for objects (e.g., steelDatabase, regionalPricing)

Modular Sections

The application is organized into 6 main categories:

1. MATERIAIS (Materials): CEV, steel selector, equivalencies, comparisons
2. CONEXÕES (Connections): Bolted connections, drilling layouts, bolt vs weld
3. SOLDAGEM (Welding): Preheat, fillet welds, heat input, electrode consumption
4. ENSAIOS (Testing): Hardness, Charpy, certificates, ultrasound
5. PINTURA (Coating): Area calculation, paint consumption, galvanization, costs
6. ORÇAMENTO (Budget): Detailed budgets, weight/rigging, technical references

Extension Points

To add a new calculation tool:

1. Add sidebar item in index.html
2. Create content generator function in app.js (e.g., getNewToolContent())
3. Add calculation function in calculations.js
4. Add section case to loadSectionContent() switch
5. Update adminConfig.toolsVisibility if needed