# Clip Regions Modules

This directory contains specialized modules for creating different types of clip regions.

## Implementation Status - ✅ ALL COMPLETE

### Visual Regions
- ✅ `makeBackgroundRegion.ts` - Colored clip background (50 lines)
- ✅ `makeTakeLaneOverlayRegion.ts` - Darkened overlay for unarranged take content (50 lines)
- ✅ `makeDebugRegions.ts` - Debug markers and timing information (95 lines)
- ✅ `makeSnapVisualizationRegions.ts` - Alignment feedback during drag (130 lines)

### Interactive Regions
- ✅ `makeTitleRegions.ts` - Title hover, interaction, and display (268 lines)
- ✅ `makeTrimRegions.ts` - Edge drag regions for resizing/trimming (1003 lines)
- ✅ `makeFadeRegions.ts` - Fade in/out handles (345 lines)

## Module Descriptions

### makeBackgroundRegion.ts
Creates the colored rectangle that serves as the clip's background. Handles:
- Color and opacity based on clip state
- Borders for uploading/preview clips
- Layer selection (lifted, normal, preview)

### makeTakeLaneOverlayRegion.ts
Renders darkened overlays on take lane clips for regions where content isn't arranged.

### makeDebugRegions.ts
When debug mode is enabled, shows warp markers and timing information for development.

### makeSnapVisualizationRegions.ts
Shows visual feedback when dragging clips:
- White lines on other tracks when clips align
- Grid snap indicators
- Ruler alignment markers

### makeTitleRegions.ts
Handles all title bar functionality:
- **Hover target**: Passthrough region for coordinated hover
- **Interaction**: Drag to move, double-click to focus
- **Display**: Text rendering with hover effects, edge indicators

### makeTrimRegions.ts
Implements all 4 edge drag variants:
- **Left/right edge (title bar)**: Resize entire clip
- **Left/right waveform edge** (magnet mode): Trim audio content
- Supports both magnet mode (shift neighbors) and classic mode (stretch neighbors)

### makeFadeRegions.ts
Creates fade in/out handles and visualizations:
- Interactive bezier curve overlays
- Draggable handles at clip bottom corners
- Real-time audio preview during drag

## Pattern

Each module follows a consistent pattern:
1. Extract geometry and state from `ClipContext`
2. Calculate positions and dimensions
3. Create regions with `touchTarget` for interaction
4. Attach `render`/`renderTop` for visuals
5. Push to appropriate layer array