[FEAT] Timeline Track Types with Keyframe Connections

[jelling]

Context

• Currently, react-timeline-editor only supports "action" tracks where each action is a discrete, independent block with start/end times
• But now, we need to add keyframe-style tracks with connecting lines because professional animation workflows require smooth interpolation between keyframes (like camera movements) while still supporting discrete clips (like audio/video segments)
• Theatre.js demonstrates that keyframe connections provide: visual interpolation representation, direct access to easing controls, multi-keyframe selection/editing, professional animation workflow, and clear animation continuity

Product Reqs

User can:

• Create tracks with two different types: "Clip" (current behavior) and "Keyframe" (new behavior)
• See visual distinction between track types in the timeline interface
• Add keyframes to keyframe tracks by clicking on empty timeline areas
• See connecting lines between consecutive keyframes on keyframe tracks
• Click on connecting lines to access interpolation settings (future curve editing)
• Drag keyframes along the timeline to adjust timing
• Select multiple keyframes for bulk operations (move, delete, copy)
• Toggle connection state between keyframes (connected vs disconnected)
• Delete keyframes using context menu or keyboard shortcuts
• Copy and paste keyframes within and between keyframe tracks
• Drag connector lines to move both connected keyframes together
• See hover states and selection feedback on keyframes and connectors
• Convert existing clip tracks to keyframe tracks (with data migration)
• Use different interpolation types: Linear (default), Hold (stepped), Bezier (future)

Tech Reqs

• Extend TimelineRow interface to include trackType: 'clip' | 'keyframe' property
• Create KeyframeAction interface with time: number (point in time) vs ClipAction with start/end: number (duration)
• Add connectedToNext: boolean property to keyframe actions for controlling line rendering
• Implement KeyframeTrackRenderer component that renders dots instead of blocks
• Create custom KeyframeConnector component using styled divs (no external dependencies)
• Add connector positioning logic using transform: scaleX() for dynamic width based on time distance
• Implement keyframe drag handlers for timeline position changes
• Add connector line click handling for future interpolation controls
• Extend timeline engine to support keyframe interpolation alongside existing clip logic
• Create keyframe creation logic (click-to-add on empty timeline areas)
• Implement multi-keyframe selection system with shift+click and drag selection
• Add context menus for keyframe operations (delete, copy, paste, toggle connection)
• Create track type selector UI for new track creation
• Implement data migration utilities for converting between track types
• Add visual styling for connector hover states, selection feedback, and interpolation type indicators

Out of Scope (for now)

• Bezier curve editing interface and visual curve handles
• Custom curve presets and easing library integration
• Advanced interpolation algorithms beyond linear
• Graph editor with visual curve display
• Keyframe value editing interfaces (inline property editors)
• Automatic keyframe generation from property changes
• Advanced animation features like keyframe scaling and time stretching
• Integration with Theatre.js's transaction system or undo/redo architecture

Auto-approve:✓Read,Read (all),Edit,Edit (all),Safe Commands,Browser,MCP,Notifications