feat: add SpeedSelector popup component

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/lib/components/SpeedSelector.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import SpeedSelector from '$lib/components/SpeedSelector.svelte';
+
+describe('SpeedSelector', () => {
+  it('renders all speed options', () => {
+    const { getByText } = render(SpeedSelector, {
+      props: { currentRate: 1, onSelect: vi.fn(), onClose: vi.fn() },
+    });
+    expect(getByText('0.5×')).toBeTruthy();
+    expect(getByText('0.75×')).toBeTruthy();
+    expect(getByText('1×')).toBeTruthy();
+    expect(getByText('1.25×')).toBeTruthy();
+    expect(getByText('1.5×')).toBeTruthy();
+    expect(getByText('2×')).toBeTruthy();
+  });
+
+  it('highlights the current rate', () => {
+    const { container } = render(SpeedSelector, {
+      props: { currentRate: 1.5, onSelect: vi.fn(), onClose: vi.fn() },
+    });
+    const activeBtn = container.querySelector('.speed-option.active');
+    expect(activeBtn).toBeTruthy();
+    expect(activeBtn!.textContent).toContain('1.5×');
+  });
+
+  it('calls onSelect when an option is clicked', async () => {
+    const onSelect = vi.fn();
+    const { getByText } = render(SpeedSelector, {
+      props: { currentRate: 1, onSelect, onClose: vi.fn() },
+    });
+    await fireEvent.click(getByText('2×'));
+    expect(onSelect).toHaveBeenCalledWith(2);
+  });
+});