test: add Playwright e2e suite + CI workflow

- 28 tests across desktop + mobile (chromium-only):
  • smoke — landing pages render, /docs/ lists 40+ components,
    representative sample of 17 component pages renders all demos
    without errors, playground default executes
  • mobile — no horizontal overflow on home and Button at 390x844,
    sidebar drawer toggles via hamburger and backdrop, Escape closes,
    sidebar link nav closes drawer, apps grid stacks to one column
  • theme — toggle changes data-theme + writes localStorage atomically,
    persists across reloads
- scripts/build-site.mjs — single-command site build (esbuild + docs)
- scripts/serve-site.mjs — tiny zero-dep static server for tests
- playwright.config.ts — webServer-driven, two projects:
  desktop (Chrome 1280x800) + mobile (iPhone 13, chromium browser)
- .github/workflows/e2e.yml — Node 24, browser cache by playwright
  version, uploads report+traces on failure
- generator fix: variantsDemo / sizesDemo / statesDemo now reuse
  requiredAttrs so Select/Tabs/Menu render with their `options`/`items`
  populated instead of throwing at runtime
- mobile fix: body { overflow-x: clip } on small screens stops minor
  flex+pre overflow from making the page horizontally scrollable

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

Author: aksOps

.github/workflows/e2e.yml

@@ -0,0 +1,84 @@
+name: E2E
+
+# Runs the Playwright end-to-end suite against a freshly built docs site.
+# Uses chromium only (single browser binary for speed).
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "src/**"
+      - "scripts/**"
+      - "tests/e2e/**"
+      - "playwright.config.ts"
+      - "colors_and_type.css"
+      - "preview/**"
+      - "ui_kits/**"
+      - "package.json"
+      - "pnpm-lock.yaml"
+      - ".github/workflows/e2e.yml"
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: e2e-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e:
+    name: Playwright (chromium)
+    runs-on: ubuntu-latest
+    timeout-minutes: 12
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v5
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install --frozen-lockfile
+
+      - name: Resolve playwright version
+        id: pw
+        run: |
+          v=$(node -p "require('./node_modules/@playwright/test/package.json').version")
+          echo "version=$v" >> "$GITHUB_OUTPUT"
+
+      - name: Cache playwright browsers
+        id: pw-cache
+        uses: actions/cache@v5
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ steps.pw.outputs.version }}
+
+      - name: Install browsers
+        if: steps.pw-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Install browser system deps (cache hit only)
+        if: steps.pw-cache.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps chromium
+
+      - name: Build site
+        run: pnpm run build:site
+
+      - name: Run tests
+        run: pnpm test:e2e
+
+      - name: Upload report
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: playwright-report-${{ github.sha }}
+          path: |
+            playwright-report/
+            test-results/
+          retention-days: 7

.gitignore

@@ -34,6 +34,9 @@ Thumbs.db
 # Test
 coverage/
 .nyc_output/
+test-results/
+playwright-report/
+playwright/.cache/
 
 # Misc
 *.tgz

package.json

@@ -49,8 +49,11 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "build": "tsc -p tsconfig.build.json && node -e \"require('fs').writeFileSync('dist/styles.css', require('fs').readFileSync('colors_and_type.css','utf8') + '\\n' + require('fs').readFileSync('src/styles.css','utf8'))\"",
+    "build:site": "node scripts/build-site.mjs _site",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "test": "vitest run",
+    "test:e2e": "playwright test",
+    "test:e2e:install": "playwright install --with-deps chromium",
     "preview": "echo 'Open preview/responsive-check.html in a browser' ",
     "prepublishOnly": "pnpm run typecheck && pnpm run build",
     "release": "pnpm version"
@@ -61,10 +64,13 @@
   },
   "devDependencies": {
     "@babel/standalone": "^7.29.0",
+    "@playwright/test": "^1.59.1",
+    "@types/node": "^22.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
+    "esbuild": "^0.24.0",
     "eslint": "^9.0.0",
     "jsdom": "^22.1.0",
     "typescript": "^5.6.0",

playwright.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const PORT = parseInt(process.env.PORT || "4173", 10);
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? 2 : undefined,
+  reporter: process.env.CI
+    ? [["github"], ["html", { open: "never" }]]
+    : "list",
+  timeout: 30_000,
+  expect: { timeout: 7_000 },
+  use: {
+    baseURL: `http://localhost:${PORT}`,
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+  },
+  projects: [
+    {
+      name: "desktop",
+      testIgnore: /mobile\.spec\.ts$/,
+      use: { ...devices["Desktop Chrome"], viewport: { width: 1280, height: 800 } },
+    },
+    {
+      name: "mobile",
+      testMatch: /mobile\.spec\.ts$/,
+      use: {
+        ...devices["iPhone 13"],
+        // iPhone 13 profile defaults to webkit; force chromium so we can
+        // run the suite with a single browser binary.
+        browserName: "chromium",
+        defaultBrowserType: "chromium",
+      },
+    },
+  ],
+  webServer: {
+    command: "node scripts/serve-site.mjs _site",
+    port: PORT,
+    reuseExistingServer: !process.env.CI,
+    timeout: 30_000,
+    stdout: "pipe",
+    stderr: "pipe",
+  },
+});