@bycrux/editor 1.1.0 → 1.2.1

package/src/video/preview/useVideoPlayback.ts

@@ -14,7 +14,7 @@ import {
   type MontajWindow,
 } from './audio-context'
 import type { EditorProject as Project, VisualItem, VisualTrack } from '../../schema'
-import { effectiveItemAudio, enabledTrackItems, enabledTracks, withEnabledItemTracks } from '../timeline/timeline-model'
+import { audioEnd, effectiveItemAudio, enabledTrackItems, enabledTracks, withEnabledItemTracks } from '../timeline/timeline-model'
 
 // Typed extension for video elements that cache their GainNode
 interface MontajVideoElement extends HTMLVideoElement {
@@ -122,6 +122,7 @@ export function useVideoPlayback(
   currentTime: number,
   onTimeUpdate: (t: number) => void,
   fileUrl: (path: string) => string,
+  muted = false,
 ) {
   // Double-buffer video elements for seamless clip transitions
   const video0Ref     = useRef<HTMLVideoElement>(null)
@@ -137,6 +138,20 @@ export function useVideoPlayback(
   const loopOffsetRef = useRef(0)
   const rafRef        = useRef<number | null>(null)
   const rafLastMs     = useRef<number | null>(null)
+  // Second-rider master mute (PreviewPlayer's `muted` prop). Read through a
+  // ref — not the `muted` param directly — so every gain-setting site below,
+  // including the useCallback closures whose own dependency arrays this
+  // deliberately leaves untouched (`tickGap`, `handleTimeUpdate`,
+  // `syncAudioTracks`), always sees the current value without forcing a
+  // reload/re-wire of anything. Covers BOTH GainNode families this hook owns:
+  // the video-slot slots (`videoGainRef`, via `applyClipVolume`) and every
+  // background audio-track lane (`gainNodesMap`) — `<video muted>`/
+  // `el.muted` alone would silence neither, since both are routed through
+  // `MediaElementSource → GainNode → ctx.destination` (see `audio-context.ts`
+  // and `ensureVideoGain` below): once wired, the element's own mute/volume
+  // have no audible effect.
+  const mutedRef      = useRef(muted)
+  useEffect(() => { mutedRef.current = muted }, [muted])
   // rAF clock for VIDEO projects — drives clip-boundary detection at ~60Hz
   // instead of the <video> element's coarse `timeupdate` event (~4Hz). See the
   // effect below for why.
@@ -309,31 +324,60 @@ export function useVideoPlayback(
   function applyClipVolume(clip: { muted?: boolean; volume?: number }) {
     const slot = activeSlotRef.current
     const gain = getVideoGain(slot)
-    if (gain) gain.gain.value = clipGain(videoTrack, clip)
+    if (gain) gain.gain.value = mutedRef.current ? 0 : clipGain(videoTrack, clip)
   }
 
   // Apply video clip volume via Web Audio GainNode (supports > 1.0 amplification).
   // `videoTrack` is a dep in its own right: pulling the TRACK's fader while the
-  // clips themselves are untouched has to reach the live gain node too.
+  // clips themselves are untouched has to reach the live gain node too. `muted`
+  // is a dep for the same reason: an external mute toggle on an already-loaded
+  // slot must reach the live node immediately, not wait for the next natural
+  // clip switch (which is the only other place `mutedRef` gets re-read).
   useEffect(() => {
     const idx = activeIdxRef.current
     const clip = clips[idx]
     if (!clip) return
     applyClipVolume(clip)
-  }, [clips, videoTrack, activeSlot])
+  }, [clips, videoTrack, activeSlot, muted])
 
-  // maxEnd for the canvas rAF clock — the furthest overlay/caption end. Kept in
+  // maxEnd for the canvas rAF clock — the furthest visual/caption end. Kept in
   // a ref, updated by its own cheap effect, so the rAF effect below doesn't tear
   // down and rebuild on every project spread (only isPlaying/onTimeUpdate matter
   // to it). onTimeUpdate is the stable clock.set identity.
+  //
+  // Spans EVERY enabled track, track 0 INCLUDED — not `overlayTracks`
+  // (`slice(1)`). This clock only ever runs for canvas projects, where track 0
+  // holds content rather than the primary footage: the background images, and
+  // on an agent-authored project frequently the overlays themselves (an
+  // animations-workflow project is often ONE track of nothing but overlays).
+  // Reading `overlayTracks` here collapsed the ceiling to 0 for exactly those,
+  // so the very first tick clamped to 0 and immediately called
+  // `setIsPlaying(false)` — space appeared to do nothing at all.
+  // `OverlayItemsLayer` already draws track 0 in canvas mode; this keeps the
+  // clock's ceiling and what's on screen in agreement. Mirrored in the engine
+  // path's `transportEndFor` (engine/scheduler.ts) — change both together.
+  //
+  // Audio stays OUT of the ceiling whenever anything VISUAL sets one: the
+  // canvas/video divergence over the audio tail is documented in timeline-core's
+  // `durations.js` and is deliberate.
+  //
+  // It cannot stay out when nothing visual sets one at all, though. An
+  // audio-only timeline — an animations-workflow project whose music is wired
+  // before any overlay exists — left this at 0, so the first tick clamped to 0
+  // and immediately called `setIsPlaying(false)`: play/space did nothing
+  // whatsoever, with no feedback saying why. The audio end is the last-resort
+  // ceiling for exactly that case and changes nothing for any project that has
+  // visual content. Mirrored in `transportEndFor` (engine/scheduler.ts) — change
+  // both together.
   const canvasMaxEndRef = useRef(0)
   useEffect(() => {
     const captionEnd = (project.captions?.segments ?? []).reduce((m: number, s) => Math.max(m, s.end), 0)
-    canvasMaxEndRef.current = Math.max(
-      overlayTracks.flat().reduce((m, i) => Math.max(m, i.end), 0),
+    const visualCeiling = Math.max(
+      enabledTrackItems(project).flat().reduce((m, i) => Math.max(m, i.end ?? 0), 0),
       captionEnd,
     )
-  }, [overlayTracks, project.captions])
+    canvasMaxEndRef.current = visualCeiling > 0 ? visualCeiling : audioEnd(project)
+  }, [project])
 
   useEffect(() => {
     if (!isCanvasProject) return
@@ -416,7 +460,7 @@ export function useVideoPlayback(
         const ctx = getSharedAudioContext()
         const source = ctx.createMediaElementSource(el)
         const gain = ctx.createGain()
-        gain.gain.value = track.volume ?? 1
+        gain.gain.value = mutedRef.current ? 0 : (track.volume ?? 1)
         source.connect(gain)
         gain.connect(ctx.destination)
         gains.set(track.id, gain)
@@ -427,18 +471,21 @@ export function useVideoPlayback(
       }
       // Volume is controlled via GainNode, not el.volume
       const gain = gains.get(track.id)
-      if (gain) gain.gain.value = track.volume ?? 1
+      if (gain) gain.gain.value = mutedRef.current ? 0 : (track.volume ?? 1)
     }
   // Keyed on identity string — only fires when tracks are added/removed/src changes
   }, [audioTrackIdentity])
 
-  // Update volume in-place on every render via GainNode — cheap, no element churn
+  // Update volume in-place on every render via GainNode — cheap, no element churn.
+  // `muted` is a dep (not just read via `mutedRef`) so an external mute toggle
+  // reaches every lane immediately rather than waiting for the next track-set
+  // change or `syncAudioTracks` tick.
   useEffect(() => {
     for (const track of unmutedAudioTracks) {
       const gain = gainNodesMap.current.get(track.id)
-      if (gain) gain.gain.value = track.volume ?? 1
+      if (gain) gain.gain.value = mutedRef.current ? 0 : (track.volume ?? 1)
     }
-  }, [unmutedAudioTracks])
+  }, [unmutedAudioTracks, muted])
 
   // Cleanup on unmount only. The shared AudioContext (window.__montajSharedCtx)
   // is intentionally NOT closed — it's window-scoped and reused across remounts
@@ -489,7 +536,7 @@ export function useVideoPlayback(
 
       // `audioWindow.gain` is already `baseVolume * max(0, fadeMul)`.
       const gain = gainNodesMap.current.get(track.id)
-      if (gain) gain.gain.value = win.gain
+      if (gain) gain.gain.value = mutedRef.current ? 0 : win.gain
     }
   }, [])
 
@@ -625,7 +672,7 @@ export function useVideoPlayback(
       const src = fileUrlRef.current(playbackSrcFor(nc))
       if (preloadSrcRef.current !== src) { nv.src = src; nv.currentTime = effectiveInPoint(nc) }
       const gain = ensureVideoGain(ns)
-      if (gain) gain.gain.value = clipGain(videoTrack, nc)
+      if (gain) gain.gain.value = mutedRef.current ? 0 : clipGain(videoTrack, nc)
       playSoon(nv)
     }
     void (activeSlotRef.current === 0 ? video0Ref.current : video1Ref.current)?.pause()
@@ -743,7 +790,7 @@ export function useVideoPlayback(
         inactiveVideo.currentTime = effectiveInPoint(clips[nextIdx])
         const inactiveSlot = (1 - slot) as 0 | 1
         const nextGain = ensureVideoGain(inactiveSlot)
-        if (nextGain) nextGain.gain.value = clipGain(videoTrack, clips[nextIdx])
+        if (nextGain) nextGain.gain.value = mutedRef.current ? 0 : clipGain(videoTrack, clips[nextIdx])
       }
     }
 
@@ -798,7 +845,7 @@ export function useVideoPlayback(
               nextVideo.currentTime = effectiveInPoint(next)
             }
             const nextGain = ensureVideoGain(nextSlot)
-            if (nextGain) nextGain.gain.value = clipGain(videoTrack, next)
+            if (nextGain) nextGain.gain.value = mutedRef.current ? 0 : clipGain(videoTrack, next)
             playSoon(nextVideo)
           }
 

package/src/video/timeline/Timeline.tsx

@@ -18,6 +18,7 @@ import { VISUAL_EDGE_TOLERANCE_PX } from './canvas/hit-test'
 import { keyframeUnionTimes } from './canvas/keyframe-strip'
 import { mapTrackItems, normalizeTracks, updateAudioTrack } from './timeline-model'
 import { deleteSelection, toggleSelection } from './multiSelectOps'
+import { removeMarkers } from './markers'
 import { computeAutoCrossfade, computeDerivedTiming, computeVisualCrossfade, trackItems } from './timeline-model'
 import TimelineCanvas, { useCanvasZoomControls, type ZoomControls } from './canvas/TimelineCanvas'
 import type { KeyframeSelection } from './canvas/pointer-machine'
@@ -836,6 +837,11 @@ export default function Timeline({ project, clock, onProjectChange, onOverlayEdi
             updated = { ...updated, captions: normalizeCaptionLanes({ ...captionTrack, segments: kept }) }
           }
         }
+        // Markers live at project.markers, outside tracks/audio, so `deleteSelection`
+        // cannot see them — same reason captions need their own strip above. Folded
+        // into the SAME commit so a mixed clip + caption + marker delete is one
+        // undo entry.
+        updated = removeMarkers(updated, new Set(selectedIds))
         if (rippleMode) updated = collapseGaps(updated)
         // Deleting a clip out of a magnetic audio lane leaves a gap exactly
         // like a trim or a move would — close it the same way, on release.

package/src/video/timeline/__tests__/Timeline.keymap.test.tsx

@@ -360,6 +360,22 @@ describe('Timeline — T9 keymap (arrows / delete / enter / escape)', () => {
     expect(onProjectChange).not.toHaveBeenCalled()
   })
 
+  it('Delete removes a selected marker, in the same commit as everything else', () => {
+    // Markers live outside tracks/audio, so deleteSelection cannot see them —
+    // the same reason captions needed their own strip in this action.
+    const clock = createPlaybackClock(0)
+    const onProjectChange = vi.fn()
+    const project = { ...makeProject(), markers: [{ id: 'm1', t: 5, label: '1' }] }
+    const { container } = render(
+      <Timeline project={project} clock={clock} selectedIds={['m1']} onProjectChange={onProjectChange} />,
+    )
+    focusTimelineRoot(container)
+    fireEvent.keyDown(document.body, { key: 'Delete' })
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+    const updated = onProjectChange.mock.calls[0][0] as Project
+    expect(updated.markers).toBeUndefined()   // last one gone → key dropped
+  })
+
   it('exposes zoomFit through actionsRef for a host-level palette', () => {
     const clock = createPlaybackClock(1)
     const actionsRef: { current: TimelineActions | null } = { current: null }

package/src/video/timeline/__tests__/markers.test.ts

@@ -0,0 +1,125 @@
+import { describe, it, expect } from 'vitest'
+import { addMarker, moveMarker, removeMarkers, renameMarker, nextMarkerLabel } from '../markers'
+import type { EditorProject, Marker } from '../../../schema'
+
+function proj(markers?: Marker[]): EditorProject {
+  return {
+    id: 'p1', status: 'draft', settings: { resolution: [1920, 1080], fps: 30 },
+    tracks: [{ id: 'trk-0', items: [] }],
+    ...(markers ? { markers } : {}),
+  } as EditorProject
+}
+const mk = (id: string, t: number, label: string): Marker => ({ id, t, label })
+
+describe('nextMarkerLabel', () => {
+  it('starts at 1 on a project with no markers', () => {
+    expect(nextMarkerLabel([])).toBe('1')
+  })
+
+  it('continues past the highest NUMERIC label, ignoring renamed ones', () => {
+    // A renamed marker must not stall the counter, and must not be parsed as 0.
+    expect(nextMarkerLabel([mk('a', 1, '1'), mk('b', 2, 'cut this'), mk('c', 3, '7')])).toBe('8')
+  })
+
+  it('does not reuse a number after a delete', () => {
+    // Counting markers instead of reading the max would hand out '2' twice here.
+    expect(nextMarkerLabel([mk('a', 1, '1'), mk('c', 3, '3')])).toBe('4')
+  })
+})
+
+describe('addMarker', () => {
+  it('creates the markers array on a project that has none', () => {
+    const out = addMarker(proj(), 4.25)
+    expect(out.markers).toHaveLength(1)
+    expect(out.markers![0]).toMatchObject({ t: 4.25, label: '1' })
+    expect(typeof out.markers![0].id).toBe('string')
+    expect(out.markers![0].id.length).toBeGreaterThan(0)
+  })
+
+  it('keeps markers sorted by time whatever order they are added in', () => {
+    let p = addMarker(proj(), 10)
+    p = addMarker(p, 2)
+    p = addMarker(p, 6)
+    expect(p.markers!.map(m => m.t)).toEqual([2, 6, 10])
+    // Labels record creation order, not position.
+    expect(p.markers!.map(m => m.label)).toEqual(['2', '3', '1'])
+  })
+
+  it('returns the SAME reference when a marker already sits within half a frame', () => {
+    // Key repeat: holding M must not spray a pile of stacked markers.
+    const p = addMarker(proj(), 5)
+    const again = addMarker(p, 5 + (1 / 30) * 0.4, 30)
+    expect(again).toBe(p)
+  })
+
+  it('does allow a second marker just outside the half-frame window', () => {
+    const p = addMarker(proj(), 5)
+    const again = addMarker(p, 5 + (1 / 30) * 0.6, 30)
+    expect(again).not.toBe(p)
+    expect(again.markers).toHaveLength(2)
+  })
+
+  it('clamps a negative time to 0', () => {
+    expect(addMarker(proj(), -3).markers![0].t).toBe(0)
+  })
+
+  it('never mutates the project it was given', () => {
+    const p = proj([mk('a', 1, '1')])
+    const before = JSON.stringify(p)
+    addMarker(p, 9)
+    expect(JSON.stringify(p)).toBe(before)
+  })
+})
+
+describe('moveMarker', () => {
+  it('retimes and re-sorts', () => {
+    const p = proj([mk('a', 1, '1'), mk('b', 2, '2'), mk('c', 3, '3')])
+    const out = moveMarker(p, 'a', 2.5)
+    expect(out.markers!.map(m => m.id)).toEqual(['b', 'a', 'c'])
+    expect(out.markers!.find(m => m.id === 'a')!.t).toBe(2.5)
+  })
+
+  it('clamps to 0 and returns the same reference for an unknown id or an unchanged time', () => {
+    const p = proj([mk('a', 1, '1')])
+    expect(moveMarker(p, 'a', -5).markers![0].t).toBe(0)
+    expect(moveMarker(p, 'nope', 4)).toBe(p)
+    expect(moveMarker(p, 'a', 1)).toBe(p)
+  })
+})
+
+describe('renameMarker', () => {
+  it('replaces the label', () => {
+    const out = renameMarker(proj([mk('a', 1, '1')]), 'a', 'intro')
+    expect(out.markers![0].label).toBe('intro')
+  })
+
+  it('trims, and rejects an empty label by returning the same reference', () => {
+    const p = proj([mk('a', 1, '1')])
+    expect(renameMarker(p, 'a', '  hi  ').markers![0].label).toBe('hi')
+    expect(renameMarker(p, 'a', '   ')).toBe(p)
+    expect(renameMarker(p, 'a', '1')).toBe(p)   // unchanged label, no commit
+  })
+})
+
+describe('removeMarkers', () => {
+  it('drops every id in the set and leaves the rest', () => {
+    const p = proj([mk('a', 1, '1'), mk('b', 2, '2'), mk('c', 3, '3')])
+    expect(removeMarkers(p, new Set(['a', 'c'])).markers!.map(m => m.id)).toEqual(['b'])
+  })
+
+  it('drops the markers key entirely when the last one goes', () => {
+    // Keeps a marker-less project byte-identical to one that never had markers.
+    const out = removeMarkers(proj([mk('a', 1, '1')]), new Set(['a']))
+    expect(out).not.toHaveProperty('markers')
+  })
+
+  it('returns the same reference when nothing matched', () => {
+    const p = proj([mk('a', 1, '1')])
+    expect(removeMarkers(p, new Set(['zzz']))).toBe(p)
+  })
+
+  it('returns the same reference when the project has no markers at all', () => {
+    const p = proj()
+    expect(removeMarkers(p, new Set(['a']))).toBe(p)
+  })
+})

package/src/video/timeline/canvas/TimelineCanvas.tsx

@@ -36,13 +36,14 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import type { GetFilmstripArgs, GetWaveformPeaksArgs, FilmstripIndex, PeaksData, PendingDrop, Project, FootageDropPayload, ResolveFilePath, TimelineDropPlacement } from '../../../types'
 import { FOOTAGE_DND_MIME } from '../../../types'
-import type { KeyframeProp } from '../../../schema'
+import type { KeyframeProp, Marker } from '../../../schema'
 import type { PlaybackClock } from '../../playback-clock'
 import { BASE_VISUAL_ROW_RENDER_HEIGHT_PX, ROW_GAP_PX, VISUAL_ROW_RENDER_HEIGHT_PX } from '../timeline-model'
 import { placeDroppedClip, resolveDropPoint } from '../placement'
-import { computeTimelineLayout, drawTimelineContent, drawTimelineOverlay, type PendingDropBand, type TimelineLayout, type TimelineMode, type VisualRowLayout } from './draw'
+import { computeTimelineLayout, drawTimelineContent, drawTimelineOverlay, MARKER_FLAG_WIDTH_PX, MARKER_LABEL_GAP_PX, type PendingDropBand, type TimelineLayout, type TimelineMode, type VisualRowLayout } from './draw'
 import { hitTest, isEdgeHit, type Point, type SurfaceRect } from './hit-test'
 import { keyframeUnionTimes } from './keyframe-strip'
+import { renameMarker } from '../markers'
 import {
   createPointerMachine,
   type KeyframeSelection,
@@ -67,6 +68,7 @@ import {
   reclampForDuration,
   scaleContextToDpr,
   syncCanvasBackingStore,
+  timeToX,
   useViewportValue,
   wheelIntent,
   withSurfaceWidth,
@@ -183,6 +185,53 @@ export interface TimelineCanvasProps {
   pendingDrops?: readonly PendingDrop[]
 }
 
+/**
+ * The marker rename box, isolated into its own component for the same reason
+ * `CanvasZoomBadge` (bottom of this file) is: it owns the viewport
+ * subscription itself, so a zoom or scroll while the box is open moves it
+ * without making `TimelineCanvas`'s own render body subscribe to the
+ * viewport — which would re-render the whole surface on every wheel-zoom
+ * tick and pan frame, the exact thing this file's header doc says never
+ * happens. The subscription only exists for as long as this component is
+ * mounted, i.e. only while a rename is actually open.
+ */
+function MarkerRenameBox({
+  marker,
+  store,
+  top,
+  onCommit,
+  onCancel,
+}: {
+  marker: Marker
+  store: ViewportStore
+  top: number
+  onCommit: (value: string) => void
+  onCancel: () => void
+}) {
+  const viewport = useViewportValue(store)
+  return (
+    <input
+      aria-label="Rename marker"
+      autoFocus
+      defaultValue={marker.label}
+      className="absolute z-10 h-4 rounded-sm border border-sky-400 bg-slate-900 px-1 text-[11px] text-slate-50 outline-none"
+      style={{
+        left: Math.round(timeToX(marker.t, viewport)) + MARKER_FLAG_WIDTH_PX + MARKER_LABEL_GAP_PX,
+        top,
+        width: 120,
+      }}
+      onKeyDown={e => {
+        // Stop Escape/Enter reaching the document keymap: this box owns
+        // them while it is open.
+        e.stopPropagation()
+        if (e.key === 'Enter') onCommit((e.target as HTMLInputElement).value)
+        if (e.key === 'Escape') onCancel()
+      }}
+      onBlur={e => onCommit(e.target.value)}
+    />
+  )
+}
+
 /**
  * Which video row a drop at surface-y `y` landed on, as an index into the
  * NORMALIZED track order `placeDroppedClip` measures in — or `-1` for "no
@@ -418,6 +467,13 @@ export default function TimelineCanvas({
   const [paneFill, setPaneFill] = useState(0)
   const surfaceHeight = Math.max(layout.height, VISUAL_ROW_RENDER_HEIGHT_PX, paneFill)
 
+  // Which marker's rename box is open, or null for none. The box itself is a
+  // real DOM `<input>` (rendered below, as a third child of the wrapper div)
+  // rather than a canvas-drawn fake — `editCaption` has no equivalent here
+  // because it routes to the transcript sidebar instead, so this is the one
+  // inline text editor this canvas hosts directly.
+  const [editingMarkerId, setEditingMarkerId] = useState<string | null>(null)
+
   // Latest draw inputs, readable from the imperative paint without making the
   // paint a dependency of every effect (the ref-to-latest pattern
   // `useTimelineZoom` uses for its wheel handler).
@@ -785,6 +841,7 @@ export default function TimelineCanvas({
         case 'commit':        p.onOverlayEdit?.(effect.project); break
         case 'inspect':       (effect.target === 'visual' ? p.onInspectClip : p.onInspectAudio)?.(effect.id); break
         case 'editCaption':   p.onEditCaption?.(effect.id); break
+        case 'editMarker':    setEditingMarkerId(effect.id); break
         // Cursor is written straight to the node: an affordance that changes on
         // every hover must not cost a React render.
         case 'cursor':        if (containerRef.current) containerRef.current.style.cursor = effect.cursor; break
@@ -888,7 +945,7 @@ export default function TimelineCanvas({
     // precedence here, same as it does in the machine's own hit-test — a
     // trim handle must not light up underneath a diamond that would win the
     // actual press.
-    const hit = hitTest(point, p.layout, store.get(), { selectedIds: p.selectedIds })
+    const hit = hitTest(point, p.layout, store.get(), { selectedIds: p.selectedIds, markers: p.project.markers })
     if (!isEdgeHit(hit) || hit.itemId === undefined || hit.edge === undefined) return null
     return p.selectedIds.includes(hit.itemId) ? { itemId: hit.itemId, edge: hit.edge } : null
   }
@@ -959,12 +1016,14 @@ export default function TimelineCanvas({
   //
   // Standard NLE behaviour: drag an item/handle past the visible edge and the
   // view pans to follow, rather than trapping the gesture at whatever was on
-  // screen when the drag started. Only gestures where "the pointer is
-  // captured and following makes sense" qualify — every `dragging` state
-  // EXCEPT `scrub` (the ruler already owns the playhead directly; panning
-  // underneath it while it drags would fight the seek instead of extending
-  // it). Marquee selection is included: dragging the box out past the edge to
-  // catch items further along the timeline is the same affordance.
+  // screen when the drag started. Every `dragging` state qualifies, including
+  // `scrub` — dragging the playhead to the edge should extend the visible
+  // range the same way dragging a clip does, rather than capping the seek at
+  // whatever was on screen when the scrub started. `applyScrub` resolves an
+  // absolute time from the screen point each call, so re-feeding the same
+  // point after a pan naturally advances the seek. Marquee selection is
+  // included too: dragging the box out past the edge to catch items further
+  // along the timeline is the same affordance.
 
   function dispatchPointerMove(point: Point, modifiers: Modifiers) {
     runEffects(machine.dispatch({ type: 'pointerMove', point, modifiers, ctx: buildContext() }))
@@ -986,7 +1045,7 @@ export default function TimelineCanvas({
     edgeScrollFrameRef.current = null
 
     const state = machine.state
-    if (state.kind !== 'dragging' || state.gesture === 'scrub') { stopEdgeAutoScroll(); return }
+    if (state.kind !== 'dragging') { stopEdgeAutoScroll(); return }
     const drag = lastDragPointRef.current
     const rect = gestureRectRef.current
     if (!drag || !rect || rect.width <= 0) { stopEdgeAutoScroll(); return }
@@ -1031,7 +1090,7 @@ export default function TimelineCanvas({
    *  that leaves the zone is caught on the loop's own next tick). */
   function updateEdgeAutoScroll() {
     const state = machine.state
-    if (state.kind !== 'dragging' || state.gesture === 'scrub') { stopEdgeAutoScroll(); return }
+    if (state.kind !== 'dragging') { stopEdgeAutoScroll(); return }
     const drag = lastDragPointRef.current
     const rect = gestureRectRef.current
     if (!drag || !rect || rect.width <= 0 || !inEdgeZone(drag.point.x, rect.width)) return
@@ -1137,7 +1196,7 @@ export default function TimelineCanvas({
       if (!p.onFadeCurveMenu && !p.onKeyframeMenu) return
       const point = surfacePoint(e)
       if (!point) return
-      const hit = hitTest(point, p.layout, store.get(), { selectedIds: p.selectedIds })
+      const hit = hitTest(point, p.layout, store.get(), { selectedIds: p.selectedIds, markers: p.project.markers })
       if (p.onFadeCurveMenu && hit.kind === 'audio-fade' && hit.itemId !== undefined && hit.side) {
         e.preventDefault()
         p.onFadeCurveMenu({ trackId: hit.itemId, side: hit.side, x: e.clientX, y: e.clientY })
@@ -1368,6 +1427,36 @@ export default function TimelineCanvas({
     }
   }, [])
 
+  // ── Marker rename box ──
+  //
+  // Unlike the imperative paint (which reads `store.get()` fresh per frame),
+  // the box's `left` is a React-owned DOM style, so it needs a subscription to
+  // follow a zoom or scroll that happens while it's open. That subscription
+  // lives on `MarkerRenameBox` itself, below, rather than here — the same
+  // reason `CanvasZoomBadge` is its own component: TimelineCanvas must not
+  // subscribe to the viewport in its own render body, or every wheel-zoom
+  // tick and pan frame re-renders this whole surface, which is exactly what
+  // this file's header doc promises never happens.
+  const editingMarker = editingMarkerId
+    ? (project.markers ?? []).find(m => m.id === editingMarkerId) ?? null
+    : null
+
+  const commitRename = (value: string) => {
+    // The id is captured and null-checked here because this same function is
+    // also the input's blur handler, and it must be safe to call when there
+    // is nothing being edited. Escape does not route through here at all —
+    // its handler clears `editingMarkerId` directly (see `MarkerRenameBox`
+    // below) — so the null check is for blur-with-nothing-open, not for
+    // "Escape already cleared it before blur could commit."
+    const id = editingMarkerId
+    setEditingMarkerId(null)
+    if (!id) return
+    const next = renameMarker(project, id, value)
+    if (next === project) return          // blank or unchanged — no undo entry
+    onProjectChange?.(next)
+    onOverlayEdit?.(next)                  // one commit, one undo step
+  }
+
   return (
     <div
       ref={containerRef}
@@ -1399,6 +1488,15 @@ export default function TimelineCanvas({
     >
       <canvas ref={contentCanvasRef} className="absolute inset-0 w-full h-full" />
       <canvas ref={overlayCanvasRef} className="absolute inset-0 w-full h-full pointer-events-none" />
+      {editingMarker && (
+        <MarkerRenameBox
+          marker={editingMarker}
+          store={store}
+          top={layout.markers?.y ?? 0}
+          onCommit={commitRename}
+          onCancel={() => setEditingMarkerId(null)}
+        />
+      )}
     </div>
   )
 }

package/src/video/timeline/canvas/__tests__/TimelineCanvas.edgeScroll.test.tsx

@@ -8,9 +8,10 @@
  * The ramp/clamp MATH is `edgeScrollDelta` in viewport.ts, covered exhaustively
  * as pure data in viewport.test.ts. What can only be shown with a mounted
  * component is here: that a real drag actually starts the loop, that panning
- * re-feeds the pointer machine so the dragged item keeps tracking, that it
- * clamps and stops at the legal scroll range, and that it stands down when the
- * pointer leaves the zone, the drag ends, or the gesture is a ruler scrub.
+ * re-feeds the pointer machine so the dragged item (or, for a ruler scrub,
+ * the playhead) keeps tracking, that it clamps and stops at the legal scroll
+ * range, and that it stands down when the pointer leaves the zone or the
+ * drag ends.
  *
  * jsdom's `performance.now()` is NOT tied to Vitest's fake timers (verified:
  * advancing the fake clock by 16ms moves it by a fraction of a millisecond of
@@ -306,7 +307,7 @@ describe('TimelineCanvas — edge auto-scroll', () => {
     }
   })
 
-  it('does not auto-scroll for a ruler scrub, even with the pointer held at the edge', () => {
+  it('auto-scrolls for a ruler scrub held at the edge, same as any other drag', () => {
     const perf = stubPerfNow()
     try {
       const { surface, store, clock } = mount()
@@ -316,13 +317,43 @@ describe('TimelineCanvas — edge auto-scroll', () => {
       expect(clock.get()).toBeCloseTo(9.9)
       act(() => { document.dispatchEvent(mouse('mousemove', 990, RULER_Y)) })
 
+      act(() => { vi.advanceTimersByTime(20) }) // seed
       perf.advance(1000)
-      act(() => { vi.advanceTimersByTime(200) })
+      act(() => { vi.advanceTimersByTime(20) }) // one real pan
+
+      // The view panned to follow the scrub, same as it would for a clip
+      // drag, and the playhead kept tracking the held screen point.
+      expect(store.get().scrollSeconds).toBeGreaterThan(0)
+      expect(clock.get()).toBeGreaterThan(9.9)
+
+      act(() => { document.dispatchEvent(mouse('mouseup', 990, RULER_Y)) })
+
+      const pannedTo = store.get().scrollSeconds
       perf.advance(5000)
       act(() => { vi.advanceTimersByTime(200) })
+      expect(store.get().scrollSeconds).toBe(pannedTo)
+    } finally {
+      perf.restore()
+    }
+  })
 
-      // The playhead moved (that's what a scrub does); the VIEWPORT did not.
-      expect(store.get().scrollSeconds).toBe(0)
+  it('scrub auto-scroll clamps at the rightmost legal scroll and stops panning', () => {
+    const perf = stubPerfNow()
+    try {
+      const { surface, store } = mount()
+      act(() => { surface.dispatchEvent(mouse('mousedown', 990, RULER_Y)) })
+      act(() => { document.dispatchEvent(mouse('mousemove', 990, RULER_Y)) })
+
+      // x=990 pans at ≈0.393s/tick at this scale (see the equivalent
+      // non-scrub clamp test above) — 140 ticks clears RIGHTMOST_SCROLL
+      // (52.5s) and then some, to prove it holds there rather than merely
+      // arriving at it.
+      for (let i = 0; i < 140; i++) {
+        perf.advance(1000)
+        act(() => { vi.advanceTimersByTime(20) })
+      }
+
+      expect(store.get().scrollSeconds).toBeCloseTo(RIGHTMOST_SCROLL, 5)
 
       act(() => { document.dispatchEvent(mouse('mouseup', 990, RULER_Y)) })
     } finally {