@bycrux/editor 0.11.1 → 0.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "private": false,
   "type": "module",
   "exports": {

package/src/schema.ts

@@ -46,6 +46,13 @@ export interface CaptionSegment {
   // transform, not a font-size change, so it scales the background box and
   // text stroke too and does NOT re-wrap the text. Default 1.
   scale?: number
+  // Per-segment override of the track-level `Captions.color` (base text color
+  // only — not the per-style accent fields below). CSS color (hex or named).
+  // Absent → inherits the track-level color → the template's own default.
+  // Honored only by the JSX browser preview / Puppeteer render path; the
+  // ffmpeg `drawtext` render branch has no per-segment concept and keeps
+  // reading only the track-level `color`.
+  color?: string
 }
 
 export interface Captions {

package/src/video/timeline/Timeline.tsx

@@ -410,6 +410,8 @@ export default function Timeline({ project, clock, onProjectChange, onCaptionEdi
         onProjectChange={onProjectChange}
         onExpand={() => setTranscriptModalOpen(true)}
         onRegenerateCaptions={onRegenerateCaptions}
+        selectedCaptionId={selectedCaptionId}
+        onCaptionSegmentChange={onCaptionSegmentChange}
       />
 
       {/* ── Transcript modal ── */}

package/src/video/timeline/TranscriptPanel.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import type { Project } from '../../types'
 import { formatTime } from './utils'
 import { EditableSegment } from './EditableSegment'
-import { makeCaptionEdit } from './makeCaptionEdit'
+import { makeCaptionEdit, type CaptionEditPatch } from './makeCaptionEdit'
 import { SwatchInput } from '../../ui'
 
 // Each caption style reads a different accent-color prop in its render template
@@ -35,9 +35,18 @@ interface TranscriptPanelProps {
   /** 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 }: TranscriptPanelProps) {
+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)
@@ -132,16 +141,48 @@ export default function TranscriptPanel({ project, captionTrack, currentTime, on
               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="Caption text color"
-                  ariaLabel="Caption text color"
-                  value={toHex(captionTrack.color, '#ffffff')}
-                  onChange={v => live({ color: v })}
-                  onCommit={v => commit({ color: v })}
+                  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

package/src/video/timeline/__tests__/TranscriptPanel.test.tsx

@@ -10,9 +10,14 @@ function makeProject(style: Captions['style'], extra: Partial<Captions> = {}): P
   return { id: 'p1', captions: { style, segments: [], ...extra } } as unknown as Project
 }
 
-function renderPanel(style: Captions['style'], extra: Partial<Captions> = {}) {
+function renderPanel(
+  style: Captions['style'],
+  extra: Partial<Captions> = {},
+  opts: { selectedCaptionId?: string | null } = {},
+) {
   const onCaptionEdit = vi.fn()
   const onProjectChange = vi.fn()
+  const onCaptionSegmentChange = vi.fn()
   const project = makeProject(style, extra)
   render(
     <TranscriptPanel
@@ -21,10 +26,12 @@ function renderPanel(style: Captions['style'], extra: Partial<Captions> = {}) {
       currentTime={0}
       onCaptionEdit={onCaptionEdit}
       onProjectChange={onProjectChange}
+      onCaptionSegmentChange={onCaptionSegmentChange}
+      selectedCaptionId={opts.selectedCaptionId ?? null}
       onExpand={() => {}}
     />,
   )
-  return { onCaptionEdit, onProjectChange }
+  return { onCaptionEdit, onProjectChange, onCaptionSegmentChange }
 }
 
 describe('TranscriptPanel caption color controls', () => {
@@ -84,6 +91,76 @@ describe('TranscriptPanel caption color controls', () => {
   })
 })
 
+describe('TranscriptPanel per-segment caption color', () => {
+  it('no selection: base swatch is unchanged — still previews/commits the track-level color', () => {
+    const { onCaptionEdit, onProjectChange } = renderPanel('karaoke', {
+      segments: [{ id: 'cap-0', text: 'hi', start: 0, end: 2 }],
+    })
+    const input = screen.getByLabelText('Caption text color') as HTMLInputElement
+
+    fireEvent.change(input, { target: { value: '#76b900' } })
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+    expect(onProjectChange.mock.calls[0][0].captions.color).toBe('#76b900')
+
+    fireEvent.blur(input, { target: { value: '#76b900' } })
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit.mock.calls[0][0].captions.color).toBe('#76b900')
+  })
+
+  it('a selected segment: swatch previews live via onProjectChange (only that segment patched) and commits via onCaptionSegmentChange — never onCaptionEdit', () => {
+    const { onCaptionEdit, onProjectChange, onCaptionSegmentChange } = renderPanel('karaoke', {
+      color: '#ffffff',
+      segments: [
+        { id: 'cap-0', text: 'hi', start: 0, end: 2 },
+        { id: 'cap-1', text: 'there', start: 2, end: 4 },
+      ],
+    }, { selectedCaptionId: 'cap-1' })
+
+    const input = screen.getByLabelText('Selected segment text color') as HTMLInputElement
+
+    // Live preview — onChange fires on every pick.
+    fireEvent.change(input, { target: { value: '#123456' } })
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+    const previewed = onProjectChange.mock.calls[0][0]
+    expect(previewed.captions.segments[1].color).toBe('#123456')
+    expect(previewed.captions.segments[0].color).toBeUndefined() // only the selected segment changes
+    expect(previewed.captions.color).toBe('#ffffff')             // track-level color untouched
+    expect(onCaptionSegmentChange).not.toHaveBeenCalled()
+    expect(onCaptionEdit).not.toHaveBeenCalled()
+
+    // Commit — onBlur fires once, through the segment-patch channel, not
+    // the whole-track onCaptionEdit channel. One commit per gesture.
+    fireEvent.blur(input, { target: { value: '#123456' } })
+    expect(onCaptionSegmentChange).toHaveBeenCalledTimes(1)
+    expect(onCaptionSegmentChange).toHaveBeenCalledWith('cap-1', { color: '#123456' })
+    expect(onCaptionEdit).not.toHaveBeenCalled()
+  })
+
+  it("the swatch reflects the selected segment's own color when it has one", () => {
+    renderPanel('karaoke', {
+      color: '#abcdef',
+      segments: [{ id: 'cap-0', text: 'hi', start: 0, end: 2, color: '#00ff00' }],
+    }, { selectedCaptionId: 'cap-0' })
+    expect((screen.getByLabelText('Selected segment text color') as HTMLInputElement).value).toBe('#00ff00')
+  })
+
+  it('the swatch falls back to the track color when the selected segment has none of its own', () => {
+    renderPanel('karaoke', {
+      color: '#abcdef',
+      segments: [{ id: 'cap-0', text: 'hi', start: 0, end: 2 }],
+    }, { selectedCaptionId: 'cap-0' })
+    expect((screen.getByLabelText('Selected segment text color') as HTMLInputElement).value).toBe('#abcdef')
+  })
+
+  it('a selectedCaptionId that matches no segment falls back to track-level behavior', () => {
+    renderPanel('karaoke', {
+      segments: [{ id: 'cap-0', text: 'hi', start: 0, end: 2 }],
+    }, { selectedCaptionId: 'cap-does-not-exist' })
+    expect(screen.getByLabelText('Caption text color')).toBeTruthy()
+    expect(screen.queryByLabelText('Selected segment text color')).toBeNull()
+  })
+})
+
 describe('TranscriptPanel caption text edits', () => {
   // Regression: makeCaptionEdit fires every callback it's given with the same
   // updated project. TranscriptPanel used to pass BOTH onProjectChange and