From e57f3abaede9dbf41fd1ba95ddebef470b049cf3 Mon Sep 17 00:00:00 2001
From: rakadu1 <rakadu1@bajajauto.co.in>
Date: Mon, 23 Mar 2026 14:58:39 +0530
Subject: [PATCH] refactor(ui): Decoupled floating panels from gridstack with
 persistent UX

- Migrated God Mode Zoom to a standalone floating/draggable overlay.
- Extracted a unified [makeDraggableAndResizable](cci:1://file:///d:/Work/Repo/refactor/steps/src/ui.js:52:0-170:1) utility for all UI panels.
- Added viewport rescue logic: automatically recovers off-screen panels ONLY during browser window resize events.
- Optimized auto-hide sequence (5s static analysis + 3s visual countdown).
- Implemented "Mouse pointer Out of Bounds" warning for clearer user feedback.
- Cleaned redundant UI labels and fixed p5.js naming mismatches in resize listeners.
---
 steps/src/p5/zoomSketch.js |  3 ---
 steps/src/ui.js            | 27 ++++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/steps/src/p5/zoomSketch.js b/steps/src/p5/zoomSketch.js
index 179e7cf..032aefe 100644
--- a/steps/src/p5/zoomSketch.js
+++ b/steps/src/p5/zoomSketch.js
@@ -256,9 +256,6 @@ export const zoomSketch = function (p) {
         canvas.parent(containerId);
         //console.log(`zoomSketch: Canvas CREATED with dimensions ${p.width}x${p.height}`); // debug
       } else {
-        console.warn(
-          "zoomSketch: updateAndDraw called, but container is not ready. Aborting draw."
-        ); //debug
         return;
       }
     }
diff --git a/steps/src/ui.js b/steps/src/ui.js
index 6394452..4e9d570 100644
--- a/steps/src/ui.js
+++ b/steps/src/ui.js
@@ -113,7 +113,7 @@ export function makeDraggableAndResizable(panel, header, minWidth = 400, minHeig
                 document.body.classList.remove('resizing');
                 window.removeEventListener('mousemove', resizeFunc);
                 if (panel.id === 'zoom-panel' && appState.zoomSketchInstance) {
-                    appState.zoomSketchInstance.handleResize();
+                    appState.zoomSketchInstance.handleContainerResize();
                 }
             });
         });
@@ -143,6 +143,31 @@ export function makeDraggableAndResizable(panel, header, minWidth = 400, minHeig
             }
         }
     }
+
+    // --- Viewport Constraint Logic ---
+    // This ensures that if the user resizes their browser, the panel doesn't get "lost" off-screen.
+    function constrainToViewport() {
+        const rect = panel.getBoundingClientRect();
+        const margin = 10; // Extra padding
+        
+        // Horizontal constraint
+        if (rect.right > window.innerWidth) {
+            panel.style.left = `${Math.max(margin, window.innerWidth - rect.width - margin)}px`;
+        }
+        if (rect.left < 0) {
+            panel.style.left = `${margin}px`;
+        }
+        
+        // Vertical constraint
+        if (rect.bottom > window.innerHeight) {
+            panel.style.top = `${Math.max(margin, window.innerHeight - rect.height - margin)}px`;
+        }
+        if (rect.top < 0) {
+            panel.style.top = `${margin}px`;
+        }
+    }
+
+    window.addEventListener('resize', constrainToViewport);
 }
 // --- END: Resizable and Draggable Panel Logic ---