draply-dev 1.2.0 → 1.3.0

package/bin/cli.js

@@ -2,6 +2,7 @@
 'use strict';
 
 const http = require('http');
+const https = require('https');
 const fs = require('fs');
 const path = require('path');
 const zlib = require('zlib');
@@ -13,7 +14,6 @@ const targetHost = args[2] || 'localhost';
 
 const OVERLAY_JS = fs.readFileSync(path.join(__dirname, '../src/overlay.js'), 'utf8');
 const FEATURES_JS = fs.readFileSync(path.join(__dirname, '../src/draply-features.js'), 'utf8');
-// Unique marker that does NOT appear inside overlay.js itself
 const MARKER = 'data-ps-done="1"';
 const INJECT_TAG = `\n<link rel="stylesheet" href="/draply.css">\n<script ${MARKER}>\n${OVERLAY_JS}\n</script>\n<script data-draply-features="1">\n${FEATURES_JS}\n</script>`;
 
@@ -35,12 +35,11 @@ function decode(headers, chunks) {
   });
 }
 
-// Храним CSS в скрытой папке .draply/ чтобы не засорять проект юзера
+// ── Project & Config ──────────────────────────────────────────────────────────
 const projectRoot = process.cwd();
 const draplyDir = path.join(projectRoot, '.draply');
 if (!fs.existsSync(draplyDir)) {
   fs.mkdirSync(draplyDir, { recursive: true });
-  // Добавляем .draply в .gitignore если он есть
   const gitignorePath = path.join(projectRoot, '.gitignore');
   if (fs.existsSync(gitignorePath)) {
     const gi = fs.readFileSync(gitignorePath, 'utf8');
@@ -50,57 +49,250 @@ if (!fs.existsSync(draplyDir)) {
   }
 }
 const overridesPath = path.join(draplyDir, 'overrides.css');
-if (!fs.existsSync(overridesPath)) {
-  fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
+if (!fs.existsSync(overridesPath)) fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
+
+const configPath = path.join(draplyDir, 'config.json');
+function loadConfig() {
+  try { return JSON.parse(fs.readFileSync(configPath, 'utf8')); } catch { return {}; }
+}
+function saveConfig(cfg) {
+  fs.writeFileSync(configPath, JSON.stringify(cfg, null, 2), 'utf8');
+}
+
+// ── File walker ───────────────────────────────────────────────────────────────
+function walkDir(dir, exts, results = []) {
+  try {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const e of entries) {
+      const fp = path.join(dir, e.name);
+      if (e.name.startsWith('.') || e.name === 'node_modules' || e.name === 'dist' || e.name === '.next' || e.name === 'build') continue;
+      if (e.isDirectory()) walkDir(fp, exts, results);
+      else if (exts.some(x => e.name.endsWith(x))) results.push(fp);
+    }
+  } catch { /* skip */ }
+  return results;
 }
 
+// ── Find best source file for a className ─────────────────────────────────────
+function findFileForClass(root, className) {
+  const files = walkDir(root, ['.jsx', '.tsx', '.js', '.ts', '.css', '.scss', '.vue', '.svelte']);
+  for (const f of files) {
+    try {
+      const content = fs.readFileSync(f, 'utf8');
+      if (content.includes(className)) {
+        return { file: f, content, relativePath: path.relative(root, f) };
+      }
+    } catch { /* skip */ }
+  }
+  return null;
+}
+
+// ── Extract class name from CSS selector ──────────────────────────────────────
+function extractClassName(selector) {
+  const parts = selector.split('>').map(s => s.trim());
+  for (let i = parts.length - 1; i >= 0; i--) {
+    const m = parts[i].match(/\.([a-zA-Z][a-zA-Z0-9_-]*)/);
+    if (m) return m[1];
+  }
+  return null;
+}
+
+// ── Call Gemini API ───────────────────────────────────────────────────────────
+function callGemini(apiKey, prompt) {
+  return new Promise((resolve, reject) => {
+    const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
+    const body = JSON.stringify({
+      contents: [{ parts: [{ text: prompt }] }],
+      generationConfig: { temperature: 0.1, maxOutputTokens: 8192 }
+    });
+
+    const parsed = new URL(url);
+    const options = {
+      hostname: parsed.hostname,
+      path: parsed.pathname + parsed.search,
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(body) }
+    };
+
+    const req = https.request(options, res => {
+      const chunks = [];
+      res.on('data', c => chunks.push(c));
+      res.on('end', () => {
+        try {
+          const data = JSON.parse(Buffer.concat(chunks).toString());
+          if (data.error) {
+            reject(new Error(data.error.message || 'Gemini API error'));
+            return;
+          }
+          const text = data.candidates?.[0]?.content?.parts?.[0]?.text || '';
+          resolve(text);
+        } catch (e) { reject(e); }
+      });
+    });
+    req.on('error', reject);
+    req.write(body);
+    req.end();
+  });
+}
 
+// ══════════════════════════════════════════════════════════════════════════════
+// HTTP SERVER
+// ══════════════════════════════════════════════════════════════════════════════
 const server = http.createServer((req, res) => {
 
-  // CORS preflight
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
   if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }
 
-  // ── Draply: Save endpoint — AUTO-APPLY to source files ─────────────────────
-  if (req.url === '/draply-save' && req.method === 'POST') {
+  // ── Config endpoint (get/set API key) ───────────────────────────────────────
+  if (req.url === '/draply-config') {
+    if (req.method === 'GET') {
+      const cfg = loadConfig();
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      // Mask API key for security — only send if it exists
+      res.end(JSON.stringify({ hasKey: !!cfg.apiKey, provider: cfg.provider || 'gemini' }));
+      return;
+    }
+    if (req.method === 'POST') {
+      let body = '';
+      req.on('data', c => body += c);
+      req.on('end', () => {
+        try {
+          const { apiKey, provider } = JSON.parse(body);
+          const cfg = loadConfig();
+          if (apiKey !== undefined) cfg.apiKey = apiKey;
+          if (provider) cfg.provider = provider;
+          saveConfig(cfg);
+          console.log(` \x1b[32m✓\x1b[0m API key saved (${cfg.provider || 'gemini'})`);
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: true }));
+        } catch (e) {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
+    }
+  }
+
+  // ── AI Apply endpoint ───────────────────────────────────────────────────────
+  if (req.url === '/draply-ai-apply' && req.method === 'POST') {
     let body = '';
     req.on('data', c => body += c);
-    req.on('end', () => {
+    req.on('end', async () => {
       try {
         const { changes } = JSON.parse(body);
-        const projectInfo = detectProject(projectRoot);
+        const cfg = loadConfig();
+        if (!cfg.apiKey) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: 'No API key configured. Click ⚙ to set up.' }));
+          return;
+        }
+
         const results = [];
 
+        // Group changes by class
         for (const ch of (changes || [])) {
           if (!ch.selector || !ch.props) continue;
-          const result = autoApplyChange(projectRoot, ch.selector, ch.props, projectInfo);
-          results.push(result);
-          if (result.applied) {
-            console.log(` \x1b[32m✓\x1b[0m Applied: ${result.file} (${result.strategy})`);
-          } else {
-            console.log(` \x1b[33m⚠\x1b[0m Fallback CSS: ${ch.selector.split('>').pop().trim()}`);
+
+          const className = extractClassName(ch.selector);
+          if (!className) {
+            results.push({ selector: ch.selector, ok: false, reason: 'No class name found' });
+            continue;
+          }
+
+          // Find the source file
+          const found = findFileForClass(projectRoot, className);
+          if (!found) {
+            results.push({ selector: ch.selector, ok: false, reason: `"${className}" not found in source files` });
+            continue;
+          }
+
+          console.log(` \x1b[36m🤖\x1b[0m AI applying: .${className} → ${found.relativePath}`);
+
+          // Build the prompt
+          const propsStr = Object.entries(ch.props).map(([k, v]) => `  ${k}: ${v}`).join('\n');
+          const prompt = `You are a code editor. Modify the following source file to apply CSS style changes.
+
+FILE: ${found.relativePath}
+\`\`\`
+${found.content}
+\`\`\`
+
+CHANGES TO APPLY:
+The element with class "${className}" should have these CSS properties:
+${propsStr}
+
+RULES:
+- If the file is CSS/SCSS: find the .${className} rule and update/add the properties. If the rule doesn't exist, add it.
+- If the file is JSX/TSX: apply changes in the most appropriate way for this file:
+  - If the file already uses inline styles for this element, update the style prop
+  - If the file imports a CSS file, add the rule to that CSS file instead (tell me the filename in a comment)
+  - If the file uses Tailwind classes, update the className with appropriate Tailwind classes
+  - Otherwise, add a style prop to the element with className="${className}"
+- Keep ALL existing code intact. Only modify what's needed for the style changes.
+- Do NOT add comments explaining what you changed.
+
+Return ONLY the complete modified file content. No markdown fences, no explanations, just the raw code.`;
+
+          try {
+            const result = await callGemini(cfg.apiKey, prompt);
+
+            // Clean up response — remove markdown fences if AI added them
+            let code = result.trim();
+            if (code.startsWith('```')) {
+              code = code.replace(/^```[a-z]*\n?/, '').replace(/\n?```$/, '');
+            }
+
+            // Safety: don't write empty or tiny responses
+            if (code.length < 20) {
+              results.push({ selector: ch.selector, ok: false, reason: 'AI returned empty/invalid response' });
+              continue;
+            }
+
+            // Write the modified file
+            fs.writeFileSync(found.file, code, 'utf8');
+            console.log(` \x1b[32m✓\x1b[0m Applied to ${found.relativePath}`);
+            results.push({ selector: ch.selector, ok: true, file: found.relativePath });
+
+          } catch (aiErr) {
+            console.log(` \x1b[31m✗\x1b[0m AI error: ${aiErr.message}`);
+            results.push({ selector: ch.selector, ok: false, reason: aiErr.message });
           }
         }
 
-        // Also save CSS override as backup
+        const applied = results.filter(r => r.ok).length;
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true, applied, total: results.length, results }));
+
+      } catch (e) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: e.message }));
+      }
+    });
+    return;
+  }
+
+  // ── Save changes to CSS ─────────────────────────────────────────────────────
+  if (req.url === '/draply-save' && req.method === 'POST') {
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', () => {
+      try {
+        const { changes } = JSON.parse(body);
         const lines = [];
         for (const ch of (changes || [])) {
           if (!ch.selector) continue;
-          const props = Object.entries(ch.props)
-            .map(([k, v]) => `  ${k}: ${v};`)
-            .join('\n');
+          const props = Object.entries(ch.props).map(([k, v]) => `  ${k}: ${v};`).join('\n');
           const label = ch.selector.split('>').pop().trim();
           lines.push(`/* ${label} */\n${ch.selector} {\n${props}\n}`);
         }
         const css = '/* draply — ' + new Date().toLocaleString('ru-RU') + ' */\n\n' + lines.join('\n\n') + '\n';
         fs.writeFileSync(overridesPath, css, 'utf8');
-
-        const applied = results.filter(r => r.applied).length;
-        const total = results.length;
+        console.log(` \x1b[32m✓\x1b[0m Saved ${changes.length} changes to .draply/overrides.css`);
         res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ ok: true, applied, total, results }));
+        res.end(JSON.stringify({ ok: true }));
       } catch (e) {
         res.writeHead(500, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify({ ok: false, error: e.message }));
@@ -109,7 +301,7 @@ const server = http.createServer((req, res) => {
     return;
   }
 
-  // ── Draply: Serve CSS ──────────────────────────────────────────────────────
+  // ── Serve CSS ───────────────────────────────────────────────────────────────
   if (req.url.split('?')[0] === '/draply.css') {
     const isModule = req.headers['sec-fetch-dest'] === 'script' || req.url.includes('import');
     try {
@@ -121,7 +313,7 @@ const server = http.createServer((req, res) => {
         res.writeHead(200, { 'Content-Type': 'text/css', 'cache-control': 'no-store' });
         res.end(css);
       }
-    } catch (e) {
+    } catch {
       if (isModule) {
         res.writeHead(200, { 'Content-Type': 'application/javascript' });
         res.end('export default {};');
@@ -133,33 +325,7 @@ const server = http.createServer((req, res) => {
     return;
   }
 
-  // ── Draply: Project Info endpoint ──────────────────────────────────────────
-  if (req.url === '/draply-project-info' && req.method === 'GET') {
-    const info = detectProject(projectRoot);
-    res.writeHead(200, { 'Content-Type': 'application/json' });
-    res.end(JSON.stringify(info));
-    return;
-  }
-
-  // ── Draply: Find Source endpoint ──────────────────────────────────────────
-  if (req.url === '/draply-find-source' && req.method === 'POST') {
-    let body = '';
-    req.on('data', c => body += c);
-    req.on('end', () => {
-      try {
-        const { selector, tagName, className } = JSON.parse(body);
-        const result = findSourceFile(projectRoot, { selector, tagName, className });
-        res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify(result));
-      } catch (e) {
-        res.writeHead(500, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ found: false, error: e.message }));
-      }
-    });
-    return;
-  }
-
-  // ── Proxy to dev server ────────────────────────────────────────────────────
+  // ── Proxy to dev server ─────────────────────────────────────────────────────
   const opts = {
     hostname: targetHost,
     port: targetPort,
@@ -196,8 +362,8 @@ const server = http.createServer((req, res) => {
   pReq.on('error', () => {
     res.writeHead(502, { 'Content-Type': 'text/html' });
     res.end(`<!DOCTYPE html><html><body style="background:#0a0a0f;color:#e8e8f0;font-family:monospace;padding:60px;text-align:center">
-      <h2 style="color:#ff6b6b">⚠ Не могу достучаться до ${targetHost}:${targetPort}</h2>
-      <p style="color:#555;margin-top:16px">Убедись что dev сервер запущен, потом обнови страницу</p>
+      <h2 style="color:#ff6b6b">⚠ Can't reach ${targetHost}:${targetPort}</h2>
+      <p style="color:#555;margin-top:16px">Make sure your dev server is running, then refresh</p>
       <script>setTimeout(()=>location.reload(), 2000)</script>
     </body></html>`);
   });
@@ -206,435 +372,10 @@ const server = http.createServer((req, res) => {
 });
 
 server.listen(proxyPort, () => {
-  console.log('\n \x1b[32m●\x1b[0m Draply запущен\n');
-  console.log(` Твой проект  →  \x1b[36mhttp://${targetHost}:${targetPort}\x1b[0m`);
-  console.log(` Открой это  →  \x1b[33mhttp://localhost:${proxyPort}\x1b[0m  \x1b[32m← вот сюда заходи!\x1b[0m\n`);
-  console.log(` \x1b[90mCtrl+C чтобы остановить\x1b[0m\n`);
+  console.log('\n \x1b[32m●\x1b[0m Draply running\n');
+  console.log(` Your project  →  \x1b[36mhttp://${targetHost}:${targetPort}\x1b[0m`);
+  console.log(` Open this     →  \x1b[33mhttp://localhost:${proxyPort}\x1b[0m  \x1b[32m← go here!\x1b[0m\n`);
+  console.log(` \x1b[90mCtrl+C to stop\x1b[0m\n`);
 });
 
-process.on('SIGINT', () => { console.log('\n \x1b[90mDraply остановлен\x1b[0m\n'); process.exit(0); });
-
-// ══════════════════════════════════════════════════════════════════════════
-// PROJECT DETECTION
-// ══════════════════════════════════════════════════════════════════════════
-function detectProject(root) {
-  const result = { framework: 'unknown', cssStrategy: 'unknown', root };
-
-  try {
-    const pkgPath = path.join(root, 'package.json');
-    if (!fs.existsSync(pkgPath)) return result;
-
-    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
-
-    // Detect framework
-    if (allDeps['next']) result.framework = 'next';
-    else if (allDeps['react']) result.framework = 'react';
-    else if (allDeps['nuxt']) result.framework = 'nuxt';
-    else if (allDeps['vue']) result.framework = 'vue';
-    else if (allDeps['@angular/core']) result.framework = 'angular';
-    else if (allDeps['svelte']) result.framework = 'svelte';
-    else if (allDeps['vite']) result.framework = 'vite';
-
-    // Detect CSS strategy
-    if (allDeps['tailwindcss']) result.cssStrategy = 'tailwind';
-    else if (allDeps['styled-components']) result.cssStrategy = 'styled-components';
-    else if (allDeps['@emotion/react'] || allDeps['@emotion/styled']) result.cssStrategy = 'emotion';
-    else if (allDeps['sass'] || allDeps['node-sass']) result.cssStrategy = 'sass';
-    else {
-      // Check for CSS modules (usually enabled by default in React/Next)
-      if (['react', 'next'].includes(result.framework)) {
-        result.cssStrategy = 'css-modules';
-      } else {
-        result.cssStrategy = 'external';
-      }
-    }
-  } catch { /* ignore */ }
-
-  return result;
-}
-
-// ══════════════════════════════════════════════════════════════════════════
-// SOURCE FILE FINDER
-// ══════════════════════════════════════════════════════════════════════════
-function findSourceFile(root, { selector, tagName, className }) {
-  const result = { found: false, file: null, line: null, hint: '' };
-
-  try {
-    const srcDirs = ['src', 'app', 'pages', 'components', 'lib'];
-    const extensions = ['.tsx', '.jsx', '.vue', '.svelte', '.js', '.ts'];
-    const searchTerm = className || tagName || '';
-
-    if (!searchTerm) {
-      result.hint = 'Select an element with a class name for better results.';
-      return result;
-    }
-
-    for (const dir of srcDirs) {
-      const dirPath = path.join(root, dir);
-      if (!fs.existsSync(dirPath)) continue;
-
-      const files = walkDir(dirPath, extensions);
-      for (const file of files) {
-        try {
-          const content = fs.readFileSync(file, 'utf8');
-          const lines = content.split('\n');
-          for (let i = 0; i < lines.length; i++) {
-            if (lines[i].includes(searchTerm)) {
-              result.found = true;
-              result.file = path.relative(root, file);
-              result.line = i + 1;
-              result.hint = `Found "${searchTerm}" at ${result.file}:${result.line}`;
-              return result;
-            }
-          }
-        } catch { /* skip unreadable files */ }
-      }
-    }
-
-    result.hint = `Could not find "${searchTerm}" in source files.`;
-  } catch (e) {
-    result.hint = 'Error searching source files: ' + e.message;
-  }
-
-  return result;
-}
-
-function walkDir(dir, extensions, results = []) {
-  try {
-    const entries = fs.readdirSync(dir, { withFileTypes: true });
-    for (const entry of entries) {
-      const fullPath = path.join(dir, entry.name);
-      if (entry.name.startsWith('.') || entry.name === 'node_modules' || entry.name === '.next' || entry.name === 'dist') continue;
-      if (entry.isDirectory()) {
-        walkDir(fullPath, extensions, results);
-      } else if (extensions.some(ext => entry.name.endsWith(ext))) {
-        results.push(fullPath);
-      }
-    }
-  } catch { /* ignore */ }
-  return results;
-}
-
-// ══════════════════════════════════════════════════════════════════════════
-// AUTO-APPLY CHANGES TO SOURCE FILES
-// ══════════════════════════════════════════════════════════════════════════
-
-function autoApplyChange(root, selector, props, projectInfo) {
-  const result = { selector, applied: false, file: null, strategy: null, reason: '' };
-
-  // 1. Extract class name from selector
-  const className = extractClassName(selector);
-  if (!className) {
-    result.reason = 'No class name in selector';
-    return result;
-  }
-
-  // 2. Try: find existing CSS rule and modify it
-  const cssResult = findAndModifyCSSRule(root, className, props);
-  if (cssResult.applied) {
-    result.applied = true;
-    result.file = path.relative(root, cssResult.file);
-    result.strategy = 'css-modify';
-    return result;
-  }
-
-  // 3. Try: find JSX component using this class → find its CSS import → add rule there
-  const importResult = findCSSImportAndAppend(root, className, props);
-  if (importResult.applied) {
-    result.applied = true;
-    result.file = path.relative(root, importResult.file);
-    result.strategy = 'css-append';
-    return result;
-  }
-
-  // 4. Try: modify inline style in JSX
-  const inlineResult = modifyInlineStyle(root, className, props);
-  if (inlineResult.applied) {
-    result.applied = true;
-    result.file = path.relative(root, inlineResult.file);
-    result.strategy = 'inline-style';
-    return result;
-  }
-
-  // 5. Fallback: find any CSS file in project and append
-  const fallbackResult = appendToAnyCSSFile(root, className, props);
-  if (fallbackResult.applied) {
-    result.applied = true;
-    result.file = path.relative(root, fallbackResult.file);
-    result.strategy = 'css-fallback';
-    return result;
-  }
-
-  result.reason = 'Could not find target file for ' + className;
-  return result;
-}
-
-// Extract the most specific class name from a CSS selector
-function extractClassName(selector) {
-  // Selector like: #root > div > section.nexus-hero > h1.title
-  const parts = selector.split('>').map(s => s.trim());
-  // Try from the end — most specific first
-  for (let i = parts.length - 1; i >= 0; i--) {
-    const classMatch = parts[i].match(/\.([a-zA-Z][a-zA-Z0-9_-]*)/);
-    if (classMatch) return classMatch[1];
-  }
-  return null;
-}
-
-// Strategy 1: Find existing CSS rule in .css/.scss files and modify it
-function findAndModifyCSSRule(root, className, props) {
-  const cssFiles = walkDir(root, ['.css', '.scss', '.sass', '.less']);
-  const ruleRegex = new RegExp(
-    `(\\.${escapeRegex(className)}\\s*\\{)([^}]*)(\\})`, 's'
-  );
-
-  for (const file of cssFiles) {
-    // Skip node_modules, .draply, etc
-    const rel = path.relative(root, file);
-    if (rel.includes('node_modules') || rel.includes('.draply')) continue;
-
-    try {
-      let content = fs.readFileSync(file, 'utf8');
-      const match = content.match(ruleRegex);
-      if (!match) continue;
-
-      // Found the rule — modify it
-      const existingBlock = match[2];
-      let newBlock = existingBlock;
-
-      for (const [prop, val] of Object.entries(props)) {
-        const propRegex = new RegExp(`(${escapeRegex(prop)}\\s*:\\s*)([^;]+)(;)`, 'g');
-        if (propRegex.test(newBlock)) {
-          // Property exists — update value
-          newBlock = newBlock.replace(
-            new RegExp(`(${escapeRegex(prop)}\\s*:\\s*)([^;]+)(;)`, 'g'),
-            `$1${val}$3`
-          );
-        } else {
-          // Property doesn't exist — add it
-          newBlock = newBlock.trimEnd() + `\n  ${prop}: ${val};\n`;
-        }
-      }
-
-      content = content.replace(ruleRegex, `$1${newBlock}$3`);
-      fs.writeFileSync(file, content, 'utf8');
-
-      return { applied: true, file };
-    } catch { /* skip */ }
-  }
-
-  return { applied: false };
-}
-
-// Strategy 2: Find the JSX component using className, find its CSS import, append rule
-function findCSSImportAndAppend(root, className, props) {
-  const jsxFiles = walkDir(root, ['.jsx', '.tsx', '.js', '.ts']);
-
-  for (const jsxFile of jsxFiles) {
-    const rel = path.relative(root, jsxFile);
-    if (rel.includes('node_modules')) continue;
-
-    try {
-      const content = fs.readFileSync(jsxFile, 'utf8');
-
-      // Check if this component uses the className
-      if (!content.includes(className)) continue;
-
-      // Find CSS imports in this file
-      // Matches: import './styles.css' or import styles from './styles.module.css' or require('./styles.css')
-      const importRegex = /(?:import\s+(?:\w+\s+from\s+)?['"]([^'"]+\.(?:css|scss|sass|less))['"]|require\(['"]([^'"]+\.(?:css|scss|sass|less))['"]\))/g;
-      let importMatch;
-      const cssImports = [];
-
-      while ((importMatch = importRegex.exec(content)) !== null) {
-        const importPath = importMatch[1] || importMatch[2];
-        const fullCSSPath = path.resolve(path.dirname(jsxFile), importPath);
-        if (fs.existsSync(fullCSSPath)) {
-          cssImports.push(fullCSSPath);
-        }
-      }
-
-      if (cssImports.length === 0) continue;
-
-      // Append rule to the first CSS import
-      const targetCSS = cssImports[0];
-      const newRule = `\n/* Draply: .${className} */\n.${className} {\n${formatProps(props)}\n}\n`;
-
-      let cssContent = fs.readFileSync(targetCSS, 'utf8');
-
-      // Check if rule already exists (might have been added before)
-      if (cssContent.includes(`.${className}`)) {
-        // Modify existing rule instead
-        return findAndModifyCSSRuleSingle(targetCSS, className, props);
-      }
-
-      cssContent += newRule;
-      fs.writeFileSync(targetCSS, cssContent, 'utf8');
-
-      return { applied: true, file: targetCSS };
-    } catch { /* skip */ }
-  }
-
-  return { applied: false };
-}
-
-// Helper: modify rule in a specific file
-function findAndModifyCSSRuleSingle(file, className, props) {
-  const ruleRegex = new RegExp(
-    `(\\.${escapeRegex(className)}\\s*\\{)([^}]*)(\\})`, 's'
-  );
-  try {
-    let content = fs.readFileSync(file, 'utf8');
-    const match = content.match(ruleRegex);
-    if (!match) return { applied: false };
-
-    let newBlock = match[2];
-    for (const [prop, val] of Object.entries(props)) {
-      const propRegex = new RegExp(`(${escapeRegex(prop)}\\s*:\\s*)([^;]+)(;)`, 'g');
-      if (propRegex.test(newBlock)) {
-        newBlock = newBlock.replace(
-          new RegExp(`(${escapeRegex(prop)}\\s*:\\s*)([^;]+)(;)`, 'g'),
-          `$1${val}$3`
-        );
-      } else {
-        newBlock = newBlock.trimEnd() + `\n  ${prop}: ${val};\n`;
-      }
-    }
-    content = content.replace(ruleRegex, `$1${newBlock}$3`);
-    fs.writeFileSync(file, content, 'utf8');
-    return { applied: true, file };
-  } catch { return { applied: false }; }
-}
-
-// Strategy 3: Add inline style to JSX element
-function modifyInlineStyle(root, className, props) {
-  const jsxFiles = walkDir(root, ['.jsx', '.tsx']);
-
-  for (const file of jsxFiles) {
-    const rel = path.relative(root, file);
-    if (rel.includes('node_modules')) continue;
-
-    try {
-      let content = fs.readFileSync(file, 'utf8');
-      if (!content.includes(className)) continue;
-
-      // Find element with this className
-      // Pattern: className="...nexus-hero..." or className={'...nexus-hero...'}
-      const elementRegex = new RegExp(
-        `(<[a-zA-Z][a-zA-Z0-9]*[^>]*className=["'{][^"'}]*${escapeRegex(className)}[^"'}]*["'}])([^>]*>|\\s*/>)`,
-        's'
-      );
-
-      const match = content.match(elementRegex);
-      if (!match) continue;
-
-      const fullTag = match[0];
-      const jsxProps = propsToJSXStyle(props);
-
-      // Check if element already has a style prop
-      if (fullTag.includes('style=')) {
-        // Modify existing style prop — add/update properties
-        const styleRegex = /style=\{\{([^}]*)\}\}/;
-        const styleMatch = fullTag.match(styleRegex);
-        if (styleMatch) {
-          let existingStyles = styleMatch[1];
-          for (const [camelProp, val] of Object.entries(jsxProps)) {
-            const propRegex = new RegExp(`${camelProp}\\s*:\\s*['"][^'"]*['"]`, 'g');
-            if (propRegex.test(existingStyles)) {
-              existingStyles = existingStyles.replace(propRegex, `${camelProp}: '${val}'`);
-            } else {
-              existingStyles = existingStyles.trim();
-              if (existingStyles && !existingStyles.endsWith(',')) existingStyles += ',';
-              existingStyles += ` ${camelProp}: '${val}'`;
-            }
-          }
-          const newTag = fullTag.replace(styleRegex, `style={{${existingStyles}}}`);
-          content = content.replace(fullTag, newTag);
-        }
-      } else {
-        // Add new style prop
-        const styleStr = Object.entries(jsxProps)
-          .map(([k, v]) => `${k}: '${v}'`)
-          .join(', ');
-        const insertion = ` style={{${styleStr}}}`;
-        // Insert before the closing > or />
-        const newTag = fullTag.replace(match[2], insertion + match[2]);
-        content = content.replace(fullTag, newTag);
-      }
-
-      fs.writeFileSync(file, content, 'utf8');
-      return { applied: true, file };
-    } catch { /* skip */ }
-  }
-
-  return { applied: false };
-}
-
-// Strategy 4: Find any CSS file in the project and append the rule
-function appendToAnyCSSFile(root, className, props) {
-  // Priority: index.css, App.css, globals.css, main.css, styles.css
-  const candidates = [
-    'src/index.css', 'src/App.css', 'src/app/globals.css', 'src/globals.css',
-    'src/main.css', 'src/styles.css', 'styles/globals.css', 'app/globals.css',
-    'src/styles/globals.css'
-  ];
-
-  for (const candidate of candidates) {
-    const fullPath = path.join(root, candidate);
-    if (fs.existsSync(fullPath)) {
-      try {
-        let content = fs.readFileSync(fullPath, 'utf8');
-        // Check if rule already exists
-        if (content.includes(`.${className}`)) {
-          return findAndModifyCSSRuleSingle(fullPath, className, props);
-        }
-        const newRule = `\n/* Draply: .${className} */\n.${className} {\n${formatProps(props)}\n}\n`;
-        content += newRule;
-        fs.writeFileSync(fullPath, content, 'utf8');
-        return { applied: true, file: fullPath };
-      } catch { /* skip */ }
-    }
-  }
-
-  // Last resort: find ANY css file
-  const allCSS = walkDir(root, ['.css']);
-  for (const file of allCSS) {
-    const rel = path.relative(root, file);
-    if (rel.includes('node_modules') || rel.includes('.draply') || rel.includes('.next')) continue;
-    try {
-      let content = fs.readFileSync(file, 'utf8');
-      if (content.includes(`.${className}`)) {
-        return findAndModifyCSSRuleSingle(file, className, props);
-      }
-      const newRule = `\n/* Draply: .${className} */\n.${className} {\n${formatProps(props)}\n}\n`;
-      content += newRule;
-      fs.writeFileSync(file, content, 'utf8');
-      return { applied: true, file };
-    } catch { /* skip */ }
-  }
-
-  return { applied: false };
-}
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-function escapeRegex(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-function formatProps(props) {
-  return Object.entries(props).map(([k, v]) => `  ${k}: ${v};`).join('\n');
-}
-
-function camelCase(str) {
-  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-}
-
-function propsToJSXStyle(props) {
-  const result = {};
-  for (const [prop, val] of Object.entries(props)) {
-    result[camelCase(prop)] = val;
-  }
-  return result;
-}
+process.on('SIGINT', () => { console.log('\n \x1b[90mDraply stopped\x1b[0m\n'); process.exit(0); });