@devbycrux/editor 0.1.0 → 0.2.0

package/src/video/timeline/TranscriptPanel.tsx

@@ -0,0 +1,86 @@
+import type { Project } from '../../types'
+import { formatTime } from './utils'
+import { EditableSegment } from './EditableSegment'
+import { makeCaptionEdit } from './makeCaptionEdit'
+
+interface TranscriptPanelProps {
+  project: Project
+  captionTrack: Project['captions'] | undefined
+  currentTime: number
+  onCaptionEdit?: (project: Project) => void
+  onProjectChange?: (project: Project) => void
+  onExpand: () => void
+}
+
+export default function TranscriptPanel({ project, captionTrack, currentTime, onCaptionEdit, onProjectChange, onExpand }: TranscriptPanelProps) {
+  const segs = captionTrack?.segments ?? []
+  // Find active segment index
+  const activeIdx = segs.findIndex(s => currentTime >= s.start && currentTime < s.end)
+  const nearIdx   = activeIdx !== -1 ? activeIdx
+    : segs.reduce((best, s, i) => s.start <= currentTime ? i : best, -1)
+  // Vicinity: active ± 2 segments; track start offset for O(1) global index
+  const vicinityStart = nearIdx !== -1 ? Math.max(0, nearIdx - 2) : 0
+  const vicinitySegs = nearIdx !== -1
+    ? segs.slice(vicinityStart, nearIdx + 3)
+    : segs.slice(0, 3)
+
+  return (
+    <div className="rounded border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 px-3 py-2.5">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-[10px] text-gray-500 uppercase tracking-wider">Captions</span>
+        <div className="flex items-center gap-2">
+          {captionTrack && (['word-by-word', 'pop', 'karaoke', 'subtitle'] as const).map(style => {
+            const active = captionTrack.style === style
+            return (
+              <button
+                key={style}
+                className={`text-[10px] rounded px-2 py-0.5 transition-all border ${
+                  active
+                    ? 'bg-purple-600/30 border-purple-500/60 text-purple-300'
+                    : 'bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-400 dark:hover:border-gray-500'
+                }`}
+                onClick={() => {
+                  if (!project.captions) return
+                  const updated = { ...project, captions: { ...project.captions, style } }
+                  onCaptionEdit?.(updated)
+                }}
+              >
+                {style}
+              </button>
+            )
+          })}
+          {segs.length > 0 && (
+            <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"
+              onClick={onExpand}
+            >
+              Expand ↑
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="h-10 overflow-y-auto">
+      {segs.length === 0 ? (
+        <p className="text-xs text-gray-600 italic">No transcript — captions are generated during the agent pass</p>
+      ) : (
+        <p className="text-sm text-gray-700 dark:text-gray-200 leading-relaxed">
+          {vicinitySegs.map((seg, vi) => {
+            const i = vicinityStart + vi
+            const isActive = currentTime >= seg.start && currentTime < seg.end
+            return (
+              <span key={seg.id ?? i}>
+                {vi > 0 && ' '}
+                <span className="text-gray-500 text-[10px] font-mono mr-1">{formatTime(seg.start)}</span>
+                <span className={isActive ? 'text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'}>
+                  <EditableSegment seg={seg} onEdit={makeCaptionEdit(i, project, onProjectChange, onCaptionEdit)} />
+                </span>
+              </span>
+            )
+          })}
+        </p>
+      )}
+      </div>
+    </div>
+  )
+}

package/src/video/timeline/VisualTrackRow.tsx

@@ -0,0 +1,293 @@
+import { Volume2, VolumeX, Info, Scissors } 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 { useItemDragDrop } from './useItemDragDrop'
+import type { Draggable, DragEventContext } from './useItemDragDrop'
+import { applyMuteToSelection, applyResizeDeltaToSelection, deleteSelection } from './multiSelectOps'
+
+interface VisualTrackRowProps {
+  trackItems: VisualItem[]
+  trackIdx: number
+  project: Project
+  /** Unified multi-selection. First entry is the primary; isSel checks membership. */
+  selectedIds: string[]
+  rippleMode: boolean
+  onProjectChange?: (p: Project) => void
+  onOverlayEdit?: (p: Project) => void
+  /** Click handler — additive when shift/meta is held. */
+  onSelectItem: (id: string | null, additive: boolean) => void
+  onInspectClip?: (id: string) => void
+  subcutClipId: string | null
+  setSubcutClipId: (id: string | null) => void
+  /** Host-computed gate for the subcut-regenerate affordance (Montaj: project
+   *  is an ai_video). When false/undefined the Scissors button is hidden — the
+   *  package stays agnostic of Montaj's projectType. */
+  regenEnabled?: boolean
+  /** Host-computed predicate: is this clip already queued for regeneration?
+   *  (Montaj: project.regenQueue has an entry for this clipId.) Drives the
+   *  "queued" badge. */
+  isClipQueued?: (itemId: string) => boolean
+}
+
+const trackColors = [
+  { bg: 'bg-slate-600/80',  bgHov: 'hover:bg-slate-500/80',  bgSel: 'bg-slate-500/90',  ring: 'ring-slate-300/80',  border: 'border-slate-400/50',  text: 'text-slate-200',  resHov: 'hover:bg-slate-300/40'  },
+  { bg: 'bg-sky-700/80',    bgHov: 'hover:bg-sky-600/80',    bgSel: 'bg-sky-600/90',    ring: 'ring-sky-300/80',    border: 'border-sky-400/50',    text: 'text-sky-200',    resHov: 'hover:bg-sky-300/40'    },
+  { bg: 'bg-violet-700/80', bgHov: 'hover:bg-violet-600/80', bgSel: 'bg-violet-600/90', ring: 'ring-violet-300/80', border: 'border-violet-400/50', text: 'text-violet-200', resHov: 'hover:bg-violet-300/40' },
+  { bg: 'bg-emerald-700/80',bgHov: 'hover:bg-emerald-600/80',bgSel: 'bg-emerald-600/90',ring: 'ring-emerald-300/80',border: 'border-emerald-400/50',text: 'text-emerald-200',resHov: 'hover:bg-emerald-300/40'},
+  { bg: 'bg-rose-700/80',   bgHov: 'hover:bg-rose-600/80',   bgSel: 'bg-rose-600/90',   ring: 'ring-rose-300/80',   border: 'border-rose-400/50',   text: 'text-rose-200',   resHov: 'hover:bg-rose-300/40'   },
+  { 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({
+  trackItems,
+  trackIdx,
+  project,
+  selectedIds,
+  rippleMode,
+  onProjectChange,
+  onOverlayEdit,
+  onSelectItem,
+  onInspectClip,
+  subcutClipId,
+  setSubcutClipId,
+  regenEnabled,
+  isClipQueued,
+}: VisualTrackRowProps) {
+  const { totalDuration, snapBoundaries, scrollRef, scrubberRef, currentTime, onTimeUpdate, markers, setMarkers, selection, overlayDraggedRef, zoomRef } = useTimelineContext()
+  const tc = trackColors[trackIdx % trackColors.length]
+  const markerActive = markers[0] !== null || selection !== null
+  const primarySelectedId = selectedIds[0] ?? null
+  const dimmed = markerActive && primarySelectedId !== null && !trackItems.some(i => i.id === primarySelectedId)
+
+  const { beginDrag, beginResize } = useItemDragDrop({
+    totalDuration,
+    snapBoundaries,
+    scrollRef,
+    zoomRef,
+    draggedFlagRef: overlayDraggedRef,
+  })
+
+  function handleItemResizeStart(e: React.MouseEvent, item: VisualItem, edge: 'start' | 'end') {
+    if (!onProjectChange) return
+    let lastUpdated = project
+    const origStart = item.start
+    const origEnd = item.end
+    const multiTargets = selectedIds.length > 1 && selectedIds.includes(item.id)
+
+    beginResize(e, item as Draggable, edge, {
+      onLivePreview: ({ item: resized }: DragEventContext) => {
+        // First: apply the hook's resize (which has clamping, snap, in/outPoint
+        // math) to the originator clip.
+        let next: Project = {
+          ...project,
+          tracks: (project.tracks ?? []).map(track =>
+            track.map(ov => ov.id !== item.id ? ov : { ...ov, start: resized.start, end: resized.end, inPoint: resized.inPoint, outPoint: resized.outPoint })
+          ),
+        }
+        // Then: propagate the same delta to every other selected item across
+        // visual + audio tracks.
+        if (multiTargets) {
+          const dStart = edge === 'start' ? resized.start - origStart : 0
+          const dEnd = edge === 'end' ? resized.end - origEnd : 0
+          next = applyResizeDeltaToSelection(next, item.id, selectedIds, edge, { dStart, dEnd })
+        }
+        if (rippleMode) next = collapseGaps(next)
+        lastUpdated = next
+        onProjectChange!(next)
+      },
+      onCommit: () => {
+        onOverlayEdit?.(lastUpdated)
+      },
+    })
+  }
+
+  function handleDeleteOverlay(id: string) {
+    if (!onProjectChange) return
+    // If part of a multi-selection, delete the whole selection; otherwise just
+    // this item. Matches the Delete-key behavior in Timeline.handleKeyDown.
+    const ids = selectedIds.length > 1 && selectedIds.includes(id) ? selectedIds : [id]
+    let updated = deleteSelection(project, ids)
+    if (rippleMode) updated = collapseGaps(updated)
+    onProjectChange(updated)
+    onOverlayEdit?.(updated)
+    onSelectItem(null, false)
+  }
+
+  function handleToggleMute(item: VisualItem) {
+    if (!onProjectChange) return
+    const newMuted = !item.muted
+    // If clicked item is in a multi-selection, set every selected item's mute
+    // state to the new target (uniform end state, no surprise mixed state).
+    const targetIds = selectedIds.length > 1 && selectedIds.includes(item.id) ? selectedIds : [item.id]
+    const updated = applyMuteToSelection(project, targetIds, newMuted)
+    onProjectChange(updated)
+    onOverlayEdit?.(updated)
+  }
+
+  function handleOverlayDragStart(e: React.MouseEvent, item: VisualItem, sourceTrackIdx: number) {
+    if ((e.target as HTMLElement).classList.contains('cursor-ew-resize')) return
+    if (!onProjectChange) return
+    const projectChange = onProjectChange
+    const ROW_HEIGHT_PX = 24
+    let lastUpdated = project
+
+    beginDrag(e, item as Draggable, {
+      onLivePreview: ({ item: moved, dy }: DragEventContext) => {
+        const trackDelta = Math.round(dy / ROW_HEIGHT_PX)
+        const targetIdx = Math.max(0, sourceTrackIdx - trackDelta)
+        const duration = moved.end - moved.start
+        const overlapMin = duration * 0.3
+
+        function hasOverlap(track: VisualItem[]): boolean {
+          return track.some(ov => {
+            if (ov.id === item.id) return false
+            return Math.min(moved.end, ov.end) - Math.max(moved.start, ov.start) > overlapMin
+          })
+        }
+
+        const tracks = lastUpdated.tracks ?? []
+        let bestIdx = targetIdx
+        outer: for (let delta = 0; delta <= tracks.length; delta++) {
+          for (const i of delta === 0 ? [targetIdx] : [targetIdx - delta, targetIdx + delta]) {
+            if (i < 0) continue
+            const candidateTrack = i < tracks.length ? tracks[i] : []
+            if (!hasOverlap(candidateTrack)) { bestIdx = i; break outer }
+          }
+        }
+
+        const removed = tracks.map(t => t.filter(ov => ov.id !== item.id))
+        const movedItem = { ...item, start: moved.start, end: moved.end }
+        const final = bestIdx >= removed.length
+          ? [...removed, [movedItem]]
+          : removed.map((t, i) => i === bestIdx ? [...t, movedItem] : t)
+
+        const next = { ...lastUpdated, tracks: final.filter(t => t.length > 0) }
+        projectChange(next)
+        lastUpdated = next
+      },
+      onCommit: () => {
+        onOverlayEdit?.(lastUpdated)
+      },
+    })
+  }
+
+  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
+    })
+  }
+
+  function handleTrackClick(e: React.MouseEvent) {
+    e.stopPropagation()
+    if (totalDuration === 0) return
+    const clickedTime = ratioFromClientX(e.clientX, scrubberRef.current!.getBoundingClientRect()) * totalDuration
+    const rect = scrubberRef.current?.getBoundingClientRect()
+    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 }
+    }
+    onTimeUpdate(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) => {
+        const isSel = selectedIds.includes(item.id)
+        return (
+          <div
+            key={item.id}
+            className={`absolute top-0 bottom-0 flex items-center overflow-hidden cursor-grab active:cursor-grabbing
+              ${isSel ? `${tc.bgSel} ring-1 ring-inset ${tc.ring}` : `${tc.bg} ${tc.bgHov}`}
+              border-r ${tc.border}`}
+            style={{ left: `${pct(item.start, totalDuration)}%`, width: `${pct(item.end - item.start, totalDuration)}%` }}
+            onClick={(e) => {
+              e.stopPropagation()
+              if (overlayDraggedRef.current) return
+              const additive = e.shiftKey || e.metaKey || e.ctrlKey
+              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)
+            }}
+            onDoubleClick={(e) => {
+              e.stopPropagation()
+              if (onInspectClip) onInspectClip(item.id)
+            }}
+            onMouseDown={(e) => handleOverlayDragStart(e, item, trackIdx)}
+          >
+            <div
+              className={`absolute left-0 top-0 bottom-0 w-2.5 cursor-ew-resize z-10 ${tc.resHov}`}
+              onMouseDown={(e) => handleItemResizeStart(e, item, 'start')}
+            />
+            <span className={`text-[10px] ${tc.text} truncate flex-1 min-w-0 pl-3`}>
+              ▪ {item.type}
+              {project.renderMode === 'ffmpeg-drawtext' && trackIdx > 0 && (
+                <span className="ml-1.5 text-amber-400/60">preview</span>
+              )}
+              {isClipQueued?.(item.id) && (
+                <span className="ml-1.5 text-amber-300/80 font-medium">queued</span>
+              )}
+            </span>
+            {item.type === 'video' && (
+              <button
+                className={`shrink-0 mr-3 z-10 cursor-pointer transition-opacity ${item.muted ? 'opacity-30 hover:opacity-60' : 'opacity-50 hover:opacity-90'} ${tc.text}`}
+                onClick={(e) => { e.stopPropagation(); handleToggleMute(item) }}
+                title={item.muted ? 'Unmute' : 'Mute'}
+              >
+                {item.muted ? <VolumeX size={10} /> : <Volume2 size={10} />}
+              </button>
+            )}
+            {isSel && onInspectClip && item.type === 'video' && (
+              <button
+                className={`shrink-0 ml-1 z-10 cursor-pointer opacity-50 hover:opacity-100 ${tc.text}`}
+                onClick={(e) => { e.stopPropagation(); onInspectClip(item.id) }}
+                title="Inspect generation"
+              ><Info size={10} /></button>
+            )}
+            {isSel && regenEnabled && item.generation && (item.end - item.start) >= 3 && (
+              <button
+                className={`shrink-0 ml-1 z-10 cursor-pointer opacity-50 hover:opacity-100 ${tc.text}`}
+                onClick={(e) => { e.stopPropagation(); setSubcutClipId(subcutClipId === item.id ? null : item.id) }}
+                title="Subcut regenerate"
+              ><Scissors 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`}
+                onClick={(e) => { e.stopPropagation(); handleDeleteOverlay(item.id) }}
+                title="Delete"
+              >×</button>
+            )}
+            <div
+              className={`absolute right-0 top-0 bottom-0 w-2.5 cursor-ew-resize z-10 ${tc.resHov}`}
+              onMouseDown={(e) => handleItemResizeStart(e, item, 'end')}
+            />
+          </div>
+        )
+      })}
+      {playheadLine}
+      {selection && (
+        <div
+          className="absolute inset-y-0 bg-red-500/20 pointer-events-none"
+          style={{ left: `${pct(selection.start, totalDuration)}%`, width: `${pct(selection.end - selection.start, totalDuration)}%` }}
+        />
+      )}
+    </div>
+  )
+}

package/src/video/timeline/makeCaptionEdit.ts

@@ -0,0 +1,32 @@
+import type { Project } from '../../types'
+
+export function makeCaptionEdit(
+  globalIdx: number,
+  project: Project,
+  onProjectChange?: (p: Project) => void,
+  onCaptionEdit?: (p: Project) => void,
+) {
+  return (text: string) => {
+    if (!project.captions) return
+    const updated = {
+      ...project,
+      captions: {
+        ...project.captions,
+        segments: project.captions.segments.map((s, j) => {
+          if (j !== globalIdx) return s
+          const newWords = text.split(/\s+/).filter(Boolean)
+          const segDur = s.end - s.start
+          const wordDur = segDur / (newWords.length || 1)
+          const words = newWords.map((w, wi) => ({
+            word: w,
+            start: s.start + wi * wordDur,
+            end: s.start + (wi + 1) * wordDur,
+          }))
+          return { ...s, text, words }
+        }),
+      },
+    }
+    onProjectChange?.(updated)
+    onCaptionEdit?.(updated)
+  }
+}

package/src/video/timeline/multiSelectOps.ts

@@ -0,0 +1,157 @@
+// Multi-select project mutations shared by VisualTrackRow and AudioTrackRow.
+//
+// Selection IDs are unified — a single `selectedIds: string[]` covers visual
+// items (project.tracks[*][*]) and audio tracks (project.audio.tracks[*]).
+// Cross-type ops (e.g. resize a video clip + an audio track in one drag) work
+// because every id is globally unique within a Project.
+
+import type { VisualItem, AudioTrack } from '../../schema'
+import type { Project } from '../../types'
+
+const MIN_DURATION = 0.1
+
+export interface ResizeDeltas {
+  /** Delta in seconds applied to start-edge resizes. 0 if edge !== 'start'. */
+  dStart: number
+  /** Delta in seconds applied to end-edge resizes. 0 if edge !== 'end'. */
+  dEnd: number
+}
+
+/** Apply a start/end resize delta to every item in `selectedIds`, skipping the
+ *  originator (already updated by the hook's onLivePreview). Returns a new
+ *  Project. Clamps each item to its own min-duration and source-duration. */
+export function applyResizeDeltaToSelection(
+  project: Project,
+  originatorId: string,
+  selectedIds: readonly string[],
+  edge: 'start' | 'end',
+  deltas: ResizeDeltas,
+): Project {
+  if (selectedIds.length <= 1) return project
+  const targets = new Set(selectedIds.filter(id => id !== originatorId))
+  if (targets.size === 0) return project
+
+  const nextTracks = (project.tracks ?? []).map(track =>
+    track.map(item => targets.has(item.id) ? resizeVisualItem(item, edge, deltas) : item)
+  )
+  const nextAudio = (project.audio?.tracks ?? []).map(t =>
+    targets.has(t.id) ? resizeAudioTrack(t, edge, deltas) : t
+  )
+
+  return {
+    ...project,
+    tracks: nextTracks,
+    audio: project.audio ? { ...project.audio, tracks: nextAudio } : project.audio,
+  }
+}
+
+function resizeVisualItem(item: VisualItem, edge: 'start' | 'end', { dStart, dEnd }: ResizeDeltas): VisualItem {
+  if (edge === 'start') {
+    const newStart = Math.max(0, Math.min(item.start + dStart, item.end - MIN_DURATION))
+    if (item.type !== 'video') return { ...item, start: newStart }
+    const inP = item.inPoint ?? 0
+    const outP = item.outPoint ?? (inP + (item.end - item.start))
+    const dActual = newStart - item.start
+    return {
+      ...item,
+      start: newStart,
+      inPoint: Math.max(0, Math.min(inP + dActual, outP - MIN_DURATION)),
+    }
+  } else {
+    const newEnd = Math.max(item.start + MIN_DURATION, item.end + dEnd)
+    if (item.type !== 'video') return { ...item, end: newEnd }
+    const inP = item.inPoint ?? 0
+    const outP = item.outPoint ?? (inP + (item.end - item.start))
+    const dActual = newEnd - item.end
+    return {
+      ...item,
+      end: newEnd,
+      outPoint: Math.max(inP + MIN_DURATION, Math.min(outP + dActual, item.sourceDuration ?? Infinity)),
+    }
+  }
+}
+
+function resizeAudioTrack(track: AudioTrack, edge: 'start' | 'end', { dStart, dEnd }: ResizeDeltas): AudioTrack {
+  const inP = track.inPoint ?? 0
+  const outP = track.outPoint ?? (inP + (track.end - track.start))
+  const srcDur = track.sourceDuration ?? Infinity
+
+  if (edge === 'start') {
+    const newStart = Math.max(0, Math.min(track.start + dStart, track.end - MIN_DURATION))
+    const dActual = newStart - track.start
+    return {
+      ...track,
+      start: newStart,
+      inPoint: Math.max(0, Math.min(inP + dActual, outP - MIN_DURATION)),
+    }
+  } else {
+    const newEnd = Math.max(track.start + MIN_DURATION, track.end + dEnd)
+    const dActual = newEnd - track.end
+    return {
+      ...track,
+      end: newEnd,
+      outPoint: Math.max(inP + MIN_DURATION, Math.min(outP + dActual, srcDur)),
+    }
+  }
+}
+
+/** Set `muted` on every selected item to the given target value. Both visual
+ *  items (`VisualItem.muted` is video-type-only but we just spread it; harmless
+ *  on overlays/images that won't read it) and audio tracks are covered. */
+export function applyMuteToSelection(
+  project: Project,
+  selectedIds: readonly string[],
+  muted: boolean,
+): Project {
+  const targets = new Set(selectedIds)
+  if (targets.size === 0) return project
+
+  return {
+    ...project,
+    tracks: (project.tracks ?? []).map(track =>
+      track.map(item => targets.has(item.id) ? { ...item, muted } : item)
+    ),
+    audio: project.audio
+      ? {
+          ...project.audio,
+          tracks: (project.audio.tracks ?? []).map(t => targets.has(t.id) ? { ...t, muted } : t),
+        }
+      : project.audio,
+  }
+}
+
+/** Remove every selected item from both visual tracks and audio tracks.
+ *  Visual tracks that become empty are pruned (matches existing single-delete
+ *  behavior in Timeline.handleKeyDown). */
+export function deleteSelection(project: Project, selectedIds: readonly string[]): Project {
+  const targets = new Set(selectedIds)
+  if (targets.size === 0) return project
+
+  return {
+    ...project,
+    tracks: (project.tracks ?? [])
+      .map(track => track.filter(item => !targets.has(item.id)))
+      .filter(track => track.length > 0),
+    audio: project.audio
+      ? {
+          ...project.audio,
+          tracks: (project.audio.tracks ?? []).filter(t => !targets.has(t.id)),
+        }
+      : project.audio,
+  }
+}
+
+/** Selection helper: toggle additive (shift-click) vs replace (plain click).
+ *  - additive + already selected → remove from selection
+ *  - additive + not selected → add to selection
+ *  - !additive + sole selection of id → clear (re-clicking the only selected
+ *    item deselects it, matching the prior single-select behavior)
+ *  - !additive otherwise → selection becomes [id] */
+export function toggleSelection(current: readonly string[], id: string, additive: boolean): string[] {
+  const has = current.includes(id)
+  if (additive) {
+    return has ? current.filter(x => x !== id) : [...current, id]
+  }
+  if (has && current.length === 1) return []
+  return [id]
+}