@bycrux/editor 0.8.9 → 0.10.0

package/src/video/preview/overlay-prop-fields.ts

@@ -0,0 +1,39 @@
+export type PropFieldKind = 'text' | 'number' | 'boolean' | 'color' | 'image'
+
+export interface PropField {
+  name: string
+  kind: PropFieldKind
+  value: string | number | boolean
+}
+
+const HEX_COLOR = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i
+// A string prop that points at an image: a workspace/URL path ending in a known
+// image extension (optionally with a query/hash), or a data: image URL. These
+// render as a thumbnail + file picker instead of a raw path text field.
+const IMAGE_PATH = /\.(?:png|jpe?g|webp|gif|svg|avif|bmp)(?:[?#].*)?$/i
+
+function stringKind(value: string): PropFieldKind {
+  if (HEX_COLOR.test(value)) return 'color'
+  if (IMAGE_PATH.test(value) || value.startsWith('data:image/')) return 'image'
+  return 'text'
+}
+
+/**
+ * Editable fields for an overlay item, inferred from its stored props.
+ * Primitive values only — objects, arrays, functions, null are skipped
+ * (they stay untouched in the props object on save). No schema needed,
+ * so AI-written profile overlays work the same as shipped templates.
+ *
+ * String values are sub-typed by shape: `#hex` → color picker, an image path
+ * → thumbnail + file picker, everything else → text.
+ */
+export function inferOverlayPropFields(props: Record<string, unknown> | undefined): PropField[] {
+  if (!props) return []
+  const fields: PropField[] = []
+  for (const [name, value] of Object.entries(props)) {
+    if (typeof value === 'boolean') fields.push({ name, kind: 'boolean', value })
+    else if (typeof value === 'number' && Number.isFinite(value)) fields.push({ name, kind: 'number', value })
+    else if (typeof value === 'string') fields.push({ name, kind: stringKind(value), value })
+  }
+  return fields
+}

package/src/video/preview/useDragOverlay.ts

@@ -1,8 +1,28 @@
 import { useEffect, useRef, useState } from 'react'
+import type { VisualItem } from '../../schema'
 
 export type Corner = 'nw' | 'ne' | 'sw' | 'se'
 export type DragType = 'move' | `resize-${Corner}` | 'rotate'
 
+// Shared shape for `onOverlayChange` across the preview layer: drag/resize/rotate
+// gestures (useDragOverlay) only ever populate the geometric subset; content-editing
+// callers (crop modal, future props/text editors) populate the rest. Callers pass a
+// partial — VideoEditor.handleOverlayChange merges whatever arrives into the item.
+export interface OverlayChanges {
+  offsetX?: number
+  offsetY?: number
+  scale?: number
+  rotation?: number
+  fit?: 'cover' | 'contain' | 'fill'
+  sourceCrop?: VisualItem['sourceCrop']
+  sourceWidth?: number
+  sourceHeight?: number
+  /** Full replacement for item.props (content editing). */
+  props?: Record<string, unknown>
+  /** Legacy text overlay items only. */
+  text?: string
+}
+
 const SNAP_THRESHOLD = 2.5  // % of container
 const ROT_SNAP_ANGLES = [0, 90, 180, 270]
 const ROT_ATTRACT_DEG = 5   // snap in within ±5°
@@ -25,7 +45,7 @@ interface DragState {
 
 export function useDragOverlay(
   containerRef: React.RefObject<HTMLDivElement | null>,
-  onOverlayChange?: (id: string, changes: { offsetX?: number; offsetY?: number; scale?: number; rotation?: number; fit?: 'cover' | 'contain' | 'fill' }) => void,
+  onOverlayChange?: (id: string, changes: OverlayChanges) => void,
 ) {
   const [dragState, setDragState] = useState<DragState | null>(null)
 

package/src/video/preview/useVideoPlayback.ts

@@ -291,15 +291,24 @@ export function useVideoPlayback(
     applyClipVolume(clip)
   }, [clips, activeSlot])
 
+  // maxEnd for the canvas rAF clock — the furthest overlay/caption end. Kept in
+  // a ref, updated by its own cheap effect, so the rAF effect below doesn't tear
+  // down and rebuild on every project spread (only isPlaying/onTimeUpdate matter
+  // to it). onTimeUpdate is the stable clock.set identity.
+  const canvasMaxEndRef = useRef(0)
   useEffect(() => {
-    if (!isCanvasProject) return
     const captionEnd = (project.captions?.segments ?? []).reduce((m: number, s) => Math.max(m, s.end), 0)
-    const maxEnd = Math.max(
+    canvasMaxEndRef.current = Math.max(
       overlayTracks.flat().reduce((m, i) => Math.max(m, i.end), 0),
       captionEnd,
     )
+  }, [overlayTracks, project.captions])
+
+  useEffect(() => {
+    if (!isCanvasProject) return
 
     function tick(ms: number) {
+      const maxEnd = canvasMaxEndRef.current
       if (rafLastMs.current !== null) {
         const dt   = (ms - rafLastMs.current) / 1000
         const next = Math.min(lastTimeRef.current + dt, maxEnd)
@@ -327,7 +336,7 @@ export function useVideoPlayback(
     return () => {
       if (rafRef.current) cancelAnimationFrame(rafRef.current)
     }
-  }, [isPlaying, isCanvasProject, overlayTracks, project, onTimeUpdate])
+  }, [isPlaying, isCanvasProject, onTimeUpdate])
 
   // ── Multi-track audio management ───────────────────────────────────────────
   // Derive unmuted tracks. The full tracks array is a new reference on every

package/src/video/timeline/AudioTrackRow.tsx

@@ -5,12 +5,13 @@
 // cross-lane drag, edge trim, mute toggle, inline volume, delete,
 // click-to-select, and inspect button.
 
-import { useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import { Volume2, VolumeX, Trash2, Info } from 'lucide-react'
 import type { AudioTrack } from '../../schema'
 import type { Project } from '../../types'
 import { pct } from './utils'
 import { useTimelineContext } from './TimelineContext'
+import PlayheadLine from './PlayheadLine'
 import { useItemDragDrop } from './useItemDragDrop'
 import type { Draggable, DragEventContext } from './useItemDragDrop'
 import AudioWaveformLayer from './AudioWaveformLayer'
@@ -46,7 +47,7 @@ function updateAudioTrack(project: Project, trackId: string, changes: Partial<Au
   }
 }
 
-export default function AudioTrackRow({
+function AudioTrackRow({
   tracks,
   laneIndex,
   laneCount,
@@ -61,7 +62,6 @@ export default function AudioTrackRow({
 }: AudioTrackRowProps) {
   const {
     totalDuration,
-    currentTime,
     snapBoundaries,
     scrollRef,
     overlayDraggedRef,
@@ -78,11 +78,7 @@ export default function AudioTrackRow({
 
   return (
     <div className="relative h-10 bg-gray-100 dark:bg-gray-900 rounded overflow-hidden cursor-pointer">
-      {/* Playhead line */}
-      <div
-        className="absolute top-0 bottom-0 w-[2px] bg-red-500 pointer-events-none z-10"
-        style={{ left: `${pct(currentTime, totalDuration)}%` }}
-      />
+      <PlayheadLine />
       {tracks.map(track => (
         <AudioTrackItem
           key={track.id}
@@ -139,6 +135,8 @@ export default function AudioTrackRow({
   )
 }
 
+export default memo(AudioTrackRow)
+
 // ── Single audio item within a lane ──────────────────────────────────────────
 
 interface AudioTrackItemProps {

package/src/video/timeline/PlayheadLine.tsx

@@ -0,0 +1,18 @@
+import { useTimelineContext } from './TimelineContext'
+import { usePlaybackTime } from '../playback-clock'
+import { pct } from './utils'
+
+/** Leaf playhead indicator: the ONLY per-tick subscriber inside track rows.
+ *  Isolating the clock subscription here means VisualTrackRow/AudioTrackRow
+ *  (and everything else in a row) no longer re-render on every playback tick. */
+export default function PlayheadLine() {
+  const { clock, totalDuration } = useTimelineContext()
+  const currentTime = usePlaybackTime(clock)
+  if (totalDuration === 0) return null
+  return (
+    <div
+      className="absolute top-0 bottom-0 w-[2px] bg-red-500 pointer-events-none z-10"
+      style={{ left: `${pct(currentTime, totalDuration)}%` }}
+    />
+  )
+}

package/src/video/timeline/Scrubber.tsx

@@ -1,5 +1,6 @@
 import { formatTime, pct, ratioFromClientX } from './utils'
 import { useTimelineContext } from './TimelineContext'
+import { usePlaybackTime } from '../playback-clock'
 
 interface ScrubberProps {
   hoverPct: number | null
@@ -20,12 +21,13 @@ export default function Scrubber({
   onCut,
   cutButtonLabel,
 }: ScrubberProps) {
-  const { currentTime, totalDuration, contentDuration, markers, setMarkers, snapBoundaries, onTimeUpdate, scrubberRef, selection } = useTimelineContext()
+  const { clock, totalDuration, contentDuration, markers, setMarkers, snapBoundaries, scrubberRef, selection } = useTimelineContext()
+  const currentTime = usePlaybackTime(clock)
 
   function handleScrubClick(e: React.MouseEvent<HTMLDivElement>) {
     e.stopPropagation()
     if (totalDuration === 0) return
-    onTimeUpdate(ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration)
+    clock.set(ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration)
   }
 
   function handleScrubDoubleClick(e: React.MouseEvent<HTMLDivElement>) {
@@ -96,14 +98,14 @@ export default function Scrubber({
               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 }
+                if (Math.abs(rawT - snappedTo) < release) { clock.set(snappedTo); return }
                 snappedTo = null
               }
               // Scan for attraction
               for (const b of boundaries) {
-                if (Math.abs(rawT - b) < attract) { snappedTo = b; onTimeUpdate(b); return }
+                if (Math.abs(rawT - b) < attract) { snappedTo = b; clock.set(b); return }
               }
-              onTimeUpdate(rawT)
+              clock.set(rawT)
             }
             function onUp() {
               setDraggingPlayhead(false)

package/src/video/timeline/Timeline.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode } from 'react'
 import AudioTrackRow from './AudioTrackRow'
 import type { GetWaveformChunks, ResolveFilePath } from './AudioWaveformLayer'
 import type { Project } from '../../types'
@@ -6,6 +6,7 @@ import { collapseGaps } from '../cuts'
 import { ratioFromClientX } from './utils'
 import { useTimelineZoom } from './useTimelineZoom'
 import { TimelineContext, type TimelineContextValue } from './TimelineContext'
+import { usePlaybackTime, type PlaybackClock } from '../playback-clock'
 import Scrubber from './Scrubber'
 import TranscriptPanel from './TranscriptPanel'
 import TranscriptModal from './TranscriptModal'
@@ -14,11 +15,13 @@ import { deleteSelection, toggleSelection } from './multiSelectOps'
 
 interface TimelineProps {
   project: Project
-  currentTime: number
-  onTimeUpdate: (t: number) => void
+  clock: PlaybackClock
   onProjectChange?: (p: Project) => void
   onCaptionEdit?: (p: Project) => void
   onOverlayEdit?: (p: Project) => void
+  /** Open the overlay props dialog (owned by VideoEditor). Threaded to each
+   *  VisualTrackRow so a selected overlay block can offer an edit button. */
+  onEditOverlay?: (id: string) => void
   /** Unified selection — covers both visual items and audio tracks. */
   selectedIds?: string[]
   onSelectIds?: (ids: string[]) => void
@@ -54,7 +57,7 @@ interface TimelineProps {
 }
 
 
-export default function Timeline({ project, currentTime, onTimeUpdate, onProjectChange, onCaptionEdit, onOverlayEdit, selectedIds = [], onSelectIds, onSplit, onCut, onInspectClip, onInspectAudio, rippleMode = false, getWaveformChunks, resolveFilePath, regenEnabled, isClipQueued, renderSubcutRegen, onRegenerateCaptions }: TimelineProps) {
+export default function Timeline({ project, clock, onProjectChange, onCaptionEdit, onOverlayEdit, onEditOverlay, selectedIds = [], onSelectIds, onSplit, onCut, onInspectClip, onInspectAudio, rippleMode = false, getWaveformChunks, resolveFilePath, regenEnabled, isClipQueued, renderSubcutRegen, onRegenerateCaptions }: TimelineProps) {
   const primarySelectedId = selectedIds[0] ?? null
 
   // Click/shift-click handler — additive selection on shift or meta (cmd/ctrl).
@@ -66,17 +69,24 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
   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)
+
+  // Memoized so playback ticks (which re-render Timeline via the ctx useMemo's
+  // clock dependency) don't recompute these on every frame — they only change
+  // when the underlying tracks/audio actually change.
+  const { snapBoundaries, contentDuration, totalDuration } = useMemo(() => {
+    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)
+    return { snapBoundaries, contentDuration, totalDuration }
+  }, [project.tracks, project.audio])
 
   // 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.
@@ -149,15 +159,15 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
       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)
+      const next = Math.max(0, Math.min(totalDuration, clock.get() + dir * step))
+      clock.set(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, transcriptModalOpen])
+  }, [totalDuration, clock, project.settings?.fps, transcriptModalOpen])
 
   // Derive selection from two placed markers
   const selection = markers[0] !== null && markers[1] !== null
@@ -166,9 +176,9 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
 
   const ctx = useMemo<TimelineContextValue>(() => ({
     totalDuration, contentDuration, snapBoundaries, zoom, zoomRef, scrollRef, scrubberRef,
-    overlayDraggedRef, currentTime, onTimeUpdate, markers, setMarkers, selection,
+    overlayDraggedRef, clock, markers, setMarkers, selection,
   }), [totalDuration, contentDuration, snapBoundaries, zoom, zoomRef, scrollRef, scrubberRef,
-    overlayDraggedRef, currentTime, onTimeUpdate, markers, setMarkers, selection])
+    overlayDraggedRef, clock, markers, setMarkers, selection])
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
     if ((e.target as HTMLElement).isContentEditable) return
@@ -186,10 +196,11 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
 
     if (e.key !== 'Enter' || totalDuration === 0) return
     e.preventDefault()
+    const t = clock.get()
     setMarkers(([a, b]) => {
-      if (a === null) return [currentTime, null]
-      if (b === null) return [a, currentTime]
-      return [currentTime, null]
+      if (a === null) return [t, null]
+      if (b === null) return [a, t]
+      return [t, null]
     })
   }
 
@@ -202,9 +213,9 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
     const snapThreshold = (8 / rect.width) * totalDuration
     const boundaries = snapBoundaries
     for (const b of boundaries) {
-      if (Math.abs(clickedTime - b) < snapThreshold) { onTimeUpdate(b); return }
+      if (Math.abs(clickedTime - b) < snapThreshold) { clock.set(b); return }
     }
-    onTimeUpdate(clickedTime)
+    clock.set(clickedTime)
   }
 
   const cutButtonLabel = primarySelectedId
@@ -292,6 +303,7 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
               rippleMode={rippleMode}
               onProjectChange={onProjectChange}
               onOverlayEdit={onOverlayEdit}
+              onEditOverlay={onEditOverlay}
               onSelectItem={handleSelectItem}
               onInspectClip={onInspectClip}
               subcutClipId={subcutClipId}
@@ -357,10 +369,13 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
       })()}
 
       {/* ── Transcript editor ── */}
-      <TranscriptPanel
+      {/* Wrapped in a clock-subscribing child so the active-segment highlight
+          tracks the playhead WITHOUT Timeline (and its track rows) re-rendering
+          every tick. */}
+      <TranscriptPanelWithClock
+        clock={clock}
         project={project}
         captionTrack={captionTrack}
-        currentTime={currentTime}
         onCaptionEdit={onCaptionEdit}
         onProjectChange={onProjectChange}
         onExpand={() => setTranscriptModalOpen(true)}
@@ -369,10 +384,10 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
 
       {/* ── Transcript modal ── */}
       {transcriptModalOpen && (
-        <TranscriptModal
+        <TranscriptModalWithClock
+          clock={clock}
           project={project}
           captionTrack={captionTrack}
-          currentTime={currentTime}
           onProjectChange={onProjectChange}
           onCaptionEdit={onCaptionEdit}
           onClose={() => setTranscriptModalOpen(false)}
@@ -383,3 +398,23 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
     </TimelineContext.Provider>
   )
 }
+
+// The transcript views highlight the active caption segment, so they genuinely
+// display time and must re-render every tick. Subscribing HERE (rather than in
+// Timeline) keeps the per-tick re-render scoped to these leaves — Timeline and
+// the track rows are unaffected.
+function TranscriptPanelWithClock({
+  clock,
+  ...rest
+}: { clock: PlaybackClock } & Omit<ComponentProps<typeof TranscriptPanel>, 'currentTime'>) {
+  const currentTime = usePlaybackTime(clock)
+  return <TranscriptPanel currentTime={currentTime} {...rest} />
+}
+
+function TranscriptModalWithClock({
+  clock,
+  ...rest
+}: { clock: PlaybackClock } & Omit<ComponentProps<typeof TranscriptModal>, 'currentTime'>) {
+  const currentTime = usePlaybackTime(clock)
+  return <TranscriptModal currentTime={currentTime} {...rest} />
+}

package/src/video/timeline/TimelineContext.ts

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react'
+import type { PlaybackClock } from '../playback-clock'
 
 export interface TimelineContextValue {
   totalDuration: number
@@ -9,8 +10,7 @@ export interface TimelineContextValue {
   scrollRef: React.RefObject<HTMLDivElement | null>
   scrubberRef: React.RefObject<HTMLDivElement | null>
   overlayDraggedRef: React.MutableRefObject<boolean>
-  currentTime: number
-  onTimeUpdate: (t: number) => void
+  clock: PlaybackClock
   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

package/src/video/timeline/TranscriptPanel.tsx

@@ -3,6 +3,27 @@ import type { Project } from '../../types'
 import { formatTime } from './utils'
 import { EditableSegment } from './EditableSegment'
 import { makeCaptionEdit } from './makeCaptionEdit'
+import { SwatchInput } from '../../ui'
+
+// Each caption style reads a different accent-color prop in its render template
+// (see render/templates/captions/*.jsx). The color control writes whichever field
+// the active style uses; `clean` and `word-by-word` have no accent (omitted here).
+type CaptionStyle = NonNullable<Project['captions']>['style']
+type AccentField = 'accentColor' | 'highlightColor' | 'activeColor' | 'backgroundColor'
+const ACCENT: Partial<Record<CaptionStyle, { field: AccentField; label: string; def: string }>> = {
+  karaoke:         { field: 'highlightColor',  label: 'Highlight', def: '#ffffff' },
+  pop:             { field: 'activeColor',     label: 'Active',    def: '#ffe600' },
+  'highlight-box': { field: 'accentColor',     label: 'Accent',    def: '#fbbf24' },
+  outline:         { field: 'accentColor',     label: 'Accent',    def: '#fbbf24' },
+  subtitle:        { field: 'backgroundColor', label: 'Box',       def: '#000000' },
+}
+
+// The native <input type="color"> only accepts #rrggbb. Stored values are always
+// hex once picked; fall back to the style default for unset / non-hex (e.g. an
+// rgba() template default) so the swatch never gets an invalid value.
+const HEX = /^#[0-9a-f]{6}$/i
+const toHex = (v: unknown, fallback: string): string =>
+  typeof v === 'string' && HEX.test(v) ? v : fallback
 
 interface TranscriptPanelProps {
   project: Project
@@ -100,6 +121,42 @@ export default function TranscriptPanel({ project, captionTrack, currentTime, on
               </span>
             </div>
           )}
+          {captionTrack && (() => {
+            const accent = ACCENT[captionTrack.style]
+            // onChange = live preview only (cheap, no PUT); onBlur commits one save.
+            const live = (patch: Record<string, string>) => {
+              if (!project.captions) return
+              onProjectChange?.({ ...project, captions: { ...project.captions, ...patch } })
+            }
+            const commit = (patch: Record<string, string>) => {
+              if (!project.captions) return
+              onCaptionEdit?.({ ...project, captions: { ...project.captions, ...patch } })
+            }
+            return (
+              <div className="flex items-center gap-1.5">
+                <SwatchInput
+                  size="sm"
+                  showValue={false}
+                  title="Caption text color"
+                  ariaLabel="Caption text color"
+                  value={toHex(captionTrack.color, '#ffffff')}
+                  onChange={v => live({ color: v })}
+                  onCommit={v => commit({ color: v })}
+                />
+                {accent && (
+                  <SwatchInput
+                    size="sm"
+                    showValue={false}
+                    title={`Caption ${accent.label.toLowerCase()} color`}
+                    ariaLabel={`Caption ${accent.label.toLowerCase()} color`}
+                    value={toHex(captionTrack[accent.field], accent.def)}
+                    onChange={v => live({ [accent.field]: v })}
+                    onCommit={v => commit({ [accent.field]: v })}
+                  />
+                )}
+              </div>
+            )
+          })()}
           {onRegenerateCaptions && (
             <button
               className="text-[10px] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded px-2 py-0.5 transition-all"

package/src/video/timeline/VisualTrackRow.tsx

@@ -1,9 +1,11 @@
-import { Volume2, VolumeX, Info, Scissors } from 'lucide-react'
+import { memo } from 'react'
+import { Volume2, VolumeX, Info, Scissors, Pencil } from 'lucide-react'
 import type { VisualItem } from '../../schema'
 import type { Project } from '../../types'
 import { collapseGaps } from '../cuts'
 import { pct, ratioFromClientX, trackRow, trackRowTall } from './utils'
 import { useTimelineContext } from './TimelineContext'
+import PlayheadLine from './PlayheadLine'
 import { useItemDragDrop } from './useItemDragDrop'
 import type { Draggable, DragEventContext } from './useItemDragDrop'
 import { applyMuteToSelection, applyResizeDeltaToSelection, deleteSelection } from './multiSelectOps'
@@ -17,6 +19,8 @@ interface VisualTrackRowProps {
   rippleMode: boolean
   onProjectChange?: (p: Project) => void
   onOverlayEdit?: (p: Project) => void
+  /** Open the overlay props dialog for an overlay item (VideoEditor owns it). */
+  onEditOverlay?: (id: string) => void
   /** Click handler — additive when shift/meta is held. */
   onSelectItem: (id: string | null, additive: boolean) => void
   onInspectClip?: (id: string) => void
@@ -41,7 +45,7 @@ const trackColors = [
   { bg: 'bg-amber-700/60',  bgHov: 'hover:bg-amber-700/80',  bgSel: 'bg-amber-600/80',  ring: 'ring-amber-400/80',  border: 'border-amber-500/50',  text: 'text-amber-200',  resHov: 'hover:bg-amber-300/40'  },
 ]
 
-export default function VisualTrackRow({
+function VisualTrackRow({
   trackItems,
   trackIdx,
   project,
@@ -49,6 +53,7 @@ export default function VisualTrackRow({
   rippleMode,
   onProjectChange,
   onOverlayEdit,
+  onEditOverlay,
   onSelectItem,
   onInspectClip,
   subcutClipId,
@@ -56,7 +61,7 @@ export default function VisualTrackRow({
   regenEnabled,
   isClipQueued,
 }: VisualTrackRowProps) {
-  const { totalDuration, snapBoundaries, scrollRef, scrubberRef, currentTime, onTimeUpdate, markers, setMarkers, selection, overlayDraggedRef, zoomRef } = useTimelineContext()
+  const { totalDuration, snapBoundaries, scrollRef, scrubberRef, clock, markers, setMarkers, selection, overlayDraggedRef, zoomRef } = useTimelineContext()
   const tc = trackColors[trackIdx % trackColors.length]
   const markerActive = markers[0] !== null || selection !== null
   const primarySelectedId = selectedIds[0] ?? null
@@ -193,18 +198,11 @@ export default function VisualTrackRow({
     const snapThreshold = rect ? (8 / rect.width) * totalDuration : 0
     const boundaries = snapBoundaries
     for (const b of boundaries) {
-      if (Math.abs(clickedTime - b) < snapThreshold) { onTimeUpdate(b); return }
+      if (Math.abs(clickedTime - b) < snapThreshold) { clock.set(b); return }
     }
-    onTimeUpdate(clickedTime)
+    clock.set(clickedTime)
   }
 
-  const playheadLine = (
-    <div
-      className="absolute top-0 bottom-0 w-[2px] bg-red-500 pointer-events-none z-10"
-      style={{ left: `${pct(currentTime, totalDuration)}%` }}
-    />
-  )
-
   return (
     <div className={`${trackIdx === 0 ? trackRowTall : trackRow} transition-opacity ${dimmed ? 'opacity-30 pointer-events-none' : ''}`} onClick={handleTrackClick} onDoubleClick={handleScrubDoubleClick}>
       {trackItems.map((item) => {
@@ -223,7 +221,7 @@ export default function VisualTrackRow({
               onSelectItem(item.id, additive)
               // Only seek playhead on a plain single-select click (not on
               // additive shift-clicks, which shouldn't disrupt scrubbing).
-              if (!additive && !isSel) onTimeUpdate(ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration)
+              if (!additive && !isSel) clock.set(ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration)
             }}
             onDoubleClick={(e) => {
               e.stopPropagation()
@@ -267,6 +265,13 @@ export default function VisualTrackRow({
                 title="Subcut regenerate"
               ><Scissors size={10} /></button>
             )}
+            {isSel && onEditOverlay && item.type === 'overlay' && !!item.src && (
+              <button
+                className={`shrink-0 ml-1 z-10 cursor-pointer opacity-60 hover:opacity-100 ${tc.text}`}
+                onClick={(e) => { e.stopPropagation(); onEditOverlay(item.id) }}
+                title="Edit overlay"
+              ><Pencil size={10} /></button>
+            )}
             {isSel && (
               <button
                 className={`shrink-0 ml-1 mr-3 z-10 cursor-pointer opacity-60 hover:opacity-100 ${tc.text} text-[11px] leading-none`}
@@ -281,7 +286,7 @@ export default function VisualTrackRow({
           </div>
         )
       })}
-      {playheadLine}
+      <PlayheadLine />
       {selection && (
         <div
           className="absolute inset-y-0 bg-red-500/20 pointer-events-none"
@@ -291,3 +296,5 @@ export default function VisualTrackRow({
     </div>
   )
 }
+
+export default memo(VisualTrackRow)