# System Patterns

## Tech Stack
- **Build Tool:** Vite
- **Package Manager:** pnpm
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **Testing:** Vitest

## Design Patterns
- **Modular Logic:** Calculation logic is isolated in a pure TypeScript module (`src/calculator.ts`) for easy testing.
- **Reactive UI (Vanilla):** Use DOM event listeners and a central `render()` or `update()` function to sync state to the UI.
- **Unit Normalization:** All internal calculations should be performed in **millimeters**. Inputs in inches are converted immediately upon ingestion.

## Directory Structure
- `src/`: Source code.
  - `calculator.ts`: Core business logic.
  - `main.ts`: Entry point and DOM manipulation.
  - `style.css`: Tailwind entry point.
- `docs/`: Permanent documentation (PRD, Architecture).
- `memory-bank/`: AI operational context.
- `tests/`: Unit tests.

## Calculation Constants (Defaults)
- Grid Width/Depth: 42mm
- Grid Height Unit: 7mm
- Base Thickness: 4.8mm (typical baseplate height above surface)
- Bin Lip/Bottom: 0.7mm (typical clearance/thickness to account for in vertical units)
  - *Note: These defaults will be refined during implementation based on official specs.*