@bycrux/editor 0.11.2 → 1.0.1

package/src/video/__tests__/CaptionListPanel.font.test.tsx

@@ -0,0 +1,397 @@
+/// <reference types="vite/client" />
+/**
+ * CaptionListPanel — the text-styling block inside the "Caption style"
+ * subsection (font family, case, letter spacing, line height, alignment).
+ *
+ * Sits in `__tests__/` while the panel's other tests sit beside the component
+ * (`../CaptionListPanel.test.tsx`); the render helpers and fixtures below
+ * mirror that file's shape rather than importing from it, so neither test file
+ * can silently change the other's setup.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import type { Project } from '../../types'
+import type { Captions, CaptionSegment } from '../../schema'
+import type { PlaybackClock } from '../playback-clock'
+import CaptionListPanel from '../CaptionListPanel'
+
+// The panel's active sub-tab persists to localStorage (usePersistentState).
+// Clear it, then seed 'captions' for consistency with the sibling suites;
+// every test here flips to the Format tab via `expandStyle()` anyway, since
+// the font and text-styling controls live there now (moved off the retired
+// "Style" tab, which split into "Styles" — a preset gallery, see
+// CaptionStyleGallery.test.tsx — and "Format" — these fine controls).
+//
+// No local ResizeObserver stub: the specimen strip observes its own width and
+// jsdom has no ResizeObserver, but src/test-setup.ts now installs a no-op one
+// globally. That also means these tests run the specimen's "measurement never
+// happens" floor-clamp path, which is why the size assertions below read the
+// reported figure rather than a computed px.
+beforeEach(() => {
+  window.localStorage.clear()
+  window.localStorage.setItem('montaj.editor.captionPanelTab', JSON.stringify('captions'))
+})
+afterEach(() => cleanup())
+
+Element.prototype.scrollIntoView = vi.fn()
+
+// The exact strings FONT_OPTIONS carries for these two entries
+// (src/text/FontPicker.tsx). Hard-coded rather than imported: the whole point
+// of the one-patch assertion below is that the persisted `fontFamily` and
+// `googleFonts` are the REAL pair a template needs, so reading them back out
+// of the same table the component reads would make the test agree with itself.
+const BALOO_2_VALUE = '"Baloo 2", system-ui, sans-serif'
+const BALOO_2_SPEC = 'Baloo+2:wght@400;500;600;700;800'
+const SYSTEM_VALUE = 'system-ui, -apple-system, "Helvetica Neue", sans-serif'
+
+const SEGS: CaptionSegment[] = [
+  {
+    id: 'cap-0',
+    text: 'hello world',
+    start: 0,
+    end: 2,
+    words: [
+      { word: 'hello', start: 0, end: 1 },
+      { word: 'world', start: 1, end: 2 },
+    ],
+  },
+  { id: 'cap-1', text: 'goodbye now', start: 2, end: 4 },
+]
+
+function makeClock(): PlaybackClock {
+  return { get: () => 0, set: vi.fn(), subscribe: () => () => {} }
+}
+
+function renderPanel(extra: Partial<Captions> = {}, currentTime = 0, selectedIds: string[] = []) {
+  const project = {
+    id: 'p1',
+    captions: { style: 'pop', fontsize: 46, segments: SEGS, ...extra },
+  } as unknown as Project
+  const onCaptionEdit = vi.fn()
+  const onProjectChange = vi.fn()
+
+  const view = render(
+    <CaptionListPanel
+      captionTrack={project.captions}
+      project={project}
+      currentTime={currentTime}
+      selectedIds={selectedIds}
+      onSelectCaption={vi.fn()}
+      onCaptionSegmentChange={vi.fn()}
+      onCaptionEdit={onCaptionEdit}
+      onProjectChange={onProjectChange}
+      onCaptionSegmentDelete={vi.fn()}
+      fps={30}
+      clock={makeClock()}
+      editFocusId={null}
+    />,
+  )
+  return { ...view, project, onCaptionEdit, onProjectChange }
+}
+
+function expandStyle() {
+  // Font/text-styling controls moved from a collapse toggle, then from a
+  // single "Style" tab, onto the "Format" tab; these suites seed 'captions',
+  // so this click flips there.
+  fireEvent.click(screen.getByRole('button', { name: 'Format' }))
+}
+
+function pickFont(label: string) {
+  fireEvent.click(screen.getByLabelText('Font family'))
+  fireEvent.click(screen.getByRole('option', { name: label }))
+}
+
+describe('CaptionListPanel font family', () => {
+  // THE assertion this whole control exists for. A family whose font file is
+  // never fetched renders as the fallback face in BOTH the editor preview and
+  // the export — silently, with no error anywhere — so `fontFamily` and
+  // `googleFonts` have to travel together. And in ONE patch, not two: two
+  // commits would stack two undo entries and could interleave with another
+  // edit landing between them, leaving the pair split. A test that checked
+  // only `fontFamily` would pass with the feature fully broken.
+  it('writes fontFamily AND googleFonts in a single commit', () => {
+    const { onCaptionEdit, onProjectChange } = renderPanel()
+    expandStyle()
+    pickFont('Baloo 2')
+
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    const captions = onCaptionEdit.mock.calls[0][0].captions
+    expect(captions.fontFamily).toBe(BALOO_2_VALUE)
+    expect(captions.googleFonts).toEqual([BALOO_2_SPEC])
+    // A font pick is a settled choice, not a drag — no live-preview channel.
+    expect(onProjectChange).not.toHaveBeenCalled()
+  })
+
+  // The System option is the one entry with no `spec`. `[]` is the correct
+  // write, not "leave googleFonts alone": a previously picked family's spec
+  // would otherwise linger in the project and keep being fetched for a
+  // typeface nothing renders in any more.
+  it('picking System writes an explicitly empty googleFonts, clearing the previous family spec', () => {
+    const { onCaptionEdit } = renderPanel({ fontFamily: BALOO_2_VALUE, googleFonts: [BALOO_2_SPEC] })
+    expandStyle()
+    pickFont('System')
+
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    const captions = onCaptionEdit.mock.calls[0][0].captions
+    expect(captions.fontFamily).toBe(SYSTEM_VALUE)
+    expect(captions.googleFonts).toEqual([])
+  })
+
+  it('the picker reflects the family already stored on the track', () => {
+    renderPanel({ fontFamily: BALOO_2_VALUE })
+    expandStyle()
+    expect(screen.getByLabelText('Font family').textContent).toContain('Baloo 2')
+  })
+})
+
+describe('CaptionListPanel bold toggle', () => {
+  it('reads on when fontWeight is absent', () => {
+    renderPanel()
+    expandStyle()
+    expect(screen.getByLabelText('Bold')).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('reads off for the explicit off value 400', () => {
+    renderPanel({ fontWeight: 400 })
+    expandStyle()
+    expect(screen.getByLabelText('Bold')).toHaveAttribute('aria-pressed', 'false')
+  })
+
+  it('reads on for a numeric weight of 600 or more', () => {
+    renderPanel({ fontWeight: 700 })
+    expandStyle()
+    expect(screen.getByLabelText('Bold')).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  // schema.ts's `fontWeight` is `number | string`, and CSS accepts the
+  // string keywords 'bold'/'bolder' as legal font-weight values.
+  // `Number('bold')` is `NaN`, which used to fail the `>= 600` check and show
+  // Bold OFF for a project that actually renders bold.
+  it.each(['bold', 'bolder', 'Bold'])('reads on for the CSS keyword %s', (kw) => {
+    renderPanel({ fontWeight: kw })
+    expandStyle()
+    expect(screen.getByLabelText('Bold')).toHaveAttribute('aria-pressed', 'true')
+  })
+})
+
+describe('CaptionListPanel text case', () => {
+  it.each([
+    ['Uppercase', 'uppercase'],
+    ['Lowercase', 'lowercase'],
+    ['Capitalize', 'capitalize'],
+  ])('%s writes captions.textTransform = %s', (label, value) => {
+    const { onCaptionEdit } = renderPanel()
+    expandStyle()
+    fireEvent.click(screen.getByLabelText(label))
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit.mock.calls[0][0].captions.textTransform).toBe(value)
+  })
+
+  // 'none', not an absent key: the patch is spread over the saved captions, so
+  // dropping the field would leave the stored 'uppercase' in place and the
+  // button would appear to do nothing.
+  it('clicking the ACTIVE case again clears it to none', () => {
+    const { onCaptionEdit } = renderPanel({ textTransform: 'uppercase' })
+    expandStyle()
+    const btn = screen.getByLabelText('Uppercase')
+    expect(btn).toHaveAttribute('aria-pressed', 'true')
+
+    fireEvent.click(btn)
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit.mock.calls[0][0].captions.textTransform).toBe('none')
+  })
+
+  it('only the stored case reads as pressed', () => {
+    renderPanel({ textTransform: 'lowercase' })
+    expandStyle()
+    expect(screen.getByLabelText('Lowercase')).toHaveAttribute('aria-pressed', 'true')
+    expect(screen.getByLabelText('Uppercase')).toHaveAttribute('aria-pressed', 'false')
+    expect(screen.getByLabelText('Capitalize')).toHaveAttribute('aria-pressed', 'false')
+  })
+
+  // `outline` renders all-caps by default (its stencil look) even with no
+  // stored textTransform at all — the chip has to seed from that default the
+  // same way the Bold toggle seeds from an absent fontWeight, or it lies
+  // about the caption's actual on-screen case.
+  it("a fresh outline caption (no stored textTransform) seeds the Uppercase chip pressed from the style's default", () => {
+    renderPanel({ style: 'outline' })
+    expandStyle()
+    expect(screen.getByLabelText('Uppercase')).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  // An explicit 'none' (written when the operator turns a case back off, see
+  // the test above) is not "absent" — it must NOT fall back to the style
+  // default.
+  it('an explicit "none" on outline overrides the style default — no chip reads pressed', () => {
+    renderPanel({ style: 'outline', textTransform: 'none' })
+    expandStyle()
+    expect(screen.getByLabelText('Uppercase')).toHaveAttribute('aria-pressed', 'false')
+  })
+
+  it('a style with no default case (pop) reads no case pressed when textTransform is absent', () => {
+    renderPanel({ style: 'pop' })
+    expandStyle()
+    expect(screen.getByLabelText('Uppercase')).toHaveAttribute('aria-pressed', 'false')
+    expect(screen.getByLabelText('Lowercase')).toHaveAttribute('aria-pressed', 'false')
+    expect(screen.getByLabelText('Capitalize')).toHaveAttribute('aria-pressed', 'false')
+  })
+})
+
+describe('CaptionListPanel alignment', () => {
+  it.each([
+    ['Align left', 'left'],
+    ['Align center', 'center'],
+    ['Align right', 'right'],
+  ])('%s writes captions.textAlign = %s', (label, value) => {
+    const { onCaptionEdit } = renderPanel()
+    expandStyle()
+    fireEvent.click(screen.getByLabelText(label))
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit.mock.calls[0][0].captions.textAlign).toBe(value)
+  })
+
+  it('reflects the stored alignment as pressed', () => {
+    renderPanel({ textAlign: 'right' })
+    expandStyle()
+    expect(screen.getByLabelText('Align right')).toHaveAttribute('aria-pressed', 'true')
+    expect(screen.getByLabelText('Align left')).toHaveAttribute('aria-pressed', 'false')
+  })
+})
+
+describe('CaptionListPanel letter spacing and line height steppers', () => {
+  // The stored shapes differ on purpose and are what the caption templates
+  // read: letter-spacing is a CSS length (unitless is invalid and the template
+  // falls back), line-height is a unitless multiple of the font size. The
+  // operator types a bare number for both — the `em` is appended here, the
+  // same contract FontSizePicker has with `px`.
+  it('letter spacing previews live as an em string and commits once on blur', () => {
+    const { onProjectChange, onCaptionEdit } = renderPanel()
+    expandStyle()
+    const input = screen.getByLabelText('Caption letter spacing')
+
+    fireEvent.change(input, { target: { value: '0.05' } })
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+    expect(onProjectChange.mock.calls[0][0].captions.letterSpacing).toBe('0.05em')
+    expect(onCaptionEdit).not.toHaveBeenCalled()
+
+    fireEvent.blur(input)
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit.mock.calls[0][0].captions.letterSpacing).toBe('0.05em')
+    // The commit did not also fire another live preview.
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('letter spacing accepts negatives and shows a stored value without its unit', () => {
+    const { onCaptionEdit } = renderPanel({ letterSpacing: '-0.02em' })
+    expandStyle()
+    const input = screen.getByLabelText('Caption letter spacing')
+    expect(input).toHaveValue(-0.02)
+
+    fireEvent.change(input, { target: { value: '-0.06' } })
+    fireEvent.blur(input)
+    expect(onCaptionEdit.mock.calls[0][0].captions.letterSpacing).toBe('-0.06em')
+  })
+
+  it('line height previews live as a unitless NUMBER and commits once on blur', () => {
+    const { onProjectChange, onCaptionEdit } = renderPanel()
+    expandStyle()
+    const input = screen.getByLabelText('Caption line height')
+
+    fireEvent.change(input, { target: { value: '1.4' } })
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+    expect(onProjectChange.mock.calls[0][0].captions.lineHeight).toBe(1.4)
+    expect(onCaptionEdit).not.toHaveBeenCalled()
+
+    fireEvent.blur(input)
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    const committed = onCaptionEdit.mock.calls[0][0].captions.lineHeight
+    expect(committed).toBe(1.4)
+    expect(typeof committed).toBe('number')
+    expect(onProjectChange).toHaveBeenCalledTimes(1)
+  })
+
+  // min/max on a number input are a spinner hint only — a typed or pasted
+  // value sails straight past them — so the clamp lives on the write path.
+  it('clamps a typed value to the control range', () => {
+    const { onProjectChange } = renderPanel()
+    expandStyle()
+    fireEvent.change(screen.getByLabelText('Caption line height'), { target: { value: '9' } })
+    expect(onProjectChange.mock.calls[0][0].captions.lineHeight).toBe(2.5)
+  })
+
+  // Focusing a field and leaving it untouched must not write anything: that
+  // would be a pointless PUT and an undo entry for a no-op.
+  it('a blur with no edit commits nothing', () => {
+    const { onProjectChange, onCaptionEdit } = renderPanel({ lineHeight: 1.2 })
+    expandStyle()
+    const input = screen.getByLabelText('Caption line height')
+    fireEvent.focus(input)
+    fireEvent.blur(input)
+    expect(onCaptionEdit).not.toHaveBeenCalled()
+    expect(onProjectChange).not.toHaveBeenCalled()
+  })
+
+  // Both fields read BLANK on a fresh caption track even though the template
+  // renders a real, non-default value — the placeholder is what makes the
+  // field honest about what's actually on screen, without writing that
+  // default into the project as an explicit value.
+  it("the letter-spacing field reports the active style's own default as a placeholder, not a stored value", () => {
+    renderPanel() // default renderPanel style is 'pop': letterSpacing defaults to -0.02em
+    expandStyle()
+    const input = screen.getByLabelText('Caption letter spacing') as HTMLInputElement
+    expect(input.value).toBe('')
+    expect(input).toHaveAttribute('placeholder', '-0.02')
+  })
+
+  it("the line-height field reports the active style's own default as a placeholder, not a stored value", () => {
+    renderPanel({ style: 'clean' }) // clean's lineHeight default is 1.3
+    expandStyle()
+    const input = screen.getByLabelText('Caption line height') as HTMLInputElement
+    expect(input.value).toBe('')
+    expect(input).toHaveAttribute('placeholder', '1.3')
+  })
+
+  it('an explicit stored value is shown as the value, not overridden by the placeholder', () => {
+    renderPanel({ letterSpacing: '0.08em' })
+    expandStyle()
+    const input = screen.getByLabelText('Caption letter spacing') as HTMLInputElement
+    expect(input.value).toBe('0.08')
+    // The placeholder is still there for when the value is cleared — it just
+    // isn't what's shown while a real value is present.
+    expect(input).toHaveAttribute('placeholder', '-0.02')
+  })
+
+  it('a style with no line-height default (karaoke) shows an empty placeholder', () => {
+    renderPanel({ style: 'karaoke' })
+    expandStyle()
+    expect(screen.getByLabelText('Caption line height')).toHaveAttribute('placeholder', '')
+  })
+
+  // The stepper's `onStep` closure nudges off whatever is ACTUALLY in force —
+  // see the comment on that closure in CaptionListPanel.tsx. With no stored
+  // letterSpacing, "in force" is the active style's own default, read via the
+  // `parseEmValue(stored) || parseEmValue(styleDefault) || 0` fallback chain.
+  // This is the one test that would catch that chain regressing to nudge off
+  // a bare 0 instead: default renderPanel() style is 'pop', whose default is
+  // '-0.02em', so one click has to land on -0.01em, not on 0.01em.
+  it('letter-spacing stepper nudges off the style default, not a bare 0, when nothing is stored', () => {
+    const { onCaptionEdit } = renderPanel()
+    expandStyle()
+    fireEvent.click(screen.getByRole('button', { name: 'Increase Caption letter spacing' }))
+
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit.mock.calls[0][0].captions.letterSpacing).toBe('-0.01em')
+  })
+
+  // A stepper click is a DISCRETE edit — one final change, one undo entry —
+  // never a preview/commit pair, on this headline field exactly like every
+  // other adopter of the shared stepper contract.
+  it('font-size stepper is a single discrete edit: one onCaptionEdit, no onProjectChange', () => {
+    const { onCaptionEdit, onProjectChange } = renderPanel()
+    expandStyle()
+    fireEvent.click(screen.getByRole('button', { name: 'Increase Caption font size' }))
+
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onProjectChange).not.toHaveBeenCalled()
+  })
+})

package/src/video/__tests__/CaptionListPanel.generate.test.tsx

@@ -0,0 +1,153 @@
+/// <reference types="vite/client" />
+/**
+ * CaptionListPanel — the Bold toggle and the manual generate/regenerate
+ * trigger (including its empty state).
+ *
+ * Sits in `__tests__/` alongside `CaptionListPanel.font.test.tsx` rather than
+ * beside the component, and does not modify or import from the sibling
+ * `../CaptionListPanel.test.tsx` — its own render helpers and fixtures mirror
+ * that file's shape independently, per the same convention.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import type { Project } from '../../types'
+import type { Captions, CaptionSegment } from '../../schema'
+import type { PlaybackClock } from '../playback-clock'
+import CaptionListPanel from '../CaptionListPanel'
+
+// The panel's active sub-tab persists to localStorage (usePersistentState).
+// Clear it, then seed 'captions' so the regenerate-trigger assertions render
+// on the tab the footer lives on; the Bold tests flip to the Format tab via
+// `expandStyle()`.
+beforeEach(() => {
+  window.localStorage.clear()
+  window.localStorage.setItem('montaj.editor.captionPanelTab', JSON.stringify('captions'))
+})
+afterEach(() => cleanup())
+
+Element.prototype.scrollIntoView = vi.fn()
+
+const SEGS: CaptionSegment[] = [
+  { id: 'cap-0', text: 'hello world', start: 0, end: 2 },
+  { id: 'cap-1', text: 'goodbye now', start: 2, end: 4 },
+]
+
+function makeClock(): PlaybackClock {
+  return { get: () => 0, set: vi.fn(), subscribe: () => () => {} }
+}
+
+function renderPanel(opts: {
+  captions?: Captions | undefined
+  withRegenerate?: boolean
+  captionsGenerating?: boolean
+} = {}) {
+  // `'captions' in opts`, not a destructured default: a destructured default
+  // also kicks in for an explicitly-passed `captions: undefined`, which is
+  // exactly the "no captionTrack at all" case several tests below need to
+  // construct on purpose.
+  const captions = 'captions' in opts ? opts.captions : { style: 'pop', fontsize: 46, segments: SEGS }
+  const { withRegenerate = true, captionsGenerating } = opts
+
+  const project = { id: 'p1', captions } as unknown as Project
+  const onCaptionEdit = vi.fn()
+  const onProjectChange = vi.fn()
+  const onRegenerateCaptions = withRegenerate ? vi.fn() : undefined
+
+  const view = render(
+    <CaptionListPanel
+      captionTrack={project.captions}
+      project={project}
+      currentTime={0}
+      selectedIds={[]}
+      onSelectCaption={vi.fn()}
+      onCaptionSegmentChange={vi.fn()}
+      onCaptionEdit={onCaptionEdit}
+      onProjectChange={onProjectChange}
+      onCaptionSegmentDelete={vi.fn()}
+      onRegenerateCaptions={onRegenerateCaptions}
+      captionsGenerating={captionsGenerating}
+      fps={30}
+      clock={makeClock()}
+      editFocusId={null}
+    />,
+  )
+  return { ...view, project, onCaptionEdit, onProjectChange, onRegenerateCaptions }
+}
+
+function expandStyle() {
+  // Bold moved from a collapse toggle, then from a single "Style" tab, onto
+  // the "Format" tab; these suites seed 'captions', so this click flips there.
+  fireEvent.click(screen.getByRole('button', { name: 'Format' }))
+}
+
+describe('CaptionListPanel Bold toggle', () => {
+  it('reads as pressed when fontWeight is absent', () => {
+    renderPanel({ captions: { style: 'pop', fontsize: 46, segments: SEGS } })
+    expandStyle()
+    expect(screen.getByLabelText('Bold')).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('clicking while pressed commits fontWeight: 400', () => {
+    const { onCaptionEdit } = renderPanel({ captions: { style: 'pop', fontsize: 46, segments: SEGS } })
+    expandStyle()
+    fireEvent.click(screen.getByLabelText('Bold'))
+
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    expect(onCaptionEdit.mock.calls[0][0].captions.fontWeight).toBe(400)
+  })
+
+  // THE assertion this toggle exists for: turning bold back on has to DELETE
+  // the key, not write a flat 700 back — a single shared weight would flatten
+  // all seven caption styles onto one look. A lazy `fontWeight: undefined`
+  // write would pass a `toBeUndefined()` check but still leave the key IN the
+  // object (and JSON.stringify would only drop it later, silently, on the
+  // trip to the server) — so this checks key ABSENCE directly.
+  it('clicking while off (fontWeight: 400) commits captions with no fontWeight key at all', () => {
+    const { onCaptionEdit } = renderPanel({ captions: { style: 'pop', fontsize: 46, segments: SEGS, fontWeight: 400 } })
+    expandStyle()
+    expect(screen.getByLabelText('Bold')).toHaveAttribute('aria-pressed', 'false')
+
+    fireEvent.click(screen.getByLabelText('Bold'))
+
+    expect(onCaptionEdit).toHaveBeenCalledTimes(1)
+    const captions = onCaptionEdit.mock.calls[0][0].captions
+    expect('fontWeight' in captions).toBe(false)
+  })
+})
+
+describe('CaptionListPanel generate/regenerate trigger', () => {
+  it('with no captions and a host that supports generation, shows the empty state and its button fires onRegenerateCaptions', () => {
+    const { onRegenerateCaptions } = renderPanel({ captions: undefined, withRegenerate: true })
+
+    const btn = screen.getByRole('button', { name: 'Generate captions' })
+    fireEvent.click(btn)
+    expect(onRegenerateCaptions).toHaveBeenCalledTimes(1)
+  })
+
+  it('with captions present, the trigger reads "Regenerate captions"', () => {
+    renderPanel({ captions: { style: 'pop', fontsize: 46, segments: SEGS } })
+    expect(screen.getByRole('button', { name: 'Regenerate captions' })).toBeTruthy()
+  })
+
+  it('with no captions and a host that does NOT support generation, shows explanatory text and no button', () => {
+    // A captions object with zero segments (not `undefined`) — the panel's
+    // own "nothing to show and nothing to offer" guard hides the WHOLE panel
+    // when both captionTrack and onRegenerateCaptions are absent, which is a
+    // different (already-covered) case from this one: an existing project
+    // that has a captions track but happens to have no rows left, on a host
+    // (Hub/LP) with no generation capability at all.
+    renderPanel({ captions: { style: 'pop', fontsize: 46, segments: [] }, withRegenerate: false })
+
+    expect(screen.getByText(/no captions yet/i)).toBeTruthy()
+    // With zero segments the panel shows a plain empty-state placeholder — no
+    // transcript list, no tab bar (there's nothing to tab between), and, with
+    // no generation capability, no button anywhere at all.
+    expect(screen.queryByRole('list', { name: 'Caption segments' })).toBeNull()
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('disables the trigger while a job is running', () => {
+    renderPanel({ captions: { style: 'pop', fontsize: 46, segments: SEGS }, captionsGenerating: true })
+    expect(screen.getByRole('button', { name: 'Regenerate captions' })).toBeDisabled()
+  })
+})

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

@@ -38,6 +38,7 @@ describe('CaptionRegenModal', () => {
       <CaptionRegenModal
         adapter={makeAdapter()}
         projectId="vid-1"
+        existingRowCount={1}
         onDone={onDone}
         onClose={onClose}
       />,
@@ -56,10 +57,38 @@ describe('CaptionRegenModal', () => {
       <CaptionRegenModal
         adapter={errorAdapter}
         projectId="vid-1"
+        existingRowCount={1}
         onDone={vi.fn()}
         onClose={vi.fn()}
       />,
     )
     await waitFor(() => expect(screen.getByText('multi_source')).toBeTruthy())
   })
+
+  it('warns how many rows will be discarded when the project has more than one', async () => {
+    render(
+      <CaptionRegenModal
+        adapter={makeAdapter()}
+        projectId="vid-1"
+        existingRowCount={3}
+        onDone={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    )
+    await waitFor(() => expect(screen.getByText(/replace all 3 caption rows with a single new row/i)).toBeTruthy())
+  })
+
+  it('shows no discard warning for a single-row (or empty) project', async () => {
+    render(
+      <CaptionRegenModal
+        adapter={makeAdapter()}
+        projectId="vid-1"
+        existingRowCount={1}
+        onDone={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    )
+    await waitFor(() => expect(screen.getByText(/transcribing audio/i)).toBeTruthy())
+    expect(screen.queryByText(/caption rows/i)).toBeNull()
+  })
 })