@bycrux/editor 0.8.9 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.8.9",
+  "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

@@ -45,12 +45,20 @@ export interface CaptionSegment {
 export interface Captions {
   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
-  accentColor?: string    // active-word/box accent color — highlight-box, outline
+  // 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"])
 }
 

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/timeline/TranscriptPanel.tsx

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

package/src/video/timeline/__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')
+  })
+})