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>
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>
- Add 'make dist' target to build distribution package in dist/
- Add 'make dist-zip' target to create distributable archive (ZIP or tar.gz)
- Create start-server.bat for Windows users (auto-opens browser, starts Python server)
- Create start-server.sh for Linux/Mac users with same functionality
- Generate DIST_README.md with quick start instructions for all platforms
- Add WINDOWS_USAGE.md with comprehensive guide for WSL → Windows deployment
- Update .gitignore to exclude dist/ and distribution archives
- Update CLAUDE.md with distribution build documentation
Distribution package includes:
- Core application files (index.html, engine.js, generator.js)
- All example projects (example/, example-1/, my-project/)
- Documentation (README.md, TEMPLATE_V2_GUIDE.md, TROUBLESHOOTING.md)
- Cross-platform server startup scripts
The distribution is self-contained and works on Windows filesystems without
modification. Paths use forward slashes which browsers handle correctly on all
platforms. Users can simply extract and double-click start-server.bat (Windows)
or run ./start-server.sh (Linux/Mac) to launch the application.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add CLAUDE.md with architecture overview and development guidance for Claude Code
- Add TROUBLESHOOTING.md with solutions for common development issues
- Fix npm install failures in WSL with Node.js v24 by using --openssl-legacy-provider
- Document Node.js v24 + OpenSSL 3.x WSL incompatibility and workarounds
The CLAUDE.md file provides future Claude Code instances with essential information about:
- Commands for testing and development
- Core architecture (engine.js, generator.js, template-v2 system)
- Key concepts (field mapping, placeholder mapping, layout constants)
- Common development tasks and patterns
The TROUBLESHOOTING.md file provides detailed solutions for:
- npm install SSL cipher errors in WSL environments
- CORS errors when loading timeline
- Template validation issues
- CSV data loading problems
- Test failures
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Vitest + jsdom testing framework
- Create unit tests for engine.js and generator.js
- Add integration tests for end-to-end workflows
- Include test utilities and setup helpers
- Document testing approach in TESTING.md
- Document all dependencies in DEPENDS.md
- Add Makefile with test targets and dev workflow
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
