draply-dev 1.3.6 → 1.3.7

package/bin/cli.js

@@ -282,7 +282,7 @@ const server = http.createServer((req, res) => {
             changesBlock += `\nElement .${item.className}:\n${propsStr}\n`;
           });
 
-          const prompt = `You are a code editor. I need to apply CSS style changes to a file.
+          const prompt = `You are a strict code editor. I need to apply CSS style changes to a file.
 
 FILE: ${found.relativePath} (lines ${contextStart + 1}-${contextEnd + 1})
 \`\`\`
@@ -291,37 +291,41 @@ ${snippet}
 
 CHANGES:
 ${changesBlock}
-IMPORTANT: Return ONLY a JSON array of search-and-replace pairs. Each pair is:
-{"search": "exact existing code to find", "replace": "modified code to replace it with"}
+IMPORTANT: Return ONLY a JSON array of search-and-replace pairs. Each pair format:
+{"search": "exact code to find", "replace": "modified code to replace it with"}
 
 Rules:
-- "search" must be an EXACT substring from the file above (copy it precisely)
-- "search" should be minimal — just the line(s) that need changing
-- For CSS: modify the class rule properties. If rule doesn't exist, set search to the closing bracket of the nearest rule and add the new rule after it.
-- For JSX with className: add/update the style prop on that element
-- For JSX with imported CSS: add CSS rules (search for the import line, replace with import + note)
-- Keep changes minimal
+- "search" must be an EXACT substring from the file above (copy it precisely).
+- Ensure all double quotes inside JSON string values are properly escaped (\\").
+- Do NOT include markdown fences, preambles, or explanations. Only the JSON array.
+- For CSS: modify the class rule.
+- For JSX with className: add/update the style prop on the element. Do not remove existing classes.
 
 Example response:
-[{"search": "className=\\"hero\\"", "replace": "className=\\"hero\\" style={{color: 'red', fontSize: '20px'}}"}]
-
-Return ONLY valid JSON array. No markdown, no explanation.`;
+[
+  {
+    "search": "<section className=\\"hero\\">",
+    "replace": "<section className=\\"hero\\" style={{ color: '#ff0000' }}>"
+  }
+]`;
 
           try {
             const result = await callAI(cfg.apiKey, prompt, cfg.provider || 'groq');
+            
+            // Extract JSON array using regex to ignore any surrounding text/markdown
             let jsonStr = result.trim();
-            // Clean markdown fences if present
-            if (jsonStr.startsWith('```')) {
-              jsonStr = jsonStr.replace(/^```[a-z]*\n?/, '').replace(/\n?```$/, '');
+            const match = jsonStr.match(/\[[\s\S]*\]/);
+            if (match) {
+              jsonStr = match[0];
             }
 
             let patches;
             try {
               patches = JSON.parse(jsonStr);
-            } catch {
+            } catch (err) {
               console.log(` \x1b[31m✗\x1b[0m AI returned invalid JSON`);
-              console.log(`   Response: ${jsonStr.substring(0, 200)}`);
-              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned invalid JSON' }));
+              console.log(`   Response: ${jsonStr.substring(0, 300)}`);
+              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned invalid JSON: ' + err.message }));
               continue;
             }
 

package/package.json

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