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//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

@@ -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;
       }
     }

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 ---