@designtools/codesurface 0.1.9 → 0.1.10

package/dist/cli.js

@@ -41,8 +41,25 @@ async function detectFramework(projectRoot) {
     componentDirCandidates = ["components/ui", "src/components/ui"];
   }
   const appResult = await findDir(projectRoot, appDirCandidates);
-  const componentResult = await findDir(projectRoot, componentDirCandidates);
-  const componentFileCount = componentResult.exists ? await countFiles(projectRoot, componentResult.dir, ".tsx") : 0;
+  let componentResult = await findDir(projectRoot, componentDirCandidates);
+  let componentFileCount = componentResult.exists ? await countComponentFiles(projectRoot, componentResult.dir) : 0;
+  let fallbackComponentDirs = [];
+  if (!componentResult.exists) {
+    fallbackComponentDirs = await scanForComponentDirs(projectRoot);
+    if (fallbackComponentDirs.length > 0) {
+      const best = fallbackComponentDirs[0];
+      componentResult = { dir: best.dir, exists: true };
+      componentFileCount = best.fileCount;
+    }
+  }
+  let cssFiles = await findCssFiles(projectRoot);
+  let fallbackCssFiles = [];
+  if (cssFiles.length === 0) {
+    fallbackCssFiles = await scanForCssFiles(projectRoot);
+    if (fallbackCssFiles.length > 0) {
+      cssFiles = fallbackCssFiles;
+    }
+  }
   return {
     name,
     appDir: appResult.dir,
@@ -50,7 +67,9 @@ async function detectFramework(projectRoot) {
     componentDir: componentResult.dir,
     componentDirExists: componentResult.exists,
     componentFileCount,
-    cssFiles: await findCssFiles(projectRoot)
+    cssFiles,
+    fallbackComponentDirs,
+    fallbackCssFiles
   };
 }
 async function findDir(root, candidates) {
@@ -64,11 +83,11 @@ async function findDir(root, candidates) {
   }
   return { dir: candidates[0], exists: false };
 }
-async function countFiles(root, dir, ext) {
+async function countComponentFiles(root, dir) {
   const full = path.join(root, dir);
   try {
     const entries = await fs.readdir(full);
-    return entries.filter((e) => e.endsWith(ext)).length;
+    return entries.filter((e) => e.endsWith(".tsx") || e.endsWith(".jsx")).length;
   } catch {
     return 0;
   }
@@ -93,6 +112,98 @@ async function findCssFiles(projectRoot) {
   }
   return found;
 }
+var COMPONENT_SCAN_DIRS = [
+  "components",
+  "src/components",
+  "lib",
+  "src/lib",
+  "ui",
+  "src/ui"
+];
+async function scanForComponentDirs(projectRoot) {
+  const results = [];
+  for (const parentDir of COMPONENT_SCAN_DIRS) {
+    const fullParent = path.join(projectRoot, parentDir);
+    let stat;
+    try {
+      stat = await fs.stat(fullParent);
+    } catch {
+      continue;
+    }
+    if (!stat.isDirectory()) continue;
+    const hits = await countDataSlotFiles(fullParent);
+    if (hits > 0) {
+      results.push({ dir: parentDir, fileCount: hits });
+    }
+    try {
+      const entries = await fs.readdir(fullParent, { withFileTypes: true });
+      for (const entry of entries) {
+        if (!entry.isDirectory()) continue;
+        const subDir = path.join(parentDir, entry.name);
+        const subHits = await countDataSlotFiles(path.join(projectRoot, subDir));
+        if (subHits > 0) {
+          results.push({ dir: subDir, fileCount: subHits });
+        }
+      }
+    } catch {
+    }
+  }
+  results.sort((a, b3) => b3.fileCount - a.fileCount);
+  return results;
+}
+async function countDataSlotFiles(dirPath) {
+  let count = 0;
+  try {
+    const files = await fs.readdir(dirPath);
+    for (const file of files) {
+      if (!file.endsWith(".tsx") && !file.endsWith(".jsx")) continue;
+      try {
+        const content = await fs.readFile(path.join(dirPath, file), "utf-8");
+        if (content.includes("data-slot")) {
+          count++;
+        }
+      } catch {
+      }
+    }
+  } catch {
+  }
+  return count;
+}
+var CSS_SCAN_DIRS = [
+  "app",
+  "src/app",
+  "src",
+  "styles",
+  "assets",
+  "theme",
+  "css"
+];
+var CSS_CUSTOM_PROPERTY_RE = /--[\w-]+\s*:/;
+async function scanForCssFiles(projectRoot) {
+  const found = [];
+  for (const dir of CSS_SCAN_DIRS) {
+    const fullDir = path.join(projectRoot, dir);
+    let entries;
+    try {
+      entries = await fs.readdir(fullDir);
+    } catch {
+      continue;
+    }
+    for (const file of entries) {
+      if (!file.endsWith(".css")) continue;
+      const relPath = path.join(dir, file);
+      if (found.includes(relPath)) continue;
+      try {
+        const content = await fs.readFile(path.join(projectRoot, relPath), "utf-8");
+        if (CSS_CUSTOM_PROPERTY_RE.test(content)) {
+          found.push(relPath);
+        }
+      } catch {
+      }
+    }
+  }
+  return found;
+}
 
 // src/server/lib/detect-styling.ts
 import fs2 from "fs/promises";
@@ -1337,18 +1448,20 @@ import fs5 from "fs/promises";
 import path5 from "path";
 import recast2 from "recast";
 import { namedTypes as n3 } from "ast-types";
-async function scanComponents(projectRoot) {
-  const componentDirs = [
-    "components/ui",
-    "src/components/ui"
-  ];
-  let componentDir = "";
-  for (const dir of componentDirs) {
-    try {
-      await fs5.access(path5.join(projectRoot, dir));
-      componentDir = dir;
-      break;
-    } catch {
+async function scanComponents(projectRoot, overrideDir) {
+  let componentDir = overrideDir || "";
+  if (!componentDir) {
+    const componentDirs = [
+      "components/ui",
+      "src/components/ui"
+    ];
+    for (const dir of componentDirs) {
+      try {
+        await fs5.access(path5.join(projectRoot, dir));
+        componentDir = dir;
+        break;
+      } catch {
+      }
     }
   }
   if (!componentDir) {
@@ -1356,7 +1469,7 @@ async function scanComponents(projectRoot) {
   }
   const fullDir = path5.join(projectRoot, componentDir);
   const files = await fs5.readdir(fullDir);
-  const tsxFiles = files.filter((f) => f.endsWith(".tsx"));
+  const tsxFiles = files.filter((f) => f.endsWith(".tsx") || f.endsWith(".jsx"));
   const parser = await getParser();
   const components = [];
   for (const file of tsxFiles) {
@@ -2535,12 +2648,15 @@ function isFromComponentDir(importPath, componentDir, _parentDir, leafDir) {
 
 // src/server/lib/scanner.ts
 var cachedScan = null;
+var predetectedFramework;
+var predetectedStyling;
 async function runScan(projectRoot) {
-  const framework = await detectFramework(projectRoot);
-  const styling = await detectStylingSystem(projectRoot, framework);
+  const framework = predetectedFramework || await detectFramework(projectRoot);
+  const styling = predetectedStyling || await detectStylingSystem(projectRoot, framework);
+  const componentDir = framework.componentDirExists ? framework.componentDir : void 0;
   const [tokens, components, shadows, borders, gradients, spacing, usages] = await Promise.all([
     scanTokens(projectRoot, framework),
-    scanComponents(projectRoot),
+    scanComponents(projectRoot, componentDir),
     scanShadows(projectRoot, framework, styling),
     scanBorders(projectRoot, framework, styling),
     scanGradients(projectRoot, framework, styling),
@@ -2585,7 +2701,9 @@ async function rescanGradients(projectRoot) {
   patchCachedScan("gradients", gradients);
   return gradients;
 }
-function createScanRouter(projectRoot) {
+function createScanRouter(projectRoot, framework, styling) {
+  predetectedFramework = framework;
+  predetectedStyling = styling;
   const router = Router2();
   runScan(projectRoot).then(() => {
     console.log("  Project scanned successfully");
@@ -3383,7 +3501,7 @@ async function createServer(config) {
     };
     tryOpen();
   });
-  app.use("/scan", createScanRouter(config.projectRoot));
+  app.use("/scan", createScanRouter(config.projectRoot, config.framework, config.styling));
   const __dirname = path16.dirname(fileURLToPath(import.meta.url));
   const clientDistPath = path16.join(__dirname, "client");
   const isDev = !fs18.existsSync(path16.join(clientDistPath, "index.html"));
@@ -3468,10 +3586,150 @@ async function promptPort(message, options) {
     });
   });
 }
+async function promptComponentDir(framework, projectRoot) {
+  const candidates = framework.fallbackComponentDirs.length > 0 ? framework.fallbackComponentDirs : await findDirsWithComponentFiles(projectRoot);
+  if (candidates.length === 0) {
+    return { dir: framework.componentDir, exists: false, fileCount: 0 };
+  }
+  const rl = readline.createInterface({ input: process2.stdin, output: process2.stdout });
+  console.log("");
+  console.log(`  ${yellow("?")} Where are your UI components?`);
+  for (let i = 0; i < candidates.length; i++) {
+    const c = candidates[i];
+    console.log(`    ${cyan(String(i + 1))}. ${c.dir}/ ${dim(`(${c.fileCount} files)`)}`);
+  }
+  const enterIdx = candidates.length + 1;
+  const skipIdx = candidates.length + 2;
+  console.log(`    ${cyan(String(enterIdx))}. Enter a path`);
+  console.log(`    ${cyan(String(skipIdx))}. Skip \u2014 continue without component editing`);
+  console.log("");
+  return new Promise((resolve) => {
+    rl.question(`  ${dim("Choice [1]:")} `, (answer) => {
+      rl.close();
+      const trimmed = answer.trim();
+      if (!trimmed || trimmed === "1") {
+        const best = candidates[0];
+        resolve({ dir: best.dir, exists: true, fileCount: best.fileCount });
+        return;
+      }
+      const idx = parseInt(trimmed, 10);
+      if (idx >= 1 && idx <= candidates.length) {
+        const picked = candidates[idx - 1];
+        resolve({ dir: picked.dir, exists: true, fileCount: picked.fileCount });
+        return;
+      }
+      if (idx === enterIdx) {
+        const rl2 = readline.createInterface({ input: process2.stdin, output: process2.stdout });
+        rl2.question(`  ${dim("Path:")} `, (pathAnswer) => {
+          rl2.close();
+          const customDir = pathAnswer.trim();
+          if (customDir && fs19.existsSync(path17.join(projectRoot, customDir))) {
+            resolve({ dir: customDir, exists: true, fileCount: 0 });
+          } else {
+            resolve({ dir: customDir || framework.componentDir, exists: false, fileCount: 0 });
+          }
+        });
+        return;
+      }
+      resolve({ dir: framework.componentDir, exists: false, fileCount: 0 });
+    });
+  });
+}
+async function promptCssFile(framework, projectRoot) {
+  const candidates = framework.fallbackCssFiles;
+  if (candidates.length === 0) {
+    return [];
+  }
+  const rl = readline.createInterface({ input: process2.stdin, output: process2.stdout });
+  console.log("");
+  console.log(`  ${yellow("?")} Which CSS file has your design tokens / custom properties?`);
+  for (let i = 0; i < candidates.length; i++) {
+    console.log(`    ${cyan(String(i + 1))}. ${candidates[i]}`);
+  }
+  const enterIdx = candidates.length + 1;
+  const skipIdx = candidates.length + 2;
+  console.log(`    ${cyan(String(enterIdx))}. Enter a path`);
+  console.log(`    ${cyan(String(skipIdx))}. Skip \u2014 continue without token editing`);
+  console.log("");
+  return new Promise((resolve) => {
+    rl.question(`  ${dim("Choice [1]:")} `, (answer) => {
+      rl.close();
+      const trimmed = answer.trim();
+      if (!trimmed || trimmed === "1") {
+        resolve([candidates[0]]);
+        return;
+      }
+      const idx = parseInt(trimmed, 10);
+      if (idx >= 1 && idx <= candidates.length) {
+        resolve([candidates[idx - 1]]);
+        return;
+      }
+      if (idx === enterIdx) {
+        const rl2 = readline.createInterface({ input: process2.stdin, output: process2.stdout });
+        rl2.question(`  ${dim("Path:")} `, (pathAnswer) => {
+          rl2.close();
+          const customPath = pathAnswer.trim();
+          if (customPath && fs19.existsSync(path17.join(projectRoot, customPath))) {
+            resolve([customPath]);
+          } else {
+            resolve([]);
+          }
+        });
+        return;
+      }
+      resolve([]);
+    });
+  });
+}
+async function findDirsWithComponentFiles(projectRoot) {
+  const scanDirs = [
+    "components",
+    "src/components",
+    "lib",
+    "src/lib",
+    "ui",
+    "src/ui"
+  ];
+  const results = [];
+  for (const dir of scanDirs) {
+    const fullDir = path17.join(projectRoot, dir);
+    try {
+      const stat = fs19.statSync(fullDir);
+      if (!stat.isDirectory()) continue;
+    } catch {
+      continue;
+    }
+    try {
+      const files = fs19.readdirSync(fullDir);
+      const count = files.filter((f) => f.endsWith(".tsx") || f.endsWith(".jsx")).length;
+      if (count > 0) {
+        results.push({ dir, fileCount: count });
+      }
+      for (const file of files) {
+        const subPath = path17.join(fullDir, file);
+        try {
+          if (!fs19.statSync(subPath).isDirectory()) continue;
+        } catch {
+          continue;
+        }
+        const subFiles = fs19.readdirSync(subPath);
+        const subCount = subFiles.filter((f) => f.endsWith(".tsx") || f.endsWith(".jsx")).length;
+        if (subCount > 0) {
+          results.push({ dir: `${dir}/${file}`, fileCount: subCount });
+        }
+      }
+    } catch {
+    }
+  }
+  results.sort((a, b3) => b3.fileCount - a.fileCount);
+  return results;
+}
 async function main() {
   const args = process2.argv.slice(2);
   let targetPort = 3e3;
   let toolPort = 4400;
+  let componentsOverride;
+  let cssOverride;
   for (let i = 0; i < args.length; i++) {
     if (args[i] === "--port" && args[i + 1]) {
       targetPort = parseInt(args[i + 1], 10);
@@ -3481,6 +3739,14 @@ async function main() {
       toolPort = parseInt(args[i + 1], 10);
       i++;
     }
+    if (args[i] === "--components" && args[i + 1]) {
+      componentsOverride = args[i + 1];
+      i++;
+    }
+    if (args[i] === "--css" && args[i + 1]) {
+      cssOverride = args[i + 1];
+      i++;
+    }
   }
   const projectRoot = process2.cwd();
   console.log("");
@@ -3496,6 +3762,17 @@ async function main() {
     process2.exit(1);
   }
   const framework = await detectFramework(projectRoot);
+  if (componentsOverride) {
+    framework.componentDir = componentsOverride;
+    framework.componentDirExists = fs19.existsSync(path17.join(projectRoot, componentsOverride));
+    if (framework.componentDirExists) {
+      const files = fs19.readdirSync(path17.join(projectRoot, componentsOverride));
+      framework.componentFileCount = files.filter((f) => f.endsWith(".tsx") || f.endsWith(".jsx")).length;
+    }
+  }
+  if (cssOverride) {
+    framework.cssFiles = fs19.existsSync(path17.join(projectRoot, cssOverride)) ? [cssOverride] : [];
+  }
   const frameworkLabel = framework.name === "nextjs" ? "Next.js" : framework.name === "remix" ? "Remix" : framework.name === "vite" ? "Vite" : "Unknown";
   console.log(`  ${green("\u2713")} Framework      ${frameworkLabel}`);
   if (framework.appDirExists) {
@@ -3508,12 +3785,28 @@ async function main() {
       `  ${green("\u2713")} Components     ${framework.componentDir}/ ${dim(`(${framework.componentFileCount} files)`)}`
     );
   } else {
-    console.log(`  ${yellow("\u26A0")} Components     ${dim("not found \u2014 component editing won't be available")}`);
+    console.log(`  ${yellow("\u26A0")} Components     ${dim("not found")}`);
+    if (!componentsOverride && process2.stdin.isTTY) {
+      const result = await promptComponentDir(framework, projectRoot);
+      if (result.exists) {
+        framework.componentDir = result.dir;
+        framework.componentDirExists = true;
+        framework.componentFileCount = result.fileCount;
+        console.log(`  ${green("\u2713")} Components     ${framework.componentDir}/ ${dim(`(${framework.componentFileCount} files)`)}`);
+      }
+    }
   }
   if (framework.cssFiles.length > 0) {
     console.log(`  ${green("\u2713")} CSS files      ${framework.cssFiles[0]}`);
   } else {
     console.log(`  ${yellow("\u26A0")} CSS files      ${dim("no CSS files found")}`);
+    if (!cssOverride && process2.stdin.isTTY) {
+      const result = await promptCssFile(framework, projectRoot);
+      if (result.length > 0) {
+        framework.cssFiles = result;
+        console.log(`  ${green("\u2713")} CSS files      ${framework.cssFiles[0]}`);
+      }
+    }
   }
   const styling = await detectStylingSystem(projectRoot, framework);
   const stylingLabels = {
@@ -3584,7 +3877,9 @@ async function main() {
     targetPort,
     toolPort,
     projectRoot,
-    stylingType: styling.type
+    stylingType: styling.type,
+    framework,
+    styling
   });
   const httpServer = await new Promise((resolve, reject) => {
     let attempts = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designtools/codesurface",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Visual editing CLI — hybrid architecture with selection overlays in the target app and editor UI served separately",
   "type": "module",
   "license": "CC-BY-NC-4.0",