draply-dev 1.4.0 → 1.4.2

package/bin/cli.js

@@ -80,6 +80,19 @@ const server = http.createServer((req, res) => {
     });
     return;
   }
+  // ── Serve assets_draply ───────────────────────────────────────────────────
+  if (req.url.startsWith('/assets_draply/')) {
+    const filePath = path.join(process.cwd(), req.url.split('?')[0]);
+    if (fs.existsSync(filePath)) {
+      const ext = path.extname(filePath).toLowerCase();
+      const mime = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.svg': 'image/svg+xml', '.webp': 'image/webp' };
+      res.writeHead(200, { 'Content-Type': mime[ext] || 'application/octet-stream' });
+      fs.createReadStream(filePath).pipe(res);
+    } else {
+      res.writeHead(404); res.end();
+    }
+    return;
+  }
 
   // ── Config endpoint (get/set API key) ───────────────────────────────────────
   const configPath = path.join(process.cwd(), 'draply.config.json');
@@ -204,7 +217,8 @@ const server = http.createServer((req, res) => {
 
           items.forEach(item => {
             const propsStr = Object.entries(item.props).map(([k, v]) => `  ${k}: ${v}`).join('\n');
-            changesBlock += `\nTarget Selector: ${item.selector}\nChanges:\n${propsStr}\n`;
+            changesBlock += `\nTarget Selector: ${item.selector}\nType: ${item.type}\nChanges:\n${propsStr}\n`;
+            if (item.type === 'create') changesBlock += `HTML to Insert: ${item.outerHTML}\n`;
           });
 
           const prompt = `You are a strict code editor applying style changes to a file.
@@ -223,8 +237,10 @@ Rules:
 - 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!
-- If 'innerText' is provided in Changes, update the text content inside the target HTML element!
+- If 'innerText' or 'innerHTML' is provided in Changes, update the text content inside the target HTML element! Use ONLY the exact text provided in the request (preserving internal HTML tags like spans for colors/styles if present). DO NOT add signatures, names, attributions, or "complete" the text based on context.
 - If 'src' is provided in Changes, update the src attribute of the target HTML element!
+- If a change is marked for a new element (type: create) and you cannot find the target selector, INSERT the provided 'outerHTML' before the closing </body> tag or in an appropriate container.
+
 
 Example response:
 <patch>

package/package.json

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

@@ -435,7 +435,7 @@
 
     /* ── PLACED ASSETS ────────────────────────────────── */
     .ps-asset-placed {
-      position: fixed;
+      position: absolute;
       z-index: 999990;
       cursor: grab;
       user-select: none;
@@ -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;">
@@ -1164,14 +1165,14 @@
     // Make text directly editable
     if (!el.isContentEditable) {
       el.contentEditable = 'true';
-      el.dataset.origText = el.innerText || '';
+      el.dataset.origText = el.innerHTML || '';
       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 });
+        if (el.innerHTML !== el.dataset.origText) {
+          rec(el, { innerHTML: el.innerHTML }, { innerHTML: el.dataset.origText });
           toast('Text updated!');
         }
       };
@@ -1335,19 +1336,27 @@
     e.preventDefault(); e.stopPropagation();
     if (!pendingAsset || !placingEl) return;
 
-    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 replaced!');
+    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 {
-      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!');
+      // PLACE mode
+      const x = e.clientX - 60;
+      const y = e.clientY - 60;
+      placeAsset(pendingAsset, x, y, 120, 120);
     }
     cancelPlacing();
   }
@@ -1365,13 +1374,127 @@
     document.removeEventListener('keydown', onPlacingCancel);
   }
 
+  // Place asset permanently on page (absolute positioned)
+  function placeAsset(asset, x, y, w, h) {
+    const wrap = document.createElement('div');
+    wrap.className = 'ps-asset-placed';
+    const uid = 'ps-asset-' + Date.now();
+    wrap.id = uid;
+    wrap.style.cssText = `left:${Math.round(x)}px;top:${Math.round(y)}px;width:${w}px;height:${h}px;z-index:1;`;
+    wrap.innerHTML = `<img src="${asset.src}" draggable="false" alt="${asset.name}">`;
+    document.body.appendChild(wrap);
+
+    // Click to select this placed asset (for z-index control)
+    wrap.addEventListener('click', e => {
+      if (ps(e.target)) return;
+      selectPlaced(wrap);
+    });
+
+    // Make placed asset draggable
+    wrap.addEventListener('mousedown', e => {
+      if (ps(e.target)) return;
+      e.preventDefault();
+      selectPlaced(wrap);
+      astDragEl = wrap;
+      astDragSX = e.clientX; astDragSY = e.clientY;
+      astDragOL = parseFloat(wrap.style.left) || 0;
+      astDragOT = parseFloat(wrap.style.top) || 0;
+      wrap.style.cursor = 'grabbing';
+      state.dragging = true;
+    });
+
+    rec(wrap, {
+      src: asset.src,
+      left: Math.round(x) + 'px',
+      top: Math.round(y) + 'px',
+      width: w + 'px',
+      height: h + 'px',
+      'z-index': '1',
+    }, null, true); // true = isCreate
+
+    toast('✦ Placed — drag to reposition');
+    selectPlaced(wrap);
+    return wrap;
+  }
+
+  // Track selected placed asset for z-index controls
+  let selectedPlaced = null;
+  const zCtrl = document.getElementById('__ast_zctrl__');
+  const zVal = document.getElementById('__z_val__');
+  const zFront = document.getElementById('__z_front__');
+  const zBack = document.getElementById('__z_back__');
+  const zSet = document.getElementById('__z_set__');
+
+  function selectPlaced(wrap) {
+    // Deselect previous
+    if (selectedPlaced) selectedPlaced.style.outline = '';
+    selectedPlaced = wrap;
+    wrap.style.outline = '2px solid #7fff6e';
+    zVal.value = parseInt(wrap.style.zIndex) || 1;
+    zCtrl.style.display = 'block';
+  }
+
+  zFront.onclick = () => {
+    if (!selectedPlaced) return;
+    // Find max z-index of all placed assets
+    const max = Math.max(0, ...[...document.querySelectorAll('.ps-asset-placed')].map(el => parseInt(el.style.zIndex) || 0));
+    const nz = max + 1;
+    selectedPlaced.style.zIndex = nz;
+    zVal.value = nz;
+    rec(selectedPlaced, { 'z-index': String(nz) });
+    toast('▲ Moved to front (z:' + nz + ')');
+  };
+
+  zBack.onclick = () => {
+    if (!selectedPlaced) return;
+    const min = Math.min(0, ...[...document.querySelectorAll('.ps-asset-placed')].map(el => parseInt(el.style.zIndex) || 0));
+    const nz = min - 1;
+    selectedPlaced.style.zIndex = nz;
+    zVal.value = nz;
+    rec(selectedPlaced, { 'z-index': String(nz) });
+    toast('▼ Moved to back (z:' + nz + ')');
+  };
+
+  zSet.onclick = () => {
+    if (!selectedPlaced) return;
+    const nz = parseInt(zVal.value) || 0;
+    selectedPlaced.style.zIndex = nz;
+    rec(selectedPlaced, { 'z-index': String(nz) });
+    toast('z-index set to ' + nz);
+  };
+
+  zVal.onkeydown = e => { if (e.key === 'Enter') zSet.click(); };
+
+  // Drag placed assets
+  document.addEventListener('mousemove', e => {
+    if (!astDragEl || !state.dragging) return;
+    const dx = e.clientX - astDragSX, dy = e.clientY - astDragSY;
+    astDragEl.style.left = (astDragOL + dx) + 'px';
+    astDragEl.style.top = (astDragOT + dy) + 'px';
+    tip.textContent = `x:${Math.round(astDragOL + dx)}  y:${Math.round(astDragOT + dy)}`;
+    tip.style.left = (e.clientX + 14) + 'px'; tip.style.top = (e.clientY - 28) + 'px';
+    tip.classList.add('v');
+  });
+
+  document.addEventListener('mouseup', () => {
+    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',
+    });
+    astDragEl.style.cursor = 'grab';
+    astDragEl = null;
+  });
+
   // ══════════════════════════════════════════
   // RECORD + SAVE
   // ══════════════════════════════════════════
   // Full history — every individual action
   const history = [];
 
-  function rec(el, props, prevPropsOverride) {
+  function rec(el, props, prevPropsOverride, isCreate = false) {
     const selector = el.dataset.pixelshiftId ? null : gsel(el);
     const key = el.dataset.pixelshiftId || selector;
 
@@ -1401,19 +1524,22 @@
 
     // Merge into state.changes (for save/apply)
     const ch = {
-      type: el.dataset.pixelshiftId ? 'inline' : 'css',
+      type: isCreate ? 'create' : (el.dataset.pixelshiftId ? 'inline' : 'css'),
+      isCreate,
       pixelshiftId: el.dataset.pixelshiftId || null,
       selector,
       exactFile: getReactSource(el),
       file: el.dataset.pixelshiftFile || null,
-      props
+      props,
+      tagName: el.tagName.toLowerCase(),
+      outerHTML: el.outerHTML // Send the whole element for 'create' actions
     };
     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);
 
     // Push to history
     const hid = Date.now() + Math.random();
-    history.push({ hid, el, props, prevProps, selector: key });
+    history.push({ hid, el, props, prevProps, selector: key, isCreate });
 
     updateUnsUI();
   }
@@ -1442,11 +1568,18 @@
   }
 
   function revertChange(h) {
-    // Re-apply previous inline values (empty string = remove inline style → falls back to stylesheet)
-    Object.entries(h.prevProps).forEach(([prop, val]) => {
-      const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-      h.el.style[camel] = val; // '' removes inline override, restoring original
-    });
+    if (h.isCreate) {
+       h.el.remove();
+    } else {
+      // Re-apply previous inline values
+      Object.entries(h.prevProps).forEach(([prop, val]) => {
+        const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+        h.el.style[camel] = val;
+      });
+      // Also handle text/html
+      if (h.prevProps.innerHTML !== undefined) h.el.innerHTML = h.prevProps.innerHTML;
+      if (h.prevProps.innerText !== undefined) h.el.innerText = h.prevProps.innerText;
+    }
     // Remove from history
     const idx = history.findIndex(x => x.hid === h.hid);
     if (idx >= 0) history.splice(idx, 1);