code-to-design 0.1.4 → 0.2.0

package/dist/{chunk-BHEMO5RW.js → chunk-HYFKUTC3.js}

@@ -1,10 +1,10 @@
 // src/commands/scan.ts
-import { join as join9 } from "path";
-import { rm, mkdir as mkdir3 } from "fs/promises";
-import { existsSync as existsSync6, watch as fsWatch } from "fs";
+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;
@@ -198,7 +363,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 +407,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;
   }
@@ -529,8 +694,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 +798,173 @@ ${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/pre-renderer.ts
 var DEFAULT_CONCURRENCY = 3;
 var DEFAULT_PAGE_TIMEOUT = 15e3;
@@ -650,7 +982,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, "_");
 }
@@ -707,14 +1039,14 @@ async function setupMockInterception(page, devServerUrl, mockConfig, authConfig)
 }
 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 +1060,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 +1157,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 +1170,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 +1204,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 +1226,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,13 +1245,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 ?? "/";
@@ -944,12 +1285,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) {
@@ -1014,11 +1355,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 : [];
@@ -1027,12 +1368,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;
@@ -1040,11 +1381,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 : [];
@@ -1053,12 +1394,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) => {
@@ -1106,10 +1447,12 @@ function tryListen(requestHandler, port) {
   });
 }
 async function startCanvasServer(options) {
-  const { port = 4800, canvasDir, c2dDir } = 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 ? join8(projectRoot, "public") : null;
+  const publicHandler = publicDir && existsSync5(publicDir) ? sirv(publicDir, { dev: true }) : null;
   const requestHandler = async (req, res) => {
     const url = req.url ?? "/";
     const method = req.method ?? "GET";
@@ -1143,6 +1486,15 @@ async function startCanvasServer(options) {
       });
       return;
     }
+    if (publicHandler) {
+      publicHandler(req, res, () => {
+        canvasHandler(req, res, () => {
+          res.writeHead(404);
+          res.end("Not found");
+        });
+      });
+      return;
+    }
     canvasHandler(req, res, () => {
       res.writeHead(404);
       res.end("Not found");
@@ -1163,14 +1515,14 @@ async function startCanvasServer(options) {
 }
 
 // src/config.ts
-import { existsSync as existsSync5 } from "fs";
-import { readFile as readFile4 } from "fs/promises";
-import { join as join8 } from "path";
+import { existsSync as existsSync6 } from "fs";
+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");
-  if (existsSync5(configPath)) {
+  const configPath = join9(projectRoot, "c2d.config.js");
+  if (existsSync6(configPath)) {
     try {
       const mod = await import(configPath);
       fileConfig = mod.default || mod;
@@ -1186,24 +1538,51 @@ async function loadConfig(projectRoot) {
     devServerCommand: fileConfig.devServerCommand
   };
 }
-async function detectNextJsProject(projectRoot) {
-  const hasNextConfig = existsSync5(join8(projectRoot, "next.config.ts")) || existsSync5(join8(projectRoot, "next.config.js")) || existsSync5(join8(projectRoot, "next.config.mjs"));
-  let appDir = join8(projectRoot, "app");
-  let hasAppDir = existsSync5(appDir);
-  if (!hasAppDir) {
-    appDir = join8(projectRoot, "src", "app");
-    hasAppDir = existsSync5(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
   };
 }
 
@@ -1250,30 +1629,34 @@ 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 (!existsSync6(join9(c2dDir, "manifest.json"))) {
+    if (!existsSync7(join10(c2dDir, "manifest.json"))) {
       error("No previous renders found. Run without --skip-render first.");
       process.exit(1);
     }
     log("Skipping render, using existing canvas data...");
-    await startServer(c2dDir, config.port, open);
+    await startServer(c2dDir, config.port, open, projectRoot);
     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);
@@ -1316,10 +1699,10 @@ async function runScan(options) {
     success("Using fallback mocks (no API key or no API dependencies)");
   }
   header(`Pre-rendering ${renderTasks.length} page states...`);
-  if (existsSync6(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,
@@ -1342,8 +1725,9 @@ async function runScan(options) {
     }
   }
   if (watch) {
-    const server = await startServerNonBlocking(c2dDir, config.port, open);
-    watchAndRerender(projectRoot, project.appDir, c2dDir, config);
+    const server = await startServerNonBlocking(c2dDir, config.port, open, projectRoot);
+    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...");
@@ -1354,10 +1738,10 @@ async function runScan(options) {
       process.on("SIGTERM", shutdown);
     });
   } else {
-    await startServer(c2dDir, config.port, open);
+    await startServer(c2dDir, config.port, open, projectRoot);
   }
 }
-async function startServer(c2dDir, port, open) {
+async function startServer(c2dDir, port, open, projectRoot) {
   header("Starting canvas server...");
   const canvasDir = await resolveCanvasDir(c2dDir);
   if (!canvasDir) {
@@ -1366,7 +1750,8 @@ async function startServer(c2dDir, port, open) {
   const server = await startCanvasServer({
     port,
     canvasDir,
-    c2dDir
+    c2dDir,
+    projectRoot
   });
   success(`Canvas server running at ${server.url}`);
   log("Share this URL with your team for collaborative review");
@@ -1388,7 +1773,7 @@ async function startServer(c2dDir, port, open) {
     process.on("SIGTERM", shutdown);
   });
 }
-async function startServerNonBlocking(c2dDir, port, open) {
+async function startServerNonBlocking(c2dDir, port, open, projectRoot) {
   header("Starting canvas server...");
   const canvasDir = await resolveCanvasDir(c2dDir);
   if (!canvasDir) {
@@ -1397,7 +1782,8 @@ async function startServerNonBlocking(c2dDir, port, open) {
   const server = await startCanvasServer({
     port,
     canvasDir,
-    c2dDir
+    c2dDir,
+    projectRoot
   });
   success(`Canvas server running at ${server.url}`);
   log("Share this URL with your team for collaborative review");
@@ -1417,20 +1803,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 (existsSync6(candidate) && existsSync6(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 (existsSync6(monorepoDev) && existsSync6(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>
@@ -1445,7 +1831,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...`);
@@ -1458,7 +1844,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))
         );
@@ -1475,10 +1861,10 @@ File changed: ${filename}. Re-rendering...`);
             });
           }
         }
-        if (existsSync6(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,
@@ -1498,7 +1884,8 @@ File changed: ${filename}. Re-rendering...`);
 export {
   startCanvasServer,
   loadConfig,
+  detectProject,
   detectNextJsProject,
   runScan
 };
-//# sourceMappingURL=chunk-BHEMO5RW.js.map
+//# sourceMappingURL=chunk-HYFKUTC3.js.map