test(live): add full-cycle E2E framework-fixture suite with pluggable agent

19 fixtures (11 styling/build variants + 4 conditional-render scenarios + 4 meta-frameworks) drive the entire user flow end-to-end: handshake, pick, configure, Go, cycle, accept, carbonize cleanup. Each fixture installs real deps, boots the framework dev server, and runs Playwright Chromium against a deterministic fake agent that produces realistic variants (colocated style with @scope rules, full data-impeccable-params manifests covering range + steps + toggle, JSX/HTML/Svelte syntax-aware rendering). The agent is pluggable via a one-method interface — generateVariants(event) — so a future LLM-backed agent slots in by implementing the same shape. The orchestrator handles wrap, file write, accept, and carbonize cleanup deterministically regardless of which agent is plugged in. Schema extensions (tests/framework-fixtures/README.md): runtime block adds preActions / reloadProbe / pickSelector / scheme / ignoreHTTPSErrors so fixtures can drive conditional UI (modal, tab, route) before pick and verify the carbonized variant survives a reload. Static fixture suite filtered to skip dirs without fixture.json so empty scaffold dirs no longer break discovery. Total: 178 static checks, 19 E2E full cycles, ~107s wall clock for the E2E suite. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-09-11 21:57:14 +03:00 · 2026-04-24 23:37:04 -07:00
parent d29a690797
commit c8de59d81e
163 changed files with 3392 additions and 1 deletions
@@ -50,6 +50,7 @@
    "preview": "bun run build && wrangler pages dev",
    "deploy": "bun run build && wrangler pages deploy build/",
    "test": "bun test tests/build.test.js tests/detect-antipatterns.test.js && node --test tests/detect-antipatterns-fixtures.test.mjs && node --test tests/detect-antipatterns-browser.test.mjs && node --test tests/cleanup-deprecated.test.mjs && node --test tests/live-wrap.test.mjs && node --test tests/live-accept.test.mjs && node --test tests/live-inject.test.mjs && node --test tests/live-server.test.mjs && node --test tests/framework-fixtures.test.mjs",
+    "test:live-e2e": "node --test --test-timeout=600000 tests/live-e2e.test.mjs",
    "prepack": "cp README.md README.repo.md && cp README.npm.md README.md",
    "postpack": "cp README.repo.md README.md && rm README.repo.md",
    "screenshot": "bun run scripts/screenshot-antipatterns.js",
@@ -12,7 +12,7 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
 import { execFileSync } from 'node:child_process';
-import { cpSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { cpSync, existsSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -27,6 +27,7 @@ const FIXTURES_DIR = join(__dirname, 'framework-fixtures');
 function listFixtures() {
  return readdirSync(FIXTURES_DIR, { withFileTypes: true })
    .filter((e) => e.isDirectory())
+    .filter((e) => existsSync(join(FIXTURES_DIR, e.name, 'fixture.json')))
    .map((e) => e.name);
 }

@@ -2,6 +2,8 @@

 Representative project shapes for exercising live mode against different framework conventions. Each fixture is a small directory tree that the test harness copies into a temp git repo, then drives `live-inject.mjs`, `live-wrap.mjs`, `live-accept.mjs`, and `is-generated.mjs` against.

+Fixtures can also opt into a **runtime E2E** pass that actually installs dependencies, boots the framework dev server, and drives a Playwright browser to verify the live handshake. See the `runtime` block below.
+
 ## Layout

 ```
@@ -32,12 +34,43 @@ Representative project shapes for exercising live mode against different framewo
    "signals": ["diagnostic hints — paths where CSP was detected"],
    "patchTarget": "which file the agent should modify",
    "expectedAfter": "filename of the reference post-patch output inside this fixture"
+  },
+  "runtime": {
+    "styling": "plain-css | tailwind-v4 | styled-components | ...",
+    "install": ["npm", "install"],
+    "devCommand": ["npm", "run", "dev"],
+    "scheme": "http",
+    "ignoreHTTPSErrors": false,
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "pickSelector": "h1.hero-title",
+    "preActions": [
+      { "type": "click", "selector": "[data-testid='open-modal']" },
+      { "type": "goto",  "path": "/about" }
+    ],
+    "reloadProbe": {
+      "preActions": [{ "type": "click", "selector": "[data-testid='open-modal']" }],
+      "expectSelector": "h1.hero-title"
+    },
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
  }
 }
 ```

 The `expectedAfter` file lives alongside `fixture.json` (not inside `files/`) and is a human/agent-review reference — tests don't auto-apply the patch.

+The `runtime` block is optional. Fixtures without it only run the static unit checks (is-generated, inject, wrap, csp-detect). Fixtures *with* it additionally run the E2E suite in `tests/live-e2e.test.mjs` (`bun run test:live-e2e`), which:
+
+1. Stages the fixture into a tmp repo.
+2. Runs `runtime.install` to install real deps.
+3. Starts `live-server.mjs --background` and runs `live-inject.mjs --port` against it.
+4. Spawns `runtime.devCommand` and scrapes the port from stdout using `runtime.readyPattern` (the first capture group must be the port).
+5. Opens Playwright Chromium at the dev URL and asserts `window.__IMPECCABLE_LIVE_INIT__ === true` (the browser-side handshake oracle) within `runtime.readyTimeoutMs`.
+6. Tears everything down (Playwright close, dev server SIGTERM, live-server stop, tmp rm).
+
 ## Current fixtures

 | Fixture | Shape |
@@ -0,0 +1,5 @@
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  server: { host: '127.0.0.1' },
+});
@@ -0,0 +1,14 @@
+{
+  "name": "astro-vite7-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev --host 127.0.0.1",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "astro": "^6.0.0"
+  }
+}
@@ -0,0 +1,13 @@
+---
+const { title } = Astro.props;
+---
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
@@ -0,0 +1,16 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+<Layout title="Astro + Vite 7 Fixture">
+  <main class="page">
+    <h1 class="hero-title">Astro + Vite 7 Fixture</h1>
+    <p class="hero-hook">Static Astro page rendered server-side, hydrated nothing.</p>
+  </main>
+</Layout>
+
+<style>
+  body { margin: 0; font-family: system-ui, sans-serif; }
+  .page { padding: 2rem; }
+  .hero-title { font-size: 2rem; margin: 0 0 0.5rem; }
+  .hero-hook { color: #555; }
+</style>
@@ -0,0 +1,28 @@
+{
+  "name": "Astro 6 + Vite 7",
+  "config": {
+    "files": ["src/layouts/Layout.astro"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["src/layouts/Layout.astro", "src/pages/index.astro", "astro.config.mjs"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero in pages/index.astro",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/pages/index.astro"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "astro", "dev", "--host", "127.0.0.1"],
+    "readyPattern": "Local\\s+https?://[^:\\s]+:(\\d+)",
+    "readyTimeoutMs": 180000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+.astro/
+dist/
+package-lock.json
@@ -0,0 +1,11 @@
+export const metadata = { title: 'Next.js App Router Fixture' };
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,10 @@
+'use client';
+
+export default function Page() {
+  return (
+    <main className="page" style={{padding: '2rem', fontFamily: 'system-ui, sans-serif'}}>
+      <h1 className="hero-title" style={{fontSize: '2rem', margin: '0 0 0.5rem'}}>Next.js App Router Fixture</h1>
+      <p className="hero-hook" style={{color: '#555'}}>Client component under Turbopack HMR.</p>
+    </main>
+  );
+}
@@ -0,0 +1,3 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+module.exports = nextConfig;
@@ -0,0 +1,15 @@
+{
+  "name": "nextjs-app-router-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next dev --hostname 127.0.0.1",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}
@@ -0,0 +1,28 @@
+{
+  "name": "Next.js 16 + App Router (Turbopack)",
+  "config": {
+    "files": ["app/layout.jsx"],
+    "insertBefore": "</body>",
+    "commentSyntax": "jsx"
+  },
+  "sourceFiles": ["app/layout.jsx", "app/page.jsx", "next.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX page",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "app/page.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "next", "dev", "--hostname", "127.0.0.1"],
+    "readyPattern": "(?:Local|Network):?\\s+https?://[^:\\s]+:(\\d+)",
+    "readyTimeoutMs": 180000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,5 @@
+node_modules/
+.next/
+out/
+dist/
+package-lock.json
@@ -0,0 +1,10 @@
+<template>
+  <html lang="en">
+    <head>
+      <title>Nuxt + Vite 7 Fixture</title>
+    </head>
+    <body>
+      <NuxtPage />
+    </body>
+  </html>
+</template>
@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  devtools: { enabled: false },
+  ssr: false,
+});
@@ -0,0 +1,15 @@
+{
+  "name": "nuxt-vite7-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev --host 127.0.0.1",
+    "build": "nuxt build",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "nuxt": "^4.0.0",
+    "vue": "^3.5.0"
+  }
+}
@@ -0,0 +1,12 @@
+<template>
+  <main class="page">
+    <h1 class="hero-title">Nuxt + Vite 7 Fixture</h1>
+    <p class="hero-hook">Vue 3 SFC under Nuxt's dev server.</p>
+  </main>
+</template>
+
+<style scoped>
+.page { padding: 2rem; font-family: system-ui, sans-serif; }
+.hero-title { font-size: 2rem; margin: 0 0 0.5rem; }
+.hero-hook { color: #555; }
+</style>
@@ -0,0 +1,18 @@
+{
+  "name": "Nuxt 4 + Vue 3 (static fixture only — runtime inject unsupported)",
+  "config": {
+    "files": ["app.vue"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["app.vue", "pages/index.vue", "nuxt.config.ts"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero in pages/index.vue",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "pages/index.vue"
+    }
+  ],
+  "_runtimeOmitted": "Nuxt's app.vue is a Vue template that compiles to a render function — a <script> tag inserted there renders as a DOM node but does not execute. Nuxt needs a config-based inject (nuxt.config.ts -> app.head.script), which live-inject.mjs does not currently support. Static checks (is-generated, inject syntax, wrap routing) still validate."
+}
@@ -0,0 +1,5 @@
+node_modules/
+.nuxt/
+.output/
+dist/
+package-lock.json
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + HTTPS Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,20 @@
+{
+  "name": "vite8-https-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-basic-ssl": "^2.3.0",
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
@@ -0,0 +1,12 @@
+export default function App() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">Vite 8 + HTTPS Fixture</h1>
+      <p className="hero-hook">Self-signed HTTPS. http://localhost:PORT/live.js should be blocked as mixed content.</p>
+      <section id="features" className="feature-grid">
+        <article className="feature-card">One</article>
+        <article className="feature-card">Two</article>
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; }
+.hero-hook { color: #555; }
+.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
+.feature-card { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import basicSsl from '@vitejs/plugin-basic-ssl';
+
+export default defineConfig({
+  plugins: [react(), basicSsl()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
@@ -0,0 +1,30 @@
+{
+  "name": "Vite 8 + React + HTTPS (self-signed)",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "scheme": "https",
+    "ignoreHTTPSErrors": true,
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + base path Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-base-path-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
@@ -0,0 +1,8 @@
+export default function App() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">Vite 8 + base path Fixture</h1>
+      <p className="hero-hook">Served under base: '/app/'.</p>
+    </main>
+  );
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,4 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; }
+.hero-hook { color: #555; }
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  base: '/app/',
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
@@ -0,0 +1,29 @@
+{
+  "name": "Vite 8 + React + base: '/app/'",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "preActions": [{ "type": "goto", "path": "/app/" }],
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' ws: wss:; img-src 'self' data:;"
+    />
+    <title>Vite 8 + CSP meta Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-csp-meta-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
@@ -0,0 +1,12 @@
+export default function App() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">Vite 8 + CSP meta Fixture</h1>
+      <p className="hero-hook">CSP meta tag blocks cross-origin script-src.</p>
+      <section id="features" className="feature-grid">
+        <article className="feature-card">One</article>
+        <article className="feature-card">Two</article>
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; }
+.hero-hook { color: #555; }
+.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
+.feature-card { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
@@ -0,0 +1,33 @@
+{
+  "name": "Vite 8 + React + CSP meta tag",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "csp": {
+    "shape": "meta-tag",
+    "signals": ["index.html"],
+    "patchTarget": "index.html"
+  },
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + CSS Modules Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-css-modules-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
@@ -0,0 +1,14 @@
+import styles from './App.module.css';
+
+export default function App() {
+  return (
+    <main className={`page ${styles.page}`}>
+      <h1 className={`hero-title ${styles.heroTitle}`}>Vite 8 + CSS Modules Fixture</h1>
+      <p className={`hero-hook ${styles.heroHook}`}>CSS Modules via foo.module.css — hashed classNames at runtime.</p>
+      <section id="features" className={`feature-grid ${styles.featureGrid}`}>
+        <article className={`feature-card ${styles.featureCard}`}>One</article>
+        <article className={`feature-card ${styles.featureCard}`}>Two</article>
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,5 @@
+.page { padding: 2rem; font-family: system-ui, sans-serif; }
+.heroTitle { font-size: 2rem; }
+.heroHook { color: #555; }
+.featureGrid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 1rem; }
+.featureCard { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + CSS Modules",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/App.module.css", "src/main.jsx", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "css-modules",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + Emotion Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,21 @@
+{
+  "name": "vite8-react-emotion-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
@@ -0,0 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+const pageStyle = css`padding: 2rem; font-family: system-ui, sans-serif;`;
+const titleStyle = css`font-size: 2rem;`;
+const hookStyle = css`color: #555;`;
+const gridStyle = css`display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 1rem;`;
+const cardStyle = css`padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem;`;
+
+export default function App() {
+  return (
+    <main css={pageStyle} className="page">
+      <h1 css={titleStyle} className="hero-title">Vite 8 + Emotion Fixture</h1>
+      <p css={hookStyle} className="hero-hook">Runtime CSS-in-JS via the Emotion css prop.</p>
+      <section css={gridStyle} id="features" className="feature-grid">
+        <article css={cardStyle} className="feature-card">One</article>
+        <article css={cardStyle} className="feature-card">Two</article>
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react({ jsxImportSource: '@emotion/react' })],
+  server: { host: '127.0.0.1', strictPort: false },
+});
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + Emotion",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "emotion",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + Mapped List Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-mapped-list-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
@@ -0,0 +1,21 @@
+const ITEMS = [
+  { id: 'a', title: 'Alpha card' },
+  { id: 'b', title: 'Beta card' },
+  { id: 'c', title: 'Gamma card' },
+];
+
+export default function App() {
+  return (
+    <main className="page">
+      <p className="hero-hook">Three cards rendered from a single mapped template.</p>
+      <section className="grid">
+        {ITEMS.map((item) => (
+          <article key={item.id} className="card">
+            <h1 className="hero-title">{item.title}</h1>
+            <p>Body for {item.id}.</p>
+          </article>
+        ))}
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-hook { color: #555; }
+.grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 1rem; }
+.card { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
+.hero-title { font-size: 1.4rem; margin: 0 0 0.5rem; }
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + .map() instances (3 cards from one template)",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps the mapped h1 template in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + Modal Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-modal-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+export default function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <main className="page">
+      <button data-testid="open-modal" type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      {open && (
+        <div className="modal-backdrop">
+          <div className="modal" role="dialog" aria-modal="true">
+            <h1 className="hero-title">Modal Heading</h1>
+            <p className="hero-hook">Conditionally rendered — only mounts on click.</p>
+            <button data-testid="close-modal" type="button" onClick={() => setOpen(false)}>
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,7 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; margin: 0; }
+.hero-hook { color: #555; }
+.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; }
+.modal { background: white; padding: 2rem; border-radius: 1rem; min-width: 320px; }
+button { padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; }
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
@@ -0,0 +1,39 @@
+{
+  "name": "Vite 8 + React + conditional Modal",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps modal heading in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "preActions": [
+      { "type": "click", "selector": "[data-testid='open-modal']" },
+      { "type": "wait",  "selector": "h1.hero-title" }
+    ],
+    "reloadProbe": {
+      "preActions": [
+        { "type": "click", "selector": "[data-testid='open-modal']" },
+        { "type": "wait",  "selector": "h1.hero-title" }
+      ],
+      "expectSelector": "h1.hero-title"
+    },
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + React Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "vite8-react-plain-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
@@ -0,0 +1,12 @@
+export default function App() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">Vite 8 Fixture</h1>
+      <p className="hero-hook">Minimal React tree for live-mode E2E tests.</p>
+      <section id="features" className="feature-grid">
+        <article className="feature-card">One</article>
+        <article className="feature-card">Two</article>
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; }
+.hero-hook { color: #555; }
+.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
+.feature-card { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '127.0.0.1',
+    strictPort: false,
+  },
+});
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + plain CSS",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "src/styles.css", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + React Router Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,20 @@
+{
+  "name": "vite8-react-router-spa-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
@@ -0,0 +1,21 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
+import Home from './routes/Home.jsx';
+import About from './routes/About.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <BrowserRouter>
+      <nav className="nav">
+        <Link to="/">Home</Link>
+        <Link to="/about" data-testid="nav-about">About</Link>
+      </nav>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+      </Routes>
+    </BrowserRouter>
+  </StrictMode>,
+);
@@ -0,0 +1,8 @@
+export default function About() {
+  return (
+    <main className="page">
+      <h1 className="hero-title">About Page Hero</h1>
+      <p className="hero-hook">Lives on the /about route — only mounts after navigation.</p>
+    </main>
+  );
+}
@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <main className="page">
+      <h2>Home</h2>
+      <p>Welcome. The hero we'll edit lives on the About page.</p>
+    </main>
+  );
+}
@@ -0,0 +1,6 @@
+body { margin: 0; font-family: system-ui, sans-serif; }
+.nav { display: flex; gap: 1rem; padding: 1rem; border-bottom: 1px solid #eee; }
+.nav a { color: #111; text-decoration: none; }
+.page { padding: 2rem; }
+.hero-title { font-size: 2rem; margin: 0 0 0.5rem; }
+.hero-hook { color: #555; }
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
@@ -0,0 +1,46 @@
+{
+  "name": "Vite 8 + React Router 7 (multi-route SPA)",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": [
+    "index.html",
+    "src/main.jsx",
+    "src/routes/Home.jsx",
+    "src/routes/About.jsx",
+    "src/styles.css",
+    "vite.config.js"
+  ],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps About hero in routes/About.jsx",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/routes/About.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "plain-css",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "preActions": [
+      { "type": "click", "selector": "[data-testid='nav-about']" },
+      { "type": "wait",  "selector": "h1.hero-title" }
+    ],
+    "reloadProbe": {
+      "preActions": [
+        { "type": "click", "selector": "[data-testid='nav-about']" },
+        { "type": "wait",  "selector": "h1.hero-title" }
+      ],
+      "expectSelector": "h1.hero-title"
+    },
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vite 8 + styled-components Fixture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -0,0 +1,20 @@
+{
+  "name": "vite8-react-styled-components-fixture",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const Page = styled.main`padding: 2rem; font-family: system-ui, sans-serif;`;
+const Hook = styled.p`color: #555;`;
+const Grid = styled.section`display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 1rem;`;
+const Card = styled.article`padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem;`;
+
+export default function App() {
+  return (
+    <Page className="page">
+      <h1 className="hero-title" style={{ fontSize: '2rem' }}>Vite 8 + styled-components Fixture</h1>
+      <Hook className="hero-hook">Runtime CSS-in-JS via styled-components v6.</Hook>
+      <Grid id="features" className="feature-grid">
+        <Card className="feature-card">One</Card>
+        <Card className="feature-card">Two</Card>
+      </Grid>
+    </Page>
+  );
+}
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '127.0.0.1', strictPort: false },
+});
@@ -0,0 +1,28 @@
+{
+  "name": "Vite 8 + React + styled-components",
+  "config": {
+    "files": ["index.html"],
+    "insertBefore": "</body>",
+    "commentSyntax": "html"
+  },
+  "sourceFiles": ["index.html", "src/App.jsx", "src/main.jsx", "vite.config.js"],
+  "generatedFiles": [],
+  "wrapCases": [
+    {
+      "name": "wraps hero title in source JSX",
+      "args": { "classes": "hero-title", "tag": "h1" },
+      "expectedFile": "src/App.jsx"
+    }
+  ],
+  "runtime": {
+    "styling": "styled-components",
+    "install": ["npm", "install", "--no-audit", "--no-fund", "--loglevel=error"],
+    "devCommand": ["npx", "vite", "--host", "127.0.0.1"],
+    "readyPattern": "Local:\\s+https?://[^:]+:(\\d+)",
+    "readyTimeoutMs": 120000,
+    "probe": {
+      "expectLiveInit": true,
+      "expectConsoleClean": true
+    }
+  }
+}
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.vite/
+package-lock.json
--- a/Show More
+++ b/Show More