feat(timeline-editor): Add re-order button and 10% viewport slack

Feature #1: Re-order Sequences by Time
- Added "🔄 Re-order by Time" button to controls
- Sorts sequences by startTime (ascending order)
- Preserves focus on currently active sequence
- Algorithm:
  1. Store reference to current active sequence (lastActiveSeqIndex)
  2. Sort sequences array: sequences.sort((a, b) => a.startTime - b.startTime)
  3. Re-render timeline (recalculates _yPosition for all)
  4. Find new index of previously active sequence
  5. Scroll to its new Y position
  6. Update lastActiveSeqIndex to new index
- Button enabled when file is loaded
- Shows success message after re-ordering
- Useful when sequences are added/moved out of order

Use Case:
  Before: Seq2(10s), Seq0(0s), Seq1(5s)  ← Out of order
  After:  Seq0(0s), Seq1(5s), Seq2(10s)  ← Chronological order

Feature #2: 10% Viewport Slack for Visual Comfort
- Added headroom when calculating current time during scroll
- Previously: currentTime = scrollLeft / pixelsPerSecond
- Now: currentTime = (scrollLeft / pixelsPerSecond) + slack
- Slack = 10% of viewport width in time units

Benefits:
- Sequences don't get targeted when right at left edge
- More comfortable visual positioning
- Sequences become active when ~10% into viewport
- Prevents "edge hugging" during diagonal scroll

Example:
  Viewport width: 1000px, pixelsPerSecond: 100
  Slack = (1000 / 100) * 0.1 = 1.0 second

  scrollLeft = 500px → currentTime = 5.0s + 1.0s = 6.0s
  Sequence at 6.0s becomes active (not 5.0s)

Technical Details:
- viewportWidth = timelineContainer.clientWidth
- slack = (viewportWidth / pixelsPerSecond) * 0.1
- Applied before finding target sequence
- Works with any zoom level (pixelsPerSecond changes)
- Dynamic calculation on every wheel event

0 files changed, 0 insertions, 0 deletions