@bycrux/editor 1.2.1 → 1.3.0

package/src/video/VideoEditor.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type MutableRefObject } from 'react'
-import { Captions, Crop, Ear, EarOff, Film, HelpCircle, History, Magnet, Maximize2, Minimize2, Redo2, SeparatorVertical, Smartphone, SquareDashedMousePointer, Undo2, Wand2 } from 'lucide-react'
+import { AlertCircle, Captions, Crop, Ear, EarOff, Film, HelpCircle, History, Magnet, Maximize2, Minimize2, Redo2, SeparatorVertical, Smartphone, SquareDashedMousePointer, Undo2, Wand2 } from 'lucide-react'
 import type { Project, VideoEditorProps } from '../types'
 import type { AudioTrack, VisualItem } from '../schema'
 import { useProjectSync, type UseProjectSync } from '../state/use-project-sync'
@@ -14,6 +14,7 @@ import { collapseGaps, rippleDelete, splitAtTime } from './cuts'
 import { addMarker } from './timeline/markers'
 import { repairCaptionWords } from './captionRepair'
 import { maxCaptionLane, normalizeCaptionLanes } from './captionLanes'
+import { mergeCaptionProfileDefaults } from './captionProfileDefaults'
 import Timeline, { type TimelineActions, type TimelineMode } from './timeline/Timeline'
 import { visualDuration } from '@bycrux/timeline-core'
 import { audioEnd, computeAutoCrossfade, computeDerivedTiming, computeVisualCrossfade, enabledTrackItems, mapTrackItems, normalizeAudioTracks, trackItems, withEnabledItemTracks } from './timeline/timeline-model'
@@ -211,6 +212,11 @@ export function exportDurationSec(project: { tracks?: unknown }): number {
  * prop, so a status transition (agent finishes → 'draft') must come from the
  * core's own stream, not the host re-rendering with a new prop.
  *
+ * `pendingSurface="host"` skips the pending surface: a pending project renders
+ * the review surface (which never branches on status), and the host draws its
+ * own gate over it. `onUserEdit` reports the user's own edits (never SSE frames)
+ * so such a host can react when the user edits while an agent is working.
+ *
  * ProjectHeader is lifted out (the host renders it in its shell). This component
  * renders: timeline + preview + version panel + render modal + the host-supplied
  * inspector/subcut render-prop seams + an optional back-to-setup affordance.
@@ -222,6 +228,8 @@ export default function VideoEditor<P extends Project = Project>({
   theme,
   slots,
   onBackToSetup,
+  pendingSurface = 'default',
+  onUserEdit,
   assetsPlacement = 'right',
   renderProgressView = 'phases',
   renderGenerationPanel,
@@ -244,7 +252,9 @@ export default function VideoEditor<P extends Project = Project>({
   // both the surface switch and the surface contents. `project` (the prop) is
   // only the initial value — after mount the core owns state and reconciles live
   // frames itself (video-shaped → default plain-replace reconcile).
-  const sync = useProjectSync<P>(adapter, project.id, project)
+  // `onUserEdit` rides the core's `onLocalEdit` (held in a ref there, so a new
+  // identity per render is harmless): fired for user edits only, never SSE.
+  const sync = useProjectSync<P>(adapter, project.id, project, { onLocalEdit: onUserEdit })
 
   // Set for the duration of a caption drag gesture (ReviewSurface's
   // `handleProjectChange` → `commitTimelineEdit`), read by the lane-
@@ -374,9 +384,9 @@ export default function VideoEditor<P extends Project = Project>({
   // T7 — canvas-timeline filmstrips + hover-scrub; absent → Timeline renders none (graceful).
   const getFilmstrip      = adapter.getFilmstrip
 
-  if (isPending) {
+  if (isPending && pendingSurface !== 'host') {
     return (
-      <div ref={containerRef} className="flex flex-col h-full bg-[var(--editor-bg)]">
+      <div ref={containerRef} className="flex flex-col h-full bg-[var(--editor-bg)] text-[var(--editor-text)]">
         <PendingSurface
           sync={sync}
           adapter={adapter}
@@ -393,7 +403,7 @@ export default function VideoEditor<P extends Project = Project>({
   }
 
   return (
-    <div ref={containerRef} className="flex flex-col h-full bg-[var(--editor-bg)]">
+    <div ref={containerRef} className="flex flex-col h-full bg-[var(--editor-bg)] text-[var(--editor-text)]">
       <ReviewSurface
         sync={sync}
         captionGestureRef={captionGestureRef}
@@ -628,10 +638,10 @@ function PendingSurface<P extends Project>({
                 <>
                   <div className="flex flex-col items-center gap-2">
                     <p className="text-[var(--editor-text)] text-lg font-semibold">Message your agent to start</p>
-                    <p className="text-[var(--editor-text)]/60 text-sm">Nothing will happen automatically. Copy this and send it to your agent.</p>
+                    <p className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] text-sm">Nothing will happen automatically. Copy this and send it to your agent.</p>
                   </div>
                   {skillPath && (
-                    <div className="w-full rounded-xl border-2 border-[var(--editor-accent)]/50 bg-[var(--editor-surface)] p-5 flex flex-col gap-3 text-left shadow-lg shadow-[var(--editor-accent)]/10">
+                    <div className="w-full rounded-xl border-2 border-[color-mix(in_srgb,var(--editor-accent)_50%,transparent)] bg-[var(--editor-surface)] p-5 flex flex-col gap-3 text-left shadow-lg shadow-[color-mix(in_srgb,var(--editor-accent)_10%,transparent)]">
                       {/* indigo-600 in light mode: the accent (indigo-500) is ~4.06:1 on
                           `--editor-surface`, and 12px bold is still NORMAL text under WCAG
                           (large starts at 18.66px bold), so it needs the 4.5:1 floor. The
@@ -2132,7 +2142,7 @@ function ReviewSurface<P extends Project>({
           <div className="shrink-0 flex items-center gap-1.5 px-3 py-1 border-t border-[var(--editor-border)] bg-[var(--editor-surface)]">
             <span
               data-testid="preview-timecode"
-              className="mr-auto text-[10px] font-mono tabular-nums text-[var(--editor-text)]/60 select-none"
+              className="mr-auto text-[10px] font-mono tabular-nums text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] select-none"
             >
               {/* The playhead can sit past `previewDuration` while parked in
                   `getTotalDuration()`'s ~20% trailing headroom (drag room for
@@ -2154,7 +2164,7 @@ function ReviewSurface<P extends Project>({
                 className={`flex items-center justify-center w-5 h-5 rounded transition-colors ${
                   currentSocialPreview !== null
                     ? (timelineMode === 'light' ? 'text-sky-600 bg-sky-400/15 hover:bg-sky-400/25' : 'text-sky-400 bg-sky-400/15 hover:bg-sky-400/25')
-                    : 'text-[var(--editor-text)]/60 bg-transparent hover:text-[var(--editor-text)]'
+                    : 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)]'
                 }`}
               >
                 {/* Trigger reflects the active selection: the platform's own
@@ -2179,7 +2189,7 @@ function ReviewSurface<P extends Project>({
                 onClick={toggleFullscreen}
                 aria-label="Toggle fullscreen"
                 aria-pressed={isFullscreen}
-                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)]"
+                className="flex items-center justify-center w-5 h-5 rounded transition-colors text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)]"
               >
                 {isFullscreen ? <Minimize2 size={12} /> : <Maximize2 size={12} />}
               </button>
@@ -2188,7 +2198,7 @@ function ReviewSurface<P extends Project>({
         </>
       ) : (
         <div className="flex-1 min-h-0 flex items-center justify-center p-2">
-          <p className="text-[var(--editor-text)]/60 text-sm">No clips</p>
+          <p className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] text-sm">No clips</p>
         </div>
       )}
     </div>
@@ -2233,7 +2243,7 @@ function ReviewSurface<P extends Project>({
           <button
             onClick={() => setShowControls(true)}
             aria-label="Editor controls & shortcuts"
-            className="flex items-center gap-1 px-1.5 h-5 rounded transition-colors text-[var(--editor-text)]/75 bg-transparent hover:text-[var(--editor-text)] hover:bg-[var(--editor-text)]/10"
+            className="flex items-center gap-1 px-1.5 h-5 rounded transition-colors text-[color-mix(in_srgb,var(--editor-text)_75%,transparent)] bg-transparent hover:text-[var(--editor-text)] hover:bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)]"
           >
             <HelpCircle size={14} />
             <span className="text-[10px] leading-none">Controls</span>
@@ -2244,7 +2254,7 @@ function ReviewSurface<P extends Project>({
             onClick={sync.undo}
             disabled={!sync.canUndo}
             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-50 disabled:pointer-events-none"
+            className="flex items-center justify-center w-5 h-5 rounded transition-colors text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)] disabled:opacity-50 disabled:pointer-events-none"
           >
             <Undo2 size={12} />
           </button>
@@ -2254,7 +2264,7 @@ function ReviewSurface<P extends Project>({
             onClick={sync.redo}
             disabled={!sync.canRedo}
             aria-label="Redo"
-            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-50 disabled:pointer-events-none"
+            className="flex items-center justify-center w-5 h-5 rounded transition-colors text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)] disabled:opacity-50 disabled:pointer-events-none"
           >
             <Redo2 size={12} />
           </button>
@@ -2267,7 +2277,7 @@ function ReviewSurface<P extends Project>({
             className={`flex items-center justify-center w-5 h-5 rounded transition-colors ${
               previewAxis
                 ? (timelineMode === 'light' ? 'text-yellow-700 bg-yellow-400/15 hover:bg-yellow-400/25' : 'text-yellow-400 bg-yellow-400/15 hover:bg-yellow-400/25')
-                : 'text-[var(--editor-text)]/60 bg-transparent hover:text-[var(--editor-text)]'
+                : 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)]'
             }`}
           >
             <SeparatorVertical size={12} />
@@ -2281,7 +2291,7 @@ function ReviewSurface<P extends Project>({
             className={`flex items-center justify-center w-5 h-5 rounded transition-colors ${
               rippleMode
                 ? (timelineMode === 'light' ? 'text-teal-600 bg-teal-400/15 hover:bg-teal-400/25' : 'text-teal-400 bg-teal-400/15 hover:bg-teal-400/25')
-                : 'text-[var(--editor-text)]/60 bg-transparent hover:text-[var(--editor-text)]'
+                : 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)]'
             }`}
           >
             <Magnet size={12} />
@@ -2298,7 +2308,7 @@ function ReviewSurface<P extends Project>({
             className={`flex items-center justify-center w-5 h-5 rounded transition-colors disabled:opacity-50 disabled:pointer-events-none ${
               cropMode
                 ? (timelineMode === 'light' ? 'text-amber-600 bg-amber-400/15 hover:bg-amber-400/25' : 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25')
-                : 'text-[var(--editor-text)]/60 bg-transparent hover:text-[var(--editor-text)]'
+                : 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)]'
             }`}
           >
             <Crop size={12} />
@@ -2327,7 +2337,7 @@ function ReviewSurface<P extends Project>({
             <button
               onClick={handleAudioPolish}
               aria-label="Polish audio"
-              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)]"
+              className="flex items-center justify-center w-5 h-5 rounded transition-colors text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)]"
             >
               <Wand2 size={12} />
             </button>
@@ -2341,7 +2351,7 @@ function ReviewSurface<P extends Project>({
             onClick={() => handleAudibleScrubChange(!currentAudibleScrub)}
             aria-label="Toggle audible drag-scrub"
             aria-pressed={currentAudibleScrub}
-            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)]"
+            className="flex items-center justify-center w-5 h-5 rounded transition-colors text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)]"
           >
             {currentAudibleScrub ? <Ear size={12} /> : <EarOff size={12} />}
           </button>
@@ -2795,9 +2805,9 @@ function ReviewSurface<P extends Project>({
                package's generic centered default. */
             slots?.propertiesEmptyState ?? (
               <div className="flex-1 flex flex-col items-center justify-center gap-2.5 px-6 text-center">
-                <SquareDashedMousePointer size={26} className="text-[var(--editor-text)]/25" />
-                <p className="text-xs font-medium text-[var(--editor-text)]/60">Select an element</p>
-                <p className="text-[11px] text-[var(--editor-text)]/40">Choose a clip, overlay, or track to edit its properties.</p>
+                <SquareDashedMousePointer size={26} className="text-[color-mix(in_srgb,var(--editor-text)_25%,transparent)]" />
+                <p className="text-xs font-medium text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Select an element</p>
+                <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">Choose a clip, overlay, or track to edit its properties.</p>
               </div>
             )
           )}
@@ -2807,7 +2817,18 @@ function ReviewSurface<P extends Project>({
   )
 
   return (
-    <div className="flex flex-col flex-1 overflow-hidden">
+    <div className="relative flex flex-col flex-1 overflow-hidden">
+      {/* Save-error banner — a failed sync.mutate/commit rolls the edit back
+          silently otherwise (see CarouselEditor's identical banner). Sits on
+          the outermost container so it is visible above BOTH layout branches
+          below (CapCut and classic) rather than needing its own copy in each. */}
+      {sync.lastError && (
+        <div className="absolute top-3 left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 px-3 py-2 rounded-md border border-red-500/40 bg-red-950/80 text-red-200 text-xs">
+          <AlertCircle size={14} />
+          <span>{sync.lastError}</span>
+          <button onClick={sync.clearError} className="ml-2 underline">dismiss</button>
+        </div>
+      )}
       {slots?.mediaPanel ? (
         /* CapCut layout (opt-in via slots.mediaPanel): three columns across the
            top — [left panel | preview | properties] — with a full-width timeline
@@ -2954,10 +2975,19 @@ function ReviewSurface<P extends Project>({
         <CaptionRegenModal
           adapter={adapter}
           projectId={project.id}
+          profile={project.profile}
           existingRowCount={maxCaptionLane(project.captions?.segments ?? []) + 1}
           onClose={() => setRegenCaptionsOpen(false)}
-          onDone={(captions) => {
-            sync.applyExternal({ ...syncProjectRef.current, captions } as P)
+          onDone={(captions, profileDefaults) => {
+            // The modal resolved the profile once, before the stream; we fold
+            // its font/color onto the fresh track here rather than there
+            // because this is the seam that decides what lands on the project
+            // — and the merge only ever fills fields the host left unset, so
+            // a host that starts returning them keeps authoring them.
+            // `mergeCaptionProfileDefaults` returns `captions` itself when
+            // there is nothing to seed, which is every host without the seam.
+            const seeded = mergeCaptionProfileDefaults(captions, profileDefaults)
+            sync.applyExternal({ ...syncProjectRef.current, captions: seeded } as P)
             setRegenCaptionsOpen(false)
           }}
           mode={timelineMode}

package/src/video/__tests__/CaptionRegenModal.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
 import { render, screen, waitFor, cleanup } from '@testing-library/react'
-import type { CaptionEvent, EditorAdapter, ImageElement, Project } from '../../types'
+import type { CaptionEvent, CaptionProfileDefaults, EditorAdapter, ImageElement, Project } from '../../types'
 import type { Captions } from '../../schema'
 import CaptionRegenModal from '../CaptionRegenModal'
 
@@ -45,7 +45,9 @@ describe('CaptionRegenModal', () => {
     )
 
     await waitFor(() => expect(screen.getByText(/transcribing audio/i)).toBeTruthy())
-    await waitFor(() => expect(onDone).toHaveBeenCalledWith(doneCaptions))
+    // Second argument is the profile defaults the host resolved — `null` on
+    // this adapter, which implements no `getCaptionProfileDefaults`.
+    await waitFor(() => expect(onDone).toHaveBeenCalledWith(doneCaptions, null))
   })
 
   it('shows an error message verbatim on error', async () => {
@@ -92,3 +94,160 @@ describe('CaptionRegenModal', () => {
     expect(screen.queryByText(/caption rows/i)).toBeNull()
   })
 })
+
+// ── Profile-seeded caption defaults ──────────────────────────────────────────
+//
+// `adapter.getCaptionProfileDefaults` is an OPTIONAL host seam: this package
+// owns no notion of what a profile is beyond `Project.profile`'s bare name, so
+// a host that can resolve one answers, and a host that cannot omits the method
+// entirely. Every assertion below therefore comes in a pair — the seam present
+// and the seam absent — because the absent case is the one every existing host
+// (Hub, Los Parceros, the OSS `serve` UI) is in today, and it must keep
+// producing the byte-identical call it produced before this seam existed.
+
+/** Adapter whose `generateCaptions` is a spy, so the opts argument is readable. */
+function makeSpyAdapter() {
+  const adapter = makeAdapter()
+  const generateCaptions = vi.fn(async function* (): AsyncIterable<CaptionEvent> {
+    yield { type: 'done', captions: doneCaptions }
+  })
+  adapter.generateCaptions = generateCaptions
+  return { adapter, generateCaptions }
+}
+
+const PROFILE_DEFAULTS: CaptionProfileDefaults = {
+  style: 'karaoke',
+  fontFamily: '"Inter", system-ui, sans-serif',
+  color: '#112233',
+}
+
+describe('CaptionRegenModal — profile-seeded caption defaults', () => {
+  it('seeds the generation style from the defaults the host resolves for the project profile', async () => {
+    const { adapter, generateCaptions } = makeSpyAdapter()
+    const getCaptionProfileDefaults = vi.fn(async () => PROFILE_DEFAULTS)
+    adapter.getCaptionProfileDefaults = getCaptionProfileDefaults
+
+    render(
+      <CaptionRegenModal
+        adapter={adapter}
+        projectId="vid-1"
+        profile="sam"
+        existingRowCount={1}
+        onDone={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    )
+
+    await waitFor(() => expect(generateCaptions).toHaveBeenCalledWith('vid-1', { style: 'karaoke' }))
+    expect(getCaptionProfileDefaults).toHaveBeenCalledWith('sam')
+  })
+
+  it('hands the resolved defaults to onDone alongside the fresh captions', async () => {
+    // The host merges font/color onto the track at its own apply seam; the
+    // modal resolves the profile ONCE and passes what it got, so the host
+    // never repeats the round trip (and can never race a second answer).
+    const { adapter } = makeSpyAdapter()
+    adapter.getCaptionProfileDefaults = vi.fn(async () => PROFILE_DEFAULTS)
+    const onDone = vi.fn()
+
+    render(
+      <CaptionRegenModal
+        adapter={adapter}
+        projectId="vid-1"
+        profile="sam"
+        existingRowCount={1}
+        onDone={onDone}
+        onClose={vi.fn()}
+      />,
+    )
+
+    await waitFor(() => expect(onDone).toHaveBeenCalledWith(doneCaptions, PROFILE_DEFAULTS))
+  })
+
+  it('passes no opts at all when the host implements no caption-defaults seam', async () => {
+    // Today's behaviour for every existing host, pinned: a bare one-argument
+    // call, not `(id, undefined)` and not `(id, {})`.
+    const { adapter, generateCaptions } = makeSpyAdapter()
+    const onDone = vi.fn()
+
+    render(
+      <CaptionRegenModal
+        adapter={adapter}
+        projectId="vid-1"
+        profile="sam"
+        existingRowCount={1}
+        onDone={onDone}
+        onClose={vi.fn()}
+      />,
+    )
+
+    await waitFor(() => expect(onDone).toHaveBeenCalled())
+    expect(generateCaptions).toHaveBeenCalledWith('vid-1')
+    expect(onDone).toHaveBeenCalledWith(doneCaptions, null)
+  })
+
+  it('never asks for defaults when the project has no profile', async () => {
+    const { adapter, generateCaptions } = makeSpyAdapter()
+    const getCaptionProfileDefaults = vi.fn(async () => PROFILE_DEFAULTS)
+    adapter.getCaptionProfileDefaults = getCaptionProfileDefaults
+
+    render(
+      <CaptionRegenModal
+        adapter={adapter}
+        projectId="vid-1"
+        existingRowCount={1}
+        onDone={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    )
+
+    await waitFor(() => expect(generateCaptions).toHaveBeenCalledWith('vid-1'))
+    expect(getCaptionProfileDefaults).not.toHaveBeenCalled()
+  })
+
+  it('still generates when the caption-defaults seam rejects', async () => {
+    // Seeding is a convenience. A profile lookup that 500s must never be the
+    // reason a user cannot regenerate their captions.
+    const { adapter, generateCaptions } = makeSpyAdapter()
+    adapter.getCaptionProfileDefaults = vi.fn(async () => { throw new Error('boom') })
+    const onDone = vi.fn()
+
+    render(
+      <CaptionRegenModal
+        adapter={adapter}
+        projectId="vid-1"
+        profile="sam"
+        existingRowCount={1}
+        onDone={onDone}
+        onClose={vi.fn()}
+      />,
+    )
+
+    await waitFor(() => expect(generateCaptions).toHaveBeenCalledWith('vid-1'))
+    await waitFor(() => expect(onDone).toHaveBeenCalledWith(doneCaptions, null))
+    expect(screen.queryByText('boom')).toBeNull()
+  })
+
+  it('passes no style when the profile resolves without one', async () => {
+    // A profile that sets only a font and a color must not send `style:
+    // undefined` — the host route reads presence, not value.
+    const { adapter, generateCaptions } = makeSpyAdapter()
+    const fontOnly: CaptionProfileDefaults = { fontFamily: '"Inter", system-ui, sans-serif' }
+    adapter.getCaptionProfileDefaults = vi.fn(async () => fontOnly)
+    const onDone = vi.fn()
+
+    render(
+      <CaptionRegenModal
+        adapter={adapter}
+        projectId="vid-1"
+        profile="sam"
+        existingRowCount={1}
+        onDone={onDone}
+        onClose={vi.fn()}
+      />,
+    )
+
+    await waitFor(() => expect(generateCaptions).toHaveBeenCalledWith('vid-1'))
+    await waitFor(() => expect(onDone).toHaveBeenCalledWith(doneCaptions, fontOnly))
+  })
+})

package/src/video/__tests__/VideoEditor.captionSeam.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { render, screen, waitFor, fireEvent } from '@testing-library/react'
 import type { CaptionEvent, EditorAdapter, ImageElement, Project, RenderEvent, VersionEntry, WaveformChunk } from '../../types'
+import type { Captions } from '../../schema'
 import VideoEditor from '../VideoEditor'
 
 // ── T1 — host-driven caption trigger seam ────────────────────────────────────
@@ -132,3 +133,104 @@ describe('VideoEditor — host-driven caption trigger seam', () => {
     await waitFor(() => expect(screen.getByText('Regenerating captions…')).toBeTruthy())
   })
 })
+
+// ── Profile-seeded caption defaults, through the real apply seam ─────────────
+//
+// The unit-level rules live in `captionProfileDefaults.test.ts`; what these
+// two prove is the WIRING — that `project.profile` reaches the host seam, and
+// that the merged track is what `applyExternal` lands on the project. There is
+// no spy for `applyExternal` (it is internal to `useProjectSync`, and it
+// deliberately calls neither `onProjectChange` nor `adapter.saveProject` — see
+// VideoEditor.captionDelete.test.tsx's note), so the assertion reads the
+// caption color back out of the Format tab's swatch, which renders
+// `project.captions.color` and falls back to '#ffffff' when unset.
+
+function readCaptionColor(): string {
+  fireEvent.click(screen.getByRole('button', { name: 'Format' }))
+  return (screen.getByLabelText('Caption text color') as HTMLInputElement).value
+}
+
+/** Adapter whose regen stream terminates with the given track. */
+function makeRegenAdapter(captions: Captions) {
+  const adapter = makeFakeAdapter()
+  adapter.generateCaptions = vi.fn(async function* (): AsyncIterable<CaptionEvent> {
+    yield { type: 'done', captions }
+  })
+  return adapter
+}
+
+describe('VideoEditor — profile-seeded caption defaults', () => {
+  it('merges the profile font/color onto a server track that set neither', async () => {
+    const adapter = makeRegenAdapter({
+      style: 'pop',
+      segments: [{ id: 'cap-new', text: 'fresh', start: 0, end: 1, words: [{ word: 'fresh', start: 0, end: 1 }] }],
+    })
+    const getCaptionProfileDefaults = vi.fn(async () => ({
+      style: 'karaoke',
+      fontFamily: '"Inter", system-ui, sans-serif',
+      color: '#112233',
+    }))
+    ;(adapter as unknown as { getCaptionProfileDefaults: unknown }).getCaptionProfileDefaults = getCaptionProfileDefaults
+
+    render(
+      <VideoEditor
+        project={makeVideoProject({ profile: 'sam' })}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(await screen.findByText('Regenerate captions'))
+
+    // The modal closes itself once the host's onDone runs, which is also when
+    // the merged track has landed.
+    await waitFor(() => expect(screen.queryByText('Regenerating captions…')).toBeNull())
+    expect(getCaptionProfileDefaults).toHaveBeenCalledWith('sam')
+    expect(adapter.generateCaptions).toHaveBeenCalledWith('vid-1', { style: 'karaoke' })
+    expect(readCaptionColor()).toBe('#112233')
+  })
+
+  it('leaves a color the server response already set alone', async () => {
+    const adapter = makeRegenAdapter({
+      style: 'pop',
+      color: '#ff0000',
+      segments: [{ id: 'cap-new', text: 'fresh', start: 0, end: 1, words: [{ word: 'fresh', start: 0, end: 1 }] }],
+    })
+    ;(adapter as unknown as { getCaptionProfileDefaults: unknown }).getCaptionProfileDefaults =
+      vi.fn(async () => ({ color: '#112233' }))
+
+    render(
+      <VideoEditor
+        project={makeVideoProject({ profile: 'sam' })}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(await screen.findByText('Regenerate captions'))
+    await waitFor(() => expect(screen.queryByText('Regenerating captions…')).toBeNull())
+    expect(readCaptionColor()).toBe('#ff0000')
+  })
+
+  it('applies the server track untouched on a host with no caption-defaults seam', async () => {
+    // Every host shipping today is in this case; the regen call must stay the
+    // bare one-argument call it has always been.
+    const adapter = makeRegenAdapter({
+      style: 'pop',
+      segments: [{ id: 'cap-new', text: 'fresh', start: 0, end: 1, words: [{ word: 'fresh', start: 0, end: 1 }] }],
+    })
+
+    render(
+      <VideoEditor
+        project={makeVideoProject({ profile: 'sam' })}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(await screen.findByText('Regenerate captions'))
+    await waitFor(() => expect(screen.queryByText('Regenerating captions…')).toBeNull())
+    expect(adapter.generateCaptions).toHaveBeenCalledWith('vid-1')
+    expect(readCaptionColor()).toBe('#ffffff')
+  })
+})