@devbycrux/editor 0.1.0 → 0.3.0

package/src/video/timeline/Scrubber.tsx

@@ -0,0 +1,184 @@
+import { formatTime, pct, ratioFromClientX } from './utils'
+import { useTimelineContext } from './TimelineContext'
+
+interface ScrubberProps {
+  hoverPct: number | null
+  draggingPlayhead: boolean
+  setDraggingPlayhead: (v: boolean) => void
+  keyNavTime: number | null
+  onSplit?: (at: number) => void
+  onCut?: (cut: { start: number; end: number }) => void
+  cutButtonLabel: string
+}
+
+export default function Scrubber({
+  hoverPct,
+  draggingPlayhead,
+  setDraggingPlayhead,
+  keyNavTime,
+  onSplit,
+  onCut,
+  cutButtonLabel,
+}: ScrubberProps) {
+  const { currentTime, totalDuration, contentDuration, markers, setMarkers, snapBoundaries, onTimeUpdate, scrubberRef, selection } = useTimelineContext()
+
+  function handleScrubClick(e: React.MouseEvent<HTMLDivElement>) {
+    e.stopPropagation()
+    if (totalDuration === 0) return
+    onTimeUpdate(ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration)
+  }
+
+  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
+    })
+  }
+
+  return (
+    <>
+      {/* ── Scrubber ── */}
+      <div
+        ref={scrubberRef}
+        className={`relative h-4 rounded-full bg-gray-200 dark:bg-gray-800 group ${markers[0] !== null && markers[1] === null ? 'cursor-cell' : 'cursor-crosshair'}`}
+        onClick={handleScrubClick}
+        onDoubleClick={handleScrubDoubleClick}
+      >
+        {/* Elapsed fill */}
+        <div
+          className="absolute inset-y-0 left-0 rounded-full bg-gray-400 dark:bg-gray-600 pointer-events-none"
+          style={{ width: `${pct(currentTime, totalDuration)}%` }}
+        />
+
+        {/* Selection range fill (both markers placed) */}
+        {selection && (
+          <div
+            className="absolute inset-y-0 bg-amber-500/25 pointer-events-none"
+            style={{ left: `${pct(selection.start, totalDuration)}%`, width: `${pct(selection.end - selection.start, totalDuration)}%` }}
+          />
+        )}
+
+        {/* Marker A */}
+        {markers[0] !== null && (
+          <div className="absolute top-0 bottom-0 w-px bg-amber-400 pointer-events-none" style={{ left: `${pct(markers[0], totalDuration)}%` }}>
+            <div className="absolute -top-0.5 -translate-x-1/2 w-2 h-2 bg-amber-400 rotate-45" />
+          </div>
+        )}
+
+        {/* Marker B */}
+        {markers[1] !== null && (
+          <div className="absolute top-0 bottom-0 w-px bg-amber-400 pointer-events-none" style={{ left: `${pct(markers[1], totalDuration)}%` }}>
+            <div className="absolute -top-0.5 -translate-x-1/2 w-2 h-2 bg-amber-400 rotate-45" />
+          </div>
+        )}
+
+        {/* Playhead handle */}
+        <div
+          className={`absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full bg-red-500 ring-2 ring-red-500/30 transition-transform group-hover:scale-125 ${draggingPlayhead ? 'cursor-grabbing scale-125' : 'cursor-grab'}`}
+          style={{ left: `${pct(currentTime, totalDuration)}%` }}
+          onMouseDown={(e) => {
+            e.stopPropagation()
+            if (totalDuration === 0) return
+            setDraggingPlayhead(true)
+            const boundaries = snapBoundaries
+            let snappedTo: number | null = null   // which boundary we're currently locked to
+            function onMove(me: MouseEvent) {
+              const rect = scrubberRef.current?.getBoundingClientRect()
+              if (!rect) return
+              const attractPx = 18   // cursor enters this range → snaps in
+              const releasePx = 28   // cursor must leave this range → breaks free
+              const attract = (attractPx / rect.width) * totalDuration
+              const release = (releasePx / rect.width) * totalDuration
+              const rawT = ratioFromClientX(me.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration
+              // Already snapped — hold until cursor escapes release radius
+              if (snappedTo !== null) {
+                if (Math.abs(rawT - snappedTo) < release) { onTimeUpdate(snappedTo); return }
+                snappedTo = null
+              }
+              // Scan for attraction
+              for (const b of boundaries) {
+                if (Math.abs(rawT - b) < attract) { snappedTo = b; onTimeUpdate(b); return }
+              }
+              onTimeUpdate(rawT)
+            }
+            function onUp() {
+              setDraggingPlayhead(false)
+              document.removeEventListener('mousemove', onMove)
+              document.removeEventListener('mouseup', onUp)
+            }
+            document.addEventListener('mousemove', onMove)
+            document.addEventListener('mouseup', onUp)
+          }}
+          onDoubleClick={(e) => {
+            e.stopPropagation()
+            handleScrubDoubleClick(e as React.MouseEvent<HTMLDivElement>)
+          }}
+        >
+          {keyNavTime !== null && (
+            <div className="absolute -top-7 left-1/2 -translate-x-1/2 bg-gray-800 border border-gray-700 text-white text-[10px] font-mono px-1.5 py-0.5 rounded pointer-events-none whitespace-nowrap z-20">
+              {formatTime(keyNavTime)}
+            </div>
+          )}
+        </div>
+
+        {/* Time tooltip */}
+        {hoverPct !== null && totalDuration > 0 && (
+          <div
+            className="absolute -top-7 -translate-x-1/2 bg-gray-800 border border-gray-700 text-white text-[10px] font-mono px-1.5 py-0.5 rounded pointer-events-none whitespace-nowrap z-20"
+            style={{ left: `${hoverPct}%` }}
+          >
+            {formatTime((hoverPct / 100) * totalDuration)}
+          </div>
+        )}
+      </div>
+
+      {/* Time readout + marker / selection range */}
+      <div className="flex items-center justify-between text-[10px] font-mono text-gray-600 -mt-1">
+        <span>{formatTime(currentTime)}</span>
+        {markers[0] !== null && markers[1] === null && (
+          <span className="flex items-center gap-2 text-amber-400/80">
+            {onSplit && (
+              <button
+                className="px-2 py-0.5 rounded bg-amber-500/80 hover:bg-amber-400 text-black text-[10px] font-medium transition-colors"
+                onClick={(e) => { e.stopPropagation(); onSplit(markers[0]!); setMarkers([null, null]) }}
+              >
+                Split
+              </button>
+            )}
+            {formatTime(markers[0])} — double-click to set end
+            <button
+              className="text-gray-600 hover:text-gray-400"
+              onClick={(e) => { e.stopPropagation(); setMarkers([null, null]) }}
+            >✕</button>
+          </span>
+        )}
+        {selection && (
+          <span className="flex items-center gap-2 text-amber-400">
+            <button
+              className="text-gray-600 hover:text-gray-400"
+              onClick={(e) => { e.stopPropagation(); setMarkers([null, null]) }}
+            >✕</button>
+            {formatTime(selection.start)} – {formatTime(selection.end)}
+            {onCut && (
+              <button
+                className="px-2 py-0.5 rounded bg-red-600/80 hover:bg-red-500 text-white text-[10px] font-medium transition-colors"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onCut(selection)
+                  setMarkers([null, null])
+                }}
+              >
+                {cutButtonLabel}
+              </button>
+            )}
+          </span>
+        )}
+        <span>{formatTime(contentDuration)}</span>
+      </div>
+    </>
+  )
+}

package/src/video/timeline/Timeline.tsx

@@ -0,0 +1,375 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import AudioTrackRow from './AudioTrackRow'
+import type { GetWaveformChunks, ResolveFilePath } from './AudioWaveformLayer'
+import type { Project } from '../../types'
+import { collapseGaps } from '../cuts'
+import { ratioFromClientX } from './utils'
+import { useTimelineZoom } from './useTimelineZoom'
+import { TimelineContext, type TimelineContextValue } from './TimelineContext'
+import Scrubber from './Scrubber'
+import TranscriptPanel from './TranscriptPanel'
+import TranscriptModal from './TranscriptModal'
+import VisualTrackRow from './VisualTrackRow'
+import { deleteSelection, toggleSelection } from './multiSelectOps'
+
+interface TimelineProps {
+  project: Project
+  currentTime: number
+  onTimeUpdate: (t: number) => void
+  onProjectChange?: (p: Project) => void
+  onCaptionEdit?: (p: Project) => void
+  onOverlayEdit?: (p: Project) => void
+  /** Unified selection — covers both visual items and audio tracks. */
+  selectedIds?: string[]
+  onSelectIds?: (ids: string[]) => void
+  onSplit?: (at: number) => void
+  onCut?: (cut: { start: number; end: number }) => void
+  onInspectClip?: (id: string) => void
+  onInspectAudio?: (id: string) => void
+  onSaveProject?: (p: Project) => Promise<unknown>
+  rippleMode?: boolean
+  /** Audio-waveform fetcher, threaded to every AudioWaveformLayer. In V4 the
+   *  VideoEditor wires this from `adapter.getWaveformChunks`. Absent → no
+   *  waveforms render (graceful). */
+  getWaveformChunks?: GetWaveformChunks
+  /** Resolves a waveform chunk's host path into a displayable URL. */
+  resolveFilePath?: ResolveFilePath
+  /** Host-computed gate for the per-clip subcut-regenerate affordance (Montaj:
+   *  ai_video projects). The package never reads `projectType`. */
+  regenEnabled?: boolean
+  /** Host-computed predicate driving the per-clip "queued" badge (Montaj:
+   *  project.regenQueue membership). The package never reads `regenQueue`. */
+  isClipQueued?: (itemId: string) => boolean
+  /** Render-prop seam for the Montaj-specific subcut-regeneration tool. The
+   *  timeline owns the open/close trigger (the per-clip Scissors button toggles
+   *  `subcutClipId`); when a clip is active it calls this with the clip id and a
+   *  close callback. The host closure supplies the full Montaj project,
+   *  regenQueue, storyboard, and onSave — none of which the package types know.
+   *  Absent → the subcut tool is simply not rendered. */
+  renderSubcutRegen?: (ctx: { clipId: string; onClose: () => void }) => ReactNode
+}
+
+
+export default function Timeline({ project, currentTime, onTimeUpdate, onProjectChange, onCaptionEdit, onOverlayEdit, selectedIds = [], onSelectIds, onSplit, onCut, onInspectClip, onInspectAudio, rippleMode = false, getWaveformChunks, resolveFilePath, regenEnabled, isClipQueued, renderSubcutRegen }: TimelineProps) {
+  const primarySelectedId = selectedIds[0] ?? null
+
+  // Click/shift-click handler — additive selection on shift or meta (cmd/ctrl).
+  function handleSelectItem(id: string | null, additive: boolean) {
+    if (!onSelectIds) return
+    if (id === null) { onSelectIds([]); return }
+    onSelectIds(toggleSelection(selectedIds, id, additive))
+  }
+  const allTracks      = project.tracks ?? []
+  const captionTrack   = project.captions
+  const audioTracks    = project.audio?.tracks ?? []
+  const snapBoundaries = [...new Set([
+    ...allTracks.flat().flatMap(c => [c.start, c.end]),
+    ...audioTracks.flatMap(t => [t.start, t.end]),
+  ])]
+  const contentDuration = Math.max(
+    allTracks.flat().reduce((m, i) => Math.max(m, i.end ?? 0), 0),
+    audioTracks.reduce((m, t) => Math.max(m, t.end ?? 0), 0),
+  )
+  // Add 20% padding beyond content so the rightmost item can always be
+  // dragged or resized further out. Minimum 5s headroom.
+  const totalDuration  = contentDuration + Math.max(5, contentDuration * 0.2)
+
+  // Auto-crossfade: when two audio tracks overlap, apply fade-out on the earlier
+  // and fade-in on the later, each equal to the overlap duration.
+  useEffect(() => {
+    if (!audioTracks.length || !onProjectChange) return
+    const sorted = [...audioTracks].sort((a, b) => a.start - b.start)
+    let changed = false
+    const updated = sorted.map(t => ({ ...t }))
+
+    // We only auto-set fades where overlap exists
+    for (let i = 0; i < updated.length - 1; i++) {
+      const a = updated[i]
+      const b = updated[i + 1]
+      if (a.end > b.start && !a.muted && !b.muted) {
+        // Overlap detected
+        const overlap = Math.min(a.end - b.start, a.end - a.start, b.end - b.start)
+        if ((a.fadeOut ?? 0) !== overlap) {
+          a.fadeOut = Math.round(overlap * 10) / 10  // round to 0.1s
+          changed = true
+        }
+        if ((b.fadeIn ?? 0) !== overlap) {
+          b.fadeIn = Math.round(overlap * 10) / 10
+          changed = true
+        }
+      }
+    }
+
+    if (changed) {
+      const trackMap = new Map(updated.map(t => [t.id, t]))
+      const nextProject: typeof project = {
+        ...project,
+        audio: {
+          ...project.audio,
+          tracks: (project.audio?.tracks ?? []).map(t => trackMap.get(t.id) ?? t),
+        },
+      }
+      onProjectChange(nextProject)
+    }
+  // Intentionally keyed on a stable digest of audio-track timing/mute rather
+  // than the array identity, so the crossfade pass only re-runs on real edits.
+  }, [audioTracks.map(t => `${t.id}:${t.start}:${t.end}:${t.muted}`).join('|')])
+
+  const [hoverPct, setHoverPct]               = useState<number | null>(null)
+  const [draggingPlayhead, setDraggingPlayhead] = useState(false)
+  const [markers, setMarkers]                 = useState<[number | null, number | null]>([null, null])
+  const [transcriptModalOpen, setTranscriptModalOpen] = useState(false)
+
+  const scrubberRef                           = useRef<HTMLDivElement>(null)
+  const overlayDraggedRef                     = useRef(false)
+  const [keyNavTime, setKeyNavTime]           = useState<number | null>(null)
+  const keyNavTimerRef                        = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const [subcutClipId, setSubcutClipId]       = useState<string | null>(null)
+
+  const { zoom, zoomRef, scrollRef, zoomTo, handleTimelineWheel } = useTimelineZoom(totalDuration)
+
+  useEffect(() => {
+    if (totalDuration === 0) return
+    const fps = project.settings?.fps ?? 30
+    const frame = 1 / fps
+    const onKey = (e: globalThis.KeyboardEvent) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
+      if (e.key === 'Escape') { setMarkers([null, null]); return }
+      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
+      e.preventDefault()
+      const step = e.shiftKey ? 1 : frame
+      const dir  = e.key === 'ArrowRight' ? 1 : -1
+      const next = Math.max(0, Math.min(totalDuration, currentTime + dir * step))
+      onTimeUpdate(next)
+      setKeyNavTime(next)
+      if (keyNavTimerRef.current) clearTimeout(keyNavTimerRef.current)
+      keyNavTimerRef.current = setTimeout(() => setKeyNavTime(null), 1500)
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [totalDuration, currentTime, onTimeUpdate, project.settings?.fps])
+
+  // Derive selection from two placed markers
+  const selection = markers[0] !== null && markers[1] !== null
+    ? { start: Math.min(markers[0], markers[1]), end: Math.max(markers[0], markers[1]) }
+    : null
+
+  const ctx = useMemo<TimelineContextValue>(() => ({
+    totalDuration, contentDuration, snapBoundaries, zoom, zoomRef, scrollRef, scrubberRef,
+    overlayDraggedRef, currentTime, onTimeUpdate, markers, setMarkers, selection,
+  }), [totalDuration, contentDuration, snapBoundaries, zoom, zoomRef, scrollRef, scrubberRef,
+    overlayDraggedRef, currentTime, onTimeUpdate, markers, setMarkers, selection])
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if ((e.target as HTMLElement).isContentEditable) return
+
+    if ((e.key === 'Delete' || e.key === 'Backspace') && selectedIds.length > 0) {
+      e.preventDefault()
+      if (!onProjectChange) return
+      let updated = deleteSelection(project, selectedIds)
+      if (rippleMode) updated = collapseGaps(updated)
+      onProjectChange(updated)
+      onOverlayEdit?.(updated)
+      onSelectIds?.([])
+      return
+    }
+
+    if (e.key !== 'Enter' || totalDuration === 0) return
+    e.preventDefault()
+    setMarkers(([a, b]) => {
+      if (a === null) return [currentTime, null]
+      if (b === null) return [a, currentTime]
+      return [currentTime, null]
+    })
+  }
+
+  function handleContainerClick(e: React.MouseEvent) {
+    if ((e.target as HTMLElement).closest('button, input, [contenteditable]')) return
+    if (totalDuration === 0) return
+    const rect = scrubberRef.current?.getBoundingClientRect()
+    if (!rect) return
+    const clickedTime = ratioFromClientX(e.clientX, rect) * totalDuration
+    const snapThreshold = (8 / rect.width) * totalDuration
+    const boundaries = snapBoundaries
+    for (const b of boundaries) {
+      if (Math.abs(clickedTime - b) < snapThreshold) { onTimeUpdate(b); return }
+    }
+    onTimeUpdate(clickedTime)
+  }
+
+  const cutButtonLabel = primarySelectedId
+    ? `Cut ${allTracks.flat().find(i => i.id === primarySelectedId)?.type ?? 'item'}`
+    : 'Cut primary'
+
+  return (
+    <TimelineContext.Provider value={ctx}>
+    <div
+      className="flex flex-col gap-2 px-3 py-3 select-none outline-none"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+      onMouseMove={(e) => {
+        const rect = scrubberRef.current?.getBoundingClientRect()
+        if (rect) setHoverPct(ratioFromClientX(e.clientX, rect) * 100)
+      }}
+      onMouseLeave={() => setHoverPct(null)}
+      onClick={handleContainerClick}
+    >
+
+      {/* Zoom controls */}
+      {totalDuration > 0 && (
+        <div className="flex items-center justify-end gap-0.5 -mb-1">
+          <button
+            className="text-[11px] leading-none text-gray-500 hover:text-gray-300 w-5 h-5 flex items-center justify-center rounded hover:bg-gray-800 transition-colors"
+            title="Zoom out"
+            onClick={(e) => { e.stopPropagation(); zoomTo(zoomRef.current - 1) }}
+          >−</button>
+          <span className="text-[10px] font-mono text-gray-500 w-7 text-center tabular-nums select-none">{zoom}×</span>
+          <button
+            className="text-[11px] leading-none text-gray-500 hover:text-gray-300 w-5 h-5 flex items-center justify-center rounded hover:bg-gray-800 transition-colors"
+            title="Zoom in"
+            onClick={(e) => { e.stopPropagation(); zoomTo(zoomRef.current + 1) }}
+          >+</button>
+          {zoom > 1 && (
+            <button
+              className="text-[10px] text-gray-500 hover:text-gray-300 px-1.5 h-5 rounded hover:bg-gray-800 transition-colors ml-0.5"
+              title="Fit to view"
+              onClick={(e) => { e.stopPropagation(); zoomTo(1) }}
+            >fit</button>
+          )}
+        </div>
+      )}
+
+      {/* Scroll container for zoomed tracks */}
+      <div ref={scrollRef} className="overflow-x-auto" onWheel={handleTimelineWheel}>
+      <div style={{ width: zoom > 1 ? `${zoom * 100}%` : '100%' }} className="min-w-full">
+
+      {/* Scrubber + tracks wrapped in a relative container so the hover indicator spans the full height */}
+      <div className="relative flex flex-col gap-2">
+        {hoverPct !== null && totalDuration > 0 && (
+          <div
+            className="absolute inset-y-0 w-px bg-yellow-400/80 pointer-events-none z-20"
+            style={{ left: `${hoverPct}%` }}
+          />
+        )}
+
+      <Scrubber
+        hoverPct={hoverPct}
+        draggingPlayhead={draggingPlayhead}
+        setDraggingPlayhead={setDraggingPlayhead}
+        keyNavTime={keyNavTime}
+        onSplit={onSplit}
+        onCut={onCut}
+        cutButtonLabel={cutButtonLabel}
+      />
+
+      {/* ── Tracks ── */}
+      <div className="flex flex-col gap-1">
+        {project.renderMode === 'ffmpeg-drawtext' && (
+          <div className="flex items-center gap-1.5 px-2 py-1 rounded bg-amber-500/10 border border-amber-500/20 text-[10px] text-amber-400/70 select-none">
+            <span>⚡</span>
+            <span>ffmpeg render — overlays are preview only, final text is burned by ffmpeg</span>
+          </div>
+        )}
+        {[...allTracks].reverse().map((trackItems, reversedIdx) => {
+          const trackIdx = allTracks.length - 1 - reversedIdx
+          return (
+            <VisualTrackRow
+              key={trackIdx}
+              trackItems={trackItems}
+              trackIdx={trackIdx}
+              project={project}
+              selectedIds={selectedIds}
+              rippleMode={rippleMode}
+              onProjectChange={onProjectChange}
+              onOverlayEdit={onOverlayEdit}
+              onSelectItem={handleSelectItem}
+              onInspectClip={onInspectClip}
+              subcutClipId={subcutClipId}
+              setSubcutClipId={setSubcutClipId}
+              regenEnabled={regenEnabled}
+              isClipQueued={isClipQueued}
+            />
+          )
+        })}
+
+        {/* Audio tracks — grouped by lane */}
+        {(() => {
+          // Group audio tracks by lane. Tracks without a lane get auto-assigned.
+          const laneMap = new Map<number, typeof audioTracks>()
+          let nextAutoLane = 0
+          for (const t of audioTracks) {
+            if (t.lane != null && t.lane >= nextAutoLane) nextAutoLane = t.lane + 1
+          }
+          for (const t of audioTracks) {
+            const lane = t.lane ?? nextAutoLane++
+            if (!laneMap.has(lane)) laneMap.set(lane, [])
+            laneMap.get(lane)!.push(t)
+          }
+          const lanes = [...laneMap.entries()].sort((a, b) => a[0] - b[0])
+
+          return lanes.map(([laneIdx, laneTracks]) => (
+            <AudioTrackRow
+              key={`audio-lane-${laneIdx}`}
+              tracks={laneTracks}
+              laneIndex={laneIdx}
+              laneCount={lanes.length}
+              project={project}
+              onProjectChange={onProjectChange}
+              onOverlayEdit={onOverlayEdit}
+              selectedIds={selectedIds}
+              onSelectItem={handleSelectItem}
+              onInspect={onInspectAudio}
+              getWaveformChunks={getWaveformChunks}
+              resolveFilePath={resolveFilePath}
+            />
+          ))
+        })()}
+
+      </div>
+
+      </div>{/* end scrubber+tracks wrapper */}
+      </div>{/* end inner zoom div */}
+      </div>{/* end scroll container */}
+
+      {/* ── Subcut regen tool (host-rendered via render-prop seam) ──
+          The Montaj-specific SubcutRegenTool lives in the host (it reads
+          regenQueue/storyboard). The timeline owns only the open trigger:
+          the per-clip Scissors button sets subcutClipId. We surface a clip
+          that still has frozen generation provenance (in-package field) and
+          let the host decide what to render. */}
+      {subcutClipId && renderSubcutRegen && (() => {
+        const subcutClip = allTracks[0]?.find(c => c.id === subcutClipId)
+        if (!subcutClip || !subcutClip.generation) return null
+        return renderSubcutRegen({
+          clipId: subcutClipId,
+          onClose: () => setSubcutClipId(null),
+        })
+      })()}
+
+      {/* ── Transcript editor ── */}
+      <TranscriptPanel
+        project={project}
+        captionTrack={captionTrack}
+        currentTime={currentTime}
+        onCaptionEdit={onCaptionEdit}
+        onProjectChange={onProjectChange}
+        onExpand={() => setTranscriptModalOpen(true)}
+      />
+
+      {/* ── Transcript modal ── */}
+      {transcriptModalOpen && (
+        <TranscriptModal
+          project={project}
+          captionTrack={captionTrack}
+          currentTime={currentTime}
+          onProjectChange={onProjectChange}
+          onCaptionEdit={onCaptionEdit}
+          onClose={() => setTranscriptModalOpen(false)}
+        />
+      )}
+
+    </div>
+    </TimelineContext.Provider>
+  )
+}

package/src/video/timeline/TimelineContext.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react'
+
+export interface TimelineContextValue {
+  totalDuration: number
+  contentDuration: number
+  snapBoundaries: number[]
+  zoom: number
+  zoomRef: React.RefObject<number>
+  scrollRef: React.RefObject<HTMLDivElement | null>
+  scrubberRef: React.RefObject<HTMLDivElement | null>
+  overlayDraggedRef: React.MutableRefObject<boolean>
+  currentTime: number
+  onTimeUpdate: (t: number) => void
+  markers: [number | null, number | null]
+  setMarkers: (m: [number | null, number | null] | ((prev: [number | null, number | null]) => [number | null, number | null])) => void
+  selection: { start: number; end: number } | null
+}
+
+export const TimelineContext = createContext<TimelineContextValue | null>(null)
+
+export function useTimelineContext(): TimelineContextValue {
+  const ctx = useContext(TimelineContext)
+  if (!ctx) throw new Error('useTimelineContext must be used within a TimelineContext.Provider')
+  return ctx
+}

package/src/video/timeline/TranscriptModal.tsx

@@ -0,0 +1,63 @@
+import { useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import type { Project } from '../../types'
+import { formatTime } from './utils'
+import { EditableSegment } from './EditableSegment'
+import { makeCaptionEdit } from './makeCaptionEdit'
+
+interface TranscriptModalProps {
+  captionTrack: Project['captions'] | undefined
+  currentTime: number
+  project: Project
+  onProjectChange?: (project: Project) => void
+  onCaptionEdit?: (project: Project) => void
+  onClose: () => void
+}
+
+export default function TranscriptModal({ captionTrack, currentTime, project, onProjectChange, onCaptionEdit, onClose }: TranscriptModalProps) {
+  useEffect(() => {
+    const onKey = (e: globalThis.KeyboardEvent) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-xl max-h-[70vh] flex flex-col bg-gray-950 border border-gray-800 rounded-lg shadow-2xl mx-4"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-800 shrink-0">
+          <span className="text-sm font-medium text-gray-200">Transcript</span>
+          <button
+            className="text-gray-500 hover:text-white transition-colors text-lg leading-none"
+            onClick={onClose}
+          >×</button>
+        </div>
+
+        {/* Segment list */}
+        <div className="flex-1 overflow-y-auto px-4 py-3 flex flex-col gap-1.5">
+          {(captionTrack?.segments ?? []).map((seg, i) => {
+            const isActive = currentTime >= seg.start && currentTime < seg.end
+            return (
+              <div
+                key={seg.id ?? i}
+                className={`flex gap-3 items-baseline px-2 py-1 rounded transition-colors ${isActive ? 'bg-white/5' : ''}`}
+              >
+                <span className="text-gray-600 text-[10px] font-mono shrink-0 w-12 pt-px">{formatTime(seg.start)}</span>
+                <span className={`text-sm leading-snug ${isActive ? 'text-white' : 'text-gray-300'}`}>
+                  <EditableSegment seg={seg} onEdit={makeCaptionEdit(i, project, onProjectChange, onCaptionEdit)} />
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}