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>
- Add "Load Project Folder" button with folder selection (webkitdirectory)
- Automatically load all project files (JSON, CSV, SVG, CSS) from selected folder
- Eliminate need to manually upload each file individually
- Show clear errors if referenced files are missing from folder
- Update all documentation to explain folder picker usage
This solves the browser security limitation where uploading a single
project.json doesn't allow automatic access to other files in the same
directory. Users can now select an entire project folder and all files
load automatically in one click.
Changes:
- index.html: Add folder input with webkitdirectory attribute and UI
- engine.js: Add folderInput event handler to process all files from folder
- README.md: Document folder picker as primary loading method
- WINDOWS_USAGE.md: Add folder picker as recommended Option 1
- TROUBLESHOOTING.md: Add section explaining project files not auto-loading
- CLAUDE.md: Document folder picker architecture for future instances
- Makefile: Update DIST_README.md template to mention folder picker
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added comprehensive debug panel that displays:
- Field mappings (CSV columns → item properties)
- Template placeholders (required template fields)
- CSV data preview (headers, sample data, validation warnings)
The panel appears below the timeline viewer and helps troubleshoot:
- Missing or mismatched CSV columns
- Template structure issues
- Data format problems
Shows warnings when no valid items are found with actionable
troubleshooting steps.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add mockPapaParse helper to centralize CSV mocking
- Fix test assertions to match actual output (German month names)
- Add missing DOM elements to test setup (projectFile, csvFile, etc.)
- Update vitest to v4.0.14 for improved testing capabilities
- Make setupEventHandlers globally accessible for testing
- Use textContent instead of innerText for better consistency
- Fix autoLoadDefaultProject test to check all three fallback paths
- Add proper event handler setup in integration tests
- Improve error handling test assertions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add interactive zoom functionality (25%-300% with Ctrl+scroll wheel)
- Fix SVG width constraints by injecting calculated dimensions into templates
- Implement template preview with theme-aware sample data
- Enhance UI layout with file reordering (Project → Template → CSS → Data)
- Add blue theme support for my-project alongside existing green theme
- Fix my-project field mapping from empty 'Übergeordnet' to 'Status'
- Improve SVG viewport handling with proper scrolling and container management
- Add visual zoom controls with percentage display and smart visibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Integrate file upload controls with status display for cleaner UX
- Add dark grey internal styling vs. dark green external theme
- Create enhanced SVG template with prominent month indicators
- Improve file loading error detection and user guidance
- Add visual confirmation system for external resource loading
- Update generator to support enhanced template styling
- Fix CSV/template loading context binding issues
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
