# Architecture - Gridfinity Calculator

## 1. System Design
The application is a client-side only web tool.

```mermaid
graph TD
    A[index.html] --> B[main.ts]
    B --> C[calculator.ts]
    B --> D[DOM Update]
    E[User Input] --> B
```

## 2. Components
- **Input Form:** Collects drawer dimensions and unit preferences.
- **Spec Controls:** Accordion or settings panel for overriding Gridfinity defaults.
- **Calculation Engine:** Pure TS module for unit conversion and Gridfinity math.
- **Results Display:** Visual cards/readouts showing calculated values.

## 3. Data Flow
1. User changes an input.
2. `main.ts` catches the event.
3. `main.ts` gathers all current values from the DOM.
4. `main.ts` calls `calculator.ts` functions.
5. `calculator.ts` returns a results object.
6. `main.ts` updates the results section of the DOM.

## 4. Technical Stack
- **Vite:** Asset bundling and dev server.
- **TypeScript:** Type-safe logic.
- **Tailwind CSS:** Utility-first styling for speed and responsiveness.
- **Vitest:** Unit testing logic in isolation.