@bycrux/editor 0.8.8 → 0.9.0

package/package.json

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

package/src/carousel/CarouselEditor.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { RefreshCw, AlertCircle, Download, Info } from 'lucide-react'
+import { RefreshCw, AlertCircle, Download, Info, Undo2, Redo2 } from 'lucide-react'
 import type { Project, Slide, CarouselElement, ImageElement, CarouselEditorProps, OverlayFactory } from '../types'
 import { applyTheme, defaultMontajTheme } from '../theme'
 import { useProjectState } from '../state/use-project-state'
@@ -409,19 +409,39 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
         {/* TOOLBAR ROW: Refresh on the left; host toolbar actions + Render on the
             right. Pinned (shrink-0) above the scrolling canvas area. */}
         <div className="flex-shrink-0 flex items-center justify-between gap-2 px-4 py-3 border-b border-[var(--editor-border)]">
-          <button
-            onClick={handleRefresh}
-            disabled={refreshing}
-            className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-colors ${
-              refreshState === 'err'
-                ? 'text-red-300 border-red-500/40 bg-red-950/60 hover:bg-red-900/70'
-                : 'text-[var(--editor-text)] border-[var(--editor-border)] bg-[var(--editor-surface)]/80 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)]'
-            }`}
-            title={refreshState === 'err' ? 'Refresh failed — check connection' : 'Refresh project'}
-          >
-            {refreshState === 'err' ? <AlertCircle size={18} /> : <RefreshCw size={18} className={refreshing ? 'animate-spin' : ''} />}
-            <span className="text-xs font-medium">Refresh</span>
-          </button>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleRefresh}
+              disabled={refreshing}
+              className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-colors ${
+                refreshState === 'err'
+                  ? 'text-red-300 border-red-500/40 bg-red-950/60 hover:bg-red-900/70'
+                  : 'text-[var(--editor-text)] border-[var(--editor-border)] bg-[var(--editor-surface)]/80 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)]'
+              }`}
+              title={refreshState === 'err' ? 'Refresh failed — check connection' : 'Refresh project'}
+            >
+              {refreshState === 'err' ? <AlertCircle size={18} /> : <RefreshCw size={18} className={refreshing ? 'animate-spin' : ''} />}
+              <span className="text-xs font-medium">Refresh</span>
+            </button>
+            <button
+              onClick={() => state.undo()}
+              disabled={!state.canUndo}
+              className="flex items-center justify-center p-2 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)]/80 text-[var(--editor-text)] transition-colors hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)] disabled:opacity-40 disabled:cursor-not-allowed"
+              title="Undo (Cmd/Ctrl+Z)"
+              aria-label="Undo"
+            >
+              <Undo2 size={18} />
+            </button>
+            <button
+              onClick={() => state.redo()}
+              disabled={!state.canRedo}
+              className="flex items-center justify-center p-2 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)]/80 text-[var(--editor-text)] transition-colors hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)] disabled:opacity-40 disabled:cursor-not-allowed"
+              title="Redo (Cmd/Ctrl+Shift+Z)"
+              aria-label="Redo"
+            >
+              <Redo2 size={18} />
+            </button>
+          </div>
 
           <div className="flex items-center gap-2">
             {slots?.toolbarActions}

package/src/carousel/SlidePropertyPanel.tsx

@@ -9,7 +9,7 @@ import type {
   GlobalOverlayProp,
   EditorAdapter,
 } from '../types'
-import { Button, cn, inspectorInputClass } from '../ui'
+import { Button, cn, inspectorInputClass, SwatchInput } from '../ui'
 import { TextFormattingToolbar } from '../text/TextFormattingToolbar'
 
 function parseNumber(v: string): number | null {
@@ -173,40 +173,6 @@ function PropEditor({
   )
 }
 
-// Color control that actually reads as one: a filled rounded swatch (the live
-// value) sitting next to the hex string, the whole row clickable to open the
-// native color picker. The transparent <input type="color"> overlays the
-// swatch so the OS picker anchors there.
-function SwatchInput({
-  value,
-  onChange,
-  ariaLabel,
-}: {
-  value: string
-  onChange: (v: string) => void
-  ariaLabel: string
-}) {
-  return (
-    <div className="flex items-center gap-2.5">
-      <label className="relative h-7 w-7 shrink-0 cursor-pointer">
-        <span
-          className="block h-full w-full rounded-md border border-[var(--editor-border)] shadow-sm"
-          style={{ backgroundColor: value }}
-          aria-hidden
-        />
-        <input
-          type="color"
-          value={value}
-          onChange={e => onChange(e.target.value)}
-          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
-          aria-label={ariaLabel}
-        />
-      </label>
-      <span className="font-mono text-sm uppercase text-[var(--editor-text)]/80">{value}</span>
-    </div>
-  )
-}
-
 export default function SlidePropertyPanel({
   project,
   slide,

package/src/schema.ts

@@ -43,13 +43,23 @@ export interface CaptionSegment {
 }
 
 export interface Captions {
-  style: 'word-by-word' | 'pop' | 'karaoke' | 'subtitle'
+  style: 'word-by-word' | 'pop' | 'karaoke' | 'subtitle' | 'highlight-box' | 'outline' | 'clean'
   segments: CaptionSegment[]
-  // ffmpeg-drawtext render params — ignored by JSX preview, used by render.js ffmpeg branch
+  // `color` and `fontsize` are read by BOTH paths: the JSX browser preview /
+  // Puppeteer render (spread into the caption template props; `fontsize`→`fontSize`)
+  // and the ffmpeg-drawtext render branch. `position` and `bgColor` are consumed
+  // only by the ffmpeg-drawtext branch and ignored by the JSX preview.
   position?: 'center' | 'top-left' | 'bottom-left'
-  color?: string
+  color?: string          // base caption text color
   fontsize?: number
   bgColor?: string
+  // Per-style accent color fields, each read by the matching JSX caption template.
+  // A single UI control writes whichever one the active style uses (see TranscriptPanel).
+  accentColor?: string    // active-word/box accent — highlight-box, outline
+  highlightColor?: string // active word — karaoke
+  activeColor?: string    // active word — pop
+  backgroundColor?: string// text box background — subtitle
+  googleFonts?: string[]  // Google Fonts family specs for the caption template (e.g. ["Figtree:wght@700"])
 }
 
 export interface VisualItem {

package/src/ui/SwatchInput.tsx

@@ -0,0 +1,57 @@
+import { cn } from './utils'
+
+// Color control that actually reads as one: a filled rounded swatch (the live
+// value) with the native <input type="color"> overlaid transparently so the OS
+// picker anchors on the swatch. Optionally shows the hex string beside it.
+//
+// `onChange` fires live on every pick (drive a cheap preview). `onCommit`, if
+// given, fires on blur (when the OS picker closes) — use it to persist once
+// instead of on every intermediate value, mirroring a slider's drag→commit.
+export interface SwatchInputProps {
+  value: string
+  onChange: (v: string) => void
+  /** Fired on blur (picker closed) — for callers that preview live via onChange
+   *  and persist only on commit. Omit to treat every onChange as final. */
+  onCommit?: (v: string) => void
+  ariaLabel: string
+  /** Render the hex string next to the swatch. Default true. */
+  showValue?: boolean
+  /** Swatch size. `sm` (h-5) suits compact toolbars; `md` (h-7) is the default. */
+  size?: 'sm' | 'md'
+  /** Tooltip on the row. */
+  title?: string
+}
+
+export function SwatchInput({
+  value,
+  onChange,
+  onCommit,
+  ariaLabel,
+  showValue = true,
+  size = 'md',
+  title,
+}: SwatchInputProps) {
+  const box = size === 'sm' ? 'h-5 w-5' : 'h-7 w-7'
+  return (
+    <div className="flex items-center gap-2.5" title={title}>
+      <label className={cn('relative shrink-0 cursor-pointer', box)}>
+        <span
+          className="block h-full w-full rounded-md border border-[var(--editor-border)] shadow-sm"
+          style={{ backgroundColor: value }}
+          aria-hidden
+        />
+        <input
+          type="color"
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          onBlur={e => onCommit?.(e.target.value)}
+          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+          aria-label={ariaLabel}
+        />
+      </label>
+      {showValue && (
+        <span className="font-mono text-sm uppercase text-[var(--editor-text)]/80">{value}</span>
+      )}
+    </div>
+  )
+}

package/src/ui/index.ts

@@ -9,6 +9,8 @@ export type { InputProps } from './input'
 export { Label } from './label'
 export { Select } from './select'
 export type { SelectProps } from './select'
+export { SwatchInput } from './SwatchInput'
+export type { SwatchInputProps } from './SwatchInput'
 export { Switch } from './switch'
 export { Textarea } from './textarea'
 export type { TextareaProps } from './textarea'

package/src/video/VideoEditor.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Crop, Info, Magnet } from 'lucide-react'
+import { Crop, Info, Magnet, Undo2 } from 'lucide-react'
 import type { Project, VideoEditorProps } from '../types'
 import { VideoSourceCropModal } from '../crop/VideoSourceCropModal'
 import ControlsInfoModal, { VIDEO_CONTROLS } from '../ControlsInfoModal'
@@ -475,6 +475,15 @@ function ReviewSurface<P extends Project>({
           >
             <Info size={12} />
           </button>
+          <button
+            onClick={handleUndo}
+            disabled={!canUndo}
+            title="Undo (Cmd/Ctrl+Z)"
+            aria-label="Undo"
+            className="flex items-center justify-center w-5 h-5 rounded transition-colors text-[var(--editor-text)]/60 bg-transparent hover:text-[var(--editor-text)] disabled:opacity-30 disabled:cursor-not-allowed"
+          >
+            <Undo2 size={12} />
+          </button>
           <button
             onClick={() => handleSplit()}
             title="Split at playhead (S) — selected item or all clips"

package/src/video/preview/CaptionPreview.tsx

@@ -58,8 +58,17 @@ export default function CaptionPreview({ track, currentTime, fps, compileOverlay
 
   const frame    = Math.round(currentTime * fps)
   const lastSeg  = track.segments[track.segments.length - 1]
+
+  // Theme props for the template: everything on the track except style/segments
+  // (handled separately) and googleFonts (a render-time font-loading hint, not
+  // a template prop). Normalize the legacy lowercase `fontsize` key to the
+  // camelCase `fontSize` templates actually read.
+  const { style: _style, segments: _segments, googleFonts: _googleFonts, fontsize, ...theme } = track
+  const themeProps: Record<string, unknown> = { ...theme }
+  if (fontsize != null) themeProps.fontSize = fontsize
+
   const element  = (factory && scale !== null)
-    ? factory(frame, fps, Math.round((lastSeg?.end ?? 0) * fps), { segments: track.segments })
+    ? factory(frame, fps, Math.round((lastSeg?.end ?? 0) * fps), { segments: track.segments, ...themeProps })
     : null
 
   return (

package/src/video/timeline/Timeline.tsx

@@ -138,7 +138,12 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
     const fps = project.settings?.fps ?? 30
     const frame = 1 / fps
     const onKey = (e: globalThis.KeyboardEvent) => {
+      // While the transcript modal is open, or the caret is in editable text
+      // (caption segments are contentEditable), arrows move the text cursor —
+      // never the playhead.
+      if (transcriptModalOpen) return
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
+      if ((e.target as HTMLElement).isContentEditable) return
       if (e.key === 'Escape') { setMarkers([null, null]); return }
       if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
       e.preventDefault()
@@ -152,7 +157,7 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
     }
     document.addEventListener('keydown', onKey)
     return () => document.removeEventListener('keydown', onKey)
-  }, [totalDuration, currentTime, onTimeUpdate, project.settings?.fps])
+  }, [totalDuration, currentTime, onTimeUpdate, project.settings?.fps, transcriptModalOpen])
 
   // Derive selection from two placed markers
   const selection = markers[0] !== null && markers[1] !== null

package/src/video/timeline/TranscriptPanel.tsx

@@ -1,7 +1,29 @@
+import { useEffect, useRef, useState } from 'react'
 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
@@ -17,6 +39,21 @@ interface TranscriptPanelProps {
 
 export default function TranscriptPanel({ project, captionTrack, currentTime, onCaptionEdit, onProjectChange, onExpand, onRegenerateCaptions }: 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
@@ -31,8 +68,8 @@ export default function TranscriptPanel({ project, captionTrack, currentTime, on
     <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 => {
+        <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
@@ -52,6 +89,74 @@ export default function TranscriptPanel({ project, captionTrack, currentTime, on
               </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 } })
+            }
+            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"
@@ -60,6 +165,30 @@ export default function TranscriptPanel({ project, captionTrack, currentTime, on
               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"

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

@@ -0,0 +1,85 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import type { Project } from '../../../types'
+import type { Captions } from '../../../schema'
+import TranscriptPanel from '../TranscriptPanel'
+
+afterEach(() => cleanup())
+
+function makeProject(style: Captions['style'], extra: Partial<Captions> = {}): Project {
+  return { id: 'p1', captions: { style, segments: [], ...extra } } as unknown as Project
+}
+
+function renderPanel(style: Captions['style'], extra: Partial<Captions> = {}) {
+  const onCaptionEdit = vi.fn()
+  const onProjectChange = vi.fn()
+  const project = makeProject(style, extra)
+  render(
+    <TranscriptPanel
+      project={project}
+      captionTrack={project.captions}
+      currentTime={0}
+      onCaptionEdit={onCaptionEdit}
+      onProjectChange={onProjectChange}
+      onExpand={() => {}}
+    />,
+  )
+  return { onCaptionEdit, onProjectChange }
+}
+
+describe('TranscriptPanel caption color controls', () => {
+  it('previews live on change and commits on blur, writing captions.color', () => {
+    const { onCaptionEdit, onProjectChange } = renderPanel('karaoke')
+    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')
+    expect(onCaptionEdit).not.toHaveBeenCalled() // live preview must not persist
+
+    fireEvent.blur(input, { target: { value: '#76b900' } })
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit.mock.calls[0][0].captions.color).toBe('#76b900')
+  })
+
+  it('writes the accent to the field the active style actually reads', () => {
+    // karaoke → highlightColor
+    let h = renderPanel('karaoke')
+    fireEvent.blur(screen.getByLabelText('Caption highlight color'), { target: { value: '#111111' } })
+    expect(h.onCaptionEdit.mock.calls[0][0].captions.highlightColor).toBe('#111111')
+    cleanup()
+
+    // pop → activeColor
+    h = renderPanel('pop')
+    fireEvent.blur(screen.getByLabelText('Caption active color'), { target: { value: '#222222' } })
+    expect(h.onCaptionEdit.mock.calls[0][0].captions.activeColor).toBe('#222222')
+    cleanup()
+
+    // subtitle → backgroundColor
+    h = renderPanel('subtitle')
+    fireEvent.blur(screen.getByLabelText('Caption box color'), { target: { value: '#333333' } })
+    expect(h.onCaptionEdit.mock.calls[0][0].captions.backgroundColor).toBe('#333333')
+    cleanup()
+
+    // highlight-box → accentColor
+    h = renderPanel('highlight-box')
+    fireEvent.blur(screen.getByLabelText('Caption accent color'), { target: { value: '#444444' } })
+    expect(h.onCaptionEdit.mock.calls[0][0].captions.accentColor).toBe('#444444')
+  })
+
+  it('hides the accent swatch for styles with no accent', () => {
+    renderPanel('clean')
+    expect(screen.getByLabelText('Caption text color')).toBeTruthy()
+    expect(screen.queryByLabelText(/(accent|highlight|active|box) color/i)).toBeNull()
+    cleanup()
+
+    renderPanel('word-by-word')
+    expect(screen.queryByLabelText(/(accent|highlight|active|box) color/i)).toBeNull()
+  })
+
+  it('reflects the stored hex value on the swatch input', () => {
+    renderPanel('karaoke', { color: '#abcdef', highlightColor: '#00ff00' })
+    expect((screen.getByLabelText('Caption text color') as HTMLInputElement).value).toBe('#abcdef')
+    expect((screen.getByLabelText('Caption highlight color') as HTMLInputElement).value).toBe('#00ff00')
+  })
+})