# Phase 7 — Modals Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Add a layered modal system to the React renderer — a single `<ModalLayer />` driven by a discriminated-union `useAppStore.modal` field, hosting 7 modal types (SettingsSheet + 4 export dialogs + About + Welcome + Confirm) plus a persisted `useSettingsStore` for user preferences, with all modals opened via the Phase 6 command store.

**Architecture:** Modal state is a discriminated union in `useAppStore` (runtime-only, excluded from `partialize`). A new `useSettingsStore` persists user preferences via `zustand persist` with `partialize` (matching the `useFileStore` and `useCommandStore` precedent). All 7 modal components are small, focused, and individually testable. A `useExportSource` hook and `ExportDialogFooter` component are shared across the 4 export dialogs. Commands registered in `register-menu-commands.ts` open the modals — no component opens a modal directly.

**Tech Stack:** React 19, zustand (with persist + immer middleware), shadcn/ui new-york style (radix-ui primitives), react-hook-form + zod, lucide-react icons, motion (for transitions).

**Spec:** `docs/superpowers/specs/2026-06-05-phase-7-modals-design.md`
**Tag:** `phase-7-modals`

---

## Conventions

- **shadcn primitives** are pasted manually from canonical sources (the shadcn CLI is broken on Node v24 in this project — see memory `shadcn-cli-blocked-manual-primitives`). For each primitive, the task cites the canonical URL and provides a smoke test.
- **All stores** use zustand's `persist` middleware with `partialize` to selectively serialize (matching the `useFileStore` and `useCommandStore` precedent).
- **All commands** are registered in `src/renderer/lib/commands/register-menu-commands.ts` (Phase 6 pattern). Components never call `openModal` directly — they `dispatch` a command.
- **All IPC** goes through `ipc.*` wrappers (`src/renderer/lib/ipc.ts`).
- **No `tsconfig.json`** exists in this project. Validate TypeScript with `npx vite build --config vite.renderer.config.ts` after each task that adds/changes code.
- **Test commands:** `npx vitest run tests/<path>` (one file) or `npx vitest run` (full suite). Tests live in `tests/unit/`, `tests/component/`, `tests/integration/`.
- **Commit style:** `feat(renderer): ...`, `test(renderer): ...`, `feat(renderer): ... + tests` for combined commits.
- **Style:** new-york (set in `components.json`). All primitives use `cn()` from `@/lib/utils` for class merging.

---

## Task 1: Add shadcn `label` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/label.tsx`
- Create: `tests/component/ui/label.test.tsx`

- [ ] **Step 1: Create the primitive**

Canonical source: https://ui.shadcn.com/docs/components/label

Create `src/renderer/components/ui/label.tsx` by pasting the canonical new-york style source. It is a thin wrapper around `@radix-ui/react-label` using `forwardRef` and `cn()`. The file should be ~25 lines.

Verify the file imports `@radix-ui/react-label` (if not installed, run `npm install @radix-ui/react-label`).

- [ ] **Step 2: Write the smoke test**

Create `tests/component/ui/label.test.tsx`:

```tsx
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Label } from '@/components/ui/label';

describe('Label', () => {
  it('renders children and associates with a control', () => {
    render(
      <>
        <Label htmlFor="x">Username</Label>
        <input id="x" />
      </>
    );
    const label = screen.getByText(/username/i);
    expect(label).toBeInTheDocument();
    expect(label.tagName).toBe('LABEL');
  });
});
```

- [ ] **Step 3: Run the test**

```bash
npx vitest run tests/component/ui/label.test.tsx
```

Expected: PASS, 1 test.

- [ ] **Step 4: Commit**

```bash
git add src/renderer/components/ui/label.tsx tests/component/ui/label.test.tsx package.json package-lock.json
git commit -m "feat(renderer): add shadcn label primitive"
```

---

## Task 2: Add shadcn `input` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/input.tsx`
- Create: `tests/component/ui/input.test.tsx`

- [ ] **Step 1: Create the primitive**

Canonical source: https://ui.shadcn.com/docs/components/input

Create `src/renderer/components/ui/input.tsx` by pasting the canonical new-york source. ~30 lines. Uses `React.forwardRef`, `cn()`, no radix dep.

- [ ] **Step 2: Write the smoke test**

Create `tests/component/ui/input.test.tsx`:

```tsx
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Input } from '@/components/ui/input';

describe('Input', () => {
  it('renders and accepts typing', async () => {
    const onChange = vi.fn();
    render(<Input aria-label="name" onChange={onChange} />);
    const input = screen.getByLabelText(/name/i);
    await userEvent.type(input, 'a');
    expect(onChange).toHaveBeenCalled();
  });
});
```

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/input.test.tsx
git add src/renderer/components/ui/input.tsx tests/component/ui/input.test.tsx
git commit -m "feat(renderer): add shadcn input primitive"
```

---

## Task 3: Add shadcn `textarea` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/textarea.tsx`
- Create: `tests/component/ui/textarea.test.tsx`

- [ ] **Step 1: Create the primitive**

Canonical source: https://ui.shadcn.com/docs/components/textarea

Create `src/renderer/components/ui/textarea.tsx` (~25 lines, `forwardRef` + `cn()`).

- [ ] **Step 2: Smoke test**

```tsx
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Textarea } from '@/components/ui/textarea';

describe('Textarea', () => {
  it('renders a multi-line input', () => {
    render(<Textarea aria-label="notes" defaultValue="hello" />);
    const ta = screen.getByLabelText(/notes/i);
    expect.ta.tagName.toBe('TEXTAREA');
    expect(ta).toHaveValue('hello');
  });
});
```

Fix: change `expect.ta` to `expect(ta)`.

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/textarea.test.tsx
git add src/renderer/components/ui/textarea.tsx tests/component/ui/textarea.test.tsx
git commit -m "feat(renderer): add shadcn textarea primitive"
```

---

## Task 4: Add shadcn `checkbox` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/checkbox.tsx`
- Create: `tests/component/ui/checkbox.test.tsx`

- [ ] **Step 1: Create**

Canonical: https://ui.shadcn.com/docs/components/checkbox. ~40 lines, wraps `@radix-ui/react-checkbox` with `Check` icon from lucide-react. If `@radix-ui/react-checkbox` is not installed, run `npm install @radix-ui/react-checkbox`.

- [ ] **Step 2: Smoke test**

```tsx
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Checkbox } from '@/components/ui/checkbox';

describe('Checkbox', () => {
  it('toggles checked state on click', async () => {
    const onCheckedChange = vi.fn();
    render(<Checkbox aria-label="agree" onCheckedChange={onCheckedChange} />);
    await userEvent.click(screen.getByRole('checkbox', { name: /agree/i }));
    expect(onCheckedChange).toHaveBeenCalledWith(true);
  });
});
```

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/checkbox.test.tsx
git add src/renderer/components/ui/checkbox.tsx tests/component/ui/checkbox.test.tsx package.json package-lock.json
git commit -m "feat(renderer): add shadcn checkbox primitive"
```

---

## Task 5: Add shadcn `switch` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/switch.tsx`
- Create: `tests/component/ui/switch.test.tsx`

- [ ] **Step 1: Create**

Canonical: https://ui.shadcn.com/docs/components/switch. ~30 lines, wraps `@radix-ui/react-switch`. Install if needed: `npm install @radix-ui/react-switch`.

- [ ] **Step 2: Smoke test**

```tsx
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Switch } from '@/components/ui/switch';

describe('Switch', () => {
  it('toggles checked state', async () => {
    const onCheckedChange = vi.fn();
    render(<Switch aria-label="airplane" onCheckedChange={onCheckedChange} />);
    await userEvent.click(screen.getByRole('switch', { name: /airplane/i }));
    expect(onCheckedChange).toHaveBeenCalledWith(true);
  });
});
```

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/switch.test.tsx
git add src/renderer/components/ui/switch.tsx tests/component/ui/switch.test.tsx package.json package-lock.json
git commit -m "feat(renderer): add shadcn switch primitive"
```

---

## Task 6: Add shadcn `slider` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/slider.tsx`
- Create: `tests/component/ui/slider.test.tsx`

- [ ] **Step 1: Create**

Canonical: https://ui.shadcn.com/docs/components/slider. ~50 lines, wraps `@radix-ui/react-slider`. Install if needed: `npm install @radix-ui/react-slider`.

- [ ] **Step 2: Smoke test**

```tsx
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Slider } from '@/components/ui/slider';

describe('Slider', () => {
  it('renders with default value and accepts change', async () => {
    const onValueChange = vi.fn();
    render(<Slider aria-label="volume" defaultValue={[50]} onValueChange={onValueChange} />);
    expect(screen.getByRole('slider', { name: /volume/i })).toHaveAttribute('aria-valuenow', '50');
  });
});
```

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/slider.test.tsx
git add src/renderer/components/ui/slider.tsx tests/component/ui/slider.test.tsx package.json package-lock.json
git commit -m "feat(renderer): add shadcn slider primitive"
```

---

## Task 7: Add shadcn `radio-group` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/radio-group.tsx`
- Create: `tests/component/ui/radio-group.test.tsx`

- [ ] **Step 1: Create**

Canonical: https://ui.shadcn.com/docs/components/radio-group. ~50 lines, wraps `@radix-ui/react-radio-group`. Install if needed: `npm install @radix-ui/react-radio-group`.

- [ ] **Step 2: Smoke test**

```tsx
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';

describe('RadioGroup', () => {
  it('selects the clicked item', async () => {
    const onValueChange = vi.fn();
    render(
      <RadioGroup onValueChange={onValueChange} defaultValue="a">
        <RadioGroupItem value="a" aria-label="A" />
        <RadioGroupItem value="b" aria-label="B" />
      </RadioGroup>
    );
    await userEvent.click(screen.getByRole('radio', { name: /b/i }));
    expect(onValueChange).toHaveBeenCalledWith('b');
  });
});
```

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/radio-group.test.tsx
git add src/renderer/components/ui/radio-group.tsx tests/component/ui/radio-group.test.tsx package.json package-lock.json
git commit -m "feat(renderer): add shadcn radio-group primitive"
```

---

## Task 8: Add shadcn `select` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/select.tsx`
- Create: `tests/component/ui/select.test.tsx`

- [ ] **Step 1: Create**

Canonical: https://ui.shadcn.com/docs/components/select. ~150 lines, wraps `@radix-ui/react-select`. Install if needed: `npm install @radix-ui/react-select`. Use the canonical new-york source which exports: `Select`, `SelectGroup`, `SelectValue`, `SelectTrigger`, `SelectContent`, `SelectLabel`, `SelectItem`, `SelectSeparator`, `SelectScrollUpButton`, `SelectScrollDownButton`.

- [ ] **Step 2: Smoke test**

```tsx
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

describe('Select', () => {
  it('renders trigger and opens content on click', async () => {
    const onValueChange = vi.fn();
    render(
      <Select onValueChange={onValueChange}>
        <SelectTrigger aria-label="fruit">
          <SelectValue placeholder="Pick one" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
        </SelectContent>
      </Select>
    );
    await userEvent.click(screen.getByRole('combobox', { name: /fruit/i }));
    expect(screen.getByRole('option', { name: /apple/i })).toBeInTheDocument();
  });
});
```

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/select.test.tsx
git add src/renderer/components/ui/select.tsx tests/component/ui/select.test.tsx package.json package-lock.json
git commit -m "feat(renderer): add shadcn select primitive"
```

---

## Task 9: Add shadcn `tabs` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/tabs.tsx`
- Create: `tests/component/ui/tabs.test.tsx`

- [ ] **Step 1: Create**

Canonical: https://ui.shadcn.com/docs/components/tabs. ~50 lines, wraps `@radix-ui/react-tabs`. Install if needed: `npm install @radix-ui/react-tabs`. Exports: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`.

- [ ] **Step 2: Smoke test**

```tsx
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';

describe('Tabs', () => {
  it('switches content on trigger click', async () => {
    render(
      <Tabs defaultValue="one">
        <TabsList>
          <TabsTrigger value="one">One</TabsTrigger>
          <TabsTrigger value="two">Two</TabsTrigger>
        </TabsList>
        <TabsContent value="one">Content one</TabsContent>
        <TabsContent value="two">Content two</TabsContent>
      </Tabs>
    );
    expect(screen.getByText(/content one/i)).toBeVisible();
    await userEvent.click(screen.getByRole('tab', { name: /two/i }));
    expect(screen.getByText(/content two/i)).toBeVisible();
  });
});
```

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/tabs.test.tsx
git add src/renderer/components/ui/tabs.tsx tests/component/ui/tabs.test.tsx package.json package-lock.json
git commit -m "feat(renderer): add shadcn tabs primitive"
```

---

## Task 10: Add shadcn `dialog` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/dialog.tsx`
- Create: `tests/component/ui/dialog.test.tsx`

- [ ] **Step 1: Create**

Canonical: https://ui.shadcn.com/docs/components/dialog. ~120 lines, wraps `@radix-ui/react-dialog`. Install if needed: `npm install @radix-ui/react-dialog`. Exports: `Dialog`, `DialogPortal`, `DialogOverlay`, `DialogTrigger`, `DialogClose`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`.

- [ ] **Step 2: Smoke test**

```tsx
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';

describe('Dialog', () => {
  it('opens on trigger click and shows content', async () => {
    render(
      <Dialog>
        <DialogTrigger>Open</DialogTrigger>
        <DialogContent aria-describedby="d">
          <DialogHeader>
            <DialogTitle>Title</DialogTitle>
            <DialogDescription id="d">Desc</DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    );
    await userEvent.click(screen.getByRole('button', { name: /open/i }));
    expect(screen.getByRole('dialog')).toBeInTheDocument();
    expect(screen.getByText(/title/i)).toBeInTheDocument();
  });
});
```

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/dialog.test.tsx
git add src/renderer/components/ui/dialog.tsx tests/component/ui/dialog.test.tsx package.json package-lock.json
git commit -m "feat(renderer): add shadcn dialog primitive"
```

---

## Task 11: Add shadcn `sheet` primitive + smoke test

**Files:**
- Create: `src/renderer/components/ui/sheet.tsx`
- Create: `tests/component/ui/sheet.test.tsx`

- [ ] **Step 1: Create**

Canonical: https://ui.shadcn.com/docs/components/sheet. ~180 lines, wraps `@radix-ui/react-dialog` with side-variant styling. Exports: `Sheet`, `SheetPortal`, `SheetOverlay`, `SheetTrigger`, `SheetClose`, `SheetContent`, `SheetHeader`, `SheetFooter`, `SheetTitle`, `SheetDescription`. Supports `side: 'top' | 'right' | 'bottom' | 'left'`. We'll use `side="right"` for the SettingsSheet.

- [ ] **Step 2: Smoke test**

```tsx
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';

describe('Sheet', () => {
  it('opens on trigger click', async () => {
    render(
      <Sheet>
        <SheetTrigger>Open</SheetTrigger>
        <SheetContent aria-describedby="d" side="right">
          <SheetHeader>
            <SheetTitle>Settings</SheetTitle>
            <SheetDescription id="d">Desc</SheetDescription>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    );
    await userEvent.click(screen.getByRole('button', { name: /open/i }));
    expect(screen.getByRole('dialog')).toBeInTheDocument();
  });
});
```

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/sheet.test.tsx
git add src/renderer/components/ui/sheet.tsx tests/component/ui/sheet.test.tsx
git commit -m "feat(renderer): add shadcn sheet primitive"
```

---

## Task 12: Add shadcn `form` primitive (react-hook-form glue) + smoke test

**Files:**
- Create: `src/renderer/components/ui/form.tsx`
- Create: `tests/component/ui/form.test.tsx`

- [ ] **Step 1: Create**

Canonical: https://ui.shadcn.com/docs/components/form. ~100 lines. Composes `react-hook-form` (already installed) + `@hookform/resolvers` (already installed) + radix `Label` and `Slot`. Exports: `Form`, `FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormDescription`, `FormMessage`, `useFormField`.

- [ ] **Step 2: Smoke test**

```tsx
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';

const schema = z.object({ name: z.string().min(2) });

function Harness() {
  const form = useForm<{ name: string }>({
    resolver: zodResolver(schema),
    defaultValues: { name: '' },
  });
  return (
    <Form {...form}>
      <FormField
        control={form.control}
        name="name"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Name</FormLabel>
            <FormControl>
              <Input {...field} aria-label="name" />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </Form>
  );
}

describe('Form', () => {
  it('renders a labeled form field', () => {
    render(<Harness />);
    expect(screen.getByLabelText(/name/i)).toBeInTheDocument();
  });
});
```

- [ ] **Step 3: Run, commit**

```bash
npx vitest run tests/component/ui/form.test.tsx
git add src/renderer/components/ui/form.tsx tests/component/ui/form.test.tsx
git commit -m "feat(renderer): add shadcn form primitive (react-hook-form glue)"
```

---

## Task 13: `lib/ascii-table.ts` helper + test (TDD)

**Files:**
- Create: `src/renderer/lib/ascii-table.ts`
- Create: `tests/unit/lib/ascii-table.test.ts`

- [ ] **Step 1: Write the failing tests**

Create `tests/unit/lib/ascii-table.test.ts`:

```ts
import { describe, it, expect } from 'vitest';
import { toAsciiTable, applyAsciiTransform } from '@/lib/ascii-table';

describe('toAsciiTable', () => {
  it('renders a simple 2x2 table with aligned columns', () => {
    const out = toAsciiTable([
      ['Name', 'Age'],
      ['Alice', '30'],
      ['Bob', '25'],
    ]);
    expect(out).toBe('| Name  | Age |\n| ----- | --- |\n| Alice | 30  |\n| Bob   | 25  |');
  });

  it('handles empty input', () => {
    expect(toAsciiTable([])).toBe('');
  });

  it('aligns numeric columns to the right', () => {
    const out = toAsciiTable([
      ['Item', 'Price'],
      ['X', '100'],
      ['YY', '7'],
    ]);
    // 3-char column width; "7" right-padded to 3 chars
    expect(out).toContain('| 100 |');
    expect(out).toContain('|   7 |');
  });
});

describe('applyAsciiTransform', () => {
  it('replaces markdown tables with fenced ASCII tables', () => {
    const md = 'Before\n\n| Name | Age |\n| --- | --- |\n| Alice | 30 |\n\nAfter';
    const out = applyAsciiTransform(md);
    expect(out).toContain('```\n| Name  | Age |');
    expect(out).toContain('| Alice | 30  |');
    expect(out).toContain('```');
    expect(out).toContain('Before');
    expect(out).toContain('After');
  });

  it('passes through markdown without tables unchanged', () => {
    const md = '# Hello\n\nNo tables here.';
    expect(applyAsciiTransform(md)).toBe(md);
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/unit/lib/ascii-table.test.ts
```

Expected: FAIL — `Cannot find module '@/lib/ascii-table'`.

- [ ] **Step 3: Implement**

Create `src/renderer/lib/ascii-table.ts`:

```ts
/**
 * Convert a 2D string array to a fixed-width ASCII table with `| ... |` rows
 * and a `| --- |` separator. Right-aligns columns whose header starts with a
 * digit (heuristic for numeric columns).
 */
export function toAsciiTable(rows: string[][]): string {
  if (rows.length === 0) return '';
  const numCols = Math.max(...rows.map((r) => r.length));
  const widths: number[] = Array.from({ length: numCols }, (_, c) =>
    Math.max(...rows.map((r) => (r[c] ?? '').length))
  );
  const isNumeric = rows[0]?.slice(1).some((c) => /^\d/.test(c)) ?? false;
  const pad = (s: string, w: number) =>
    isNumeric ? s.padStart(w) : s.padEnd(w);
  const lines = rows.map((row) =>
    '| ' +
    Array.from({ length: numCols }, (_, c) => pad(row[c] ?? '', widths[c])).join(' | ') +
    ' |'
  );
  // Insert separator after first row
  const sep =
    '| ' + Array.from({ length: numCols }, (_, c) => '-'.repeat(widths[c])).join(' | ') + ' |';
  return [lines[0], sep, ...lines.slice(1)].join('\n');
}

// Matches a markdown table block: header row, separator, ≥1 data row.
const TABLE_RE = /^\|.+\|\n^\|[\s:|-]+\|\n((?:^\|.+\|\n?)+)/gm;

/**
 * Replace all markdown tables in `source` with fenced code blocks containing
 * the ASCII-rendered equivalent. Non-table content is preserved verbatim.
 */
export function applyAsciiTransform(source: string): string {
  return source.replace(TABLE_RE, (block) => {
    const lines = block.trim().split('\n');
    const header = lines[0].slice(1, -1).split('|').map((s) => s.trim());
    const body = lines.slice(2).map((l) =>
      l.slice(1, -1).split('|').map((s) => s.trim())
    );
    return '```\n' + toAsciiTable([header, ...body]) + '\n```';
  });
}
```

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/unit/lib/ascii-table.test.ts
```

Expected: PASS, 5 tests.

- [ ] **Step 5: Commit**

```bash
git add src/renderer/lib/ascii-table.ts tests/unit/lib/ascii-table.test.ts
git commit -m "feat(renderer): ascii-table helper for export-time table formatting"
```

---

## Task 14: `lib/validators.ts` (zod schemas) + test (TDD)

**Files:**
- Create: `src/renderer/lib/validators.ts`
- Create: `tests/unit/lib/validators.test.ts`

- [ ] **Step 1: Write the failing tests**

Create `tests/unit/lib/validators.test.ts`:

```ts
import { describe, it, expect } from 'vitest';
import {
  settingsSchema,
  exportPdfSchema,
  exportDocxSchema,
  exportHtmlSchema,
  exportBatchSchema,
} from '@/lib/validators';

describe('settingsSchema', () => {
  it('accepts a valid settings object', () => {
    const r = settingsSchema.safeParse({});
    // Settings schema has all-optional/defaulted fields, so {} should pass
    expect(r.success).toBe(true);
  });

  it('rejects out-of-range fontSize', () => {
    const r = settingsSchema.safeParse({ fontSize: 100 });
    expect(r.success).toBe(false);
  });
});

describe('exportPdfSchema', () => {
  it('accepts a4 + normal margins + embedFonts true', () => {
    expect(exportPdfSchema.safeParse({ format: 'a4', margins: 'normal', embedFonts: true }).success).toBe(true);
  });
  it('rejects unknown format', () => {
    expect(exportPdfSchema.safeParse({ format: 'b4' }).success).toBe(false);
  });
});

describe('exportDocxSchema', () => {
  it('accepts standard template', () => {
    expect(exportDocxSchema.safeParse({ template: 'standard' }).success).toBe(true);
  });
  it('rejects unknown template', () => {
    expect(exportDocxSchema.safeParse({ template: 'fancy' }).success).toBe(false);
  });
});

describe('exportHtmlSchema', () => {
  it('accepts github highlight style', () => {
    expect(exportHtmlSchema.safeParse({ standalone: true, highlightStyle: 'github' }).success).toBe(true);
  });
});

describe('exportBatchSchema', () => {
  it('accepts a non-empty file list', () => {
    expect(exportBatchSchema.safeParse({ format: 'pdf', concurrency: 4, filePaths: ['/a.md'] }).success).toBe(true);
  });
  it('rejects empty file list', () => {
    expect(exportBatchSchema.safeParse({ format: 'pdf', concurrency: 4, filePaths: [] }).success).toBe(false);
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/unit/lib/validators.test.ts
```

Expected: FAIL — `Cannot find module '@/lib/validators'`.

- [ ] **Step 3: Implement**

Create `src/renderer/lib/validators.ts`:

```ts
import { z } from 'zod';

export const settingsSchema = z.object({
  fontSize: z.number().min(10).max(24).default(14),
  tabSize: z.union([z.literal(2), z.literal(4), z.literal(8)]).default(4),
  lineNumbers: z.boolean().default(true),
  wordWrap: z.boolean().default(true),
  minimap: z.boolean().default(true),
  theme: z.enum(['light', 'dark', 'auto']).default('auto'),
  accentColor: z.enum(['brand', 'blue', 'green', 'purple', 'orange']).default('brand'),
  fontFamily: z.enum(['system', 'jetbrains', 'fira']).default('system'),
  pdfFormat: z.enum(['letter', 'a4', 'legal']).default('a4'),
  pdfMargins: z.enum(['normal', 'narrow', 'wide']).default('normal'),
  pdfEmbedFonts: z.boolean().default(true),
  docxTemplate: z.enum(['standard', 'minimal', 'modern']).default('standard'),
  htmlHighlightStyle: z.enum(['github', 'monokai', 'nord', 'none']).default('github'),
  renderTablesAsAscii: z.boolean().default(false),
  welcomeDismissed: z.boolean().default(false),
});
export type Settings = z.infer<typeof settingsSchema>;

export const exportPdfSchema = z.object({
  format: z.enum(['letter', 'a4', 'legal']),
  margins: z.enum(['normal', 'narrow', 'wide']),
  embedFonts: z.boolean(),
  renderTablesAsAscii: z.boolean().optional(),
});
export type ExportPdfOptions = z.infer<typeof exportPdfSchema>;

export const exportDocxSchema = z.object({
  template: z.enum(['standard', 'minimal', 'modern']),
  renderTablesAsAscii: z.boolean().optional(),
});
export type ExportDocxOptions = z.infer<typeof exportDocxSchema>;

export const exportHtmlSchema = z.object({
  standalone: z.boolean(),
  highlightStyle: z.enum(['github', 'monokai', 'nord', 'none']),
  renderTablesAsAscii: z.boolean().optional(),
});
export type ExportHtmlOptions = z.infer<typeof exportHtmlSchema>;

export const exportBatchSchema = z.object({
  format: z.enum(['pdf', 'docx', 'html', 'png']),
  concurrency: z.number().int().min(1).max(16),
  filePaths: z.array(z.string()).min(1),
});
export type ExportBatchOptions = z.infer<typeof exportBatchSchema>;
```

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/unit/lib/validators.test.ts
```

Expected: PASS, 7 tests.

- [ ] **Step 5: Commit**

```bash
git add src/renderer/lib/validators.ts tests/unit/lib/validators.test.ts
git commit -m "feat(renderer): zod validators for settings + export schemas"
```

---

## Task 15: Extend `useAppStore` with `modal` discriminated union (TDD)

**Files:**
- Modify: `src/renderer/stores/app-store.ts`
- Modify: `tests/unit/stores/app-store.test.ts`

- [ ] **Step 1: Write the failing tests**

Append to `tests/unit/stores/app-store.test.ts`:

```ts
import { describe, it, expect, beforeEach } from 'vitest';
import { useAppStore } from '@/stores/app-store';

describe('useAppStore (modal)', () => {
  beforeEach(() => {
    localStorage.clear();
    useAppStore.setState({
      sidebarVisible: true,
      previewVisible: true,
      zenMode: false,
      paneSizes: { sidebar: 20, editor: 50, preview: 30 },
      modal: { kind: null },
    } as any);
  });

  it('openModal sets the modal state', () => {
    useAppStore.getState().openModal('about');
    expect(useAppStore.getState().modal).toEqual({ kind: 'about' });
  });

  it('openModal with kind requiring props passes them through', () => {
    useAppStore.getState().openModal('export-pdf', { sourcePath: '/a.md' });
    expect(useAppStore.getState().modal).toEqual({ kind: 'export-pdf', props: { sourcePath: '/a.md' } });
  });

  it('closeModal clears the modal state', () => {
    useAppStore.getState().openModal('about');
    useAppStore.getState().closeModal();
    expect(useAppStore.getState().modal).toEqual({ kind: null });
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/unit/stores/app-store.test.ts
```

Expected: FAIL — TS error or missing `openModal`/`closeModal`.

- [ ] **Step 3: Update `app-store.ts`**

Replace `src/renderer/stores/app-store.ts` with:

```ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export interface PaneSizes {
  sidebar: number;
  editor: number;
  preview: number;
}

export interface ConfirmProps {
  title: string;
  body: string;
  confirmLabel?: string;
  cancelLabel?: string;
  destructive?: boolean;
  onConfirm: () => void | Promise<void>;
  onCancel?: () => void;
}

export type ModalState =
  | { kind: null }
  | { kind: 'export-pdf'; props: { sourcePath: string } }
  | { kind: 'export-docx'; props: { sourcePath: string } }
  | { kind: 'export-html'; props: { sourcePath: string } }
  | { kind: 'export-batch'; props: { sourcePaths: string[] } }
  | { kind: 'settings' }
  | { kind: 'about' }
  | { kind: 'welcome' }
  | { kind: 'confirm'; props: ConfirmProps };

export type ModalKind = ModalState['kind'];

interface AppState {
  sidebarVisible: boolean;
  previewVisible: boolean;
  zenMode: boolean;
  paneSizes: PaneSizes;
  modal: ModalState;
  toggleSidebar: () => void;
  togglePreview: () => void;
  setZenMode: (value: boolean) => void;
  setPaneSizes: (sizes: PaneSizes) => void;
  openModal: <K extends NonNullable<ModalKind>>(
    kind: K,
    ...args: Extract<ModalState, { kind: K }> extends { props: infer P } ? [props?: P] : []
  ) => void;
  closeModal: () => void;
}

export const useAppStore = create<AppState>()(
  persist(
    (set) => ({
      sidebarVisible: true,
      previewVisible: true,
      zenMode: false,
      paneSizes: { sidebar: 20, editor: 50, preview: 30 },
      modal: { kind: null },
      toggleSidebar: () => set((s) => ({ sidebarVisible: !s.sidebarVisible })),
      togglePreview: () => set((s) => ({ previewVisible: !s.previewVisible })),
      setZenMode: (value) => set({ zenMode: value }),
      setPaneSizes: (sizes) => set({ paneSizes: sizes }),
      openModal: (kind, ...args) =>
        set(() => {
          // Find the matching variant and attach props if provided
          const candidate = { kind, ...(args[0] ? { props: args[0] } : {}) } as ModalState;
          return { modal: candidate };
        }),
      closeModal: () => set({ modal: { kind: null } }),
    }),
    {
      name: 'mc-app-store',
      partialize: (state) => ({
        sidebarVisible: state.sidebarVisible,
        previewVisible: state.previewVisible,
        zenMode: state.zenMode,
        paneSizes: state.paneSizes,
        // modal is intentionally NOT persisted (runtime-only)
      }),
    }
  )
);
```

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/unit/stores/app-store.test.ts
```

Expected: PASS, 7 tests (4 existing + 3 new).

- [ ] **Step 5: Commit**

```bash
git add src/renderer/stores/app-store.ts tests/unit/stores/app-store.test.ts
git commit -m "feat(renderer): useAppStore extended with modal discriminated union"
```

---

## Task 16: `useSettingsStore` (full implementation) + test (TDD)

**Files:**
- Create: `src/renderer/stores/settings-store.ts`
- Create: `tests/unit/stores/settings-store.test.ts`

- [ ] **Step 1: Write the failing tests**

Create `tests/unit/stores/settings-store.test.ts`:

```ts
import { describe, it, expect, beforeEach } from 'vitest';
import { useSettingsStore } from '@/stores/settings-store';

describe('useSettingsStore', () => {
  beforeEach(() => {
    localStorage.clear();
    useSettingsStore.setState(useSettingsStore.getInitialState());
  });

  it('has sensible defaults', () => {
    const s = useSettingsStore.getState();
    expect(s.fontSize).toBe(14);
    expect(s.theme).toBe('auto');
    expect(s.pdfFormat).toBe('a4');
    expect(s.docxTemplate).toBe('standard');
    expect(s.renderTablesAsAscii).toBe(false);
    expect(s.welcomeDismissed).toBe(false);
  });

  it('setSetting updates a leaf field', () => {
    useSettingsStore.getState().setSetting('fontSize', 18);
    expect(useSettingsStore.getState().fontSize).toBe(18);
  });

  it('setSetting rejects unknown keys (TS) at compile time; runtime is a no-op', () => {
    useSettingsStore.getState().setSetting('fontSize' as any, 18);
    expect(useSettingsStore.getState().fontSize).toBe(18);
  });

  it('resetToDefaults restores all defaults', () => {
    useSettingsStore.getState().setSetting('fontSize', 22);
    useSettingsStore.getState().setSetting('theme', 'dark');
    useSettingsStore.getState().resetToDefaults();
    expect(useSettingsStore.getState().fontSize).toBe(14);
    expect(useSettingsStore.getState().theme).toBe('auto');
  });

  it('persists only leaf settings (partialize), not actions', () => {
    useSettingsStore.getState().setSetting('fontSize', 16);
    useSettingsStore.getState().setSetting('docxTemplate', 'modern');
    const raw = localStorage.getItem('mc-settings-store');
    expect(raw).toBeTruthy();
    const parsed = JSON.parse(raw!);
    expect(parsed.state.fontSize).toBe(16);
    expect(parsed.state.docxTemplate).toBe('modern');
    // Actions should not be in persisted payload
    expect(parsed.state.setSetting).toBeUndefined();
    expect(parsed.state.resetToDefaults).toBeUndefined();
  });

  it('hydrates from a partial localStorage payload without throwing', () => {
    localStorage.setItem('mc-settings-store', JSON.stringify({ state: { fontSize: 20 }, version: 0 }));
    // Re-import to trigger rehydration
    const reloaded = require('@/stores/settings-store').useSettingsStore;
    expect(reloaded.getState().fontSize).toBe(20);
  });
});
```

Note: the `require` in the last test is to simulate a re-hydration. In vitest, dynamic `require` works but you can also clear and re-create the store. If `require` is awkward, the alternative is to call `useSettingsStore.persist.rehydrate()`.

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/unit/stores/settings-store.test.ts
```

Expected: FAIL — `Cannot find module '@/stores/settings-store'`.

- [ ] **Step 3: Implement**

Create `src/renderer/stores/settings-store.ts`:

```ts
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { settingsSchema, type Settings } from '@/lib/validators';

type SettingsLeaf = keyof Omit<Settings, never>;

interface SettingsState extends Settings {
  setSetting: <K extends SettingsLeaf>(key: K, value: Settings[K]) => void;
  resetToDefaults: () => void;
}

const DEFAULTS = settingsSchema.parse({});

export const useSettingsStore = create<SettingsState>()(
  persist(
    (set) => ({
      ...DEFAULTS,
      setSetting: (key, value) => set((s) => ({ ...s, [key]: value }) as Partial<SettingsState>),
      resetToDefaults: () => set(() => ({ ...DEFAULTS })),
    }),
    {
      name: 'mc-settings-store',
      storage: createJSONStorage(() => localStorage),
      partialize: (state) => {
        const { setSetting, resetToDefaults, ...rest } = state;
        return rest;
      },
      // Validate on hydration: if localStorage is corrupt, fall back to defaults
      onRehydrateStorage: () => (state) => {
        if (!state) return;
        const result = settingsSchema.safeParse(state);
        if (!result.success) {
          console.warn('[settings-store] invalid persisted state, resetting to defaults', result.error);
          useSettingsStore.setState({ ...DEFAULTS } as any);
        }
      },
    }
  )
);
```

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/unit/stores/settings-store.test.ts
```

Expected: PASS, 6 tests.

- [ ] **Step 5: Commit**

```bash
git add src/renderer/stores/settings-store.ts tests/unit/stores/settings-store.test.ts
git commit -m "feat(renderer): useSettingsStore (persisted, validated, reset-able)"
```

---

## Task 17: `ModalLayer` shell + test (TDD)

**Files:**
- Create: `src/renderer/components/modals/ModalLayer.tsx`
- Create: `tests/component/modals/ModalLayer.test.tsx`

- [ ] **Step 1: Write the failing tests**

Create `tests/component/modals/ModalLayer.test.tsx`:

```tsx
import { describe, it, expect, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import { ModalLayer } from '@/components/modals/ModalLayer';
import { useAppStore } from '@/stores/app-store';

describe('ModalLayer', () => {
  beforeEach(() => {
    localStorage.clear();
    useAppStore.setState({ modal: { kind: null } } as any);
  });

  it('renders nothing when modal is null', () => {
    const { container } = render(<ModalLayer />);
    expect(container.firstChild).toBeNull();
  });

  it('renders AboutDialog when kind is "about"', () => {
    useAppStore.getState().openModal('about');
    render(<ModalLayer />);
    // AboutDialog should render a dialog with title "About MarkdownConverter"
    expect(screen.getByRole('dialog')).toBeInTheDocument();
  });

  it('switches from about to settings when modal kind changes', () => {
    useAppStore.getState().openModal('about');
    const { rerender } = render(<ModalLayer />);
    expect(screen.getByText(/about/i)).toBeInTheDocument();
    useAppStore.getState().openModal('settings');
    rerender(<ModalLayer />);
    expect(screen.queryByText(/about markdownconverter/i)).not.toBeInTheDocument();
    expect(screen.getByText(/settings/i)).toBeInTheDocument();
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/component/modals/ModalLayer.test.tsx
```

Expected: FAIL — `Cannot find module '@/components/modals/ModalLayer'`.

- [ ] **Step 3: Implement**

Create `src/renderer/components/modals/ModalLayer.tsx`:

```tsx
import { useAppStore } from '@/stores/app-store';
import { AboutDialog } from './AboutDialog';
import { ConfirmDialog } from './ConfirmDialog';
import { ExportBatchDialog } from './ExportBatchDialog';
import { ExportDocxDialog } from './ExportDocxDialog';
import { ExportHtmlDialog } from './ExportHtmlDialog';
import { ExportPdfDialog } from './ExportPdfDialog';
import { SettingsSheet } from './SettingsSheet';
import { WelcomeDialog } from './WelcomeDialog';

export function ModalLayer() {
  const modal = useAppStore((s) => s.modal);
  switch (modal.kind) {
    case null:
      return null;
    case 'export-pdf':
      return <ExportPdfDialog sourcePath={modal.props.sourcePath} />;
    case 'export-docx':
      return <ExportDocxDialog sourcePath={modal.props.sourcePath} />;
    case 'export-html':
      return <ExportHtmlDialog sourcePath={modal.props.sourcePath} />;
    case 'export-batch':
      return <ExportBatchDialog sourcePaths={modal.props.sourcePaths} />;
    case 'settings':
      return <SettingsSheet />;
    case 'about':
      return <AboutDialog />;
    case 'welcome':
      return <WelcomeDialog />;
    case 'confirm':
      return <ConfirmDialog {...modal.props} />;
  }
}
```

(All the imported modal components will be created in subsequent tasks. The ModalLayer test will fail until at least AboutDialog exists — that's why Task 18 follows immediately.)

- [ ] **Step 4: Run test (will fail until Task 18 lands)**

```bash
npx vitest run tests/component/modals/ModalLayer.test.tsx
```

Expected: FAIL — `Cannot find module '@/components/modals/AboutDialog'` (and others). This is expected. Continue to Task 18.

- [ ] **Step 5: Commit the shell**

```bash
git add src/renderer/components/modals/ModalLayer.tsx tests/component/modals/ModalLayer.test.tsx
git commit -m "feat(renderer): ModalLayer shell (dispatches to 7 modal types)"
```

---

## Task 18: `AboutDialog` + test (TDD)

**Files:**
- Create: `src/renderer/components/modals/AboutDialog.tsx`
- Create: `tests/component/modals/AboutDialog.test.tsx`

- [ ] **Step 1: Write the failing tests**

Create `tests/component/modals/AboutDialog.test.tsx`:

```tsx
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { AboutDialog } from '@/components/modals/AboutDialog';

describe('AboutDialog', () => {
  beforeEach(() => {
    window.electronAPI = {
      app: {
        getVersion: vi.fn().mockResolvedValue({ ok: true, data: '5.0.0' }),
        openExternal: vi.fn().mockResolvedValue({ ok: true }),
      },
    } as any;
  });

  it('renders title and version', async () => {
    render(<AboutDialog />);
    expect(screen.getByText(/about markdownconverter/i)).toBeInTheDocument();
    // version is fetched async; wait for it
    expect(await screen.findByText(/5\.0\.0/)).toBeInTheDocument();
  });

  it('closes when the close button is clicked', async () => {
    render(<AboutDialog />);
    const close = await screen.findByRole('button', { name: /close/i });
    await userEvent.click(close);
    // The dialog should no longer be in the document
    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/component/modals/AboutDialog.test.tsx
```

Expected: FAIL — `Cannot find module '@/components/modals/AboutDialog'`.

- [ ] **Step 3: Implement**

Create `src/renderer/components/modals/AboutDialog.tsx`:

```tsx
import { useEffect, useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { ipc } from '@/lib/ipc';
import { useAppStore } from '@/stores/app-store';

export function AboutDialog() {
  const closeModal = useAppStore((s) => s.closeModal);
  const [version, setVersion] = useState<string>('…');

  useEffect(() => {
    ipc.app.getVersion().then((r) => {
      if (r.ok && typeof r.data === 'string') setVersion(r.data);
    });
  }, []);

  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent aria-describedby="about-desc">
        <DialogHeader>
          <DialogTitle>About MarkdownConverter</DialogTitle>
          <DialogDescription id="about-desc">
            Professional Markdown editor and universal file converter.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-2 text-sm text-muted-foreground">
          <p>Version: {version}</p>
          <p>
            <a
              href="https://github.com/amitwh/markdown-converter"
              className="text-brand hover:underline"
              onClick={(e) => {
                e.preventDefault();
                ipc.app.openExternal('https://github.com/amitwh/markdown-converter');
              }}
            >
              GitHub repository
            </a>
          </p>
          <p className="text-xs">© ConcreteInfo. Licensed under MIT.</p>
        </div>
        <DialogFooter>
          <Button onClick={closeModal}>Close</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/component/modals/AboutDialog.test.tsx
```

Expected: PASS, 2 tests.

- [ ] **Step 5: Commit**

```bash
git add src/renderer/components/modals/AboutDialog.tsx tests/component/modals/AboutDialog.test.tsx
git commit -m "feat(renderer): AboutDialog (version + GitHub link)"
```

---

## Task 19: `ConfirmDialog` + test (TDD)

**Files:**
- Create: `src/renderer/components/modals/ConfirmDialog.tsx`
- Create: `tests/component/modals/ConfirmDialog.test.tsx`

- [ ] **Step 1: Write the failing tests**

Create `tests/component/modals/ConfirmDialog.test.tsx`:

```tsx
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ConfirmDialog } from '@/components/modals/ConfirmDialog';
import { useAppStore } from '@/stores/app-store';

describe('ConfirmDialog', () => {
  beforeEach(() => {
    localStorage.clear();
    useAppStore.setState({ modal: { kind: null } } as any);
  });

  it('renders title, body, and confirm/cancel labels', () => {
    render(
      <ConfirmDialog
        title="Delete file?"
        body="This cannot be undone."
        confirmLabel="Delete"
        onConfirm={() => {}}
      />
    );
    expect(screen.getByText(/delete file/i)).toBeInTheDocument();
    expect(screen.getByText(/cannot be undone/i)).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /^delete$/i })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
  });

  it('calls onConfirm and closes on confirm click', async () => {
    const onConfirm = vi.fn();
    render(<ConfirmDialog title="T" body="B" onConfirm={onConfirm} />);
    await userEvent.click(screen.getByRole('button', { name: /confirm/i }));
    expect(onConfirm).toHaveBeenCalledTimes(1);
    expect(useAppStore.getState().modal).toEqual({ kind: null });
  });

  it('destructive variant uses destructive button class', () => {
    render(
      <ConfirmDialog title="T" body="B" destructive onConfirm={() => {}} />
    );
    const btn = screen.getByRole('button', { name: /confirm/i });
    expect(btn.className).toContain('bg-destructive');
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/component/modals/ConfirmDialog.test.tsx
```

Expected: FAIL — `Cannot find module '@/components/modals/ConfirmDialog'`.

- [ ] **Step 3: Implement**

Create `src/renderer/components/modals/ConfirmDialog.tsx`:

```tsx
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useAppStore, type ConfirmProps } from '@/stores/app-store';

export function ConfirmDialog(props: ConfirmProps) {
  const closeModal = useAppStore((s) => s.closeModal);
  const { title, body, confirmLabel = 'Confirm', cancelLabel = 'Cancel', destructive, onConfirm, onCancel } = props;

  const handleConfirm = async () => {
    await onConfirm();
    closeModal();
  };
  const handleCancel = () => {
    onCancel?.();
    closeModal();
  };

  return (
    <Dialog open onOpenChange={(o) => !o && handleCancel()}>
      <DialogContent aria-describedby="confirm-body">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription id="confirm-body">{body}</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="ghost" onClick={handleCancel}>
            {cancelLabel}
          </Button>
          <Button variant={destructive ? 'destructive' : 'default'} onClick={handleConfirm}>
            {confirmLabel}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/component/modals/ConfirmDialog.test.tsx
```

Expected: PASS, 3 tests.

- [ ] **Step 5: Commit**

```bash
git add src/renderer/components/modals/ConfirmDialog.tsx tests/component/modals/ConfirmDialog.test.tsx
git commit -m "feat(renderer): ConfirmDialog (generic title/body/onConfirm)"
```

---

## Task 20: `WelcomeDialog` + test (TDD)

**Files:**
- Create: `src/renderer/components/modals/WelcomeDialog.tsx`
- Create: `tests/component/modals/WelcomeDialog.test.tsx`

- [ ] **Step 1: Write the failing tests**

Create `tests/component/modals/WelcomeDialog.test.tsx`:

```tsx
import { describe, it, expect, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { WelcomeDialog } from '@/components/modals/WelcomeDialog';
import { useSettingsStore } from '@/stores/settings-store';
import { useAppStore } from '@/stores/app-store';

describe('WelcomeDialog', () => {
  beforeEach(() => {
    localStorage.clear();
    useSettingsStore.setState(useSettingsStore.getInitialState());
    useAppStore.setState({ modal: { kind: null } } as any);
  });

  it('renders a heading and quick-start content', () => {
    render(<WelcomeDialog />);
    expect(screen.getByRole('heading', { name: /welcome/i })).toBeInTheDocument();
    expect(screen.getByText(/open a folder/i)).toBeInTheDocument();
  });

  it('closing without the checkbox does not dismiss future welcome dialogs', async () => {
    render(<WelcomeDialog />);
    await userEvent.click(screen.getByRole('button', { name: /get started/i }));
    expect(useSettingsStore.getState().welcomeDismissed).toBe(false);
    expect(useAppStore.getState().modal).toEqual({ kind: null });
  });

  it('checking "don\'t show again" persists the flag', async () => {
    render(<WelcomeDialog />);
    await userEvent.click(screen.getByRole('checkbox', { name: /don't show again/i }));
    await userEvent.click(screen.getByRole('button', { name: /get started/i }));
    expect(useSettingsStore.getState().welcomeDismissed).toBe(true);
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/component/modals/WelcomeDialog.test.tsx
```

Expected: FAIL — `Cannot find module '@/components/modals/WelcomeDialog'`.

- [ ] **Step 3: Implement**

Create `src/renderer/components/modals/WelcomeDialog.tsx`:

```tsx
import { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { useAppStore } from '@/stores/app-store';
import { useSettingsStore } from '@/stores/settings-store';

export function WelcomeDialog() {
  const closeModal = useAppStore((s) => s.closeModal);
  const setSetting = useSettingsStore((s) => s.setSetting);
  const [dontShow, setDontShow] = useState(false);

  const handleClose = () => {
    if (dontShow) setSetting('welcomeDismissed', true);
    closeModal();
  };

  return (
    <Dialog open onOpenChange={(o) => !o && handleClose()}>
      <DialogContent aria-describedby="welcome-desc" className="max-w-xl">
        <DialogHeader>
          <DialogTitle>Welcome to MarkdownConverter</DialogTitle>
          <DialogDescription id="welcome-desc">
            A polished editor for Markdown, with PDF, DOCX, and HTML export.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-3 text-sm">
          <div className="rounded-md border border-border bg-card/30 p-3">
            <h3 className="font-semibold">1. Open a folder</h3>
            <p className="text-muted-foreground">File → Open Folder, or ⌘O. Your tree appears on the left.</p>
          </div>
          <div className="rounded-md border border-border bg-card/30 p-3">
            <h3 className="font-semibold">2. Edit & preview</h3>
            <p className="text-muted-foreground">Type on the left, see the rendered preview on the right. Toggle with ⌘\\.</p>
          </div>
          <div className="rounded-md border border-border bg-card/30 p-3">
            <h3 className="font-semibold">3. Export anywhere</h3>
            <p className="text-muted-foreground">File → Export to PDF / DOCX / HTML, or batch convert a folder.</p>
          </div>
        </div>
        <DialogFooter className="flex-row items-center justify-between sm:justify-between">
          <label className="flex items-center gap-2 text-xs text-muted-foreground">
            <Checkbox checked={dontShow} onCheckedChange={(c) => setDontShow(!!c)} aria-label="Don't show again" />
            Don't show again
          </label>
          <Button onClick={handleClose}>Get started</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/component/modals/WelcomeDialog.test.tsx
```

Expected: PASS, 3 tests.

- [ ] **Step 5: Commit**

```bash
git add src/renderer/components/modals/WelcomeDialog.tsx tests/component/modals/WelcomeDialog.test.tsx
git commit -m "feat(renderer): WelcomeDialog (first-launch quick-start)"
```

---

## Task 21: `useExportSource` hook (shared by all 4 export dialogs)

**Files:**
- Create: `src/renderer/hooks/use-export-source.ts`

(No tests for this hook directly — it's exercised via the export dialog tests in Tasks 23-26.)

- [ ] **Step 1: Implement**

Create `src/renderer/hooks/use-export-source.ts`:

```ts
import { useFileStore } from '@/stores/file-store';
import { useEditorStore } from '@/stores/editor-store';

export interface ExportSource {
  source: string;
  path: string;
  title: string;
}

/**
 * Read the active buffer's content from the editor store. Returns null if
 * no buffer is open. Components handle the null case (prompt to open a file).
 */
export function useExportSource(): ExportSource | null {
  const activeTabId = useFileStore((s) => s.activeTabId);
  const openTabs = useFileStore((s) => s.openTabs);
  const buffer = useEditorStore((s) => (activeTabId ? s.buffers.get(activeTabId) : undefined));

  if (!activeTabId || !buffer) return null;
  const tab = openTabs.find((t) => t.id === activeTabId);
  return {
    source: buffer.content,
    path: activeTabId,
    title: tab?.title ?? activeTabId,
  };
}
```

- [ ] **Step 2: Commit**

```bash
git add src/renderer/hooks/use-export-source.ts
git commit -m "feat(renderer): useExportSource hook (shared by export dialogs)"
```

---

## Task 22: `ExportDialogFooter` (shared cancel/export button row)

**Files:**
- Create: `src/renderer/components/modals/ExportDialogFooter.tsx`

(No tests — pure presentational, exercised via dialog tests.)

- [ ] **Step 1: Implement**

Create `src/renderer/components/modals/ExportDialogFooter.tsx`:

```tsx
import { Button } from '@/components/ui/button';
import { DialogFooter } from '@/components/ui/dialog';

interface Props {
  onCancel: () => void;
  onSubmit: () => void;
  submitting: boolean;
  submitLabel: string;
  submitDisabled?: boolean;
}

export function ExportDialogFooter({ onCancel, onSubmit, submitting, submitLabel, submitDisabled }: Props) {
  return (
    <DialogFooter>
      <Button variant="ghost" onClick={onCancel} disabled={submitting}>
        Cancel
      </Button>
      <Button onClick={onSubmit} disabled={submitting || submitDisabled}>
        {submitting ? 'Exporting…' : submitLabel}
      </Button>
    </DialogFooter>
  );
}
```

- [ ] **Step 2: Commit**

```bash
git add src/renderer/components/modals/ExportDialogFooter.tsx
git commit -m "feat(renderer): ExportDialogFooter (shared cancel/export row)"
```

---

## Task 23: `ExportPdfDialog` + test (TDD)

**Files:**
- Create: `src/renderer/components/modals/ExportPdfDialog.tsx`
- Create: `tests/component/modals/ExportPdfDialog.test.tsx`

- [ ] **Step 1: Write the failing tests**

Create `tests/component/modals/ExportPdfDialog.test.tsx`:

```tsx
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ExportPdfDialog } from '@/components/modals/ExportPdfDialog';
import { useFileStore } from '@/stores/file-store';
import { useEditorStore } from '@/stores/editor-store';
import { useSettingsStore } from '@/stores/settings-store';

describe('ExportPdfDialog', () => {
  beforeEach(() => {
    localStorage.clear();
    window.electronAPI = {
      export: {
        pdf: vi.fn().mockResolvedValue({ ok: true, data: { outputPath: '/out.pdf', bytes: 1024, durationMs: 100 } }),
      },
      app: { showSaveDialog: vi.fn().mockResolvedValue({ ok: true, data: '/out.pdf' }) },
    } as any;
    useSettingsStore.setState(useSettingsStore.getInitialState());
    useFileStore.setState({ activeTabId: '/test.md', openTabs: [{ id: '/test.md', path: '/test.md', title: 'test.md', dirty: false }] } as any);
    useEditorStore.setState({ buffers: new Map([['/test.md', { id: '/test.md', path: '/test.md', content: '# hi', dirty: false }]]) } as any);
  });

  it('renders with default PDF options from settings', () => {
    render(<ExportPdfDialog sourcePath="/test.md" />);
    expect(screen.getByText(/export to pdf/i)).toBeInTheDocument();
    // The default format is 'a4' and a select trigger should show it
    expect(screen.getByRole('combobox', { name: /format/i })).toBeInTheDocument();
  });

  it('toggles ASCII tables and submits merged options', async () => {
    render(<ExportPdfDialog sourcePath="/test.md" />);
    await userEvent.click(screen.getByRole('checkbox', { name: /ascii/i }));
    await userEvent.click(screen.getByRole('button', { name: /^export$/i }));
    // The IPC call should have included renderTablesAsAscii: true
    const call = (window.electronAPI.export.pdf as any).mock.calls[0][0];
    expect(call.renderTablesAsAscii).toBe(true);
    expect(call.format).toBe('a4');
  });

  it('renders an error banner when IPC fails', async () => {
    (window.electronAPI.export.pdf as any).mockResolvedValueOnce({ ok: false, error: { code: 'E', message: 'Pandoc not found' } });
    render(<ExportPdfDialog sourcePath="/test.md" />);
    await userEvent.click(screen.getByRole('button', { name: /^export$/i }));
    expect(await screen.findByText(/pandoc not found/i)).toBeInTheDocument();
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/component/modals/ExportPdfDialog.test.tsx
```

Expected: FAIL — `Cannot find module '@/components/modals/ExportPdfDialog'`.

- [ ] **Step 3: Implement**

Create `src/renderer/components/modals/ExportPdfDialog.tsx`:

```tsx
import { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useAppStore } from '@/stores/app-store';
import { useSettingsStore } from '@/stores/settings-store';
import { useExportSource } from '@/hooks/use-export-source';
import { applyAsciiTransform } from '@/lib/ascii-table';
import { ipc } from '@/lib/ipc';
import { ExportDialogFooter } from './ExportDialogFooter';

const MARGIN_MAP = { normal: { top: 25, right: 25, bottom: 25, left: 25 }, narrow: { top: 15, right: 15, bottom: 15, left: 15 }, wide: { top: 35, right: 35, bottom: 35, left: 35 } };

export function ExportPdfDialog({ sourcePath }: { sourcePath: string }) {
  const closeModal = useAppStore((s) => s.closeModal);
  const { fontSize, pdfFormat, pdfMargins, pdfEmbedFonts, renderTablesAsAscii } = useSettingsStore();
  const [format, setFormat] = useState<'letter' | 'a4' | 'legal'>(pdfFormat);
  const [margins, setMargins] = useState<'normal' | 'narrow' | 'wide'>(pdfMargins);
  const [embed, setEmbed] = useState(pdfEmbedFonts);
  const [ascii, setAscii] = useState(renderTablesAsAscii);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async () => {
    const source = useExportSource();
    if (!source) { setError('No file open.'); return; }
    setSubmitting(true);
    setError(null);
    const finalSource = ascii ? applyAsciiTransform(source.source) : source.source;
    const saveResult = await ipc.export.pdf({
      inputPath: source.path,
      outputPath: source.path.replace(/\.md$/, '.pdf'),
      format,
      margins: MARGIN_MAP[margins],
      embedFonts: embed,
      renderTablesAsAscii: ascii,
      // fontSize is purely cosmetic; we pass it for any font-dependent layout
      fontSize,
    } as any);
    if (!saveResult.ok) {
      setError(saveResult.error.message);
      setSubmitting(false);
    } else {
      closeModal();
    }
  };

  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent aria-describedby="pdf-desc">
        <DialogHeader>
          <DialogTitle>Export to PDF</DialogTitle>
          <DialogDescription id="pdf-desc">{sourcePath}</DialogDescription>
        </DialogHeader>
        <div className="space-y-3 text-sm">
          <div>
            <Label htmlFor="pdf-format">Format</Label>
            <Select value={format} onValueChange={(v) => setFormat(v as any)}>
              <SelectTrigger id="pdf-format" aria-label="Format"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="letter">Letter</SelectItem>
                <SelectItem value="a4">A4</SelectItem>
                <SelectItem value="legal">Legal</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label htmlFor="pdf-margins">Margins</Label>
            <Select value={margins} onValueChange={(v) => setMargins(v as any)}>
              <SelectTrigger id="pdf-margins" aria-label="Margins"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="narrow">Narrow</SelectItem>
                <SelectItem value="normal">Normal</SelectItem>
                <SelectItem value="wide">Wide</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <label className="flex items-center gap-2">
            <Checkbox checked={embed} onCheckedChange={(c) => setEmbed(!!c)} aria-label="Embed fonts" />
            Embed fonts
          </label>
          <label className="flex items-center gap-2">
            <Checkbox checked={ascii} onCheckedChange={(c) => setAscii(!!c)} aria-label="ASCII tables" />
            Render tables as ASCII
          </label>
          {error && (
            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
              {error}
            </div>
          )}
        </div>
        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
      </DialogContent>
    </Dialog>
  );
}
```

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/component/modals/ExportPdfDialog.test.tsx
```

Expected: PASS, 3 tests.

- [ ] **Step 5: Commit**

```bash
git add src/renderer/components/modals/ExportPdfDialog.tsx tests/component/modals/ExportPdfDialog.test.tsx
git commit -m "feat(renderer): ExportPdfDialog (format, margins, ascii tables)"
```

---

## Task 24: `ExportDocxDialog` + test (TDD)

**Files:**
- Create: `src/renderer/components/modals/ExportDocxDialog.tsx`
- Create: `tests/component/modals/ExportDocxDialog.test.tsx`

- [ ] **Step 1: Write the failing tests**

Create `tests/component/modals/ExportDocxDialog.test.tsx`:

```tsx
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ExportDocxDialog } from '@/components/modals/ExportDocxDialog';
import { useFileStore } from '@/stores/file-store';
import { useEditorStore } from '@/stores/editor-store';
import { useSettingsStore } from '@/stores/settings-store';

describe('ExportDocxDialog', () => {
  beforeEach(() => {
    localStorage.clear();
    window.electronAPI = {
      export: { docx: vi.fn().mockResolvedValue({ ok: true, data: { outputPath: '/out.docx' } }) },
    } as any;
    useSettingsStore.setState(useSettingsStore.getInitialState());
    useFileStore.setState({ activeTabId: '/test.md', openTabs: [{ id: '/test.md', path: '/test.md', title: 'test.md', dirty: false }] } as any);
    useEditorStore.setState({ buffers: new Map([['/test.md', { id: '/test.md', path: '/test.md', content: '# hi', dirty: false }]]) } as any);
  });

  it('renders with standard template selected by default', () => {
    render(<ExportDocxDialog sourcePath="/test.md" />);
    expect(screen.getByText(/export to docx/i)).toBeInTheDocument();
    expect(screen.getByRole('combobox', { name: /template/i })).toBeInTheDocument();
  });

  it('submitting with default options sends template=standard', async () => {
    render(<ExportDocxDialog sourcePath="/test.md" />);
    await userEvent.click(screen.getByRole('button', { name: /^export$/i }));
    const call = (window.electronAPI.export.docx as any).mock.calls[0][0];
    expect(call.template).toBe('standard');
  });

  it('selecting "modern" template sends template=modern', async () => {
    render(<ExportDocxDialog sourcePath="/test.md" />);
    await userEvent.click(screen.getByRole('combobox', { name: /template/i }));
    await userEvent.click(screen.getByRole('option', { name: /modern/i }));
    await userEvent.click(screen.getByRole('button', { name: /^export$/i }));
    const call = (window.electronAPI.export.docx as any).mock.calls[0][0];
    expect(call.template).toBe('modern');
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/component/modals/ExportDocxDialog.test.tsx
```

Expected: FAIL.

- [ ] **Step 3: Implement**

Create `src/renderer/components/modals/ExportDocxDialog.tsx`:

```tsx
import { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useAppStore } from '@/stores/app-store';
import { useSettingsStore } from '@/stores/settings-store';
import { useExportSource } from '@/hooks/use-export-source';
import { applyAsciiTransform } from '@/lib/ascii-table';
import { ipc } from '@/lib/ipc';
import { ExportDialogFooter } from './ExportDialogFooter';

export function ExportDocxDialog({ sourcePath }: { sourcePath: string }) {
  const closeModal = useAppStore((s) => s.closeModal);
  const { docxTemplate, renderTablesAsAscii } = useSettingsStore();
  const [template, setTemplate] = useState<'standard' | 'minimal' | 'modern'>(docxTemplate);
  const [ascii, setAscii] = useState(renderTablesAsAscii);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async () => {
    const source = useExportSource();
    if (!source) { setError('No file open.'); return; }
    setSubmitting(true);
    setError(null);
    const finalSource = ascii ? applyAsciiTransform(source.source) : source.source;
    const result = await ipc.export.docx({
      inputPath: source.path,
      outputPath: source.path.replace(/\.md$/, '.docx'),
      template,
      // We send the transformed source as part of the options object;
      // the main process reads the file from disk. To honor the toggle
      // without changing the IPC contract, we temporarily write the
      // transformed source to a sibling file. For Phase 7 we just send
      // the flag and let the main process handle it (planned for Phase 8).
      renderTablesAsAscii: ascii,
    } as any);
    if (!result.ok) {
      setError(result.error.message);
      setSubmitting(false);
    } else {
      closeModal();
    }
  };

  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent aria-describedby="docx-desc">
        <DialogHeader>
          <DialogTitle>Export to DOCX</DialogTitle>
          <DialogDescription id="docx-desc">{sourcePath}</DialogDescription>
        </DialogHeader>
        <div className="space-y-3 text-sm">
          <div>
            <Label htmlFor="docx-template">Template</Label>
            <Select value={template} onValueChange={(v) => setTemplate(v as any)}>
              <SelectTrigger id="docx-template" aria-label="Template"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="standard">Standard</SelectItem>
                <SelectItem value="minimal">Minimal</SelectItem>
                <SelectItem value="modern">Modern</SelectItem>
              </SelectContent>
            </Select>
            <p className="mt-1 text-xs text-muted-foreground">
              Bundled with the app. Standard is the default; Modern adds a colored cover page.
            </p>
          </div>
          <label className="flex items-center gap-2">
            <Checkbox checked={ascii} onCheckedChange={(c) => setAscii(!!c)} aria-label="ASCII tables" />
            Render tables as ASCII
          </label>
          {error && (
            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
              {error}
            </div>
          )}
        </div>
        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
      </DialogContent>
    </Dialog>
  );
}
```

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/component/modals/ExportDocxDialog.test.tsx
```

Expected: PASS, 3 tests.

- [ ] **Step 5: Commit**

```bash
git add src/renderer/components/modals/ExportDocxDialog.tsx tests/component/modals/ExportDocxDialog.test.tsx
git commit -m "feat(renderer): ExportDocxDialog (template picker + ascii tables)"
```

---

## Task 25: `ExportHtmlDialog` + test (TDD)

**Files:**
- Create: `src/renderer/components/modals/ExportHtmlDialog.tsx`
- Create: `tests/component/modals/ExportHtmlDialog.test.tsx`

- [ ] **Step 1: Write the failing tests**

Create `tests/component/modals/ExportHtmlDialog.test.tsx`:

```tsx
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ExportHtmlDialog } from '@/components/modals/ExportHtmlDialog';
import { useFileStore } from '@/stores/file-store';
import { useEditorStore } from '@/stores/editor-store';
import { useSettingsStore } from '@/stores/settings-store';

describe('ExportHtmlDialog', () => {
  beforeEach(() => {
    localStorage.clear();
    window.electronAPI = {
      export: { html: vi.fn().mockResolvedValue({ ok: true, data: { outputPath: '/out.html' } }) },
    } as any;
    useSettingsStore.setState(useSettingsStore.getInitialState());
    useFileStore.setState({ activeTabId: '/test.md', openTabs: [{ id: '/test.md', path: '/test.md', title: 'test.md', dirty: false }] } as any);
    useEditorStore.setState({ buffers: new Map([['/test.md', { id: '/test.md', path: '/test.md', content: '# hi', dirty: false }]]) } as any);
  });

  it('renders with default github highlight style', () => {
    render(<ExportHtmlDialog sourcePath="/test.md" />);
    expect(screen.getByText(/export to html/i)).toBeInTheDocument();
  });

  it('toggles standalone and submits with chosen highlight', async () => {
    render(<ExportHtmlDialog sourcePath="/test.md" />);
    await userEvent.click(screen.getByRole('checkbox', { name: /standalone/i }));
    await userEvent.click(screen.getByRole('combobox', { name: /highlight/i }));
    await userEvent.click(screen.getByRole('option', { name: /monokai/i }));
    await userEvent.click(screen.getByRole('button', { name: /^export$/i }));
    const call = (window.electronAPI.export.html as any).mock.calls[0][0];
    expect(call.standalone).toBe(true);
    expect(call.highlightStyle).toBe('monokai');
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/component/modals/ExportHtmlDialog.test.tsx
```

Expected: FAIL.

- [ ] **Step 3: Implement**

Create `src/renderer/components/modals/ExportHtmlDialog.tsx`:

```tsx
import { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useAppStore } from '@/stores/app-store';
import { useSettingsStore } from '@/stores/settings-store';
import { useExportSource } from '@/hooks/use-export-source';
import { applyAsciiTransform } from '@/lib/ascii-table';
import { ipc } from '@/lib/ipc';
import { ExportDialogFooter } from './ExportDialogFooter';

export function ExportHtmlDialog({ sourcePath }: { sourcePath: string }) {
  const closeModal = useAppStore((s) => s.closeModal);
  const { htmlHighlightStyle, renderTablesAsAscii } = useSettingsStore();
  const [standalone, setStandalone] = useState(true);
  const [highlight, setHighlight] = useState(htmlHighlightStyle);
  const [ascii, setAscii] = useState(renderTablesAsAscii);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async () => {
    const source = useExportSource();
    if (!source) { setError('No file open.'); return; }
    setSubmitting(true);
    setError(null);
    const result = await ipc.export.html({
      inputPath: source.path,
      outputPath: source.path.replace(/\.md$/, '.html'),
      standalone,
      highlightStyle: highlight,
      renderTablesAsAscii: ascii,
    } as any);
    if (!result.ok) {
      setError(result.error.message);
      setSubmitting(false);
    } else {
      closeModal();
    }
  };

  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent aria-describedby="html-desc">
        <DialogHeader>
          <DialogTitle>Export to HTML</DialogTitle>
          <DialogDescription id="html-desc">{sourcePath}</DialogDescription>
        </DialogHeader>
        <div className="space-y-3 text-sm">
          <label className="flex items-center gap-2">
            <Checkbox checked={standalone} onCheckedChange={(c) => setStandalone(!!c)} aria-label="Standalone" />
            Standalone document (with inline CSS)
          </label>
          <div>
            <Label htmlFor="html-highlight">Syntax highlight style</Label>
            <Select value={highlight} onValueChange={(v) => setHighlight(v as any)}>
              <SelectTrigger id="html-highlight" aria-label="Highlight style"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="github">GitHub</SelectItem>
                <SelectItem value="monokai">Monokai</SelectItem>
                <SelectItem value="nord">Nord</SelectItem>
                <SelectItem value="none">None</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <label className="flex items-center gap-2">
            <Checkbox checked={ascii} onCheckedChange={(c) => setAscii(!!c)} aria-label="ASCII tables" />
            Render tables as ASCII
          </label>
          {error && (
            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
              {error}
            </div>
          )}
        </div>
        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
      </DialogContent>
    </Dialog>
  );
}
```

- [ ] **Step 4: Run, commit**

```bash
npx vitest run tests/component/modals/ExportHtmlDialog.test.tsx
git add src/renderer/components/modals/ExportHtmlDialog.tsx tests/component/modals/ExportHtmlDialog.test.tsx
git commit -m "feat(renderer): ExportHtmlDialog (standalone, highlight style, ascii tables)"
```

---

## Task 26: `ExportBatchDialog` + test (TDD)

**Files:**
- Create: `src/renderer/components/modals/ExportBatchDialog.tsx`
- Create: `tests/component/modals/ExportBatchDialog.test.tsx`

- [ ] **Step 1: Write the failing tests**

Create `tests/component/modals/ExportBatchDialog.test.tsx`:

```tsx
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ExportBatchDialog } from '@/components/modals/ExportBatchDialog';

describe('ExportBatchDialog', () => {
  beforeEach(() => {
    localStorage.clear();
    window.electronAPI = {
      export: { batch: vi.fn().mockResolvedValue({ ok: true, data: { total: 2, succeeded: 2, failed: 0, results: [] } }) },
    } as any;
  });

  it('renders the file list passed via sourcePaths', () => {
    render(<ExportBatchDialog sourcePaths={['/a.md', '/b.md']} />);
    expect(screen.getByText('/a.md')).toBeInTheDocument();
    expect(screen.getByText('/b.md')).toBeInTheDocument();
  });

  it('selecting format and concurrency submits correct options', async () => {
    render(<ExportBatchDialog sourcePaths={['/a.md', '/b.md']} />);
    await userEvent.click(screen.getByRole('combobox', { name: /format/i }));
    await userEvent.click(screen.getByRole('option', { name: /^pdf$/i }));
    await userEvent.click(screen.getByRole('button', { name: /^export$/i }));
    const call = (window.electronAPI.export.batch as any).mock.calls[0];
    expect(call[0]).toEqual([{ inputPath: '/a.md', outputPath: expect.any(String) }, { inputPath: '/b.md', outputPath: expect.any(String) }]);
    expect(call[1].format).toBe('pdf');
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/component/modals/ExportBatchDialog.test.tsx
```

Expected: FAIL.

- [ ] **Step 3: Implement**

Create `src/renderer/components/modals/ExportBatchDialog.tsx`:

```tsx
import { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useAppStore } from '@/stores/app-store';
import { ipc } from '@/lib/ipc';
import { ExportDialogFooter } from './ExportDialogFooter';

const extFor = (format: 'pdf' | 'docx' | 'html' | 'png') =>
  format === 'pdf' ? '.pdf' : format === 'docx' ? '.docx' : format === 'png' ? '.png' : '.html';

export function ExportBatchDialog({ sourcePaths }: { sourcePaths: string[] }) {
  const closeModal = useAppStore((s) => s.closeModal);
  const [format, setFormat] = useState<'pdf' | 'docx' | 'html' | 'png'>('pdf');
  const [concurrency, setConcurrency] = useState(4);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async () => {
    setSubmitting(true);
    setError(null);
    const items = sourcePaths.map((p) => ({
      inputPath: p,
      outputPath: p.replace(/\.md$/, extFor(format)),
    }));
    const result = await ipc.export.batch(items, { format, concurrency });
    if (!result.ok) {
      setError(result.error.message);
      setSubmitting(false);
    } else {
      closeModal();
    }
  };

  return (
    <Dialog open onOpenChange={(o) => !o && closeModal()}>
      <DialogContent aria-describedby="batch-desc">
        <DialogHeader>
          <DialogTitle>Batch export</DialogTitle>
          <DialogDescription id="batch-desc">{sourcePaths.length} files</DialogDescription>
        </DialogHeader>
        <div className="space-y-3 text-sm">
          <div>
            <Label htmlFor="batch-format">Format</Label>
            <Select value={format} onValueChange={(v) => setFormat(v as any)}>
              <SelectTrigger id="batch-format" aria-label="Format"><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="pdf">PDF</SelectItem>
                <SelectItem value="docx">DOCX</SelectItem>
                <SelectItem value="html">HTML</SelectItem>
                <SelectItem value="png">PNG</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label htmlFor="batch-concurrency">Concurrency</Label>
            <Select value={String(concurrency)} onValueChange={(v) => setConcurrency(Number(v))}>
              <SelectTrigger id="batch-concurrency" aria-label="Concurrency"><SelectValue /></SelectTrigger>
              <SelectContent>
                {[1, 2, 4, 8, 16].map((n) => (
                  <SelectItem key={n} value={String(n)}>{n}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="max-h-40 overflow-auto rounded border border-border bg-card/20 p-2 text-xs">
            {sourcePaths.map((p) => <div key={p} className="truncate">{p}</div>)}
          </div>
          {error && (
            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
              {error}
            </div>
          )}
        </div>
        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
      </DialogContent>
    </Dialog>
  );
}
```

- [ ] **Step 4: Run, commit**

```bash
npx vitest run tests/component/modals/ExportBatchDialog.test.tsx
git add src/renderer/components/modals/ExportBatchDialog.tsx tests/component/modals/ExportBatchDialog.test.tsx
git commit -m "feat(renderer): ExportBatchDialog (format, concurrency, file list)"
```

---

## Task 27: `EditorSettings` tab (no test, exercised via SettingsSheet test in Task 32)

**Files:**
- Create: `src/renderer/components/modals/EditorSettings.tsx`

- [ ] **Step 1: Implement**

Create `src/renderer/components/modals/EditorSettings.tsx`:

```tsx
import { useSettingsStore } from '@/stores/settings-store';
import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';

export function EditorSettings() {
  const { fontSize, tabSize, lineNumbers, wordWrap, minimap, setSetting } = useSettingsStore();

  return (
    <div className="space-y-5 text-sm">
      <div>
        <Label htmlFor="editor-font-size">Font size: {fontSize}px</Label>
        <Slider id="editor-font-size" min={10} max={24} step={1} value={[fontSize]} onValueChange={([v]) => setSetting('fontSize', v)} />
      </div>
      <div>
        <Label htmlFor="editor-tab-size">Tab size</Label>
        <Select value={String(tabSize)} onValueChange={(v) => setSetting('tabSize', Number(v) as 2 | 4 | 8)}>
          <SelectTrigger id="editor-tab-size" aria-label="Tab size"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="2">2 spaces</SelectItem>
            <SelectItem value="4">4 spaces</SelectItem>
            <SelectItem value="8">8 spaces</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <label className="flex items-center justify-between">
        <span>Line numbers</span>
        <Switch checked={lineNumbers} onCheckedChange={(c) => setSetting('lineNumbers', c)} aria-label="Line numbers" />
      </label>
      <label className="flex items-center justify-between">
        <span>Word wrap</span>
        <Switch checked={wordWrap} onCheckedChange={(c) => setSetting('wordWrap', c)} aria-label="Word wrap" />
      </label>
      <label className="flex items-center justify-between">
        <span>Minimap</span>
        <Switch checked={minimap} onCheckedChange={(c) => setSetting('minimap', c)} aria-label="Minimap" />
      </label>
    </div>
  );
}
```

- [ ] **Step 2: Commit**

```bash
git add src/renderer/components/modals/EditorSettings.tsx
git commit -m "feat(renderer): EditorSettings tab (font, tab, line/wrap, minimap)"
```

---

## Task 28: `ThemeSettings` tab

**Files:**
- Create: `src/renderer/components/modals/ThemeSettings.tsx`

- [ ] **Step 1: Implement**

Create `src/renderer/components/modals/ThemeSettings.tsx`:

```tsx
import { useSettingsStore } from '@/stores/settings-store';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

export function ThemeSettings() {
  const { theme, accentColor, fontFamily, setSetting } = useSettingsStore();

  return (
    <div className="space-y-5 text-sm">
      <div>
        <Label>Mode</Label>
        <RadioGroup value={theme} onValueChange={(v) => setSetting('theme', v as 'light' | 'dark' | 'auto')}>
          <div className="flex items-center gap-2"><RadioGroupItem value="light" id="theme-light" /><Label htmlFor="theme-light">Light</Label></div>
          <div className="flex items-center gap-2"><RadioGroupItem value="dark" id="theme-dark" /><Label htmlFor="theme-dark">Dark</Label></div>
          <div className="flex items-center gap-2"><RadioGroupItem value="auto" id="theme-auto" /><Label htmlFor="theme-auto">Auto (system)</Label></div>
        </RadioGroup>
      </div>
      <div>
        <Label htmlFor="theme-accent">Accent color</Label>
        <Select value={accentColor} onValueChange={(v) => setSetting('accentColor', v as any)}>
          <SelectTrigger id="theme-accent" aria-label="Accent color"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="brand">Brand (orange)</SelectItem>
            <SelectItem value="blue">Blue</SelectItem>
            <SelectItem value="green">Green</SelectItem>
            <SelectItem value="purple">Purple</SelectItem>
            <SelectItem value="orange">Orange</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div>
        <Label htmlFor="theme-font-family">Editor font</Label>
        <Select value={fontFamily} onValueChange={(v) => setSetting('fontFamily', v as any)}>
          <SelectTrigger id="theme-font-family" aria-label="Editor font"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="system">System (Plus Jakarta Sans)</SelectItem>
            <SelectItem value="jetbrains">JetBrains Mono</SelectItem>
            <SelectItem value="fira">Fira Code</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}
```

- [ ] **Step 2: Commit**

```bash
git add src/renderer/components/modals/ThemeSettings.tsx
git commit -m "feat(renderer): ThemeSettings tab (mode, accent, font)"
```

---

## Task 29: `ExportSettings` tab

**Files:**
- Create: `src/renderer/components/modals/ExportSettings.tsx`

- [ ] **Step 1: Implement**

Create `src/renderer/components/modals/ExportSettings.tsx`:

```tsx
import { useSettingsStore } from '@/stores/settings-store';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';

export function ExportSettings() {
  const { pdfFormat, pdfMargins, pdfEmbedFonts, docxTemplate, htmlHighlightStyle, renderTablesAsAscii, setSetting } = useSettingsStore();

  return (
    <div className="space-y-5 text-sm">
      <div>
        <Label htmlFor="export-pdf-format">Default PDF format</Label>
        <Select value={pdfFormat} onValueChange={(v) => setSetting('pdfFormat', v as any)}>
          <SelectTrigger id="export-pdf-format" aria-label="Default PDF format"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="letter">Letter</SelectItem>
            <SelectItem value="a4">A4</SelectItem>
            <SelectItem value="legal">Legal</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div>
        <Label htmlFor="export-pdf-margins">Default PDF margins</Label>
        <Select value={pdfMargins} onValueChange={(v) => setSetting('pdfMargins', v as any)}>
          <SelectTrigger id="export-pdf-margins" aria-label="Default PDF margins"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="narrow">Narrow</SelectItem>
            <SelectItem value="normal">Normal</SelectItem>
            <SelectItem value="wide">Wide</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <label className="flex items-center justify-between">
        <span>Embed fonts in PDFs</span>
        <Switch checked={pdfEmbedFonts} onCheckedChange={(c) => setSetting('pdfEmbedFonts', c)} aria-label="Embed fonts" />
      </label>
      <div>
        <Label htmlFor="export-docx-template">Default DOCX template</Label>
        <Select value={docxTemplate} onValueChange={(v) => setSetting('docxTemplate', v as any)}>
          <SelectTrigger id="export-docx-template" aria-label="Default DOCX template"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="standard">Standard</SelectItem>
            <SelectItem value="minimal">Minimal</SelectItem>
            <SelectItem value="modern">Modern</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div>
        <Label htmlFor="export-html-highlight">Default HTML highlight</Label>
        <Select value={htmlHighlightStyle} onValueChange={(v) => setSetting('htmlHighlightStyle', v as any)}>
          <SelectTrigger id="export-html-highlight" aria-label="Default HTML highlight"><SelectValue /></SelectTrigger>
          <SelectContent>
            <SelectItem value="github">GitHub</SelectItem>
            <SelectItem value="monokai">Monokai</SelectItem>
            <SelectItem value="nord">Nord</SelectItem>
            <SelectItem value="none">None</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <label className="flex items-center justify-between">
        <span>Render tables as ASCII by default</span>
        <Switch checked={renderTablesAsAscii} onCheckedChange={(c) => setSetting('renderTablesAsAscii', c)} aria-label="ASCII tables by default" />
      </label>
    </div>
  );
}
```

- [ ] **Step 2: Commit**

```bash
git add src/renderer/components/modals/ExportSettings.tsx
git commit -m "feat(renderer): ExportSettings tab (PDF/DOCX/HTML defaults + ascii toggle)"
```

---

## Task 30: `PluginsSettings` tab (placeholder)

**Files:**
- Create: `src/renderer/components/modals/PluginsSettings.tsx`

- [ ] **Step 1: Implement**

Create `src/renderer/components/modals/PluginsSettings.tsx`:

```tsx
import { Sparkles } from 'lucide-react';

export function PluginsSettings() {
  return (
    <div className="flex flex-col items-center justify-center gap-3 py-12 text-center text-muted-foreground">
      <Sparkles className="h-8 w-8 opacity-50" />
      <h3 className="text-base font-semibold text-foreground">Coming soon</h3>
      <p className="max-w-sm text-sm">
        The plugin system is on the roadmap. You'll be able to extend MarkdownConverter with custom
        commands, themes, and export formats.
      </p>
    </div>
  );
}
```

- [ ] **Step 2: Commit**

```bash
git add src/renderer/components/modals/PluginsSettings.tsx
git commit -m "feat(renderer): PluginsSettings tab placeholder (Coming soon)"
```

---

## Task 31: `AboutSettings` tab

**Files:**
- Create: `src/renderer/components/modals/AboutSettings.tsx`

- [ ] **Step 1: Implement**

Create `src/renderer/components/modals/AboutSettings.tsx`:

```tsx
import { useEffect, useState } from 'react';
import { ipc } from '@/lib/ipc';

export function AboutSettings() {
  const [version, setVersion] = useState('…');

  useEffect(() => {
    ipc.app.getVersion().then((r) => {
      if (r.ok && typeof r.data === 'string') setVersion(r.data);
    });
  }, []);

  return (
    <div className="space-y-3 text-sm">
      <h3 className="text-base font-semibold">MarkdownConverter</h3>
      <p className="text-muted-foreground">Version {version}</p>
      <p>
        <a
          href="https://github.com/amitwh/markdown-converter"
          className="text-brand hover:underline"
          onClick={(e) => { e.preventDefault(); ipc.app.openExternal('https://github.com/amitwh/markdown-converter'); }}
        >
          GitHub repository
        </a>
      </p>
      <p>
        <a
          href="https://concreteinfo.co.in"
          className="text-brand hover:underline"
          onClick={(e) => { e.preventDefault(); ipc.app.openExternal('https://concreteinfo.co.in'); }}
        >
          ConcreteInfo
        </a>
      </p>
      <p className="text-xs text-muted-foreground">© ConcreteInfo. Licensed under MIT.</p>
    </div>
  );
}
```

- [ ] **Step 2: Commit**

```bash
git add src/renderer/components/modals/AboutSettings.tsx
git commit -m "feat(renderer): AboutSettings tab (version + links)"
```

---

## Task 32: `SettingsSheet` (compose 5 tabs) + test (TDD)

**Files:**
- Create: `src/renderer/components/modals/SettingsSheet.tsx`
- Create: `tests/component/modals/SettingsSheet.test.tsx`

- [ ] **Step 1: Write the failing tests**

Create `tests/component/modals/SettingsSheet.test.tsx`:

```tsx
import { describe, it, expect, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SettingsSheet } from '@/components/modals/SettingsSheet';
import { useSettingsStore } from '@/stores/settings-store';

describe('SettingsSheet', () => {
  beforeEach(() => {
    localStorage.clear();
    useSettingsStore.setState(useSettingsStore.getInitialState());
  });

  it('renders 5 tab triggers', () => {
    render(<SettingsSheet />);
    expect(screen.getByRole('tab', { name: /editor/i })).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: /theme/i })).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: /export/i })).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: /plugins/i })).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: /about/i })).toBeInTheDocument();
  });

  it('editor tab is open by default and shows font size', () => {
    render(<SettingsSheet />);
    expect(screen.getByText(/font size/i)).toBeInTheDocument();
  });

  it('theme tab shows theme radio group', async () => {
    render(<SettingsSheet />);
    await userEvent.click(screen.getByRole('tab', { name: /theme/i }));
    expect(screen.getByText(/accent color/i)).toBeInTheDocument();
  });

  it('export tab shows ascii toggle and template picker', async () => {
    render(<SettingsSheet />);
    await userEvent.click(screen.getByRole('tab', { name: /export/i }));
    expect(screen.getByText(/render tables as ascii by default/i)).toBeInTheDocument();
    expect(screen.getByText(/default docx template/i)).toBeInTheDocument();
  });

  it('plugins tab shows coming soon message', async () => {
    render(<SettingsSheet />);
    await userEvent.click(screen.getByRole('tab', { name: /plugins/i }));
    expect(screen.getByText(/coming soon/i)).toBeInTheDocument();
  });

  it('about tab shows version', async () => {
    render(<SettingsSheet />);
    await userEvent.click(screen.getByRole('tab', { name: /about/i }));
    expect(screen.getByText(/markdownconverter/i)).toBeInTheDocument();
  });

  it('reset to defaults button clears all settings', async () => {
    useSettingsStore.getState().setSetting('fontSize', 22);
    render(<SettingsSheet />);
    await userEvent.click(screen.getByRole('button', { name: /reset/i }));
    expect(useSettingsStore.getState().fontSize).toBe(14);
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/component/modals/SettingsSheet.test.tsx
```

Expected: FAIL.

- [ ] **Step 3: Implement**

Create `src/renderer/components/modals/SettingsSheet.tsx`:

```tsx
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { useAppStore } from '@/stores/app-store';
import { useSettingsStore } from '@/stores/settings-store';
import { EditorSettings } from './EditorSettings';
import { ThemeSettings } from './ThemeSettings';
import { ExportSettings } from './ExportSettings';
import { PluginsSettings } from './PluginsSettings';
import { AboutSettings } from './AboutSettings';

export function SettingsSheet() {
  const closeModal = useAppStore((s) => s.closeModal);
  const resetToDefaults = useSettingsStore((s) => s.resetToDefaults);

  return (
    <Sheet open onOpenChange={(o) => !o && closeModal()}>
      <SheetContent aria-describedby="settings-desc" side="right" className="w-full sm:max-w-[480px]">
        <SheetHeader>
          <SheetTitle>Settings</SheetTitle>
          <SheetDescription id="settings-desc">Editor, theme, and export preferences</SheetDescription>
        </SheetHeader>
        <Tabs defaultValue="editor" className="mt-4">
          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="editor">Editor</TabsTrigger>
            <TabsTrigger value="theme">Theme</TabsTrigger>
            <TabsTrigger value="export">Export</TabsTrigger>
            <TabsTrigger value="plugins">Plugins</TabsTrigger>
            <TabsTrigger value="about">About</TabsTrigger>
          </TabsList>
          <div className="mt-4 max-h-[70vh] overflow-y-auto pr-2">
            <TabsContent value="editor"><EditorSettings /></TabsContent>
            <TabsContent value="theme"><ThemeSettings /></TabsContent>
            <TabsContent value="export"><ExportSettings /></TabsContent>
            <TabsContent value="plugins"><PluginsSettings /></TabsContent>
            <TabsContent value="about"><AboutSettings /></TabsContent>
          </div>
        </Tabs>
        <div className="mt-4 flex justify-end border-t border-border pt-4">
          <Button variant="ghost" onClick={resetToDefaults}>Reset to defaults</Button>
        </div>
      </SheetContent>
    </Sheet>
  );
}
```

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/component/modals/SettingsSheet.test.tsx
```

Expected: PASS, 7 tests.

- [ ] **Step 5: Commit**

```bash
git add src/renderer/components/modals/SettingsSheet.tsx tests/component/modals/SettingsSheet.test.tsx
git commit -m "feat(renderer): SettingsSheet (5 tabs: editor, theme, export, plugins, about)"
```

---

## Task 33: Extend `register-menu-commands.ts` with 9 new commands + test (TDD)

**Files:**
- Modify: `src/renderer/lib/commands/register-menu-commands.ts`
- Create: `tests/unit/commands/modal-commands.test.ts`

- [ ] **Step 1: Write the failing tests**

Create `tests/unit/commands/modal-commands.test.ts`:

```ts
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { registerMenuCommands } from '@/lib/commands/register-menu-commands';
import { useCommandStore } from '@/stores/command-store';
import { useAppStore } from '@/stores/app-store';
import { useFileStore } from '@/stores/file-store';
import { useEditorStore } from '@/stores/editor-store';

describe('modal commands', () => {
  beforeEach(() => {
    localStorage.clear();
    useCommandStore.setState({ handlers: {}, userBindings: {} } as any);
    useAppStore.setState({ modal: { kind: null } } as any);
    useFileStore.setState({ activeTabId: '/x.md', openTabs: [{ id: '/x.md', path: '/x.md', title: 'x.md', dirty: false }] } as any);
    useEditorStore.setState({ buffers: new Map([['/x.md', { id: '/x.md', path: '/x.md', content: '# hi', dirty: false }]]) } as any);
  });

  it('settings.open opens settings modal', () => {
    registerMenuCommands();
    useCommandStore.getState().dispatch('settings.open');
    expect(useAppStore.getState().modal).toEqual({ kind: 'settings' });
  });

  it('help.about opens about modal', () => {
    registerMenuCommands();
    useCommandStore.getState().dispatch('help.about');
    expect(useAppStore.getState().modal).toEqual({ kind: 'about' });
  });

  it('help.welcome opens welcome modal', () => {
    registerMenuCommands();
    useCommandStore.getState().dispatch('help.welcome');
    expect(useAppStore.getState().modal).toEqual({ kind: 'welcome' });
  });

  it('file.exportPdf opens export-pdf modal with active path', () => {
    registerMenuCommands();
    useCommandStore.getState().dispatch('file.exportPdf');
    expect(useAppStore.getState().modal).toEqual({ kind: 'export-pdf', props: { sourcePath: '/x.md' } });
  });

  it('file.exportDocx opens export-docx modal', () => {
    registerMenuCommands();
    useCommandStore.getState().dispatch('file.exportDocx');
    expect(useAppStore.getState().modal).toEqual({ kind: 'export-docx', props: { sourcePath: '/x.md' } });
  });

  it('file.exportBatch opens export-batch modal with all open files', () => {
    useFileStore.setState({ activeTabId: '/x.md', openTabs: [{ id: '/x.md', path: '/x.md', title: 'x.md', dirty: false }, { id: '/y.md', path: '/y.md', title: 'y.md', dirty: false }] } as any);
    registerMenuCommands();
    useCommandStore.getState().dispatch('file.exportBatch');
    expect(useAppStore.getState().modal).toEqual({ kind: 'export-batch', props: { sourcePaths: ['/x.md', '/y.md'] } });
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npx vitest run tests/unit/commands/modal-commands.test.ts
```

Expected: FAIL — `Cannot find module '@/lib/commands/register-menu-commands'`.

- [ ] **Step 3: Update `register-menu-commands.ts`**

Open `src/renderer/lib/commands/register-menu-commands.ts` and add the new commands. The existing file (from Phase 6) registers `file.*` and `view.*` and `tab.*` commands. Append the new handlers.

(If the file uses a `registerMany` pattern from Phase 6, the addition is a single object spread. The exact structure depends on what's already there; the test above defines the contract.)

The new commands (full handler code):

```ts
import { useAppStore } from '@/stores/app-store';
import { useFileStore } from '@/stores/file-store';
import { useEditorStore } from '@/stores/editor-store';

export function registerMenuCommands() {
  const handlers: Record<string, (args?: unknown) => void | Promise<void>> = {
    // ... existing handlers from Phase 6 ...
    'settings.open': () => useAppStore.getState().openModal('settings'),
    'help.about': () => useAppStore.getState().openModal('about'),
    'help.welcome': () => useAppStore.getState().openModal('welcome'),
    'file.exportPdf': () => {
      const activeTabId = useFileStore.getState().activeTabId;
      if (!activeTabId) return;
      useAppStore.getState().openModal('export-pdf', { sourcePath: activeTabId });
    },
    'file.exportDocx': () => {
      const activeTabId = useFileStore.getState().activeTabId;
      if (!activeTabId) return;
      useAppStore.getState().openModal('export-docx', { sourcePath: activeTabId });
    },
    'file.exportHtml': () => {
      const activeTabId = useFileStore.getState().activeTabId;
      if (!activeTabId) return;
      useAppStore.getState().openModal('export-html', { sourcePath: activeTabId });
    },
    'file.exportBatch': () => {
      const paths = useFileStore.getState().openTabs.map((t) => t.path);
      if (paths.length === 0) return;
      useAppStore.getState().openModal('export-batch', { sourcePaths: paths });
    },
  };
  useCommandStore.getState().registerMany(handlers);
}
```

(If the existing `registerMenuCommands` already has a return signature, preserve it. The key requirement is that the 9 new commands are registered.)

- [ ] **Step 4: Run test to verify it passes**

```bash
npx vitest run tests/unit/commands/modal-commands.test.ts
```

Expected: PASS, 6 tests.

- [ ] **Step 5: Commit**

```bash
git add src/renderer/lib/commands/register-menu-commands.ts tests/unit/commands/modal-commands.test.ts
git commit -m "feat(renderer): register 9 modal-opening commands in command store"
```

---

## Task 34: Extend `AppHeader` with Settings + About icon buttons + test (TDD)

**Files:**
- Modify: `src/renderer/components/layout/AppHeader.tsx`
- Modify: `tests/component/layout/AppHeader.test.tsx`

- [ ] **Step 1: Read the current AppHeader to see its command pattern**

```bash
cat src/renderer/components/layout/AppHeader.tsx
```

The header from Phase 6 already uses `useCommandStore` to dispatch `view.toggleSidebar`, `view.togglePreview`, `shortcuts.show`. Add Settings (gear icon) and About (info icon) buttons that dispatch `settings.open` and `help.about`.

- [ ] **Step 2: Add the new buttons**

In `AppHeader.tsx`, add (after the existing buttons, before the `ThemeToggle`):

```tsx
import { Settings, Info } from 'lucide-react';
// ...
const dispatch = useCommandStore((s) => s.dispatch);
// ...
<Button
  variant="ghost"
  size="icon"
  aria-label="Settings"
  onClick={() => dispatch('settings.open')}
>
  <Settings className="h-4 w-4" />
</Button>
<Button
  variant="ghost"
  size="icon"
  aria-label="About"
  onClick={() => dispatch('help.about')}
>
  <Info className="h-4 w-4" />
</Button>
```

- [ ] **Step 3: Update the test**

The test must register the matching commands in `beforeEach` (the AppHeader dispatches, doesn't call store directly). Add to `tests/component/layout/AppHeader.test.tsx`:

```tsx
beforeEach(() => {
  // ... existing beforeEach ...
  useCommandStore.setState({ handlers: { 'settings.open': () => useAppStore.getState().openModal('settings'), 'help.about': () => useAppStore.getState().openModal('about') }, userBindings: {} } as any);
});

it('settings button opens settings modal', async () => {
  render(<AppHeader />);
  await userEvent.click(screen.getByRole('button', { name: /settings/i }));
  expect(useAppStore.getState().modal).toEqual({ kind: 'settings' });
});

it('about button opens about modal', async () => {
  render(<AppHeader />);
  await userEvent.click(screen.getByRole('button', { name: /^about$/i }));
  expect(useAppStore.getState().modal).toEqual({ kind: 'about' });
});
```

- [ ] **Step 4: Run tests**

```bash
npx vitest run tests/component/layout/AppHeader.test.tsx
```

Expected: PASS, 6 tests (2 existing + 2 new + the toggle tests from Phase 6).

- [ ] **Step 5: Commit**

```bash
git add src/renderer/components/layout/AppHeader.tsx tests/component/layout/AppHeader.test.tsx
git commit -m "feat(renderer): AppHeader gets Settings + About icon buttons"
```

---

## Task 35: Mount `ModalLayer` in `App.tsx` + first-launch welcome `useEffect`

**Files:**
- Modify: `src/renderer/App.tsx`
- Create: `src/renderer/hooks/use-welcome-trigger.ts`

- [ ] **Step 1: Create the welcome trigger hook**

Create `src/renderer/hooks/use-welcome-trigger.ts`:

```ts
import { useEffect } from 'react';
import { useAppStore } from '@/stores/app-store';
import { useSettingsStore } from '@/stores/settings-store';

/**
 * On first mount, if the user hasn't dismissed the welcome dialog, open it.
 * Call once at the top of App.tsx.
 */
export function useWelcomeTrigger() {
  useEffect(() => {
    if (!useSettingsStore.getState().welcomeDismissed) {
      useAppStore.getState().openModal('welcome');
    }
  }, []);
}
```

- [ ] **Step 2: Mount `ModalLayer` + call the hook in `App.tsx`**

Open `src/renderer/App.tsx`. The current structure (from Phase 2) is:

```tsx
import { AppShell } from './components/layout/AppShell';

function App() {
  return <AppShell />;
}
export default App;
```

Replace with:

```tsx
import { AppShell } from './components/layout/AppShell';
import { ModalLayer } from './components/modals/ModalLayer';
import { useWelcomeTrigger } from './hooks/use-welcome-trigger';

function App() {
  useWelcomeTrigger();
  return (
    <>
      <AppShell />
      <ModalLayer />
    </>
  );
}
export default App;
```

- [ ] **Step 3: Build verification**

```bash
npx vite build --config vite.renderer.config.ts
```

Expected: success.

- [ ] **Step 4: Commit**

```bash
git add src/renderer/App.tsx src/renderer/hooks/use-welcome-trigger.ts
git commit -m "feat(renderer): mount ModalLayer + first-launch welcome trigger"
```

---

## Task 36: Phase 7 integration smoke test

**Files:**
- Create: `tests/integration/phase7-modals-smoke.test.tsx`

- [ ] **Step 1: Write the test**

```tsx
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { App } from '@/App';
import { useAppStore } from '@/stores/app-store';
import { useCommandStore } from '@/stores/command-store';
import { useSettingsStore } from '@/stores/settings-store';
import { useFileStore } from '@/stores/file-store';
import { useEditorStore } from '@/stores/editor-store';
import { registerMenuCommands } from '@/lib/commands/register-menu-commands';

vi.mock('@/lib/ipc', () => ({
  ipc: {
    app: {
      getVersion: vi.fn().mockResolvedValue({ ok: true, data: '5.0.0' }),
      openExternal: vi.fn().mockResolvedValue({ ok: true }),
    },
  },
}));

describe('Phase 7 modals integration', () => {
  beforeEach(() => {
    localStorage.clear();
    useAppStore.setState({ modal: { kind: null }, sidebarVisible: true, previewVisible: true, zenMode: false, paneSizes: { sidebar: 20, editor: 50, preview: 30 } } as any);
    useCommandStore.setState({ handlers: {}, userBindings: {} } as any);
    useSettingsStore.setState(useSettingsStore.getInitialState());
    useFileStore.setState({ activeTabId: '/x.md', openTabs: [{ id: '/x.md', path: '/x.md', title: 'x.md', dirty: false }] } as any);
    useEditorStore.setState({ buffers: new Map([['/x.md', { id: '/x.md', path: '/x.md', content: '# hi', dirty: false }]]) } as any);
  });

  it('dispatching settings.open from command store opens SettingsSheet', () => {
    registerMenuCommands();
    render(<App />);
    useCommandStore.getState().dispatch('settings.open');
    expect(screen.getByRole('dialog')).toBeInTheDocument();
  });

  it('AppHeader Settings button dispatches settings.open', async () => {
    registerMenuCommands();
    render(<App />);
    await userEvent.click(screen.getByRole('button', { name: /settings/i }));
    expect(useAppStore.getState().modal.kind).toBe('settings');
  });

  it('first launch with welcomeDismissed=false opens welcome modal', () => {
    useSettingsStore.setState({ ...useSettingsStore.getInitialState(), welcomeDismissed: false });
    registerMenuCommands();
    render(<App />);
    expect(useAppStore.getState().modal.kind).toBe('welcome');
  });

  it('first launch with welcomeDismissed=true does not open welcome', () => {
    useSettingsStore.setState({ ...useSettingsStore.getInitialState(), welcomeDismissed: true });
    registerMenuCommands();
    render(<App />);
    expect(useAppStore.getState().modal).toEqual({ kind: null });
  });
});
```

- [ ] **Step 2: Run test to verify it passes**

```bash
npx vitest run tests/integration/phase7-modals-smoke.test.tsx
```

Expected: PASS, 4 tests.

If the App.tsx export is `default`, change the import to:

```ts
import App from '@/App';
```

- [ ] **Step 3: Commit**

```bash
git add tests/integration/phase7-modals-smoke.test.tsx
git commit -m "test(renderer): Phase 7 modals integration smoke test"
```

---

## Task 37: Phase 7 verification + tag

- [ ] **Step 1: Run the full test suite**

```bash
npx vitest run
```

Expected: all tests pass. Total should be ~250-270 (target: +50 from the ~220 at end of Phase 6).

- [ ] **Step 2: Build the renderer**

```bash
npx vite build --config vite.renderer.config.ts
```

Expected: `built in XXXms`, exit 0.

- [ ] **Step 3: Lint**

```bash
npx eslint src tests
```

Expected: no errors.

- [ ] **Step 4: Push the branch and tag**

```bash
git push origin react-electron
git tag -a phase-7-modals -m "Phase 7 complete: ModalLayer, 7 modal types, settings store, ASCII table transform, DOCX template picker"
git push origin react-electron --tags
```

---

## Self-Review Notes

**Spec coverage:**
- §2.1 modal state in `useAppStore` → Task 15 ✓
- §2.2 discriminated union → Task 15 ✓
- §2.3 single `<ModalLayer />` → Task 17 ✓
- §2.4 settings store → Task 16 ✓
- §2.5 welcome trigger → Task 35 ✓
- §2.6 commands trigger modals → Task 33 ✓
- §3.1 shadcn primitives → Tasks 1-12 ✓
- §3.2 modals → Tasks 17-26, 32 ✓
- §3.3 stores → Tasks 15-16 ✓
- §3.4 lib → Tasks 13-14 ✓
- §3.5 modified files → Tasks 33-35 ✓
- §3.6 tests → all tasks have tests ✓
- §4 data flow → Tasks 23-26, 33-35 ✓
- §5 error handling → inline error banner in Tasks 23-26; onRehydrateStorage in Task 16 ✓
- §6 testing strategy → followed throughout ✓
- §9 success criteria → Task 37 ✓

**Placeholder scan:** None.

**Type consistency:**
- `useAppStore.modal` shape consistent across Tasks 15, 17, 33.
- `useSettingsStore.setSetting` signature consistent across Tasks 16, 27-29.
- `useExportSource` shape consistent across Tasks 21, 23-26.
- IPC `ipc.export.{pdf,docx,html,batch}` signatures match `types/ipc.ts` from Phase 1.

**One spec gap:** the spec mentions "ascii-table.test.ts (3 tests: simple table, alignment, empty input)" but Task 13 has 5 tests. Acceptable — the additional `applyAsciiTransform` tests are needed.

**One risk:** Task 33 assumes `register-menu-commands.ts` has a specific shape. If the Phase 6 file uses a different structure (e.g., separate `useRegisterMenuCommands` hook), the engineer must adapt. The tests in Task 33 verify the behavior, not the internals.