code-to-design 0.2.0 → 0.2.2

package/dist/{chunk-HYFKUTC3.js → chunk-3CJ7RVFI.js}

@@ -335,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;
@@ -454,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;
@@ -473,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);
@@ -490,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 {
@@ -524,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}`);
@@ -545,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) {
@@ -563,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");
 }
 
@@ -609,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 = {};
@@ -659,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),
@@ -678,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 }
@@ -965,6 +1200,32 @@ async function captureInteractions(page, pageUrl, route, stateName, outputDir, o
   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;
@@ -1004,6 +1265,34 @@ async function setupMockInterception(page, devServerUrl, mockConfig, authConfig)
     }));
     await page.context().addCookies(cookies);
   }
+  if (authConfig.hasAuth) {
+    const mockUser = mockConfig.authMock?.authCheckResponse?.body ?? {
+      id: "mock_user",
+      email: "demo@c2d.dev",
+      name: "Demo User"
+    };
+    const mockToken = "c2d_mock_jwt_token";
+    await page.goto(devServerUrl, { waitUntil: "commit", timeout: 1e4 }).catch(() => {
+    });
+    await page.evaluate(`(() => {
+      // Zustand persist pattern (auth-storage)
+      const zustandState = {
+        state: {
+          user: ${JSON.stringify(mockUser)},
+          tokens: { access: "${mockToken}", refresh: "${mockToken}" },
+          isAuthenticated: true,
+          isLoading: false,
+        },
+        version: 0,
+      };
+      localStorage.setItem('auth-storage', JSON.stringify(zustandState));
+
+      // Common alternatives
+      localStorage.setItem('token', '"${mockToken}"');
+      localStorage.setItem('access_token', '"${mockToken}"');
+      localStorage.setItem('user', JSON.stringify(${JSON.stringify(mockUser)}));
+    })()`);
+  }
   const authMockBody = mockConfig.authMock?.authCheckResponse ? JSON.stringify(mockConfig.authMock.authCheckResponse.body) : JSON.stringify({ id: "mock_user", email: "demo@c2d.dev", name: "Demo User", email_verified: true, avatar_url: null, created_at: "2026-01-01T00:00:00Z" });
   const AUTH_PATTERNS = ["/auth/me", "/auth/session", "/api/auth/me", "/api/user/me", "/api/auth/session"];
   await page.route("**/*", async (route) => {
@@ -1020,12 +1309,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,
@@ -1034,6 +1318,13 @@ 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();
   });
 }
@@ -1888,4 +2179,4 @@ export {
   detectNextJsProject,
   runScan
 };
-//# sourceMappingURL=chunk-HYFKUTC3.js.map
+//# sourceMappingURL=chunk-3CJ7RVFI.js.map