test: add a browser Vitest project for interactive components

Run *.browser.test.tsx in headless Chromium through the Playwright
provider. The shared helper in tests/browser/ mounts the app's own
providers, stubs only the fetch boundary, and shims next/navigation
onto the page's real location and history.

src/components/ui/__tests__/segmented.browser.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+
+import { renderWithApp } from "../../../../tests/browser/render";
+import { Segmented } from "../segmented";
+
+const OPTIONS = [
+  { value: "day", label: "Day" },
+  { value: "week", label: "Week" },
+  { value: "month", label: "Month" },
+] as const;
+
+describe("<Segmented> smoke", () => {
+  it("moves with the arrow key", async () => {
+    const onChange = vi.fn();
+    const { screen } = await renderWithApp(
+      <Segmented
+        options={OPTIONS}
+        value="day"
+        onChange={onChange}
+        label="Zoom"
+      />,
+    );
+    await screen.getByRole("radio", { name: "Day" }).click();
+    await userEvent.keyboard("{ArrowRight}");
+    expect(onChange).toHaveBeenLastCalledWith("week");
+    await expect
+      .element(screen.getByRole("radio", { name: "Week" }))
+      .toHaveFocus();
+  });
+});