Calculator

┌─────────────────────────────────────┐
│ [7] [8] [9] [÷] │
│ [4] [5] [6] [×] │
│ [1] [2] [3] [-] │
│ [0] [.] [%] [+] │
│ [x^y] [√x] [∛x] [x²] [x³] │
│ [x^n] [n√x] [ ] [ ] [ ] │
└─────────────────────────────────────┘
```text

### Display Components
1. **Main Display**: Shows current number or result
2. **History**: Shows the mathematical expression
3. **Kifuliiru Translation**: Compact translation in Kifuliiru
4. **Audio Controls**: Play Kifuliiru pronunciation

## Technical Implementation

### State Management
```typescript
interface CalculatorState {
 display: string; // Current display value
 history: string; // Mathematical expression history
 kifuliiruHistory: string; // Kifuliiru translation
 expression: string; // Current mathematical expression
 isNewNumber: boolean; // Whether to start new number
 isReading: boolean; // Audio playback state
 inputMode: 'normal' | 'exponent' | 'root'; // Input mode
 tempValue: string; // Temporary input value
}
```text

### Expression Parsing
- **Operator Precedence**: Handles complex mathematical expressions
- **Right-to-Left Exponents**: Proper exponent evaluation
- **Unary Operations**: Square root and other unary functions
- **Error Handling**: Graceful handling of invalid expressions

### Kifuliiru Translation System
- **Real Translations**: Uses `translateExponentKifuliiru` and `translateRootKifuliiru`
- **Active Voice**: Proper verb conjugations based on number values
- **Number Translation**: Uses existing `translateNumber` function
- **Result Format**: Consistent `twaloonga [result]` format

## Responsive Design

### Mobile (< 640px)
- Compact button layout
- Smaller text sizes
- Touch-optimized buttons
- Minimal translation space

### Tablet (640px - 1024px)
- Balanced sizing
- Medium text sizes
- Comfortable button spacing

### Desktop (> 1024px)
- Full-size layout
- Large text for readability
- Optimal spacing

## Audio Features

### Text-to-Speech
- **Kifuliiru Pronunciation**: Accurate pronunciation of numbers
- **Audio Controls**: Play/pause functionality
- **Visual Feedback**: Animated audio icon during playback

### Audio Integration
- Uses Web Speech API
- Fallback for unsupported browsers
- Proper error handling

## Example Calculations

### Basic Operations
```text
Input: 5 + 3
Result: 8
Kifuliiru: bubiri bushoniri ku butanu twaloonga munaana
```text

### Advanced Operations
```text
Input: √16
Result: 4
Kifuliiru: bubiri bubwisiri ikumi na ndatu twaloonga buna

Input: 2^4
Result: 16
Kifuliiru: bubiri bushoniri ku bubiri twaloonga ikumi na ndatu

Input: ∛8
Result: 2
Kifuliiru: bushatu gubwisiri munaana twaloonga bubiri
```text

### Complex Expressions
```text
Input: 2 + 3 × 4
Result: 14
Kifuliiru: bubiri kugabura bushatu kugabura buna twaloonga ikumi na buna
```text

## Performance Optimizations

### Space Efficiency
- **Compact Layout**: 50% reduction in vertical space
- **Minimal Translation Area**: Ultra-compact Kifuliiru display
- **Optimized Buttons**: Smaller padding and spacing
- **Responsive Text**: Appropriate sizing for each screen size

### Build Optimizations
- **TypeScript**: Full type safety
- **Tree Shaking**: Only imports used functions
- **Code Splitting**: Lazy loading of components
- **Bundle Size**: 5.7 kB for calculator page

## Development

### File Structure
```text
src/app/math/calculator/
└── page.tsx # Main calculator component

src/lib/
└── numberTranslations.ts # Kifuliiru translation functions

src/i18n/locales/
├── en.json # English translations
└── flr.json # Kifuliiru translations
```text

### Dependencies
- **React**: UI framework
- **Next.js**: Full-stack framework
- **TypeScript**: Type safety
- **Tailwind CSS**: Styling
- **Framer Motion**: Animations
- **Lucide React**: Icons

## Future Enhancements

### Planned Features
- **Memory Functions**: M+, M-, MR, MC
- **Scientific Functions**: sin, cos, tan, log, ln
- **History Panel**: Previous calculations
- **Export Functions**: Save calculations
- **Theme Support**: Dark/light mode toggle

### Accessibility
- **Screen Reader Support**: ARIA labels
- **Keyboard Navigation**: Full keyboard support
- **High Contrast**: Better visibility
- **Font Scaling**: Support for larger text

## Related Documentation

- [Numbers System Guide](/kifuliiru-com/guides/numbers-system)
- [Math Question Templates](/kifuliiru-com/guides/math-question-templates)
- [Translation System Guide](/kifuliiru-com/guides/translation-system)

## Contributing

When contributing to the calculator:

1. **Maintain Type Safety**: Always use TypeScript
2. **Test Translations**: Verify Kifuliiru translations are correct
3. **Responsive Design**: Test on all screen sizes
4. **Keyboard Support**: Ensure all functions work with keyboard
5. **Performance**: Keep bundle size minimal
6. **Accessibility**: Follow WCAG guidelines

## License

This calculator is part of the Kifuliiru Language Project and follows the same licensing terms as the main project.