@bycrux/editor 0.12.0 → 1.0.1

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

@@ -0,0 +1,174 @@
+/// <reference types="vitest/globals" />
+/**
+ * The fade-shape picker — a right-click (Vegas' own gesture) on an audio
+ * bar's fade GRIP opens a small menu of three ICON options (Linear /
+ * Logarithmic / Exponential — see `FadeCurveIcon` in Timeline.tsx), each
+ * naming its shape via `title`/`aria-label` rather than visible text;
+ * picking one commits `fadeInCurve`/`fadeOutCurve` as ONE undo entry.
+ * Options are selected here by their accessible NAME (`getByRole('button',
+ * {name: ...})`, which resolves off `aria-label`), not by visible text.
+ *
+ * `TimelineCanvas`'s `contextmenu` handler does its own hit-test and calls
+ * `onFadeCurveMenu` with CLIENT coordinates; `Timeline` owns the menu's
+ * open/closed state and renders it as a `position: fixed` DOM overlay. jsdom
+ * lays everything out at 0×0, so the surface's rect is stubbed to a real one
+ * via `installCanvasHarness` (see `_canvasSelect.ts`).
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, cleanup, fireEvent, screen } from '@testing-library/react'
+import type { AudioTrack } from '../../../schema'
+import type { Project } from '../../../types'
+import { createPlaybackClock } from '../../playback-clock'
+import Timeline from '../Timeline'
+import { AUDIO_ITEM_INSET_PX, computeTimelineLayout } from '../canvas/draw'
+import { installCanvasHarness, SURFACE_LEFT, timeToClientX } from './_canvasSelect'
+
+let uninstall: () => void
+
+beforeEach(() => {
+  uninstall = installCanvasHarness()
+})
+
+afterEach(() => {
+  cleanup()
+  uninstall()
+})
+
+const AUDIO_TRACK: AudioTrack = { id: 'a0', src: 'v.mp3', start: 0, end: 10, fadeIn: 2 }
+
+/** `track` defaults to `AUDIO_TRACK` — only its `fadeInCurve`/`fadeOutCurve`
+ *  ever varies between tests (e.g. the highlight test), never its timing, so
+ *  `fadeInGripClientPoint` below can keep reading `AUDIO_TRACK`'s own
+ *  start/fadeIn unconditionally. */
+function makeProject(track: AudioTrack = AUDIO_TRACK): Project {
+  return {
+    id: 'p1',
+    status: 'draft',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    audio: { tracks: [track] },
+  } as unknown as Project
+}
+
+/** The fade-in grip's CLIENT (x, y) for `AUDIO_TRACK`, derived the same way
+ *  `hit-test.ts`'s `audioFadeGripX`/`audioFadeGripZone` do — purely from
+ *  time and the lane's own y, with no clip-body gutter math (the grip's HIT
+ *  zone is defined in time, not pixels; see hit-test.ts). `timeToClientX`
+ *  gives the SAME fit-to-view viewport the mounted surface settles to on
+ *  render; only the audio-bar's own top inset (`AUDIO_ITEM_INSET_PX`) is
+ *  genuinely fade-specific and stays local. */
+function fadeInGripClientPoint(project: Project) {
+  const clientX = timeToClientX(project, AUDIO_TRACK.start + (AUDIO_TRACK.fadeIn ?? 0))
+  const lane = computeTimelineLayout(project).lanes[0]
+  const barTop = lane.y + AUDIO_ITEM_INSET_PX
+  return { clientX, clientY: barTop + 2 }
+}
+
+function mount(track: AudioTrack = AUDIO_TRACK) {
+  const clock = createPlaybackClock()
+  const onProjectChange = vi.fn()
+  const onOverlayEdit = vi.fn()
+  const project = makeProject(track)
+  const utils = render(
+    <Timeline
+      project={project}
+      clock={clock}
+      onProjectChange={onProjectChange}
+      onOverlayEdit={onOverlayEdit}
+    />,
+  )
+  const surface = utils.container.querySelector('[data-timeline-canvas]') as HTMLElement
+  return { clock, onProjectChange, onOverlayEdit, surface, project, ...utils }
+}
+
+/** The picker's three option buttons expose their shape as the ACCESSIBLE
+ *  NAME (via `aria-label`, with a matching `title` for the hover tooltip) —
+ *  never as visible text — so every lookup here goes through
+ *  `getByRole('button', {name})` rather than `getByText`. */
+function shapeButton(name: 'Linear' | 'Logarithmic' | 'Exponential') {
+  return screen.getByRole('button', { name })
+}
+function queryShapeButton(name: 'Linear' | 'Logarithmic' | 'Exponential') {
+  return screen.queryByRole('button', { name })
+}
+
+describe('Timeline — fade-shape picker (right-click a fade grip)', () => {
+  it('opens the picker with three shape ICON options on a fade-grip right-click', () => {
+    const { surface, project } = mount()
+    const point = fadeInGripClientPoint(project)
+    fireEvent.contextMenu(surface, point)
+    expect(shapeButton('Linear')).toBeInTheDocument()
+    expect(shapeButton('Logarithmic')).toBeInTheDocument()
+    expect(shapeButton('Exponential')).toBeInTheDocument()
+    // Icon-only: the shape name is discoverable via title/aria-label, not as
+    // rendered text content anywhere in the menu.
+    expect(screen.queryByText('Linear')).not.toBeInTheDocument()
+  })
+
+  it('does NOT open the picker from a right-click elsewhere on the bar', () => {
+    const { surface } = mount()
+    // Well clear of the fade-in grip's small top-corner zone (see
+    // FADE_GRIP_ZONE_HEIGHT_PX) — the middle of the bar, vertically.
+    fireEvent.contextMenu(surface, { clientX: SURFACE_LEFT + 500, clientY: 100 })
+    expect(queryShapeButton('Linear')).not.toBeInTheDocument()
+  })
+
+  it('picking a shape commits fadeInCurve as ONE undo entry and closes the menu', () => {
+    const { surface, onProjectChange, onOverlayEdit, project } = mount()
+    const point = fadeInGripClientPoint(project)
+    fireEvent.contextMenu(surface, point)
+
+    fireEvent.click(shapeButton('Logarithmic'))
+
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+    expect(onOverlayEdit).toHaveBeenCalledTimes(1)
+    const committed = onOverlayEdit.mock.calls[0][0] as Project
+    expect(committed.audio?.tracks[0].fadeInCurve).toBe('log')
+    // fadeOutCurve is untouched — only the side that was right-clicked changes.
+    expect(committed.audio?.tracks[0].fadeOutCurve).toBeUndefined()
+    expect(queryShapeButton('Linear')).not.toBeInTheDocument()
+  })
+
+  it('Escape closes the picker without committing anything', () => {
+    const { surface, onProjectChange, onOverlayEdit, project } = mount()
+    fireEvent.contextMenu(surface, fadeInGripClientPoint(project))
+    expect(shapeButton('Linear')).toBeInTheDocument()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    expect(queryShapeButton('Linear')).not.toBeInTheDocument()
+    expect(onProjectChange).not.toHaveBeenCalled()
+    expect(onOverlayEdit).not.toHaveBeenCalled()
+  })
+
+  it('clicking outside the menu closes it without touching the project', () => {
+    const { surface, onProjectChange, onOverlayEdit, project } = mount()
+    fireEvent.contextMenu(surface, fadeInGripClientPoint(project))
+    expect(shapeButton('Linear')).toBeInTheDocument()
+
+    // The full-viewport backdrop is what "click elsewhere" actually hits —
+    // fixed-positioned, so it's the element under the pointer wherever on
+    // screen the click lands.
+    fireEvent.click(screen.getByTestId('fade-curve-menu-backdrop'))
+
+    expect(queryShapeButton('Linear')).not.toBeInTheDocument()
+    expect(onProjectChange).not.toHaveBeenCalled()
+    expect(onOverlayEdit).not.toHaveBeenCalled()
+  })
+
+  it('highlights the DEFAULT shape (exp) when no curve is set yet', () => {
+    const { surface, project } = mount()
+    fireEvent.contextMenu(surface, fadeInGripClientPoint(project))
+    expect(shapeButton('Exponential')).toHaveAttribute('aria-pressed', 'true')
+    expect(shapeButton('Linear')).toHaveAttribute('aria-pressed', 'false')
+    expect(shapeButton('Logarithmic')).toHaveAttribute('aria-pressed', 'false')
+  })
+
+  it('highlights whichever shape is already set on the track being edited', () => {
+    const track: AudioTrack = { ...AUDIO_TRACK, fadeInCurve: 'log' }
+    const { surface, project } = mount(track)
+    fireEvent.contextMenu(surface, fadeInGripClientPoint(project))
+    expect(shapeButton('Logarithmic')).toHaveAttribute('aria-pressed', 'true')
+    expect(shapeButton('Linear')).toHaveAttribute('aria-pressed', 'false')
+    expect(shapeButton('Exponential')).toHaveAttribute('aria-pressed', 'false')
+  })
+})

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

@@ -0,0 +1,273 @@
+/// <reference types="vitest/globals" />
+/**
+ * Delete removes the selected keyframe (SP9b T3.6) — the precedence seam
+ * between `timeline.delete-keyframe` and the pre-existing
+ * `timeline.delete-selection` binding (see `Timeline.keymap.test.tsx`).
+ * `useKeymap` is first-match-wins: with a keyframe diamond selected, Delete
+ * must remove ONLY that keyframe and leave the clip alone; with no keyframe
+ * selected it must fall straight through to the existing clip/caption/audio
+ * delete, unchanged.
+ *
+ * A keyframe diamond is selected via the REAL gesture — a double-click on it
+ * (`pointer-machine.ts`'s `doubleClick` case, `'keyframe'` hit → the
+ * `selectKeyframe` effect → `TimelineCanvas`'s `onSelectKeyframe` →
+ * `Timeline`'s `setSelectedKeyframe`) — mirroring how
+ * `Timeline.keyframeMenu.test.tsx` drives its own right-click gesture rather
+ * than reaching into Timeline's state directly.
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { render, cleanup, fireEvent } from '@testing-library/react'
+import type { Project } from '../../../types'
+import { createPlaybackClock } from '../../playback-clock'
+import Timeline from '../Timeline'
+import { computeTimelineLayout } from '../canvas/draw'
+import { canvasSurface, focusCanvasRoot, installCanvasHarness, timeToClientX } from './_canvasSelect'
+
+let uninstall: () => void
+
+beforeEach(() => {
+  uninstall = installCanvasHarness()
+})
+
+afterEach(() => {
+  cleanup()
+  uninstall()
+})
+
+/**
+ * clip-0 (0s-2s, video, plain) + o0 (2s-4s, overlay) keyframed on `scale` at
+ * item-relative t=0.5 AND t=1.5. Two points on the one track that's ever
+ * touched by the "ordinary" tests below, so removing one point never hits
+ * the last-point/freeze branch — that branch gets its own dedicated fixture
+ * (`makeProjectWithFreezeCandidate`) rather than being an incidental side
+ * effect here.
+ */
+function makeProject(): Project {
+  return {
+    id: 'p1',
+    status: 'draft',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [{
+      id: 'trk-0',
+      items: [
+        { id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 2, inPoint: 0, outPoint: 2 },
+        {
+          id: 'o0', type: 'overlay', start: 2, end: 4,
+          keyframes: [
+            { prop: 'scale', points: [{ t: 0.5, value: 1 }, { t: 1.5, value: 2 }] },
+          ],
+        },
+      ],
+    }],
+  } as unknown as Project
+}
+
+/**
+ * o0 additionally keyframed on `opacity` with a SINGLE point at t=0.5 — the
+ * same instant `scale` also holds a point at, so the diamond there is the
+ * union of both props (`keyframeUnionTimes`). `opacity`'s stale static
+ * scalar (0.1) is deliberately far from the curve's value (0.4): if removal
+ * routed through the plain multi-point path instead of
+ * `removeKeyframesAt`'s last-point/`disableKeyframing` branch, the item would
+ * snap back to the stale 0.1 the instant the keyframe went away.
+ */
+function makeProjectWithFreezeCandidate(): Project {
+  const project = makeProject()
+  const overlay = project.tracks![0].items[1]
+  return {
+    ...project,
+    tracks: [{
+      ...project.tracks![0],
+      items: [
+        project.tracks![0].items[0],
+        {
+          ...overlay,
+          opacity: 0.1,
+          keyframes: [
+            ...overlay.keyframes!,
+            { prop: 'opacity', points: [{ t: 0.5, value: 0.4 }] },
+          ],
+        },
+      ],
+    }],
+  } as unknown as Project
+}
+
+function mount(project: Project, selectedIds: string[]) {
+  const clock = createPlaybackClock()
+  const onProjectChange = vi.fn()
+  const onOverlayEdit = vi.fn()
+  const onSelectIds = vi.fn()
+  const utils = render(
+    <Timeline
+      project={project}
+      clock={clock}
+      onProjectChange={onProjectChange}
+      onOverlayEdit={onOverlayEdit}
+      selectedIds={selectedIds}
+      onSelectIds={onSelectIds}
+    />,
+  )
+  return { clock, onProjectChange, onOverlayEdit, onSelectIds, surface: canvasSurface(utils.container), ...utils }
+}
+
+/** CLIENT (x, y) for o0's diamond at item-relative `t` — the same "fit-to-view
+ *  viewport a freshly mounted surface settles to, plus a couple px above the
+ *  row's bottom edge" math `Timeline.keyframeMenu.test.tsx`'s own
+ *  `keyframeClientPoint` uses. */
+function keyframeClientPoint(project: Project, t: number) {
+  const row = computeTimelineLayout(project).rows[0]
+  const clientX = timeToClientX(project, 2 + t)   // o0.start is 2
+  return { clientX, clientY: row.y + row.height - 2 }
+}
+
+/** Select a keyframe diamond the honest way: a real double-click dispatched
+ *  on the canvas surface, driving `pointer-machine.ts`'s `doubleClick` →
+ *  `selectKeyframe` → `TimelineCanvas`'s `onSelectKeyframe` →
+ *  `Timeline`'s `setSelectedKeyframe`. Never reaches into Timeline's state. */
+function selectKeyframeAt(surface: HTMLElement, project: Project, t: number) {
+  fireEvent.doubleClick(surface, keyframeClientPoint(project, t))
+}
+
+describe('Timeline — Delete removes the selected keyframe', () => {
+  it('Delete removes the selected keyframe and leaves the clip alone', () => {
+    const project = makeProject()
+    const { surface, container, onProjectChange, onOverlayEdit } = mount(project, ['o0'])
+    selectKeyframeAt(surface, project, 0.5)
+    focusCanvasRoot(container)
+
+    fireEvent.keyDown(document.body, { key: 'Delete' })
+
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+    expect(onOverlayEdit).toHaveBeenCalledTimes(1)
+    const updated = onProjectChange.mock.calls[0][0] as Project
+    const items = updated.tracks![0].items
+    // Both items survive — nothing was deleted from the track.
+    expect(items.map(i => i.id)).toEqual(['clip-0', 'o0'])
+    const overlay = items.find(i => i.id === 'o0')!
+    const scaleTrack = overlay.keyframes!.find(t => t.prop === 'scale')!
+    // Only the t=0.5 point is gone; t=1.5 remains untouched.
+    expect(scaleTrack.points.map(p => p.t)).toEqual([1.5])
+  })
+
+  it('Delete still deletes the clip when NO keyframe is selected', () => {
+    const project = makeProject()
+    const { surface: _surface, container, onProjectChange, onOverlayEdit, onSelectIds } = mount(project, ['clip-0'])
+    // No double-click — selectedKeyframe stays null, so the fall-through
+    // to `timeline.delete-selection` is exercised.
+    focusCanvasRoot(container)
+
+    fireEvent.keyDown(document.body, { key: 'Delete' })
+
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+    expect(onOverlayEdit).toHaveBeenCalledTimes(1)
+    expect(onSelectIds).toHaveBeenCalledWith([])
+    const updated = onProjectChange.mock.calls[0][0] as Project
+    expect(updated.tracks![0].items.find(i => i.id === 'clip-0')).toBeUndefined()
+  })
+
+  it('Delete removes only the keyframe, not the clip, when both are selected', () => {
+    // A keyframe can only be selected while its OWNING item is also selected
+    // (Timeline.tsx clears `selectedKeyframe` the instant its item leaves
+    // `selectedIds` — see the effect right after the `useState`), so "both
+    // selected" is the NORMAL case here, not a rare edge case. If
+    // `timeline.delete-keyframe` were ordered AFTER `timeline.delete-selection`
+    // (or its guard were wrong), first-match-wins would hand every one of
+    // these presses to the clip-delete binding instead, deleting o0 outright.
+    const project = makeProject()
+    const { surface, container, onProjectChange } = mount(project, ['o0'])
+    selectKeyframeAt(surface, project, 1.5)
+    focusCanvasRoot(container)
+
+    fireEvent.keyDown(document.body, { key: 'Delete' })
+
+    const updated = onProjectChange.mock.calls[0][0] as Project
+    const items = updated.tracks![0].items
+    expect(items).toHaveLength(2)
+    expect(items.map(i => i.id)).toContain('o0')
+    const overlay = items.find(i => i.id === 'o0')!
+    const scaleTrack = overlay.keyframes!.find(t => t.prop === 'scale')
+    expect(scaleTrack?.points.map(p => p.t)).toEqual([0.5])
+  })
+
+  it('clears the keyframe selection after removing it, so a second Delete hits the clip', () => {
+    const project = makeProject()
+    const { surface, container, onProjectChange, onSelectIds } = mount(project, ['o0'])
+    selectKeyframeAt(surface, project, 0.5)
+    focusCanvasRoot(container)
+
+    fireEvent.keyDown(document.body, { key: 'Delete' })   // removes the keyframe
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+    // The FIRST press must NOT have touched the clip — this is what
+    // distinguishes "selection was cleared" from "Delete just deletes the
+    // clip regardless," which would make the second assertion below pass
+    // even if this whole feature were unwired.
+    const firstCommit = onProjectChange.mock.calls[0][0] as Project
+    expect(firstCommit.tracks![0].items.find(i => i.id === 'o0')).toBeDefined()
+
+    fireEvent.keyDown(document.body, { key: 'Delete' })   // second press: no keyframe selected anymore
+    expect(onProjectChange).toHaveBeenCalledTimes(2)
+    expect(onSelectIds).toHaveBeenCalledWith([])
+    const secondCommit = onProjectChange.mock.calls[1][0] as Project
+    expect(secondCommit.tracks![0].items.find(i => i.id === 'o0')).toBeUndefined()
+  })
+
+  it('freezes the value when the removed keyframe was a track\'s last point', () => {
+    const project = makeProjectWithFreezeCandidate()
+    const { surface, container, onProjectChange } = mount(project, ['o0'])
+    // t=0.5 is the union of scale's (multi-point) and opacity's (single-point,
+    // "last point") tracks — one diamond, one Delete, two different removal
+    // branches inside `removeKeyframesAt` exercised at once.
+    selectKeyframeAt(surface, project, 0.5)
+    focusCanvasRoot(container)
+
+    fireEvent.keyDown(document.body, { key: 'Delete' })
+
+    const updated = onProjectChange.mock.calls[0][0] as Project
+    const overlay = updated.tracks![0].items.find(i => i.id === 'o0')!
+    // opacity's only point is gone — its track is dropped entirely...
+    expect(overlay.keyframes?.find(t => t.prop === 'opacity')).toBeUndefined()
+    // ...and item.opacity holds the CURVE's sampled value at t=0.5 (0.4), not
+    // the stale pre-keyframing scalar (0.1) that was sitting there before.
+    expect(overlay.opacity).toBeCloseTo(0.4, 5)
+    // scale is unaffected: it had a SECOND point (t=1.5) at removal time, so
+    // it takes the ordinary multi-point branch and survives with that point.
+    const scaleTrack = overlay.keyframes!.find(t => t.prop === 'scale')!
+    expect(scaleTrack.points.map(p => p.t)).toEqual([1.5])
+  })
+
+  it('falls through to clip deletion when the selected keyframe no longer exists', () => {
+    // The selection can go stale WITHOUT its item leaving `selectedIds` —
+    // a diamond drag, the right-click menu, undo. Nothing draws as selected
+    // then, so Delete must delete the clip rather than silently do nothing.
+    const project = makeProject()
+    const props = {
+      clock: createPlaybackClock(),
+      onProjectChange: vi.fn(),
+      onOverlayEdit: vi.fn(),
+      selectedIds: ['o0'],
+      onSelectIds: vi.fn(),
+    }
+    const { container, rerender } = render(<Timeline project={project} {...props} />)
+    selectKeyframeAt(canvasSurface(container), project, 0.5)
+
+    // Same item, still selected — but its t=0.5 keyframe is gone.
+    const pruned = {
+      ...project,
+      tracks: [{
+        ...project.tracks![0],
+        items: project.tracks![0].items.map(i => i.id === 'o0'
+          ? { ...i, keyframes: [{ prop: 'scale', points: [{ t: 1.5, value: 2 }] }] }
+          : i),
+      }],
+    } as unknown as Project
+    rerender(<Timeline project={pruned} {...props} />)
+    focusCanvasRoot(container)
+
+    fireEvent.keyDown(document.body, { key: 'Delete' })
+
+    expect(props.onProjectChange).toHaveBeenCalledTimes(1)
+    const updated = props.onProjectChange.mock.calls[0][0] as Project
+    expect(updated.tracks![0].items.find(i => i.id === 'o0')).toBeUndefined()
+  })
+})

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

@@ -0,0 +1,215 @@
+/// <reference types="vitest/globals" />
+/**
+ * Selection follows a retimed diamond (CapCut-correct operator decision):
+ * dragging the SELECTED diamond to a new time must keep it selected AT THAT
+ * NEW TIME — not drop the selection because `selectedKeyframe` still names
+ * the OLD `t`, which `moveKeyframe` has just vacated.
+ *
+ * Exercised end to end with a REAL drag (mousedown → mousemove(s) →
+ * mouseup on `document`, exactly as `TimelineCanvas` wires its own gesture —
+ * see `_canvasSelect.ts`'s `dragCanvasItem`), then a REAL `Delete` keypress,
+ * mirroring how `Timeline.keyframeDelete.test.tsx` proves selection through
+ * the actual gesture rather than by reaching into Timeline's state.
+ *
+ * `Harness` below is a CONTROLLED host, not a bare `<Timeline>` — it feeds
+ * `onProjectChange`/`onOverlayEdit` straight back into the `project` prop,
+ * exactly as the real host (`VideoEditor.tsx`) does. Without that, the mid-
+ * drag retime would never reach Timeline's own re-render, and the Delete
+ * guard (`keyframeUnionTimes(item).includes(selectedKeyframe.t)` — see
+ * Timeline.tsx) would check the followed `t` against the STALE, un-retimed
+ * project and (correctly, on its own terms) find nothing there — which
+ * would look identical to the bug this file exists to catch, for the wrong
+ * reason. `Timeline.keyframeDelete.test.tsx`'s own last test hits the same
+ * seam with a manual `rerender`; a controlled component is the equivalent
+ * for a gesture that retimes mid-test rather than being swapped in whole.
+ *
+ * Delete removing the point that's still there (not the whole clip, and not
+ * a no-op) is the only externally observable proof that `selectedKeyframe`
+ * followed the diamond — `pointer-machine.test.ts`'s "selection follows a
+ * retimed diamond" tests cover the effect itself, in isolation.
+ *
+ * Deliberately NOT `fireEvent.pointerDown`/`pointerMove` — this repo's jsdom
+ * silently drops `clientX`/`clientY` off synthetic PointerEvents, which would
+ * make a drag never leave its press-time point without failing loudly. Raw
+ * `MouseEvent`s dispatched straight onto `document` (`TimelineCanvas` listens
+ * there for the life of a gesture) are what every other canvas gesture test
+ * in this package uses instead.
+ */
+import { useState } from 'react'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { act, render, cleanup, fireEvent } from '@testing-library/react'
+import type { Project } from '../../../types'
+import { createPlaybackClock } from '../../playback-clock'
+import Timeline from '../Timeline'
+import { computeTimelineLayout } from '../canvas/draw'
+import { canvasSurface, focusCanvasRoot, installCanvasHarness, timeToClientX } from './_canvasSelect'
+
+let uninstall: () => void
+
+beforeEach(() => {
+  uninstall = installCanvasHarness()
+})
+
+afterEach(() => {
+  cleanup()
+  uninstall()
+})
+
+/**
+ * clip-0 (0s-2s, video, plain) + o0 (2s-4s, overlay) keyframed on `scale` at
+ * item-relative t=0.5 AND t=1.5 — the same fixture shape
+ * `Timeline.keyframeDelete.test.tsx` uses, so a diamond drag here lands on
+ * familiar ground: two points on one track, neither the union-of-props case.
+ */
+function makeProject(): Project {
+  return {
+    id: 'p1',
+    status: 'draft',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [{
+      id: 'trk-0',
+      items: [
+        { id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 2, inPoint: 0, outPoint: 2 },
+        {
+          id: 'o0', type: 'overlay', start: 2, end: 4,
+          keyframes: [
+            { prop: 'scale', points: [{ t: 0.5, value: 1 }, { t: 1.5, value: 2 }] },
+          ],
+        },
+      ],
+    }],
+  } as unknown as Project
+}
+
+/** A controlled host: `project`/`selectedIds` live in real React state and
+ *  are written back on every `onProjectChange`/`onOverlayEdit`/`onSelectIds`,
+ *  same wiring `VideoEditor.tsx` gives Timeline in the real app. The spy
+ *  functions record every call for assertions without replacing this
+ *  feedback loop. */
+function Harness(props: {
+  initial: Project
+  selectedIds: string[]
+  onProjectChange: (p: Project) => void
+  onOverlayEdit: (p: Project) => void
+  onSelectIds: (ids: string[]) => void
+}) {
+  const [clock] = useState(() => createPlaybackClock())
+  const [project, setProject] = useState(props.initial)
+  const [selectedIds, setSelectedIds] = useState(props.selectedIds)
+  return (
+    <Timeline
+      project={project}
+      clock={clock}
+      onProjectChange={p => { setProject(p); props.onProjectChange(p) }}
+      onOverlayEdit={p => { setProject(p); props.onOverlayEdit(p) }}
+      selectedIds={selectedIds}
+      onSelectIds={ids => { setSelectedIds(ids); props.onSelectIds(ids) }}
+    />
+  )
+}
+
+function mount(project: Project, selectedIds: string[]) {
+  const onProjectChange = vi.fn()
+  const onOverlayEdit = vi.fn()
+  const onSelectIds = vi.fn()
+  const utils = render(
+    <Harness
+      initial={project}
+      selectedIds={selectedIds}
+      onProjectChange={onProjectChange}
+      onOverlayEdit={onOverlayEdit}
+      onSelectIds={onSelectIds}
+    />,
+  )
+  return { onProjectChange, onOverlayEdit, onSelectIds, surface: canvasSurface(utils.container), ...utils }
+}
+
+/** CLIENT (x, y) for o0's diamond at item-relative `t` — the same math
+ *  `Timeline.keyframeDelete.test.tsx`'s own `keyframeClientPoint` uses.
+ *  Computed once, off the ORIGINAL project: `_canvasSelect.ts`'s viewport
+ *  helpers fit to `computeDerivedTiming`, and neither this fixture's total
+ *  duration nor its row layout changes as `o0`'s keyframes move, so the same
+ *  coordinates stay valid for the whole test. */
+function keyframeClientPoint(project: Project, t: number) {
+  const row = computeTimelineLayout(project).rows[0]
+  const clientX = timeToClientX(project, 2 + t)   // o0.start is 2
+  return { clientX, clientY: row.y + row.height - 2 }
+}
+
+/** Select a keyframe diamond the honest way: a real double-click. */
+function selectKeyframeAt(surface: HTMLElement, project: Project, t: number) {
+  fireEvent.doubleClick(surface, keyframeClientPoint(project, t))
+}
+
+function mouseInit(p: { clientX: number; clientY: number }) {
+  return { clientX: p.clientX, clientY: p.clientY, button: 0, bubbles: true }
+}
+
+/** Drag o0's diamond at item-relative `fromT` by `dxPx` client pixels: press
+ *  on the surface, two intermediate moves and a release dispatched straight
+ *  onto `document` — `TimelineCanvas`'s own gesture wiring — mirroring
+ *  `_canvasSelect.ts`'s `dragCanvasItem` (which cannot itself target a
+ *  keyframe diamond; `resolveCanvasTarget` only resolves clips/audio/
+ *  captions). `act` wraps the raw `document.dispatchEvent` calls for the
+ *  same reason `dragCanvasItem`'s `dispatchOnDocument` does — those two
+ *  aren't one of RTL's own wrapped fire helpers. */
+function dragKeyframe(surface: HTMLElement, project: Project, fromT: number, dxPx: number) {
+  const from = keyframeClientPoint(project, fromT)
+  fireEvent.mouseDown(surface, mouseInit(from))
+  const mid = { clientX: from.clientX + dxPx / 2, clientY: from.clientY }
+  act(() => { document.dispatchEvent(new MouseEvent('mousemove', mouseInit(mid))) })
+  const to = { clientX: from.clientX + dxPx, clientY: from.clientY }
+  act(() => { document.dispatchEvent(new MouseEvent('mousemove', mouseInit(to))) })
+  act(() => { document.dispatchEvent(new MouseEvent('mouseup', mouseInit(to))) })
+}
+
+describe('Timeline — keyframe selection follows a retimed diamond', () => {
+  it('Delete removes the point the diamond landed on after a drag, not the clip — proving the selection followed', () => {
+    const project = makeProject()
+    const { surface, container, onProjectChange } = mount(project, ['o0'])
+    selectKeyframeAt(surface, project, 0.5)
+    focusCanvasRoot(container)
+
+    // Drag the SELECTED t=0.5 diamond well clear of both its own start and
+    // the untouched t=1.5 point, so there is no ambiguity about which point
+    // Delete removed.
+    dragKeyframe(surface, project, 0.5, 30)
+
+    fireEvent.keyDown(document.body, { key: 'Delete' })
+
+    // The clip-delete fallback (`timeline.delete-selection`) would have
+    // removed 'o0' outright instead of just a keyframe point — it did not.
+    const updated = onProjectChange.mock.calls[onProjectChange.mock.calls.length - 1][0] as Project
+    const items = updated.tracks![0].items
+    expect(items.map(i => i.id)).toEqual(['clip-0', 'o0'])
+
+    const overlay = items.find(i => i.id === 'o0')!
+    const scaleTrack = overlay.keyframes!.find(t => t.prop === 'scale')!
+    // Exactly one point survives: t=1.5, which the drag never touched. The
+    // point the drag moved to is gone — proof Delete's target followed the
+    // diamond rather than staying pinned to the vacated t=0.5 (which, with
+    // the bug, would have found nothing there and fallen through to
+    // deleting the whole clip instead — the assertion above already rules
+    // that out, this one pins down which point actually went).
+    expect(scaleTrack.points).toHaveLength(1)
+    expect(scaleTrack.points[0].t).toBeCloseTo(1.5)
+  })
+
+  it('a second Delete now hits the clip — the followed selection was consumed, not left dangling', () => {
+    const project = makeProject()
+    const { surface, container, onProjectChange, onSelectIds } = mount(project, ['o0'])
+    selectKeyframeAt(surface, project, 0.5)
+    focusCanvasRoot(container)
+
+    dragKeyframe(surface, project, 0.5, 30)
+
+    fireEvent.keyDown(document.body, { key: 'Delete' })   // removes the followed keyframe
+    const afterFirst = onProjectChange.mock.calls[onProjectChange.mock.calls.length - 1][0] as Project
+    expect(afterFirst.tracks![0].items.find(i => i.id === 'o0')).toBeDefined()
+
+    fireEvent.keyDown(document.body, { key: 'Delete' })   // no keyframe selected anymore
+    expect(onSelectIds).toHaveBeenCalledWith([])
+    const afterSecond = onProjectChange.mock.calls[onProjectChange.mock.calls.length - 1][0] as Project
+    expect(afterSecond.tracks![0].items.find(i => i.id === 'o0')).toBeUndefined()
+  })
+})