feat: functional gridfinity calculator app

docs/Architecture.md

@@ -0,0 +1,32 @@
+# 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.