draply-dev 1.3.9 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draply-dev",
-  "version": "1.3.9",
+  "version": "1.4.1",
   "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

@@ -629,7 +629,8 @@
         <input type="file" id="__ast_file__" accept="image/*" style="display:none">
         <div id="__ast_list__" style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px"></div>
         <div id="__ast_hint__" style="font-size:10px;color:#44446a;line-height:1.5;display:none">
-          Click thumbnail → place on page<br>then drag to position
+          ✦ Click to <b>place</b><br>
+          ✦ Shift+Click to <b>replace</b> src/bg
         </div>
         <!-- Z-INDEX CONTROLS -->
         <div id="__ast_zctrl__" style="display:none;margin-top:6px;">
@@ -642,7 +643,6 @@
             <span class="ps-lbl">z-index</span>
             <input class="ps-inp" id="__z_val__" type="number" value="1" min="-999" max="9999" style="width:70px;flex:none">
             <button class="ps-apply" id="__z_set__" style="margin:0;padding:4px 8px;flex:none">SET</button>
-            <button class="ps-apply" id="__ast_del__" style="width:100%;margin-top:6px;background:#ff4444;color:#fff;border:none;">✕ Delete image</button>
           </div>
         </div>
       </div>
@@ -1162,6 +1162,23 @@
   };
 
   function populateTypo(el) {
+    // Make text directly editable
+    if (!el.isContentEditable) {
+      el.contentEditable = 'true';
+      el.dataset.origText = el.innerText || '';
+      el.focus();
+      
+      const finishEdit = () => {
+        el.contentEditable = 'false';
+        el.removeEventListener('blur', finishEdit);
+        if (el.innerText !== el.dataset.origText) {
+          rec(el, { innerText: el.innerText }, { innerText: el.dataset.origText });
+          toast('Text updated!');
+        }
+      };
+      el.addEventListener('blur', finishEdit);
+    }
+
     const cs = getComputedStyle(el);
     typElName.textContent = el.tagName.toLowerCase() + (el.id ? '#' + el.id : el.className ? '.' + [...el.classList].filter(c => !c.startsWith('__'))[0] : '');
     typSz.value = Math.round(parseFloat(cs.fontSize)) || 16;
@@ -1209,7 +1226,10 @@
       'line-height': typLh.value,
       'letter-spacing': typLs.value + 'px',
     };
-    if (typFont.value) props['font-family'] = `'${typFont.value}', sans-serif`;
+    if (typFont.value) {
+      props['font-family'] = `'${typFont.value}', sans-serif`;
+      props['googleFont'] = typFont.value;
+    }
     // Snapshot BEFORE previewTypo applies styles
     const prevProps = {};
     Object.keys(props).forEach(p => {
@@ -1248,12 +1268,25 @@
     [...files].forEach(file => {
       if (!file.type.startsWith('image/')) return;
       const reader = new FileReader();
-      reader.onload = ev => {
-        const asset = { id: Date.now() + Math.random(), name: file.name, src: ev.target.result };
-        astStore.push(asset);
-        addThumb(asset);
-        astHint.style.display = 'block';
-        toast('🖼️ ' + file.name + ' loaded');
+      reader.onload = async ev => {
+        try {
+          const res = await fetch('/draply-upload', {
+            method: 'POST',
+            body: JSON.stringify({ name: file.name, base64: ev.target.result })
+          });
+          const data = await res.json();
+          if (data.ok) {
+            const asset = { id: Date.now() + Math.random(), name: file.name, src: data.url };
+            astStore.push(asset);
+            addThumb(asset);
+            astHint.style.display = 'block';
+            toast('🖼️ ' + file.name + ' loaded');
+          } else {
+            toast('⚠ Upload failed');
+          }
+        } catch(e) {
+           toast('⚠ Upload failed');
+        }
       };
       reader.readAsDataURL(file);
     });
@@ -1303,10 +1336,28 @@
     e.preventDefault(); e.stopPropagation();
     if (!pendingAsset || !placingEl) return;
 
-    // Drop asset at click position
-    const x = e.clientX - 60;
-    const y = e.clientY - 60;
-    placeAsset(pendingAsset, x, y, 120, 120);
+    if (e.shiftKey) {
+      // REPLACE mode
+      if (e.target.tagName.toLowerCase() === 'img') {
+        const prevSrc = e.target.getAttribute('src');
+        e.target.src = pendingAsset.src;
+        rec(e.target, { src: pendingAsset.src }, { src: prevSrc || '' });
+        toast('🖼️ Image source replaced!');
+      } else {
+        const cs = getComputedStyle(e.target);
+        const prevBg = cs.backgroundImage;
+        e.target.style.backgroundImage = `url('${pendingAsset.src}')`;
+        e.target.style.backgroundSize = 'cover';
+        e.target.style.backgroundPosition = 'center';
+        rec(e.target, { backgroundImage: `url('${pendingAsset.src}')`, backgroundSize: 'cover', backgroundPosition: 'center' }, { backgroundImage: prevBg });
+        toast('🖼️ Background image set!');
+      }
+    } else {
+      // PLACE mode
+      const x = e.clientX - 60;
+      const y = e.clientY - 60;
+      placeAsset(pendingAsset, x, y, 120, 120);
+    }
     cancelPlacing();
   }
 
@@ -1353,7 +1404,7 @@
     });
 
     rec(wrap, {
-      src: asset.name,
+      src: asset.src,
       left: Math.round(x) + 'px',
       top: Math.round(y) + 'px',
       width: w + 'px',
@@ -1414,20 +1465,9 @@
 
   zVal.onkeydown = e => { if (e.key === 'Enter') zSet.click(); };
 
-  const astDel = document.getElementById('__ast_del__');
-  astDel.onclick = () => {
-    if (!selectedPlaced) return;
-    selectedPlaced.remove();
-    selectedPlaced = null;
-    zCtrl.style.display = 'none';
-    toast('🗑 Image deleted');
-  };
   // Drag placed assets
   document.addEventListener('mousemove', e => {
     if (!astDragEl || !state.dragging) return;
-    if (state.resizing || hdl.classList.contains('v') && document.activeElement !== hdl) {
-      // only handle if we initiated from an asset
-    }
     const dx = e.clientX - astDragSX, dy = e.clientY - astDragSY;
     astDragEl.style.left = (astDragOL + dx) + 'px';
     astDragEl.style.top = (astDragOT + dy) + 'px';
@@ -1446,7 +1486,6 @@
     });
     astDragEl.style.cursor = 'grab';
     astDragEl = null;
-    // Don't clear state.dragging here — the move tool mouseup handler does it
   });
 
   // ══════════════════════════════════════════
@@ -1469,11 +1508,26 @@
       });
     }
 
-    // Merge into state.changes (for save)
+    // Extract exact file from React Fiber if available
+    function getReactSource(element) {
+      for (const key in element) {
+        if (key.startsWith('__reactFiber$')) {
+          let fiber = element[key];
+          while (fiber) {
+            if (fiber._debugSource && fiber._debugSource.fileName) return fiber._debugSource.fileName;
+            fiber = fiber.return;
+          }
+        }
+      }
+      return null;
+    }
+
+    // Merge into state.changes (for save/apply)
     const ch = {
       type: el.dataset.pixelshiftId ? 'inline' : 'css',
       pixelshiftId: el.dataset.pixelshiftId || null,
       selector,
+      exactFile: getReactSource(el),
       file: el.dataset.pixelshiftFile || null,
       props
     };
@@ -1530,17 +1584,42 @@
     toast('↩ Reverted');
   }
 
-  sv.addEventListener('click', () => {
-    toast('⏳ Saving...');
-    fetch('/draply-save', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ changes: state.changes })
-    }).then(r => r.json()).then(d => {
-      if (d.ok) toast('✅ Saved to CSS!');
+  sv.addEventListener('click', async () => {
+    // Check key config status
+    let hasKey = false;
+    try {
+       const cfgRes = await fetch('/draply-config');
+       const cfg = await cfgRes.json();
+       hasKey = cfg.hasKey;
+    } catch (e) {}
+
+    if (!hasKey) {
+       const key = prompt('Draply AI Save: Enter your free Groq API key (from console.groq.com) to enable saving directly to React files:');
+       if (key) {
+         await fetch('/draply-config', { method: 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ apiKey: key.trim(), provider: 'groq' }) });
+       } else {
+         toast('Save aborted: AI Key required');
+         return;
+       }
+    }
+
+    sv.disabled = true;
+    sv.textContent = 'Applying...';
+    try {
+      const r = await fetch('/draply-ai-apply', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ changes: state.changes })
+      });
+      const d = await r.json();
+      if (d.ok) toast(d.fallback ? 'Saved to draply.css (No AI Key)' : '✅ AI Applied to Source Code!');
       else toast('⚠ Error: ' + (d.error || 'unknown'));
-    }).catch(() => toast('⚠ Server unavailable'));
-    state.changes = []; history.length = 0; sv.disabled = true; updateUnsUI();
+    } catch {
+      toast('⚠ Server unreachable');
+    }
+    
+    state.changes = []; history.length = 0; 
+    sv.textContent = 'Save';
+    updateUnsUI();
   });
 
   document.getElementById('__uns_clear__').onclick = () => {