system: improve mobile gestures

resources/browserhtml/system/edge_gesture_handler.js

···
 
     // Configuration
     this.edgeThreshold = 30; // px from edge to trigger edge swipe
-    this.swipeThreshold = 50; // px to complete a swipe action
-    this.longSwipeThreshold = 200; // px for long swipe (overview mode)
+    this.commitThreshold = 0.4; // fraction of viewport to commit swipe
 
     // Touch state
     this.touchStartX = 0;
···
 
     // Peek preview element
     this.peekPreview = null;
+
+    // Active overlay element (expanded during gesture)
+    this.activeOverlay = null;
 
     // Edge overlay elements
     this.edgeOverlays = {};
···
     edges.forEach((edge) => {
       const overlay = document.createElement("div");
       overlay.className = `gesture-edge-overlay gesture-edge-${edge.name}`;
-      overlay.style.cssText = `
-        position: fixed;
-        ${edge.style}
-        z-index: var(--z-gesture);
-        touch-action: none;
-        pointer-events: auto;
-        background: transparent; /* rgba(77, 215, 220, 0.49); */
-      `;
+      overlay.style.cssText = edge.style;
       overlay.dataset.edge = edge.name;
       document.body.appendChild(overlay);
       this.edgeOverlays[edge.name] = overlay;
···
   }
 
   onEdgeTouchStart(event) {
-    console.log(`[EdgeGesture] touchstart`);
-    console.log("onEdgeTouchStart");
     if (event.touches.length !== 1) {
       return;
     }
···
     this.isEdgeSwipe = true;
     this.edgeDirection = event.currentTarget.dataset.edge;
 
+    // Expand overlay to full screen so we keep receiving touch events
+    this.activeOverlay = event.currentTarget;
+    this.activeOverlay.classList.add("fullscreen-overlay");
+
     event.preventDefault();
   }
 
   onTouchMove(event) {
-    console.log(`[EdgeGesture] touchmove isEdgeSwipe=${this.isEdgeSwipe}`);
-
     if (!this.isEdgeSwipe || event.touches.length !== 1) {
       return;
     }
···
   }
 
   onTouchEnd() {
-    console.log(`[EdgeGesture] touchend ${this.edgeDirection}`);
     if (!this.isEdgeSwipe) {
       return;
     }
 
     const deltaX = this.touchCurrentX - this.touchStartX;
-    const deltaY = this.touchCurrentY - this.touchStartY;
 
     // Complete the gesture based on direction and distance
     if (this.edgeDirection === "left") {
-      this.completeLeftEdgeSwipe(deltaX);
+      this.completeEdgeSwipe(deltaX, "prev");
     } else if (this.edgeDirection === "right") {
-      this.completeRightEdgeSwipe(-deltaX);
+      this.completeEdgeSwipe(-deltaX, "next");
     }
 
-    // Reset state
-    this.isEdgeSwipe = false;
-    this.edgeDirection = null;
-    this.isPeeking = false;
-    this.hidePeekPreview();
+    this.resetGestureState();
   }
 
   onTouchCancel() {
-    console.log(`[EdgeGesture] touchcancel`);
+    this.resetGestureState();
+    this.animatePreviewOut();
+  }
+
+  resetGestureState() {
+    if (this.activeOverlay) {
+      this.activeOverlay.classList.remove("fullscreen-overlay");
+      this.activeOverlay = null;
+    }
     this.isEdgeSwipe = false;
     this.edgeDirection = null;
     this.isPeeking = false;
-    this.hidePeekPreview();
   }
 
   // ============================================================================
···
   // ============================================================================
 
   handleLeftEdgeMove(distance) {
-    const progress = Math.min(distance / this.swipeThreshold, 1);
-    console.log(
-      `[EdgeGesture] handleLeftEdgeMove distance=${distance} progress=${progress} isPeeking=${this.isPeeking}`,
-    );
-
-    // Show peek preview of previous webview
-    if (!this.isPeeking && progress > 0.1) {
-      this.isPeeking = true;
-      this.showPeekPreview("prev", progress);
-    } else if (this.isPeeking) {
-      this.updatePeekPreview(progress);
-    }
-  }
-
-  completeLeftEdgeSwipe(distance) {
-    if (distance >= this.longSwipeThreshold) {
-      // Long swipe: enter overview mode
-      this.lm.showOverview();
-    } else if (distance >= this.swipeThreshold) {
-      // Normal swipe: switch to previous webview
-      this.lm.prevWebView();
-    }
-    // Otherwise: cancelled, peek snaps back
+    this.handleHorizontalEdgeMove(distance, "prev");
   }
 
   // ============================================================================
···
   // ============================================================================
 
   handleRightEdgeMove(distance) {
-    const progress = Math.min(distance / this.swipeThreshold, 1);
+    this.handleHorizontalEdgeMove(distance, "next");
+  }
 
-    // Show peek preview of next webview
-    if (!this.isPeeking && progress > 0.1) {
+  // ============================================================================
+  // Shared horizontal edge logic
+  // ============================================================================
+
+  handleHorizontalEdgeMove(distance, direction) {
+    if (!this.isPeeking) {
       this.isPeeking = true;
-      this.showPeekPreview("next", progress);
-    } else if (this.isPeeking) {
-      this.updatePeekPreview(progress);
+      this.showPeekPreview(direction);
     }
+    this.updatePeekPreview(distance);
   }
 
-  completeRightEdgeSwipe(distance) {
-    if (distance >= this.longSwipeThreshold) {
-      // Long swipe: enter overview mode
-      this.lm.showOverview();
-    } else if (distance >= this.swipeThreshold) {
-      // Normal swipe: switch to next webview
-      this.lm.nextWebView();
+  completeEdgeSwipe(distance, direction) {
+    const threshold = window.innerWidth * this.commitThreshold;
+    if (distance >= threshold) {
+      // Animate preview to fully cover the viewport, then switch
+      this.animatePreviewIn(() => {
+        if (direction === "prev") {
+          this.lm.prevWebView();
+        } else {
+          this.lm.nextWebView();
+        }
+        this.hidePeekPreview();
+      });
+    } else {
+      // Animate preview back out
+      this.animatePreviewOut();
     }
   }
 
···
   // ============================================================================
 
   handleBottomEdgeMove(distance) {
-    console.log(`[EdgeGesture] handleBottomEdgeMove ${distance}px`);
     if (distance >= this.edgeThreshold / 2) {
-      // Swipe up from bottom: show action bar
+      this.resetGestureState();
       this.lm.showActionBar();
     }
   }
···
 
   handleTopEdgeMove(distance) {
     if (distance >= this.edgeThreshold / 2) {
-      // Swipe down from top: show notifications
-      // Dispatch event for notification panel
+      this.resetGestureState();
       document.dispatchEvent(
         new CustomEvent("mobile-show-notifications", { bubbles: true }),
       );
···
   // Peek Preview
   // ============================================================================
 
-  showPeekPreview(direction, progress) {
-    console.log(`[EdgeGesture] showPeekPreview ${direction} ${progress}`);
+  showPeekPreview(direction) {
     const adjacentId = this.lm.getAdjacentWebViewId(direction);
     if (!adjacentId) {
       console.error(`[EdgeGesture] no adjacentId`);
···
       screenshot.style.display = "none";
     }
 
-    // Position based on direction
-    this.peekPreview.classList.remove("from-left", "from-right");
+    // Position based on direction, no transition during drag
+    this.peekPreview.classList.remove("from-left", "from-right", "animating");
     this.peekPreview.classList.add(
       direction === "prev" ? "from-left" : "from-right",
     );
     this.peekPreview.classList.add("visible");
-
-    this.updatePeekPreview(progress);
   }
 
-  updatePeekPreview(progress) {
-    console.log(`[EdgeGesture] updatePeekPreview ${progress}`);
+  updatePeekPreview(distance) {
     if (!this.peekPreview) {
       return;
     }
 
-    // Animate the preview sliding in
-    const maxTranslate = 30; // percentage of screen width to reveal
-    const translatePercent = progress * maxTranslate;
+    // Directly track the finger: translateX in pixels
+    if (this.peekPreview.classList.contains("from-left")) {
+      const offset = -window.innerWidth + distance;
+      this.peekPreview.style.transform = `translateX(${Math.min(offset, 0)}px)`;
+    } else {
+      const offset = window.innerWidth - distance;
+      this.peekPreview.style.transform = `translateX(${Math.max(offset, 0)}px)`;
+    }
+  }
 
+  animatePreviewIn(onDone) {
+    if (!this.peekPreview) {
+      onDone();
+      return;
+    }
+    this.peekPreview.classList.add("animating");
+    let called = false;
+    const done = () => {
+      if (called) return;
+      called = true;
+      onDone();
+    };
+    this.peekPreview.addEventListener("transitionend", done, { once: true });
+    setTimeout(done, 300);
+    this.peekPreview.style.transform = "translateX(0)";
+  }
+
+  animatePreviewOut() {
+    if (!this.peekPreview) {
+      return;
+    }
+    this.peekPreview.classList.add("animating");
+    let called = false;
+    const done = () => {
+      if (called) return;
+      called = true;
+      this.hidePeekPreview();
+    };
+    this.peekPreview.addEventListener("transitionend", done, { once: true });
+    setTimeout(done, 300);
+    // Animate back off-screen
     if (this.peekPreview.classList.contains("from-left")) {
-      this.peekPreview.style.transform = `translateX(${-100 + translatePercent}%)`;
+      this.peekPreview.style.transform = `translateX(-100%)`;
     } else {
-      this.peekPreview.style.transform = `translateX(${100 - translatePercent}%)`;
+      this.peekPreview.style.transform = `translateX(100%)`;
     }
   }
 
   hidePeekPreview() {
-    console.log(`[EdgeGesture] hidePeekPreview`);
     if (this.peekPreview) {
-      this.peekPreview.classList.remove("visible");
+      this.peekPreview.classList.remove("visible", "animating");
       this.peekPreview.style.transform = "";
     }
   }

resources/browserhtml/system/index.js

···
 
     // Override layout manager's showOverview to use mobile tab overview
     layoutManager.showOverview = function () {
-      // Capture screenshots for all tabs before showing overview
-      layoutManager.captureAllScreenshots();
       updateTabOverviewData();
       mobileOverview.open = true;
     };

resources/browserhtml/system/mobile.css

···
   bottom: var(--keyboard-offset);
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease;
+  transition:
+    opacity 0.3s ease,
+    visibility 0.3s ease,
+    bottom 0.3s ease;
   z-index: var(--z-base);
 }
 
···
 .mobile-peek-preview {
   position: fixed;
   top: 0;
-  width: 30%;
+  width: 100%;
   height: 100%;
   background: var(--bg-menu);
   z-index: var(--z-gesture);
···
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.2s ease, visibility 0.2s ease;
 }
 
 .mobile-peek-preview.visible {
···
   visibility: visible;
 }
 
+/* Animate transform on release (commit or cancel) */
+.mobile-peek-preview.animating {
+  transition: transform var(--transition-fast);
+}
+
 .mobile-peek-preview.from-left {
   left: 0;
   transform: translateX(-100%);
-  border-right: 2px solid var(--color-focus-ring);
 }
 
 .mobile-peek-preview.from-right {
   right: 0;
   left: auto;
   transform: translateX(100%);
-  border-left: 2px solid var(--color-focus-ring);
 }
 
 .peek-header {
···
   z-index: var(--z-gesture);
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.2s ease, visibility 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease;
 }
 
 .mobile-tab-indicator.visible {
···
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
-  transition: background 0.2s ease, transform 0.2s ease;
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease;
 }
 
 .tab-dot.active {
···
   height: 4px;
   background: linear-gradient(to bottom, var(--color-focus-ring), transparent);
 }
+
+.gesture-edge-overlay {
+  position: fixed;
+  z-index: calc(var(--z-gesture) + 1);
+  touch-action: none;
+  pointer-events: auto;
+  background: transparent;
+  /* rgba(77, 215, 220, 0.49); */
+}
+
+/* Expand edge overlay to full screen during active gesture,
+   above the peek preview so we keep receiving touch events */
+.gesture-edge-overlay.fullscreen-overlay {
+  left: 0 !important;
+  top: 0 !important;
+  right: auto !important;
+  bottom: auto !important;
+  width: 100% !important;
+  height: 100% !important;
+}

resources/browserhtml/system/mobile_layout_manager.js

···
 
     // Remove from DOM
     const container = this.root.querySelector(
-      `.mobile-webview-container[data-webview-id="${webviewId}"]`
+      `.mobile-webview-container[data-webview-id="${webviewId}"]`,
     );
     if (container) {
       container.remove();
···
       prevEntry.webview.active = false;
 
       // Capture screenshot of the tab we're switching away from
-      if (prevEntry.webview.captureScreenshot) {
-        prevEntry.webview.captureScreenshot();
-      }
+      // TODO: fix screenshot capture when not fully visible.
+      // prevEntry.webview.captureScreenshot(true);
 
       const prevContainer = this.root.querySelector(
-        `.mobile-webview-container[data-webview-id="${this.activeWebviewId}"]`
+        `.mobile-webview-container[data-webview-id="${this.activeWebviewId}"]`,
       );
       if (prevContainer) {
         prevContainer.classList.remove("active");
···
       entry.webview.active = true;
       this.activeIndex = entry.index;
       const container = this.root.querySelector(
-        `.mobile-webview-container[data-webview-id="${webviewId}"]`
+        `.mobile-webview-container[data-webview-id="${webviewId}"]`,
       );
       if (container) {
         container.classList.add("active");
···
 
   // Navigate to next webview in carousel (skips homescreen)
   nextWebView() {
-    const regularViews = this.webviewOrder.filter((id) => !this.isHomescreen(id));
+    const regularViews = this.webviewOrder.filter(
+      (id) => !this.isHomescreen(id),
+    );
     if (regularViews.length <= 1) {
       return;
     }
···
 
   // Navigate to previous webview in carousel (skips homescreen)
   prevWebView() {
-    const regularViews = this.webviewOrder.filter((id) => !this.isHomescreen(id));
+    const regularViews = this.webviewOrder.filter(
+      (id) => !this.isHomescreen(id),
+    );
     if (regularViews.length <= 1) {
       return;
     }
···
 
   // Get adjacent webview ID for peek preview (skips homescreen)
   getAdjacentWebViewId(direction) {
-    const regularViews = this.webviewOrder.filter((id) => !this.isHomescreen(id));
+    const regularViews = this.webviewOrder.filter(
+      (id) => !this.isHomescreen(id),
+    );
     if (regularViews.length <= 1) {
       return null;
     }
···
       });
   }
 
-  // Capture screenshots for all webviews (for tab overview)
-  captureAllScreenshots() {
-    for (const [id, entry] of this.webviews) {
-      if (entry.webview.captureScreenshot) {
-        entry.webview.captureScreenshot();
-      }
-    }
-  }
-
   // ============================================================================
   // Overview Mode (for compatibility, minimal implementation for MVP)
   // ============================================================================
···
   showOverview() {
     this.overviewMode = true;
     // TODO: Implement mobile tab overview grid
-    console.log("[MobileLayoutManager] Overview mode enabled (not yet implemented)");
+    console.log(
+      "[MobileLayoutManager] Overview mode enabled (not yet implemented)",
+    );
   }
 
   hideOverview() {

resources/browserhtml/system/web_view.js

···
           canGoForward: this.canGoForward,
           url: this.currentUrl,
         },
-      })
+      }),
     );
 
     // Capture screenshot for overview mode after a short delay
···
   }
 
   // Capture a screenshot and cache it for overview mode
-  captureScreenshot() {
+  captureScreenshot(immediate = false) {
     // Debounce: clear any pending capture
     if (this.screenshotTimeout) {
       clearTimeout(this.screenshotTimeout);
     }
 
-    // Delay capture to allow page to render
-    this.screenshotTimeout = setTimeout(() => {
+    let doCapture = () => {
       this.getContentIframe()
         .takeScreenshot()
         .then((blob) => {
···
         .catch(() => {
           // Ignore screenshot errors (e.g., for off-screen webviews)
         });
+    };
+
+    if (immediate) {
+      doCapture();
+      return;
+    }
+
+    // Delay capture to allow page to render
+    this.screenshotTimeout = setTimeout(() => {
+      doCapture();
     }, 500);
   }