draply-dev 1.4.2 → 1.4.4

package/bin/cli.js

@@ -211,7 +211,16 @@ const server = http.createServer((req, res) => {
                if (ctxEnd === -1 || e > ctxEnd) ctxEnd = e;
              }
           }
-          if (ctxStart === -1) { ctxStart = 0; ctxEnd = Math.min(lines.length - 1, 150); }
+          if (ctxStart === -1 && items.some(c => c.type === 'create')) {
+             for (let i = lines.length - 1; i >= 0; i--) {
+                if (lines[i].includes('</body>')) {
+                  ctxStart = Math.max(0, i - 20);
+                  ctxEnd = Math.min(lines.length - 1, i + 20);
+                  break;
+                }
+             }
+          }
+          if (ctxStart === -1) { ctxStart = 0; ctxEnd = Math.min(lines.length - 1, 300); }
           
           const snippet = lines.slice(ctxStart, ctxEnd + 1).join('\n');
 
@@ -315,9 +324,26 @@ Return ONLY the patch blocks.`;
                 console.log(` \x1b[32m✓\x1b[0m Modified ${path.basename(filePath)} (${applied} patch(es))`);
                 items.forEach(item => results.push({ selector: item.selector, ok: true }));
              } else {
-                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' }));
-             }
+                 console.warn(` \x1b[33m⚠\x1b[0m AI matched 0 patches in ${path.basename(filePath)}`);
+                 console.log("Full AI response context for debugging:");
+                 console.log(apiResult);
+                 
+                 // Forced fallback for creation if AI suggested something but failed exact match
+                 if (items.some(it => it.type === 'create') && patches.length > 0) {
+                    console.log("Attempting forced creation fallback...");
+                    const index = content.toLowerCase().lastIndexOf('</body>');
+                    if (index >= 0) {
+                       const creationItem = items.find(it => it.type === 'create');
+                       const patched = content.slice(0, index) + creationItem.outerHTML + '\n' + content.slice(index);
+                       const final = rawContent.includes('\r\n') ? patched.replace(/\n/g, '\r\n') : patched;
+                       fs.writeFileSync(filePath, final, 'utf8');
+                       console.log(` \x1b[32m✓\x1b[0m Forced creation applied to ${path.basename(filePath)}`);
+                       items.forEach(item => results.push({ selector: item.selector, ok: true }));
+                       return;
+                    }
+                 }
+                 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 }));

package/package.json

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

package/src/overlay.js

@@ -924,7 +924,9 @@
       const cs = getComputedStyle(el);
       const newLeft = Math.round(parseFloat(cs.left)) + 'px';
       const newTop = Math.round(parseFloat(cs.top)) + 'px';
-      rec(el, { left: newLeft, top: newTop }, { left: prevL, top: prevT });
+      if (newLeft !== prevL || newTop !== prevT) {
+        rec(el, { left: newLeft, top: newTop }, { left: prevL, top: prevT });
+      }
     });
     state.dragOrigPositions = [];
     dEl = null;
@@ -1006,12 +1008,15 @@
       left: Math.round(state.resizeOrigL) + 'px',
       top: Math.round(state.resizeOrigT) + 'px',
     };
-    rec(rzEl, {
+    const newSize = {
       width: Math.round(parseFloat(cs.width)) + 'px',
       height: Math.round(parseFloat(cs.height)) + 'px',
       left: Math.round(parseFloat(cs.left)) + 'px',
       top: Math.round(parseFloat(cs.top)) + 'px',
-    }, prevProps);
+    };
+    if (newSize.width !== prevProps.width || newSize.height !== prevProps.height || newSize.left !== prevProps.left || newSize.top !== prevProps.top) {
+      rec(rzEl, newSize, prevProps);
+    }
     rzEl = null; rzDir = null;
   });
 
@@ -1480,10 +1485,11 @@
     if (!astDragEl) return;
     tip.classList.remove('v');
     const cs = getComputedStyle(astDragEl);
-    rec(astDragEl, {
-      left: Math.round(parseFloat(cs.left)) + 'px',
-      top: Math.round(parseFloat(cs.top)) + 'px',
-    });
+    const newLeft = Math.round(parseFloat(cs.left)) + 'px';
+    const newTop = Math.round(parseFloat(cs.top)) + 'px';
+    if (newLeft !== (astDragOL + 'px') || newTop !== (astDragOT + 'px')) {
+      rec(astDragEl, { left: newLeft, top: newTop });
+    }
     astDragEl.style.cursor = 'grab';
     astDragEl = null;
   });
@@ -1537,6 +1543,15 @@
     const i = state.changes.findIndex(c => (c.pixelshiftId || c.selector) === key);
     if (i >= 0) Object.assign(state.changes[i].props, props); else state.changes.push(ch);
 
+    // Deep check: only record if at least one property actually changed
+    let changed = isCreate;
+    if (!isCreate) {
+      for (const p in props) {
+        if (String(props[p]) !== String(prevProps[p])) { changed = true; break; }
+      }
+    }
+    if (!changed) return;
+
     // Push to history
     const hid = Date.now() + Math.random();
     history.push({ hid, el, props, prevProps, selector: key, isCreate });