# sanya-shch/matrix-playground architecture

> Architecture diagram of the GitHub repository sanya-shch/matrix-playground, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sanya-shch/matrix-playground
- Repository: https://github.com/sanya-shch/matrix-playground

## Overview

Matrix Playground is a browser-based NxM matrix editor: users set dimensions and nearest-value count, then generate and interact with a matrix. The central flow runs from the app shell and controls through Zustand state to matrix operations and the virtualized canvas; cell edits, sum visualizations, nearest highlighting, and row/column changes are distinct behaviors. README-described rendering and performance features are represented where supported by excerpts. Evidence is limited to the README and indexed excerpts; unsampled component details are not inferred.

Main entry points: [`src/store/useMatrixStore.ts`](https://github.com/sanya-shch/matrix-playground/blob/main/src/store/useMatrixStore.ts) (Zustand store), [`src/components/Controls.tsx`](https://github.com/sanya-shch/matrix-playground/blob/main/src/components/Controls.tsx) (Dimension controls), [`src/components/MatrixCanvas.tsx`](https://github.com/sanya-shch/matrix-playground/blob/main/src/components/MatrixCanvas.tsx) (Virtualized canvas), [`src/engine/matrix.ts`](https://github.com/sanya-shch/matrix-playground/blob/main/src/engine/matrix.ts) (Matrix engine)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["User interface"]
  node_app["App shell<br/>[App.tsx]"]
  node_controls["Dimension controls<br/>[Controls.tsx]"]
  node_canvas["Virtualized canvas<br/>[MatrixCanvas.tsx]"]
  node_debug["Debug snapshot<br/>[DebugState.tsx]"]
end

subgraph group_state["Matrix state"]
  node_store["Zustand store<br/>[useMatrixStore.ts]"]
end

subgraph group_logic["Matrix logic"]
  node_matrix["Matrix engine<br/>[matrix.ts]"]
end

subgraph group_support["Shared support"]
  node_matrix_types["Matrix types<br/>[matrix.ts]"]
  node_constants["Matrix constants<br/>[matrix.ts]"]
end

node_user(("User"))

node_user -->|"sets dimensions"| node_controls
node_controls -->|"updates settings"| node_store
node_app -->|"renders"| node_controls
node_app -->|"renders"| node_canvas
node_app -->|"renders"| node_debug
node_user -->|"interacts"| node_canvas
node_canvas -->|"reads and updates"| node_store
node_canvas -->|"uses calculations"| node_matrix
node_store -->|"invokes operations"| node_matrix
node_store -->|"uses state types"| node_matrix_types
node_matrix -->|"uses state type"| node_matrix_types
node_matrix -->|"uses value bounds"| node_constants
node_store -->|"uses limits"| node_constants
node_controls -->|"uses dimension bounds"| node_constants
node_debug -->|"reads snapshot state"| node_store

click node_app "https://github.com/sanya-shch/matrix-playground/blob/main/src/App.tsx"
click node_controls "https://github.com/sanya-shch/matrix-playground/blob/main/src/components/Controls.tsx"
click node_canvas "https://github.com/sanya-shch/matrix-playground/blob/main/src/components/MatrixCanvas.tsx"
click node_debug "https://github.com/sanya-shch/matrix-playground/blob/main/src/components/DebugState.tsx"
click node_store "https://github.com/sanya-shch/matrix-playground/blob/main/src/store/useMatrixStore.ts"
click node_matrix "https://github.com/sanya-shch/matrix-playground/blob/main/src/engine/matrix.ts"
click node_matrix_types "https://github.com/sanya-shch/matrix-playground/blob/main/src/types/matrix.ts"
click node_constants "https://github.com/sanya-shch/matrix-playground/blob/main/src/constants/matrix.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_controls,node_canvas,node_debug,node_user toneBlue
class node_store toneAmber
class node_matrix toneMint
class node_matrix_types,node_constants toneRose
```

## Components

### User interface

- [App shell](https://github.com/sanya-shch/matrix-playground/blob/main/src/App.tsx): `src/App.tsx`
- [Dimension controls](https://github.com/sanya-shch/matrix-playground/blob/main/src/components/Controls.tsx): `src/components/Controls.tsx`
- [Virtualized canvas](https://github.com/sanya-shch/matrix-playground/blob/main/src/components/MatrixCanvas.tsx): `src/components/MatrixCanvas.tsx`
- [Debug snapshot](https://github.com/sanya-shch/matrix-playground/blob/main/src/components/DebugState.tsx): `src/components/DebugState.tsx`

### Matrix state

- [Zustand store](https://github.com/sanya-shch/matrix-playground/blob/main/src/store/useMatrixStore.ts): `src/store/useMatrixStore.ts`

### Matrix logic

- [Matrix engine](https://github.com/sanya-shch/matrix-playground/blob/main/src/engine/matrix.ts): `src/engine/matrix.ts`

### Shared support

- [Matrix types](https://github.com/sanya-shch/matrix-playground/blob/main/src/types/matrix.ts): `src/types/matrix.ts`
- [Matrix constants](https://github.com/sanya-shch/matrix-playground/blob/main/src/constants/matrix.ts): `src/constants/matrix.ts`

### Other components

- **User**

## Connections

- User → Dimension controls: sets dimensions (evidence: `src/components/Controls.tsx`)
- Dimension controls → Zustand store: updates settings (evidence: `src/components/Controls.tsx`)
- App shell → Dimension controls: renders (evidence: `src/App.tsx`)
- App shell → Virtualized canvas: renders (evidence: `src/App.tsx`)
- App shell → Debug snapshot: renders (evidence: `src/App.tsx`)
- User → Virtualized canvas: interacts (evidence: `README.md`)
- Virtualized canvas → Zustand store: reads and updates (evidence: `src/components/MatrixCanvas.tsx`)
- Virtualized canvas → Matrix engine: uses calculations (evidence: `src/components/MatrixCanvas.tsx`)
- Zustand store → Matrix engine: invokes operations (evidence: `src/store/useMatrixStore.ts`)
- Zustand store → Matrix types: uses state types (evidence: `src/store/useMatrixStore.ts`)
- Matrix engine → Matrix types: uses state type (evidence: `src/engine/matrix.ts`)
- Matrix engine → Matrix constants: uses value bounds (evidence: `src/engine/matrix.ts`)
- Zustand store → Matrix constants: uses limits (evidence: `src/store/useMatrixStore.ts`)
- Dimension controls → Matrix constants: uses dimension bounds (evidence: `src/components/Controls.tsx`)
- Debug snapshot → Zustand store: reads snapshot state (evidence: `src/components/DebugState.tsx`)