refactor(player): extract CircleButton shared primitive

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/src/player/components/CircleButton.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CircleButton } from "./CircleButton";
+
+describe("CircleButton", () => {
+  it("calls onClick when clicked", async () => {
+    const onClick = vi.fn();
+    render(
+      <CircleButton size="sm" variant="secondary" ariaLabel="Test" onClick={onClick}>
+        x
+      </CircleButton>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Test" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies the primary skin class for variant=primary", () => {
+    render(
+      <CircleButton size="md" variant="primary" ariaLabel="Play">
+        ▶
+      </CircleButton>,
+    );
+    const btn = screen.getByRole("button", { name: "Play" });
+    expect(btn.className).toContain("player-disc-primary");
+  });
+
+  it("sets data-paused when prop is true", () => {
+    render(
+      <CircleButton size="md" variant="primary" ariaLabel="Play" data-paused>
+        ▶
+      </CircleButton>,
+    );
+    expect(screen.getByRole("button")).toHaveAttribute("data-paused", "true");
+  });
+});