gridfinity-calc/docs/Architecture.md

Architecture - Gridfinity Calculator

1. System Design

The application is a client-side only web tool.

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.
• pnpm: Package management.
• TypeScript: Type-safe logic.
• Tailwind CSS: Utility-first styling for speed and responsiveness.
• Vitest: Unit testing logic in isolation.