@bycrux/editor 1.0.2 → 1.2.0

package/src/video/VideoEditor.tsx

@@ -11,10 +11,12 @@ import { getOverlayDesignCanvas } from './design-canvas'
 import { availableResolutionTiers, availableFpsTiers, currentResolutionTier, maxExportFps } from './export-limits'
 import { applyTheme, defaultMontajTheme, isLightTheme } from '../theme'
 import { collapseGaps, rippleDelete, splitAtTime } from './cuts'
+import { addMarker } from './timeline/markers'
 import { repairCaptionWords } from './captionRepair'
 import { maxCaptionLane, normalizeCaptionLanes } from './captionLanes'
 import Timeline, { type TimelineActions, type TimelineMode } from './timeline/Timeline'
-import { computeAutoCrossfade, computeDerivedTiming, enabledTrackItems, mapTrackItems, trackItems } from './timeline/timeline-model'
+import { visualDuration } from '@bycrux/timeline-core'
+import { computeAutoCrossfade, computeDerivedTiming, computeVisualCrossfade, enabledTrackItems, mapTrackItems, normalizeAudioTracks, trackItems, withEnabledItemTracks } from './timeline/timeline-model'
 import { makeCaptionEdit, type CaptionEditPatch } from './timeline/makeCaptionEdit'
 import PreviewPlayer, { type TransportHandle, type ScrubHandle } from './preview/PreviewPlayer'
 import SocialPreviewMenu, { PlatformGlyph, platformOption } from './preview/SocialPreviewMenu'
@@ -144,6 +146,56 @@ export function backfillCaptionIds<P extends Project>(project: P): P {
   }
 }
 
+/**
+ * Where a marker lands.
+ *
+ * With the preview axis ON, the yellow line is what the operator is looking at,
+ * so that is where the marker goes; with it OFF — or ON but with the pointer
+ * off the timeline, where `hoverScrub` reads null — the playhead is.
+ *
+ * `??`, never `||`: a hovered 0 is the start of the timeline, a perfectly
+ * ordinary place to mark, and `||` would silently reroute it to the playhead.
+ *
+ * Exported and tested on its own because `hoverScrub` is a private ref with no
+ * test seam. `handleSplit` carries the same rule inline
+ * (`previewAxis ? (hoverScrub.get() ?? undefined) : undefined`) and is
+ * deliberately NOT refactored onto this helper here: that is existing,
+ * currently-untested behavior and changing it is outside this plan. If you
+ * touch Split's rule later, unify it with this one.
+ */
+export function markerDropTime(previewAxis: boolean, hovered: number | null, playhead: number): number {
+  return previewAxis ? (hovered ?? playhead) : playhead
+}
+
+/**
+ * How long the export dialog thinks the finished video is.
+ *
+ * This is what bounds the cover-frame picker, so it has to be the duration the
+ * RENDER produces — hence `visualDuration`, timeline-core's port of render.js's
+ * own `getTotalDurationSeconds`: the furthest `end` over every item on every
+ * track, audio excluded. Anything narrower offers the operator a grid that
+ * stops before their video does.
+ *
+ * It used to be `max(end)` over the track-0 VIDEO items alone (the same list
+ * that feeds `keeps`). That reads track 0 as "the footage track", which is only
+ * true when there IS footage: an overlay-only project — one track of nothing
+ * but overlays, which the animations workflow emits routinely — measured 0, so
+ * the picker reported "No frames to pick from" for a project made entirely of
+ * pickable frames. The milder version of the same bug cut the grid short
+ * whenever an outro overlay outlived the last clip.
+ *
+ * `keeps` is deliberately NOT widened to match. It answers a different
+ * question — which windows contain real footage the SDR curve thumbnails can
+ * sample — and an overlay-only project genuinely has none.
+ *
+ * Enabled tracks only, and via `withEnabledItemTracks` because `visualDuration`
+ * wants the flat array-of-arrays shape: a track the operator has switched off
+ * is skipped by the render too, so it must not stretch the picker.
+ */
+export function exportDurationSec(project: { tracks?: unknown }): number {
+  return visualDuration(withEnabledItemTracks(project))
+}
+
 /**
  * `<VideoEditor>` — the assembled, host-agnostic video editor.
  *
@@ -253,6 +305,18 @@ export default function VideoEditor<P extends Project = Project>({
   // `onProjectChange` and paying an extra render for it. Chained, the host only
   // ever sees the input or the finished result.
   //
+  // A THIRD pass, same treatment, backfills AUDIO track ids
+  // (`normalizeAudioTracks`). `audio.tracks[*].id` is optional on disk
+  // (`docs/schemas/project.md` only requires `src`) but required by the
+  // editor's `AudioTrack` type, and every audio mutation — `updateAudioTrack`,
+  // this component's own track-replace path, multi-select mute/delete — keys
+  // a track by `id` with `===`. Id-less tracks all read as the same
+  // `undefined`, so editing one fanned the edit out to every audio track at
+  // once. Chained onto the captions result (not `sync.project` directly) for
+  // the same half-normalized-frame reason as the lane pass, and keyed into the
+  // deps below on `sync.project.audio` so an id-less track arriving via SSE
+  // mid-session self-heals too, not just on first mount.
+  //
   // `applyExternal` — no save, no undo push: this is normalization of loaded
   // data, not a user edit, so it must not dirty the project or contend with the
   // undo stack; the ids and lanes persist naturally the next time the operator
@@ -267,9 +331,10 @@ export default function VideoEditor<P extends Project = Project>({
     const captions = captionGestureRef.current
       ? backfilled.captions
       : normalizeCaptionLanes(backfilled.captions)
-    const normalized = captions === backfilled.captions ? backfilled : { ...backfilled, captions }
+    const withCaptions = captions === backfilled.captions ? backfilled : { ...backfilled, captions }
+    const normalized = normalizeAudioTracks(withCaptions)
     if (normalized !== sync.project) sync.applyExternal(normalized)
-  }, [sync.project.id, sync.project.captions])
+  }, [sync.project.id, sync.project.captions, sync.project.audio])
 
   // Notify the host of every authoritative change — edits, undo/redo, and SSE
   // frames — so its non-editor chrome (title, status pill) stays in sync. Mirrors
@@ -1165,7 +1230,10 @@ function ReviewSurface<P extends Project>({
     keeps: renderKeeps,
     imageTone: { value: currentImageTone ?? 'vivid', set: handleImageToneChange },
     name: project.name?.trim() || undefined,
-    durationSec: renderKeeps.reduce((m, k) => Math.max(m, k.end), 0),
+    // NOT derived from `renderKeeps` — see `exportDurationSec`. Keeps covers
+    // the footage windows the curve thumbnails can sample; the cover picker
+    // has to span the whole rendered video, overlay-only projects included.
+    durationSec: exportDurationSec(project),
     aspectRatio: (() => {
       const r = project.settings?.resolution
       return r && r[0] > 0 && r[1] > 0 ? r[0] / r[1] : undefined
@@ -1181,7 +1249,13 @@ function ReviewSurface<P extends Project>({
       set: handleExportFpsChange,
     },
   }), [
-    isHdrProject, renderKeeps, currentImageTone, handleImageToneChange,
+    // `project.tracks` is listed for `exportDurationSec`, which reads every
+    // track rather than just the footage keeps. `renderKeeps` already changes
+    // identity with it, so this is belt-and-braces — but relying on that would
+    // leave the duration silently stale the day keeps stops being memoized on
+    // tracks. Deliberately NOT the whole `project`: this memo is kept off
+    // unrelated project mutations on purpose (see `availableRes` above).
+    isHdrProject, renderKeeps, project.tracks, currentImageTone, handleImageToneChange,
     project.name, project.settings?.resolution, project.settings?.fps,
     availableRes, availableFpsList, handleExportResolutionChange, handleExportFpsChange,
   ])
@@ -1385,13 +1459,20 @@ function ReviewSurface<P extends Project>({
    */
   function commitTimelineEdit(p: Project) {
     captionGestureRef.current = false
-    // Fold the auto-crossfade into the SAME commit as the gesture, so an audio
+    // Fold BOTH derived crossfades into the SAME commit as the gesture, so a
     // drag/trim that ends overlapping a neighbour lands as ONE undo step (the
     // move and its derived fade together) rather than the move here plus a
-    // separate fade commit. Idempotent — a project needing no fade comes back
-    // unchanged — so video moves and non-overlapping audio moves are untouched.
-    const faded = computeAutoCrossfade(p) ?? p
-    sync.mutateTransient(() => faded as P)
+    // separate fade commit. Both passes are idempotent — a gesture that creates
+    // no overlap gets its project back unchanged — so a move that overlaps
+    // nothing is untouched by either.
+    //
+    // Audio first, then visual, on the audio pass's OUTPUT: the two touch
+    // disjoint parts of the project (`audio.tracks` vs `tracks`), so the order
+    // is not load-bearing, but chaining them means one commit carries both
+    // rather than the second silently dropping the first's work.
+    const withAudio  = computeAutoCrossfade(p) ?? p
+    const withVisual = computeVisualCrossfade(withAudio) ?? withAudio
+    sync.mutateTransient(() => withVisual as P)
     void sync.commit()
   }
 
@@ -1601,6 +1682,13 @@ function ReviewSurface<P extends Project>({
     void sync.mutate(() => updated as P)
   }
 
+  function handleAddMarker(at?: number) {
+    const base = syncProjectRef.current
+    const updated = addMarker(base, at ?? clock.get())
+    if (updated === base) return   // key repeat inside the half-frame window
+    void sync.mutate(() => updated as P)
+  }
+
   function handleRippleToggle() {
     const next = !rippleMode
     setRippleMode(next)
@@ -1737,6 +1825,13 @@ function ReviewSurface<P extends Project>({
       // is selected (a no-op if the axis isn't over the item).
       action: () => handleSplit(previewAxis ? (hoverScrub.get() ?? undefined) : undefined),
     },
+    {
+      id: 'video.add-marker',
+      description: 'Drop a marker',
+      keyHint: ['M'],
+      matches: matchesPlainKey('m'),
+      action: () => handleAddMarker(markerDropTime(previewAxis, hoverScrub.get(), clock.get())),
+    },
     {
       id: 'video.undo',
       description: 'Undo',
@@ -1877,6 +1972,7 @@ function ReviewSurface<P extends Project>({
   const paletteCommands: PaletteCommand[] = [
     { id: 'play-pause', label: 'Play/Pause', keyHint: ['Space'], run: () => transportRef.current?.togglePlay() },
     { id: 'split', label: 'Split at playhead', keyHint: ['S'], run: () => handleSplit() },
+    { id: 'add-marker', label: 'Drop a marker', keyHint: ['M'], run: () => handleAddMarker() },
   ]
   if (primarySelectedId) {
     paletteCommands.push({ id: 'ripple-delete', label: 'Ripple-delete selection', keyHint: ['⇧', 'Delete'], run: () => handleRippleDelete() })

package/src/video/__tests__/VideoEditor.keymap.test.tsx

@@ -386,6 +386,70 @@ describe('VideoEditor — preview axis toggle', () => {
   })
 })
 
+describe('VideoEditor — M drops a marker', () => {
+  it('drops one at the playhead with an auto-number label', async () => {
+    const adapter = makeFakeAdapter()
+    const onProjectChange = vi.fn()
+    render(<VideoEditor project={makeVideoProject()} adapter={adapter} onProjectChange={onProjectChange} slots={{ exportActions: <div /> }} />)
+    await screen.findByLabelText('Preview axis')
+
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' }))
+    })
+    const next = onProjectChange.mock.calls[onProjectChange.mock.calls.length - 1][0]
+    expect(next.markers).toHaveLength(1)
+    expect(next.markers[0]).toMatchObject({ t: 0, label: '1' })   // playhead starts at 0
+  })
+
+  it('does not fire while typing in a text surface', async () => {
+    const adapter = makeFakeAdapter()
+    const onProjectChange = vi.fn()
+    render(<VideoEditor project={makeVideoProject()} adapter={adapter} onProjectChange={onProjectChange} slots={{ exportActions: <div /> }} />)
+    await screen.findByLabelText('Preview axis')
+    onProjectChange.mockClear()   // drop the mount-time "notify host" call — see the Space test above
+
+    const input = document.createElement('input')
+    document.body.appendChild(input)
+    await act(async () => {
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'm', bubbles: true }))
+    })
+    expect(onProjectChange).not.toHaveBeenCalled()
+    input.remove()
+  })
+
+  it('Cmd+M is left alone — the shortcut is the bare letter', async () => {
+    // Cmd+M minimises the window on macOS; swallowing it would be hostile.
+    const adapter = makeFakeAdapter()
+    const onProjectChange = vi.fn()
+    render(<VideoEditor project={makeVideoProject()} adapter={adapter} onProjectChange={onProjectChange} slots={{ exportActions: <div /> }} />)
+    await screen.findByLabelText('Preview axis')
+    onProjectChange.mockClear()   // drop the mount-time "notify host" call — see the Space test above
+
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'm', metaKey: true }))
+    })
+    expect(onProjectChange).not.toHaveBeenCalled()
+  })
+
+  it('holding M does not spray markers', async () => {
+    // Key repeat fires keydown over and over at the same playhead; the
+    // half-frame guard in addMarker must make every repeat after the first a
+    // no-op that never reaches onProjectChange.
+    const adapter = makeFakeAdapter()
+    const onProjectChange = vi.fn()
+    render(<VideoEditor project={makeVideoProject()} adapter={adapter} onProjectChange={onProjectChange} slots={{ exportActions: <div /> }} />)
+    await screen.findByLabelText('Preview axis')
+
+    for (let i = 0; i < 5; i++) {
+      await act(async () => {
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' }))
+      })
+    }
+    const last = onProjectChange.mock.calls[onProjectChange.mock.calls.length - 1][0]
+    expect(last.markers).toHaveLength(1)
+  })
+})
+
 // ── T2 — copy / paste / duplicate / paste-attributes ────────────────────
 //
 // Persistence assertions read `adapter.saveProject`'s SECOND argument (the

package/src/video/__tests__/VideoEditor.test.tsx

@@ -12,6 +12,8 @@ import type {
 import type { Captions, VisualItem } from '../../schema'
 import type { OverlayChanges } from '../preview/useDragOverlay'
 import VideoEditor from '../VideoEditor'
+import { CROSSFADE_COMMIT_DELAY_MS } from '../timeline/Timeline'
+import { trackItems } from '../timeline/timeline-model'
 import { dragCanvasItem, installCanvasHarness, selectCanvasItem } from '../timeline/__tests__/_canvasSelect'
 
 // ── Fake adapter ──────────────────────────────────────────────────────────────
@@ -839,4 +841,171 @@ describe('VideoEditor — editor-package integration', () => {
 
     expect(queryByText('Compare')).toBeNull()
   })
+
+  // ── Derived OVERLAY crossfades: the wiring, not the function ─────────────
+  //
+  // `computeVisualCrossfade` (timeline-model.ts, unit-tested in
+  // timeline/__tests__/timeline-model.test.ts) ships INERT without two call
+  // sites, exactly as `computeAutoCrossfade` needs two: the gesture commit
+  // (`commitTimelineEdit` here in VideoEditor) and Timeline.tsx's debounced
+  // catch-all for overlay timing that changes without a gesture. One test each.
+  //
+  // Both assert on the ADAPTER's saveProject payload rather than on local
+  // `onProjectChange` state, for the reason
+  // VideoEditor.rippleDeleteCaptions.test.tsx records in full: only a real
+  // commit reaches `saveProject`, so an assertion on client state can pass on
+  // a transient preview that was never persisted.
+
+  /** The `opacity` keyframe track on `itemId` in a saved project, wherever the
+   *  item lives. `undefined` when the item carries no opacity curve at all. */
+  function opacityTrackOf(project: Project, itemId: string) {
+    for (const items of trackItems(project)) {
+      const item = items.find((i) => i.id === itemId)
+      if (item) return item.keyframes?.find((k) => k.prop === 'opacity')
+    }
+    return undefined
+  }
+
+  /** The item itself, for the span assertions. */
+  function itemOf(project: Project, itemId: string): VisualItem | undefined {
+    for (const items of trackItems(project)) {
+      const item = items.find((i) => i.id === itemId)
+      if (item) return item
+    }
+    return undefined
+  }
+
+  it('a trim that creates an overlay overlap commits the fade in ONE undo step', async () => {
+    onTestFinished(installCanvasHarness())
+    // Fake timers, never advanced: Timeline.tsx's debounced catch-all cannot
+    // fire, so a fade in the saved project can ONLY have come from the gesture
+    // commit. Without this the two call sites are indistinguishable.
+    vi.useFakeTimers()
+    onTestFinished(() => { vi.useRealTimers() })
+
+    const adapter = makeFakeAdapter()
+    // The overlays start APART — the gesture is what creates the overlap.
+    const initial = makeVideoProject({
+      tracks: [
+        {
+          id: 'trk-0',
+          items: [
+            { id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 10, inPoint: 0, outPoint: 10, sourceDuration: 40 },
+          ],
+        },
+        {
+          id: 'trk-1',
+          items: [
+            { id: 'ov-a', type: 'overlay', src: 'A.jsx', start: 0, end: 4 },
+            { id: 'ov-b', type: 'overlay', src: 'B.jsx', start: 5, end: 9 },
+          ],
+        },
+      ],
+    })
+    const { container } = render(
+      <VideoEditor project={initial} adapter={adapter} slots={{ exportActions: <div /> }} />,
+    )
+    await act(async () => { await Promise.resolve() })
+
+    // Drag ov-a's OUT edge from t=4 to t=6, so it runs 1s into ov-b. A trim on
+    // a non-zero track is allowed past a neighbour's near boundary (a partial
+    // overlap is a transition) but not past its far one.
+    dragCanvasItem(container, initial, { id: 'ov-a' }, { fromTime: 4, toTime: 6 })
+    await act(async () => { await Promise.resolve() })
+
+    expect(adapter.saveCalls.length).toBe(1)
+    const trimmed = adapter.saveCalls[0].project
+    expect(itemOf(trimmed, 'ov-a')!.end).toBeCloseTo(6, 5)
+
+    // ov-a fades 1 -> 0 across the overlap, in ITS OWN item-relative seconds.
+    const fadeOut = opacityTrackOf(trimmed, 'ov-a')!
+    expect(fadeOut.origin).toBe('crossfade')
+    expect(fadeOut.points.length).toBe(2)
+    expect(fadeOut.points[0]).toEqual({ t: 5, value: 1 })
+    expect(fadeOut.points[1].value).toBe(0)
+    expect(fadeOut.points[1].t).toBeCloseTo(6, 5)
+
+    // ov-b fades 0 -> 1 across the same span, measured from ITS start (t=5).
+    const fadeIn = opacityTrackOf(trimmed, 'ov-b')!
+    expect(fadeIn.origin).toBe('crossfade')
+    expect(fadeIn.points[0]).toEqual({ t: 0, value: 0 })
+    expect(fadeIn.points[1].value).toBe(1)
+    expect(fadeIn.points[1].t).toBeCloseTo(1, 5)
+
+    // ONE undo takes back the trim AND its derived fade together. The audio
+    // version of this bug recorded dozens of entries for a single drag; a
+    // second undo being needed here, or either curve surviving the first, is
+    // the regression.
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', metaKey: true }))
+    })
+    expect(adapter.saveCalls.length).toBe(2)
+    const undone = adapter.saveCalls[1].project
+    expect(itemOf(undone, 'ov-a')!.end).toBe(4)
+    expect(opacityTrackOf(undone, 'ov-a')).toBeUndefined()
+    expect(opacityTrackOf(undone, 'ov-b')).toBeUndefined()
+  })
+
+  it('a ripple-delete that creates an overlay overlap commits a fade without a gesture', async () => {
+    onTestFinished(installCanvasHarness())
+    vi.useFakeTimers()
+    onTestFinished(() => { vi.useRealTimers() })
+
+    const adapter = makeFakeAdapter()
+    // Shift+Delete on clip-A (0-2s) shifts everything starting at or after 2s
+    // left by 2s — across EVERY track. ov-b travels 4->2 while ov-a stays at
+    // 0-4, so the two overlap by 2s without any pointer ever touching them.
+    const initial = makeVideoProject({
+      tracks: [
+        {
+          id: 'trk-0',
+          items: [
+            { id: 'clip-A', type: 'video', src: 'a.mp4', start: 0, end: 2, inPoint: 0, outPoint: 2 },
+            { id: 'clip-B', type: 'video', src: 'a.mp4', start: 2, end: 6, inPoint: 2, outPoint: 6 },
+          ],
+        },
+        {
+          id: 'trk-1',
+          items: [
+            { id: 'ov-a', type: 'overlay', src: 'A.jsx', start: 0, end: 4 },
+            { id: 'ov-b', type: 'overlay', src: 'B.jsx', start: 4, end: 8 },
+          ],
+        },
+      ],
+    })
+    const { container } = render(
+      <VideoEditor project={initial} adapter={adapter} slots={{ exportActions: <div /> }} />,
+    )
+    await act(async () => { await Promise.resolve() })
+
+    selectCanvasItem(container, initial, { id: 'clip-A' })
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete', shiftKey: true }))
+    })
+
+    // `handleRippleDelete` goes straight to `sync.mutate` — it never passes
+    // through `commitTimelineEdit`, so its own commit carries no fade. That is
+    // precisely the hole the debounced pass fills.
+    expect(adapter.saveCalls.length).toBe(1)
+    const rippled = adapter.saveCalls[0].project
+    expect(itemOf(rippled, 'ov-b')!.start).toBe(2)
+    expect(opacityTrackOf(rippled, 'ov-a')).toBeUndefined()
+    expect(opacityTrackOf(rippled, 'ov-b')).toBeUndefined()
+
+    await act(async () => { vi.advanceTimersByTime(CROSSFADE_COMMIT_DELAY_MS) })
+
+    expect(adapter.saveCalls.length).toBe(2)
+    const faded = adapter.saveCalls[1].project
+    expect(opacityTrackOf(faded, 'ov-a')!.points).toEqual([
+      { t: 2, value: 1 }, { t: 4, value: 0 },
+    ])
+    expect(opacityTrackOf(faded, 'ov-b')!.points).toEqual([
+      { t: 0, value: 0 }, { t: 2, value: 1 },
+    ])
+
+    // Idempotent: the pass re-runs off its own commit and must find nothing,
+    // or it would commit forever.
+    await act(async () => { vi.advanceTimersByTime(CROSSFADE_COMMIT_DELAY_MS * 4) })
+    expect(adapter.saveCalls.length).toBe(2)
+  })
 })

package/src/video/__tests__/cuts.test.ts

@@ -310,6 +310,90 @@ describe('splitAtTime', () => {
     expect(lw.duration + rw.duration).toBeCloseTo(10)
   })
 
+  // A fade belongs to an EDGE. Both halves used to inherit BOTH fades from the
+  // spread, so every cut manufactured a fade-out into the razor and a fade-in
+  // out of it — on a voiceover with the usual trailing fade, each cut left a
+  // fragment ramping to silence at the cut that the operator had to zero by
+  // hand.
+  it('does not manufacture a fade-out at the cut on the left half', () => {
+    const p = makeProject({
+      tracks: vtracks([]),
+      audio: { tracks: [{ id: 'au', src: 'a.mp3', start: 0, end: 100, fadeOut: 0.4 }] },
+    })
+    const [left, right] = splitAtTime(p, 40, null).audio!.tracks
+    expect(left.fadeOut).toBeUndefined()   // the cut edge — no fade was asked for
+    expect(right.fadeOut).toBe(0.4)        // still the original END, keeps its fade
+  })
+
+  it('does not manufacture a fade-in at the cut on the right half', () => {
+    const p = makeProject({
+      tracks: vtracks([]),
+      audio: { tracks: [{ id: 'au', src: 'a.mp3', start: 0, end: 100, fadeIn: 0.3 }] },
+    })
+    const [left, right] = splitAtTime(p, 40, null).audio!.tracks
+    expect(left.fadeIn).toBe(0.3)          // still the original START, keeps its fade
+    expect(right.fadeIn).toBeUndefined()   // the cut edge
+  })
+
+  it('drops the curve along with the fade it described', () => {
+    // A `fadeOutCurve` on a half with no fade-out is dead data, and the next
+    // hand-drawn fade there should start from the default shape.
+    const p = makeProject({
+      tracks: vtracks([]),
+      audio: { tracks: [{
+        id: 'au', src: 'a.mp3', start: 0, end: 100,
+        fadeIn: 0.3, fadeInCurve: 'linear', fadeOut: 0.4, fadeOutCurve: 'log',
+      }] },
+    })
+    const [left, right] = splitAtTime(p, 40, null).audio!.tracks
+    expect(left.fadeInCurve).toBe('linear')
+    expect(left.fadeOutCurve).toBeUndefined()
+    expect(right.fadeOutCurve).toBe('log')
+    expect(right.fadeInCurve).toBeUndefined()
+  })
+
+  it('splitting twice never reintroduces a fade at either cut', () => {
+    // The shape that surfaced this: successive razors down one voiceover. The
+    // middle fragment owns neither original edge, so it must carry no fade at
+    // all — before the fix it carried both.
+    const p = makeProject({
+      tracks: vtracks([]),
+      audio: { tracks: [{ id: 'au', src: 'a.mp3', start: 0, end: 100, fadeIn: 0.3, fadeOut: 0.4 }] },
+    })
+    const once = splitAtTime(p, 40, null)
+    const twice = splitAtTime(once, 70, once.audio!.tracks[1].id)
+    const [a, b, c] = twice.audio!.tracks
+    expect([a.fadeIn, a.fadeOut]).toEqual([0.3, undefined])
+    expect([b.fadeIn, b.fadeOut]).toEqual([undefined, undefined])
+    expect([c.fadeIn, c.fadeOut]).toEqual([undefined, 0.4])
+  })
+
+  it('clamps a kept fade that no longer fits its own fragment', () => {
+    // A 3s fade-out is fine on the whole 20s track; the fragment it lands on is
+    // 1s long. Nothing downstream re-clamps — the renderer just anchors
+    // `st = end - fadeOut`, which would start the fade before this fragment's
+    // audio begins.
+    const p = makeProject({
+      tracks: vtracks([]),
+      audio: { tracks: [{ id: 'au', src: 'a.mp3', start: 0, end: 20, fadeIn: 3, fadeOut: 3 }] },
+    })
+    const [left, right] = splitAtTime(p, 19, null).audio!.tracks
+    expect(right.fadeOut).toBe(1)   // clamped to the 1s fragment
+    expect(left.fadeIn).toBe(3)     // still fits the 19s fragment, untouched
+  })
+
+  it('leaves a track with no fades alone', () => {
+    const p = makeProject({
+      tracks: vtracks([]),
+      audio: { tracks: [{ id: 'au', src: 'a.mp3', start: 0, end: 10 }] },
+    })
+    const [left, right] = splitAtTime(p, 4, null).audio!.tracks
+    for (const half of [left, right]) {
+      expect(half).not.toHaveProperty('fadeIn')
+      expect(half).not.toHaveProperty('fadeOut')
+    }
+  })
+
   it('carries an existing trim window across a split (both halves stay within source)', () => {
     // A pre-trimmed track: source window [2,12] mapped onto timeline [0,10].
     const p = makeProject({

package/src/video/__tests__/exportDurationSec.test.ts

@@ -0,0 +1,60 @@
+/**
+ * The export dialog's duration — what the cover-frame picker samples across.
+ *
+ * This used to be derived from the track-0 VIDEO items alone, which is a safe
+ * reading only when track 0 holds footage. An overlay-only project (the
+ * animations workflow emits exactly that: one track of nothing but overlays)
+ * therefore reported 0, and the picker had no frames to offer — on a project
+ * that renders perfectly well and is entirely made of pickable frames.
+ */
+import { describe, it, expect } from 'vitest'
+import { exportDurationSec } from '../VideoEditor'
+import type { EditorProject, VisualItem } from '../../schema'
+
+const video = (id: string, start: number, end: number): VisualItem =>
+  ({ id, type: 'video', src: `/${id}.mp4`, start, end }) as VisualItem
+const overlay = (id: string, start: number, end: number): VisualItem =>
+  ({ id, type: 'overlay', src: `/${id}.jsx`, start, end }) as VisualItem
+
+function proj(tracks: { items: VisualItem[]; enabled?: boolean }[]): EditorProject {
+  return {
+    id: 'p', status: 'draft', settings: { resolution: [1920, 1080], fps: 30 },
+    tracks: tracks.map((t, i) => ({ id: `trk-${i}`, ...t })),
+  } as EditorProject
+}
+
+describe('exportDurationSec', () => {
+  it('spans an overlay-only project, which used to report 0', () => {
+    // The Daubert-demo shape: one track, overlays only, no video anywhere.
+    expect(exportDurationSec(proj([{ items: [overlay('o1', 0, 5), overlay('o2', 5, 12)] }]))).toBe(12)
+  })
+
+  it('reaches an overlay that outlives the last video clip', () => {
+    // An outro card after the final clip is ordinary, and its frames are just
+    // as pickable as the footage before it — the render encodes to 14, so the
+    // picker has to offer the whole 14.
+    expect(exportDurationSec(proj([
+      { items: [video('v', 0, 8)] },
+      { items: [overlay('outro', 8, 14)] },
+    ]))).toBe(14)
+  })
+
+  it('still matches the video end when video is the longest thing', () => {
+    // The common case must not move.
+    expect(exportDurationSec(proj([
+      { items: [video('a', 0, 4), video('b', 4, 9)] },
+      { items: [overlay('o', 0, 3)] },
+    ]))).toBe(9)
+  })
+
+  it('ignores a disabled track, which the render also skips', () => {
+    expect(exportDurationSec(proj([
+      { items: [video('v', 0, 6)] },
+      { items: [overlay('o', 0, 30)], enabled: false },
+    ]))).toBe(6)
+  })
+
+  it('is 0 for a project with nothing on any track', () => {
+    expect(exportDurationSec(proj([{ items: [] }]))).toBe(0)
+  })
+})

package/src/video/__tests__/markerDropTime.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { markerDropTime } from '../VideoEditor'
+
+describe('markerDropTime', () => {
+  it('uses the playhead when the preview axis is off', () => {
+    expect(markerDropTime(false, 12, 4)).toBe(4)
+  })
+
+  it('uses the hovered time when the axis is on', () => {
+    // The yellow line is what the operator is looking at, so that is where the
+    // marker goes.
+    expect(markerDropTime(true, 12, 4)).toBe(12)
+  })
+
+  it('falls back to the playhead when the axis is on but nothing is hovered', () => {
+    // Axis on with the pointer off the timeline: hoverScrub reads null.
+    expect(markerDropTime(true, null, 4)).toBe(4)
+  })
+
+  it('treats a hovered 0 as a real position, not as absent', () => {
+    // The bug a `||` instead of `??` would introduce: the very start of the
+    // timeline is a perfectly ordinary place to mark.
+    expect(markerDropTime(true, 0, 4)).toBe(0)
+  })
+})

package/src/video/captionStyleDefaults.ts

@@ -22,7 +22,7 @@
  *   highlight-box.jsx, outline.jsx
  * (all under montaj_assets/render/templates/captions/).
  */
-import type { Captions } from '../schema'
+import type { Captions, CaptionTextTransform } from '../schema'
 
 type Style = Captions['style']
 
@@ -95,6 +95,6 @@ export const CAPTION_STYLE_TEXT_ALIGN: Record<Style, string> = {
  *  `renderSegment` call site); the no-timestamps fallback branch renders the
  *  segment text as-is, never uppercased. Every other style has no default in
  *  any branch. */
-export const CAPTION_STYLE_TEXT_TRANSFORM: Partial<Record<Style, string>> = {
+export const CAPTION_STYLE_TEXT_TRANSFORM: Partial<Record<Style, CaptionTextTransform>> = {
   outline: 'uppercase',
 }