draply-dev 1.1.1 → 1.2.0

package/bin/cli.js

@@ -63,13 +63,28 @@ const server = http.createServer((req, res) => {
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
   if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }
 
-  // ── Draply: Save endpoint ──────────────────────────────────────────────────
+  // ── Draply: Save endpoint — AUTO-APPLY to source files ─────────────────────
   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 projectInfo = detectProject(projectRoot);
+        const results = [];
+
+        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()}`);
+          }
+        }
+
+        // Also save CSS override as backup
         const lines = [];
         for (const ch of (changes || [])) {
           if (!ch.selector) continue;
@@ -77,15 +92,15 @@ const server = http.createServer((req, res) => {
             .map(([k, v]) => `  ${k}: ${v};`)
             .join('\n');
           const label = ch.selector.split('>').pop().trim();
-          lines.push(`/* ${label} */
-${ch.selector} {
-${props}
-}`);
+          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;
         res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ ok: true }));
+        res.end(JSON.stringify({ ok: true, applied, total, results }));
       } catch (e) {
         res.writeHead(500, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify({ ok: false, error: e.message }));
@@ -300,3 +315,326 @@ function walkDir(dir, extensions, results = []) {
   } 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draply-dev",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Visual overlay for any frontend project — move, resize, restyle live in the browser, save to CSS",
   "author": "Arman",
   "type": "commonjs",

package/src/draply-features.js

@@ -56,7 +56,12 @@
         flex-direction: column;
         gap: 8px;
         padding: 8px 0;
+        max-height: 250px;
+        overflow-y: auto;
       }
+      #__ps_diff_panel__::-webkit-scrollbar { width: 4px; }
+      #__ps_diff_panel__::-webkit-scrollbar-track { background: transparent; }
+      #__ps_diff_panel__::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 2px; }
       #__ps_diff_panel__.v { display: flex; }
 
       .ps-diff-empty {
@@ -184,7 +189,12 @@
         flex-direction: column;
         gap: 8px;
         padding: 8px 0;
+        max-height: 250px;
+        overflow-y: auto;
       }
+      #__ps_export_panel__::-webkit-scrollbar { width: 4px; }
+      #__ps_export_panel__::-webkit-scrollbar-track { background: transparent; }
+      #__ps_export_panel__::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 2px; }
       #__ps_export_panel__.v { display: flex; }
 
       .ps-export-format-tabs {

package/src/overlay.js

@@ -1531,14 +1531,27 @@
   }
 
   sv.addEventListener('click', () => {
+    toast('⏳ Applying changes to source...');
     fetch('/draply-save', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ changes: state.changes })
     }).then(r => r.json()).then(d => {
-      if (d.ok) toast('Сохранено в draply.css');
-      else toast('⚠ Ошибка: ' + (d.error || 'unknown'));
-    }).catch(() => toast('⚠ Сервер недоступен'));
+      if (d.ok) {
+        if (d.applied > 0) {
+          toast(`✅ Applied to ${d.applied}/${d.total} source files!`);
+          // Log details to console
+          (d.results || []).forEach(r => {
+            if (r.applied) console.log(`[Draply] ✓ ${r.file} (${r.strategy})`);
+            else console.log(`[Draply] ⚠ ${r.selector}: ${r.reason}`);
+          });
+        } else {
+          toast('💾 Saved to CSS override (no source files found)');
+        }
+      } else {
+        toast('⚠ Error: ' + (d.error || 'unknown'));
+      }
+    }).catch(() => toast('⚠ Server unavailable'));
     state.changes = []; history.length = 0; sv.disabled = true; updateUnsUI();
   });