draply-dev 1.4.1 → 1.4.3

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');
@@ -198,13 +211,23 @@ const server = http.createServer((req, res) => {
                if (ctxEnd === -1 || e > ctxEnd) ctxEnd = e;
              }
           }
+          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, 150); }
           
           const snippet = lines.slice(ctxStart, ctxEnd + 1).join('\n');
 
           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 +246,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! Use ONLY the exact text provided in the request. DO NOT add signatures, names, attributions, or "complete" the text based on context.
+- 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.1",
+  "version": "1.4.3",
   "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;
@@ -1165,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!');
         }
       };
@@ -1410,7 +1410,7 @@
       width: w + 'px',
       height: h + 'px',
       'z-index': '1',
-    });
+    }, null, true); // true = isCreate
 
     toast('✦ Placed — drag to reposition');
     selectPlaced(wrap);
@@ -1494,7 +1494,7 @@
   // 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;
 
@@ -1524,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();
   }
@@ -1565,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);