draply-dev 1.5.3 → 1.5.5

package/bin/cli.js

@@ -112,10 +112,11 @@ async function callAI(cfg, prompt) {
     });
   }
 
-  // OpenAI / Groq — compatible API
+  // OpenAI / Groq / Gemini — compatible API
   const hosts = {
     openai: ['api.openai.com', '/v1/chat/completions', 'gpt-4o-mini'],
-    groq:   ['api.groq.com', '/openai/v1/chat/completions', 'llama-3.3-70b-versatile']
+    groq:   ['api.groq.com', '/openai/v1/chat/completions', 'llama-3.3-70b-versatile'],
+    gemini: ['generativelanguage.googleapis.com', '/v1beta/openai/chat/completions', 'gemini-2.5-flash']
   };
   const [hostname, apiPath, defaultModel] = hosts[provider] || hosts.groq;
   const body = JSON.stringify({ model: cfg.model || defaultModel, messages: [{ role: 'user', content: prompt }], temperature: 0.1, max_tokens: 8192 });

package/package.json

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

@@ -678,6 +678,7 @@
 
       <div class="ps-foot">
         <button id="__ps_sv__" disabled>SAVE CHANGES</button>
+        <button id="__ps_ai_cfg__" style="width:100%;margin-top:8px;background:none;border:1px solid #2a2a3a;border-radius:6px;padding:6px;color:#5a5a7a;font-size:9px;cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:color .15s, border-color .15s" onmouseover="this.style.color='#7fff6e'; this.style.borderColor='#7fff6e'" onmouseout="this.style.color='#5a5a7a'; this.style.borderColor='#2a2a3a'">⚙️ AI Provider</button>
       </div>
     </div>
 
@@ -1640,6 +1641,7 @@ document.addEventListener('mouseup', () => {
 // ══════════════════════════════════════════
 // Full history — every individual action
 const history = [];
+const redoHistory = [];
 
 function rec(el, props, prevPropsOverride, isCreate = false) {
   const selector = el.dataset.pixelshiftId ? null : gsel(el);
@@ -1695,7 +1697,14 @@ function rec(el, props, prevPropsOverride, isCreate = false) {
 
   // Push to history
   const hid = Date.now() + Math.random();
-  history.push({ hid, el, props, prevProps, selector: key, isCreate });
+  history.push({ 
+    hid, el, props, prevProps, selector: key, isCreate,
+    parent: isCreate ? el.parentElement : null,
+    nextSibling: isCreate ? el.nextElementSibling : null
+  });
+  
+  // Clear redo stack on new action
+  redoHistory.length = 0;
 
   updateUnsUI();
 }
@@ -1736,9 +1745,12 @@ function revertChange(h) {
     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
+  // Remove from history and add to redo stack
   const idx = history.findIndex(x => x.hid === h.hid);
-  if (idx >= 0) history.splice(idx, 1);
+  if (idx >= 0) {
+    redoHistory.push(history[idx]);
+    history.splice(idx, 1);
+  }
   // Rebuild state.changes — preserve all original fields (#1, #2)
   state.changes = [];
   history.forEach(x => {
@@ -1758,9 +1770,91 @@ function revertChange(h) {
     }
   });
   updateUnsUI();
+
+  if (state.selectedEl) {
+    const isVisible = document.body.contains(state.selectedEl) && getComputedStyle(state.selectedEl).display !== 'none';
+    if (isVisible) {
+      if (state.tool === 'mov') placeHdl(state.selectedEl);
+      if (state.tool === 'rsz') placeRH(state.selectedEl);
+    } else if (state.selectedEl === h.el) {
+      state.selectedEl.classList.remove('__ps__', '__ps_multi__');
+      state.selectedEl = null;
+      state.selectedEls = [];
+      hdl.classList.remove('v');
+      Object.values(rhs).forEach(rh => rh.classList.remove('v'));
+    }
+  }
+
   toast('↩ Reverted');
 }
 
+function redoChange() {
+  if (redoHistory.length === 0) {
+    toast('Nothing to redo');
+    return;
+  }
+  const h = redoHistory.pop();
+  
+  if (h.isCreate) {
+    if (h.parent) {
+      if (h.nextSibling) {
+        h.parent.insertBefore(h.el, h.nextSibling);
+      } else {
+        h.parent.appendChild(h.el);
+      }
+    } else {
+      document.body.appendChild(h.el);
+    }
+  } else {
+    // Re-apply properties
+    Object.entries(h.props).forEach(([prop, val]) => {
+      const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      h.el.style[camel] = val;
+    });
+    if (h.props.innerHTML !== undefined) h.el.innerHTML = h.props.innerHTML;
+    if (h.props.innerText !== undefined) h.el.innerText = h.props.innerText;
+  }
+  
+  history.push(h);
+
+  // Rebuild state.changes 
+  state.changes = [];
+  history.forEach(x => {
+    const key = x.selector;
+    const i = state.changes.findIndex(c => (c.pixelshiftId || c.selector) === key);
+    if (i >= 0) {
+      Object.assign(state.changes[i].props, x.props);
+    } else {
+      state.changes.push({
+        type: x.isCreate ? 'create' : 'css',
+        isCreate: x.isCreate || false,
+        selector: key,
+        props: { ...x.props },
+        outerHTML: x.isCreate && x.el ? x.el.outerHTML : undefined,
+        tagName: x.el ? x.el.tagName?.toLowerCase() : undefined
+      });
+    }
+  });
+
+  updateUnsUI();
+
+  if (state.selectedEl) {
+    const isVisible = document.body.contains(state.selectedEl) && getComputedStyle(state.selectedEl).display !== 'none';
+    if (isVisible) {
+      if (state.tool === 'mov') placeHdl(state.selectedEl);
+      if (state.tool === 'rsz') placeRH(state.selectedEl);
+    } else if (state.selectedEl === h.el) {
+      state.selectedEl.classList.remove('__ps__', '__ps_multi__');
+      state.selectedEl = null;
+      state.selectedEls = [];
+      hdl.classList.remove('v');
+      Object.values(rhs).forEach(rh => rh.classList.remove('v'));
+    }
+  }
+
+  toast('↷ Redone');
+}
+
 sv.addEventListener('click', async () => {
   // Check key config status
   let hasKey = false;
@@ -1774,7 +1868,7 @@ sv.addEventListener('click', async () => {
 
   if (!hasKey) {
     // Ask for provider first (#8)
-    const provider = prompt('Draply AI Save: Choose provider (groq / openai / anthropic / ollama):', 'groq');
+    const provider = prompt('Draply AI Save: Choose provider (groq / openai / anthropic / gemini / ollama):', 'groq');
     if (!provider) { toast('Save aborted'); return; }
     const key = provider === 'ollama' ? 'local' : prompt(`Enter your ${provider.toUpperCase()} API key:`);
     if (key) {
@@ -1819,18 +1913,41 @@ sv.addEventListener('click', async () => {
     toast('⚠ Server unreachable');
   }
 
-  state.changes = []; history.length = 0;
+  state.changes = []; history.length = 0; redoHistory.length = 0;
   sv.innerHTML = 'Save'; sv.textContent = 'Save';
   updateUnsUI();
 });
 
 document.getElementById('__uns_clear__').onclick = () => {
-  state.changes = []; history.length = 0; updateUnsUI();
+  state.changes = []; history.length = 0; redoHistory.length = 0; updateUnsUI();
   toast('🗑 History cleared');
 };
 
 document.getElementById('__uns_save__').onclick = () => sv.click();
 
+document.getElementById('__ps_ai_cfg__').onclick = async () => {
+  const provider = prompt('Change AI Provider (groq / openai / anthropic / gemini / ollama):', 'groq');
+  if (!provider) return;
+  const key = provider === 'ollama' ? 'local' : prompt(`Enter your ${provider.toUpperCase()} API key:`);
+  
+  if (!key && provider !== 'ollama') {
+    toast('⚠ API Key required');
+    return;
+  }
+  
+  toast('Verifying...');
+  try {
+    const vRes = await fetch('/draply-validate-key', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: key.trim(), provider: provider.trim() }) });
+    const vData = await vRes.json();
+    if (!vData.valid && provider !== 'ollama') {
+      toast('⚠ Invalid API key'); return;
+    }
+  } catch { /* ignore validation fail */ }
+  
+  await fetch('/draply-config', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: key.trim(), provider: provider.trim() }) });
+  toast('✅ AI Provider saved!');
+};
+
 // ══════════════════════════════════════════
 // KEYBOARD SHORTCUTS (#4, #5, #15)
 // ══════════════════════════════════════════
@@ -1840,7 +1957,7 @@ document.addEventListener('keydown', e => {
   if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
 
   // Ctrl+Z — Undo last change (#4)
-  if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') {
+  if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === 'z') {
     e.preventDefault();
     if (history.length > 0) {
       revertChange(history[history.length - 1]);
@@ -1850,10 +1967,10 @@ document.addEventListener('keydown', e => {
     return;
   }
 
-  // Ctrl+Shift+Z — Redo (not implemented yet, just prevent default)
-  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') {
+  // Ctrl+Shift+Z — Redo (implemented)
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'z') {
     e.preventDefault();
-    toast('Redo not available yet');
+    redoChange();
     return;
   }