mcalc/ARCHITECTURE.md

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:

• 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