@bycrux/editor 0.11.2 → 1.0.1

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

@@ -0,0 +1,241 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, waitFor, act, fireEvent } from '@testing-library/react'
+import type {
+  AnalyzeAudioPolishArgs,
+  AudioPolishAnalysis,
+  EditorAdapter,
+  ImageElement,
+  Project,
+  RenderEvent,
+  VersionEntry,
+  WaveformChunk,
+} from '../../types'
+import VideoEditor from '../VideoEditor'
+import { trackItems } from '../timeline/timeline-model'
+
+// ── Fake adapter ──────────────────────────────────────────────────────────────
+// Trimmed down from VideoEditor.test.tsx's — this suite only needs the pieces
+// VideoEditor threads unconditionally plus `analyzeAudioPolish`, which each
+// test adds itself so "adapter omits it" is a real absence, not a stubbed-out
+// no-op.
+
+function makeVideoProject(overrides: Partial<Project> = {}): Project {
+  return {
+    id: 'vid-1',
+    name: 'Test Video',
+    status: 'draft',
+    editingPrompt: '',
+    projectType: 'video',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [
+      [
+        {
+          id: 'clip-0',
+          type: 'video',
+          src: 'a.mp4',
+          start: 0,
+          end: 4,
+          inPoint: 0,
+          outPoint: 4,
+        },
+      ],
+    ],
+    audio: { tracks: [] },
+    assets: [],
+    ...overrides,
+  } as Project
+}
+
+interface FakeAdapter extends EditorAdapter<Project> {
+  saveCalls: Array<{ id: string; project: Project }>
+}
+
+function makeFakeAdapter(): FakeAdapter {
+  const saveCalls: Array<{ id: string; project: Project }> = []
+  return {
+    loadProject: vi.fn(async () => makeVideoProject()),
+    saveProject: vi.fn(async (id: string, project: Project) => {
+      saveCalls.push({ id, project })
+    }),
+    subscribe: () => () => {},
+    render: async function* (): AsyncIterable<RenderEvent> {
+      yield { type: 'done', outputPath: '/out.mp4' }
+    },
+    resolveImageSrc: (el: ImageElement) => el.src,
+    compileOverlay: vi.fn(async () => () => null),
+    listGlobalOverlays: vi.fn(async () => []),
+    listSystemOverlays: vi.fn(async () => []),
+    uploadFile: vi.fn(async () => '/path'),
+    fileUrl: (path: string) => path,
+    listVersionHistory: vi.fn(async (): Promise<VersionEntry[]> => []),
+    restoreVersion: vi.fn(async (_id: string, _hash: string) => makeVideoProject()),
+    getWaveformChunks: vi.fn(async (): Promise<WaveformChunk[]> => []),
+    resolveCaptionTemplate: (style: string) => `/caption/${style}`,
+    getInfo: vi.fn(async () => ({ root_skill_path: undefined })),
+    saveCalls,
+  }
+}
+
+/** A loudness-only analyze mock: returns a fixed measurement that yields a
+ *  nonzero, sub-ceiling gain (see audioPolish.ts's loudnessGainDb) so Apply
+ *  produces a real, observable change without needing caption/removal
+ *  fixtures the wiring under test does not care about. */
+function loudnessOnlyAnalyze(): (args: AnalyzeAudioPolishArgs) => Promise<AudioPolishAnalysis> {
+  return async (args) => {
+    if (args.piece !== 'loudness') throw new Error(`unexpected piece requested: ${args.piece}`)
+    return { piece: 'loudness', measuredI: -20, measuredTP: -20, measuredLRA: 5, targetI: -14, gainDb: 6 }
+  }
+}
+
+beforeEach(() => {
+  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  vi.spyOn(console, 'error').mockImplementation(() => {})
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  // jsdom doesn't implement media element playback.
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.play = vi.fn(async () => {}) as never
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.pause = vi.fn(() => {}) as never
+  // jsdom has no Web Audio API; the video player wires per-clip gain through it.
+  ;(globalThis as unknown as { AudioContext: unknown }).AudioContext = class {
+    state = 'running'
+    createGain() { return { gain: { value: 1 }, connect() {}, disconnect() {} } }
+    createMediaElementSource() { return { connect() {}, disconnect() {} } }
+    get destination() { return {} }
+    close() {}
+  }
+})
+afterEach(() => vi.restoreAllMocks())
+
+describe('VideoEditor — audio polish wiring', () => {
+  it('shows neither the toolbar button nor the palette entry when the adapter omits analyzeAudioPolish', async () => {
+    const adapter = makeFakeAdapter() // no analyzeAudioPolish
+    const { queryByRole, findByPlaceholderText, queryByText } = render(
+      <VideoEditor
+        project={makeVideoProject()}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+    await waitFor(() => expect(document.querySelector('video')).not.toBeNull())
+    expect(queryByRole('button', { name: 'Polish audio' })).toBeNull()
+
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))
+    })
+    // Palette open: the filtered command list is present (its search input's
+    // placeholder, not text content — CommandPalette.tsx).
+    await findByPlaceholderText('Type a command…')
+    expect(queryByText('Polish audio…')).toBeNull()
+  })
+
+  it('shows the toolbar button and opens the modal when the adapter provides analyzeAudioPolish', async () => {
+    const adapter = makeFakeAdapter()
+    adapter.analyzeAudioPolish = vi.fn(loudnessOnlyAnalyze())
+    const { findByRole } = render(
+      <VideoEditor
+        project={makeVideoProject()}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+    const button = await findByRole('button', { name: 'Polish audio' })
+    fireEvent.click(button)
+    await findByRole('dialog', { name: 'Polish audio' })
+  })
+
+  // Real useProjectSync — deliberately not mocked. A component test with a
+  // mocked sync could only assert that VideoEditor CALLS mutateTransient/
+  // commit/discardTransient, not that the real undo stack ends up with the
+  // right number of entries; that requires the genuine implementation.
+  it('Apply lands the whole polish as exactly one undo entry', async () => {
+    const adapter = makeFakeAdapter()
+    adapter.analyzeAudioPolish = vi.fn(loudnessOnlyAnalyze())
+    const { findByRole, getByLabelText, getByText, queryByRole } = render(
+      <VideoEditor
+        project={makeVideoProject()}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+
+    fireEvent.click(await findByRole('button', { name: 'Polish audio' }))
+    await findByRole('dialog', { name: 'Polish audio' })
+
+    // Loudness only: unticking silence/fillers keeps this test to the wiring
+    // under test rather than the planner's removal/guard logic, which
+    // AudioPolishModal.test.tsx already covers on its own.
+    fireEvent.click(getByLabelText('Remove silence'))
+    fireEvent.click(getByLabelText('Remove filler words'))
+    fireEvent.click(getByText('Analyse'))
+
+    await waitFor(() => expect(getByText('Apply')).not.toBeDisabled())
+    expect(adapter.analyzeAudioPolish).toHaveBeenCalledTimes(1)
+
+    const savesBeforeApply = adapter.saveCalls.length
+    fireEvent.click(getByText('Apply'))
+    await waitFor(() => expect(queryByRole('dialog', { name: 'Polish audio' })).toBeNull())
+
+    // One commit, one save, and the applied gain actually landed.
+    await waitFor(() => expect(adapter.saveCalls.length).toBe(savesBeforeApply + 1))
+    const applied = adapter.saveCalls[adapter.saveCalls.length - 1].project
+    expect(trackItems(applied)[0][0].volume).toBeGreaterThan(1)
+
+    // ONE undo reverts the whole polish, whatever the number of toggle/
+    // checkbox changes the operator made while reviewing it...
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', metaKey: true }))
+    })
+    await waitFor(() => {
+      const reverted = adapter.saveCalls[adapter.saveCalls.length - 1].project
+      expect(trackItems(reverted)[0][0].volume).toBeUndefined()
+    })
+    const savesAfterUndo = adapter.saveCalls.length
+
+    // ...and a second undo is a no-op: the stack had exactly one entry for
+    // the whole gesture, not one per preview rebuild.
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', metaKey: true }))
+    })
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)) })
+    expect(adapter.saveCalls.length).toBe(savesAfterUndo)
+  })
+
+  it('Cancel produces no undo entry', async () => {
+    const adapter = makeFakeAdapter()
+    adapter.analyzeAudioPolish = vi.fn(loudnessOnlyAnalyze())
+    const { findByRole, getByLabelText, getByText, queryByRole } = render(
+      <VideoEditor
+        project={makeVideoProject()}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+
+    fireEvent.click(await findByRole('button', { name: 'Polish audio' }))
+    await findByRole('dialog', { name: 'Polish audio' })
+    fireEvent.click(getByLabelText('Remove silence'))
+    fireEvent.click(getByLabelText('Remove filler words'))
+    fireEvent.click(getByText('Analyse'))
+    await waitFor(() => expect(getByText('Apply')).not.toBeDisabled())
+
+    const savesBeforeCancel = adapter.saveCalls.length
+    fireEvent.click(getByText('Cancel'))
+    await waitFor(() => expect(queryByRole('dialog', { name: 'Polish audio' })).toBeNull())
+    // No commit — nothing queued for save.
+    expect(adapter.saveCalls.length).toBe(savesBeforeCancel)
+
+    // No undo entry either: Cmd+Z is a no-op.
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', metaKey: true }))
+    })
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)) })
+    expect(adapter.saveCalls.length).toBe(savesBeforeCancel)
+  })
+})

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

@@ -0,0 +1,147 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, waitFor, act, fireEvent } from '@testing-library/react'
+import type { EditorAdapter, Project, RenderEvent, VersionEntry, WaveformChunk } from '../../types'
+import type { ImageElement } from '../../types'
+import VideoEditor from '../VideoEditor'
+
+// ── FIX 2 regression ──────────────────────────────────────────────────────────
+// `handleCaptionSegmentDelete` (VideoEditor.tsx) is the sidebar trash button's
+// commit path. Timeline.tsx's own Delete keymap normalizes caption lanes after
+// an explicit delete (see Timeline.keymap.test.tsx's "Delete collapses and
+// renumbers a caption row it empties"); this handler used to filter the
+// segment out and stop, so deleting the last caption in a row from the
+// SIDEBAR (as opposed to the canvas timeline) persisted a sparse/hole lane to
+// disk — two affordances for the same delete, two different outcomes. This
+// mounts the real editor (not a mocked Timeline: the sidebar delete button
+// doesn't route through Timeline at all) and drives the actual trash button.
+//
+// IMPORTANT: VideoEditor's own general-purpose lane-normalization effect
+// (mount/SSE/regen/etc, keyed on `sync.project.captions`) ALSO catches and
+// closes a hole lane shortly after ANY caption change that isn't a caption
+// drag gesture — via `sync.applyExternal`. So asserting on the LAST
+// `onProjectChange` call (client-side state) passes with or without this fix
+// and proves nothing: `applyExternal` never calls `adapter.saveProject`, only
+// `sync.mutate`/`commit`/`undo`/`redo` do. The actual bug is what gets
+// PERSISTED — what a reload or another client would see — which is exactly
+// what `handleCaptionSegmentDelete`'s own `syncMutate` call hands to the
+// adapter. So this test asserts on the adapter's `saveProject` payload.
+// (Verified against a scratchpad revert: without the fix, asserting on
+// `onProjectChange` alone passes regardless of the fix — asserting on the
+// saved payload correctly fails without it, with cap-2 stuck at lane 2.)
+
+function makeVideoProject(overrides: Partial<Project> = {}): Project {
+  return {
+    id: 'vid-1',
+    name: 'Test Video',
+    status: 'draft',
+    editingPrompt: '',
+    projectType: 'video',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [
+      [{ id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 4, inPoint: 0, outPoint: 4 }],
+    ],
+    audio: { tracks: [] },
+    assets: [],
+    ...overrides,
+  } as Project
+}
+
+interface FakeAdapter extends EditorAdapter<Project> {
+  saveCalls: Array<{ id: string; project: Project }>
+}
+
+function makeFakeAdapter(): FakeAdapter {
+  let subscribers: Array<(project: Project) => void> = []
+  const saveCalls: Array<{ id: string; project: Project }> = []
+  return {
+    loadProject: vi.fn(async () => makeVideoProject()),
+    saveProject: vi.fn(async (id: string, project: Project) => { saveCalls.push({ id, project }) }),
+    subscribe: (_id: string, onFrame: (project: Project) => void) => {
+      subscribers.push(onFrame)
+      return () => { subscribers = subscribers.filter((s) => s !== onFrame) }
+    },
+    render: async function* (): AsyncIterable<RenderEvent> {
+      yield { type: 'done', outputPath: '/out.mp4' }
+    },
+    resolveImageSrc: (el: ImageElement) => el.src,
+    compileOverlay: vi.fn(async () => () => null),
+    listGlobalOverlays: vi.fn(async () => []),
+    listSystemOverlays: vi.fn(async () => []),
+    uploadFile: vi.fn(async () => '/path'),
+    fileUrl: (path: string) => path,
+    listVersionHistory: vi.fn(async (): Promise<VersionEntry[]> => []),
+    restoreVersion: vi.fn(async () => makeVideoProject()),
+    getWaveformChunks: vi.fn(async (): Promise<WaveformChunk[]> => []),
+    resolveCaptionTemplate: (style: string) => `/caption/${style}`,
+    getInfo: vi.fn(async () => ({ root_skill_path: undefined })),
+    saveCalls,
+  } as unknown as FakeAdapter
+}
+
+beforeEach(() => {
+  // The caption panel now splits into Style / Captions sub-tabs defaulting to
+  // Style; this test deletes from the transcript list, so pin the sub-tab to
+  // 'captions' (usePersistentState reads this at mount).
+  window.localStorage.setItem('montaj.editor.captionPanelTab', JSON.stringify('captions'))
+  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  vi.spyOn(console, 'error').mockImplementation(() => {})
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.play = vi.fn(async () => {}) as never
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.pause = vi.fn(() => {}) as never
+  ;(globalThis as unknown as { AudioContext: unknown }).AudioContext = class {
+    state = 'running'
+    createGain() { return { gain: { value: 1 }, connect() {}, disconnect() {} } }
+    createMediaElementSource() { return { connect() {}, disconnect() {} } }
+    get destination() { return {} }
+    close() {}
+  }
+})
+afterEach(() => vi.restoreAllMocks())
+
+describe('VideoEditor — sidebar caption delete densifies lanes (FIX 2)', () => {
+  it('removing the only caption in a row from the sidebar trash button PERSISTS a collapsed, dense row', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeVideoProject({
+      captions: {
+        style: 'clean',
+        segments: [
+          { id: 'cap-0', text: 'ground', start: 0, end: 1, words: [{ word: 'ground', start: 0, end: 1 }] },
+          { id: 'cap-1', text: 'middle', start: 1, end: 2, lane: 1, words: [{ word: 'middle', start: 1, end: 2 }] },
+          { id: 'cap-2', text: 'top', start: 2, end: 3, lane: 2, words: [{ word: 'top', start: 2, end: 3 }] },
+        ],
+      },
+    } as Partial<Project>)
+    const { getByText } = render(
+      <VideoEditor project={initial} adapter={adapter} onProjectChange={vi.fn()} />,
+    )
+
+    // Locate the sole row-1 segment's own delete button — not by array index
+    // (row order in the sidebar isn't the point under test here), by scoping
+    // to its listitem.
+    const middleRow = (await waitFor(() => getByText('middle'))).closest('[role="listitem"]') as HTMLElement
+    const deleteBtn = middleRow.querySelector('button[aria-label="Delete caption"]') as HTMLButtonElement
+    expect(deleteBtn).toBeTruthy()
+
+    await act(async () => { fireEvent.click(deleteBtn) })
+
+    await waitFor(() => expect(adapter.saveCalls.length).toBeGreaterThan(0))
+    // Give any redundant client-side patch-up effect a chance to also fire a
+    // second save — there shouldn't be one; applyExternal never saves.
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)) })
+
+    const saved = adapter.saveCalls[0].project
+    const segs = saved.captions?.segments ?? []
+    expect(segs.map((s) => s.id)).toEqual(['cap-0', 'cap-2'])
+    // cap-2 was on row 2 with the hole below it (row 1, just emptied) — it
+    // drops into the vacated row instead of leaving row 1 sparse. This is the
+    // assertion that fails without the fix (cap-2 stuck at lane 2).
+    expect(segs.map((s) => s.lane ?? 0)).toEqual([0, 1])
+    // Exactly one save for the whole delete — densifying didn't cost a
+    // second commit.
+    expect(adapter.saveCalls.length).toBe(1)
+  })
+})

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

@@ -0,0 +1,170 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, waitFor, act } from '@testing-library/react'
+import type { EditorAdapter, Project, RenderEvent, VersionEntry, WaveformChunk } from '../../types'
+import type { ImageElement } from '../../types'
+import VideoEditor from '../VideoEditor'
+
+// ── Timeline stand-in ────────────────────────────────────────────────────────
+// A cross-row caption drag is driven entirely by the canvas pointer machine
+// (pointer-machine.ts — owned elsewhere and not exercised here) calling
+// Timeline's `onProjectChange` prop once per mousemove and `onOverlayEdit` on
+// release. The bug this regresses, and its fix, live entirely in
+// VideoEditor.tsx's own wiring around those two callbacks (captionGestureRef +
+// the lane-normalization effect just above it) — not in the pointer machine
+// itself. So instead of reproducing real canvas hit-testing in jsdom, this
+// test replaces Timeline with a stand-in that just captures those two props,
+// and drives them directly with hand-built projects that represent exactly
+// what a real drag's mid-gesture frame and end-of-gesture commit look like.
+let latestOnProjectChange: ((p: Project) => void) | undefined
+let latestOnOverlayEdit: ((p: Project) => void) | undefined
+vi.mock('../timeline/Timeline', () => ({
+  default: (props: { onProjectChange?: (p: Project) => void; onOverlayEdit?: (p: Project) => void }) => {
+    latestOnProjectChange = props.onProjectChange
+    latestOnOverlayEdit = props.onOverlayEdit
+    return null
+  },
+}))
+
+function makeVideoProject(overrides: Partial<Project> = {}): Project {
+  return {
+    id: 'vid-1',
+    name: 'Test Video',
+    status: 'draft',
+    editingPrompt: '',
+    projectType: 'video',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [
+      [{ id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 4, inPoint: 0, outPoint: 4 }],
+    ],
+    audio: { tracks: [] },
+    assets: [],
+    ...overrides,
+  } as Project
+}
+
+function makeFakeAdapter(): EditorAdapter<Project> {
+  let subscribers: Array<(project: Project) => void> = []
+  return {
+    loadProject: vi.fn(async () => makeVideoProject()),
+    saveProject: vi.fn(async () => {}),
+    subscribe: (_id: string, onFrame: (project: Project) => void) => {
+      subscribers.push(onFrame)
+      return () => { subscribers = subscribers.filter((s) => s !== onFrame) }
+    },
+    render: async function* (): AsyncIterable<RenderEvent> {
+      yield { type: 'done', outputPath: '/out.mp4' }
+    },
+    resolveImageSrc: (el: ImageElement) => el.src,
+    compileOverlay: vi.fn(async () => () => null),
+    listGlobalOverlays: vi.fn(async () => []),
+    listSystemOverlays: vi.fn(async () => []),
+    uploadFile: vi.fn(async () => '/path'),
+    fileUrl: (path: string) => path,
+    listVersionHistory: vi.fn(async (): Promise<VersionEntry[]> => []),
+    restoreVersion: vi.fn(async () => makeVideoProject()),
+    getWaveformChunks: vi.fn(async (): Promise<WaveformChunk[]> => []),
+    resolveCaptionTemplate: (style: string) => `/caption/${style}`,
+    getInfo: vi.fn(async () => ({ root_skill_path: undefined })),
+  } as unknown as EditorAdapter<Project>
+}
+
+beforeEach(() => {
+  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  vi.spyOn(console, 'error').mockImplementation(() => {})
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.play = vi.fn(async () => {}) as never
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.pause = vi.fn(() => {}) as never
+  ;(globalThis as unknown as { AudioContext: unknown }).AudioContext = class {
+    state = 'running'
+    createGain() { return { gain: { value: 1 }, connect() {}, disconnect() {} } }
+    createMediaElementSource() { return { connect() {}, disconnect() {} } }
+    get destination() { return {} }
+    close() {}
+  }
+  latestOnProjectChange = undefined
+  latestOnOverlayEdit = undefined
+})
+afterEach(() => vi.restoreAllMocks())
+
+// Three dense rows, one caption each — the PRE-drag state undo must restore.
+const preDragCaptions = {
+  style: 'clean',
+  segments: [
+    { id: 's0', text: 'zero', start: 0, end: 1, lane: 0, words: [{ word: 'zero', start: 0, end: 1 }] },
+    { id: 's1', text: 'one', start: 1, end: 2, lane: 1, words: [{ word: 'one', start: 1, end: 2 }] },
+    { id: 's2', text: 'two', start: 2, end: 3, lane: 2, words: [{ word: 'two', start: 2, end: 3 }] },
+  ],
+}
+
+describe('VideoEditor — cross-row caption drag preserves its undo entry (FIX 1)', () => {
+  it('a mid-gesture frame that opens a hole lane does not corrupt the commit, and undo restores the pre-drag lanes', async () => {
+    const adapter = makeFakeAdapter()
+    const onProjectChange = vi.fn()
+    const initial = makeVideoProject({ captions: preDragCaptions } as Partial<Project>)
+    const { getByLabelText } = render(
+      <VideoEditor project={initial} adapter={adapter} onProjectChange={onProjectChange} />,
+    )
+
+    await waitFor(() => expect(latestOnProjectChange).toBeTypeOf('function'))
+    await waitFor(() => expect(latestOnOverlayEdit).toBeTypeOf('function'))
+
+    // Nothing to undo before the gesture starts.
+    expect((getByLabelText('Undo') as HTMLButtonElement).disabled).toBe(true)
+
+    // Mid-drag frame: s1 dragged from row 1 up onto row 0. Row 1 is now a
+    // HOLE (no segments) while row 2 (s2) is left untouched — exactly what
+    // pointer-machine.ts deliberately leaves un-normalized for the length of
+    // the gesture, so the vacated row stays open as a drop target and the
+    // timeline doesn't jump under the pointer.
+    const midDragProject = {
+      ...initial,
+      captions: {
+        ...preDragCaptions,
+        segments: [
+          { ...preDragCaptions.segments[0] },
+          { ...preDragCaptions.segments[1], lane: 0 },
+          { ...preDragCaptions.segments[2] },
+        ],
+      },
+    } as Project
+    await act(async () => { latestOnProjectChange!(midDragProject) })
+
+    // Gesture ends: the canvas pointer machine's own commit already closed
+    // the hole (row 2 renumbers to row 1). VideoEditor folds in
+    // auto-crossfade (a no-op here) and commits.
+    const committedProject = {
+      ...initial,
+      captions: {
+        ...preDragCaptions,
+        segments: [
+          { ...preDragCaptions.segments[0] },
+          { ...preDragCaptions.segments[1], lane: 0 },
+          { ...preDragCaptions.segments[2], lane: 1 },
+        ],
+      },
+    } as Project
+    await act(async () => { latestOnOverlayEdit!(committedProject) })
+
+    // The gesture produced exactly one undo entry.
+    await waitFor(() => expect((getByLabelText('Undo') as HTMLButtonElement).disabled).toBe(false))
+
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', metaKey: true }))
+    })
+
+    // Undo must land on the PRE-drag arrangement (s0:0, s1:1, s2:2) — not the
+    // mid-drag state, and not the committed state.
+    await waitFor(() => {
+      const last = onProjectChange.mock.calls[onProjectChange.mock.calls.length - 1][0] as Project
+      expect(last.captions?.segments.map((s) => [s.id, s.lane])).toEqual([
+        ['s0', 0],
+        ['s1', 1],
+        ['s2', 2],
+      ])
+    })
+  })
+})