1  # DreamSong Migration Plan
 2  
 3  ## 1. File System Operations
 4  - Extend `src/utils/fileUtils.js` with functions to:
 5    a) Read the DreamSong.canvas file
 6    b) List media files in a Dream Node repository
 7  
 8  - Update `src/services/electronService.js` if needed for new IPC operations
 9  
10  ## 2. Data Processing
11  - Create `src/utils/dreamSongUtils.js` for:
12    a) Parsing DreamSong.canvas data
13    b) Topological sorting of nodes
14  
15  ## 3. DreamSong Component
16  - Modify `src/components/DreamSong.js` to:
17    a) Use the new utility functions for data processing
18    b) Render the linear flow of media and text elements
19    c) Handle clicks on media files, interpreting them as Dream Node clicks
20    d) Communicate with the Dreamgraph component for space reorganization
21  
22  ## 4. Integration
23  - Update the Dreamgraph component to accept signals from DreamSong
24  - Ensure DreamSong can access necessary Dream Node information
25  
26  ## 5. Styling
27  - Adapt styles from the legacy `styles.css` to work within the React component
28  
29  ## Implementation Steps
30  
31  1. File System and Data Processing:
32     - Implement file reading and parsing functions in fileUtils.js and dreamSongUtils.js
33     - Add topological sorting function to dreamSongUtils.js
34  
35  2. DreamSong Component:
36     - Update DreamSong.js to use the new utility functions
37     - Implement the rendering logic for the linear flow of elements
38     - Add click handling for media files, translating clicks to Dream Node interactions
39  
40  3. Integration with Existing Components:
41     - Modify Dreamgraph to accept signals from DreamSong
42     - Ensure DreamSong can access Dream Node repository information
43  
44  4. Styling:
45     - Adapt legacy styles to work within the React component, using styled-components or CSS modules
46  
47  5. Testing and Refinement:
48     - Test the new DreamSong functionality within the larger application
49     - Refine the implementation as needed