draply-dev 1.0.0 → 1.1.0

package/src/draply-features.js

@@ -0,0 +1,915 @@
+/**
+ * Draply Advanced Features
+ * - Visual Diff Panel
+ * - Code Generation (Export)
+ * - Source Map Integration
+ */
+(function () {
+  if (window.__draply_features__) return;
+  window.__draply_features__ = true;
+
+  // Wait for overlay to initialize
+  const waitForOverlay = setInterval(() => {
+    if (!window.__pixelshift__) return;
+    clearInterval(waitForOverlay);
+    initFeatures();
+  }, 100);
+
+  function initFeatures() {
+    // ══════════════════════════════════════════
+    // INJECT ADDITIONAL STYLES
+    // ══════════════════════════════════════════
+    const featureStyles = document.createElement('style');
+    featureStyles.textContent = `
+      /* ── FEATURE TABS ──────────────────────────────── */
+      .ps-feature-tabs {
+        display: flex;
+        gap: 0;
+        margin: 0 -12px;
+        padding: 0 12px;
+        border-bottom: 1px solid #1e1e3a;
+        margin-bottom: 10px;
+      }
+      .ps-feature-tab {
+        flex: 1;
+        background: none;
+        border: none;
+        color: #555577;
+        font-family: 'Space Mono', monospace;
+        font-size: 9px;
+        padding: 8px 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 {
+        color: #7fff6e;
+        border-bottom-color: #7fff6e;
+      }
+
+      /* ── DIFF PANEL ────────────────────────────────── */
+      #__ps_diff_panel__ {
+        display: none;
+        flex-direction: column;
+        gap: 8px;
+        padding: 8px 0;
+      }
+      #__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 {
+        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;
+      }
+      .ps-split-label.before { left: 12px; }
+      .ps-split-label.after { right: 12px; }
+
+      /* ── EXPORT PANEL ──────────────────────────────── */
+      #__ps_export_panel__ {
+        display: none;
+        flex-direction: column;
+        gap: 8px;
+        padding: 8px 0;
+      }
+      #__ps_export_panel__.v { display: flex; }
+
+      .ps-export-format-tabs {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        margin-bottom: 6px;
+      }
+      .ps-export-format-btn {
+        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;
+      }
+
+      /* ── SOURCE PANEL ──────────────────────────────── */
+      #__ps_source_panel__ {
+        display: none;
+        flex-direction: column;
+        gap: 8px;
+        padding: 8px 0;
+      }
+      #__ps_source_panel__.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-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;
+      }
+
+      /* ── FEATURE PANEL CONTAINER ───────────────────── */
+      #__ps_features__ {
+        display: none;
+        flex-direction: column;
+        padding: 0 12px 12px;
+      }
+      #__ps_features__.v { display: flex; }
+    `;
+    document.head.appendChild(featureStyles);
+
+    // ══════════════════════════════════════════
+    // FIND SIDEBAR & INJECT 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>
+      </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>
+
+      <!-- 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>
+      </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 into sidebar (before unsaved section)
+    const unsavedSection = sidebar.querySelector('[id*="uns"]') || sidebar.lastElementChild;
+    if (unsavedSection) {
+      sidebar.insertBefore(featuresDiv, unsavedSection);
+    } else {
+      sidebar.appendChild(featuresDiv);
+    }
+
+    // ══════════════════════════════════════════
+    // FEATURE TABS
+    // ══════════════════════════════════════════
+    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__');
+
+    ftabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        ftabs.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();
+      });
+    });
+
+    // Show features panel when sidebar opens
+    const observer = new MutationObserver(() => {
+      const sidebarVisible = sidebar.classList.contains('open') || sidebar.style.display !== 'none';
+      if (sidebarVisible) {
+        featuresDiv.classList.add('v');
+      } else {
+        featuresDiv.classList.remove('v');
+      }
+    });
+    observer.observe(sidebar, { attributes: true, attributeFilter: ['class', 'style'] });
+    // Also check periodically  
+    setInterval(() => {
+      const sidebarEl = document.getElementById('__ps_sidebar__');
+      if (sidebarEl) {
+        const isVis = sidebarEl.offsetWidth > 0;
+        featuresDiv.classList.toggle('v', isVis);
+      }
+    }, 500);
+
+    // ══════════════════════════════════════════
+    // VISUAL DIFF
+    // ══════════════════════════════════════════
+    const diffList = document.getElementById('__ps_diff_list__');
+
+    // Hook into history changes by polling
+    let lastHistoryLength = 0;
+    setInterval(() => {
+      // Access overlay's history via DOM observation
+      const historyRows = document.querySelectorAll('#__ps__ [data-hid]');
+      if (historyRows.length !== lastHistoryLength) {
+        lastHistoryLength = historyRows.length;
+        refreshDiffPanel();
+      }
+    }, 300);
+
+    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>';
+        return;
+      }
+
+      // Collect change data from the DOM
+      const changes = [];
+      historyRows.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
+          });
+        }
+      });
+
+      diffList.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);
+        });
+
+        diffList.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
+    // ══════════════════════════════════════════
+    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();
+      });
+    });
+
+    function getChangesData() {
+      // Collect changes from history rows
+      const historyRows = document.querySelectorAll('#__ps__ [data-hid]');
+      const changesMap = new Map();
+
+      historyRows.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`;
+        });
+        output += '}\n\n';
+      });
+      return output.trim();
+    }
+
+    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 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`;
+      });
+      return output.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`;
+        });
+        output += '}\n\n';
+        output += `/* Usage: import styles from './module.module.css'; */\n`;
+        output += `/* <div className={styles.${className}}> */\n\n`;
+      });
+      return output.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`;
+        });
+        output += '`;\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;
+    }
+
+    exportCopy.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(exportCode.textContent);
+        showToast('📋 Copied to clipboard!');
+        exportCopy.textContent = '✓ Copied!';
+        setTimeout(() => { exportCopy.textContent = '📋 Copy to Clipboard'; }, 1500);
+      } catch {
+        // Fallback
+        const ta = document.createElement('textarea');
+        ta.value = exportCode.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';
+      }
+
+      // 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
+    // ══════════════════════════════════════════
+    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);
+      }
+    }
+
+    // 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);
+  }
+})();