Add comprehensive inline editing capabilities for all project files with visual modification tracking and batch save functionality.
Features:
- Edit buttons next to each file load button (Project, SVG, CSS, CSV)
- Modal editor with syntax validation for JSON files
- Real-time preview updates after applying changes
- Visual "MODIFIED" badges on edited files
- "Save Changes" button to download all modified files
- Keyboard shortcuts (Escape to close editor)
Implementation:
- file-editor.js: New module handling all editor functionality
- Editor modal with textarea for content editing
- Modification tracking using Set data structure
- File-specific validation (JSON syntax checking)
- Batch download of all modified files
- Visual badge updates for modified state
- index.html: UI updates
- Edit buttons added to all file items
- Modal HTML structure for editor
- Save Changes button in controls area
- CSS styling for editor modal and modified badges
- engine.js: Integration and data storage
- Store CSV and CSS content when loaded (for editing)
- Enable edit buttons when files are successfully loaded
- Works with all loading methods (folder picker, individual files, auto-load)
- CSS now loaded via fetch to store content (changed from link href)
- Makefile: Include file-editor.js in distribution build
User workflow:
1. Load project files (folder picker or individual files)
2. Click "✏️ Edit" button next to any file
3. Make changes in modal editor
4. Click "Apply Changes" to update and see immediate preview
5. Modified files show orange "MODIFIED" badge
6. Click "💾 Save Changes" to download all modified files at once
Technical details:
- Edit buttons start disabled, enabled when file loads
- JSON validation prevents saving invalid configurations
- Changes apply immediately to in-memory data
- Timeline regenerates automatically after edits
- Modified state persists until files are saved
- Optional clearing of modified state after download
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
