Fix Vitest browser provider setup and test cleanup

- Add @vitest/browser-playwright; use playwright() factory (not string)
- Import page from vitest/browser (not deprecated @vitest/browser/context)
- Add afterEach(cleanup) so each test gets a fresh DOM
- Use oxc transform for JSX instead of esbuild (avoids Vite 8 warning)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/planner/app/lib/elevation-chart-draw.browser.test.tsx

@@ -1,6 +1,6 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import { page } from "@vitest/browser/context";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { page } from "vitest/browser";
 import { drawElevationChart } from "./elevation-chart-draw";
 import type { DrawChartParams } from "./elevation-chart-draw";
 
@@ -46,6 +46,7 @@ function ChartFixture({ params }: { params: DrawChartParams }) {
 }
 
 describe("drawElevationChart visual regression", () => {
+  afterEach(() => cleanup());
   it("renders plain color mode", async () => {
     render(<ChartFixture params={BASE_PARAMS} />);
     await expect(page.getByTestId("chart")).toMatchScreenshot("plain.png");

apps/planner/package.json

@@ -55,6 +55,7 @@
     "@types/react-dom": "catalog:",
     "@types/ws": "^8.18.1",
     "@vitest/browser": "^4.1.5",
+    "@vitest/browser-playwright": "^4.1.5",
     "leaflet.markercluster": "^1.5.3",
     "pino-pretty": "^13.1.3",
     "tailwindcss": "catalog:",

apps/planner/vitest.browser.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "vitest/config";
 import { resolve } from "node:path";
+import { playwright } from "@vitest/browser-playwright";
 
 // Separate config for Vitest browser visual regression tests.
 // Run with: pnpm --filter @trails-cool/planner test:visual
@@ -10,8 +11,8 @@ import { resolve } from "node:path";
 // (.github/workflows/update-visual-snapshots.yml), triggered manually or
 // by adding the `update-snapshots` label to a PR.
 export default defineConfig({
-  esbuild: {
-    jsx: "automatic",
+  oxc: {
+    transform: { react: {} },
   },
   resolve: {
     alias: {
@@ -23,10 +24,7 @@ export default defineConfig({
     include: ["app/**/*.browser.test.{ts,tsx}"],
     browser: {
       enabled: true,
-      // Provider is resolved from whichever @vitest/browser peer is installed.
-      // playwright is the default when @playwright/test is available.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      provider: "playwright" as any,
+      provider: playwright(),
       instances: [{ browser: "chromium" }],
     },
   },