# Architecture

## Overview

mcalc is a simple calculator application built with Dioxus 0.7. The architecture follows a clean separation between UI and business logic.

## Components

### `src/main.rs`
- Application entry point
- Loads global CSS stylesheet
- Renders the root `Calculator` component

### `src/ui.rs`
- Contains the `Calculator` component
- Manages reactive state via Dioxus Signals
- Renders the display and keypad grid
- Delegates operations to `logic.rs`

### `src/logic.rs`
- Pure business logic functions
- No Dioxus dependencies
- Handles digit input, operator selection, and calculation

## State Management

The calculator uses Dioxus `Signal<String>` for reactive state:

| Signal | Purpose |
|--------|---------|
| `first_num` | First operand |
| `second_num` | Second operand |
| `operator` | Selected operator (+, -, *, /) |

State flows from `ui.rs` to `logic.rs` via function parameters. The UI component owns the state; logic functions mutate it through write handles.

## Data Flow

```
User Input → ui.rs (onclick handlers) → logic.rs (pure functions) → State Update → Re-render
```

1. User clicks a button
2. Event handler calls logic function (e.g., `input_digit`)
3. Logic function mutates the signal
4. Dioxus detects the change and re-renders

## Design System

The UI follows the [BYTEMALTE design system](BYTEMALTE.md):

- Dark theme with `#0F172A` background
- Primary accent: `#8888FF`
- Secondary accent: `#3DDC84`
- Error/clear: `#EF4444`

## File Responsibilities

| File | Responsibility |
|------|----------------|
| `main.rs` | App initialization, asset loading |
| `ui.rs` | Component rendering, state ownership |
| `logic.rs` | Calculator operations, validation |
| `assets/main.css` | Styling, theming, animations |