draply-dev 1.3.0 → 1.3.2

package/bin/cli.js

@@ -100,7 +100,7 @@ function extractClassName(selector) {
 // ── 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 url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-lite:generateContent?key=${apiKey}`;
     const body = JSON.stringify({
       contents: [{ parts: [{ text: prompt }] }],
       generationConfig: { temperature: 0.1, maxOutputTokens: 8192 }
@@ -190,30 +190,40 @@ const server = http.createServer((req, res) => {
           return;
         }
 
+        // Group changes by file
         const results = [];
+        const fileChanges = new Map(); // file -> { found, allProps }
 
-        // Group changes by class
         for (const ch of (changes || [])) {
           if (!ch.selector || !ch.props) continue;
-
           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` });
+            results.push({ selector: ch.selector, ok: false, reason: `"${className}" not found in source` });
             continue;
           }
+          if (!fileChanges.has(found.file)) {
+            fileChanges.set(found.file, { found, items: [] });
+          }
+          fileChanges.get(found.file).items.push({ selector: ch.selector, className, props: ch.props });
+        }
+
+        // One AI call per file (saves tokens & rate limit)
+        for (const [filePath, { found, items }] of fileChanges) {
+          console.log(` \x1b[36m🤖\x1b[0m AI applying ${items.length} changes → ${found.relativePath}`);
 
-          console.log(` \x1b[36m🤖\x1b[0m AI applying: .${className} → ${found.relativePath}`);
+          // Build combined prompt
+          let changesBlock = '';
+          items.forEach(item => {
+            const propsStr = Object.entries(item.props).map(([k, v]) => `  ${k}: ${v}`).join('\n');
+            changesBlock += `\nElement .${item.className}:\n${propsStr}\n`;
+          });
 
-          // 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.
+          const prompt = `You are a code editor. Modify the file to apply CSS style changes.
 
 FILE: ${found.relativePath}
 \`\`\`
@@ -221,44 +231,35 @@ ${found.content}
 \`\`\`
 
 CHANGES TO APPLY:
-The element with class "${className}" should have these CSS properties:
-${propsStr}
-
+${changesBlock}
 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.
+- If CSS/SCSS file: find each class rule and update/add properties. Add rules if missing.
+- If JSX/TSX file: apply in the most appropriate way:
+  - Existing inline styles → update them
+  - File imports CSS → note which CSS file to edit
+  - Tailwind classes → update className with Tailwind classes
+  - Otherwise → add style prop
+- Keep ALL existing code intact. Only modify what's needed.
+- Do NOT add extra comments.
 
-Return ONLY the complete modified file content. No markdown fences, no explanations, just the raw code.`;
+Return ONLY the complete modified file. No markdown fences, no explanations.`;
 
           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' });
+              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned 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 });
-
+            items.forEach(item => results.push({ selector: item.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 });
+            items.forEach(item => results.push({ selector: item.selector, ok: false, reason: aiErr.message }));
           }
         }
 

package/package.json

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