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>
- 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>
Created example-1 directory with minimalist timeline template that uses vertical anchor lines to connect items to a central horizontal timeline bar. This demonstrates an alternative visualization style without the swimlane-based layout.
Features:
- Clean template-v2.svg with vertical dashed anchor lines
- Central horizontal timeline bar at y=190
- Items positioned above/below timeline with circle markers
- Minimal styling with clean typography
- 12-month timeline configuration
- Sample data with milestones, development, and research items
- Uses standard ITEM_ID and ITEM_TITLE placeholders
Files:
- template-v2.svg: Clean SVG template with anchor line design
- project.json: Configuration for 12-month timeline
- sample.csv: Sample timeline data with 14 items
- style.css: Minimal CSS styling
- output.svg: Generated timeline (for reference)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added optional placeholderMapping to project.json for templates that
don't follow the standard ITEM_{PROPERTY} convention.
Features:
- Override default placeholder names per field
- Useful for legacy templates or migration from other tools
- Fallback to ITEM_{PROPERTY} convention when not specified
Example usage:
{
"fieldMapping": {
"id": "ID",
"title": "Title"
},
"placeholderMapping": {
"id": "TASK_ID", // Use {{TASK_ID}} instead of {{ITEM_ID}}
"title": "TASK_NAME" // Use {{TASK_NAME}} instead of {{ITEM_TITLE}}
}
}
Changes:
- generator.js: Check for cfg.placeholderMapping before using default
- Added 2 new tests for custom mapping behavior
- Updated TEMPLATE_V2_GUIDE.md with documentation and examples
All 58 tests passing.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed from fixed TASK placeholders to flexible ITEM placeholders that
automatically map all CSV fields to template placeholders.
Key changes:
- Renamed task-template → item-template in all templates
- Changed TASK_* → ITEM_* placeholder naming
- Implemented dynamic placeholder generation from item properties
- Any field in fieldMapping now creates ITEM_{FIELD} placeholder
- Updated all tests and documentation
Naming convention: CSV field → item.property → ITEM_PROPERTY
Example: "assignee" → item.assignee → {{ITEM_ASSIGNEE}}
This enables users to add custom fields without modifying generator code:
- Add "assignee": "Assignee" to fieldMapping
- Use {{ITEM_ASSIGNEE}} in template
- No code changes required
Benefits:
- More flexible and extensible
- Clearer abstraction (items vs tasks)
- Consistent naming convention
- Better documented
All 56 tests passing.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <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 node_modules/ and package-lock.json to .gitignore to prevent
tracking of npm dependencies and lock file.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements the refactoring plan to move SVG structure from hardcoded JavaScript
to editable template files:
- Add template-v2.svg files with template elements in defs
- Create template elements for months, lanes, and tasks with placeholders
- Refactor generator.js to extract and clone template elements
- Add hasTemplateElements, extractTemplate, and replacePlaceholders methods
- Add generateFromTemplates method for template-based rendering
- Keep generateHardcoded method for backward compatibility
- Add comprehensive tests for new template system
- Support both v1 (hardcoded) and v2 (template-based) approaches
Benefits:
- Templates can now be edited in SVG tools (Inkscape, Adobe Illustrator)
- Visual template design with actual layout visible while editing
- Separation of presentation (SVG) and logic (JavaScript)
- Easier customization without touching code
🤖 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>
- 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>
