draply-dev 1.2.0 → 1.2.1

package/src/draply-features.js

@@ -1,14 +1,12 @@
 /**
- * Draply Advanced Features
- * - Visual Diff Panel
- * - Code Generation (Export)
- * - Source Map Integration
+ * Draply Features
+ * - Diff Panel (view changes)
+ * - Export Panel (copy CSS / JSX / Tailwind)
  */
 (function () {
   if (window.__draply_features__) return;
   window.__draply_features__ = true;
 
-  // Wait for overlay to initialize
   const waitForOverlay = setInterval(() => {
     if (!window.__pixelshift__) return;
     clearInterval(waitForOverlay);
@@ -17,891 +15,341 @@
 
   function initFeatures() {
     // ══════════════════════════════════════════
-    // INJECT ADDITIONAL STYLES
+    // STYLES
     // ══════════════════════════════════════════
-    const featureStyles = document.createElement('style');
-    featureStyles.textContent = `
-      /* ── FEATURE TABS ──────────────────────────────── */
-      .ps-feature-tabs {
+    const s = document.createElement('style');
+    s.textContent = `
+      /* ── FEATURE TABS ────────────────────────── */
+      .ps-ftabs {
         display: flex;
         gap: 0;
-        margin: 0 -12px;
-        padding: 0 12px;
         border-bottom: 1px solid #1e1e3a;
-        margin-bottom: 10px;
+        margin-bottom: 8px;
       }
-      .ps-feature-tab {
+      .ps-ftab {
         flex: 1;
         background: none;
         border: none;
         color: #555577;
         font-family: 'Space Mono', monospace;
         font-size: 9px;
-        padding: 8px 4px;
+        padding: 6px 4px;
         cursor: pointer;
         border-bottom: 2px solid transparent;
         transition: all .2s;
         text-transform: uppercase;
         letter-spacing: 0.5px;
       }
-      .ps-feature-tab:hover { color: #aaaacc; }
-      .ps-feature-tab.active {
+      .ps-ftab:hover { color: #aaaacc; }
+      .ps-ftab.active {
         color: #7fff6e;
         border-bottom-color: #7fff6e;
       }
 
-      /* ── DIFF PANEL ────────────────────────────────── */
-      #__ps_diff_panel__ {
-        display: none;
-        flex-direction: column;
-        gap: 8px;
-        padding: 8px 0;
-        max-height: 250px;
-        overflow-y: auto;
-      }
-      #__ps_diff_panel__::-webkit-scrollbar { width: 4px; }
-      #__ps_diff_panel__::-webkit-scrollbar-track { background: transparent; }
-      #__ps_diff_panel__::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 2px; }
-      #__ps_diff_panel__.v { display: flex; }
-
-      .ps-diff-empty {
-        color: #555577;
-        font-size: 10px;
-        text-align: center;
-        padding: 20px 0;
-      }
-
-      .ps-diff-item {
-        background: #0d0d1a;
-        border: 1px solid #1e1e3a;
-        border-radius: 6px;
-        padding: 8px 10px;
-        font-size: 9px;
-      }
-      .ps-diff-item:hover {
-        border-color: #2a2a5a;
-      }
-      .ps-diff-selector {
-        color: #7fff6e;
-        font-weight: 600;
-        margin-bottom: 6px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .ps-diff-row {
+      /* ── FEATURES CONTAINER ──────────────────── */
+      #__ps_feat__ {
         display: flex;
-        align-items: center;
-        gap: 6px;
-        margin: 3px 0;
-        font-size: 9px;
-      }
-      .ps-diff-prop {
-        color: #8888aa;
-        min-width: 80px;
-        flex-shrink: 0;
-      }
-      .ps-diff-old {
-        color: #ff6b6b;
-        text-decoration: line-through;
-        opacity: 0.7;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .ps-diff-arrow {
-        color: #555577;
-        flex-shrink: 0;
-      }
-      .ps-diff-new {
-        color: #7fff6e;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .ps-diff-actions {
-        display: flex;
-        gap: 6px;
-        margin-top: 6px;
-      }
-      .ps-diff-btn {
-        background: none;
-        border: 1px solid #2a2a44;
-        color: #8888aa;
-        border-radius: 4px;
-        padding: 3px 8px;
-        font-size: 8px;
-        cursor: pointer;
-        font-family: 'Space Mono', monospace;
-        transition: all .15s;
-      }
-      .ps-diff-btn:hover {
-        border-color: #7fff6e;
-        color: #7fff6e;
-      }
-      .ps-diff-btn.revert:hover {
-        border-color: #ff6b6b;
-        color: #ff6b6b;
-      }
-
-      /* ── SPLIT VIEW OVERLAY ───────────────────────── */
-      #__ps_splitview__ {
-        display: none;
-        position: fixed;
-        top: 0; left: 0;
-        width: 100%; height: 100%;
-        z-index: 999998;
-        pointer-events: none;
-      }
-      #__ps_splitview__.v { display: block; }
-      #__ps_splitview__::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 50%;
-        width: 3px;
-        height: 100%;
-        background: #7fff6e;
-        transform: translateX(-50%);
-        box-shadow: 0 0 12px rgba(127,255,110,0.4);
-      }
-      .ps-split-label {
-        position: absolute;
-        top: 8px;
-        padding: 4px 12px;
-        background: rgba(10,10,26,0.9);
-        border: 1px solid #1e1e3a;
-        border-radius: 4px;
-        font-family: 'Space Mono', monospace;
-        font-size: 10px;
-        color: #aaaacc;
-        pointer-events: none;
+        flex-direction: column;
+        padding: 0 12px 8px;
+        border-top: 1px solid #1e1e3a;
+        margin-top: 8px;
       }
-      .ps-split-label.before { left: 12px; }
-      .ps-split-label.after { right: 12px; }
 
-      /* ── EXPORT PANEL ──────────────────────────────── */
-      #__ps_export_panel__ {
+      /* ── DIFF PANEL ──────────────────────────── */
+      .ps-dp {
         display: none;
         flex-direction: column;
-        gap: 8px;
-        padding: 8px 0;
-        max-height: 250px;
+        gap: 6px;
+        max-height: 200px;
         overflow-y: auto;
       }
-      #__ps_export_panel__::-webkit-scrollbar { width: 4px; }
-      #__ps_export_panel__::-webkit-scrollbar-track { background: transparent; }
-      #__ps_export_panel__::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 2px; }
-      #__ps_export_panel__.v { display: flex; }
+      .ps-dp::-webkit-scrollbar { width: 3px; }
+      .ps-dp::-webkit-scrollbar-track { background: transparent; }
+      .ps-dp::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 2px; }
+      .ps-dp.v { display: flex; }
 
-      .ps-export-format-tabs {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 4px;
-        margin-bottom: 6px;
-      }
-      .ps-export-format-btn {
+      .ps-di {
         background: #0d0d1a;
         border: 1px solid #1e1e3a;
-        color: #8888aa;
-        border-radius: 4px;
-        padding: 4px 8px;
-        font-size: 8px;
-        cursor: pointer;
-        font-family: 'Space Mono', monospace;
-        transition: all .15s;
-      }
-      .ps-export-format-btn:hover { border-color: #555577; }
-      .ps-export-format-btn.active {
-        border-color: #7fff6e;
-        color: #7fff6e;
-        background: rgba(127,255,110,0.05);
-      }
-
-      .ps-export-code {
-        background: #0d0d1a;
-        border: 1px solid #1e1e3a;
-        border-radius: 6px;
-        padding: 10px;
-        font-family: 'Space Mono', monospace;
-        font-size: 9px;
-        color: #ccccee;
-        white-space: pre-wrap;
-        word-break: break-all;
-        max-height: 300px;
-        overflow-y: auto;
-        line-height: 1.6;
-        position: relative;
-      }
-      .ps-export-code::-webkit-scrollbar { width: 4px; }
-      .ps-export-code::-webkit-scrollbar-track { background: transparent; }
-      .ps-export-code::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 2px; }
-
-      .ps-export-copy {
-        background: linear-gradient(135deg, #7fff6e22, #7fff6e11);
-        border: 1px solid #7fff6e44;
-        color: #7fff6e;
         border-radius: 5px;
-        padding: 6px 16px;
-        font-size: 10px;
-        cursor: pointer;
-        font-family: 'Space Mono', monospace;
-        transition: all .15s;
-        text-align: center;
-        margin-top: 4px;
-      }
-      .ps-export-copy:hover {
-        background: linear-gradient(135deg, #7fff6e33, #7fff6e22);
-        border-color: #7fff6e;
-      }
-
-      .ps-export-empty {
-        color: #555577;
-        font-size: 10px;
-        text-align: center;
-        padding: 20px 0;
+        padding: 6px 8px;
+        font-size: 9px;
       }
-
-      /* ── SOURCE PANEL ──────────────────────────────── */
-      #__ps_source_panel__ {
+      .ps-di:hover { border-color: #2a2a5a; }
+      .ps-ds { color: #7fff6e; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .ps-dr { display: flex; align-items: center; gap: 4px; margin: 2px 0; font-size: 9px; }
+      .ps-dk { color: #8888aa; min-width: 70px; flex-shrink: 0; }
+      .ps-da { color: #555577; flex-shrink: 0; }
+      .ps-dv { color: #7fff6e; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .ps-db {
+        background: none; border: 1px solid #2a2a44; color: #8888aa;
+        border-radius: 3px; padding: 2px 6px; font-size: 8px; cursor: pointer;
+        font-family: 'Space Mono', monospace; transition: all .15s; margin-top: 4px;
+      }
+      .ps-db:hover { border-color: #ff6b6b; color: #ff6b6b; }
+      .ps-de { color: #555577; font-size: 9px; text-align: center; padding: 12px 0; }
+
+      /* ── EXPORT PANEL ────────────────────────── */
+      .ps-ep {
         display: none;
         flex-direction: column;
-        gap: 8px;
-        padding: 8px 0;
+        gap: 6px;
+        max-height: 200px;
+        overflow-y: auto;
       }
-      #__ps_source_panel__.v { display: flex; }
+      .ps-ep::-webkit-scrollbar { width: 3px; }
+      .ps-ep::-webkit-scrollbar-track { background: transparent; }
+      .ps-ep::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 2px; }
+      .ps-ep.v { display: flex; }
 
-      .ps-source-info {
-        background: #0d0d1a;
-        border: 1px solid #1e1e3a;
-        border-radius: 6px;
-        padding: 10px;
-        font-size: 9px;
-      }
-      .ps-source-label {
-        color: #555577;
-        font-size: 8px;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        margin-bottom: 4px;
-      }
-      .ps-source-value {
-        color: #ccccee;
-        font-size: 10px;
-        word-break: break-all;
-      }
-      .ps-source-value.highlight {
-        color: #7fff6e;
-      }
-      .ps-source-hint {
-        background: rgba(127,255,110,0.05);
-        border: 1px solid #7fff6e33;
-        border-radius: 6px;
-        padding: 8px 10px;
-        font-size: 9px;
-        color: #aaddaa;
-        line-height: 1.5;
+      .ps-ef { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }
+      .ps-eb {
+        background: #0d0d1a; 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;
       }
-      .ps-source-hint-icon {
-        color: #7fff6e;
-        margin-right: 4px;
-      }
-      .ps-source-loading {
-        color: #555577;
-        font-size: 10px;
-        text-align: center;
-        padding: 20px 0;
-      }
-      .ps-source-empty {
-        color: #555577;
-        font-size: 10px;
-        text-align: center;
-        padding: 20px 0;
+      .ps-eb:hover { border-color: #555577; }
+      .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;
+        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;
       }
+      .ps-ec::-webkit-scrollbar { width: 3px; }
+      .ps-ec::-webkit-scrollbar-track { background: transparent; }
+      .ps-ec::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 2px; }
 
-      /* ── FEATURE PANEL CONTAINER ───────────────────── */
-      #__ps_features__ {
-        display: flex;
-        flex-direction: column;
-        padding: 0 12px 12px;
-        border-top: 1px solid #1e1e3a;
-        margin-top: 10px;
+      .ps-cp {
+        background: linear-gradient(135deg, #7fff6e22, #7fff6e11);
+        border: 1px solid #7fff6e44; color: #7fff6e; border-radius: 4px;
+        padding: 5px 12px; font-size: 9px; cursor: pointer;
+        font-family: 'Space Mono', monospace; transition: all .15s; text-align: center;
       }
+      .ps-cp:hover { background: linear-gradient(135deg, #7fff6e33, #7fff6e22); border-color: #7fff6e; }
     `;
-    document.head.appendChild(featureStyles);
+    document.head.appendChild(s);
 
     // ══════════════════════════════════════════
-    // FIND SIDEBAR & INJECT UI
+    // BUILD UI
     // ══════════════════════════════════════════
     const sidebar = document.getElementById('__ps_sidebar__');
     if (!sidebar) return;
 
-    // Create feature panel container
-    const featuresDiv = document.createElement('div');
-    featuresDiv.id = '__ps_features__';
-    featuresDiv.innerHTML = `
-      <div class="ps-feature-tabs">
-        <button class="ps-feature-tab active" data-ftab="diff">📊 Diff</button>
-        <button class="ps-feature-tab" data-ftab="export">📦 Export</button>
-        <button class="ps-feature-tab" data-ftab="source">🔍 Source</button>
+    const feat = document.createElement('div');
+    feat.id = '__ps_feat__';
+    feat.innerHTML = `
+      <div class="ps-ftabs">
+        <button class="ps-ftab active" data-ft="diff">📊 Diff</button>
+        <button class="ps-ftab" data-ft="export">📦 Export</button>
       </div>
-
-      <!-- DIFF PANEL -->
-      <div id="__ps_diff_panel__" class="v">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
-          <span style="color:#8888aa;font-size:9px;">Changes</span>
-          <button id="__ps_split_toggle__" class="ps-diff-btn" style="font-size:8px;">⊞ Split View</button>
-        </div>
-        <div id="__ps_diff_list__">
-          <div class="ps-diff-empty">No changes yet. Edit elements to see diffs.</div>
-        </div>
-      </div>
-
-      <!-- EXPORT PANEL -->
-      <div id="__ps_export_panel__">
-        <div class="ps-export-format-tabs">
-          <button class="ps-export-format-btn active" data-format="css">CSS</button>
-          <button class="ps-export-format-btn" data-format="jsx">JSX Inline</button>
-          <button class="ps-export-format-btn" data-format="tailwind">Tailwind</button>
-          <button class="ps-export-format-btn" data-format="modules">CSS Modules</button>
-          <button class="ps-export-format-btn" data-format="styled">styled-components</button>
-        </div>
-        <div id="__ps_export_code__" class="ps-export-code">
-          <span class="ps-export-empty">No changes to export.</span>
-        </div>
-        <button id="__ps_export_copy__" class="ps-export-copy">📋 Copy to Clipboard</button>
+      <div class="ps-dp v" id="__ps_dp__">
+        <div class="ps-de">No changes yet</div>
       </div>
-
-      <!-- SOURCE PANEL -->
-      <div id="__ps_source_panel__">
-        <div id="__ps_source_project__" class="ps-source-info">
-          <div class="ps-source-label">Project Framework</div>
-          <div class="ps-source-value ps-source-loading">Detecting...</div>
-        </div>
-        <div id="__ps_source_element__" class="ps-source-info" style="display:none;">
-          <div class="ps-source-label">Selected Element</div>
-          <div id="__ps_source_el_info__" class="ps-source-value"></div>
-        </div>
-        <div id="__ps_source_file__" class="ps-source-info" style="display:none;">
-          <div class="ps-source-label">Source File</div>
-          <div id="__ps_source_file_info__" class="ps-source-value highlight"></div>
-        </div>
-        <div id="__ps_source_hint__" class="ps-source-hint" style="display:none;">
-          <span class="ps-source-hint-icon">💡</span>
-          <span id="__ps_source_hint_text__"></span>
+      <div class="ps-ep" id="__ps_ep__">
+        <div class="ps-ef">
+          <button class="ps-eb active" data-fmt="css">CSS</button>
+          <button class="ps-eb" data-fmt="jsx">JSX</button>
+          <button class="ps-eb" data-fmt="tailwind">Tailwind</button>
         </div>
+        <div class="ps-ec" id="__ps_ec__">/* No changes */</div>
+        <button class="ps-cp" id="__ps_copy__">📋 Copy</button>
       </div>
     `;
 
-    // Split view overlay
-    const splitView = document.createElement('div');
-    splitView.id = '__ps_splitview__';
-    splitView.innerHTML = `
-      <div class="ps-split-label before">BEFORE</div>
-      <div class="ps-split-label after">AFTER</div>
-    `;
-    document.body.appendChild(splitView);
-
-    // Insert features panel before the footer (SAVE CHANGES button)
+    // Insert before footer
     const foot = sidebar.querySelector('.ps-foot');
-    if (foot) {
-      sidebar.insertBefore(featuresDiv, foot);
-    } else {
-      sidebar.appendChild(featuresDiv);
-    }
+    if (foot) sidebar.insertBefore(feat, foot);
+    else sidebar.appendChild(feat);
 
     // ══════════════════════════════════════════
-    // FEATURE TABS
+    // TAB SWITCHING
     // ══════════════════════════════════════════
-    const ftabs = featuresDiv.querySelectorAll('.ps-feature-tab');
-    const diffPanel = document.getElementById('__ps_diff_panel__');
-    const exportPanel = document.getElementById('__ps_export_panel__');
-    const sourcePanel = document.getElementById('__ps_source_panel__');
+    const dp = document.getElementById('__ps_dp__');
+    const ep = document.getElementById('__ps_ep__');
+    const tabs = feat.querySelectorAll('.ps-ftab');
 
-    ftabs.forEach(tab => {
-      tab.addEventListener('click', () => {
-        ftabs.forEach(t => t.classList.remove('active'));
+    tabs.forEach(tab => {
+      tab.onclick = () => {
+        tabs.forEach(t => t.classList.remove('active'));
         tab.classList.add('active');
-        const which = tab.dataset.ftab;
-        diffPanel.classList.toggle('v', which === 'diff');
-        exportPanel.classList.toggle('v', which === 'export');
-        sourcePanel.classList.toggle('v', which === 'source');
-        if (which === 'diff') refreshDiffPanel();
-        if (which === 'export') refreshExportPanel();
-        if (which === 'source') refreshSourcePanel();
-      });
+        const w = tab.dataset.ft;
+        dp.classList.toggle('v', w === 'diff');
+        ep.classList.toggle('v', w === 'export');
+        if (w === 'diff') refreshDiff();
+        if (w === 'export') refreshExport();
+      };
     });
 
     // ══════════════════════════════════════════
-    // VISUAL DIFF
+    // DIFF PANEL
     // ══════════════════════════════════════════
-    const diffList = document.getElementById('__ps_diff_list__');
-
-    // Hook into history changes by polling
-    let lastHistoryLength = 0;
+    let lastLen = 0;
     setInterval(() => {
-      // Access overlay's history via DOM observation
-      const historyRows = document.querySelectorAll('#__ps__ [data-hid]');
-      if (historyRows.length !== lastHistoryLength) {
-        lastHistoryLength = historyRows.length;
-        refreshDiffPanel();
+      const rows = document.querySelectorAll('#__ps__ [data-hid]');
+      if (rows.length !== lastLen) {
+        lastLen = rows.length;
+        refreshDiff();
       }
-    }, 300);
+    }, 400);
 
-    function refreshDiffPanel() {
-      // Read changes from the unsaved list entries
-      const historyRows = document.querySelectorAll('#__ps__ [data-hid]');
-      
-      if (historyRows.length === 0) {
-        diffList.innerHTML = '<div class="ps-diff-empty">No changes yet. Edit elements to see diffs.</div>';
+    function refreshDiff() {
+      const rows = document.querySelectorAll('#__ps__ [data-hid]');
+      if (rows.length === 0) {
+        dp.innerHTML = '<div class="ps-de">No changes yet</div>';
         return;
       }
 
-      // Collect change data from the DOM
       const changes = [];
-      historyRows.forEach(btn => {
+      rows.forEach(btn => {
         const row = btn.closest('div[style]');
         if (!row) return;
-        const selectorDiv = row.querySelector('div[style*="color:#7fff6e"]');
-        const propsDiv = row.querySelector('div[style*="color:#555577"]');
-        if (selectorDiv && propsDiv) {
-          changes.push({
-            hid: btn.dataset.hid,
-            selector: selectorDiv.textContent,
-            propsStr: propsDiv.textContent
-          });
+        const selDiv = row.querySelector('div[style*="color:#7fff6e"]');
+        const propDiv = row.querySelector('div[style*="color:#555577"]');
+        if (selDiv && propDiv) {
+          changes.push({ hid: btn.dataset.hid, sel: selDiv.textContent, props: propDiv.textContent });
         }
       });
 
-      diffList.innerHTML = '';
+      dp.innerHTML = '';
       changes.forEach(ch => {
         const item = document.createElement('div');
-        item.className = 'ps-diff-item';
-
-        // Parse props string
-        const propPairs = ch.propsStr.split(',').map(p => p.trim()).filter(Boolean);
-        let rowsHtml = '';
-        propPairs.forEach(pair => {
-          const colonIdx = pair.indexOf(':');
-          if (colonIdx < 0) return;
-          const prop = pair.substring(0, colonIdx).trim();
-          const val = pair.substring(colonIdx + 1).trim();
-          rowsHtml += `
-            <div class="ps-diff-row">
-              <span class="ps-diff-prop">${prop}</span>
-              <span class="ps-diff-arrow">→</span>
-              <span class="ps-diff-new">${val}</span>
-            </div>
-          `;
-        });
-
-        item.innerHTML = `
-          <div class="ps-diff-selector">${ch.selector}</div>
-          ${rowsHtml}
-          <div class="ps-diff-actions">
-            <button class="ps-diff-btn revert" data-hid="${ch.hid}">↩ Revert</button>
-          </div>
-        `;
-
-        // Revert button
-        item.querySelector('.revert').addEventListener('click', () => {
-          const origBtn = document.querySelector(`#__ps__ [data-hid="${ch.hid}"]`);
-          if (origBtn) origBtn.click();
-          setTimeout(refreshDiffPanel, 100);
+        item.className = 'ps-di';
+
+        const pairs = ch.props.split(',').map(p => p.trim()).filter(Boolean);
+        let html = `<div class="ps-ds">${ch.sel}</div>`;
+        pairs.forEach(pair => {
+          const ci = pair.indexOf(':');
+          if (ci < 0) return;
+          html += `<div class="ps-dr"><span class="ps-dk">${pair.substring(0, ci).trim()}</span><span class="ps-da">→</span><span class="ps-dv">${pair.substring(ci + 1).trim()}</span></div>`;
         });
-
-        diffList.appendChild(item);
+        html += `<button class="ps-db" data-hid="${ch.hid}">↩ Revert</button>`;
+        item.innerHTML = html;
+
+        item.querySelector('.ps-db').onclick = () => {
+          const orig = document.querySelector(`#__ps__ [data-hid="${ch.hid}"]`);
+          if (orig) orig.click();
+          setTimeout(refreshDiff, 100);
+        };
+        dp.appendChild(item);
       });
     }
 
-    // Split view toggle
-    const splitToggle = document.getElementById('__ps_split_toggle__');
-    let splitActive = false;
-    splitToggle.addEventListener('click', () => {
-      splitActive = !splitActive;
-      splitView.classList.toggle('v', splitActive);
-      splitToggle.textContent = splitActive ? '⊟ Close Split' : '⊞ Split View';
-      splitToggle.style.borderColor = splitActive ? '#7fff6e' : '';
-      splitToggle.style.color = splitActive ? '#7fff6e' : '';
-    });
-
     // ══════════════════════════════════════════
-    // CODE GENERATION
+    // EXPORT PANEL
     // ══════════════════════════════════════════
-    const exportCode = document.getElementById('__ps_export_code__');
-    const exportCopy = document.getElementById('__ps_export_copy__');
-    const formatBtns = featuresDiv.querySelectorAll('.ps-export-format-btn');
-    let currentFormat = 'css';
-
-    // CSS to Tailwind mapping (basic properties)
-    const cssToTailwind = {
-      'background-color': (v) => {
-        if (v === 'transparent') return 'bg-transparent';
-        return `bg-[${v}]`;
-      },
-      'color': (v) => `text-[${v}]`,
-      'font-size': (v) => {
-        const px = parseInt(v);
-        const map = { 12: 'text-xs', 14: 'text-sm', 16: 'text-base', 18: 'text-lg', 20: 'text-xl', 24: 'text-2xl', 30: 'text-3xl', 36: 'text-4xl' };
-        return map[px] || `text-[${v}]`;
-      },
-      'font-weight': (v) => {
-        const map = { '400': 'font-normal', '500': 'font-medium', '600': 'font-semibold', '700': 'font-bold' };
-        return map[v] || `font-[${v}]`;
-      },
-      'font-style': (v) => v === 'italic' ? 'italic' : 'not-italic',
-      'text-decoration': (v) => {
-        if (v.includes('underline')) return 'underline';
-        if (v.includes('line-through')) return 'line-through';
-        return 'no-underline';
-      },
-      'text-transform': (v) => {
-        const map = { 'uppercase': 'uppercase', 'lowercase': 'lowercase', 'capitalize': 'capitalize', 'none': 'normal-case' };
-        return map[v] || '';
-      },
-      'line-height': (v) => `leading-[${v}]`,
-      'letter-spacing': (v) => `tracking-[${v}]`,
-      'width': (v) => `w-[${v}]`,
-      'height': (v) => `h-[${v}]`,
-      'left': (v) => `left-[${v}]`,
-      'top': (v) => `top-[${v}]`,
-      'border': (v) => {
-        if (v === 'none') return 'border-0';
-        return `border-[${v}]`;
-      },
-      'border-color': (v) => `border-[${v}]`,
-      'z-index': (v) => `z-[${v}]`,
-    };
-
-    function camelCase(str) {
-      return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-    }
-
-    formatBtns.forEach(btn => {
-      btn.addEventListener('click', () => {
-        formatBtns.forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        currentFormat = btn.dataset.format;
-        refreshExportPanel();
-      });
+    const ec = document.getElementById('__ps_ec__');
+    const copyBtn = document.getElementById('__ps_copy__');
+    const fmtBtns = feat.querySelectorAll('.ps-eb');
+    let fmt = 'css';
+
+    fmtBtns.forEach(b => {
+      b.onclick = () => {
+        fmtBtns.forEach(x => x.classList.remove('active'));
+        b.classList.add('active');
+        fmt = b.dataset.fmt;
+        refreshExport();
+      };
     });
 
-    function getChangesData() {
-      // Collect changes from history rows
-      const historyRows = document.querySelectorAll('#__ps__ [data-hid]');
-      const changesMap = new Map();
-
-      historyRows.forEach(btn => {
+    function getChanges() {
+      const rows = document.querySelectorAll('#__ps__ [data-hid]');
+      const map = new Map();
+      rows.forEach(btn => {
         const row = btn.closest('div[style]');
         if (!row) return;
-        const selectorDiv = row.querySelector('div[style*="color:#7fff6e"]');
-        const propsDiv = row.querySelector('div[style*="color:#555577"]');
-        if (!selectorDiv || !propsDiv) return;
-
-        const selector = selectorDiv.textContent.trim();
-        const propsStr = propsDiv.textContent.trim();
-
-        if (!changesMap.has(selector)) {
-          changesMap.set(selector, {});
-        }
-
-        const props = changesMap.get(selector);
-        propsStr.split(',').forEach(pair => {
-          const colonIdx = pair.indexOf(':');
-          if (colonIdx < 0) return;
-          const prop = pair.substring(0, colonIdx).trim();
-          const val = pair.substring(colonIdx + 1).trim();
-          props[prop] = val;
-        });
-      });
-
-      return changesMap;
-    }
-
-    function generateCSS(changesMap) {
-      if (changesMap.size === 0) return '/* No changes to export */';
-      let output = '/* Generated by Draply */\n\n';
-      changesMap.forEach((props, selector) => {
-        output += `${selector} {\n`;
-        Object.entries(props).forEach(([prop, val]) => {
-          output += `  ${prop}: ${val};\n`;
+        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 (!map.has(sel)) map.set(sel, {});
+        const obj = map.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();
         });
-        output += '}\n\n';
       });
-      return output.trim();
+      return map;
     }
 
-    function generateJSX(changesMap) {
-      if (changesMap.size === 0) return '// No changes to export';
-      let output = '// Generated by Draply — JSX Inline Styles\n\n';
-      changesMap.forEach((props, selector) => {
-        output += `// ${selector}\n`;
-        output += 'const style = {\n';
-        Object.entries(props).forEach(([prop, val]) => {
-          const camel = camelCase(prop);
-          // Numbers for certain props
-          if (['fontSize', 'lineHeight', 'letterSpacing', 'width', 'height', 'left', 'top', 'zIndex'].includes(camel) && val.endsWith('px')) {
-            if (camel === 'zIndex') {
-              output += `  ${camel}: ${parseInt(val)},\n`;
-            } else {
-              output += `  ${camel}: '${val}',\n`;
-            }
-          } else {
-            output += `  ${camel}: '${val}',\n`;
-          }
-        });
-        output += '};\n\n';
-      });
-      return output.trim();
+    function refreshExport() {
+      const m = getChanges();
+      if (m.size === 0) { ec.textContent = '/* No changes */'; return; }
+      switch (fmt) {
+        case 'css': ec.textContent = genCSS(m); break;
+        case 'jsx': ec.textContent = genJSX(m); break;
+        case 'tailwind': ec.textContent = genTW(m); break;
+      }
     }
 
-    function generateTailwind(changesMap) {
-      if (changesMap.size === 0) return '<!-- No changes to export -->';
-      let output = '<!-- Generated by Draply — Tailwind Classes -->\n\n';
-      changesMap.forEach((props, selector) => {
-        const classes = [];
-        Object.entries(props).forEach(([prop, val]) => {
-          const mapper = cssToTailwind[prop];
-          if (mapper) {
-            const cls = mapper(val);
-            if (cls) classes.push(cls);
-          } else {
-            classes.push(`[${prop}:${val}]`);
-          }
-        });
-        output += `/* ${selector} */\n`;
-        output += `class="${classes.join(' ')}"\n\n`;
+    function genCSS(m) {
+      let o = '';
+      m.forEach((p, s) => {
+        o += `${s} {\n`;
+        Object.entries(p).forEach(([k, v]) => o += `  ${k}: ${v};\n`);
+        o += '}\n\n';
       });
-      return output.trim();
+      return o.trim();
     }
 
-    function generateModules(changesMap) {
-      if (changesMap.size === 0) return '/* No changes to export */';
-      let output = '/* Generated by Draply — CSS Modules */\n\n';
-      let counter = 0;
-      changesMap.forEach((props, selector) => {
-        const className = selector.replace(/[^a-zA-Z0-9]/g, '').substring(0, 20) || `element${counter++}`;
-        output += `.${className} {\n`;
-        Object.entries(props).forEach(([prop, val]) => {
-          output += `  ${prop}: ${val};\n`;
+    function genJSX(m) {
+      let o = '';
+      m.forEach((p, s) => {
+        o += `// ${s}\nconst style = {\n`;
+        Object.entries(p).forEach(([k, v]) => {
+          const c = k.replace(/-([a-z])/g, (_, l) => l.toUpperCase());
+          o += `  ${c}: '${v}',\n`;
         });
-        output += '}\n\n';
-        output += `/* Usage: import styles from './module.module.css'; */\n`;
-        output += `/* <div className={styles.${className}}> */\n\n`;
+        o += '};\n\n';
       });
-      return output.trim();
+      return o.trim();
     }
 
-    function generateStyled(changesMap) {
-      if (changesMap.size === 0) return '// No changes to export';
-      let output = "// Generated by Draply — styled-components\nimport styled from 'styled-components';\n\n";
-      let counter = 0;
-      changesMap.forEach((props, selector) => {
-        const name = 'Styled' + (selector.replace(/[^a-zA-Z0-9]/g, '').substring(0, 15) || `Element${counter++}`);
-        output += `const ${name} = styled.div\`\n`;
-        Object.entries(props).forEach(([prop, val]) => {
-          output += `  ${prop}: ${val};\n`;
+    function genTW(m) {
+      const twMap = {
+        'background-color': v => `bg-[${v}]`,
+        'color': v => `text-[${v}]`,
+        'font-size': v => `text-[${v}]`,
+        'font-weight': v => { const n = { '400': 'font-normal', '500': 'font-medium', '600': 'font-semibold', '700': 'font-bold' }; return n[v] || `font-[${v}]`; },
+        'width': v => `w-[${v}]`,
+        'height': v => `h-[${v}]`,
+        'left': v => `left-[${v}]`,
+        'top': v => `top-[${v}]`,
+        'border': v => v === 'none' ? 'border-0' : `border-[${v}]`,
+        'z-index': v => `z-[${v}]`,
+      };
+      let o = '';
+      m.forEach((p, s) => {
+        const cls = Object.entries(p).map(([k, v]) => {
+          const fn = twMap[k];
+          return fn ? fn(v) : `[${k}:${v}]`;
         });
-        output += '`;\n\n';
+        o += `/* ${s} */\nclass="${cls.join(' ')}"\n\n`;
       });
-      return output.trim();
-    }
-
-    function refreshExportPanel() {
-      const changesMap = getChangesData();
-
-      let code = '';
-      switch (currentFormat) {
-        case 'css': code = generateCSS(changesMap); break;
-        case 'jsx': code = generateJSX(changesMap); break;
-        case 'tailwind': code = generateTailwind(changesMap); break;
-        case 'modules': code = generateModules(changesMap); break;
-        case 'styled': code = generateStyled(changesMap); break;
-      }
-
-      exportCode.textContent = code;
+      return o.trim();
     }
 
-    exportCopy.addEventListener('click', async () => {
+    copyBtn.onclick = async () => {
       try {
-        await navigator.clipboard.writeText(exportCode.textContent);
-        showToast('📋 Copied to clipboard!');
-        exportCopy.textContent = '✓ Copied!';
-        setTimeout(() => { exportCopy.textContent = '📋 Copy to Clipboard'; }, 1500);
+        await navigator.clipboard.writeText(ec.textContent);
       } catch {
-        // Fallback
         const ta = document.createElement('textarea');
-        ta.value = exportCode.textContent;
+        ta.value = ec.textContent;
         document.body.appendChild(ta);
         ta.select();
         document.execCommand('copy');
         document.body.removeChild(ta);
-        showToast('📋 Copied to clipboard!');
-        exportCopy.textContent = '✓ Copied!';
-        setTimeout(() => { exportCopy.textContent = '📋 Copy to Clipboard'; }, 1500);
-      }
-    });
-
-    // ══════════════════════════════════════════
-    // SOURCE MAP INTEGRATION
-    // ══════════════════════════════════════════
-    let projectInfo = null;
-
-    async function detectProject() {
-      try {
-        const resp = await fetch('/draply-project-info');
-        if (resp.ok) {
-          projectInfo = await resp.json();
-          updateProjectUI();
-        }
-      } catch {
-        projectInfo = { framework: 'unknown', cssStrategy: 'external' };
-        updateProjectUI();
-      }
-    }
-
-    function updateProjectUI() {
-      const projEl = document.querySelector('#__ps_source_project__ .ps-source-value');
-      if (!projEl || !projectInfo) return;
-
-      const fwNames = {
-        'react': '⚛️ React',
-        'next': '▲ Next.js',
-        'vue': '💚 Vue.js',
-        'nuxt': '💚 Nuxt',
-        'angular': '🅰️ Angular',
-        'svelte': '🔶 Svelte',
-        'vite': '⚡ Vite',
-        'unknown': '📁 Static/Unknown'
-      };
-
-      const cssNames = {
-        'tailwind': 'Tailwind CSS',
-        'css-modules': 'CSS Modules',
-        'styled-components': 'styled-components',
-        'emotion': 'Emotion',
-        'sass': 'SASS/SCSS',
-        'external': 'External CSS',
-        'unknown': 'Unknown'
-      };
-
-      projEl.classList.remove('ps-source-loading');
-      projEl.classList.add('highlight');
-      projEl.textContent = `${fwNames[projectInfo.framework] || projectInfo.framework}`;
-
-      if (projectInfo.cssStrategy && projectInfo.cssStrategy !== 'unknown') {
-        projEl.textContent += ` + ${cssNames[projectInfo.cssStrategy] || projectInfo.cssStrategy}`;
-      }
-    }
-
-    function refreshSourcePanel() {
-      if (!projectInfo) detectProject();
-
-      // Check for selected element
-      const selectedEl = document.querySelector('.__ps__');
-      const elInfo = document.getElementById('__ps_source_el_info__');
-      const elSection = document.getElementById('__ps_source_element__');
-      const fileSection = document.getElementById('__ps_source_file__');
-      const fileInfo = document.getElementById('__ps_source_file_info__');
-      const hintSection = document.getElementById('__ps_source_hint__');
-      const hintText = document.getElementById('__ps_source_hint_text__');
-
-      if (!selectedEl) {
-        if (elSection) elSection.style.display = 'none';
-        if (fileSection) fileSection.style.display = 'none';
-        if (hintSection) hintSection.style.display = 'none';
-        return;
-      }
-
-      if (elSection) {
-        elSection.style.display = '';
-        const tag = selectedEl.tagName.toLowerCase();
-        const cls = [...selectedEl.classList].filter(c => !c.startsWith('__')).join('.');
-        const id = selectedEl.id ? `#${selectedEl.id}` : '';
-        elInfo.textContent = `<${tag}${id}${cls ? '.' + cls : ''}>`;
-      }
-
-      // Try to find source via data attributes
-      const sourceFile = selectedEl.dataset?.source || 
-                         selectedEl.getAttribute('data-source') ||
-                         findReactSource(selectedEl);
-
-      if (sourceFile && fileSection) {
-        fileSection.style.display = '';
-        fileInfo.textContent = sourceFile;
-      } else if (fileSection) {
-        fileSection.style.display = 'none';
       }
+      copyBtn.textContent = '✓ Copied!';
+      setTimeout(() => { copyBtn.textContent = '📋 Copy'; }, 1500);
+    };
 
-      // Generate insertion hint
-      if (hintSection && hintText && projectInfo) {
-        hintSection.style.display = '';
-        const tag = selectedEl.tagName.toLowerCase();
-        const cls = [...selectedEl.classList].filter(c => !c.startsWith('__'))[0];
-
-        if (projectInfo.framework === 'react' || projectInfo.framework === 'next') {
-          if (projectInfo.cssStrategy === 'tailwind') {
-            hintText.textContent = `Add Tailwind classes directly to the ${cls ? '.' + cls : tag} JSX element's className prop.`;
-          } else if (projectInfo.cssStrategy === 'css-modules') {
-            hintText.textContent = `Add styles to the corresponding .module.css file for ${cls ? '.' + cls : tag}.`;
-          } else if (projectInfo.cssStrategy === 'styled-components') {
-            hintText.textContent = `Modify the styled() definition for ${cls ? '.' + cls : tag} in the component file.`;
-          } else {
-            hintText.textContent = `Add the CSS rules for ${cls ? '.' + cls : tag} to your stylesheet or use inline styles in JSX.`;
-          }
-        } else if (projectInfo.framework === 'vue' || projectInfo.framework === 'nuxt') {
-          hintText.textContent = `Add styles in the <style scoped> section of the ${cls ? '.' + cls : tag} component.`;
-        } else {
-          hintText.textContent = `Add the generated CSS to your stylesheet targeting ${cls ? '.' + cls : tag}.`;
-        }
-      }
-    }
-
-    function findReactSource(el) {
-      // Try to find React fiber for source info
-      const fiberKey = Object.keys(el).find(k => k.startsWith('__reactFiber') || k.startsWith('__reactInternalInstance'));
-      if (!fiberKey) return null;
-
-      try {
-        let fiber = el[fiberKey];
-        while (fiber) {
-          if (fiber._debugSource) {
-            return `${fiber._debugSource.fileName}:${fiber._debugSource.lineNumber}`;
-          }
-          if (fiber._debugOwner && fiber._debugOwner._debugSource) {
-            return `${fiber._debugOwner._debugSource.fileName}:${fiber._debugOwner._debugSource.lineNumber}`;
-          }
-          fiber = fiber.return;
-        }
-      } catch { /* ignore */ }
-      return null;
-    }
-
-    // ══════════════════════════════════════════
-    // UTILS
-    // ══════════════════════════════════════════
+    // Toast helper
     function showToast(msg) {
-      const tst = document.getElementById('__tst__');
-      if (tst) {
-        tst.textContent = msg;
-        tst.classList.add('v');
-        clearTimeout(tst._t);
-        tst._t = setTimeout(() => tst.classList.remove('v'), 2800);
-      }
+      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); }
     }
-
-    // Auto-detect project on load
-    setTimeout(detectProject, 500);
-
-    // Listen for element selection changes
-    setInterval(() => {
-      const activeTab = featuresDiv.querySelector('.ps-feature-tab.active');
-      if (activeTab && activeTab.dataset.ftab === 'source') {
-        refreshSourcePanel();
-      }
-    }, 1000);
   }
 })();