added selection panel expansion

Author: Mnikley

src/graph_lens_lite.html

@@ -90,10 +90,14 @@ <h5 class="purple">Shown:
               onclick="cache.sm.undoSelection()">↩</button>
       <button class="small-btn disabled" title="Redo Selection" id="redoSelectionBtn"
               onclick="cache.sm.redoSelection()">↪</button>
+      <div class="button-separator"></div>
+      <button class="small-btn" title="Expand selection editor" id="selectionEditorToggleBtn"
+              onclick="cache.ui.toggleSelectionEditor()">▾</button>
       <div id="manualGroupSeparator" class="button-separator" style="display: none;"></div>
       <span id="manualBubbleGroupStatus" class="manual-group-status" style="display: none;"></span>
       <button id="clearManualGroupsBtn" class="small-btn red" title="Clear all manual bubble groups"
               onclick="cache.bs.clearAllManualGroups()" style="display: none;">×</button>
+      <div id="selectionEditorPanel" class="selection-editor-panel"></div>
     </div>
     <div id="innerGraphContainer"></div>
   </div>

src/managers/ui.js

@@ -372,6 +372,18 @@ class UIManager {
     }, 300);
   }
 
+  toggleSelectionEditor() {
+    const container = document.getElementById("selectedElementsContainer");
+    const panel = document.getElementById("selectionEditorPanel");
+    const toggleBtn = document.getElementById("selectionEditorToggleBtn");
+    if (!container || !panel || !toggleBtn) return;
+
+    const isExpanded = container.classList.toggle("expanded");
+    toggleBtn.textContent = isExpanded ? "▴" : "▾";
+    toggleBtn.title = isExpanded ? "Collapse selection editor" : "Expand selection editor";
+    toggleBtn.setAttribute("aria-expanded", isExpanded ? "true" : "false");
+  }
+
   async toggleLassoSelection() {
     const lassoWrapper = document.getElementById("lassoWrapper");
     let lassoIsActive = lassoWrapper.classList.contains("active");
@@ -712,6 +724,18 @@ class UIManager {
     const content = document.getElementById("stylingPanelContent");
     content.innerHTML = "";
     content.appendChild(createStyleDiv(this.cache));
+    this.mountSelectionEditorCards();
+  }
+
+  mountSelectionEditorCards() {
+    const selectionPanel = document.getElementById("selectionEditorPanel");
+    if (!selectionPanel) return;
+
+    selectionPanel.innerHTML = "";
+    ["Focus Elements", "Select Elements", "Arrange Selection"].forEach((cardId) => {
+      const card = document.getElementById(cardId);
+      if (card) selectionPanel.appendChild(card);
+    });
   }
 }
 

src/style.css

@@ -188,11 +188,12 @@ body, html {
     border: 1px solid #403C53;
     border-radius: 5px;
     background-color: #E4E3EA80;
-    transition: opacity 0.1s ease-in-out, right 0.3s ease-in-out;
+    transition: opacity 0.1s ease-in-out, right 0.3s ease-in-out, width 0.25s ease-in-out, max-width 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
     text-align: center;
     padding: 2px;
     font-size: 13px;
     z-index: 1000;
+    max-width: calc(100% - 20px);
 }
 
 #selectedElementsContainer.hidden {
@@ -202,6 +203,37 @@ body, html {
     height: 0;
 }
 
+#selectedElementsContainer.expanded {
+    width: 360px;
+    box-shadow: 0 6px 12px rgba(64, 60, 83, 0.2);
+}
+
+.selection-editor-panel {
+    width: 0;
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    margin-top: 0;
+    transition: max-height 0.25s ease-in-out, opacity 0.2s ease-in-out, margin-top 0.25s ease-in-out;
+}
+
+#selectedElementsContainer.expanded .selection-editor-panel {
+    width: 100%;
+    max-height: 420px;
+    opacity: 1;
+    margin-top: 6px;
+    overflow-y: auto;
+}
+
+#selectedElementsContainer .selection-editor-panel .card-labeled {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+#selectedElementsContainer .selection-editor-panel .card-row {
+    flex-wrap: wrap;
+}
+
 #selectView {
     margin-bottom: 10px;
 }