@bycrux/editor 0.12.0 → 1.0.1

package/src/video/timeline/VisualTrackRow.tsx

@@ -1,300 +0,0 @@
-import { memo } from 'react'
-import { Volume2, VolumeX, Info, Scissors, Pencil } from 'lucide-react'
-import type { VisualItem } from '../../schema'
-import type { Project } from '../../types'
-import { collapseGaps } from '../cuts'
-import { pct, ratioFromClientX, trackRow, trackRowTall } from './utils'
-import { useTimelineContext } from './TimelineContext'
-import PlayheadLine from './PlayheadLine'
-import { useItemDragDrop } from './useItemDragDrop'
-import type { Draggable, DragEventContext } from './useItemDragDrop'
-import { applyMuteToSelection, applyResizeDeltaToSelection, deleteSelection } from './multiSelectOps'
-
-interface VisualTrackRowProps {
-  trackItems: VisualItem[]
-  trackIdx: number
-  project: Project
-  /** Unified multi-selection. First entry is the primary; isSel checks membership. */
-  selectedIds: string[]
-  rippleMode: boolean
-  onProjectChange?: (p: Project) => void
-  onOverlayEdit?: (p: Project) => void
-  /** Open the overlay props dialog for an overlay item (VideoEditor owns it). */
-  onEditOverlay?: (id: string) => void
-  /** Click handler — additive when shift/meta is held. */
-  onSelectItem: (id: string | null, additive: boolean) => void
-  onInspectClip?: (id: string) => void
-  subcutClipId: string | null
-  setSubcutClipId: (id: string | null) => void
-  /** Host-computed gate for the subcut-regenerate affordance (Montaj: project
-   *  is an ai_video). When false/undefined the Scissors button is hidden — the
-   *  package stays agnostic of Montaj's projectType. */
-  regenEnabled?: boolean
-  /** Host-computed predicate: is this clip already queued for regeneration?
-   *  (Montaj: project.regenQueue has an entry for this clipId.) Drives the
-   *  "queued" badge. */
-  isClipQueued?: (itemId: string) => boolean
-}
-
-const trackColors = [
-  { bg: 'bg-slate-600/80',  bgHov: 'hover:bg-slate-500/80',  bgSel: 'bg-slate-500/90',  ring: 'ring-slate-300/80',  border: 'border-slate-400/50',  text: 'text-slate-200',  resHov: 'hover:bg-slate-300/40'  },
-  { bg: 'bg-sky-700/80',    bgHov: 'hover:bg-sky-600/80',    bgSel: 'bg-sky-600/90',    ring: 'ring-sky-300/80',    border: 'border-sky-400/50',    text: 'text-sky-200',    resHov: 'hover:bg-sky-300/40'    },
-  { bg: 'bg-violet-700/80', bgHov: 'hover:bg-violet-600/80', bgSel: 'bg-violet-600/90', ring: 'ring-violet-300/80', border: 'border-violet-400/50', text: 'text-violet-200', resHov: 'hover:bg-violet-300/40' },
-  { bg: 'bg-emerald-700/80',bgHov: 'hover:bg-emerald-600/80',bgSel: 'bg-emerald-600/90',ring: 'ring-emerald-300/80',border: 'border-emerald-400/50',text: 'text-emerald-200',resHov: 'hover:bg-emerald-300/40'},
-  { bg: 'bg-rose-700/80',   bgHov: 'hover:bg-rose-600/80',   bgSel: 'bg-rose-600/90',   ring: 'ring-rose-300/80',   border: 'border-rose-400/50',   text: 'text-rose-200',   resHov: 'hover:bg-rose-300/40'   },
-  { bg: 'bg-amber-700/60',  bgHov: 'hover:bg-amber-700/80',  bgSel: 'bg-amber-600/80',  ring: 'ring-amber-400/80',  border: 'border-amber-500/50',  text: 'text-amber-200',  resHov: 'hover:bg-amber-300/40'  },
-]
-
-function VisualTrackRow({
-  trackItems,
-  trackIdx,
-  project,
-  selectedIds,
-  rippleMode,
-  onProjectChange,
-  onOverlayEdit,
-  onEditOverlay,
-  onSelectItem,
-  onInspectClip,
-  subcutClipId,
-  setSubcutClipId,
-  regenEnabled,
-  isClipQueued,
-}: VisualTrackRowProps) {
-  const { totalDuration, snapBoundaries, scrollRef, scrubberRef, clock, markers, setMarkers, selection, overlayDraggedRef, zoomRef } = useTimelineContext()
-  const tc = trackColors[trackIdx % trackColors.length]
-  const markerActive = markers[0] !== null || selection !== null
-  const primarySelectedId = selectedIds[0] ?? null
-  const dimmed = markerActive && primarySelectedId !== null && !trackItems.some(i => i.id === primarySelectedId)
-
-  const { beginDrag, beginResize } = useItemDragDrop({
-    totalDuration,
-    snapBoundaries,
-    scrollRef,
-    zoomRef,
-    draggedFlagRef: overlayDraggedRef,
-  })
-
-  function handleItemResizeStart(e: React.MouseEvent, item: VisualItem, edge: 'start' | 'end') {
-    if (!onProjectChange) return
-    let lastUpdated = project
-    const origStart = item.start
-    const origEnd = item.end
-    const multiTargets = selectedIds.length > 1 && selectedIds.includes(item.id)
-
-    beginResize(e, item as Draggable, edge, {
-      onLivePreview: ({ item: resized }: DragEventContext) => {
-        // First: apply the hook's resize (which has clamping, snap, in/outPoint
-        // math) to the originator clip.
-        let next: Project = {
-          ...project,
-          tracks: (project.tracks ?? []).map(track =>
-            track.map(ov => ov.id !== item.id ? ov : { ...ov, start: resized.start, end: resized.end, inPoint: resized.inPoint, outPoint: resized.outPoint })
-          ),
-        }
-        // Then: propagate the same delta to every other selected item across
-        // visual + audio tracks.
-        if (multiTargets) {
-          const dStart = edge === 'start' ? resized.start - origStart : 0
-          const dEnd = edge === 'end' ? resized.end - origEnd : 0
-          next = applyResizeDeltaToSelection(next, item.id, selectedIds, edge, { dStart, dEnd })
-        }
-        if (rippleMode) next = collapseGaps(next)
-        lastUpdated = next
-        onProjectChange!(next)
-      },
-      onCommit: () => {
-        onOverlayEdit?.(lastUpdated)
-      },
-    })
-  }
-
-  function handleDeleteOverlay(id: string) {
-    if (!onProjectChange) return
-    // If part of a multi-selection, delete the whole selection; otherwise just
-    // this item. Matches the Delete-key behavior in Timeline.handleKeyDown.
-    const ids = selectedIds.length > 1 && selectedIds.includes(id) ? selectedIds : [id]
-    let updated = deleteSelection(project, ids)
-    if (rippleMode) updated = collapseGaps(updated)
-    onProjectChange(updated)
-    onOverlayEdit?.(updated)
-    onSelectItem(null, false)
-  }
-
-  function handleToggleMute(item: VisualItem) {
-    if (!onProjectChange) return
-    const newMuted = !item.muted
-    // If clicked item is in a multi-selection, set every selected item's mute
-    // state to the new target (uniform end state, no surprise mixed state).
-    const targetIds = selectedIds.length > 1 && selectedIds.includes(item.id) ? selectedIds : [item.id]
-    const updated = applyMuteToSelection(project, targetIds, newMuted)
-    onProjectChange(updated)
-    onOverlayEdit?.(updated)
-  }
-
-  function handleOverlayDragStart(e: React.MouseEvent, item: VisualItem, sourceTrackIdx: number) {
-    if ((e.target as HTMLElement).classList.contains('cursor-ew-resize')) return
-    if (!onProjectChange) return
-    const projectChange = onProjectChange
-    const ROW_HEIGHT_PX = 24
-    let lastUpdated = project
-
-    beginDrag(e, item as Draggable, {
-      onLivePreview: ({ item: moved, dy }: DragEventContext) => {
-        const trackDelta = Math.round(dy / ROW_HEIGHT_PX)
-        const targetIdx = Math.max(0, sourceTrackIdx - trackDelta)
-        const duration = moved.end - moved.start
-        const overlapMin = duration * 0.3
-
-        function hasOverlap(track: VisualItem[]): boolean {
-          return track.some(ov => {
-            if (ov.id === item.id) return false
-            return Math.min(moved.end, ov.end) - Math.max(moved.start, ov.start) > overlapMin
-          })
-        }
-
-        const tracks = lastUpdated.tracks ?? []
-        let bestIdx = targetIdx
-        outer: for (let delta = 0; delta <= tracks.length; delta++) {
-          for (const i of delta === 0 ? [targetIdx] : [targetIdx - delta, targetIdx + delta]) {
-            if (i < 0) continue
-            const candidateTrack = i < tracks.length ? tracks[i] : []
-            if (!hasOverlap(candidateTrack)) { bestIdx = i; break outer }
-          }
-        }
-
-        const removed = tracks.map(t => t.filter(ov => ov.id !== item.id))
-        const movedItem = { ...item, start: moved.start, end: moved.end }
-        const final = bestIdx >= removed.length
-          ? [...removed, [movedItem]]
-          : removed.map((t, i) => i === bestIdx ? [...t, movedItem] : t)
-
-        const next = { ...lastUpdated, tracks: final.filter(t => t.length > 0) }
-        projectChange(next)
-        lastUpdated = next
-      },
-      onCommit: () => {
-        onOverlayEdit?.(lastUpdated)
-      },
-    })
-  }
-
-  function handleScrubDoubleClick(e: React.MouseEvent<HTMLDivElement>) {
-    if (totalDuration === 0) return
-    e.preventDefault()
-    const t = ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration
-    setMarkers(([a, b]) => {
-      if (a === null) return [t, null]       // place first marker
-      if (b === null) return [a, t]          // place second → selection complete
-      return [t, null]                       // reset: start fresh with new first marker
-    })
-  }
-
-  function handleTrackClick(e: React.MouseEvent) {
-    e.stopPropagation()
-    if (totalDuration === 0) return
-    const clickedTime = ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration
-    const rect = scrubberRef.current?.getBoundingClientRect()
-    const snapThreshold = rect ? (8 / rect.width) * totalDuration : 0
-    const boundaries = snapBoundaries
-    for (const b of boundaries) {
-      if (Math.abs(clickedTime - b) < snapThreshold) { clock.set(b); return }
-    }
-    clock.set(clickedTime)
-  }
-
-  return (
-    <div className={`${trackIdx === 0 ? trackRowTall : trackRow} transition-opacity ${dimmed ? 'opacity-30 pointer-events-none' : ''}`} onClick={handleTrackClick} onDoubleClick={handleScrubDoubleClick}>
-      {trackItems.map((item) => {
-        const isSel = selectedIds.includes(item.id)
-        return (
-          <div
-            key={item.id}
-            className={`absolute top-0 bottom-0 flex items-center overflow-hidden cursor-grab active:cursor-grabbing
-              ${isSel ? `${tc.bgSel} ring-1 ring-inset ${tc.ring}` : `${tc.bg} ${tc.bgHov}`}
-              border-r ${tc.border}`}
-            style={{ left: `${pct(item.start, totalDuration)}%`, width: `${pct(item.end - item.start, totalDuration)}%` }}
-            onClick={(e) => {
-              e.stopPropagation()
-              if (overlayDraggedRef.current) return
-              const additive = e.shiftKey || e.metaKey || e.ctrlKey
-              onSelectItem(item.id, additive)
-              // Only seek playhead on a plain single-select click (not on
-              // additive shift-clicks, which shouldn't disrupt scrubbing).
-              if (!additive && !isSel) clock.set(ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration)
-            }}
-            onDoubleClick={(e) => {
-              e.stopPropagation()
-              if (onInspectClip) onInspectClip(item.id)
-            }}
-            onMouseDown={(e) => handleOverlayDragStart(e, item, trackIdx)}
-          >
-            <div
-              className={`absolute left-0 top-0 bottom-0 w-2.5 cursor-ew-resize z-10 ${tc.resHov}`}
-              onMouseDown={(e) => handleItemResizeStart(e, item, 'start')}
-            />
-            <span className={`text-[10px] ${tc.text} truncate flex-1 min-w-0 pl-3`}>
-              ▪ {item.type}
-              {project.renderMode === 'ffmpeg-drawtext' && trackIdx > 0 && (
-                <span className="ml-1.5 text-amber-400/60">preview</span>
-              )}
-              {isClipQueued?.(item.id) && (
-                <span className="ml-1.5 text-amber-300/80 font-medium">queued</span>
-              )}
-            </span>
-            {item.type === 'video' && (
-              <button
-                className={`shrink-0 mr-3 z-10 cursor-pointer transition-opacity ${item.muted ? 'opacity-30 hover:opacity-60' : 'opacity-50 hover:opacity-90'} ${tc.text}`}
-                onClick={(e) => { e.stopPropagation(); handleToggleMute(item) }}
-                title={item.muted ? 'Unmute' : 'Mute'}
-              >
-                {item.muted ? <VolumeX size={10} /> : <Volume2 size={10} />}
-              </button>
-            )}
-            {isSel && onInspectClip && item.type === 'video' && (
-              <button
-                className={`shrink-0 ml-1 z-10 cursor-pointer opacity-50 hover:opacity-100 ${tc.text}`}
-                onClick={(e) => { e.stopPropagation(); onInspectClip(item.id) }}
-                title="Inspect generation"
-              ><Info size={10} /></button>
-            )}
-            {isSel && regenEnabled && item.generation && (item.end - item.start) >= 3 && (
-              <button
-                className={`shrink-0 ml-1 z-10 cursor-pointer opacity-50 hover:opacity-100 ${tc.text}`}
-                onClick={(e) => { e.stopPropagation(); setSubcutClipId(subcutClipId === item.id ? null : item.id) }}
-                title="Subcut regenerate"
-              ><Scissors size={10} /></button>
-            )}
-            {isSel && onEditOverlay && item.type === 'overlay' && !!item.src && (
-              <button
-                className={`shrink-0 ml-1 z-10 cursor-pointer opacity-60 hover:opacity-100 ${tc.text}`}
-                onClick={(e) => { e.stopPropagation(); onEditOverlay(item.id) }}
-                title="Edit overlay"
-              ><Pencil size={10} /></button>
-            )}
-            {isSel && (
-              <button
-                className={`shrink-0 ml-1 mr-3 z-10 cursor-pointer opacity-60 hover:opacity-100 ${tc.text} text-[11px] leading-none`}
-                onClick={(e) => { e.stopPropagation(); handleDeleteOverlay(item.id) }}
-                title="Delete"
-              >×</button>
-            )}
-            <div
-              className={`absolute right-0 top-0 bottom-0 w-2.5 cursor-ew-resize z-10 ${tc.resHov}`}
-              onMouseDown={(e) => handleItemResizeStart(e, item, 'end')}
-            />
-          </div>
-        )
-      })}
-      <PlayheadLine />
-      {selection && (
-        <div
-          className="absolute inset-y-0 bg-red-500/20 pointer-events-none"
-          style={{ left: `${pct(selection.start, totalDuration)}%`, width: `${pct(selection.end - selection.start, totalDuration)}%` }}
-        />
-      )}
-    </div>
-  )
-}
-
-export default memo(VisualTrackRow)

package/src/video/timeline/__tests__/CaptionTrackRow.test.tsx

@@ -1,241 +0,0 @@
-/// <reference types="vitest/globals" />
-import { render, screen, fireEvent } from '@testing-library/react'
-import { createPlaybackClock } from '../../playback-clock'
-import { TimelineContext, type TimelineContextValue } from '../TimelineContext'
-import CaptionTrackRow from '../CaptionTrackRow'
-import type { CaptionSegment } from '../../../schema'
-
-// Content width matches totalDuration 1:1 (1000px / 100s) so a clientX delta
-// of N px is exactly N/10 seconds — makes the drag-math assertions readable.
-const RECT = {
-  width: 1000, height: 40, left: 0, top: 0, right: 1000, bottom: 40, x: 0, y: 0,
-  toJSON: () => ({}),
-} as DOMRect
-
-function makeCtx(overrides: Partial<TimelineContextValue> = {}): TimelineContextValue {
-  return {
-    totalDuration: 100,
-    contentDuration: 100,
-    snapBoundaries: [],
-    zoom: 1,
-    zoomRef: { current: 1 },
-    scrollRef: { current: { getBoundingClientRect: () => RECT } as unknown as HTMLDivElement },
-    scrubberRef: { current: null },
-    overlayDraggedRef: { current: false },
-    clock: createPlaybackClock(),
-    markers: [null, null],
-    setMarkers: () => {},
-    selection: null,
-    ...overrides,
-  }
-}
-
-const seg = (over: Partial<CaptionSegment> = {}): CaptionSegment => ({
-  id: 'cap-0', text: 'hello world', start: 10, end: 20, ...over,
-})
-
-test('empty state renders when captionTrack is absent', () => {
-  render(
-    <TimelineContext.Provider value={makeCtx()}>
-      <CaptionTrackRow captionTrack={undefined} fps={30} selectedCaptionId={null} />
-    </TimelineContext.Provider>,
-  )
-  expect(screen.getByText('Captions')).toBeTruthy()
-})
-
-test('empty state renders when captionTrack has zero segments', () => {
-  render(
-    <TimelineContext.Provider value={makeCtx()}>
-      <CaptionTrackRow captionTrack={{ style: 'clean', segments: [] }} fps={30} selectedCaptionId={null} />
-    </TimelineContext.Provider>,
-  )
-  expect(screen.getByText('Captions')).toBeTruthy()
-})
-
-test('clicking a segment selects it and seeks the playhead into it', () => {
-  const ctx = makeCtx()
-  const onSelectCaption = vi.fn()
-  render(
-    <TimelineContext.Provider value={ctx}>
-      <CaptionTrackRow
-        captionTrack={{ style: 'clean', segments: [seg()] }}
-        fps={30}
-        selectedCaptionId={null}
-        onSelectCaption={onSelectCaption}
-      />
-    </TimelineContext.Provider>,
-  )
-  // The row itself (trackRow) also carries `cursor-pointer`, so anchor off the
-  // segment's text and walk up to its block instead of querying the class.
-  const block = screen.getByText('hello world').parentElement as HTMLDivElement
-  fireEvent.click(block)
-  expect(onSelectCaption).toHaveBeenCalledWith('cap-0')
-  expect(ctx.clock.get()).toBeCloseTo(10 + 0.5 / 30)
-})
-
-// Regression guard: the seek must survive CaptionPreview's frame quantization.
-// The preview computes `t = Math.round(currentTime * fps) / fps` before running
-// the templates' `t >= start && t < end` test, so seeking to a `start` that is
-// not frame-aligned used to round DOWN into the PREVIOUS segment — the operator
-// clicked a caption in the timeline and the preview drew its box over the one
-// before it. Whisper emits arbitrary floats, so this hit about half of all
-// segments.
-test('the seek lands inside the clicked segment even when its start is not frame-aligned', () => {
-  const fps = 30
-  // 3.44 * 30 = 103.2 → frame 103 → t = 3.4333, which is BEFORE 3.44.
-  const segments: CaptionSegment[] = [
-    { id: 'cap-0', text: 'first',  start: 0,    end: 3.44 },
-    { id: 'cap-1', text: 'second', start: 3.44, end: 6.02 },
-  ]
-  const ctx = makeCtx()
-  render(
-    <TimelineContext.Provider value={ctx}>
-      <CaptionTrackRow
-        captionTrack={{ style: 'clean', segments }}
-        fps={fps}
-        selectedCaptionId={null}
-        onSelectCaption={vi.fn()}
-      />
-    </TimelineContext.Provider>,
-  )
-  fireEvent.click(screen.getByText('second').parentElement as HTMLDivElement)
-
-  const t = Math.round(ctx.clock.get() * fps) / fps
-  const active = segments.find((s) => t >= s.start && t < s.end)
-  expect(active?.id).toBe('cap-1')
-})
-
-// Regression guard: `steps/lyrics/caption.py` emits segments with no `id`
-// field at all — ids are only minted later by VideoEditor's
-// backfillCaptionIds effect. On first render `live` is null, so `live?.id`
-// is undefined; an id-less segment's `seg.id` is also undefined, and
-// undefined === undefined used to make `isLive` true and dereference `live!`
-// while it was still null. This is the normal shape of every real project on
-// its first paint, not an edge case.
-test('renders without throwing when segments have no id field (pre-backfill shape)', () => {
-  const segments = [
-    { text: 'hello world', start: 10, end: 20 },
-  ] as unknown as CaptionSegment[]
-  expect(() =>
-    render(
-      <TimelineContext.Provider value={makeCtx()}>
-        <CaptionTrackRow
-          captionTrack={{ style: 'clean', segments }}
-          fps={30}
-          selectedCaptionId={null}
-        />
-      </TimelineContext.Provider>,
-    ),
-  ).not.toThrow()
-})
-
-describe('edge-drag retiming', () => {
-  // Regression guard for the single easiest way to break this feature: a
-  // retime patch must carry ONLY the dragged edge. If `text` ever leaked in,
-  // makeCaptionEdit would respread word timings and destroy per-word timing.
-  it('dragging the right edge sends { end } only — never text/words/other fields', () => {
-    const ctx = makeCtx()
-    const onCaptionSegmentChange = vi.fn()
-    const { container } = render(
-      <TimelineContext.Provider value={ctx}>
-        <CaptionTrackRow
-          captionTrack={{ style: 'clean', segments: [seg()] }}
-          fps={30}
-          selectedCaptionId={null}
-          onCaptionSegmentChange={onCaptionSegmentChange}
-        />
-      </TimelineContext.Provider>,
-    )
-    const handles = container.querySelectorAll('.cursor-ew-resize')
-    const rightHandle = handles[1] as HTMLDivElement
-
-    fireEvent.mouseDown(rightHandle, { clientX: 500 })
-    fireEvent.mouseMove(document, { clientX: 600 }) // +100px = +10s
-    // Not committed until mouseup — retiming must not fire on every tick
-    // (unlike VisualTrackRow, onCaptionSegmentChange pushes an undo entry and
-    // queues a save PER CALL).
-    expect(onCaptionSegmentChange).not.toHaveBeenCalled()
-
-    fireEvent.mouseUp(document)
-    expect(onCaptionSegmentChange).toHaveBeenCalledTimes(1)
-    const [id, patch] = onCaptionSegmentChange.mock.calls[0]
-    expect(id).toBe('cap-0')
-    expect(patch).toEqual({ end: 30 })
-    expect(Object.keys(patch)).toEqual(['end'])
-  })
-
-  // `useItemDragDrop.beginResize` has no travel threshold (unlike `beginDrag`)
-  // and calls onCommit unconditionally on mouseup, so a bare click on the 6px
-  // edge handle used to commit the edge's unchanged value — one undo entry and
-  // one queued save for a project that did not change.
-  it('a press-and-release on an edge handle with no movement commits nothing', () => {
-    const ctx = makeCtx()
-    const onCaptionSegmentChange = vi.fn()
-    const { container } = render(
-      <TimelineContext.Provider value={ctx}>
-        <CaptionTrackRow
-          captionTrack={{ style: 'clean', segments: [seg()] }}
-          fps={30}
-          selectedCaptionId={null}
-          onCaptionSegmentChange={onCaptionSegmentChange}
-        />
-      </TimelineContext.Provider>,
-    )
-    const rightHandle = container.querySelectorAll('.cursor-ew-resize')[1] as HTMLDivElement
-
-    fireEvent.mouseDown(rightHandle, { clientX: 500 })
-    fireEvent.mouseUp(document)
-    expect(onCaptionSegmentChange).not.toHaveBeenCalled()
-  })
-
-  // A drag that returns to where it started is likewise a no-op — the edge
-  // value is what matters, not whether the pointer moved.
-  it('a drag that ends back at the original edge commits nothing', () => {
-    const ctx = makeCtx()
-    const onCaptionSegmentChange = vi.fn()
-    const { container } = render(
-      <TimelineContext.Provider value={ctx}>
-        <CaptionTrackRow
-          captionTrack={{ style: 'clean', segments: [seg()] }}
-          fps={30}
-          selectedCaptionId={null}
-          onCaptionSegmentChange={onCaptionSegmentChange}
-        />
-      </TimelineContext.Provider>,
-    )
-    const rightHandle = container.querySelectorAll('.cursor-ew-resize')[1] as HTMLDivElement
-
-    fireEvent.mouseDown(rightHandle, { clientX: 500 })
-    fireEvent.mouseMove(document, { clientX: 600 })
-    fireEvent.mouseMove(document, { clientX: 500 })
-    fireEvent.mouseUp(document)
-    expect(onCaptionSegmentChange).not.toHaveBeenCalled()
-  })
-
-  it('dragging the left edge sends { start } only', () => {
-    const ctx = makeCtx()
-    const onCaptionSegmentChange = vi.fn()
-    const { container } = render(
-      <TimelineContext.Provider value={ctx}>
-        <CaptionTrackRow
-          captionTrack={{ style: 'clean', segments: [seg()] }}
-          fps={30}
-          selectedCaptionId={null}
-          onCaptionSegmentChange={onCaptionSegmentChange}
-        />
-      </TimelineContext.Provider>,
-    )
-    const handles = container.querySelectorAll('.cursor-ew-resize')
-    const leftHandle = handles[0] as HTMLDivElement
-
-    fireEvent.mouseDown(leftHandle, { clientX: 500 })
-    fireEvent.mouseMove(document, { clientX: 400 }) // -100px = -10s
-    fireEvent.mouseUp(document)
-
-    expect(onCaptionSegmentChange).toHaveBeenCalledTimes(1)
-    const [id, patch] = onCaptionSegmentChange.mock.calls[0]
-    expect(id).toBe('cap-0')
-    expect(patch).toEqual({ start: 0 })
-    expect(Object.keys(patch)).toEqual(['start'])
-  })
-})

package/src/video/timeline/__tests__/PlayheadLine.test.tsx

@@ -1,60 +0,0 @@
-/// <reference types="vitest/globals" />
-import { render, act } from '@testing-library/react'
-import { createPlaybackClock } from '../../playback-clock'
-import { TimelineContext, type TimelineContextValue } from '../TimelineContext'
-import PlayheadLine from '../PlayheadLine'
-
-function makeCtx(overrides: Partial<TimelineContextValue> = {}): TimelineContextValue {
-  return {
-    totalDuration: 10,
-    contentDuration: 10,
-    snapBoundaries: [],
-    zoom: 1,
-    zoomRef: { current: 1 },
-    scrollRef: { current: null },
-    scrubberRef: { current: null },
-    overlayDraggedRef: { current: false },
-    clock: createPlaybackClock(),
-    markers: [null, null],
-    setMarkers: () => {},
-    selection: null,
-    ...overrides,
-  }
-}
-
-test('PlayheadLine moves on clock.set without re-rendering a sibling row', () => {
-  const ctx = makeCtx()
-  let siblingRenders = 0
-
-  function Sibling() {
-    siblingRenders++
-    return null
-  }
-  function Root() {
-    return (
-      <TimelineContext.Provider value={ctx}>
-        <PlayheadLine />
-        <Sibling />
-      </TimelineContext.Provider>
-    )
-  }
-
-  const { container } = render(<Root />)
-  const before = siblingRenders
-
-  act(() => { ctx.clock.set(4) })
-
-  const line = container.querySelector('div') as HTMLDivElement
-  expect(line.style.left).toBe('40%')
-  expect(siblingRenders).toBe(before)
-})
-
-test('renders nothing when totalDuration is 0', () => {
-  const ctx = makeCtx({ totalDuration: 0 })
-  const { container } = render(
-    <TimelineContext.Provider value={ctx}>
-      <PlayheadLine />
-    </TimelineContext.Provider>,
-  )
-  expect(container.firstChild).toBeNull()
-})

package/src/video/timeline/__tests__/TranscriptModal.test.tsx

@@ -1,41 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest'
-import { render, screen, fireEvent, cleanup } from '@testing-library/react'
-import type { Project } from '../../../types'
-import type { CaptionSegment } from '../../../schema'
-import TranscriptModal from '../TranscriptModal'
-
-afterEach(() => cleanup())
-
-function makeProject(segments: CaptionSegment[]): Project {
-  return { id: 'p1', captions: { style: 'word-by-word', segments } } as unknown as Project
-}
-
-describe('TranscriptModal caption text edits', () => {
-  // Regression: makeCaptionEdit fires every callback it's given with the same
-  // updated project. TranscriptModal used to pass BOTH onProjectChange and
-  // onCaptionEdit into makeCaptionEdit for a text edit, and — at this
-  // component's real call site (VideoEditor's ReviewSurface, via Timeline) —
-  // both land on sync.mutate, so one text edit produced two undo entries and
-  // two queued saves. Only onCaptionEdit (the commit channel) should fire;
-  // onProjectChange is no longer even an accepted prop (see TranscriptModal.tsx).
-  it('a completed text edit produces exactly one commit, not two', () => {
-    const onCaptionEdit = vi.fn()
-    const project = makeProject([{ id: 'cap-0', text: 'hello world', start: 0, end: 2 }])
-    render(
-      <TranscriptModal
-        captionTrack={project.captions}
-        currentTime={0}
-        project={project}
-        onCaptionEdit={onCaptionEdit}
-        onClose={() => {}}
-      />,
-    )
-
-    const span = screen.getByText('hello world')
-    span.textContent = 'hello there'
-    fireEvent.blur(span)
-
-    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
-    expect(onCaptionEdit.mock.calls[0][0].captions.segments[0].text).toBe('hello there')
-  })
-})