test(e2e): Vite host and Playwright harness (CL-9126)

bun run test:e2e packs the package, installs it into tests/e2e/host,
typechecks the host, and runs Playwright against one route per
scenario. A smoke spec covers the harness. bun test is rooted at src/
so it skips the specs.
CI installs Chromium and runs the e2e suite.

Author: TheGreatAxios

.github/workflows/ci.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches: [main]
   pull_request:
-    branches: [main]
 
 jobs:
   verify:
@@ -26,3 +25,5 @@ jobs:
       - run: bun run dep-guard
       - run: bun test
       - run: bun run build
+      - run: bunx playwright install --with-deps chromium
+      - run: bun run test:e2e

.gitignore

@@ -9,3 +9,6 @@ scratch/
 build/
 .worktrees/
 .agent-state/
+tests/e2e/host/bun.lock
+test-results/
+playwright-report/

CONTRIBUTING.md

@@ -22,10 +22,13 @@ bun run build          # generate → SWC → tsc → Tailwind → the contrast
 bun run typecheck      # tsc --noEmit
 bun run lint           # eslint .
 bun run dep-guard      # forbidden-import checks over src/
+bun run test:e2e       # pack, install into tests/e2e/host, run Playwright
 ```
 
-All four must be clean before a change lands. There is no CI in this repository yet, so
-running them locally is the only thing standing between a change and a release.
+`test:e2e` needs Chromium once: `bunx playwright install chromium`. Each scenario is a
+route in `tests/e2e/host/src/scenarios.tsx`, rendered against the packed tarball.
+
+All five must be clean before a change lands; CI runs them on every pull request.
 `typecheck` is not negotiable and `any` is not a way past it: the escapes that exist each
 carry a comment explaining why the type system leaves no alternative, and a new one needs
 the same.

bun.lock

@@ -1,2 +1,4 @@
 [test]
+# Playwright specs under tests/ also match bun's *.spec.* pattern.
+root = "./src"
 preload = ["./scripts/test-dom-setup.ts"]

bunfig.toml

@@ -35,6 +35,7 @@
     "build:css": "tailwindcss -i src/styles.css -o dist/styles.css && cp src/theme.css dist/theme.css",
     "typecheck": "tsc --noEmit",
     "test": "bun test",
+    "test:e2e": "bun pm pack --quiet --filename tests/e2e/host/react-ui.tgz && playwright test -c tests/e2e",
     "lint": "eslint .",
     "dep-guard": "node scripts/dep-guard.mjs",
     "contrast-test": "node scripts/contrast-test.mjs",
@@ -62,6 +63,7 @@
     "@eslint/js": "^9.39.1",
     "@happy-dom/global-registrator": "^20.11.2",
     "@ladle/react": "^5.1.1",
+    "@playwright/test": "^1.63.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.3",

package.json

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>react-ui e2e host</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

tests/e2e/host/index.html

@@ -0,0 +1,23 @@
+{
+  "name": "react-ui-e2e-host",
+  "description": "Vite app that renders @corbits/react-ui scenarios for the Playwright suite",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@corbits/react-ui": "file:./react-ui.tgz",
+    "@radix-ui/react-slot": "1.3.3",
+    "lucide-react": "1.48.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "typescript": "5.9.3",
+    "vite": "6.4.3"
+  }
+}

tests/e2e/host/package.json

@@ -0,0 +1,13 @@
+import "@corbits/react-ui/styles.css";
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import { scenarios } from "./scenarios.js";
+
+const name = window.location.pathname.slice(1);
+const Scenario = scenarios[name];
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>{Scenario ? <Scenario /> : <p>Unknown scenario: {name}</p>}</StrictMode>,
+);

tests/e2e/host/src/main.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+import { Button } from "@corbits/react-ui";
+
+export const scenarios: Record<string, () => ReactNode> = {
+  smoke: () => <Button>Ready</Button>,
+};