Single shot prompt for a Matrix calculator

matrixide-singleshot-prompt.txt

Based on the requirements in the design document, implement this program comprehensively to total completion. Respond with a single HTML code block containing all the code.
# Design Document
## Overview
The Matrix Calculator is a web-based application that provides an IDE-style interface for matrix operations. The application consists of multiple resizable panels including a graphical matrix editor, variable manager, command-line interface, and results display. The architecture follows a modular design pattern with clear separation between UI components, matrix operations, and state management.
## Architecture
### High-Level Architecture
```mermaid
graph TB
    UI[User Interface Layer]
    Core[Core Application Layer]
    Math[Matrix Mathematics Layer]
    Storage[State Management Layer]
   
    UI --> Core
    Core --> Math
    Core --> Storage
   
    subgraph "UI Components"
        ME[Matrix Editor]
        VE[Variable Editor]
        CLI[Command Line Interface]
        PM[Panel Manager]
    end
   
    subgraph "Core Services"
        CS[Command Service]
        VS[Variable Service]
        KS[Keyboard Service]
    end
   
    subgraph "Math Operations"
        BO[Basic Operations]
        AO[Advanced Operations]
        VA[Validation]
    end
```
### Component Interaction Flow
1. **User Input** → UI Components capture user interactions
2. **Command Processing** → Core services interpret and validate commands
3. **Matrix Operations** → Math layer performs calculations
4. **State Updates** → Storage layer manages variable state
5. **UI Updates** → Interface reflects new state and results
## Components and Interfaces
### 1. Panel Manager (`PanelManager`)
**Purpose:** Manages the IDE-style layout with resizable panels
**Key Methods:**
- `initializePanels()` - Sets up initial panel layout
- `resizePanel(panelId, newSize)` - Handles panel resizing
- `togglePanel(panelId)` - Collapses/expands panels
- `saveLayout()` - Persists panel configuration
**Properties:**
- `panels: Map<string, Panel>` - Panel instances
- `layout: LayoutConfig` - Current layout configuration
### 2. Matrix Editor (`MatrixEditor`)
**Purpose:** Provides graphical matrix editing interface
**Key Methods:**
- `createMatrix(rows, cols)` - Generates matrix grid
- `updateCell(row, col, value)` - Updates individual cell values
- `validateMatrix()` - Validates all matrix data
- `getMatrix()` - Returns current matrix as 2D array
- `setMatrix(matrix)` - Loads matrix into editor
**Properties:**
- `currentMatrix: number[][]` - Current matrix data
- `dimensions: {rows: number, cols: number}` - Matrix size
- `selectedCell: {row: number, col: number}` - Currently selected cell
### 3. Variable Manager (`VariableManager`)
**Purpose:** Manages matrix variables and their storage
**Key Methods:**
- `storeVariable(name, matrix)` - Saves matrix to variable
- `getVariable(name)` - Retrieves matrix by variable name
- `deleteVariable(name)` - Removes variable
- `listVariables()` - Returns all variable names
- `validateVariableName(name)` - Checks variable name validity
**Properties:**
- `variables: Map<string, number[][]>` - Stored matrices
- `variableList: HTMLElement` - UI list of variables
### 4. Command Line Interface (`CommandLineInterface`)
**Purpose:** Processes text-based matrix commands
**Key Methods:**
- `parseCommand(input)` - Parses command syntax
- `executeCommand(command)` - Executes parsed command
- `addToHistory(command)` - Stores command history
- `showError(message)` - Displays error messages
- `showResult(result)` - Displays operation results
**Properties:**
- `commandHistory: string[]` - Previous commands
- `currentInput: string` - Current command text
- `parser: CommandParser` - Command parsing logic, uses a recursive descent parser
### 5. Matrix Operations (`MatrixMath`)
**Purpose:** Implements all matrix mathematical operations
**Key Methods:**
- `add(A, B)` - Matrix addition
- `subtract(A, B)` - Matrix subtraction
- `multiply(A, B)` - Matrix multiplication
- `transpose(A)` - Matrix transpose
- `inverse(A)` - Matrix inverse (if exists)
- `rref(A)` - Reduced row echelon form
- `determinant(A)` - Matrix determinant
**Properties:**
- `EPSILON: number` - Floating point precision threshold
### 6. Keyboard Handler (`KeyboardHandler`)
**Purpose:** Manages keyboard shortcuts and navigation
**Key Methods:**
- `registerShortcut(key, callback)` - Adds keyboard shortcut
- `handleKeyPress(event)` - Processes keyboard events
- `navigateMatrix(direction)` - Moves between matrix cells
- `showHelp()` - Displays shortcut help
**Properties:**
- `shortcuts: Map<string, Function>` - Registered shortcuts
- `currentFocus: HTMLElement` - Currently focused element
## Data Models
### Matrix Data Structure
```javascript
interface Matrix {
    data: number[][];
    rows: number;
    cols: number;
    name?: string;
}
```
### Variable Storage
```javascript
interface VariableStore {
    [variableName: string]: Matrix;
}
```
### Command Structure
```javascript
interface Command {
    type: 'assignment' | 'operation';
    target?: string;
    operation: string;
    operands: string[];
    raw: string;
}
```
### Panel Configuration
```javascript
interface PanelConfig {
    id: string;
    title: string;
    content: HTMLElement;
    resizable: boolean;
    collapsible: boolean;
    defaultSize: string;
    minSize: string;
}
```
## Error Handling
### Input Validation
- **Matrix Cells:** Validate numeric input, handle empty cells as zeros
- **Dimensions:** Ensure positive integer dimensions
- **Variable Names:** Validate against reserved keywords and syntax rules
### Operation Validation
- **Dimension Compatibility:** Check matrix dimensions before operations
- **Invertibility:** Verify matrix is square and non-singular for inverse
- **Division by Zero:** Handle singular matrices and zero determinants
### Error Display Strategy
- **Inline Errors:** Highlight invalid cells in red with tooltips
- **Command Errors:** Show error messages in command line output
- **Modal Errors:** Use modals for critical errors requiring user attention
### Error Recovery
- **Graceful Degradation:** Continue operation with valid data when possible
- **Undo Functionality:** Allow users to revert problematic changes
- **Default Values:** Provide sensible defaults for invalid inputs
## Implementation Considerations
### Performance Optimization
- **Lazy Loading:** Only render visible matrix cells for large matrices
- **Debounced Updates:** Batch UI updates to prevent excessive redraws
- **Memory Management:** Clean up unused variables and DOM elements
### Browser Compatibility
- **Modern JavaScript:** Use ES6+ features with appropriate fallbacks
- **CSS Grid/Flexbox:** Leverage modern layout techniques
- **Local Storage:** Persist user preferences and session data
### Security Considerations
- **Input Sanitization:** Prevent XSS through proper input handling
- **Command Injection:** Safely parse and execute user commands
- **Data Validation:** Validate all user inputs before processing