draply-dev 1.5.4 → 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.4",
+  "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>
 
@@ -1769,6 +1770,21 @@ 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');
 }
 
@@ -1821,6 +1837,21 @@ function redoChange() {
   });
 
   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');
 }
 
@@ -1837,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) {
@@ -1894,6 +1925,29 @@ document.getElementById('__uns_clear__').onclick = () => {
 
 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)
 // ══════════════════════════════════════════