draply-dev 1.1.0 → 1.1.1

package/package.json

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

@@ -314,11 +314,12 @@
 
       /* ── FEATURE PANEL CONTAINER ───────────────────── */
       #__ps_features__ {
-        display: none;
+        display: flex;
         flex-direction: column;
         padding: 0 12px 12px;
+        border-top: 1px solid #1e1e3a;
+        margin-top: 10px;
       }
-      #__ps_features__.v { display: flex; }
     `;
     document.head.appendChild(featureStyles);
 
@@ -394,10 +395,10 @@
     `;
     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);
+    // Insert features panel before the footer (SAVE CHANGES button)
+    const foot = sidebar.querySelector('.ps-foot');
+    if (foot) {
+      sidebar.insertBefore(featuresDiv, foot);
     } else {
       sidebar.appendChild(featuresDiv);
     }
@@ -424,25 +425,6 @@
       });
     });
 
-    // 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
     // ══════════════════════════════════════════