draply-dev 1.3.7 → 1.3.9

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 strict code editor. I need to apply CSS style changes to a file.
+          const prompt = `You are a strict code editor applying style changes to a file.
 
 FILE: ${found.relativePath} (lines ${contextStart + 1}-${contextEnd + 1})
 \`\`\`
@@ -291,41 +291,47 @@ ${snippet}
 
 CHANGES:
 ${changesBlock}
-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"}
+IMPORTANT: Return your changes wrapped in <patch> tags containing <search> and <replace> blocks. DO NOT use JSON.
 
 Rules:
-- "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.
+- The content inside <search> must be an EXACT substring from the file snippet above.
+- If adding properties to an existing CSS rule or JS object (like a style object), you MUST REPLACE the old values for those properties if they already exist. DO NOT CREATE DUPLICATE KEYS.
+- If the file is JSX, update the style object/prop without duplicating properties.
 
 Example response:
-[
-  {
-    "search": "<section className=\\"hero\\">",
-    "replace": "<section className=\\"hero\\" style={{ color: '#ff0000' }}>"
-  }
-]`;
+<patch>
+<search>
+  <section className="hero" style={{ padding: '10px' }}>
+</search>
+<replace>
+  <section className="hero" style={{ padding: '10px', color: '#ff0000' }}>
+</replace>
+</patch>
+
+Return ONLY the patch blocks.`;
 
           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();
-            const match = jsonStr.match(/\[[\s\S]*\]/);
-            if (match) {
-              jsonStr = match[0];
+            const patches = [];
+            const patchRegex = /<search>([\s\S]*?)<\/search>[\s\S]*?<replace>([\s\S]*?)<\/replace>/g;
+            let match;
+            while ((match = patchRegex.exec(result)) !== null) {
+              let s = match[1];
+              let r = match[2];
+              // Remove exactly one leading/trailing newline if AI added them around the tags
+              if (s.startsWith('\n')) s = s.substring(1);
+              if (s.endsWith('\n')) s = s.substring(0, s.length - 1);
+              if (r.startsWith('\n')) r = r.substring(1);
+              if (r.endsWith('\n')) r = r.substring(0, r.length - 1);
+              
+              if (s.trim()) patches.push({ search: s, replace: r });
             }
 
-            let patches;
-            try {
-              patches = JSON.parse(jsonStr);
-            } catch (err) {
-              console.log(` \x1b[31m✗\x1b[0m 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 }));
+            if (patches.length === 0) {
+              console.log(` \x1b[31m✗\x1b[0m AI returned no readable patches`);
+              console.log(`   Response: ${result.substring(0, 300)}`);
+              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI returned no format matches' }));
               continue;
             }
 

package/package.json

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