Implements a new templating approach that allows complete visual control
in Inkscape while maintaining 100% valid SVG.
New Features:
- DOM-based generator using DOMParser and cloneNode()
- Prototype elements (month-proto, lane-proto, item-proto) instead of string templates
- Full WYSIWYG editing in Inkscape - see exactly how timeline will look
- Auto-detection of template type (prototype vs template-v2)
- Text element mapping via IDs (e.g., id="item-title")
- SVG transforms for positioning instead of placeholder replacement
Implementation:
- generator-dom.js: New DOM-based generator with cloning logic
- engine.js: Auto-detect template type and use appropriate generator
- example-proto/: Complete working example with prototype template
- PROTOTYPE_TEMPLATES.md: Comprehensive guide for creating prototype templates
Benefits:
- No string placeholders ({{PLACEHOLDER}}) needed
- Native SVG editing workflow
- Better performance (DOM manipulation vs regex)
- Easier maintenance and styling
- Backward compatible (old template-v2 still works)
Template Structure:
- Prototypes with specific IDs visible in SVG (hidden after cloning)
- Container groups for generated content
- CSS classes for styling
- Text elements with IDs matching field names
All 56 tests still passing.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Changes:
- Add fileEditor.init() call in DOMContentLoaded to activate edit buttons
- Remove individual file upload inputs (projectInput, svgInput, cssInput, csvInput)
that had CORS issues when loading project configurations
- Keep only the folder picker which works reliably
- Update UI to emphasize folder picker as the primary loading method
- Remove corresponding event handlers from engine.js
- Remove tests for individual file upload functionality
The folder picker loads all project files in one operation without CORS
issues, while individual file uploads failed when trying to load
referenced files (CSV, SVG, CSS) from the project.json.
All 56 tests passing.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The test was checking for template element IDs (month-template,
lane-template, item-template) in the generated SVG output, but these
are explicitly removed during generation (generator.js:202-205).
Updated test to verify:
- Valid SVG structure (svg tag, viewBox)
- Generated content from templates (task titles, lanes from CSV)
- Presence of defs section (for gradients, etc.)
All 58 tests now passing.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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>
