draply-dev 1.2.1 → 1.3.0

package/bin/cli.js

@@ -2,6 +2,7 @@
 'use strict';
 
 const http = require('http');
+const https = require('https');
 const fs = require('fs');
 const path = require('path');
 const zlib = require('zlib');
@@ -13,7 +14,6 @@ const targetHost = args[2] || 'localhost';
 
 const OVERLAY_JS = fs.readFileSync(path.join(__dirname, '../src/overlay.js'), 'utf8');
 const FEATURES_JS = fs.readFileSync(path.join(__dirname, '../src/draply-features.js'), 'utf8');
-// Unique marker that does NOT appear inside overlay.js itself
 const MARKER = 'data-ps-done="1"';
 const INJECT_TAG = `\n<link rel="stylesheet" href="/draply.css">\n<script ${MARKER}>\n${OVERLAY_JS}\n</script>\n<script data-draply-features="1">\n${FEATURES_JS}\n</script>`;
 
@@ -35,7 +35,7 @@ function decode(headers, chunks) {
   });
 }
 
-// Store CSS in hidden .draply/ folder to keep user's project clean
+// ── Project & Config ──────────────────────────────────────────────────────────
 const projectRoot = process.cwd();
 const draplyDir = path.join(projectRoot, '.draply');
 if (!fs.existsSync(draplyDir)) {
@@ -49,19 +49,232 @@ if (!fs.existsSync(draplyDir)) {
   }
 }
 const overridesPath = path.join(draplyDir, 'overrides.css');
-if (!fs.existsSync(overridesPath)) {
-  fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
+if (!fs.existsSync(overridesPath)) fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
+
+const configPath = path.join(draplyDir, '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');
+}
+
+// ── File walker ───────────────────────────────────────────────────────────────
+function walkDir(dir, exts, results = []) {
+  try {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const e of entries) {
+      const fp = path.join(dir, e.name);
+      if (e.name.startsWith('.') || e.name === 'node_modules' || e.name === 'dist' || e.name === '.next' || e.name === 'build') continue;
+      if (e.isDirectory()) walkDir(fp, exts, results);
+      else if (exts.some(x => e.name.endsWith(x))) results.push(fp);
+    }
+  } catch { /* skip */ }
+  return results;
+}
+
+// ── Find best source file for a className ─────────────────────────────────────
+function findFileForClass(root, className) {
+  const files = walkDir(root, ['.jsx', '.tsx', '.js', '.ts', '.css', '.scss', '.vue', '.svelte']);
+  for (const f of files) {
+    try {
+      const content = fs.readFileSync(f, 'utf8');
+      if (content.includes(className)) {
+        return { file: f, content, relativePath: path.relative(root, f) };
+      }
+    } catch { /* skip */ }
+  }
+  return null;
+}
+
+// ── Extract class name from CSS selector ──────────────────────────────────────
+function extractClassName(selector) {
+  const parts = selector.split('>').map(s => s.trim());
+  for (let i = parts.length - 1; i >= 0; i--) {
+    const m = parts[i].match(/\.([a-zA-Z][a-zA-Z0-9_-]*)/);
+    if (m) return m[1];
+  }
+  return null;
+}
+
+// ── Call Gemini API ───────────────────────────────────────────────────────────
+function callGemini(apiKey, prompt) {
+  return new Promise((resolve, reject) => {
+    const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
+    const body = JSON.stringify({
+      contents: [{ parts: [{ text: prompt }] }],
+      generationConfig: { temperature: 0.1, maxOutputTokens: 8192 }
+    });
+
+    const parsed = new URL(url);
+    const options = {
+      hostname: parsed.hostname,
+      path: parsed.pathname + parsed.search,
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(body) }
+    };
+
+    const req = https.request(options, res => {
+      const chunks = [];
+      res.on('data', c => chunks.push(c));
+      res.on('end', () => {
+        try {
+          const data = JSON.parse(Buffer.concat(chunks).toString());
+          if (data.error) {
+            reject(new Error(data.error.message || 'Gemini API error'));
+            return;
+          }
+          const text = data.candidates?.[0]?.content?.parts?.[0]?.text || '';
+          resolve(text);
+        } catch (e) { reject(e); }
+      });
+    });
+    req.on('error', reject);
+    req.write(body);
+    req.end();
+  });
 }
 
+// ══════════════════════════════════════════════════════════════════════════════
+// HTTP SERVER
+// ══════════════════════════════════════════════════════════════════════════════
 const server = http.createServer((req, res) => {
 
-  // CORS preflight
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
   if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }
 
-  // ── Draply: Save changes to CSS ─────────────────────────────────────────────
+  // ── Config endpoint (get/set API key) ───────────────────────────────────────
+  if (req.url === '/draply-config') {
+    if (req.method === 'GET') {
+      const cfg = loadConfig();
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      // Mask API key for security — only send if it exists
+      res.end(JSON.stringify({ hasKey: !!cfg.apiKey, provider: cfg.provider || 'gemini' }));
+      return;
+    }
+    if (req.method === 'POST') {
+      let body = '';
+      req.on('data', c => body += c);
+      req.on('end', () => {
+        try {
+          const { apiKey, provider } = JSON.parse(body);
+          const cfg = loadConfig();
+          if (apiKey !== undefined) cfg.apiKey = apiKey;
+          if (provider) cfg.provider = provider;
+          saveConfig(cfg);
+          console.log(` \x1b[32m✓\x1b[0m API key saved (${cfg.provider || 'gemini'})`);
+          res.writeHead(200, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: true }));
+        } catch (e) {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
+    }
+  }
+
+  // ── AI Apply endpoint ───────────────────────────────────────────────────────
+  if (req.url === '/draply-ai-apply' && req.method === 'POST') {
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', async () => {
+      try {
+        const { changes } = JSON.parse(body);
+        const cfg = loadConfig();
+        if (!cfg.apiKey) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: 'No API key configured. Click ⚙ to set up.' }));
+          return;
+        }
+
+        const results = [];
+
+        // Group changes by class
+        for (const ch of (changes || [])) {
+          if (!ch.selector || !ch.props) continue;
+
+          const className = extractClassName(ch.selector);
+          if (!className) {
+            results.push({ selector: ch.selector, ok: false, reason: 'No class name found' });
+            continue;
+          }
+
+          // Find the source file
+          const found = findFileForClass(projectRoot, className);
+          if (!found) {
+            results.push({ selector: ch.selector, ok: false, reason: `"${className}" not found in source files` });
+            continue;
+          }
+
+          console.log(` \x1b[36m🤖\x1b[0m AI applying: .${className} → ${found.relativePath}`);
+
+          // Build the prompt
+          const propsStr = Object.entries(ch.props).map(([k, v]) => `  ${k}: ${v}`).join('\n');
+          const prompt = `You are a code editor. Modify the following source file to apply CSS style changes.
+
+FILE: ${found.relativePath}
+\`\`\`
+${found.content}
+\`\`\`
+
+CHANGES TO APPLY:
+The element with class "${className}" should have these CSS properties:
+${propsStr}
+
+RULES:
+- If the file is CSS/SCSS: find the .${className} rule and update/add the properties. If the rule doesn't exist, add it.
+- If the file is JSX/TSX: apply changes in the most appropriate way for this file:
+  - If the file already uses inline styles for this element, update the style prop
+  - If the file imports a CSS file, add the rule to that CSS file instead (tell me the filename in a comment)
+  - If the file uses Tailwind classes, update the className with appropriate Tailwind classes
+  - Otherwise, add a style prop to the element with className="${className}"
+- Keep ALL existing code intact. Only modify what's needed for the style changes.
+- Do NOT add comments explaining what you changed.
+
+Return ONLY the complete modified file content. No markdown fences, no explanations, just the raw code.`;
+
+          try {
+            const result = await callGemini(cfg.apiKey, prompt);
+
+            // Clean up response — remove markdown fences if AI added them
+            let code = result.trim();
+            if (code.startsWith('```')) {
+              code = code.replace(/^```[a-z]*\n?/, '').replace(/\n?```$/, '');
+            }
+
+            // Safety: don't write empty or tiny responses
+            if (code.length < 20) {
+              results.push({ selector: ch.selector, ok: false, reason: 'AI returned empty/invalid response' });
+              continue;
+            }
+
+            // Write the modified file
+            fs.writeFileSync(found.file, code, 'utf8');
+            console.log(` \x1b[32m✓\x1b[0m Applied to ${found.relativePath}`);
+            results.push({ selector: ch.selector, ok: true, file: found.relativePath });
+
+          } catch (aiErr) {
+            console.log(` \x1b[31m✗\x1b[0m AI error: ${aiErr.message}`);
+            results.push({ selector: ch.selector, ok: false, reason: aiErr.message });
+          }
+        }
+
+        const applied = results.filter(r => r.ok).length;
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true, applied, total: results.length, results }));
+
+      } catch (e) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: e.message }));
+      }
+    });
+    return;
+  }
+
+  // ── Save changes to CSS ─────────────────────────────────────────────────────
   if (req.url === '/draply-save' && req.method === 'POST') {
     let body = '';
     req.on('data', c => body += c);
@@ -71,9 +284,7 @@ const server = http.createServer((req, res) => {
         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 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}`);
         }
@@ -90,7 +301,7 @@ const server = http.createServer((req, res) => {
     return;
   }
 
-  // ── Draply: Serve CSS ──────────────────────────────────────────────────────
+  // ── Serve CSS ───────────────────────────────────────────────────────────────
   if (req.url.split('?')[0] === '/draply.css') {
     const isModule = req.headers['sec-fetch-dest'] === 'script' || req.url.includes('import');
     try {
@@ -102,7 +313,7 @@ const server = http.createServer((req, res) => {
         res.writeHead(200, { 'Content-Type': 'text/css', 'cache-control': 'no-store' });
         res.end(css);
       }
-    } catch (e) {
+    } catch {
       if (isModule) {
         res.writeHead(200, { 'Content-Type': 'application/javascript' });
         res.end('export default {};');
@@ -114,7 +325,7 @@ const server = http.createServer((req, res) => {
     return;
   }
 
-  // ── Proxy to dev server ────────────────────────────────────────────────────
+  // ── Proxy to dev server ─────────────────────────────────────────────────────
   const opts = {
     hostname: targetHost,
     port: targetPort,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draply-dev",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Visual overlay for any frontend project — move, resize, restyle live in the browser, save to CSS",
   "author": "Arman",
   "type": "commonjs",

package/src/draply-features.js

@@ -2,6 +2,7 @@
  * Draply Features
  * - Diff Panel (view changes)
  * - Export Panel (copy CSS / JSX / Tailwind)
+ * - AI Apply (apply changes to source via Gemini)
  */
 (function () {
   if (window.__draply_features__) return;
@@ -69,7 +70,7 @@
       .ps-dp.v { display: flex; }
 
       .ps-di {
-        background: #0d0d1a;
+        background: #131313;
         border: 1px solid #1e1e3a;
         border-radius: 5px;
         padding: 6px 8px;
@@ -104,7 +105,7 @@
 
       .ps-ef { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }
       .ps-eb {
-        background: #0d0d1a; border: 1px solid #1e1e3a; color: #8888aa;
+        background: #131313; border: 1px solid #1e1e3a; color: #8888aa;
         border-radius: 3px; padding: 3px 6px; font-size: 8px; cursor: pointer;
         font-family: 'Space Mono', monospace; transition: all .15s;
       }
@@ -112,7 +113,7 @@
       .ps-eb.active { border-color: #7fff6e; color: #7fff6e; background: rgba(127,255,110,0.05); }
 
       .ps-ec {
-        background: #0d0d1a; border: 1px solid #1e1e3a; border-radius: 5px;
+        background: #131313; border: 1px solid #1e1e3a; border-radius: 5px;
         padding: 8px; font-family: 'Space Mono', monospace; font-size: 9px;
         color: #ccccee; white-space: pre-wrap; word-break: break-all;
         max-height: 140px; overflow-y: auto; line-height: 1.5;
@@ -128,6 +129,98 @@
         font-family: 'Space Mono', monospace; transition: all .15s; text-align: center;
       }
       .ps-cp:hover { background: linear-gradient(135deg, #7fff6e33, #7fff6e22); border-color: #7fff6e; }
+
+      /* ── AI APPLY BUTTON ─────────────────────── */
+      .ps-ai-btn {
+        background: linear-gradient(135deg, #a855f722, #7c3aed22);
+        border: 1px solid #a855f744;
+        color: #a855f7;
+        border-radius: 5px;
+        padding: 8px 12px;
+        font-size: 10px;
+        cursor: pointer;
+        font-family: 'Space Mono', monospace;
+        transition: all .2s;
+        text-align: center;
+        margin-top: 6px;
+        width: 100%;
+      }
+      .ps-ai-btn:hover {
+        background: linear-gradient(135deg, #a855f733, #7c3aed33);
+        border-color: #a855f7;
+        box-shadow: 0 0 12px rgba(168,85,247,0.2);
+      }
+      .ps-ai-btn:disabled {
+        opacity: 0.4;
+        cursor: default;
+        box-shadow: none;
+      }
+      .ps-ai-btn.loading {
+        animation: ps-pulse 1.5s ease-in-out infinite;
+      }
+      @keyframes ps-pulse {
+        0%, 100% { opacity: 0.6; }
+        50% { opacity: 1; }
+      }
+
+      /* ── SETTINGS PANEL ──────────────────────── */
+      .ps-settings {
+        display: none;
+        flex-direction: column;
+        gap: 6px;
+        padding: 8px 0;
+      }
+      .ps-settings.v { display: flex; }
+      .ps-settings-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .ps-settings-label {
+        color: #8888aa;
+        font-size: 8px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 2px;
+      }
+      .ps-settings-input {
+        flex: 1;
+        background: #131313;
+        border: 1px solid #1e1e3a;
+        color: #ccccee;
+        border-radius: 4px;
+        padding: 5px 8px;
+        font-family: 'Space Mono', monospace;
+        font-size: 9px;
+        outline: none;
+      }
+      .ps-settings-input:focus { border-color: #a855f7; }
+      .ps-settings-save {
+        background: #a855f722;
+        border: 1px solid #a855f744;
+        color: #a855f7;
+        border-radius: 4px;
+        padding: 4px 10px;
+        font-size: 9px;
+        cursor: pointer;
+        font-family: 'Space Mono', monospace;
+      }
+      .ps-settings-save:hover { border-color: #a855f7; }
+      .ps-settings-status {
+        font-size: 8px;
+        color: #555577;
+      }
+      .ps-settings-status.ok { color: #7fff6e; }
+      .ps-gear {
+        background: none;
+        border: none;
+        color: #555577;
+        cursor: pointer;
+        font-size: 12px;
+        padding: 2px;
+        transition: color .2s;
+      }
+      .ps-gear:hover { color: #a855f7; }
     `;
     document.head.appendChild(s);
 
@@ -143,10 +236,15 @@
       <div class="ps-ftabs">
         <button class="ps-ftab active" data-ft="diff">📊 Diff</button>
         <button class="ps-ftab" data-ft="export">📦 Export</button>
+        <button class="ps-gear" id="__ps_gear__" title="AI Settings">⚙</button>
       </div>
+
+      <!-- DIFF -->
       <div class="ps-dp v" id="__ps_dp__">
         <div class="ps-de">No changes yet</div>
       </div>
+
+      <!-- EXPORT -->
       <div class="ps-ep" id="__ps_ep__">
         <div class="ps-ef">
           <button class="ps-eb active" data-fmt="css">CSS</button>
@@ -156,9 +254,23 @@
         <div class="ps-ec" id="__ps_ec__">/* No changes */</div>
         <button class="ps-cp" id="__ps_copy__">📋 Copy</button>
       </div>
+
+      <!-- SETTINGS -->
+      <div class="ps-settings" id="__ps_settings__">
+        <div class="ps-settings-label">Gemini API Key</div>
+        <div class="ps-settings-row">
+          <input class="ps-settings-input" id="__ps_apikey__" type="password" placeholder="AIza...">
+          <button class="ps-settings-save" id="__ps_keysave__">Save</button>
+        </div>
+        <div class="ps-settings-status" id="__ps_keystatus__">
+          Get free key at <a href="https://aistudio.google.com/apikey" target="_blank" style="color:#a855f7">aistudio.google.com</a>
+        </div>
+      </div>
+
+      <!-- AI APPLY -->
+      <button class="ps-ai-btn" id="__ps_ai__" disabled>🤖 AI Apply to Source Code</button>
     `;
 
-    // Insert before footer
     const foot = sidebar.querySelector('.ps-foot');
     if (foot) sidebar.insertBefore(feat, foot);
     else sidebar.appendChild(feat);
@@ -168,6 +280,7 @@
     // ══════════════════════════════════════════
     const dp = document.getElementById('__ps_dp__');
     const ep = document.getElementById('__ps_ep__');
+    const settingsPanel = document.getElementById('__ps_settings__');
     const tabs = feat.querySelectorAll('.ps-ftab');
 
     tabs.forEach(tab => {
@@ -177,11 +290,140 @@
         const w = tab.dataset.ft;
         dp.classList.toggle('v', w === 'diff');
         ep.classList.toggle('v', w === 'export');
+        settingsPanel.classList.remove('v');
         if (w === 'diff') refreshDiff();
         if (w === 'export') refreshExport();
       };
     });
 
+    // Gear button
+    document.getElementById('__ps_gear__').onclick = () => {
+      const vis = settingsPanel.classList.contains('v');
+      dp.classList.remove('v');
+      ep.classList.remove('v');
+      settingsPanel.classList.toggle('v', !vis);
+      tabs.forEach(t => t.classList.remove('active'));
+      if (!vis) checkApiKey();
+    };
+
+    // ══════════════════════════════════════════
+    // API KEY SETTINGS
+    // ══════════════════════════════════════════
+    const apiKeyInput = document.getElementById('__ps_apikey__');
+    const keySaveBtn = document.getElementById('__ps_keysave__');
+    const keyStatus = document.getElementById('__ps_keystatus__');
+    const aiBtn = document.getElementById('__ps_ai__');
+
+    function checkApiKey() {
+      fetch('/draply-config').then(r => r.json()).then(d => {
+        if (d.hasKey) {
+          keyStatus.textContent = '✅ API key configured';
+          keyStatus.className = 'ps-settings-status ok';
+          aiBtn.disabled = false;
+        } else {
+          aiBtn.disabled = true;
+        }
+      }).catch(() => {});
+    }
+    checkApiKey();
+
+    keySaveBtn.onclick = () => {
+      const key = apiKeyInput.value.trim();
+      if (!key) return;
+      fetch('/draply-config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKey: key, provider: 'gemini' })
+      }).then(r => r.json()).then(d => {
+        if (d.ok) {
+          keyStatus.textContent = '✅ API key saved!';
+          keyStatus.className = 'ps-settings-status ok';
+          apiKeyInput.value = '';
+          aiBtn.disabled = false;
+          showToast('🔑 API key saved');
+        }
+      });
+    };
+
+    // ══════════════════════════════════════════
+    // AI APPLY BUTTON
+    // ══════════════════════════════════════════
+    aiBtn.onclick = () => {
+      // Get current changes from overlay's state
+      const historyRows = document.querySelectorAll('#__ps__ [data-hid]');
+      if (historyRows.length === 0) {
+        showToast('No changes to apply');
+        return;
+      }
+
+      // Collect changes same way overlay does
+      const changesMap = new Map();
+      historyRows.forEach(btn => {
+        const row = btn.closest('div[style]');
+        if (!row) return;
+        const selDiv = row.querySelector('div[style*="color:#7fff6e"]');
+        const propDiv = row.querySelector('div[style*="color:#555577"]');
+        if (!selDiv || !propDiv) return;
+        const sel = selDiv.textContent.trim();
+        if (!changesMap.has(sel)) changesMap.set(sel, {});
+        const obj = changesMap.get(sel);
+        propDiv.textContent.split(',').forEach(pair => {
+          const ci = pair.indexOf(':');
+          if (ci < 0) return;
+          obj[pair.substring(0, ci).trim()] = pair.substring(ci + 1).trim();
+        });
+      });
+
+      const changes = [];
+      changesMap.forEach((props, selector) => {
+        changes.push({ selector, props });
+      });
+
+      if (changes.length === 0) {
+        showToast('No changes to apply');
+        return;
+      }
+
+      // Send to AI
+      aiBtn.disabled = true;
+      aiBtn.classList.add('loading');
+      aiBtn.textContent = '🤖 AI is working...';
+      showToast('🤖 Sending to AI...');
+
+      fetch('/draply-ai-apply', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ changes })
+      }).then(r => r.json()).then(d => {
+        aiBtn.classList.remove('loading');
+        aiBtn.textContent = '🤖 AI Apply to Source Code';
+
+        if (d.ok && d.applied > 0) {
+          showToast(`✅ AI applied ${d.applied}/${d.total} changes!`);
+          aiBtn.disabled = false;
+          // Log results
+          (d.results || []).forEach(r => {
+            if (r.ok) console.log(`[Draply AI] ✓ ${r.file}`);
+            else console.log(`[Draply AI] ✗ ${r.selector}: ${r.reason}`);
+          });
+        } else if (d.error) {
+          showToast('⚠ ' + d.error);
+          aiBtn.disabled = false;
+        } else {
+          showToast('⚠ AI could not apply changes');
+          aiBtn.disabled = false;
+          (d.results || []).forEach(r => {
+            if (!r.ok) console.log(`[Draply AI] ✗ ${r.selector}: ${r.reason}`);
+          });
+        }
+      }).catch(err => {
+        aiBtn.classList.remove('loading');
+        aiBtn.textContent = '🤖 AI Apply to Source Code';
+        aiBtn.disabled = false;
+        showToast('⚠ ' + err.message);
+      });
+    };
+
     // ══════════════════════════════════════════
     // DIFF PANEL
     // ══════════════════════════════════════════
@@ -191,6 +433,8 @@
       if (rows.length !== lastLen) {
         lastLen = rows.length;
         refreshDiff();
+        // Enable/disable AI button based on changes
+        aiBtn.disabled = rows.length === 0;
       }
     }, 400);
 
@@ -346,7 +590,9 @@
       setTimeout(() => { copyBtn.textContent = '📋 Copy'; }, 1500);
     };
 
-    // Toast helper
+    // ══════════════════════════════════════════
+    // HELPERS
+    // ══════════════════════════════════════════
     function showToast(msg) {
       const t = document.getElementById('__ps_tst__');
       if (t) { t.textContent = msg; t.classList.add('v'); clearTimeout(t._t); t._t = setTimeout(() => t.classList.remove('v'), 2800); }