# Subtitle Properties Panel Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Make the editor's right sidebar behave like a real current-subtitle properties panel with optional bulk style application.

**Architecture:** The implementation keeps `EditorScreen` as the orchestration layer while moving subtitle style data into each `Subtitle`. Subtitle data is normalized on load, the right sidebar binds to the active subtitle, and preview/export paths read from subtitle-level style settings instead of one shared top-level state object.

**Tech Stack:** React, TypeScript, Vite, Vitest, Testing Library, Tailwind utility classes

---

### Task 1: Extend subtitle types for per-subtitle styles

**Files:**
- Modify: `src/types.ts`

**Step 1: Write the failing test**

Use existing component tests in the next task to drive type usage rather than adding a dedicated type-only test.

**Step 2: Run test to verify it fails**

Run: `npm run test -- src/components/EditorScreen.test.tsx`
Expected: FAIL after the next test task starts referencing `subtitle.textStyle`

**Step 3: Write minimal implementation**

- Add a `SubtitleTextStyle` interface with font family, size, color, stroke color, stroke width, alignment, and font decoration flags
- Add optional `textStyle?: SubtitleTextStyle` to `Subtitle`

**Step 4: Run test to verify it passes**

Run after Task 2 implementation.

**Step 5: Commit**

```bash
git add src/types.ts src/components/EditorScreen.test.tsx src/components/EditorScreen.tsx
git commit -m "feat: support per-subtitle style settings"
```

### Task 2: Add failing editor tests for the properties panel behavior

**Files:**
- Modify: `src/components/EditorScreen.test.tsx`

**Step 1: Write the failing test**

Add tests that:

- render subtitles with different speakers and styles
- verify the right panel shows the active speaker label
- toggle bold with bulk apply disabled and assert only one subtitle changes
- toggle bulk apply on, change a style, and assert all subtitles update

**Step 2: Run test to verify it fails**

Run: `npm run test -- src/components/EditorScreen.test.tsx`
Expected: FAIL because the current panel is static and does not update subtitle-level style data

**Step 3: Write minimal implementation**

Do not implement here; proceed to Tasks 3 and 4.

**Step 4: Run test to verify it passes**

Run after Tasks 3 and 4.

**Step 5: Commit**

```bash
git add src/components/EditorScreen.test.tsx src/components/EditorScreen.tsx src/types.ts
git commit -m "test: cover subtitle properties panel interactions"
```

### Task 3: Normalize subtitle style data and bind the sidebar to the active subtitle

**Files:**
- Modify: `src/components/EditorScreen.tsx`

**Step 1: Write the failing test**

Covered by Task 2.

**Step 2: Run test to verify it fails**

Run: `npm run test -- src/components/EditorScreen.test.tsx`
Expected: FAIL with missing active-speaker and style-update assertions

**Step 3: Write minimal implementation**

- Add a default subtitle style constant and normalization helper
- Normalize generated subtitles before storing them in state
- Derive `activeSubtitle` and `activeSubtitleStyle`
- Replace hard-coded speaker/name fields with active subtitle data
- Add `applyToAllSubtitles` state
- Add helper functions that update subtitle styles per subtitle or across all subtitles

**Step 4: Run test to verify it passes**

Run: `npm run test -- src/components/EditorScreen.test.tsx`
Expected: PASS for sidebar interaction assertions

**Step 5: Commit**

```bash
git add src/components/EditorScreen.tsx src/components/EditorScreen.test.tsx src/types.ts
git commit -m "feat: wire subtitle properties panel to active subtitle"
```

### Task 4: Render subtitle preview with subtitle-level styles

**Files:**
- Modify: `src/components/EditorScreen.tsx`

**Step 1: Write the failing test**

Covered by Task 2 by asserting the preview subtitle reflects changed style controls.

**Step 2: Run test to verify it fails**

Run: `npm run test -- src/components/EditorScreen.test.tsx`
Expected: FAIL because the overlay still reads the old shared style state

**Step 3: Write minimal implementation**

- Replace shared overlay style usage with the currently visible subtitle's style
- Map size presets to concrete font sizes
- Add stroke rendering through `textShadow`

**Step 4: Run test to verify it passes**

Run: `npm run test -- src/components/EditorScreen.test.tsx`
Expected: PASS

**Step 5: Commit**

```bash
git add src/components/EditorScreen.tsx src/components/EditorScreen.test.tsx
git commit -m "feat: preview subtitle-level style changes"
```

### Task 5: Verify targeted editor behavior

**Files:**
- Modify: `src/components/EditorScreen.tsx` if any verification fixes are needed
- Modify: `src/components/EditorScreen.test.tsx` if any verification fixes are needed

**Step 1: Write the failing test**

No new test unless verification exposes a gap.

**Step 2: Run test to verify it fails**

Only if a regression is found during verification.

**Step 3: Write minimal implementation**

Apply only the smallest follow-up fixes needed to make the targeted suite green.

**Step 4: Run test to verify it passes**

Run: `npm run test -- src/components/EditorScreen.test.tsx`
Expected: PASS

Optional broader check:

Run: `npm run test -- src/components/EditorScreen.test.tsx src/services/subtitleService.test.ts`
Expected: PASS

**Step 5: Commit**

```bash
git add src/components/EditorScreen.tsx src/components/EditorScreen.test.tsx src/types.ts
git commit -m "test: verify subtitle properties panel flow"
```