code-to-design 0.1.5 → 0.2.1

package/dist/{chunk-WX4KLWOS.js → chunk-AL6L2SWU.js}

@@ -1,10 +1,10 @@
 // src/commands/scan.ts
-import { join as join9 } from "path";
-import { rm, mkdir as mkdir3 } from "fs/promises";
+import { join as join10 } from "path";
+import { rm, mkdir as mkdir4 } from "fs/promises";
 import { existsSync as existsSync7, watch as fsWatch } from "fs";
 
 // ../core/src/discovery/route-scanner.ts
-import { readdir, stat } from "fs/promises";
+import { readdir, readFile, stat } from "fs/promises";
 import { join, extname } from "path";
 var PAGE_EXTENSIONS = /* @__PURE__ */ new Set([".js", ".jsx", ".ts", ".tsx"]);
 var PAGE_BASENAMES = /* @__PURE__ */ new Set(["page"]);
@@ -13,6 +13,13 @@ function isPageFile(filename) {
   const basename = filename.slice(0, -ext.length);
   return PAGE_EXTENSIONS.has(ext) && PAGE_BASENAMES.has(basename);
 }
+function isPagesRouterFile(filename) {
+  const ext = extname(filename);
+  if (!PAGE_EXTENSIONS.has(ext)) return false;
+  const basename = filename.slice(0, -ext.length);
+  if (basename.startsWith("_")) return false;
+  return true;
+}
 function shouldSkipDir(name) {
   if (name.startsWith("_")) return true;
   if (name.startsWith("@")) return true;
@@ -82,24 +89,182 @@ async function scanDir(dirPath, urlSegments, params) {
   }
   return routes;
 }
+async function scanPagesDir(dirPath, urlSegments, params) {
+  const routes = [];
+  let entries;
+  try {
+    entries = await readdir(dirPath);
+  } catch {
+    return routes;
+  }
+  for (const entry of entries) {
+    const entryPath = join(dirPath, entry);
+    const entryStat = await stat(entryPath).catch(() => null);
+    if (!entryStat) continue;
+    if (entryStat.isFile() && isPagesRouterFile(entry)) {
+      const ext = extname(entry);
+      const basename = entry.slice(0, -ext.length);
+      let fileUrlSegments;
+      let fileParams;
+      if (basename === "index") {
+        fileUrlSegments = urlSegments;
+        fileParams = params;
+      } else {
+        const param = parseDynamicSegment(basename);
+        const urlPart = segmentToUrlPart(basename);
+        fileUrlSegments = [...urlSegments, urlPart];
+        fileParams = param ? [...params, param] : params;
+      }
+      const urlPath = "/" + fileUrlSegments.join("/");
+      routes.push({
+        urlPath: urlPath || "/",
+        filePath: entryPath,
+        params: [...fileParams],
+        isDynamic: fileParams.length > 0
+      });
+    }
+    if (entryStat.isDirectory()) {
+      if (entry === "api") continue;
+      if (entry.startsWith("_")) continue;
+      if (entry === "node_modules" || entry === ".next") continue;
+      const param = parseDynamicSegment(entry);
+      const urlPart = segmentToUrlPart(entry);
+      const newParams = param ? [...params, param] : params;
+      const nested = await scanPagesDir(entryPath, [...urlSegments, urlPart], newParams);
+      routes.push(...nested);
+    }
+  }
+  return routes;
+}
+function parseReactRouterParam(segment) {
+  if (!segment.startsWith(":")) return null;
+  return { name: segment.slice(1), isCatchAll: false, isOptional: false };
+}
+async function findFiles(dir, extensions) {
+  const results = [];
+  let entries;
+  try {
+    entries = await readdir(dir);
+  } catch {
+    return results;
+  }
+  for (const entry of entries) {
+    const full = join(dir, entry);
+    const s = await stat(full).catch(() => null);
+    if (!s) continue;
+    if (s.isDirectory()) {
+      if (entry === "node_modules" || entry === ".git" || entry === "dist" || entry === "build") continue;
+      results.push(...await findFiles(full, extensions));
+    } else if (extensions.has(extname(entry))) {
+      results.push(full);
+    }
+  }
+  return results;
+}
+async function hasReactRouter(projectRoot) {
+  try {
+    const pkg = JSON.parse(await readFile(join(projectRoot, "package.json"), "utf-8"));
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    return "react-router-dom" in deps || "react-router" in deps;
+  } catch {
+    return false;
+  }
+}
+function extractRoutePathsFromSource(source) {
+  const paths = [];
+  const seen = /* @__PURE__ */ new Set();
+  const jsxPattern = /<Route\s[^>]*?path\s*=\s*["']([^"']+)["']/g;
+  let match;
+  while ((match = jsxPattern.exec(source)) !== null) {
+    const p = match[1];
+    if (p !== "*" && !seen.has(p)) {
+      seen.add(p);
+      paths.push(p);
+    }
+  }
+  const objPattern = /path\s*:\s*["']([^"']+)["']/g;
+  while ((match = objPattern.exec(source)) !== null) {
+    const p = match[1];
+    if (p !== "*" && !seen.has(p)) {
+      seen.add(p);
+      paths.push(p);
+    }
+  }
+  return paths;
+}
+async function scanReactRouter(projectRoot) {
+  const routes = [];
+  const seen = /* @__PURE__ */ new Set();
+  const srcDir = join(projectRoot, "src");
+  const scanRoot = await stat(srcDir).then(() => srcDir).catch(() => projectRoot);
+  const files = await findFiles(scanRoot, PAGE_EXTENSIONS);
+  for (const filePath of files) {
+    let source;
+    try {
+      source = await readFile(filePath, "utf-8");
+    } catch {
+      continue;
+    }
+    if (!source.includes("react-router-dom") && !source.includes("react-router")) {
+      continue;
+    }
+    if (!source.includes("Route") && !source.includes("createBrowserRouter") && !source.includes("createRoutesFromElements") && !source.match(/path\s*:\s*["']/)) {
+      continue;
+    }
+    const extractedPaths = extractRoutePathsFromSource(source);
+    for (const routePath of extractedPaths) {
+      if (seen.has(routePath)) continue;
+      seen.add(routePath);
+      const segments = routePath.split("/").filter(Boolean);
+      const params = [];
+      for (const seg of segments) {
+        const param = parseReactRouterParam(seg);
+        if (param) params.push(param);
+      }
+      const urlPath = routePath.startsWith("/") ? routePath : "/" + routePath;
+      routes.push({
+        urlPath,
+        filePath,
+        params,
+        isDynamic: params.length > 0
+      });
+    }
+  }
+  return routes;
+}
 async function scanRoutes(options) {
-  const { appDir } = options;
+  const { appDir, routerType = "auto" } = options;
+  if (routerType === "react-router") {
+    const routes2 = await scanReactRouter(appDir);
+    routes2.sort((a, b) => a.urlPath.localeCompare(b.urlPath));
+    return routes2;
+  }
+  if (routerType === "auto") {
+    const isReactRouter = await hasReactRouter(appDir);
+    if (isReactRouter) {
+      const routes2 = await scanReactRouter(appDir);
+      routes2.sort((a, b) => a.urlPath.localeCompare(b.urlPath));
+      return routes2;
+    }
+  }
   const dirStat = await stat(appDir).catch(() => null);
   if (!dirStat || !dirStat.isDirectory()) {
     throw new Error(`App directory not found: ${appDir}`);
   }
-  const routes = await scanDir(appDir, [], []);
+  const dirName = appDir.replace(/\/$/, "").split("/").pop();
+  const isPagesRouter = routerType === "pages-router" || routerType === "auto" && dirName === "pages";
+  const routes = isPagesRouter ? await scanPagesDir(appDir, [], []) : await scanDir(appDir, [], []);
   routes.sort((a, b) => a.urlPath.localeCompare(b.urlPath));
   return routes;
 }
 
 // ../core/src/analysis/code-analyzer.ts
-import { readFile as readFile2 } from "fs/promises";
+import { readFile as readFile3 } from "fs/promises";
 import { join as join3, dirname, resolve } from "path";
 import { existsSync as existsSync2 } from "fs";
 
 // ../core/src/analysis/auth-detector.ts
-import { readFile } from "fs/promises";
+import { readFile as readFile2 } from "fs/promises";
 import { join as join2 } from "path";
 import { existsSync } from "fs";
 var MIDDLEWARE_FILES = ["middleware.ts", "middleware.js", "middleware.tsx", "middleware.jsx"];
@@ -147,7 +312,7 @@ async function detectAuth(projectRoot, allSources) {
     const middlewarePath = join2(projectRoot, filename);
     if (existsSync(middlewarePath)) {
       try {
-        const source = await readFile(middlewarePath, "utf-8");
+        const source = await readFile2(middlewarePath, "utf-8");
         const cookies = extractCookieNames(source);
         if (cookies.length > 0) {
           config.hasAuth = true;
@@ -170,6 +335,84 @@ async function detectAuth(projectRoot, allSources) {
   return config;
 }
 
+// ../core/src/analysis/endpoint-extractor.ts
+function extractBaseUrl(source) {
+  const envFallback = source.match(
+    /process\.env\.\w+\s*\|\|\s*['"]([^'"]+)['"]/
+  );
+  if (envFallback) return envFallback[1];
+  const baseUrlProp = source.match(/baseURL\s*:\s*['"]([^'"]+)['"]/);
+  if (baseUrlProp) return baseUrlProp[1];
+  const constAssign = source.match(
+    /(?:API_BASE_URL|API_URL|BASE_URL)\s*=\s*['"]([^'"]+)['"]/
+  );
+  if (constAssign) return constAssign[1];
+  return null;
+}
+function extractEndpoints(apiClientSource) {
+  const endpoints = [];
+  const seen = /* @__PURE__ */ new Set();
+  const lines = apiClientSource.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const methodCallRegex = /\.\s*(get|post|put|delete|patch)\s*\(\s*(?:['"`])([^'"`$]*)/gi;
+    let match;
+    while ((match = methodCallRegex.exec(line)) !== null) {
+      const method = match[1].toUpperCase();
+      let path = match[2];
+      path = path.replace(/['"`)]+$/, "").trim();
+      if (!path || path.length === 0) continue;
+      const key = `${method} ${path}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const endpoint = { method, path };
+      const fnName = findFunctionName(lines, i);
+      if (fnName) endpoint.functionName = fnName;
+      endpoints.push(endpoint);
+    }
+    const fetchRegex = /\bfetch\s*\(\s*['"`]([^'"`$]+)/g;
+    while ((match = fetchRegex.exec(line)) !== null) {
+      const path = match[1].replace(/['"`)]+$/, "").trim();
+      if (!path || path.length === 0) continue;
+      const key = `GET ${path}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const endpoint = { method: "GET", path };
+      const fnName = findFunctionName(lines, i);
+      if (fnName) endpoint.functionName = fnName;
+      endpoints.push(endpoint);
+    }
+    const templateRegex = /\.\s*(get|post|put|delete|patch)\s*\(\s*`([^`]*?)\$\{/gi;
+    while ((match = templateRegex.exec(line)) !== null) {
+      const method = match[1].toUpperCase();
+      const path = match[2].trim();
+      if (!path || path.length === 0) continue;
+      const key = `${method} ${path}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const endpoint = { method, path };
+      const fnName = findFunctionName(lines, i);
+      if (fnName) endpoint.functionName = fnName;
+      endpoints.push(endpoint);
+    }
+  }
+  return endpoints;
+}
+function findFunctionName(lines, lineIndex) {
+  for (let i = lineIndex; i >= Math.max(0, lineIndex - 3); i--) {
+    const line = lines[i];
+    const constArrow = line.match(/(?:export\s+)?(?:const|let|var)\s+(\w+)\s*=\s*(?:\([^)]*\)\s*=>|\([^)]*\)\s*:\s*\w[^=]*=>)/);
+    if (constArrow) return constArrow[1];
+    const propMatch = line.match(/(\w+)\s*:\s*(?:\([^)]*\)\s*=>|function\b)/);
+    if (propMatch) return propMatch[1];
+    const fnMatch = line.match(/(?:async\s+)?function\s+(\w+)/);
+    if (fnMatch) return fnMatch[1];
+    const methodMatch = line.match(/^\s*(\w+)\s*\([^)]*\)\s*\{/);
+    if (methodMatch) return methodMatch[1];
+  }
+  return void 0;
+}
+
 // ../core/src/analysis/code-analyzer.ts
 var DEFAULT_MAX_TOKENS = 8e3;
 var CHARS_PER_TOKEN = 4;
@@ -198,7 +441,7 @@ async function readPathAliases(projectRoot) {
     const configPath = join3(projectRoot, filename);
     if (!existsSync2(configPath)) continue;
     try {
-      const content = await readFile2(configPath, "utf-8");
+      const content = await readFile3(configPath, "utf-8");
       const stripped = content.replace(
         /"(?:[^"\\]|\\.)*"|\/\/.*$|\/\*[\s\S]*?\*\//gm,
         (match) => match.startsWith('"') ? match : ""
@@ -242,7 +485,7 @@ async function traceImports(filePath, projectRoot, aliases, maxDepth, visited =
   visited.add(filePath);
   let source;
   try {
-    source = await readFile2(filePath, "utf-8");
+    source = await readFile3(filePath, "utf-8");
   } catch {
     return results;
   }
@@ -289,6 +532,58 @@ function estimateTokens(text) {
 function hasApiCalls(source) {
   return /\bfetch\s*\(/.test(source) || /\baxios\b/.test(source) || /\buseQuery\b/.test(source) || /\buseMutation\b/.test(source) || /\bapiRequest\b/.test(source) || /\bgetServerSideProps\b/.test(source) || /\bgetStaticProps\b/.test(source) || /API_BASE_URL/.test(source) || /['"]\/api\//.test(source) || /from\s+['"].*api[-_]?client.*['"]/.test(source) || /from\s+['"].*\/api['"]/.test(source) || /from\s+['"].*\/services\//.test(source);
 }
+var API_CLIENT_CANDIDATES = [
+  "lib/api.ts",
+  "lib/api.tsx",
+  "lib/api.js",
+  "lib/api.jsx",
+  "lib/api-client.ts",
+  "lib/api-client.tsx",
+  "lib/api-client.js",
+  "lib/api-client.jsx",
+  "src/lib/api.ts",
+  "src/lib/api.tsx",
+  "src/lib/api.js",
+  "src/lib/api.jsx",
+  "src/lib/api-client.ts",
+  "src/lib/api-client.tsx",
+  "src/lib/api-client.js",
+  "src/lib/api-client.jsx",
+  "services/api.ts",
+  "services/api.js",
+  "services/api.tsx",
+  "services/api.jsx",
+  "src/services/api.ts",
+  "src/services/api.js",
+  "src/services/api.tsx",
+  "src/services/api.jsx",
+  "utils/api.ts",
+  "utils/api.js",
+  "utils/api.tsx",
+  "utils/api.jsx",
+  "src/utils/api.ts",
+  "src/utils/api.js",
+  "src/utils/api.tsx",
+  "src/utils/api.jsx"
+];
+function hasApiClientPatterns(source) {
+  return /\.(get|post|put|delete|patch)\s*\(/.test(source) || /\bfetch\s*\(/.test(source) || /\baxios\b/.test(source) || /\bbaseURL\b/.test(source) || /\bAPI_URL\b/.test(source);
+}
+async function findApiClientEagerly(projectRoot, alreadyIncluded) {
+  for (const candidate of API_CLIENT_CANDIDATES) {
+    const fullPath = join3(projectRoot, candidate);
+    if (alreadyIncluded.has(fullPath)) continue;
+    if (!existsSync2(fullPath)) continue;
+    try {
+      const content = await readFile3(fullPath, "utf-8");
+      if (hasApiClientPatterns(content)) {
+        return { path: fullPath, content };
+      }
+    } catch {
+    }
+  }
+  return null;
+}
 async function analyzePage(route, options) {
   const { projectRoot, maxTokensPerPage = DEFAULT_MAX_TOKENS } = options;
   const maxChars = maxTokensPerPage * CHARS_PER_TOKEN;
@@ -308,6 +603,39 @@ ${content}
     }
     sourceContext += section;
   }
+  const alreadyIncluded = new Set(tracedFiles.keys());
+  let apiClientPath = null;
+  let apiClientSource = null;
+  const eagerResult = await findApiClientEagerly(projectRoot, alreadyIncluded);
+  if (eagerResult) {
+    apiClientPath = eagerResult.path;
+    apiClientSource = eagerResult.content;
+    const relativePath = eagerResult.path.startsWith(projectRoot) ? eagerResult.path.slice(projectRoot.length + 1) : eagerResult.path;
+    const section = `
+// === ${relativePath} ===
+${eagerResult.content}
+`;
+    if (sourceContext.length + section.length <= maxChars) {
+      sourceContext += section;
+    }
+    resolvedImports.push(eagerResult.path);
+    allSources.push(eagerResult.content);
+  } else {
+    for (const [filePath, content] of tracedFiles) {
+      if (filePath === route.filePath) continue;
+      if (hasApiClientPatterns(content)) {
+        apiClientPath = filePath;
+        apiClientSource = content;
+        break;
+      }
+    }
+  }
+  let extractedEndpointsList = [];
+  let apiBaseUrl = null;
+  if (apiClientSource) {
+    extractedEndpointsList = extractEndpoints(apiClientSource);
+    apiBaseUrl = extractBaseUrl(apiClientSource);
+  }
   const authConfig = await detectAuth(projectRoot, allSources);
   const combinedSource = allSources.join("\n");
   const hasApi = hasApiCalls(sourceContext) || hasApiCalls(combinedSource);
@@ -325,13 +653,13 @@ ${content}
     unresolvedImports: [...new Set(unresolvedImports)],
     authConfig,
     hasApiDependencies: hasApi,
-    estimatedTokens: estimateTokens(sourceContext)
+    estimatedTokens: estimateTokens(sourceContext),
+    apiClientPath,
+    extractedEndpoints: extractedEndpointsList,
+    apiBaseUrl
   };
 }
 
-// ../core/src/mock/types.ts
-var ALL_STATE_VARIANTS = ["success", "empty", "error", "loading"];
-
 // ../core/src/mock/llm-client.ts
 import Anthropic from "@anthropic-ai/sdk";
 var LlmClient = class {
@@ -359,20 +687,18 @@ var LlmClient = class {
 };
 
 // ../core/src/mock/prompt-templates.ts
-var SYSTEM_PROMPT = `You are a mock data generator for a UI pre-rendering tool called VibeCanvas.
-Your job is to analyze a Next.js page's source code and generate realistic mock API responses that will make the page render correctly.
+var SYSTEM_PROMPT = `You are a mock data generator for a UI pre-rendering tool called Code to Design.
+Your job is to analyze a Next.js page's source code and generate realistic mock API responses that will make the page render correctly in different visual states.
 
 Rules:
 1. Output ONLY valid JSON \u2014 no markdown, no code fences, no explanation.
-2. Mock data must match the TypeScript interfaces found in the source code.
+2. Mock data must match the TypeScript interfaces and API response shapes found in the source code.
 3. Generate contextually appropriate data (e.g., real company names for a finance app, realistic usernames for a social app).
-4. For each API endpoint, generate mock responses for these state variants:
-   - "success": realistic data with multiple items
-   - "empty": empty collections, zero counts
-   - "error": API returns HTTP 500 with error message
-   - "loading": same as success but with a 3000ms delay
-5. Include auth mock data if the page requires authentication.
-6. For dynamic route parameters, generate a realistic sample value.`;
+4. Generate MULTIPLE items in success data (at least 3-5 items for list endpoints).
+5. If actual API endpoint URLs are provided, use those EXACT paths in your response.
+6. Analyze the page's conditional rendering (if/else, ternary, switch, state variables) to identify meaningful visual states \u2014 not just generic success/error.
+7. Include auth mock data if the page requires authentication.
+8. For dynamic route parameters, generate a realistic sample value.`;
 function buildUserPrompt(analysis) {
   const parts = [];
   parts.push(`## Page Route: ${analysis.route.urlPath}`);
@@ -380,6 +706,16 @@ function buildUserPrompt(analysis) {
   if (analysis.route.isDynamic) {
     parts.push(`## Dynamic Parameters: ${analysis.route.params.map((p) => p.name).join(", ")}`);
   }
+  if (analysis.extractedEndpoints.length > 0) {
+    parts.push("## Actual API Endpoints (use these EXACT paths)");
+    for (const ep of analysis.extractedEndpoints) {
+      const name = ep.functionName ? ` (${ep.functionName})` : "";
+      parts.push(`- ${ep.method} ${ep.path}${name}`);
+    }
+    if (analysis.apiBaseUrl) {
+      parts.push(`- Base URL: ${analysis.apiBaseUrl}`);
+    }
+  }
   parts.push("## Source Code Context");
   parts.push(analysis.sourceContext);
   if (analysis.authConfig.hasAuth) {
@@ -398,29 +734,51 @@ function buildUserPrompt(analysis) {
   parts.push(`
 ## Required Output Format
 
+Analyze the page code carefully. Look at:
+- Conditional rendering (if/else, ternary operators, switch statements)
+- State variables that control what is displayed
+- URL parameters or search params that affect the view
+- Authentication state checks
+- Data loading patterns
+
+Then generate mock data for **page-specific visual states** \u2014 not just generic success/error. For example:
+- A dashboard with tabs might have states: "overview_tab", "readings_tab", "settings_tab"
+- A page checking auth might have: "authenticated_with_data", "authenticated_empty", "unauthenticated"
+- A results page might have: "results_found", "no_results", "invalid_id"
+
+Always include at least these base states:
+- One state with realistic populated data (the "happy path")
+- One state with empty/no data
+- One error state (API returns 500)
+
 Return a JSON object with this exact structure:
 {
-  "routeParams": { "paramName": "sampleValue" },  // only if dynamic route
-  "apiEndpoints": [
+  "routeParams": { "paramName": "sampleValue" },
+  "stateVariants": [
     {
-      "urlPattern": "/api/endpoint",  // the URL path pattern to intercept
-      "method": "GET",                 // HTTP method
-      "states": {
-        "success": { "status": 200, "body": { ... } },
-        "empty": { "status": 200, "body": { ... } },
-        "error": { "status": 500, "body": { "detail": "Internal server error" } },
-        "loading": { "status": 200, "body": { ... }, "delay": 3000 }
+      "name": "descriptive_state_name",
+      "description": "What this state represents visually",
+      "apiMocks": {
+        "METHOD /endpoint/path": {
+          "status": 200,
+          "body": { ... },
+          "delay": 0
+        }
       }
     }
   ],
-  "authMock": {                        // only if auth is required
+  "authMock": {
     "cookies": { "cookie_name": "mock_value" },
     "authCheckEndpoint": "/auth/me",
     "authCheckResponse": { "status": 200, "body": { ... } }
   }
 }
 
-Generate ONLY the JSON. No explanation, no markdown fences.`);
+IMPORTANT:
+- Use the ACTUAL endpoint paths from the "Actual API Endpoints" section above if provided.
+- Each state variant should produce a VISUALLY DIFFERENT page render.
+- Generate at least 3-5 items in list/array responses for the happy path state.
+- Generate ONLY the JSON. No explanation, no markdown fences.`);
   return parts.join("\n\n");
 }
 
@@ -444,7 +802,41 @@ function parseLlmJson(content) {
     return null;
   }
 }
-function convertToMockConfigs(output, analysis, variants) {
+function isV2Output(output) {
+  return "stateVariants" in output && Array.isArray(output.stateVariants);
+}
+function convertV2ToMockConfigs(output, analysis) {
+  if (!output.stateVariants || output.stateVariants.length === 0) {
+    return [];
+  }
+  return output.stateVariants.map((variant) => {
+    const apiMocks = {};
+    for (const [pattern, mock] of Object.entries(variant.apiMocks)) {
+      apiMocks[pattern] = {
+        status: mock.status,
+        body: mock.body,
+        delay: mock.delay
+      };
+    }
+    let authMock = null;
+    if (analysis.authConfig.hasAuth && output.authMock) {
+      authMock = {
+        cookies: output.authMock.cookies,
+        authCheckResponse: {
+          status: output.authMock.authCheckResponse.status,
+          body: output.authMock.authCheckResponse.body
+        }
+      };
+    }
+    return {
+      stateName: variant.name,
+      apiMocks,
+      authMock,
+      routeParams: output.routeParams
+    };
+  });
+}
+function convertV1ToMockConfigs(output, analysis, variants) {
   const configs = [];
   for (const variant of variants) {
     const apiMocks = {};
@@ -494,7 +886,7 @@ function generateFallbackConfigs(analysis, variants) {
   }));
 }
 async function generateMocks(analysis, options) {
-  const variants = options.variants ?? ALL_STATE_VARIANTS;
+  const variants = options.variants ?? ["success", "empty", "error", "loading"];
   if (!analysis.hasApiDependencies) {
     return {
       configs: generateFallbackConfigs(analysis, variants),
@@ -513,7 +905,15 @@ async function generateMocks(analysis, options) {
         tokenUsage: { input: response.inputTokens, output: response.outputTokens }
       };
     }
-    const configs = convertToMockConfigs(parsed, analysis, variants);
+    let configs;
+    if (isV2Output(parsed)) {
+      configs = convertV2ToMockConfigs(parsed, analysis);
+    } else {
+      configs = convertV1ToMockConfigs(parsed, analysis, variants);
+    }
+    if (configs.length === 0) {
+      configs = generateFallbackConfigs(analysis, variants);
+    }
     return {
       configs,
       tokenUsage: { input: response.inputTokens, output: response.outputTokens }
@@ -529,8 +929,8 @@ async function generateMocks(analysis, options) {
 
 // ../core/src/render/pre-renderer.ts
 import { chromium } from "playwright";
-import { mkdir, writeFile } from "fs/promises";
-import { join as join5 } from "path";
+import { mkdir as mkdir2, writeFile as writeFile2 } from "fs/promises";
+import { join as join6 } from "path";
 
 // ../core/src/render/dev-server.ts
 import { spawn } from "child_process";
@@ -633,6 +1033,199 @@ ${stderr.slice(-500)}`));
   };
 }
 
+// ../core/src/render/style-inliner.ts
+async function inlineStylesAndCleanup(page) {
+  await page.evaluate(`(() => {
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    links.forEach(link => {
+      try {
+        const href = link.getAttribute('href');
+        if (!href) return;
+        for (const sheet of document.styleSheets) {
+          if (sheet.href && sheet.href.includes(href.replace(/^\\//, ''))) {
+            const rules = Array.from(sheet.cssRules).map(r => r.cssText).join('\\n');
+            const style = document.createElement('style');
+            style.textContent = rules;
+            link.parentNode.replaceChild(style, link);
+            break;
+          }
+        }
+      } catch (e) {}
+    });
+    document.querySelectorAll('script').forEach(s => s.remove());
+  })()`);
+}
+
+// ../core/src/render/interaction-capturer.ts
+import { mkdir, writeFile } from "fs/promises";
+import { join as join5 } from "path";
+function slugifyRoute(urlPath) {
+  if (urlPath === "/") return "index";
+  return urlPath.replace(/^\//, "").replace(/\//g, "-").replace(/:/g, "_").replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+async function findClickableElements(page, maxElements) {
+  return page.evaluate(`((max) => {
+    const selectors = [
+      '[role="tab"]:not([aria-selected="true"]):not([aria-disabled="true"])',
+      '[role="button"]:not([aria-disabled="true"]):not([disabled])',
+      'button:not([disabled]):not([type="submit"])',
+      '[data-tab]:not(.active):not(.selected)',
+      '.tab:not(.active):not(.selected)',
+      'a[href="#"]:not(.active)',
+      'a[href^="#"]:not([href="#"]):not(.active)',
+    ];
+
+    const seen = new Set();
+    const results = [];
+
+    for (const sel of selectors) {
+      if (results.length >= max) break;
+      const elements = document.querySelectorAll(sel);
+
+      for (const el of elements) {
+        if (results.length >= max) break;
+        if (seen.has(el)) continue;
+        seen.add(el);
+
+        const rect = el.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) continue;
+        const style = window.getComputedStyle(el);
+        if (style.display === 'none' || style.visibility === 'hidden') continue;
+
+        if (el.tagName === 'A') {
+          const href = el.getAttribute('href') || '';
+          if (href.startsWith('http') || href.startsWith('//')) continue;
+        }
+
+        if (el.tagName === 'BUTTON' && el.type === 'submit') continue;
+
+        const text = (el.textContent || '').trim().slice(0, 50);
+        const ariaLabel = el.getAttribute('aria-label');
+        const role = el.getAttribute('role');
+        const tag = el.tagName.toLowerCase();
+
+        let desc = '';
+        if (role === 'tab') desc = 'Tab: ' + (ariaLabel || text || 'unnamed');
+        else if (role === 'button') desc = 'Button: ' + (ariaLabel || text || 'unnamed');
+        else if (tag === 'button') desc = 'Button: ' + (ariaLabel || text || 'unnamed');
+        else desc = 'Clickable: ' + (ariaLabel || text || 'unnamed');
+
+        let uniqueSelector = '';
+        const id = el.getAttribute('id');
+        if (id) {
+          uniqueSelector = '#' + CSS.escape(id);
+        } else {
+          const dataTestId = el.getAttribute('data-testid');
+          if (dataTestId) {
+            uniqueSelector = '[data-testid="' + CSS.escape(dataTestId) + '"]';
+          } else {
+            const allMatching = document.querySelectorAll(sel);
+            const idx = Array.from(allMatching).indexOf(el);
+            uniqueSelector = '__INDEX__' + sel + '__' + idx;
+          }
+        }
+
+        results.push({ selector: uniqueSelector, description: desc });
+      }
+    }
+
+    return results;
+  })(${maxElements})`);
+}
+async function captureInteractions(page, pageUrl, route, stateName, outputDir, options) {
+  const maxInteractions = options?.maxInteractions ?? 5;
+  const settleTime = options?.settleTime ?? 500;
+  const routeSlug = slugifyRoute(route.urlPath);
+  const stateDir = join5(outputDir, "renders", routeSlug);
+  await mkdir(stateDir, { recursive: true });
+  const clickables = await findClickableElements(page, maxInteractions);
+  if (clickables.length === 0) return [];
+  const results = [];
+  for (let i = 0; i < clickables.length; i++) {
+    const clickable = clickables[i];
+    const htmlRelPath = join5("renders", routeSlug, `${stateName}_interaction_${i}.html`);
+    const htmlAbsPath = join5(outputDir, htmlRelPath);
+    try {
+      let clicked = false;
+      if (clickable.selector.startsWith("__INDEX__")) {
+        const parts = clickable.selector.slice("__INDEX__".length);
+        const lastUnderscoreIdx = parts.lastIndexOf("__");
+        const sel = parts.slice(0, lastUnderscoreIdx);
+        const idx = parseInt(parts.slice(lastUnderscoreIdx + 2), 10);
+        const elements = await page.$$(sel);
+        if (elements[idx]) {
+          await elements[idx].click();
+          clicked = true;
+        }
+      } else {
+        const element = await page.$(clickable.selector);
+        if (element) {
+          await element.click();
+          clicked = true;
+        }
+      }
+      if (!clicked) {
+        results.push({
+          elementDescription: clickable.description,
+          htmlPath: htmlRelPath,
+          success: false,
+          error: "Element not found on re-query"
+        });
+        continue;
+      }
+      await page.waitForTimeout(settleTime);
+      await inlineStylesAndCleanup(page);
+      const html = await page.content();
+      await writeFile(htmlAbsPath, html, "utf-8");
+      results.push({
+        elementDescription: clickable.description,
+        htmlPath: htmlRelPath,
+        success: true
+      });
+    } catch (err) {
+      results.push({
+        elementDescription: clickable.description,
+        htmlPath: htmlRelPath,
+        success: false,
+        error: err instanceof Error ? err.message : String(err)
+      });
+    }
+    try {
+      await page.goto(pageUrl, { waitUntil: "networkidle", timeout: 1e4 });
+      await page.waitForTimeout(settleTime);
+    } catch {
+      break;
+    }
+  }
+  return results;
+}
+
+// ../core/src/render/url-matcher.ts
+function matchMockUrl(requestUrl, requestMethod, mockPattern) {
+  const [mockMethod, ...pathParts] = mockPattern.split(" ");
+  if (requestMethod !== mockMethod) return false;
+  let mockPath = pathParts.join(" ");
+  mockPath = mockPath.replace(/\/+$/, "");
+  const urlPath = new URL(requestUrl).pathname.replace(/\/+$/, "");
+  const regexStr = mockPath.replace(/\{[^}]+\}/g, "[^/]+").replace(/\*/g, "[^/]+").replace(/:[a-zA-Z_]+/g, "[^/]+");
+  const fullRegex = new RegExp("^" + regexStr.replace(/\//g, "\\/") + "$");
+  if (fullRegex.test(urlPath)) return true;
+  const mockSegments = mockPath.split("/").filter(Boolean);
+  const urlSegments = urlPath.split("/").filter(Boolean);
+  if (mockSegments.length >= 1 && urlSegments.length >= mockSegments.length) {
+    const urlSuffix = urlSegments.slice(-mockSegments.length);
+    const match = mockSegments.every((seg, i) => {
+      if (seg.startsWith("{") || seg.startsWith(":") || seg === "*") return true;
+      return seg === urlSuffix[i];
+    });
+    if (match) return true;
+  }
+  return false;
+}
+function isApiUrl(url) {
+  return url.includes("/api/") || url.includes(":8000") || url.includes(":3000/api");
+}
+
 // ../core/src/render/pre-renderer.ts
 var DEFAULT_CONCURRENCY = 3;
 var DEFAULT_PAGE_TIMEOUT = 15e3;
@@ -650,7 +1243,7 @@ function buildUrlPath(route, mockConfig) {
   }
   return path;
 }
-function slugifyRoute(urlPath) {
+function slugifyRoute2(urlPath) {
   if (urlPath === "/") return "index";
   return urlPath.replace(/^\//, "").replace(/\//g, "-").replace(/:/g, "_").replace(/[^a-zA-Z0-9_-]/g, "_");
 }
@@ -688,12 +1281,7 @@ async function setupMockInterception(page, devServerUrl, mockConfig, authConfig)
       });
     }
     for (const [pattern, mock] of Object.entries(mockConfig.apiMocks)) {
-      const [mockMethod, ...pathParts] = pattern.split(" ");
-      let mockPath = pathParts.join(" ");
-      mockPath = mockPath.replace(/\{[^}]+\}/g, "[^/]+");
-      mockPath = mockPath.replace(/\*/g, "[^/]+");
-      const pathRegex = new RegExp(mockPath.replace(/\//g, "\\/"));
-      if (method === mockMethod && pathRegex.test(url)) {
+      if (matchMockUrl(url, method, pattern)) {
         if (mock.delay) await new Promise((r) => setTimeout(r, mock.delay));
         return route.fulfill({
           status: mock.status,
@@ -702,19 +1290,26 @@ async function setupMockInterception(page, devServerUrl, mockConfig, authConfig)
         });
       }
     }
+    if (isApiUrl(url)) {
+      return route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ data: [], message: "ok" })
+      });
+    }
     return route.continue();
   });
 }
 async function renderPage(context, devServerUrl, task, outputDir, options, viewport) {
   const { route, mockConfig, authConfig } = task;
-  const routeSlug = slugifyRoute(route.urlPath);
-  const stateDir = join5(outputDir, "renders", routeSlug);
-  await mkdir(stateDir, { recursive: true });
+  const routeSlug = slugifyRoute2(route.urlPath);
+  const stateDir = join6(outputDir, "renders", routeSlug);
+  await mkdir2(stateDir, { recursive: true });
   const filePrefix = viewport ? `${mockConfig.stateName}_${viewport.name}` : mockConfig.stateName;
-  const htmlRelPath = join5("renders", routeSlug, `${filePrefix}.html`);
-  const pngRelPath = join5("renders", routeSlug, `${filePrefix}.png`);
-  const htmlAbsPath = join5(outputDir, htmlRelPath);
-  const pngAbsPath = join5(outputDir, pngRelPath);
+  const htmlRelPath = join6("renders", routeSlug, `${filePrefix}.html`);
+  const pngRelPath = join6("renders", routeSlug, `${filePrefix}.png`);
+  const htmlAbsPath = join6(outputDir, htmlRelPath);
+  const pngAbsPath = join6(outputDir, pngRelPath);
   const page = await context.newPage();
   if (viewport) {
     await page.setViewportSize({ width: viewport.width, height: viewport.height });
@@ -728,42 +1323,47 @@ async function renderPage(context, devServerUrl, task, outputDir, options, viewp
       timeout: options.pageTimeout
     });
     await page.waitForTimeout(options.settleTime);
-    await page.evaluate(`(() => {
-      const links = document.querySelectorAll('link[rel="stylesheet"]');
-      links.forEach(link => {
-        try {
-          const href = link.getAttribute('href');
-          if (!href) return;
-          for (const sheet of document.styleSheets) {
-            if (sheet.href && sheet.href.includes(href.replace(/^\\//, ''))) {
-              const rules = Array.from(sheet.cssRules).map(r => r.cssText).join('\\n');
-              const style = document.createElement('style');
-              style.textContent = rules;
-              link.parentNode.replaceChild(style, link);
-              break;
-            }
-          }
-        } catch (e) {}
-      });
-      document.querySelectorAll('script').forEach(s => s.remove());
-    })()`);
+    await inlineStylesAndCleanup(page);
     const html = await page.content();
-    await writeFile(htmlAbsPath, html, "utf-8");
+    await writeFile2(htmlAbsPath, html, "utf-8");
     await page.screenshot({ path: pngAbsPath, fullPage: true });
+    const interactionStates = ["success", "empty"];
+    const shouldCapture = options.captureInteractionStates !== false && interactionStates.includes(mockConfig.stateName);
+    let interactions;
+    if (shouldCapture) {
+      await page.goto(fullUrl, { waitUntil: "networkidle", timeout: options.pageTimeout });
+      await page.waitForTimeout(options.settleTime);
+      const interactionResults = await captureInteractions(
+        page,
+        fullUrl,
+        route,
+        mockConfig.stateName,
+        outputDir,
+        { maxInteractions: options.maxInteractions, settleTime: 500 }
+      );
+      const successful = interactionResults.filter((r) => r.success);
+      if (successful.length > 0) {
+        interactions = successful.map((r) => ({
+          description: r.elementDescription,
+          htmlPath: r.htmlPath
+        }));
+      }
+    }
     return {
       route,
       stateName: mockConfig.stateName,
       htmlPath: htmlRelPath,
       screenshotPath: pngRelPath,
       success: true,
-      viewportName: viewport?.name
+      viewportName: viewport?.name,
+      interactions
     };
   } catch (err) {
     const errorMsg = err instanceof Error ? err.message : String(err);
     const errorHtml = `<!DOCTYPE html><html><body style="display:flex;align-items:center;justify-content:center;height:100vh;font-family:sans-serif;color:#666;">
       <div style="text-align:center"><h2>Render Failed</h2><p>${route.urlPath} [${mockConfig.stateName}]</p><pre style="color:#c00">${errorMsg}</pre></div>
     </body></html>`;
-    await writeFile(htmlAbsPath, errorHtml, "utf-8").catch(() => {
+    await writeFile2(htmlAbsPath, errorHtml, "utf-8").catch(() => {
     });
     return {
       route,
@@ -820,7 +1420,8 @@ function buildManifest(results, projectName, viewports) {
       status: result.success ? "ok" : "error",
       error: result.error,
       viewport: result.viewportName,
-      viewportWidth: result.viewportName ? viewportWidthMap.get(result.viewportName) : void 0
+      viewportWidth: result.viewportName ? viewportWidthMap.get(result.viewportName) : void 0,
+      interactions: result.interactions
     });
   }
   return {
@@ -832,16 +1433,18 @@ function buildManifest(results, projectName, viewports) {
 async function preRenderPages(tasks, options) {
   const {
     projectRoot,
-    outputDir = join5(projectRoot, ".c2d"),
+    outputDir = join6(projectRoot, ".c2d"),
     concurrency = DEFAULT_CONCURRENCY,
     pageTimeout = DEFAULT_PAGE_TIMEOUT,
     settleTime = DEFAULT_SETTLE_TIME,
     viewportWidth = DEFAULT_VIEWPORT.width,
-    viewportHeight = DEFAULT_VIEWPORT.height
+    viewportHeight = DEFAULT_VIEWPORT.height,
+    captureInteractions: captureInteractionStates = true,
+    maxInteractions
   } = options;
   const viewports = options.viewports;
   const useMultiViewport = viewports && viewports.length > 0;
-  await mkdir(outputDir, { recursive: true });
+  await mkdir2(outputDir, { recursive: true });
   let devServer = null;
   try {
     devServer = await startDevServer(projectRoot, {
@@ -864,20 +1467,20 @@ async function preRenderPages(tasks, options) {
         results = await processWithConcurrency(
           expandedItems,
           concurrency,
-          ({ task, viewport: vp }) => renderPage(context, devServer.url, task, outputDir, { pageTimeout, settleTime }, vp),
+          ({ task, viewport: vp }) => renderPage(context, devServer.url, task, outputDir, { pageTimeout, settleTime, captureInteractionStates, maxInteractions }, vp),
           options.onProgress
         );
       } else {
         results = await processWithConcurrency(
           tasks,
           concurrency,
-          (task) => renderPage(context, devServer.url, task, outputDir, { pageTimeout, settleTime }),
+          (task) => renderPage(context, devServer.url, task, outputDir, { pageTimeout, settleTime, captureInteractionStates, maxInteractions }),
           options.onProgress
         );
       }
       let projectName = "unknown";
       try {
-        const pkg = await import(join5(projectRoot, "package.json"), { with: { type: "json" } });
+        const pkg = await import(join6(projectRoot, "package.json"), { with: { type: "json" } });
         projectName = pkg.default?.name || "unknown";
       } catch {
       }
@@ -886,8 +1489,8 @@ async function preRenderPages(tasks, options) {
         projectName,
         useMultiViewport ? viewports : void 0
       );
-      await writeFile(
-        join5(outputDir, "manifest.json"),
+      await writeFile2(
+        join6(outputDir, "manifest.json"),
         JSON.stringify(manifest, null, 2),
         "utf-8"
       );
@@ -905,14 +1508,14 @@ async function preRenderPages(tasks, options) {
 
 // src/server/canvas-server.ts
 import { createServer as createServer2 } from "http";
-import { join as join7 } from "path";
+import { join as join8 } from "path";
 import { existsSync as existsSync5 } from "fs";
 import sirv from "sirv";
 
 // src/server/api-routes.ts
-import { readFile as readFile3, writeFile as writeFile2, mkdir as mkdir2 } from "fs/promises";
+import { readFile as readFile4, writeFile as writeFile3, mkdir as mkdir3 } from "fs/promises";
 import { existsSync as existsSync4 } from "fs";
-import { join as join6, dirname as dirname2 } from "path";
+import { join as join7, dirname as dirname2 } from "path";
 import { randomUUID } from "crypto";
 async function handleApiRequest(req, res, c2dDir) {
   const url = req.url ?? "/";
@@ -945,12 +1548,12 @@ async function handleApiRequest(req, res, c2dDir) {
   return false;
 }
 async function handleGetManifest(res, c2dDir) {
-  const manifestPath = join6(c2dDir, "manifest.json");
+  const manifestPath = join7(c2dDir, "manifest.json");
   if (!existsSync4(manifestPath)) {
     sendJson(res, 404, { error: "manifest.json not found" });
     return;
   }
-  const data = await readFile3(manifestPath, "utf-8");
+  const data = await readFile4(manifestPath, "utf-8");
   sendRawJson(res, 200, data);
 }
 async function handleGetComments(res, c2dDir) {
@@ -1015,11 +1618,11 @@ async function handlePostDrawings(req, res, c2dDir) {
   sendJson(res, 200, { ok: true });
 }
 async function loadDrawings(c2dDir) {
-  const drawingsPath = join6(c2dDir, "drawings.json");
+  const drawingsPath = join7(c2dDir, "drawings.json");
   if (!existsSync4(drawingsPath)) {
     return [];
   }
-  const data = await readFile3(drawingsPath, "utf-8");
+  const data = await readFile4(drawingsPath, "utf-8");
   try {
     const parsed = JSON.parse(data);
     return Array.isArray(parsed) ? parsed : [];
@@ -1028,12 +1631,12 @@ async function loadDrawings(c2dDir) {
   }
 }
 async function saveDrawings(c2dDir, drawings) {
-  const drawingsPath = join6(c2dDir, "drawings.json");
+  const drawingsPath = join7(c2dDir, "drawings.json");
   const dir = dirname2(drawingsPath);
   if (!existsSync4(dir)) {
-    await mkdir2(dir, { recursive: true });
+    await mkdir3(dir, { recursive: true });
   }
-  await writeFile2(drawingsPath, JSON.stringify(drawings, null, 2), "utf-8");
+  await writeFile3(drawingsPath, JSON.stringify(drawings, null, 2), "utf-8");
 }
 function isValidCommentInput(value) {
   if (typeof value !== "object" || value === null) return false;
@@ -1041,11 +1644,11 @@ function isValidCommentInput(value) {
   return typeof obj.x === "number" && typeof obj.y === "number" && typeof obj.text === "string" && typeof obj.author === "string";
 }
 async function loadComments(c2dDir) {
-  const commentsPath = join6(c2dDir, "comments.json");
+  const commentsPath = join7(c2dDir, "comments.json");
   if (!existsSync4(commentsPath)) {
     return [];
   }
-  const data = await readFile3(commentsPath, "utf-8");
+  const data = await readFile4(commentsPath, "utf-8");
   try {
     const parsed = JSON.parse(data);
     return Array.isArray(parsed) ? parsed : [];
@@ -1054,12 +1657,12 @@ async function loadComments(c2dDir) {
   }
 }
 async function saveComments(c2dDir, comments) {
-  const commentsPath = join6(c2dDir, "comments.json");
+  const commentsPath = join7(c2dDir, "comments.json");
   const dir = dirname2(commentsPath);
   if (!existsSync4(dir)) {
-    await mkdir2(dir, { recursive: true });
+    await mkdir3(dir, { recursive: true });
   }
-  await writeFile2(commentsPath, JSON.stringify(comments, null, 2), "utf-8");
+  await writeFile3(commentsPath, JSON.stringify(comments, null, 2), "utf-8");
 }
 function readRequestBody(req) {
   return new Promise((resolve2, reject) => {
@@ -1109,9 +1712,9 @@ function tryListen(requestHandler, port) {
 async function startCanvasServer(options) {
   const { port = 4800, canvasDir, c2dDir, projectRoot } = options;
   const canvasHandler = sirv(canvasDir, { single: true, dev: true });
-  const rendersDir = join7(c2dDir, "renders");
+  const rendersDir = join8(c2dDir, "renders");
   const rendersHandler = sirv(rendersDir, { dev: true });
-  const publicDir = projectRoot ? join7(projectRoot, "public") : null;
+  const publicDir = projectRoot ? join8(projectRoot, "public") : null;
   const publicHandler = publicDir && existsSync5(publicDir) ? sirv(publicDir, { dev: true }) : null;
   const requestHandler = async (req, res) => {
     const url = req.url ?? "/";
@@ -1176,12 +1779,12 @@ async function startCanvasServer(options) {
 
 // src/config.ts
 import { existsSync as existsSync6 } from "fs";
-import { readFile as readFile4 } from "fs/promises";
-import { join as join8 } from "path";
+import { readFile as readFile5 } from "fs/promises";
+import { join as join9 } from "path";
 var DEFAULT_PORT = 4800;
 async function loadConfig(projectRoot) {
   let fileConfig = {};
-  const configPath = join8(projectRoot, "c2d.config.js");
+  const configPath = join9(projectRoot, "c2d.config.js");
   if (existsSync6(configPath)) {
     try {
       const mod = await import(configPath);
@@ -1198,24 +1801,51 @@ async function loadConfig(projectRoot) {
     devServerCommand: fileConfig.devServerCommand
   };
 }
-async function detectNextJsProject(projectRoot) {
-  const hasNextConfig = existsSync6(join8(projectRoot, "next.config.ts")) || existsSync6(join8(projectRoot, "next.config.js")) || existsSync6(join8(projectRoot, "next.config.mjs"));
-  let appDir = join8(projectRoot, "app");
-  let hasAppDir = existsSync6(appDir);
-  if (!hasAppDir) {
-    appDir = join8(projectRoot, "src", "app");
-    hasAppDir = existsSync6(appDir);
-  }
+async function detectProject(projectRoot) {
   let projectName = "unknown";
   try {
-    const pkg = JSON.parse(await readFile4(join8(projectRoot, "package.json"), "utf-8"));
+    const pkg = JSON.parse(await readFile5(join9(projectRoot, "package.json"), "utf-8"));
     projectName = pkg.name || "unknown";
   } catch {
   }
+  const hasNextConfig = existsSync6(join9(projectRoot, "next.config.ts")) || existsSync6(join9(projectRoot, "next.config.js")) || existsSync6(join9(projectRoot, "next.config.mjs"));
+  if (hasNextConfig) {
+    let appDir = join9(projectRoot, "app");
+    let hasAppDir = existsSync6(appDir);
+    if (!hasAppDir) {
+      appDir = join9(projectRoot, "src", "app");
+      hasAppDir = existsSync6(appDir);
+    }
+    if (hasAppDir) {
+      return { isSupported: true, projectType: "nextjs-app", appDir, projectRoot, projectName };
+    }
+    appDir = join9(projectRoot, "pages");
+    hasAppDir = existsSync6(appDir);
+    if (!hasAppDir) {
+      appDir = join9(projectRoot, "src", "pages");
+      hasAppDir = existsSync6(appDir);
+    }
+    if (hasAppDir) {
+      return { isSupported: true, projectType: "nextjs-pages", appDir, projectRoot, projectName };
+    }
+    return { isSupported: false, projectType: "unknown", appDir: null, projectRoot, projectName };
+  }
+  try {
+    const pkg = JSON.parse(await readFile5(join9(projectRoot, "package.json"), "utf-8"));
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if ("react-router-dom" in deps || "react-router" in deps) {
+      return { isSupported: true, projectType: "react-router", appDir: null, projectRoot, projectName };
+    }
+  } catch {
+  }
+  return { isSupported: false, projectType: "unknown", appDir: null, projectRoot, projectName };
+}
+async function detectNextJsProject(projectRoot) {
+  const result = await detectProject(projectRoot);
   return {
-    isNextJs: hasNextConfig,
-    appDir: hasAppDir ? appDir : null,
-    projectName
+    isNextJs: result.projectType === "nextjs-app" || result.projectType === "nextjs-pages",
+    appDir: result.appDir,
+    projectName: result.projectName
   };
 }
 
@@ -1262,21 +1892,23 @@ async function runScan(options) {
   banner();
   const config = await loadConfig(projectRoot);
   header("Detecting project...");
-  const project = await detectNextJsProject(projectRoot);
-  if (!project.isNextJs) {
-    error("Not a Next.js project (no next.config.ts/js/mjs found).");
-    log("Code to Design currently supports Next.js App Router projects only.");
+  const project = await detectProject(projectRoot);
+  if (!project.isSupported) {
+    error("Unsupported project type.");
+    log("Code to Design supports Next.js (App Router / Pages Router) and React Router (Vite) projects.");
     process.exit(1);
   }
-  if (!project.appDir) {
-    error("No app/ directory found. Code to Design requires Next.js App Router.");
+  if (project.projectType !== "react-router" && !project.appDir) {
+    error("No app/ or pages/ directory found.");
     process.exit(1);
   }
-  success(`Project: ${project.projectName}`);
-  success(`App directory: ${project.appDir}`);
-  const c2dDir = join9(projectRoot, ".c2d");
+  success(`Project: ${project.projectName} (${project.projectType})`);
+  if (project.appDir) {
+    success(`App directory: ${project.appDir}`);
+  }
+  const c2dDir = join10(projectRoot, ".c2d");
   if (skipRender) {
-    if (!existsSync7(join9(c2dDir, "manifest.json"))) {
+    if (!existsSync7(join10(c2dDir, "manifest.json"))) {
       error("No previous renders found. Run without --skip-render first.");
       process.exit(1);
     }
@@ -1285,7 +1917,9 @@ async function runScan(options) {
     return;
   }
   header("Discovering routes...");
-  const routes = await scanRoutes({ appDir: project.appDir });
+  const scanDir2 = project.projectType === "react-router" ? project.projectRoot : project.appDir;
+  const routerType = project.projectType === "react-router" ? "react-router" : project.projectType === "nextjs-pages" ? "pages-router" : "app-router";
+  const routes = await scanRoutes({ appDir: scanDir2, routerType });
   if (routes.length === 0) {
     error("No routes found in app/ directory.");
     process.exit(1);
@@ -1328,10 +1962,10 @@ async function runScan(options) {
     success("Using fallback mocks (no API key or no API dependencies)");
   }
   header(`Pre-rendering ${renderTasks.length} page states...`);
-  if (existsSync7(join9(c2dDir, "renders"))) {
-    await rm(join9(c2dDir, "renders"), { recursive: true });
+  if (existsSync7(join10(c2dDir, "renders"))) {
+    await rm(join10(c2dDir, "renders"), { recursive: true });
   }
-  await mkdir3(c2dDir, { recursive: true });
+  await mkdir4(c2dDir, { recursive: true });
   const { results, manifest } = await preRenderPages(renderTasks, {
     projectRoot,
     outputDir: c2dDir,
@@ -1355,7 +1989,8 @@ async function runScan(options) {
   }
   if (watch) {
     const server = await startServerNonBlocking(c2dDir, config.port, open, projectRoot);
-    watchAndRerender(projectRoot, project.appDir, c2dDir, config);
+    const watchDir = project.projectType === "react-router" ? join10(projectRoot, "src") : project.appDir;
+    watchAndRerender(projectRoot, watchDir, c2dDir, config, routerType);
     await new Promise((resolve2) => {
       const shutdown = async () => {
         log("\nShutting down...");
@@ -1431,20 +2066,20 @@ async function resolveCanvasDir(c2dDir) {
   const __filename = fileURLToPath(import.meta.url);
   let dir = dirname3(__filename);
   for (let i = 0; i < 5; i++) {
-    const candidate = join9(dir, "canvas-dist");
-    if (existsSync7(candidate) && existsSync7(join9(candidate, "index.html"))) {
+    const candidate = join10(dir, "canvas-dist");
+    if (existsSync7(candidate) && existsSync7(join10(candidate, "index.html"))) {
       return candidate;
     }
     dir = dirname3(dir);
   }
-  const monorepoDev = join9(dirname3(__filename), "..", "..", "..", "..", "apps", "canvas", "dist");
-  if (existsSync7(monorepoDev) && existsSync7(join9(monorepoDev, "index.html"))) {
+  const monorepoDev = join10(dirname3(__filename), "..", "..", "..", "..", "apps", "canvas", "dist");
+  if (existsSync7(monorepoDev) && existsSync7(join10(monorepoDev, "index.html"))) {
     return monorepoDev;
   }
-  const placeholder = join9(c2dDir, "_canvas");
-  await mkdir3(placeholder, { recursive: true });
-  const { writeFile: writeFile3 } = await import("fs/promises");
-  await writeFile3(join9(placeholder, "index.html"), `<!DOCTYPE html><html><body>
+  const placeholder = join10(c2dDir, "_canvas");
+  await mkdir4(placeholder, { recursive: true });
+  const { writeFile: writeFile4 } = await import("fs/promises");
+  await writeFile4(join10(placeholder, "index.html"), `<!DOCTYPE html><html><body>
     <h1>Code to Design</h1>
     <p>Canvas app not built. Run: <code>cd apps/canvas && npx vite build</code></p>
     <p><a href="/api/manifest">View Manifest</a></p>
@@ -1459,7 +2094,7 @@ function shouldIgnoreFile(filename) {
   const ext = filename.slice(filename.lastIndexOf("."));
   return !WATCH_EXTENSIONS.has(ext);
 }
-function watchAndRerender(projectRoot, appDir, c2dDir, config) {
+function watchAndRerender(projectRoot, appDir, c2dDir, config, routerType) {
   let debounceTimer;
   let isRendering = false;
   log(`Watching ${appDir} for changes...`);
@@ -1472,7 +2107,7 @@ function watchAndRerender(projectRoot, appDir, c2dDir, config) {
       log(`
 File changed: ${filename}. Re-rendering...`);
       try {
-        const routes = await scanRoutes({ appDir });
+        const routes = await scanRoutes({ appDir, routerType });
         const filteredRoutes = routes.filter(
           (r) => !config.excludeRoutes.some((pattern) => r.urlPath.includes(pattern))
         );
@@ -1489,10 +2124,10 @@ File changed: ${filename}. Re-rendering...`);
             });
           }
         }
-        if (existsSync7(join9(c2dDir, "renders"))) {
-          await rm(join9(c2dDir, "renders"), { recursive: true });
+        if (existsSync7(join10(c2dDir, "renders"))) {
+          await rm(join10(c2dDir, "renders"), { recursive: true });
         }
-        await mkdir3(c2dDir, { recursive: true });
+        await mkdir4(c2dDir, { recursive: true });
         const { results } = await preRenderPages(renderTasks, {
           projectRoot,
           outputDir: c2dDir,
@@ -1512,7 +2147,8 @@ File changed: ${filename}. Re-rendering...`);
 export {
   startCanvasServer,
   loadConfig,
+  detectProject,
   detectNextJsProject,
   runScan
 };
-//# sourceMappingURL=chunk-WX4KLWOS.js.map
+//# sourceMappingURL=chunk-AL6L2SWU.js.map