@devbycrux/editor 0.1.0 → 0.3.0

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

@@ -0,0 +1,213 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, waitFor } from '@testing-library/react'
+import type {
+  EditorAdapter,
+  ImageElement,
+  Project,
+  RenderEvent,
+  VersionEntry,
+  WaveformChunk,
+} from '../../types'
+import VideoEditor from '../VideoEditor'
+
+// ── Fake adapter ──────────────────────────────────────────────────────────────
+// Full EditorAdapter with the video-editor capabilities VideoEditor threads:
+// listVersionHistory / restoreVersion / getWaveformChunks / compileOverlay /
+// fileUrl / resolveCaptionTemplate. No host (`@/`) modules are mocked — the
+// package owns the assembled editor.
+
+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,
+  }
+}
+
+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 — editor-package integration', () => {
+  it('renders the timeline and preview for a draft project', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeVideoProject()
+    const { container } = render(
+      <VideoEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ pendingStatus: <div data-testid="pending" />, exportActions: <div data-testid="export" /> }}
+      />,
+    )
+
+    // Timeline: the zoom control reads "1×" once totalDuration > 0.
+    await waitFor(() => {
+      expect(container.textContent).toContain('×')
+    })
+    // Preview: the video player mounts <video> elements for the clips.
+    await waitFor(() => {
+      expect(container.querySelector('video')).not.toBeNull()
+    })
+  })
+
+  it('shows the host pendingStatus slot for a pending project', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeVideoProject({ status: 'pending', tracks: [[]] })
+    const { getByTestId } = render(
+      <VideoEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ pendingStatus: <div data-testid="pending" />, exportActions: <div data-testid="export" /> }}
+      />,
+    )
+    await waitFor(() => getByTestId('pending'))
+  })
+
+  it('queries version history via adapter.listVersionHistory', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeVideoProject()
+    render(
+      <VideoEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ pendingStatus: <div data-testid="pending" />, exportActions: <div data-testid="export" /> }}
+      />,
+    )
+    await waitFor(() => {
+      expect(adapter.listVersionHistory).toHaveBeenCalledWith('vid-1')
+    })
+  })
+
+  it('invokes onBackToSetup affordance only when the host supplies it', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeVideoProject({ status: 'pending', tracks: [[]] })
+    const onBackToSetup = vi.fn()
+    const { findByText } = render(
+      <VideoEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        onBackToSetup={onBackToSetup}
+      />,
+    )
+    const back = await findByText(/Back to setup/i)
+    back.click()
+    expect(onBackToSetup).toHaveBeenCalledTimes(1)
+  })
+
+  it('Render button flips project status to final and persists before opening modal', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeVideoProject({ status: 'draft' })
+    const onProjectChange = vi.fn()
+    const { findByText } = render(
+      <VideoEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={onProjectChange}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+
+    const renderBtn = await findByText('Render →')
+    renderBtn.click()
+
+    // onProjectChange should have been called with status: 'final'
+    expect(onProjectChange).toHaveBeenCalledWith(
+      expect.objectContaining({ status: 'final' }),
+    )
+    // saveProject should have been called with status: 'final'
+    await waitFor(() => {
+      expect(adapter.saveProject).toHaveBeenCalledWith(
+        'vid-1',
+        expect.objectContaining({ status: 'final' }),
+      )
+    })
+  })
+
+  it('shows the skill-path card on the pending surface when getInfo returns a path', async () => {
+    const adapter = makeFakeAdapter()
+    adapter.getInfo = vi.fn(async () => ({ root_skill_path: 'skills/video-skill.md' }))
+    const initial = makeVideoProject({ status: 'pending', tracks: [[]] })
+    const { findByText } = render(
+      <VideoEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        // no pendingStatus slot → should show default card
+      />,
+    )
+
+    // The card header should appear
+    await findByText(/Send this to your agent/i)
+    // The copy-able prompt text should include the skill path
+    await findByText(/skills\/video-skill\.md/i)
+  })
+})

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

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest'
+import { repairCaptionWords } from '../captionRepair'
+import type { Captions, CaptionSegment } from '../../schema'
+
+function makeCaptions(segments: CaptionSegment[]): Captions {
+  return { style: 'word-by-word', segments }
+}
+
+describe('repairCaptionWords', () => {
+  it('returns null when all segments are already consistent', () => {
+    const captions = makeCaptions([
+      {
+        id: 's1',
+        text: 'hello world',
+        start: 0,
+        end: 2,
+        words: [
+          { word: 'hello', start: 0, end: 1 },
+          { word: 'world', start: 1, end: 2 },
+        ],
+      },
+    ])
+    expect(repairCaptionWords(captions)).toBeNull()
+  })
+
+  it('returns null on case-insensitive match', () => {
+    const captions = makeCaptions([
+      {
+        id: 's1',
+        text: 'Hello World',
+        start: 0,
+        end: 2,
+        words: [
+          { word: 'hello', start: 0, end: 1 },
+          { word: 'world', start: 1, end: 2 },
+        ],
+      },
+    ])
+    // words text "hello world" vs seg.text "Hello World" — case-insensitive match → no repair
+    expect(repairCaptionWords(captions)).toBeNull()
+  })
+
+  it('repairs a segment whose words text diverged from edited text', () => {
+    const captions = makeCaptions([
+      {
+        id: 's1',
+        text: 'new edited text',   // edited inline
+        start: 0,
+        end: 3,
+        words: [
+          { word: 'old', start: 0, end: 1 },
+          { word: 'stale', start: 1, end: 2 },
+          { word: 'words', start: 2, end: 3 },
+        ],
+      },
+    ])
+    const result = repairCaptionWords(captions)
+    expect(result).not.toBeNull()
+    const seg = result!.segments[0]
+    expect(seg.words).toHaveLength(3)
+    expect(seg.words![0].word).toBe('new')
+    expect(seg.words![1].word).toBe('edited')
+    expect(seg.words![2].word).toBe('text')
+    // Uniform timing across [0, 3] — each word gets 1s
+    expect(seg.words![0].start).toBeCloseTo(0)
+    expect(seg.words![0].end).toBeCloseTo(1)
+    expect(seg.words![1].start).toBeCloseTo(1)
+    expect(seg.words![2].end).toBeCloseTo(3)
+  })
+
+  it('handles a segment with no words array (missing)', () => {
+    const captions = makeCaptions([
+      {
+        id: 's2',
+        text: 'only text',
+        start: 1,
+        end: 3,
+        // words absent
+      },
+    ])
+    const result = repairCaptionWords(captions)
+    expect(result).not.toBeNull()
+    const seg = result!.segments[0]
+    expect(seg.words).toHaveLength(2)
+    expect(seg.words![0].word).toBe('only')
+    expect(seg.words![1].word).toBe('text')
+  })
+
+  it('only repairs diverged segments, preserving consistent ones', () => {
+    const captions = makeCaptions([
+      {
+        id: 's1',
+        text: 'unchanged',
+        start: 0,
+        end: 1,
+        words: [{ word: 'unchanged', start: 0, end: 1 }],
+      },
+      {
+        id: 's2',
+        text: 'new words here',
+        start: 1,
+        end: 4,
+        words: [{ word: 'old', start: 1, end: 2 }],
+      },
+    ])
+    const result = repairCaptionWords(captions)
+    expect(result).not.toBeNull()
+    // s1 preserved by reference
+    expect(result!.segments[0]).toBe(captions.segments[0])
+    // s2 repaired
+    expect(result!.segments[1].words).toHaveLength(3)
+  })
+
+  it('returns null for empty segments array', () => {
+    const captions = makeCaptions([])
+    // no segments → nothing changed
+    expect(repairCaptionWords(captions)).toBeNull()
+  })
+
+  it('handles a single-word segment with correct timing', () => {
+    const captions = makeCaptions([
+      {
+        id: 's3',
+        text: 'hello',
+        start: 5,
+        end: 7,
+        words: [{ word: 'goodbye', start: 5, end: 7 }],
+      },
+    ])
+    const result = repairCaptionWords(captions)
+    expect(result).not.toBeNull()
+    expect(result!.segments[0].words![0]).toEqual({ word: 'hello', start: 5, end: 7 })
+  })
+})

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

@@ -0,0 +1,198 @@
+import { describe, it, expect } from 'vitest'
+import {
+  applyCutToTracks,
+  applyCutToItem,
+  collapseGaps,
+  splitAtTime,
+} from '../cuts'
+import type { EditorProject as Project } from '../../schema'
+
+// Minimal project factory — only the fields the cut engine touches.
+function makeProject(over: Partial<Project> = {}): Project {
+  return {
+    id: 'p1',
+    status: 'draft',
+    settings: { resolution: [1080, 1920] },
+    tracks: [[]],
+    ...over,
+  }
+}
+
+describe('applyCutToTracks (lift)', () => {
+  it('returns the project unchanged for a zero/negative-length cut', () => {
+    const p = makeProject({ tracks: [[{ id: 'a', type: 'video', start: 0, end: 10 }]] })
+    expect(applyCutToTracks(p, { start: 5, end: 5 })).toBe(p)
+    expect(applyCutToTracks(p, { start: 6, end: 3 })).toBe(p)
+  })
+
+  it('deletes a clip fully inside the cut and leaves later clips in place (no shift)', () => {
+    const p = makeProject({
+      tracks: [[
+        { id: 'a', type: 'video', start: 0, end: 5 },
+        { id: 'b', type: 'video', start: 5, end: 10 },
+      ]],
+    })
+    const out = applyCutToTracks(p, { start: 5, end: 10 })
+    const primary = out.tracks![0]
+    expect(primary.map(c => c.id)).toEqual(['a'])
+    expect(primary[0]).toMatchObject({ start: 0, end: 5 })
+  })
+
+  it('trims a clip overlapping the left edge of the cut', () => {
+    const p = makeProject({
+      tracks: [[{ id: 'a', type: 'video', start: 0, end: 10, inPoint: 0, outPoint: 10 }]],
+    })
+    const out = applyCutToTracks(p, { start: 6, end: 12 })
+    expect(out.tracks![0][0]).toMatchObject({ id: 'a', end: 6, outPoint: 6 })
+  })
+
+  it('splits a clip the cut spans into two fragments (lift positions)', () => {
+    const p = makeProject({
+      tracks: [[{ id: 'a', type: 'video', start: 0, end: 10, inPoint: 0, outPoint: 10 }]],
+    })
+    const out = applyCutToTracks(p, { start: 3, end: 7 })
+    const primary = out.tracks![0]
+    expect(primary).toHaveLength(2)
+    expect(primary[0]).toMatchObject({ id: 'a', start: 0, end: 3 })
+    expect(primary[1].start).toBe(7) // right fragment stays at original timeline pos
+    expect(primary[1].inPoint).toBe(7)
+  })
+
+  it('shifts captions after the cut by the cut duration', () => {
+    const p = makeProject({
+      tracks: [[{ id: 'a', type: 'video', start: 0, end: 10 }]],
+      captions: {
+        style: 'subtitle',
+        segments: [
+          { text: 'before', start: 0, end: 2 },
+          { text: 'after', start: 8, end: 10 },
+        ],
+      },
+    })
+    const out = applyCutToTracks(p, { start: 3, end: 5 })
+    const segs = out.captions!.segments
+    expect(segs.find(s => s.text === 'before')).toMatchObject({ start: 0, end: 2 })
+    expect(segs.find(s => s.text === 'after')).toMatchObject({ start: 6, end: 8 })
+  })
+
+  it('leaves overlay tracks (tracks[1+]) untouched', () => {
+    const overlay = { id: 'o', type: 'overlay' as const, start: 4, end: 6 }
+    const p = makeProject({
+      tracks: [
+        [{ id: 'a', type: 'video', start: 0, end: 10 }],
+        [overlay],
+      ],
+    })
+    const out = applyCutToTracks(p, { start: 3, end: 7 })
+    expect(out.tracks![1][0]).toEqual(overlay)
+  })
+})
+
+describe('collapseGaps', () => {
+  it('returns the same reference when there are fewer than 2 clips', () => {
+    const p = makeProject({ tracks: [[{ id: 'a', type: 'video', start: 5, end: 10 }]] })
+    expect(collapseGaps(p)).toBe(p)
+  })
+
+  it('returns the same reference when there are no gaps', () => {
+    const p = makeProject({
+      tracks: [[
+        { id: 'a', type: 'video', start: 0, end: 5 },
+        { id: 'b', type: 'video', start: 5, end: 10 },
+      ]],
+    })
+    expect(collapseGaps(p)).toBe(p)
+  })
+
+  it('shifts clips left to close gaps and remaps captions', () => {
+    const p = makeProject({
+      tracks: [[
+        { id: 'a', type: 'video', start: 0, end: 5 },
+        { id: 'b', type: 'video', start: 8, end: 12 },
+      ]],
+      captions: {
+        style: 'subtitle',
+        segments: [{ text: 'b-cap', start: 9, end: 11, words: [{ word: 'x', start: 9, end: 11 }] }],
+      },
+    })
+    const out = collapseGaps(p)
+    const primary = out.tracks![0]
+    expect(primary[0]).toMatchObject({ id: 'a', start: 0, end: 5 })
+    expect(primary[1]).toMatchObject({ id: 'b', start: 5, end: 9 }) // shifted left by 3
+    const cap = out.captions!.segments[0]
+    expect(cap).toMatchObject({ start: 6, end: 8 })
+    expect(cap.words![0]).toMatchObject({ start: 6, end: 8 })
+  })
+})
+
+describe('applyCutToItem (collapse, single item)', () => {
+  it('returns the project unchanged when itemId is not found', () => {
+    const p = makeProject({ tracks: [[{ id: 'a', type: 'video', start: 0, end: 10 }]] })
+    expect(applyCutToItem(p, 'nope', { start: 2, end: 4 })).toBe(p)
+  })
+
+  it('collapses a middle cut within a single primary clip (right fragment butts left)', () => {
+    const p = makeProject({
+      tracks: [[{ id: 'a', type: 'video', start: 0, end: 10, inPoint: 0, outPoint: 10 }]],
+    })
+    const out = applyCutToItem(p, 'a', { start: 3, end: 7 })
+    const primary = out.tracks![0]
+    expect(primary).toHaveLength(2)
+    expect(primary[0]).toMatchObject({ start: 0, end: 3, outPoint: 3 })
+    // right fragment collapses: starts at cut.start (3), duration = remaining 3s
+    expect(primary[1]).toMatchObject({ start: 3, end: 6, inPoint: 7 })
+  })
+
+  it('clamps the cut to the item bounds', () => {
+    const p = makeProject({
+      tracks: [[{ id: 'a', type: 'video', start: 2, end: 8, inPoint: 0, outPoint: 6 }]],
+    })
+    const out = applyCutToItem(p, 'a', { start: 0, end: 4 })
+    const primary = out.tracks![0]
+    // cut clamped to [2,4]; left fragment removed (nothing before 2), right collapses to start 2
+    expect(primary[0]).toMatchObject({ start: 2 })
+  })
+})
+
+describe('splitAtTime', () => {
+  it('returns the same reference when nothing contains the playhead', () => {
+    const p = makeProject({ tracks: [[{ id: 'a', type: 'video', start: 0, end: 5 }]] })
+    expect(splitAtTime(p, 8, null)).toBe(p)
+  })
+
+  it('splits every clip containing `at` when itemId is null', () => {
+    const p = makeProject({
+      tracks: [[{ id: 'a', type: 'video', start: 0, end: 10, inPoint: 0, outPoint: 10 }]],
+    })
+    const out = splitAtTime(p, 4, null)
+    const primary = out.tracks![0]
+    expect(primary).toHaveLength(2)
+    expect(primary[0]).toMatchObject({ start: 0, end: 4 })
+    expect(primary[1]).toMatchObject({ start: 4 })
+  })
+
+  it('splits only the named item when itemId is given', () => {
+    const p = makeProject({
+      tracks: [[
+        { id: 'a', type: 'video', start: 0, end: 10 },
+        { id: 'b', type: 'video', start: 0, end: 10 },
+      ]],
+    })
+    const out = splitAtTime(p, 5, 'a')
+    // 'a' split into 2 fragments (original id + split id); 'b' untouched.
+    expect(out.tracks![0].filter(c => c.id.startsWith('a'))).toHaveLength(2)
+    expect(out.tracks![0].filter(c => c.id === 'b')).toHaveLength(1)
+    expect(out.tracks![0]).toHaveLength(3)
+  })
+
+  it('splits audio tracks containing `at`', () => {
+    const p = makeProject({
+      tracks: [[]],
+      audio: { tracks: [{ id: 'au', src: 'a.mp3', start: 0, end: 10, inPoint: 0 }] },
+    })
+    const out = splitAtTime(p, 4, null)
+    expect(out.audio!.tracks).toHaveLength(2)
+    expect(out.audio!.tracks[0]).toMatchObject({ end: 4, outPoint: 4 })
+    expect(out.audio!.tracks[1]).toMatchObject({ start: 4, inPoint: 4 })
+  })
+})

package/src/video/captionRepair.ts

@@ -0,0 +1,41 @@
+/**
+ * repairCaptionWords — pure caption-data normalizer.
+ *
+ * When a caption segment's text has been edited inline, `seg.words[]` may lag
+ * behind and hold stale word text (or be missing entirely). This function walks
+ * every segment and, whenever the words[] text diverges from `seg.text`,
+ * regenerates words with uniform timing across [seg.start, seg.end].
+ *
+ * Returns the repaired `Captions` object when at least one segment was changed,
+ * or `null` when the data was already consistent (so callers can skip the
+ * downstream save/notify).
+ */
+import type { Captions, CaptionSegment } from '../schema'
+
+function repairSegment(seg: CaptionSegment): CaptionSegment {
+  const wordsText = (seg.words ?? []).map(w => w.word).join(' ')
+  if (wordsText.trim().toLowerCase() === seg.text.trim().toLowerCase()) return seg
+
+  const newWords = seg.text.split(/\s+/).filter(Boolean)
+  const segDur = seg.end - seg.start
+  const wordDur = segDur / (newWords.length || 1)
+  return {
+    ...seg,
+    words: newWords.map((w, i) => ({
+      word: w,
+      start: seg.start + i * wordDur,
+      end: seg.start + (i + 1) * wordDur,
+    })),
+  }
+}
+
+export function repairCaptionWords(captions: Captions): Captions | null {
+  let changed = false
+  const repairedSegments = captions.segments.map(seg => {
+    const repaired = repairSegment(seg)
+    if (repaired !== seg) changed = true
+    return repaired
+  })
+  if (!changed) return null
+  return { ...captions, segments: repairedSegments }
+}