draply-dev 1.4.5 → 1.5.0

package/bin/cli.js

@@ -7,11 +7,32 @@ const path = require('path');
 const zlib = require('zlib');
 
 const args = process.argv.slice(2);
-const targetPort = parseInt(args[0]) || 3000;
-const proxyPort = parseInt(args[1]) || 4000;
-const targetHost = args[2] || 'localhost';
-
 const pkg = require('../package.json');
+
+// --help / --version (#18)
+if (args.includes('--help') || args.includes('-h')) {
+  console.log(`\n  \x1b[36mDraply v${pkg.version}\x1b[0m — Visual overlay for any frontend project\n`);
+  console.log(`  Usage:  npx draply <target-port> [proxy-port] [target-host]\n`);
+  console.log(`  Arguments:`);
+  console.log(`    target-port    Port your dev server runs on (default: 3000)`);
+  console.log(`    proxy-port     Port for Draply proxy (default: 4000)`);
+  console.log(`    target-host    Hostname of dev server (default: localhost)\n`);
+  console.log(`  Examples:`);
+  console.log(`    npx draply 3000           Proxy localhost:3000 → localhost:4000`);
+  console.log(`    npx draply 5500 4001      Proxy localhost:5500 → localhost:4001\n`);
+  console.log(`  Options:`);
+  console.log(`    --help, -h     Show this help`);
+  console.log(`    --version, -v  Show version\n`);
+  process.exit(0);
+}
+if (args.includes('--version') || args.includes('-v')) {
+  console.log(pkg.version);
+  process.exit(0);
+}
+
+const targetPort = parseInt(args.filter(a => !a.startsWith('-'))[0]) || 3000;
+const proxyPort = parseInt(args.filter(a => !a.startsWith('-'))[1]) || 4000;
+const targetHost = args.filter(a => !a.startsWith('-'))[2] || 'localhost';
 const OVERLAY_JS = fs.readFileSync(path.join(__dirname, '../src/overlay.js'), 'utf8');
 // Unique marker that does NOT appear inside overlay.js itself
 const MARKER = 'data-ps-done="1"';
@@ -42,6 +63,76 @@ if (!fs.existsSync(overridesPath)) {
   fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
 }
 
+// Config — stored in ~/.draply/ to avoid accidental git commits (#19)
+const configDir = path.join(require('os').homedir(), '.draply');
+if (!fs.existsSync(configDir)) fs.mkdirSync(configDir, { recursive: true });
+const configPath = path.join(configDir, 'config.json');
+function loadConfig() { try { return JSON.parse(fs.readFileSync(configPath, 'utf8')); } catch { return {}; } }
+function saveConfig(cfg) { fs.writeFileSync(configPath, JSON.stringify(cfg, null, 2), 'utf8'); }
+
+// Multi-provider AI call (#10)
+async function callAI(cfg, prompt) {
+  const provider = cfg.provider || 'groq';
+  const https = require('https');
+
+  // Anthropic — different API format
+  if (provider === 'anthropic') {
+    const body = JSON.stringify({
+      model: cfg.model || 'claude-sonnet-4-20250514', max_tokens: 8192,
+      messages: [{ role: 'user', content: prompt }]
+    });
+    return new Promise((resolve, reject) => {
+      const req = https.request({
+        hostname: 'api.anthropic.com', path: '/v1/messages', method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'x-api-key': cfg.apiKey, 'anthropic-version': '2023-06-01', 'Content-Length': Buffer.byteLength(body) }
+      }, r => {
+        const ch = []; r.on('data', c => ch.push(c));
+        r.on('end', () => { try { const d = JSON.parse(Buffer.concat(ch).toString()); d.error ? reject(new Error(d.error.message)) : resolve(d.content?.[0]?.text || ''); } catch(e) { reject(new Error('Invalid Anthropic response')); } });
+      });
+      req.on('error', reject); req.write(body); req.end();
+    });
+  }
+
+  // Ollama — local HTTP
+  if (provider === 'ollama') {
+    const http2 = require('http');
+    const body = JSON.stringify({ model: cfg.model || 'llama3', messages: [{ role: 'user', content: prompt }], stream: false });
+    return new Promise((resolve, reject) => {
+      const req = http2.request({
+        hostname: cfg.ollamaHost || 'localhost', port: cfg.ollamaPort || 11434, path: '/api/chat', method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(body) }
+      }, r => {
+        const ch = []; r.on('data', c => ch.push(c));
+        r.on('end', () => { try { const d = JSON.parse(Buffer.concat(ch).toString()); resolve(d.message?.content || ''); } catch(e) { reject(new Error('Invalid Ollama response')); } });
+      });
+      req.on('error', reject); req.write(body); req.end();
+    });
+  }
+
+  // OpenAI / Groq — 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']
+  };
+  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 });
+  return new Promise((resolve, reject) => {
+    const req = https.request({
+      hostname, path: apiPath, method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${cfg.apiKey}`, 'Content-Length': Buffer.byteLength(body) }
+    }, r => {
+      const ch = []; r.on('data', c => ch.push(c));
+      r.on('end', () => { try { const d = JSON.parse(Buffer.concat(ch).toString()); d.error ? reject(new Error(d.error?.message || JSON.stringify(d.error))) : resolve(d.choices?.[0]?.message?.content || ''); } catch(e) { reject(new Error('Invalid API response')); } });
+    });
+    req.on('error', reject); req.write(body); req.end();
+  });
+}
+
+// API key validation (#8)
+async function validateApiKey(cfg) {
+  try { await callAI(cfg, 'Say "ok"'); return true; } catch { return false; }
+}
+
 
 const server = http.createServer((req, res) => {
 
@@ -94,10 +185,7 @@ const server = http.createServer((req, res) => {
     return;
   }
 
-  // ── Config endpoint (get/set API key) ───────────────────────────────────────
-  const configPath = path.join(process.cwd(), 'draply.config.json');
-  function loadConfig() { try { return JSON.parse(fs.readFileSync(configPath, 'utf8')); } catch { return {}; } }
-  function saveConfig(cfg) { fs.writeFileSync(configPath, JSON.stringify(cfg, null, 2), 'utf8'); }
+  // ── Config endpoint (get/set API key) — config stored in ~/.draply/ (#19) ──
 
   if (req.url === '/draply-config') {
     if (req.method === 'GET') {
@@ -123,6 +211,24 @@ const server = http.createServer((req, res) => {
     }
   }
 
+  // ── Validate API key endpoint (#8) ─────────────────────────────────────────
+  if (req.url === '/draply-validate-key' && req.method === 'POST') {
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', async () => {
+      try {
+        const { apiKey, provider } = JSON.parse(body);
+        const valid = await validateApiKey({ apiKey, provider: provider || 'groq' });
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true, valid }));
+      } catch (e) {
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true, valid: false, error: e.message }));
+      }
+    });
+    return;
+  }
+
   // ── AI Apply endpoint ───────────────────────────────────────────────────────
   if ((req.url === '/draply-ai-apply' || req.url === '/draply-save') && req.method === 'POST') {
     let body = '';
@@ -133,16 +239,22 @@ const server = http.createServer((req, res) => {
         const cfg = loadConfig();
         
         // If no config, fallback to saving standard CSS
+        // Always write CSS backup (#13)
+        const cssLines = [];
+        for (const ch of (changes || [])) {
+          if (!ch.selector || ch.type === 'create') continue;
+          const cProps = Object.entries(ch.props).filter(([k]) => k !== 'googleFont' && k !== 'innerHTML' && k !== 'innerText' && k !== 'src').map(([k, v]) => `  ${k}: ${v};`).join('\n');
+          if (cProps) {
+            const label = ch.selector.split('>').pop().trim();
+            cssLines.push(`/* ${label} */\n${ch.selector} {\n${cProps}\n}`);
+          }
+        }
+        if (cssLines.length) {
+          fs.writeFileSync(overridesPath, '/* draply — auto-generated backup */\n\n' + cssLines.join('\n\n') + '\n', 'utf8');
+          console.log(` \x1b[36m✓\x1b[0m CSS backup written to draply.css`);
+        }
+
         if (!cfg.apiKey) {
-           const lines = [];
-           for (const ch of (changes || [])) {
-             if (!ch.selector) continue;
-             const props = Object.entries(ch.props).map(([k, v]) => `  ${k}: ${v};`).join('\n');
-             const label = ch.selector.split('>').pop().trim();
-             lines.push(`/* ${label} */\n${ch.selector} {\n${props}\n}`);
-           }
-           const css = '/* draply */\n\n' + lines.join('\n\n') + '\n';
-           fs.writeFileSync(overridesPath, css, 'utf8');
            res.writeHead(200, { 'Content-Type': 'application/json' });
            res.end(JSON.stringify({ ok: true, fallback: true }));
            return;
@@ -201,12 +313,18 @@ const server = http.createServer((req, res) => {
              const parts = c.selector.split('.');
              return parts.length > 1 ? parts.pop() : '';
           }).filter(Boolean);
+          let idsToFind = items.map(c => {
+             const parts = c.selector.split('#');
+             return parts.length > 1 ? parts.pop() : '';
+          }).filter(Boolean);
 
           let ctxStart = -1, ctxEnd = -1;
           for (let i = 0; i < lines.length; i++) {
-             if (classNamesToFind.some(cls => lines[i].includes(cls)) || (items.length === 1 && items[0].selector && lines[i].includes(items[0].selector.split('#').pop()))) {
-               const s = Math.max(0, i - 40);
-               const e = Math.min(lines.length - 1, i + 40);
+             const hasClass = classNamesToFind.some(cls => lines[i].includes(cls));
+             const hasId = idsToFind.some(id => lines[i].includes(id));
+             if (hasClass || hasId) {
+               const s = Math.max(0, i - 60);
+               const e = Math.min(lines.length - 1, i + 60);
                if (ctxStart === -1 || s < ctxStart) ctxStart = s;
                if (ctxEnd === -1 || e > ctxEnd) ctxEnd = e;
              }
@@ -265,29 +383,8 @@ Return ONLY the patch blocks.`;
 
           let apiResult = '';
           try {
-             // Groq call
-             const groqBody = JSON.stringify({
-               model: 'llama-3.3-70b-versatile',
-               messages: [{ role: 'user', content: prompt }],
-               temperature: 0.1, max_tokens: 8192
-             });
-             apiResult = await new Promise((resolve, reject) => {
-               const https = require('https');
-               const req = https.request({
-                 hostname: 'api.groq.com', path: '/openai/v1/chat/completions',
-                 method: 'POST',
-                 headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${cfg.apiKey}`, 'Content-Length': Buffer.byteLength(groqBody) }
-               }, res => {
-                 const chunks = [];
-                 res.on('data', c => chunks.push(c));
-                 res.on('end', () => {
-                   const data = JSON.parse(Buffer.concat(chunks).toString());
-                   if (data.error) reject(new Error(data.error.message));
-                   else resolve(data.choices?.[0]?.message?.content || '');
-                 });
-               });
-               req.on('error', reject); req.write(groqBody); req.end();
-             });
+             // AI call — supports Groq/OpenAI/Anthropic/Ollama (#10)
+             apiResult = await callAI(cfg, prompt);
 
              const patches = [];
              const patchRegex = /<search>([\s\S]*?)<\/search>[\s\S]*?<replace>([\s\S]*?)<\/replace>/g;
@@ -329,15 +426,16 @@ Return ONLY the patch blocks.`;
                  console.log(apiResult);
                  
                  // Forced fallback for creation if AI failed match but we have a creation request
-                 const creationItem = items.find(it => it.type === 'create');
-                 if (creationItem) {
-                    console.log("Attempting forced creation fallback...");
+                 const creationItems = items.filter(it => it.type === 'create');
+                 if (creationItems.length > 0) {
+                    console.log(`Attempting forced creation fallback for ${creationItems.length} element(s)...`);
                     const index = content.toLowerCase().lastIndexOf('</body>');
                     if (index >= 0) {
-                       const patched = content.slice(0, index) + creationItem.outerHTML + '\n' + content.slice(index);
+                       const insertHTML = creationItems.map(ci => ci.outerHTML).join('\n');
+                       const patched = content.slice(0, index) + insertHTML + '\n' + content.slice(index);
                        const final = rawContent.includes('\r\n') ? patched.replace(/\n/g, '\r\n') : patched;
                        fs.writeFileSync(filePath, final, 'utf8');
-                       console.log(` \x1b[32m✓\x1b[0m Forced creation applied to ${path.basename(filePath)}`);
+                       console.log(` \x1b[32m✓\x1b[0m Forced creation applied (${creationItems.length} elements) to ${path.basename(filePath)}`);
                        items.forEach(item => results.push({ selector: item.selector, ok: true }));
                        continue;
                     }

package/package.json

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

@@ -478,15 +478,10 @@
     <div id="__ps_sidebar__">
       <div class="ps-hdr">
         <div class="ps-brand">
-          <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
-            <rect x="2" y="2" width="7" height="7" rx="1.5" fill="#7fff6e"/>
-            <rect x="11" y="2" width="7" height="7" rx="1.5" fill="#7fff6e" opacity=".55"/>
-            <rect x="2" y="11" width="7" height="7" rx="1.5" fill="#7fff6e" opacity=".55"/>
-            <rect x="11" y="11" width="7" height="7" rx="1.5" fill="#7fff6e" opacity=".25"/>
-          </svg>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#7fff6e" stroke-width="2.5"><rect width="18" height="18" x="3" y="3" rx="4"/></svg>
           <div>
             <div class="ps-bname">Draply</div>
-            <div class="ps-bver">v0.2.0 — overlay</div>
+            <div class="ps-bver">v1.5.0</div>
           </div>
         </div>
         <button class="ps-xbtn" id="__ps_x__">✕</button>
@@ -499,7 +494,9 @@
         <div class="ps-it" id="__t_ins__"><span class="ic"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m8 11 2 2 4-4"/><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span> Inspect <span class="ps-pro-badge">PRO</span></div>
         <div class="ps-it" id="__t_rsz__"><span class="ic"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 3h5v5"/><path d="M17 21h2a2 2 0 0 0 2-2"/><path d="M21 12v3"/><path d="m21 3-5 5"/><path d="M3 7V5a2 2 0 0 1 2-2"/><path d="m5 21 4.144-4.144a1.21 1.21 0 0 1 1.712 0L13 19"/><path d="M9 3h3"/><rect x="3" y="11" width="10" height="10" rx="1"/></svg></span> Resize <span class="ps-pro-badge">PRO</span></div>
         <div class="ps-it" id="__t_clr__"><span class="ic"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></svg></span> Colors <span class="ps-pro-badge">PRO</span></div>
-        <div class="ps-it" id="__t_typ__"><span class="ic"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22h6a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v6"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M3 16v-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5V16"/><path d="M6 22h2"/><path d="M7 14v8"/></svg></span> Typography <span class="ps-pro-badge">PRO</span></div>
+        <div class="ps-it" id="__t_typ__"><span class="ic"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22h6a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v6"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M3 16v-1.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5V16"/><path d="M6 22h2"/><path d="M7 14v8"/></svg></span> Typography</div>
+        <div class="ps-it" id="__t_lay__"><span class="ic"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 8h10"/><path d="M7 12h10"/><path d="M7 16h10"/></svg></span> Layers</div>
+
 
         <div class="ps-it" id="__t_ast__"><span class="ic"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 5h6"/><path d="M19 2v6"/><path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/><circle cx="9" cy="9" r="2"/></svg></span> Assets <span class="ps-pro-badge">PRO</span></div>
 
@@ -546,9 +543,41 @@
             <input type="color" class="ps-color-native" id="__cp_bd__" value="#cccccc">
           </div>
         </div>
-        <button class="ps-apply" id="__clr_apply__">APPLY COLORS</button>
+
+        <!-- #11: Advanced styles -->
+        <div class="ps-sec">Advanced</div>
+        <div class="ps-row">
+           <span class="ps-lbl">Opacity</span>
+           <input type="range" id="__st_opacity__" min="0" max="1" step="0.05" value="1" style="flex:1;accent-color:#7fff6e">
+           <span class="ps-lbl" id="__st_opacity_val__">1.0</span>
+        </div>
+        <div class="ps-row">
+           <span class="ps-lbl">Radius</span>
+           <input type="number" class="ps-inp" id="__st_radius__" min="0" max="100" value="0" style="width:50px;flex:none">
+           <span class="ps-lbl">px</span>
+        </div>
+        <div class="ps-row">
+           <span class="ps-lbl">Shadow</span>
+           <select class="ps-select" id="__st_shadow__">
+             <option value="none">None</option>
+             <option value="0 2px 4px rgba(0,0,0,0.1)">Soft</option>
+             <option value="0 4px 12px rgba(0,0,0,0.15)">Medium</option>
+             <option value="0 8px 24px rgba(0,0,0,0.2)">Deep</option>
+           </select>
+        </div>
+
+        <button class="ps-apply" id="__clr_apply__">APPLY STYLES</button>
+      </div>
+
+      <!-- #12: LAYERS PANEL -->
+      <div class="ps-sub" id="__sub_lay__">
+        <div class="ps-sec" style="padding-top:0">Elements on page</div>
+        <div id="__lay_list__" style="max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:4px">
+           <div style="color:#444466;font-size:10px;text-align:center;padding:10px">Select an element to view tree</div>
+        </div>
       </div>
 
+
       <!-- TYPOGRAPHY SUB-PANEL -->
       <div class="ps-sub" id="__sub_typ__">
         <div class="ps-sec" style="padding-top:0">Selected: <span id="__typ_el_name__" style="color:#7fff6e">—</span></div>
@@ -771,6 +800,10 @@
     subClr.classList.toggle('v', t === 'clr');
     subTyp.classList.toggle('v', t === 'typ');
     subAst.classList.toggle('v', t === 'ast');
+    // #12: Layers sub-panel toggle
+    const subLay = document.getElementById('__sub_lay__');
+    if (subLay) subLay.classList.toggle('v', t === 'lay');
+    if (t === 'lay') updateLayers();
     toast(toolHints[t]);
   }
 
@@ -788,6 +821,9 @@
     subTyp.classList.remove('v');
     subAst.classList.remove('v');
     subUns.classList.remove('v');
+    const subLay = document.getElementById('__sub_lay__');
+    if (subLay) subLay.classList.remove('v');
+  }
   }
 
   // ── HOVER ────────────────────────────────────────────────────────────────
@@ -1064,6 +1100,13 @@
     const bd = cs.borderColor || '#cccccc';
     const bw = cs.borderWidth;
 
+    // #14: Support SVG fill/stroke (#14)
+    const isSvg = el.namespaceURI === 'http://www.w3.org/2000/svg';
+    if (isSvg) {
+       fg = cs.fill;
+       bd = cs.stroke;
+    }
+
     // Background — detect transparent
     if (isTransparent(bg)) {
       cpBgTrans.checked = true;
@@ -1087,6 +1130,27 @@
       swBd.style.background = cpBd.value;
       swBd.style.opacity = '1';
     }
+
+    // #11: Advanced styles detection
+    const opVal = parseFloat(cs.opacity) || 1;
+    document.getElementById('__st_opacity__').value = opVal;
+    document.getElementById('__st_opacity_val__').textContent = opVal.toFixed(2);
+    document.getElementById('__st_radius__').value = parseInt(cs.borderRadius) || 0;
+    document.getElementById('__st_shadow__').value = cs.boxShadow === 'none' ? 'none' : '0 4px 12px rgba(0,0,0,0.15)'; // simple match
+  }
+
+  // #11: Live preview for advanced styles
+  document.getElementById('__st_opacity__').oninput = e => {
+     const v = e.target.value;
+     document.getElementById('__st_opacity_val__').textContent = parseFloat(v).toFixed(2);
+     if (state.selectedEl) state.selectedEl.style.opacity = v;
+  };
+  document.getElementById('__st_radius__').oninput = e => {
+     if (state.selectedEl) state.selectedEl.style.borderRadius = e.target.value + 'px';
+  };
+  document.getElementById('__st_shadow__').onchange = e => {
+     if (state.selectedEl) state.selectedEl.style.boxShadow = e.target.value === 'none' ? '' : e.target.value;
+  };
   }
 
   document.getElementById('__clr_apply__').onclick = () => {
@@ -1094,14 +1158,30 @@
     const el = state.selectedEl;
     const bgVal = cpBgTrans.checked ? 'transparent' : cpBg.value;
     const bdVal = cpBdTrans.checked ? 'none' : cpBd.value;
-    // Snapshot BEFORE applying
+    const opVal = document.getElementById('__st_opacity__').value;
+    const radVal = document.getElementById('__st_radius__').value + 'px';
+    const shVal = document.getElementById('__st_shadow__').value;
+
     const prevProps = {
       'background-color': el.style.backgroundColor || '',
       'color': el.style.color || '',
-      'border': el.style.border || ''
+      'border': el.style.border || '',
+      'opacity': el.style.opacity || '',
+      'border-radius': el.style.borderRadius || '',
+      'box-shadow': el.style.boxShadow || ''
     };
+
+    if (el.namespaceURI === 'http://www.w3.org/2000/svg') {
+       el.style.fill = cpFg.value;
+       el.style.stroke = cpBdTrans.checked ? 'none' : bdVal;
+    }
+
     el.style.backgroundColor = bgVal;
     el.style.color = cpFg.value;
+    el.style.opacity = opVal;
+    el.style.borderRadius = radVal;
+    el.style.boxShadow = shVal === 'none' ? '' : shVal;
+
     if (cpBdTrans.checked) {
       el.style.border = 'none';
     } else {
@@ -1109,8 +1189,12 @@
       if (getComputedStyle(el).borderWidth === '0px') el.style.borderWidth = '1px';
       if (getComputedStyle(el).borderStyle === 'none') el.style.borderStyle = 'solid';
     }
-    rec(el, { 'background-color': bgVal, color: cpFg.value, 'border': cpBdTrans.checked ? 'none' : `1px solid ${bdVal}` }, prevProps);
-    toast('🎨 Colors applied!');
+    rec(el, { 
+       'background-color': bgVal, color: cpFg.value, 
+       'border': cpBdTrans.checked ? 'none' : `1px solid ${bdVal}`,
+       'opacity': opVal, 'border-radius': radVal, 'box-shadow': shVal === 'none' ? '' : shVal
+    }, prevProps);
+    toast('🎨 Styles applied!');
   };
 
   function rgb2hex(rgb) {
@@ -1341,30 +1425,37 @@
     e.preventDefault(); e.stopPropagation();
     if (!pendingAsset || !placingEl) return;
 
-    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!');
+    if (e.shiftKey || e.altKey) {
+      // #6: Better insertion targeting
+      const target = e.target;
+      if (target.tagName.toLowerCase() === 'img') {
+        const prevSrc = target.getAttribute('src');
+        target.src = pendingAsset.src;
+        rec(target, { src: pendingAsset.src }, { src: prevSrc || '' });
+        toast('🖼️ Image 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!');
+        // Option to insert INSIDE clicked container if Alt is held
+        if (e.altKey) {
+           placeAsset(pendingAsset, 0, 0, 120, 120, target);
+           toast('✦ Placed inside ' + target.tagName.toLowerCase());
+        } else {
+           const cs = getComputedStyle(target);
+           const prevBg = cs.backgroundImage;
+           target.style.backgroundImage = `url('${pendingAsset.src}')`;
+           target.style.backgroundSize = 'cover';
+           rec(target, { backgroundImage: `url('${pendingAsset.src}')`, backgroundSize: 'cover' }, { backgroundImage: prevBg });
+           toast('🖼️ Background set!');
+        }
       }
     } else {
-      // PLACE mode
+      // PLACE mode (standard)
       const x = e.clientX - 60;
       const y = e.clientY - 60;
       placeAsset(pendingAsset, x, y, 120, 120);
     }
     cancelPlacing();
   }
+  }
 
   function onPlacingCancel(e) {
     if (e.key === 'Escape') cancelPlacing();
@@ -1379,15 +1470,19 @@
     document.removeEventListener('keydown', onPlacingCancel);
   }
 
-  // Place asset permanently on page (absolute positioned)
-  function placeAsset(asset, x, y, w, h) {
+  // #6: Place asset permanently on page (optionally inside a parent)
+  function placeAsset(asset, x, y, w, h, parent = document.body) {
     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;`;
+    
+    // If we have a specific parent, use relative positioning if needed
+    const posType = parent === document.body ? 'fixed' : 'absolute';
+    wrap.style.cssText = `position:${posType};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);
+    parent.appendChild(wrap);
+
 
     // Click to select this placed asset (for z-index control)
     wrap.addEventListener('click', e => {
@@ -1460,6 +1555,44 @@
     toast('▼ Moved to back (z:' + nz + ')');
   };
 
+  // #12: LAYERS PANEL LOGIC
+  function updateLayers() {
+    const list = document.getElementById('__lay_list__');
+    list.innerHTML = '';
+    
+    // Find interesting elements (headers, sections, divs with classes, images)
+    const items = document.querySelectorAll('body > *:not(#__ps__), section *, header *, .container *');
+    const filtered = [...items].filter(el => {
+       if (ps(el)) return false;
+       return el.tagName !== 'SCRIPT' && el.tagName !== 'STYLE' && (el.children.length === 0 || el.id || el.className);
+    }).slice(0, 50); // limit for performance
+    
+    if (!filtered.length) {
+       list.innerHTML = '<div style="color:#444;font-size:10px;text-align:center;padding:10px">No elements found</div>';
+       return;
+    }
+    
+    filtered.forEach(el => {
+       const row = document.createElement('div');
+       row.style.cssText = 'padding:6px 8px;border-radius:4px;background:#1a1a2a;border:1px solid #2a2a3a;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:10px;color:#8080a8';
+       if (state.selectedEl === el) {
+          row.style.borderColor = '#7fff6e';
+          row.style.background = 'rgba(127,255,110,0.1)';
+          row.style.color = '#7fff6e';
+       }
+       
+       const icon = el.tagName === 'IMG' ? '🖼️' : el.tagName.match(/H[1-6]/) ? 'Tt' : '📦';
+       const name = el.tagName.toLowerCase() + (el.id ? '#' + el.id : el.className ? '.' + el.className.split(' ')[0] : '');
+       
+       row.innerHTML = `<span>${icon}</span> <span style="flex:1;overflow:hidden;text-overflow:ellipsis">${name}</span>`;
+       row.onclick = () => {
+          select(el);
+          updateLayers();
+       };
+       list.appendChild(row);
+    });
+  }
+
   zSet.onclick = () => {
     if (!selectedPlaced) return;
     const nz = parseInt(zVal.value) || 0;
@@ -1534,7 +1667,7 @@
       isCreate,
       pixelshiftId: el.dataset.pixelshiftId || null,
       selector,
-      exactFile: getReactSource(el),
+      exactFile: getReactSource(el) || window.location.pathname.replace(/^\//, '') || null, // fallback for vanilla HTML (#7)
       file: el.dataset.pixelshiftFile || null,
       props,
       tagName: el.tagName.toLowerCase(),
@@ -1598,12 +1731,23 @@
     // Remove from history
     const idx = history.findIndex(x => x.hid === h.hid);
     if (idx >= 0) history.splice(idx, 1);
-    // Rebuild state.changes
+    // Rebuild state.changes — preserve all original fields (#1, #2)
     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: 'css', selector: key, props: x.props });
+      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();
     toast('↩ Reverted');
@@ -1612,38 +1756,63 @@
   sv.addEventListener('click', async () => {
     // Check key config status
     let hasKey = false;
+    let cfgProvider = 'groq';
     try {
        const cfgRes = await fetch('/draply-config');
        const cfg = await cfgRes.json();
        hasKey = cfg.hasKey;
+       cfgProvider = cfg.provider || 'groq';
     } 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:');
+       // Ask for provider first (#8)
+       const provider = prompt('Draply AI Save: Choose provider (groq / openai / anthropic / ollama):', 'groq');
+       if (!provider) { toast('Save aborted'); return; }
+       const key = provider === 'ollama' ? 'local' : prompt(`Enter your ${provider.toUpperCase()} API key:`);
        if (key) {
-         await fetch('/draply-config', { method: 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ apiKey: key.trim(), provider: 'groq' }) });
+         sv.disabled = true; sv.textContent = 'Validating...';
+         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'); sv.disabled = false; sv.textContent = 'Save'; return;
+           }
+         } catch { /* allow through if validation endpoint unavailable */ }
+         await fetch('/draply-config', { method: 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ apiKey: key.trim(), provider: provider.trim() }) });
+         sv.disabled = false; sv.textContent = 'Save';
        } else {
-         toast('Save aborted: AI Key required');
+         toast('Save aborted: API Key required');
          return;
        }
     }
 
+    // Progress indicator with animation (#9)
     sv.disabled = true;
-    sv.textContent = 'Applying...';
+    sv.textContent = '';
+    sv.innerHTML = '<span style="display:inline-flex;align-items:center;gap:4px"><span style="animation:spin 1s linear infinite;display:inline-block">@</span> Applying...</span>';
+    // Add spin keyframe if not exists
+    if (!document.getElementById('__ps_spin_style__')) {
+      const spinStyle = document.createElement('style');
+      spinStyle.id = '__ps_spin_style__';
+      spinStyle.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
+      document.head.appendChild(spinStyle);
+    }
     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'));
+      if (d.ok) {
+        const msg = d.fallback ? 'Saved to draply.css (No AI Key)' : `✅ AI Applied ${d.applied || ''}/${d.total || ''} to Source!`;
+        toast(msg);
+      } else toast('⚠ Error: ' + (d.error || 'unknown'));
     } catch {
       toast('⚠ Server unreachable');
     }
     
     state.changes = []; history.length = 0; 
-    sv.textContent = 'Save';
+    sv.innerHTML = 'Save'; sv.textContent = 'Save';
     updateUnsUI();
   });
 
@@ -1654,6 +1823,82 @@
 
   document.getElementById('__uns_save__').onclick = () => sv.click();
 
+  // ══════════════════════════════════════════
+  // KEYBOARD SHORTCUTS (#4, #5, #15)
+  // ══════════════════════════════════════════
+  document.addEventListener('keydown', e => {
+    // Ignore if typing in an input/textarea/contenteditable
+    const tag = e.target.tagName.toLowerCase();
+    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') {
+      e.preventDefault();
+      if (history.length > 0) {
+        revertChange(history[history.length - 1]);
+      } else {
+        toast('Nothing to undo');
+      }
+      return;
+    }
+
+    // Ctrl+Shift+Z — Redo (not implemented yet, just prevent default)
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') {
+      e.preventDefault();
+      toast('Redo not available yet');
+      return;
+    }
+
+    // Delete / Backspace — remove selected element (#5)
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      if (state.selectedEl && !ps(state.selectedEl)) {
+        e.preventDefault();
+        const el = state.selectedEl;
+        // Record removal in history
+        rec(el, { display: 'none' }, { display: el.style.display || '' });
+        el.style.display = 'none';
+        // Deselect
+        el.classList.remove('__ps__', '__ps_multi__');
+        state.selectedEl = null;
+        state.selectedEls = [];
+        hdl.classList.remove('v');
+        toast('🗑 Element hidden (Delete)');
+      }
+      return;
+    }
+
+    // Preview mode toggle: P key (#15)
+    if (e.key === 'p' || e.key === 'P') {
+      if (!e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        togglePreview();
+      }
+      return;
+    }
+  });
+
+  // ══════════════════════════════════════════
+  // PREVIEW MODE (#15)
+  // ══════════════════════════════════════════
+  let previewMode = false;
+  function togglePreview() {
+    previewMode = !previewMode;
+    const psRoot = document.getElementById('__ps__');
+    if (previewMode) {
+      psRoot.style.display = 'none';
+      // Remove all selection highlights
+      document.querySelectorAll('.__ps__, .__ps_multi__, .__ph__').forEach(el => {
+        el.classList.remove('__ps__', '__ps_multi__', '__ph__');
+      });
+      hdl.classList.remove('v');
+      Object.values(rhs).forEach(h => h.classList.remove('v'));
+      toast('👁 Preview mode — press P to exit');
+    } else {
+      psRoot.style.display = '';
+      toast('Editor restored');
+    }
+  }
+
   // ══════════════════════════════════════════
   // UTILS
   // ══════════════════════════════════════════