draply-dev 1.0.7 → 1.0.8

package/bin/cli.js

@@ -11,6 +11,7 @@ const targetPort = parseInt(args[0]) || 3000;
 const proxyPort = parseInt(args[1]) || 4000;
 const targetHost = args[2] || 'localhost';
 
+const pkg = require('../package.json');
 const OVERLAY_JS = fs.readFileSync(path.join(__dirname, '../src/overlay.js'), 'utf8');
 // Unique marker that does NOT appear inside overlay.js itself
 const MARKER = 'data-ps-done="1"';
@@ -126,22 +127,27 @@ const server = http.createServer((req, res) => {
         }
 
         // 2. Call AI per file using XML Patches
-        for (const [filePath, { content, items }] of fileMap) {
+        for (const [filePath, { content: rawContent, items }] of fileMap) {
           
           let changesBlock = '';
+          const content = rawContent.replace(/\r\n/g, '\n');
           const lines = content.split('\n');
           let classNamesToFind = items.map(c => {
              const parts = c.selector.split('.');
              return parts.length > 1 ? parts.pop() : '';
           }).filter(Boolean);
 
-          let ctxStart = 0, ctxEnd = lines.length - 1;
+          let ctxStart = -1, ctxEnd = -1;
           for (let i = 0; i < lines.length; i++) {
-             if (classNamesToFind.some(cls => lines[i].includes(cls))) {
-               ctxStart = Math.max(0, i - 25);
-               ctxEnd = Math.min(lines.length - 1, i + 25);
+             if (classNamesToFind.some(cls => lines[i].includes(cls)) || (items.length === 1 && items[0].selector && lines[i].includes(items[0].selector.split('#').pop()))) {
+               const s = Math.max(0, i - 40);
+               const e = Math.min(lines.length - 1, i + 40);
+               if (ctxStart === -1 || s < ctxStart) ctxStart = s;
+               if (ctxEnd === -1 || e > ctxEnd) ctxEnd = e;
              }
           }
+          if (ctxStart === -1) { ctxStart = 0; ctxEnd = Math.min(lines.length - 1, 150); }
+          
           const snippet = lines.slice(ctxStart, ctxEnd + 1).join('\n');
 
           items.forEach(item => {
@@ -162,7 +168,7 @@ ${changesBlock}
 IMPORTANT: Return your changes wrapped in <patch> tags containing <search> and <replace> blocks. DO NOT use JSON.
 
 Rules:
-- The content inside <search> must be an EXACT substring from the file snippet above.
+- The content inside <search> must be an EXACT substring from the file snippet above (including indentation).
 - Update HTML/JSX inline styles or Tailwind classes appropriately.
 - REPLACE old style values if they exist, DO NOT duplicate keys!
 
@@ -209,10 +215,8 @@ Return ONLY the patch blocks.`;
              let match;
              while ((match = patchRegex.exec(apiResult)) !== null) {
                let s = match[1], r = match[2];
-               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);
+               s = s.replace(/^\n+/, '').replace(/\n+$/, '').replace(/\r/g, '');
+               r = r.replace(/^\n+/, '').replace(/\n+$/, '').replace(/\r/g, '');
                if (s.trim()) patches.push({ search: s, replace: r });
              }
 
@@ -225,7 +229,7 @@ Return ONLY the patch blocks.`;
                } else {
                  // Fallback to whitespace-agnostic matching
                  const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-                 const looseRegexStr = escapeRegExp(patch.search.trim()).replace(/\\s+/g, '\\s+');
+                 const looseRegexStr = escapeRegExp(patch.search.trim()).replace(/\s+/g, '\\s+');
                  const looseRegex = new RegExp(looseRegexStr);
                  if (looseRegex.test(newContent)) {
                    newContent = newContent.replace(looseRegex, patch.replace);
@@ -235,13 +239,17 @@ Return ONLY the patch blocks.`;
              }
 
              if (applied > 0) {
-               fs.writeFileSync(filePath, newContent, 'utf8');
-               console.log(` \x1b[32m✓\x1b[0m Modified ${path.basename(filePath)}`);
-               items.forEach(item => results.push({ selector: item.selector, ok: true }));
+                // Restore original line endings if they were \r\n
+                const finalContent = rawContent.includes('\r\n') ? newContent.replace(/\n/g, '\r\n') : newContent;
+                fs.writeFileSync(filePath, finalContent, 'utf8');
+                console.log(` \x1b[32m✓\x1b[0m Modified ${path.basename(filePath)} (${applied} patch(es))`);
+                items.forEach(item => results.push({ selector: item.selector, ok: true }));
              } else {
-               items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI patch failed to match' }));
+                console.warn(` \x1b[33m⚠\x1b[0m AI matched 0 patches in ${path.basename(filePath)}`);
+                items.forEach(item => results.push({ selector: item.selector, ok: false, reason: 'AI patch failed to match' }));
              }
           } catch (e) {
+             console.error(` \x1b[31m✖\x1b[0m AI Error for ${path.basename(filePath)}:`, e.message);
              items.forEach(item => results.push({ selector: item.selector, ok: false, reason: e.message }));
           }
         }
@@ -331,10 +339,20 @@ Return ONLY the patch blocks.`;
 });
 
 server.listen(proxyPort, () => {
-  console.log('\n \x1b[32m●\x1b[0m Draply запущен\n');
+  console.log(`\n \x1b[32m●\x1b[0m Draply v${pkg.version} запущен\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`);
 });
 
+server.on('error', (e) => {
+  if (e.code === 'EADDRINUSE') {
+    console.error(`\x1b[31m✖ Ошибка: Порт ${proxyPort} уже занят.\x1b[0m`);
+    console.log(`Попробуй другой порт: \x1b[33mnpx draply ${targetPort} ${proxyPort + 1}\x1b[0m`);
+  } else {
+    console.error(`\x1b[31m✖ Ошибка сервера:\x1b[0m`, e.message);
+  }
+  process.exit(1);
+});
+
 process.on('SIGINT', () => { console.log('\n \x1b[90mDraply остановлен\x1b[0m\n'); process.exit(0); });

package/package.json

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