1 files changed, 148 insertions, 5 deletions

diff --git a/tools/timeline_editor/ROADMAP.md b/tools/timeline_editor/ROADMAP.md
index b1fb69f..4a9d171 100644
--- a/tools/timeline_editor/ROADMAP.md
+++ b/tools/timeline_editor/ROADMAP.md
@@ -115,6 +115,148 @@ function createEffect() {
 
 ---
 
+### 1.2b Priority Editing UI ⭐ Priority: HIGH
+**Goal:** Enable visual editing of sequence and effect priorities.
+
+**Features:**
+- **Sequence Priority**: Edit absolute priority (0-9 for scene, 10+ for post-processing)
+- **Effect Priority Modifier**: Toggle between `+`, `=`, `-` modifiers
+- **Visual Priority Indicators**: Color-code or label items by priority level
+- **Z-order visualization**: Show stacking order visually
+
+**UI Design:**
+
+**For Sequences:**
+```
+Properties Panel:
+┌─────────────────────────────┐
+│ Sequence Priority           │
+│ ┌─────────────────────────┐ │
+│ │ Priority: [0] ▲▼        │ │
+│ └─────────────────────────┘ │
+│ (0-9: Scene, 10+: Post-FX)  │
+└─────────────────────────────┘
+
+Visual indicator on timeline:
+[0] Sequence 1  (dark blue)
+[1] Sequence 2  (medium blue)
+[5] Sequence 3  (light blue)
+```
+
+**For Effects:**
+```
+Properties Panel:
+┌─────────────────────────────┐
+│ Effect Priority Modifier    │
+│ ┌─────────────────────────┐ │
+│ │ ○ + Increment (normal)  │ │
+│ │ ○ = Same as previous    │ │
+│ │ ● - Decrement (bg)      │ │
+│ └─────────────────────────┘ │
+│ Computed priority: -1       │
+└─────────────────────────────┘
+
+Visual indicator on timeline:
+[-1] FlashCubeEffect (darker gray, background)
+[0]  FlashEffect    (normal gray)
+[1]  FadeEffect     (lighter gray)
+```
+
+**Implementation:**
+```javascript
+// Sequence priority editor
+function renderSequencePriorityEditor(seq) {
+    return `
+        <div class="property-group">
+            <label>Sequence Priority</label>
+            <div class="priority-control">
+                <input type="number" id="seqPriority" value="${seq.priority}"
+                       min="0" max="20" step="1">
+                <button onclick="adjustPriority(-1)">▼</button>
+                <button onclick="adjustPriority(+1)">▲</button>
+            </div>
+            <small>0-9: Scene effects | 10+: Post-processing</small>
+        </div>
+    `;
+}
+
+// Effect priority modifier editor
+function renderEffectPriorityEditor(effect) {
+    return `
+        <div class="property-group">
+            <label>Priority Modifier</label>
+            <div class="priority-modifier-group">
+                <label>
+                    <input type="radio" name="priorityMod" value="+"
+                           ${effect.priorityModifier === '+' ? 'checked' : ''}>
+                    + Increment (normal)
+                </label>
+                <label>
+                    <input type="radio" name="priorityMod" value="="
+                           ${effect.priorityModifier === '=' ? 'checked' : ''}>
+                    = Same as previous
+                </label>
+                <label>
+                    <input type="radio" name="priorityMod" value="-"
+                           ${effect.priorityModifier === '-' ? 'checked' : ''}>
+                    - Decrement (background)
+                </label>
+            </div>
+            <small>Computed priority: ${effect.priority}</small>
+        </div>
+    `;
+}
+
+// Recalculate effect priorities after modifier change
+function recalculatePriorities(sequence) {
+    let currentPriority = -1;
+    for (const effect of sequence.effects) {
+        if (effect.priorityModifier === '+') currentPriority++;
+        else if (effect.priorityModifier === '-') currentPriority--;
+        // '=' keeps current priority
+        effect.priority = currentPriority;
+    }
+}
+```
+
+**Visual Priority Indicators (CSS):**
+```css
+/* Sequence priority colors */
+.sequence[data-priority="0"] { border-color: #264f78; } /* Dark blue */
+.sequence[data-priority="1"] { border-color: #0e639c; } /* Medium blue */
+.sequence[data-priority="2"] { border-color: #1177bb; } /* Light blue */
+
+/* Effect priority badge */
+.effect::before {
+    content: "[" attr(data-priority) "]";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    font-size: 10px;
+    background: rgba(0,0,0,0.5);
+    padding: 2px 4px;
+    border-radius: 2px;
+}
+
+/* Background effects (negative priority) */
+.effect[data-priority^="-"] {
+    opacity: 0.7;
+    background: #2d2d30;
+}
+```
+
+**Validation:**
+- Warn if sequence priorities conflict (same time + same priority)
+- Show warning if effect priority order doesn't match visual stacking
+- Suggest reordering effects if priority sequence is non-contiguous
+
+**Effort:** 6-8 hours
+**Priority:** HIGH (essential for proper z-order control)
+**Dependencies:** None
+**Impact:** Enables precise control over render order
+
+---
+
 ### 1.3 Overlap Detection & Warnings ⭐ Priority: MEDIUM
 **Goal:** Visualize and warn about timeline conflicts.
 
@@ -373,11 +515,12 @@ function detectOverlaps() {
 **Immediate (Next 1-2 weeks):**
 1. ✅ Snap-to-Beat (4-6h) - Makes editing much easier
 2. ✅ Create New Effects (6-8h) - Essential for productivity
+3. ✅ Priority Editing UI (6-8h) - Essential for z-order control
 
 **Short-term (Next 1-2 months):**
-3. ✅ Overlap Detection (8-10h) - Prevents bugs
-4. ✅ Undo/Redo (10-12h) - Safety net for experimentation
-5. ✅ Copy/Paste (6-8h) - Common workflow
+4. ✅ Overlap Detection (8-10h) - Prevents bugs
+5. ✅ Undo/Redo (10-12h) - Safety net for experimentation
+6. ✅ Copy/Paste (6-8h) - Common workflow
 
 **Medium-term (Next 3-6 months):**
 6. Multi-Select (12-15h)
@@ -395,11 +538,11 @@ function detectOverlaps() {
 
 ## Total Effort Estimates
 
-**Phase 1 (Core):** 22-28 hours
+**Phase 1 (Core):** 28-36 hours (was 22-28, added priority editing)
 **Phase 2 (Productivity):** 38-51 hours
 **Phase 3 (Advanced):** 51-74 hours
 
-**Total:** ~110-150 hours for full feature set
+**Total:** ~117-161 hours for full feature set
 
 ---