@bycrux/editor 0.11.2 → 1.0.1

package/src/video/timeline/CaptionTrackRow.tsx

@@ -1,235 +0,0 @@
-// CaptionTrackRow — the caption track's own row in the timeline.
-//
-// Captions are NOT part of `tracks[]` (see schema.ts / the plan) — this row
-// reads and writes `project.captions` directly, keeping that special-track
-// data model intact. One block per segment, positioned on the shared timeline
-// scale exactly like VisualTrackRow/AudioTrackRow (same `pct()` + context —
-// never a locally-computed px-per-second).
-//
-// Selection is unified with the preview's caption selection box
-// (`selectedCaptionId`/`onSelectCaption`, both owned by VideoEditor — see
-// ReviewSurface) and is mutually exclusive with the normal item-selection
-// model (`selectedIds`): the two never show handles at once. This row only
-// owns the caption→item half of that rule at the CALL site (clicking a block
-// below calls `onSelectCaption`, same as the preview's click); the actual
-// "also clear selectedIds" side effect lives in VideoEditor's wrapped
-// `onSelectCaption`, since a caption can be selected from the preview too,
-// outside this row entirely. Timeline.handleSelectItem owns the other half
-// (clearing `selectedCaptionId` when a normal item is selected).
-//
-// Editing a segment's text (double-click) and retiming it (drag an edge) both
-// funnel through the single `onCaptionSegmentChange(id, patch)` callback
-// (VideoEditor's `handleCaptionSegmentChange`, which wraps `makeCaptionEdit` +
-// `sync.mutate`). That function pushes ONE undo entry and enqueues ONE save
-// PER CALL, so — unlike VisualTrackRow, which calls its per-tick
-// `onProjectChange` on every mousemove during a resize — a drag here stays
-// entirely in local state (`live`) until mouseup, where `onCaptionSegmentChange`
-// fires exactly once. This mirrors CaptionPreview's drag lifecycle (the
-// sibling caption-editing surface), which does the same for the same reason.
-import { useEffect, useRef, useState } from 'react'
-import type { CaptionSegment, Captions } from '../../schema'
-import { pct, trackRow } from './utils'
-import { useTimelineContext } from './TimelineContext'
-import PlayheadLine from './PlayheadLine'
-import { useItemDragDrop } from './useItemDragDrop'
-import type { Draggable, DragEventContext } from './useItemDragDrop'
-import { EditableSegment } from './EditableSegment'
-import type { CaptionEditPatch } from './makeCaptionEdit'
-
-interface CaptionTrackRowProps {
-  captionTrack: Captions | undefined
-  /** Project frame rate — needed only to make the click-seek land INSIDE the
-   *  clicked segment once the preview quantizes the clock (see the click
-   *  handler below). */
-  fps: number
-  /** Shared selection id — see the file header. Null when nothing is selected. */
-  selectedCaptionId: string | null
-  onSelectCaption?: (id: string | null) => void
-  /** The single commit channel for both text edits and retiming. */
-  onCaptionSegmentChange?: (segmentId: string, patch: CaptionEditPatch) => void
-}
-
-export default function CaptionTrackRow({ captionTrack, fps, selectedCaptionId, onSelectCaption, onCaptionSegmentChange }: CaptionTrackRowProps) {
-  const { totalDuration, snapBoundaries, scrollRef, zoomRef, overlayDraggedRef, clock } = useTimelineContext()
-  const { beginResize } = useItemDragDrop({
-    totalDuration,
-    snapBoundaries,
-    scrollRef,
-    zoomRef,
-    draggedFlagRef: overlayDraggedRef,
-  })
-
-  // In-flight edge-drag geometry for the dragged segment only, keyed by id so a
-  // stale `live` from a previous gesture can never leak onto a different
-  // segment. Never written to the project mid-drag — see file header.
-  const [live, setLive] = useState<{ id: string; start: number; end: number } | null>(null)
-  // Which segment's text is currently in the contentEditable state (double-
-  // click to enter, blur to exit). At most one at a time — no multi-edit.
-  const [editingId, setEditingId] = useState<string | null>(null)
-
-  const segments = captionTrack?.segments ?? []
-
-  // Empty state: no `project.captions`, or a track with zero segments. Still
-  // rendered (not `null`) so the operator can see captions exist as a concept
-  // even before any exist.
-  if (segments.length === 0) {
-    return (
-      <div className={trackRow}>
-        <PlayheadLine />
-        <div className="absolute inset-0 flex items-center px-2 pointer-events-none">
-          <span className="text-[10px] text-gray-500 italic select-none">Captions</span>
-        </div>
-      </div>
-    )
-  }
-
-  function handleEdgeDrag(e: React.MouseEvent, seg: CaptionSegment, edge: 'start' | 'end') {
-    if (!seg.id || !onCaptionSegmentChange) return
-    const segId = seg.id
-    const origStart = seg.start
-    const origEnd = seg.end
-    let committedValue = edge === 'start' ? origStart : origEnd
-
-    beginResize(e, seg as Draggable, edge, {
-      onLivePreview: ({ item: resized }: DragEventContext) => {
-        // `resized` is the hook's `{ ...seg, [edge]: <new value> }` — it spreads
-        // the full segment (text, words, offsets) because the hook is generic
-        // and doesn't know it's a caption. Read ONLY the one numeric field that
-        // changed; the rest of `resized` is discarded, never persisted.
-        committedValue = edge === 'start' ? resized.start : resized.end
-        setLive({
-          id: segId,
-          start: edge === 'start' ? committedValue : origStart,
-          end: edge === 'end' ? committedValue : origEnd,
-        })
-      },
-      onCommit: () => {
-        // `beginResize` commits unconditionally on mouseup — unlike `beginDrag`
-        // it has no travel threshold — so a bare click on the 6px edge handle
-        // lands here with the edge untouched. Committing that would push an
-        // undo entry and queue a save for an unchanged project, since
-        // onCaptionSegmentChange is a full `sync.mutate` (see file header).
-        if (committedValue === (edge === 'start' ? origStart : origEnd)) {
-          setLive(null)
-          return
-        }
-        // Patch carries ONLY the dragged edge — never `text` — so
-        // makeCaptionEdit never respreads word timings on a pure retime.
-        onCaptionSegmentChange(segId, edge === 'start' ? { start: committedValue } : { end: committedValue })
-        setLive(null)
-      },
-    })
-  }
-
-  return (
-    <div className={trackRow}>
-      <PlayheadLine />
-      {segments.map((seg) => {
-        // `live` must be checked for null FIRST: an id-less segment (seg.id
-        // === undefined, e.g. before backfillCaptionIds runs) would otherwise
-        // compare equal to a null `live` (undefined === undefined), making
-        // isLive true and dereferencing null on the next two lines.
-        const isLive = live !== null && live.id === seg.id
-        const start = isLive ? live.start : seg.start
-        const end = isLive ? live.end : seg.end
-        const isSelected = !!seg.id && selectedCaptionId === seg.id
-        const isEditing = !!seg.id && editingId === seg.id
-        // A segment briefly lacks an id in the window before VideoEditor's
-        // backfillCaptionIds effect mints one — `handleCaptionSegmentChange`
-        // only accepts a string id, so stay non-interactive until then (same
-        // guard CaptionPreview uses for its selection box).
-        const canInteract = !!seg.id
-
-        return (
-          <div
-            key={seg.id ?? `${seg.start}-${seg.end}`}
-            className={`absolute top-1 bottom-1 rounded flex items-center overflow-hidden
-              ${canInteract ? 'cursor-pointer' : ''}
-              ${isSelected ? 'bg-purple-600/70 ring-1 ring-inset ring-purple-300/80' : 'bg-purple-700/40 hover:bg-purple-600/50 border border-purple-500/40'}`}
-            style={{ left: `${pct(start, totalDuration)}%`, width: `${pct(end - start, totalDuration)}%` }}
-            onClick={(e) => {
-              e.stopPropagation()
-              if (!canInteract || overlayDraggedRef.current) return
-              onSelectCaption?.(seg.id!)
-              // Seek to the segment on a fresh select (not on re-clicking an
-              // already-selected block). Load-bearing: the preview only shows
-              // drag handles for the segment active AT THE PLAYHEAD, so
-              // selecting from here without seeking would select a segment the
-              // preview can't yet act on.
-              //
-              // Half a frame IN, not to `start` itself. CaptionPreview snaps the
-              // clock to the frame grid before running the templates' own
-              // `t >= start && t < end` test (`t = Math.round(currentTime * fps)
-              // / fps`), and caption starts are arbitrary floats out of Whisper.
-              // Seeking to exactly `start` rounds DOWN into the PREVIOUS segment
-              // whenever `start * fps` has a fractional part below 0.5 — about
-              // half of all segments (e.g. start 3.44 at 30fps → frame 103 →
-              // t 3.4333 < 3.44). `start + 0.5 / fps` puts `t` in
-              // [start, start + 1/fps), always inside: `beginResize` enforces a
-              // 0.1s floor on segment duration, so no segment is under a frame.
-              if (!isSelected) clock.set(start + 0.5 / fps)
-            }}
-            onDoubleClick={(e) => {
-              e.stopPropagation()
-              if (!canInteract) return
-              setEditingId(seg.id!)
-            }}
-          >
-            {canInteract && (
-              <div
-                className="absolute left-0 top-0 bottom-0 w-1.5 cursor-ew-resize z-10 hover:bg-purple-300/40"
-                onMouseDown={(e) => handleEdgeDrag(e, seg, 'start')}
-              />
-            )}
-            <span className="text-[10px] text-purple-100 truncate flex-1 min-w-0 px-2">
-              {isEditing ? (
-                <EditableSegmentAutofocus
-                  seg={seg}
-                  onEdit={(text) => onCaptionSegmentChange?.(seg.id!, { text })}
-                  onDone={() => setEditingId(null)}
-                />
-              ) : (
-                seg.text
-              )}
-            </span>
-            {canInteract && (
-              <div
-                className="absolute right-0 top-0 bottom-0 w-1.5 cursor-ew-resize z-10 hover:bg-purple-300/40"
-                onMouseDown={(e) => handleEdgeDrag(e, seg, 'end')}
-              />
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-// Wraps EditableSegment (unmodified — the same component TranscriptPanel uses)
-// with focus-on-mount. Double-click swaps a plain label for this contentEditable
-// span on the NEXT render, by which point the browser's native dblclick text
-// selection has already resolved against the old, non-editable element — so
-// without this the operator would need a third click just to place a cursor.
-function EditableSegmentAutofocus({ seg, onEdit, onDone }: { seg: CaptionSegment; onEdit: (text: string) => void; onDone: () => void }) {
-  const wrapRef = useRef<HTMLSpanElement>(null)
-
-  useEffect(() => {
-    const el = wrapRef.current?.querySelector<HTMLElement>('[contenteditable]')
-    if (!el) return
-    el.focus()
-    // Place the caret at the end rather than leaving it at the browser default
-    // (start), so continuing to type appends instead of interrupting mid-word.
-    const range = document.createRange()
-    range.selectNodeContents(el)
-    range.collapse(false)
-    const sel = window.getSelection()
-    sel?.removeAllRanges()
-    sel?.addRange(range)
-  }, [])
-
-  return (
-    <span ref={wrapRef} onBlur={onDone} onClick={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()}>
-      <EditableSegment seg={seg} onEdit={onEdit} />
-    </span>
-  )
-}

package/src/video/timeline/PlayheadLine.tsx

@@ -1,18 +0,0 @@
-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/TranscriptModal.tsx

@@ -1,70 +0,0 @@
-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` deliberately NOT accepted here: `makeCaptionEdit` fires
-  // both callbacks it's given with the same updated project (see
-  // makeCaptionEdit.ts), and a text edit only fires once (on blur), so there is
-  // no live-preview gesture to route through a second channel — only
-  // `onCaptionEdit` (the commit path) is needed. Accepting-but-ignoring it would
-  // invite a future call site to re-introduce the double-commit bug this fixed.
-  onCaptionEdit?: (project: Project) => void
-  onClose: () => void
-}
-
-export default function TranscriptModal({ captionTrack, currentTime, project, 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'}`}>
-                  {/* Commit-only — see the file-header note on why `onProjectChange`
-                      isn't accepted/passed here. */}
-                  <EditableSegment seg={seg} onEdit={makeCaptionEdit(i, project, undefined, onCaptionEdit)} />
-                </span>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}

package/src/video/timeline/TranscriptPanel.tsx

@@ -1,273 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import type { Project } from '../../types'
-import { formatTime } from './utils'
-import { EditableSegment } from './EditableSegment'
-import { makeCaptionEdit, type CaptionEditPatch } 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
-  captionTrack: Project['captions'] | undefined
-  currentTime: number
-  onCaptionEdit?: (project: Project) => void
-  onProjectChange?: (project: Project) => void
-  onExpand: () => void
-  /** Opens the caption-regeneration modal. Provided only when the host adapter
-   *  supports `generateCaptions`; absent → the "Regenerate" button is hidden. */
-  onRegenerateCaptions?: () => void
-  /** Selected caption segment id (shared with the preview's selection box —
-   *  see CaptionPreview/CaptionTrackRow). When set and it resolves to a real
-   *  segment, the base color swatch below targets that segment's `color`
-   *  instead of the track-level `color`. */
-  selectedCaptionId?: string | null
-  /** Commit a single-segment patch — the same channel CaptionTrackRow's
-   *  edge-drag and text edits use (see makeCaptionEdit.ts). Used here as the
-   *  per-segment color swatch's commit path. */
-  onCaptionSegmentChange?: (segmentId: string, patch: CaptionEditPatch) => void
-}
-
-export default function TranscriptPanel({ project, captionTrack, currentTime, onCaptionEdit, onProjectChange, onExpand, onRegenerateCaptions, selectedCaptionId, onCaptionSegmentChange }: TranscriptPanelProps) {
-  const segs = captionTrack?.segments ?? []
-  const [confirmRemove, setConfirmRemove] = useState(false)
-  const removeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  // Live slider value during a drag — only committed (persisted) on
-  // pointer-up/key-up so mid-drag ticks don't each trigger a server PUT.
-  const [fontsize, setFontsize] = useState(captionTrack?.fontsize ?? 46)
-
-  useEffect(() => {
-    setFontsize(captionTrack?.fontsize ?? 46)
-  }, [captionTrack?.fontsize])
-
-  useEffect(() => {
-    return () => {
-      if (removeTimeoutRef.current) clearTimeout(removeTimeoutRef.current)
-    }
-  }, [])
-  // 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 flex-wrap justify-end">
-          {captionTrack && (['word-by-word', 'pop', 'karaoke', 'subtitle', 'highlight-box', 'outline', 'clean'] 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>
-            )
-          })}
-          {captionTrack && (
-            <div className="flex items-center gap-1">
-              <input
-                type="range"
-                min={28}
-                max={120}
-                step={2}
-                value={fontsize}
-                className="w-20 sm:w-24 accent-purple-500"
-                onChange={e => {
-                  if (!project.captions) return
-                  const v = Number(e.target.value)
-                  setFontsize(v)
-                  // Live preview only — cheap local-state update, no save.
-                  onProjectChange?.({ ...project, captions: { ...project.captions, fontsize: v } })
-                }}
-                onPointerUp={e => {
-                  if (!project.captions) return
-                  const v = Number((e.target as HTMLInputElement).value)
-                  onCaptionEdit?.({ ...project, captions: { ...project.captions, fontsize: v } })
-                }}
-                onKeyUp={e => {
-                  if (!project.captions) return
-                  const v = Number((e.target as HTMLInputElement).value)
-                  onCaptionEdit?.({ ...project, captions: { ...project.captions, fontsize: v } })
-                }}
-              />
-              <span className="text-[10px] text-gray-500 dark:text-gray-400 font-mono w-9 text-right">
-                {fontsize}px
-              </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 } })
-            }
-
-            // Per-segment color: when a real segment is selected, the base
-            // swatch below targets ITS color instead of the track's. Live
-            // preview still flows through `onProjectChange` — a locally
-            // patched project, exactly the channel every other control on
-            // this panel already uses for live preview — but the commit
-            // goes through `onCaptionSegmentChange`, the single-segment
-            // patch channel (see makeCaptionEdit.ts), instead of rewriting
-            // the whole captions object through `onCaptionEdit`. Each is
-            // fired from exactly one of SwatchInput's onChange/onCommit, so
-            // (as with the track-level swatch above) one gesture produces
-            // exactly one commit — never both channels for the same value.
-            const selectedSeg = selectedCaptionId
-              ? segs.find(s => s.id === selectedCaptionId)
-              : undefined
-            const liveSegColor = (v: string) => {
-              if (!project.captions || !selectedSeg) return
-              onProjectChange?.({
-                ...project,
-                captions: {
-                  ...project.captions,
-                  segments: project.captions.segments.map(s =>
-                    s.id === selectedSeg.id ? { ...s, color: v } : s,
-                  ),
-                },
-              })
-            }
-            const commitSegColor = (v: string) => {
-              if (!selectedSeg) return
-              onCaptionSegmentChange?.(selectedSeg.id!, { color: v })
-            }
-
-            return (
-              <div className="flex items-center gap-1.5">
-                <SwatchInput
-                  size="sm"
-                  showValue={false}
-                  title={selectedSeg ? 'Selected segment text color' : 'Caption text color'}
-                  ariaLabel={selectedSeg ? 'Selected segment text color' : 'Caption text color'}
-                  value={toHex(selectedSeg ? (selectedSeg.color ?? captionTrack.color) : captionTrack.color, '#ffffff')}
-                  onChange={v => selectedSeg ? liveSegColor(v) : live({ color: v })}
-                  onCommit={v => selectedSeg ? commitSegColor(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"
-              onClick={() => onRegenerateCaptions?.()}
-            >
-              Regenerate
-            </button>
-          )}
-          {captionTrack && (
-            <button
-              className={`text-[10px] rounded px-2 py-0.5 transition-all border ${
-                confirmRemove
-                  ? 'bg-red-500/20 border-red-500/60 text-red-400'
-                  : '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 (!confirmRemove) {
-                  setConfirmRemove(true)
-                  if (removeTimeoutRef.current) clearTimeout(removeTimeoutRef.current)
-                  removeTimeoutRef.current = setTimeout(() => setConfirmRemove(false), 3000)
-                  return
-                }
-                if (removeTimeoutRef.current) clearTimeout(removeTimeoutRef.current)
-                setConfirmRemove(false)
-                // Persistence needs an explicit `null` to clear the field server-side
-                // (a live PUT test confirmed `undefined` is dropped from the JSON body).
-                onCaptionEdit?.({ ...project, captions: null as unknown as undefined })
-              }}
-            >
-              {confirmRemove ? 'Really remove?' : 'Remove'}
-            </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'}>
-                  {/* Commit-only: `onProjectChange` is this component's LIVE-preview
-                      channel (see the fontsize/color controls above) — but a text
-                      edit fires once, on blur, and is already a complete, discrete
-                      change, not a continuous gesture. Passing both callbacks here
-                      would double-fire `sync.mutate` for one edit (two undo entries,
-                      two queued saves); `onCaptionEdit` is the single commit path. */}
-                  <EditableSegment seg={seg} onEdit={makeCaptionEdit(i, project, undefined, onCaptionEdit)} />
-                </span>
-              </span>
-            )
-          })}
-        </p>
-      )}
-      </div>
-    </div>
-  )
-}