feat(timeline-editor): Add editable names and effect resize handles

Feature #1: Editable Sequence Names
- Added "Name" field to sequence property panel
- User can set custom sequence names (replaces generic "Sequence N")
- Name stored in seq.name property
- Persists in demo.seq file when saved
- Displays in large centered overlay on timeline
- Empty name falls back to "Sequence N" display

Property Panel:
  [Name          ] ← NEW: editable text field
  [Start Time    ]
  [Priority      ]
  [Apply]

Usage: Select sequence → Edit name in property panel → Apply

Feature #2: Effect Resize Handles
- Added draggable handles at left/right edges of selected effects
- Left handle: Adjusts start time (end time fixed)
- Right handle: Adjusts end time (start time fixed)
- Handles only visible on selected effects
- Smooth dragging with snap-to-beat support

Visual Design:
- 6px wide teal handles (rgba(78, 201, 176, 0.8))
- Cursor: ew-resize (horizontal resize)
- Hover: Expands to 8px, full opacity
- z-index: 10 (above effect content)
- Border radius matches effect corners

Handle Dragging Algorithm:
1. Click handle → startHandleDrag(type: 'left'|'right')
2. mousemove → onHandleDrag:
   - Calculate newTime from mouse position
   - Apply snap-to-beat if enabled
   - Convert to sequence-relative time
   - If left handle: effect.startTime = min(newTime, endTime - 0.1)
   - If right handle: effect.endTime = max(startTime + 0.1, newTime)
3. mouseup → stopHandleDrag
4. renderTimeline() → recalculates sequence bounds

Technical Details:
- Global state: isDraggingHandle, handleType
- Separate drag handlers from effect move
- Minimum effect duration: 0.1 seconds
- Prevents handle overlap (start < end enforced)
- Works with beat snapping when enabled
- Property panel updates in real-time

CSS:
.effect-handle {
  position: absolute;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  display: none (only on .effect.selected)
}

Event Flow:
  Click handle → stopPropagation (don't trigger effect drag)
      ↓
  startHandleDrag → set isDraggingHandle, handleType
      ↓
  mousemove → onHandleDrag → adjust start/end time
      ↓
  mouseup → stopHandleDrag → cleanup
      ↓
  renderTimeline → sequence bounds recalculate
      ↓
  updateProperties → panel shows new times

User Experience:
- Select effect → handles appear at edges
- Drag left handle → shorten/lengthen from start
- Drag right handle → shorten/lengthen from end
- Visual feedback: effect resizes in real-time
- Sequence box adjusts to fit resized effect
- Property panel shows updated times immediately

0 files changed, 0 insertions, 0 deletions