@bycrux/editor 1.1.0 → 1.2.0

package/src/video/preview/__tests__/useVideoPlayback.canvasClock.test.ts

@@ -0,0 +1,99 @@
+/**
+ * The canvas rAF clock's CEILING, driven through the real effect.
+ *
+ * `canvasMaxEndRef` is the only thing standing between "space plays" and "space
+ * does nothing" on a project with no track-0 video. It used to read
+ * `overlayTracks` (`tracks.slice(1)`), which silently skips track 0 — and track
+ * 0 in canvas mode is not the primary footage track, it is content: the
+ * background images, and on an agent-authored project frequently the overlays
+ * themselves. A project that is ONE track of nothing but overlays (what the
+ * animations workflow emits) therefore got a ceiling of 0, and the first tick
+ * clamped the playhead to 0 and called `setIsPlaying(false)` in the same frame.
+ *
+ * These drive the hook's own rAF effect rather than asserting on a helper: the
+ * ceiling lives in a ref that nothing exports, so the only honest way to pin it
+ * is to run the clock and watch where time goes. Each case fails on the
+ * pre-fix `overlayTracks` read.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+import { useVideoPlayback } from '../useVideoPlayback'
+import type { EditorProject, VisualItem } from '../../../schema'
+
+const overlay = (id: string, start: number, end: number): VisualItem =>
+  ({ id, type: 'overlay', src: `/overlays/${id}.jsx`, start, end }) as VisualItem
+
+const image = (id: string, start: number, end: number): VisualItem =>
+  ({ id, type: 'image', src: `/img/${id}.png`, start, end }) as VisualItem
+
+/** The last emission. Not `.at(-1)` — this package targets ES2020. */
+const last = (xs: number[]): number | undefined => xs[xs.length - 1]
+
+function projectOf(...tracks: VisualItem[][]): EditorProject {
+  return {
+    id: 'canvas-clock',
+    status: 'draft',
+    settings: { resolution: [1920, 1080] },
+    tracks: tracks.map((items, i) => ({ id: `trk-${i}`, items })),
+  } as EditorProject
+}
+
+/**
+ * Mount the hook on a canvas project and run the clock for one second of wall
+ * time, returning every playhead value it emitted.
+ *
+ * Two ticks, because the first only anchors `rafLastMs` — it has no `dt` yet
+ * and emits nothing. The second is the first that can move the playhead, and
+ * the one the collapsed ceiling used to kill.
+ */
+function runClock(project: EditorProject) {
+  const times: number[] = []
+  const scheduled: FrameRequestCallback[] = []
+  vi.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((cb: FrameRequestCallback) => {
+    scheduled.push(cb)
+    return scheduled.length
+  })
+
+  const view = renderHook(() => useVideoPlayback(project, 0, (t) => times.push(t), (p) => p))
+  expect(view.result.current.isCanvasProject).toBe(true)
+
+  scheduled.length = 0
+  act(() => { view.result.current.setIsPlaying(true) })
+  expect(scheduled.length).toBeGreaterThan(0)
+
+  act(() => { scheduled[0](0) })          // anchor only
+  act(() => { scheduled[scheduled.length - 1](1000) })  // +1s of wall clock
+
+  return { times, isPlaying: view.result.current.isPlaying }
+}
+
+describe('useVideoPlayback — the canvas clock counts track 0', () => {
+  afterEach(() => { vi.restoreAllMocks() })
+
+  it('advances on a single track holding nothing but overlays', () => {
+    // The Daubert-demo shape: one track, 14 overlays, no captions, no video.
+    const { times, isPlaying } = runClock(projectOf([overlay('o1', 0, 5), overlay('o2', 5, 12)]))
+    expect(last(times)).toBeCloseTo(1, 6)
+    expect(isPlaying).toBe(true)
+  })
+
+  it('advances on a track-0 image that outlasts every overlay track', () => {
+    // Same defect, other content kind — the background image was invisible to
+    // the ceiling, so a slideshow stopped at its last overlay.
+    //
+    // The overlay track has to end INSIDE the second this clock runs (0.4 < 1),
+    // or `overlayTracks` alone already carries the playhead to 1 and the case
+    // passes on the broken code without ever reading track 0.
+    const { times } = runClock(projectOf([image('bg', 0, 20)], [overlay('o', 0, 0.4)]))
+    expect(last(times)).toBeCloseTo(1, 6)
+  })
+
+  it('still stops at the ceiling rather than running past the content', () => {
+    // The clamp itself is not what was wrong, and must survive: one second of
+    // wall clock against a half-second project lands on the end, not past it,
+    // and playback stops there.
+    const { times, isPlaying } = runClock(projectOf([overlay('o', 0, 0.5)]))
+    expect(last(times)).toBeCloseTo(0.5, 6)
+    expect(isPlaying).toBe(false)
+  })
+})

package/src/video/preview/useVideoPlayback.ts

@@ -322,18 +322,33 @@ export function useVideoPlayback(
     applyClipVolume(clip)
   }, [clips, videoTrack, activeSlot])
 
-  // 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, unchanged: the canvas/video divergence over the audio tail
+  // is documented in timeline-core's `durations.js` and is not this fix.
   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),
+      enabledTrackItems(project).flat().reduce((m, i) => Math.max(m, i.end ?? 0), 0),
       captionEnd,
     )
-  }, [overlayTracks, project.captions])
+  }, [project])
 
   useEffect(() => {
     if (!isCanvasProject) return

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
   }
@@ -1137,7 +1194,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 +1425,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 +1486,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.test.tsx

@@ -10,11 +10,11 @@
  */
 import { StrictMode } from 'react'
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { render, act, cleanup } from '@testing-library/react'
+import { render, act, cleanup, screen, fireEvent } from '@testing-library/react'
 import { createPlaybackClock } from '../../../playback-clock'
 import type { Project } from '../../../../types'
 import TimelineCanvas from '../TimelineCanvas'
-import { LIGHT_TIMELINE_COLORS, TIMELINE_COLORS, type TimelineMode } from '../draw'
+import { LIGHT_TIMELINE_COLORS, TIMELINE_COLORS, computeTimelineLayout, type TimelineMode } from '../draw'
 import { createViewportStore, type ViewportStore } from '../viewport'
 
 interface RecordedCall { method: string; args: unknown[] }
@@ -405,3 +405,107 @@ describe('TimelineCanvas — theme mode', () => {
     expect(overlay).toHaveLength(0)
   })
 })
+
+// ── Marker rename box ────────────────────────────────────────────────────
+//
+// The gesture DECISION (double-click on a marker → `editMarker` effect) is
+// covered as pure data in pointer-machine.test.ts. What only a mounted
+// component can show is the box itself: that it mounts, that it prefills,
+// and that Enter/Escape commit or cancel through the same
+// onProjectChange/onOverlayEdit pair every other discrete edit here uses.
+describe('marker rename box', () => {
+  const markerProject = {
+    id: 'p-marker',
+    tracks: [[{ id: 'c0', type: 'video', src: 'a.mp4', start: 0, end: 8 }]],
+    markers: [{ id: 'm1', t: 2, label: '1' }],
+  } as unknown as Project
+
+  // Derived from the layout itself, not hardcoded, so a strip-height change
+  // elsewhere can't quietly desync this from where the flag actually paints.
+  const MARKER_STRIP = computeTimelineLayout(markerProject).markers!
+  const MARKER_STRIP_Y = Math.round(MARKER_STRIP.y + MARKER_STRIP.height / 2)
+
+  function renderMarkerCanvas(overrides: Partial<React.ComponentProps<typeof TimelineCanvas>> = {}) {
+    const store = createViewportStore()
+    const clock = createPlaybackClock()
+    const utils = render(
+      <TimelineCanvas
+        project={markerProject}
+        clock={clock}
+        store={store}
+        totalDuration={20}
+        fps={30}
+        selectedIds={NO_SELECTION}
+        {...overrides}
+      />,
+    )
+    act(() => { vi.advanceTimersByTime(32) })
+    // Pin the scale so the marker's on-screen x is deterministic: t=2s at
+    // 100px/s is x=200.
+    act(() => { store.set({ pxPerSecond: 100, scrollSeconds: 0, widthPx: 1000 }) })
+    act(() => { vi.advanceTimersByTime(32) })
+    return { ...utils, store, clock }
+  }
+
+  /** Dispatches a real `dblclick` at marker m1's surface coordinates, exactly
+   *  the way an operator's browser event would arrive — not by poking state. */
+  function doubleClickAtMarker(container: HTMLElement) {
+    const surface = container.querySelector('[data-timeline-canvas]') as HTMLElement
+    act(() => {
+      surface.dispatchEvent(new MouseEvent('dblclick', {
+        clientX: 200, clientY: MARKER_STRIP_Y, bubbles: true, cancelable: true,
+      }))
+    })
+  }
+
+  it('is not mounted until a marker is double-clicked', () => {
+    renderMarkerCanvas()
+    expect(screen.queryByLabelText('Rename marker')).toBeNull()
+  })
+
+  it('mounts prefilled with the marker label after an editMarker effect', () => {
+    const { container } = renderMarkerCanvas()
+    doubleClickAtMarker(container)
+    // The state update lands synchronously inside `doubleClickAtMarker`'s own
+    // `act()`, so the box is already in the DOM — no need for `findBy`'s
+    // real-timer polling, which never fires under `vi.useFakeTimers()`.
+    const input = screen.getByLabelText('Rename marker')
+    expect((input as HTMLInputElement).value).toBe('1')
+  })
+
+  it('Enter commits the new name through onProjectChange and onOverlayEdit', () => {
+    const onProjectChange = vi.fn()
+    const onOverlayEdit = vi.fn()
+    const { container } = renderMarkerCanvas({ onProjectChange, onOverlayEdit })
+    doubleClickAtMarker(container)
+    const input = screen.getByLabelText('Rename marker')
+    fireEvent.change(input, { target: { value: 'intro' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onProjectChange).toHaveBeenCalled()
+    const next = onProjectChange.mock.calls[onProjectChange.mock.calls.length - 1][0] as Project
+    expect(next.markers![0].label).toBe('intro')
+    expect(onOverlayEdit).toHaveBeenCalled()   // one undo entry
+    expect(screen.queryByLabelText('Rename marker')).toBeNull()
+  })
+
+  it('Escape cancels and commits nothing', () => {
+    const onProjectChange = vi.fn()
+    const { container } = renderMarkerCanvas({ onProjectChange })
+    doubleClickAtMarker(container)
+    const input = screen.getByLabelText('Rename marker')
+    fireEvent.change(input, { target: { value: 'nope' } })
+    fireEvent.keyDown(input, { key: 'Escape' })
+    expect(onProjectChange).not.toHaveBeenCalled()
+    expect(screen.queryByLabelText('Rename marker')).toBeNull()
+  })
+
+  it('is a real <input>, so the document keymap ignores typing in it', () => {
+    // useKeymap's isTypingTarget guards INPUT/TEXTAREA/contentEditable — this
+    // pins that the box is a real input in the document, not a canvas-drawn
+    // fake.
+    const { container } = renderMarkerCanvas()
+    doubleClickAtMarker(container)
+    const input = screen.getByLabelText('Rename marker')
+    expect(input.tagName).toBe('INPUT')
+  })
+})