@bycrux/editor 1.2.1 → 1.3.0

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

@@ -0,0 +1,233 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, waitFor, act } from '@testing-library/react'
+import type {
+  EditorAdapter,
+  ImageElement,
+  Project,
+  RenderEvent,
+  VersionEntry,
+  WaveformChunk,
+} from '../../types'
+import VideoEditor from '../VideoEditor'
+
+// `pendingSurface` and `onUserEdit`: a host that owns the pending gate
+// (`'host'`) gets the full review editor while `status === 'pending'`, and a
+// signal that tells its own user's edits apart from an agent's SSE writes.
+// Adapter helpers copied from VideoEditor.test.tsx.
+
+// ── Fake adapter ──────────────────────────────────────────────────────────────
+// Full EditorAdapter with the video-editor capabilities VideoEditor threads:
+// listVersionHistory / restoreVersion / getWaveformChunks / compileOverlay /
+// fileUrl / resolveCaptionTemplate. No host (`@/`) modules are mocked — the
+// package owns the assembled editor.
+
+function makeVideoProject(overrides: Partial<Project> = {}): Project {
+  return {
+    id: 'vid-1',
+    name: 'Test Video',
+    status: 'draft',
+    editingPrompt: '',
+    projectType: 'video',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [
+      [
+        {
+          id: 'clip-0',
+          type: 'video',
+          src: 'a.mp4',
+          start: 0,
+          end: 4,
+          inPoint: 0,
+          outPoint: 4,
+        },
+      ],
+    ],
+    audio: { tracks: [] },
+    assets: [],
+    ...overrides,
+  } as Project
+}
+
+interface FakeAdapter extends EditorAdapter<Project> {
+  saveCalls: Array<{ id: string; project: Project }>
+  /** Push a server-authored SSE frame to every active subscriber. */
+  emit: (project: Project) => void
+  /** When true, saveProject() blocks until flushSaves() so a save stays pending. */
+  setHoldSaves: (hold: boolean) => void
+  /** Resolve every held saveProject() promise. */
+  flushSaves: () => void
+}
+
+function makeFakeAdapter(): FakeAdapter {
+  const saveCalls: Array<{ id: string; project: Project }> = []
+  let subscribers: Array<(project: Project) => void> = []
+  let holdSaves = false
+  let saveResolvers: Array<() => void> = []
+  return {
+    loadProject: vi.fn(async () => makeVideoProject()),
+    saveProject: vi.fn(async (id: string, project: Project) => {
+      saveCalls.push({ id, project })
+      if (holdSaves) await new Promise<void>((resolve) => saveResolvers.push(resolve))
+    }),
+    // Capture the sync core's frame callback so a test can drive SSE frames.
+    subscribe: (_id: string, onFrame: (project: Project) => void) => {
+      subscribers.push(onFrame)
+      return () => { subscribers = subscribers.filter((s) => s !== onFrame) }
+    },
+    render: async function* (): AsyncIterable<RenderEvent> {
+      yield { type: 'done', outputPath: '/out.mp4' }
+    },
+    resolveImageSrc: (el: ImageElement) => el.src,
+    compileOverlay: vi.fn(async () => () => null),
+    listGlobalOverlays: vi.fn(async () => []),
+    listSystemOverlays: vi.fn(async () => []),
+    uploadFile: vi.fn(async () => '/path'),
+    fileUrl: (path: string) => path,
+    listVersionHistory: vi.fn(async (): Promise<VersionEntry[]> => []),
+    restoreVersion: vi.fn(async (_id: string, _hash: string) => makeVideoProject()),
+    getWaveformChunks: vi.fn(async (): Promise<WaveformChunk[]> => []),
+    resolveCaptionTemplate: (style: string) => `/caption/${style}`,
+    getInfo: vi.fn(async () => ({ root_skill_path: undefined })),
+    saveCalls,
+    emit: (project: Project) => { for (const s of [...subscribers]) s(project) },
+    setHoldSaves: (hold: boolean) => { holdSaves = hold },
+    flushSaves: () => { const r = saveResolvers; saveResolvers = []; r.forEach((res) => res()) },
+  }
+}
+
+beforeEach(() => {
+  // The caption panel now splits into Style / Captions sub-tabs and defaults
+  // to Style; these tests want the transcript + Regenerate trigger visible, so
+  // pin the sub-tab to 'captions' (usePersistentState reads this at mount).
+  window.localStorage.setItem('montaj.editor.captionPanelTab', JSON.stringify('captions'))
+  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  vi.spyOn(console, 'error').mockImplementation(() => {})
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  // jsdom doesn't implement media element playback.
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.play = vi.fn(async () => {}) as never
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.pause = vi.fn(() => {}) as never
+  // jsdom has no Web Audio API; the video player wires per-clip gain through it.
+  ;(globalThis as unknown as { AudioContext: unknown }).AudioContext = class {
+    state = 'running'
+    createGain() { return { gain: { value: 1 }, connect() {}, disconnect() {} } }
+    createMediaElementSource() { return { connect() {}, disconnect() {} } }
+    get destination() { return {} }
+    close() {}
+  }
+})
+afterEach(() => vi.restoreAllMocks())
+
+
+function pendingProject(overrides: Partial<Project> = {}): Project {
+  return makeVideoProject({ status: 'pending', tracks: [{ id: 'trk-0', items: [] }], ...overrides } as Partial<Project>)
+}
+
+describe('VideoEditor — pendingSurface', () => {
+  it('default: a pending project shows the built-in pending surface, not the review chrome', async () => {
+    const adapter = makeFakeAdapter()
+    const { findByTestId, queryByText, container } = render(
+      <VideoEditor
+        project={pendingProject()}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ pendingStatus: <div data-testid="pending" /> }}
+      />,
+    )
+    await findByTestId('pending')
+    expect(container.textContent).toContain('project id:')
+    expect(queryByText('Render →')).toBeNull()
+  })
+
+  it("'host': a pending project renders the review editor and none of the pending surface", async () => {
+    const adapter = makeFakeAdapter()
+    const { findByText, queryByTestId, container } = render(
+      <VideoEditor
+        project={makeVideoProject({ status: 'pending' })}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        pendingSurface="host"
+        onBackToSetup={vi.fn()}
+        slots={{ pendingStatus: <div data-testid="pending" /> }}
+      />,
+    )
+    await findByText('Render →')
+    expect(queryByTestId('pending')).toBeNull()
+    expect(container.textContent).not.toContain('project id:')
+    expect(container.textContent).not.toMatch(/Back to setup/i)
+    // The skill-path fetch lives in the pending surface only.
+    expect(adapter.getInfo).not.toHaveBeenCalled()
+  })
+
+  it("'host': a pending project with zero-duration placeholders renders without throwing", async () => {
+    const adapter = makeFakeAdapter()
+    const project = makeVideoProject({
+      status: 'pending',
+      tracks: [
+        [
+          { id: 'ph-0', type: 'video', src: 'a.mp4', start: 0, end: 0 },
+          { id: 'ph-1', type: 'video', src: 'b.mp4' },
+        ],
+      ],
+    } as unknown as Partial<Project>)
+    const { findByText } = render(
+      <VideoEditor project={project} adapter={adapter} onProjectChange={vi.fn()} pendingSurface="host" />,
+    )
+    await findByText('Render →')
+  })
+
+  it("'host': an SSE frame flipping pending to draft keeps the same surface mounted", async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeVideoProject({ status: 'pending' })
+    const onProjectChange = vi.fn()
+    const { findByText } = render(
+      <VideoEditor project={initial} adapter={adapter} onProjectChange={onProjectChange} pendingSurface="host" />,
+    )
+    const before = await findByText('Render →')
+    await act(async () => { adapter.emit({ ...initial, status: 'draft' }) })
+    await waitFor(() => {
+      expect(onProjectChange).toHaveBeenLastCalledWith(expect.objectContaining({ status: 'draft' }))
+    })
+    const after = await findByText('Render →')
+    expect(after).toBe(before)
+    expect(before.isConnected).toBe(true)
+  })
+})
+
+describe('VideoEditor — onUserEdit', () => {
+  it('fires once for a user edit and once for undo, never for an SSE frame', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeVideoProject({ status: 'draft' })
+    const onUserEdit = vi.fn()
+    const { findByText } = render(
+      <VideoEditor
+        project={initial}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        onUserEdit={onUserEdit}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+    const renderBtn = await findByText('Render →')
+    // Let mount-time normalization settle: it goes through applyExternal.
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)) })
+    expect(onUserEdit).not.toHaveBeenCalled()
+
+    // Render flips status to 'final' through sync.mutate: a user edit.
+    await act(async () => { renderBtn.click() })
+    expect(onUserEdit).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', metaKey: true }))
+    })
+    expect(onUserEdit).toHaveBeenCalledTimes(2)
+
+    await waitFor(() => expect(adapter.saveCalls.length).toBe(2))
+    await act(async () => { adapter.emit({ ...initial, name: 'Agent rename' }) })
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 0)) })
+    expect(onUserEdit).toHaveBeenCalledTimes(2)
+  })
+})

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

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, waitFor, act, fireEvent, screen } from '@testing-library/react'
+import type { EditorAdapter, ImageElement, Project, RenderEvent, VersionEntry, WaveformChunk } from '../../types'
+import VideoEditor from '../VideoEditor'
+
+// ── Save-error banner ────────────────────────────────────────────────────────
+// `sync.lastError` (use-project-sync.ts) used to go unrendered in the video
+// editor: a failed save rolled the edit back with no visible sign anything
+// went wrong. CarouselEditor already surfaces it as a dismissible banner
+// (CarouselEditor.tsx ~584-590); this mirrors that pattern in VideoEditor.
+//
+// "M drops a marker" (VideoEditor.keymap.test.tsx) is reused as the trigger —
+// the simplest real `sync.mutate` call reachable without selecting a clip —
+// so this test can focus on the banner itself rather than on how to cause a
+// mutation.
+
+function makeVideoProject(overrides: Partial<Project> = {}): Project {
+  return {
+    id: 'vid-1',
+    name: 'Test Video',
+    status: 'draft',
+    editingPrompt: '',
+    projectType: 'video',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [
+      [{ id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 4, inPoint: 0, outPoint: 4 }],
+    ],
+    audio: { tracks: [] },
+    assets: [],
+    ...overrides,
+  } as Project
+}
+
+function makeFailingSaveAdapter(): EditorAdapter<Project> {
+  return {
+    loadProject: vi.fn(async () => makeVideoProject()),
+    saveProject: vi.fn(async () => { throw new Error('save boom') }),
+    subscribe: () => () => {},
+    render: async function* (): AsyncIterable<RenderEvent> { yield { type: 'done', outputPath: '/out.mp4' } },
+    resolveImageSrc: (el: ImageElement) => el.src,
+    compileOverlay: vi.fn(async () => () => null),
+    listGlobalOverlays: vi.fn(async () => []),
+    listSystemOverlays: vi.fn(async () => []),
+    uploadFile: vi.fn(async () => '/path'),
+    fileUrl: (path: string) => path,
+    listVersionHistory: vi.fn(async (): Promise<VersionEntry[]> => []),
+    restoreVersion: vi.fn(async () => makeVideoProject()),
+    getWaveformChunks: vi.fn(async (): Promise<WaveformChunk[]> => []),
+    resolveCaptionTemplate: (style: string) => `/caption/${style}`,
+    getInfo: vi.fn(async () => ({ root_skill_path: undefined })),
+  }
+}
+
+beforeEach(() => {
+  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  vi.spyOn(console, 'error').mockImplementation(() => {})
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.play = vi.fn(async () => {}) as never
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.pause = vi.fn(() => {}) as never
+  ;(globalThis as unknown as { AudioContext: unknown }).AudioContext = class {
+    state = 'running'
+    createGain() { return { gain: { value: 1 }, connect() {}, disconnect() {} } }
+    createMediaElementSource() { return { connect() {}, disconnect() {} } }
+    get destination() { return {} }
+    close() {}
+  }
+})
+afterEach(() => vi.restoreAllMocks())
+
+describe('VideoEditor — save-error banner', () => {
+  it('shows sync.lastError when a save rejects, and dismiss clears it', async () => {
+    const adapter = makeFailingSaveAdapter()
+    render(
+      <VideoEditor
+        project={makeVideoProject()}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+    await screen.findByLabelText('Preview axis')
+
+    // No error yet.
+    expect(screen.queryByText('save boom')).toBeNull()
+
+    // Drop a marker — the simplest sync.mutate a mounted editor can reach
+    // without first selecting a clip. Its save rejects per the adapter above.
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' }))
+    })
+
+    const banner = await waitFor(() => screen.getByText('save boom'))
+    expect(banner).toBeTruthy()
+    expect(adapter.saveProject).toHaveBeenCalledTimes(1)
+
+    const dismissBtn = screen.getByText('dismiss')
+    await act(async () => { fireEvent.click(dismissBtn) })
+
+    expect(screen.queryByText('save boom')).toBeNull()
+  })
+})

package/src/video/__tests__/captionProfileDefaults.test.ts

@@ -0,0 +1,121 @@
+import { describe, it, expect, vi } from 'vitest'
+import type { EditorAdapter, Project } from '../../types'
+import type { Captions } from '../../schema'
+import { mergeCaptionProfileDefaults, resolveCaptionProfileDefaults } from '../captionProfileDefaults'
+
+// A freshly transcribed track as the host routes actually return one: a bare
+// `{ style, segments }` with no text styling at all (montaj's own
+// `steps/caption/caption.py` builds exactly this shape). Every field the
+// profile can seed is therefore absent here, which is the whole reason seeding
+// is worth doing.
+const FRESH: Captions = {
+  style: 'pop',
+  segments: [{ text: 'hola', start: 0, end: 1, words: [] }],
+}
+
+function adapterWith(
+  getCaptionProfileDefaults?: EditorAdapter<Project>['getCaptionProfileDefaults'],
+): EditorAdapter<Project> {
+  return { getCaptionProfileDefaults } as unknown as EditorAdapter<Project>
+}
+
+describe('mergeCaptionProfileDefaults', () => {
+  it('fills the fields the server left unset', () => {
+    const merged = mergeCaptionProfileDefaults(FRESH, {
+      fontFamily: '"Inter", system-ui, sans-serif',
+      color: '#112233',
+    })
+    expect(merged.fontFamily).toBe('"Inter", system-ui, sans-serif')
+    expect(merged.color).toBe('#112233')
+    expect(merged.segments).toBe(FRESH.segments)
+    expect(merged.style).toBe('pop')
+  })
+
+  it('never overwrites a color the server response already set', () => {
+    // The route returns a bare track today. If it ever starts carrying a
+    // color, that value is authored downstream of the profile and wins.
+    const withColor: Captions = { ...FRESH, color: '#ff0000' }
+    const merged = mergeCaptionProfileDefaults(withColor, { color: '#112233' })
+    expect(merged.color).toBe('#ff0000')
+  })
+
+  it('never overwrites a fontFamily the server response already set', () => {
+    const withFont: Captions = { ...FRESH, fontFamily: '"Figtree", system-ui, sans-serif' }
+    const merged = mergeCaptionProfileDefaults(withFont, {
+      fontFamily: '"Inter", system-ui, sans-serif',
+      googleFonts: ['Inter:wght@700'],
+    })
+    expect(merged.fontFamily).toBe('"Figtree", system-ui, sans-serif')
+    expect(merged.googleFonts).toBeUndefined()
+  })
+
+  it('carries googleFonts along with a seeded fontFamily', () => {
+    // `fontFamily` and `googleFonts` travel together (see the `Captions` doc
+    // comment): a family whose file is not also fetched renders as the
+    // fallback face, in the preview AND the export. Seeding one without the
+    // other is the silent half-failure this pair exists to avoid.
+    const merged = mergeCaptionProfileDefaults(FRESH, {
+      fontFamily: '"Inter", system-ui, sans-serif',
+      googleFonts: ['Inter:wght@700'],
+    })
+    expect(merged.googleFonts).toEqual(['Inter:wght@700'])
+  })
+
+  it('does not inject googleFonts when the family was not seeded', () => {
+    const withFont: Captions = { ...FRESH, fontFamily: '"Figtree", system-ui, sans-serif' }
+    const merged = mergeCaptionProfileDefaults(withFont, { googleFonts: ['Inter:wght@700'] })
+    expect(merged.googleFonts).toBeUndefined()
+  })
+
+  it('returns the very same object when there is nothing to seed', () => {
+    // Reference identity, not deep equality: the caller feeds the result
+    // straight to `applyExternal`, and a fresh object there is a state change
+    // the editor has to reconcile for no reason.
+    expect(mergeCaptionProfileDefaults(FRESH, null)).toBe(FRESH)
+    expect(mergeCaptionProfileDefaults(FRESH, undefined)).toBe(FRESH)
+    expect(mergeCaptionProfileDefaults(FRESH, {})).toBe(FRESH)
+    expect(mergeCaptionProfileDefaults(FRESH, { style: 'karaoke' })).toBe(FRESH)
+  })
+
+  it('never writes the profile style onto the track', () => {
+    // `style` seeds the GENERATION request, not the returned track: the host
+    // reports the style it actually transcribed with, and that report wins.
+    const merged = mergeCaptionProfileDefaults(FRESH, { style: 'karaoke', color: '#112233' })
+    expect(merged.style).toBe('pop')
+  })
+
+  it('treats an empty-string default as nothing to seed', () => {
+    // A host backed by a nullable column can hand back `''` for "unset".
+    expect(mergeCaptionProfileDefaults(FRESH, { fontFamily: '', color: '' })).toBe(FRESH)
+  })
+})
+
+describe('resolveCaptionProfileDefaults', () => {
+  it('returns null when the host implements no seam', async () => {
+    expect(await resolveCaptionProfileDefaults(adapterWith(), 'sam')).toBeNull()
+  })
+
+  it('returns null when the project has no profile', async () => {
+    const seam = vi.fn(async () => ({ color: '#112233' }))
+    expect(await resolveCaptionProfileDefaults(adapterWith(seam), undefined)).toBeNull()
+    expect(await resolveCaptionProfileDefaults(adapterWith(seam), '')).toBeNull()
+    expect(seam).not.toHaveBeenCalled()
+  })
+
+  it('returns null rather than throwing when the seam rejects', async () => {
+    const seam = vi.fn(async () => { throw new Error('boom') })
+    await expect(resolveCaptionProfileDefaults(adapterWith(seam), 'sam')).resolves.toBeNull()
+  })
+
+  it('returns null rather than throwing when the seam throws synchronously', async () => {
+    const seam = vi.fn(() => { throw new Error('boom') }) as unknown as EditorAdapter<Project>['getCaptionProfileDefaults']
+    await expect(resolveCaptionProfileDefaults(adapterWith(seam), 'sam')).resolves.toBeNull()
+  })
+
+  it('passes the profile name through and returns what the host answered', async () => {
+    const answer = { style: 'karaoke', color: '#112233' }
+    const seam = vi.fn(async () => answer)
+    expect(await resolveCaptionProfileDefaults(adapterWith(seam), 'sam')).toBe(answer)
+    expect(seam).toHaveBeenCalledWith('sam')
+  })
+})

package/src/video/captionProfileDefaults.ts

@@ -0,0 +1,86 @@
+/**
+ * The two halves of profile-seeded caption defaults: ask the host what a
+ * profile looks like, and fold the answer onto a freshly transcribed track.
+ *
+ * Both live here rather than inside the two components that use them because
+ * they are used at two different moments of one flow — `CaptionRegenModal`
+ * resolves the defaults *before* the stream starts (it needs the style to put
+ * on the request), and `VideoEditor` merges them *after* it ends (at the one
+ * seam that applies server-authored captions outside the undo stack). The
+ * resolution happens once, in the modal, and rides along to the merge on the
+ * `onDone` callback; neither side repeats the round trip, so they cannot
+ * disagree about what the profile said.
+ *
+ * NOT to be confused with `captionStyleDefaults.ts` next door, which is a
+ * hand-copied mirror of each render TEMPLATE's own parameter defaults. These
+ * are the HOST's defaults for one named profile, and the editor knows nothing
+ * about where they come from.
+ */
+import type { CaptionProfileDefaults, EditorAdapter, Project } from '../types'
+import type { Captions } from '../schema'
+
+/**
+ * Ask the host for `profile`'s caption defaults, best-effort.
+ *
+ * Returns `null` — never throws, never rejects — when the project has no
+ * profile, when the host implements no `getCaptionProfileDefaults`, or when
+ * that call fails in any way. Seeding is a convenience laid over the user's
+ * actual request (regenerate my captions); a profile lookup that 500s must not
+ * be the reason that request cannot be made. The synchronous `try` matters as
+ * much as the `.catch`: an adapter method that throws before returning its
+ * promise would otherwise escape past the await.
+ */
+export async function resolveCaptionProfileDefaults<P extends Project = Project>(
+  adapter: EditorAdapter<P>,
+  profile: string | undefined | null,
+): Promise<CaptionProfileDefaults | null> {
+  if (!profile || !adapter.getCaptionProfileDefaults) return null
+  try {
+    return (await adapter.getCaptionProfileDefaults(profile)) ?? null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Fold `defaults` onto a freshly transcribed `captions` track, filling only
+ * the fields the host's response left unset.
+ *
+ * Three rules, each load-bearing:
+ *
+ *  - **The server's value always wins.** The caption route returns a bare
+ *    `{ style, segments }` today, so in practice every seedable field is
+ *    absent — but a profile default is the weakest possible authority on a
+ *    track's look, below anything the host chose to state, and the day the
+ *    route starts carrying a color is not the day this should start
+ *    clobbering it.
+ *  - **`style` is never written onto the track.** It seeds the generation
+ *    REQUEST (`GenerateCaptionsOptions.style`); what comes back reports the
+ *    style actually transcribed with, and that report is the truth.
+ *  - **`googleFonts` rides with `fontFamily` or not at all.** Seeding a
+ *    family without its font spec renders the fallback face with nothing on
+ *    screen to say so (see `Captions.fontFamily`), and seeding a spec for a
+ *    family we did not apply just fetches bytes no glyph uses.
+ *
+ * Returns the ORIGINAL object by reference when there is nothing to seed. The
+ * result goes straight to `applyExternal`, and a fresh object there is a state
+ * change the editor reconciles — and, downstream, a project that differs from
+ * one produced before this feature existed, for no reason a user could name.
+ */
+export function mergeCaptionProfileDefaults(
+  captions: Captions,
+  defaults: CaptionProfileDefaults | null | undefined,
+): Captions {
+  if (!defaults) return captions
+
+  const patch: Partial<Captions> = {}
+  if (captions.fontFamily == null && defaults.fontFamily) {
+    patch.fontFamily = defaults.fontFamily
+    if (captions.googleFonts == null && defaults.googleFonts?.length) {
+      patch.googleFonts = defaults.googleFonts
+    }
+  }
+  if (captions.color == null && defaults.color) patch.color = defaults.color
+
+  return Object.keys(patch).length === 0 ? captions : { ...captions, ...patch }
+}

package/src/video/panels/ClipPropertiesPanel.tsx

@@ -68,7 +68,7 @@ export interface ClipPropertiesPanelProps {
 }
 
 const SECTION_CLASS = 'shrink-0 border-b border-[var(--editor-border)] flex flex-col overflow-hidden'
-const ROW_LABEL_CLASS = 'w-16 shrink-0 text-[11px] text-[var(--editor-text)]/55'
+const ROW_LABEL_CLASS = 'w-16 shrink-0 text-[11px] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]'
 
 function basename(path: string): string {
   return path.split('/').pop() ?? path
@@ -107,7 +107,7 @@ function CollapsibleSection({
           type="button"
           aria-expanded={!collapsed}
           onClick={onToggle}
-          className="flex items-center gap-1 rounded px-1 py-0.5 text-[var(--editor-text)]/60 transition-colors hover:text-[var(--editor-text)]"
+          className="flex items-center gap-1 rounded px-1 py-0.5 text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] transition-colors hover:text-[var(--editor-text)]"
         >
           {collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
           <span className={nested ? 'text-[11px] font-medium' : 'text-xs font-medium uppercase tracking-wide'}>{label}</span>
@@ -358,7 +358,7 @@ function ClipTabs({ item, onPreviewClip, onCommitClip, onChangeClip, transformSl
                   <div className={`flex h-11 w-11 items-center justify-center rounded-full bg-indigo-500/10 ${mode === 'light' ? 'text-indigo-600' : 'text-indigo-400'}`}>
                     <Crop size={20} />
                   </div>
-                  <p className="max-w-[220px] text-xs leading-relaxed text-[var(--editor-text)]/60">
+                  <p className="max-w-[220px] text-xs leading-relaxed text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                     Reframe this clip by cropping its source video. Pick the part of the frame to keep.
                   </p>
                   <button
@@ -678,7 +678,7 @@ export default function ClipPropertiesPanel({
   if (!selection) {
     return (
       <div className={SECTION_CLASS}>
-        <div className="px-3 py-6 text-center text-[11px] text-[var(--editor-text)]/45">
+        <div className="px-3 py-6 text-center text-[11px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)]">
           Select a clip to edit its properties.
         </div>
       </div>

package/src/video/panels/LeftPanelTabs.tsx

@@ -148,8 +148,26 @@ export default function LeftPanelTabs({ tabs, defaultTabId, storageKey = DEFAULT
                 selected
                   // Label is ~10px accent TEXT → the AA-safe accent-text token
                   // (indigo-600 in light); the tint fill keeps the plain accent.
-                  ? 'text-[var(--editor-accent-text)] bg-[var(--editor-accent)]/10'
-                  : 'text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] hover:bg-[var(--editor-text)]/5',
+                  //
+                  // The tint uses `color-mix(...)` baked directly into the
+                  // arbitrary value, NOT Tailwind's `/NN` opacity modifier —
+                  // that modifier only works when Tailwind itself can parse
+                  // the color to inject an alpha channel, which it cannot do
+                  // for an arbitrary `var(...)` reference. `text-[var(--x)]/60`
+                  // silently emits NO utility at all (no build error, no
+                  // fallback), in this package's own Tailwind build and in a
+                  // host's. Measured: building this component under
+                  // montaj-app/desktop/ui's Tailwind (v3.4) produced zero
+                  // `editor-text`/`editor-accent` rules for any `/NN`-modified
+                  // class here, while the identical `color-mix(in_srgb,
+                  // var(--editor-text)_60%,transparent)` arbitrary value
+                  // compiled correctly in both builds. That silent failure is
+                  // exactly what made the rail's inactive items (all but the
+                  // selected tab) unreadable — no color rule at all, so the
+                  // button fell back to inherited/default text color against
+                  // the editor's dark background.
+                  ? 'text-[var(--editor-accent-text)] bg-[color-mix(in_srgb,var(--editor-accent)_10%,transparent)]'
+                  : 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]',
               )}
             >
               {selected && (

package/src/video/panels/OverlayContentPanel.tsx

@@ -65,7 +65,7 @@ export interface OverlayContentPanelProps {
 }
 
 const SECTION_CLASS = 'shrink-0 border-b border-[var(--editor-border)] flex flex-col overflow-hidden'
-const FIELD_LABEL_CLASS = 'text-[11px] uppercase tracking-wide text-[var(--editor-text)]/55'
+const FIELD_LABEL_CLASS = 'text-[11px] uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]'
 
 /**
  * Image prop control: a thumbnail preview plus a file picker that uploads the
@@ -128,16 +128,16 @@ function ImageField({
           className="h-14 w-14 shrink-0 rounded-md border border-[var(--editor-border)] object-cover bg-black/20"
         />
       ) : (
-        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-md border border-dashed border-[var(--editor-border)] text-[10px] text-[var(--editor-text)]/40">
+        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-md border border-dashed border-[var(--editor-border)] text-[10px] text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">
           none
         </div>
       )}
       <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <span className="truncate font-mono text-xs text-[var(--editor-text)]/70" title={value}>
+        <span className="truncate font-mono text-xs text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]" title={value}>
           {value ? value.split('/').pop() : '—'}
         </span>
         {uploadFile ? (
-          <label className="inline-flex w-fit cursor-pointer items-center gap-1.5 rounded-md border border-[var(--editor-border)] px-2.5 py-1 text-xs text-[var(--editor-text)]/80 hover:bg-[var(--editor-text)]/5">
+          <label className="inline-flex w-fit cursor-pointer items-center gap-1.5 rounded-md border border-[var(--editor-border)] px-2.5 py-1 text-xs text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]">
             {busy ? 'Uploading…' : 'Change…'}
             <input
               type="file"
@@ -324,7 +324,7 @@ export default function OverlayContentPanel({
     <div className={SECTION_CLASS}>
       <div className="flex flex-col gap-3 p-2">
         {fields.length === 0 ? (
-          <p className="px-1 py-4 text-center text-[11px] text-[var(--editor-text)]/45">
+          <p className="px-1 py-4 text-center text-[11px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)]">
             {item
               ? 'This overlay has no editable content.'
               : 'Select an overlay to edit its content.'}