Fix erratic mouse behavior in the swipe (slider) compare view

The before/after slider had two classic pointer bugs:

- The screenshots are normal <img> elements, draggable by default, and
  pointerdown never called preventDefault. Mousedown-then-move started a
  native image drag instead of moving the divider.
- That native drag fires pointercancel, not pointerup, and only pointerup
  was handled — so `dragging` never reset and the divider then tracked the
  cursor on plain hover with no button held.

Apply the standard guards used by image-comparison sliders:

- preventDefault on pointerdown; respond to the primary button only.
- End the drag on pointerup AND pointercancel/lostpointercapture, and
  release the pointer capture, so an interrupted gesture can't get stuck.
- Make the images non-draggable and non-interactive (draggable="false",
  pointer-events:none, user-select/-webkit-user-drag:none) so the stage is
  always the pointer target and can't be hijacked by a native image drag.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: jeremyfelt

templates/assets/app.js

@@ -1133,7 +1133,13 @@
 	function buildSwipe(stage, img) {
 		var pos = 0.5;
 		var layer = h('div', { class: 'layer' }, [
-			h('img', { src: img.control, alt: 'Baseline screenshot' }),
+			h('img', {
+				src: img.control,
+				alt: 'Baseline screenshot',
+				// String 'false', not boolean: the h() helper drops false-valued
+				// props, and draggable is an enumerated attribute anyway.
+				draggable: 'false',
+			}),
 		]);
 		var divider = h(
 			'div',
@@ -1158,7 +1164,11 @@
 		};
 		var dragging = false;
 		var shot = h('div', { class: 'shot swipe-stage' }, [
-			h('img', { src: img.capture, alt: 'Current screenshot' }),
+			h('img', {
+				src: img.capture,
+				alt: 'Current screenshot',
+				draggable: 'false',
+			}),
 			layer,
 			divider,
 			h('span', { class: 'taglabel l', text: 'baseline' }),
@@ -1168,7 +1178,23 @@
 			var rect = shot.getBoundingClientRect();
 			return clamp01((e.clientX - rect.left) / rect.width);
 		};
+		var endDrag = function (e) {
+			dragging = false;
+			// Release capture so the stage stops receiving pointer events once
+			// the gesture is over.
+			if (e && shot.hasPointerCapture(e.pointerId)) {
+				shot.releasePointerCapture(e.pointerId);
+			}
+		};
 		shot.addEventListener('pointerdown', function (e) {
+			// Primary button / touch / pen only — ignore right- and middle-click.
+			if (e.button !== 0) {
+				return;
+			}
+			// Suppress the browser's native image drag and text selection, which
+			// would otherwise hijack the gesture and fire pointercancel instead
+			// of pointerup, leaving the divider stuck to the cursor.
+			e.preventDefault();
 			dragging = true;
 			shot.setPointerCapture(e.pointerId);
 			setPos(posFromEvent(e));
@@ -1178,7 +1204,11 @@
 				setPos(posFromEvent(e));
 			}
 		});
-		shot.addEventListener('pointerup', function () {
+		// End on up and on cancel/lost-capture, so an interrupted gesture can
+		// never leave dragging stuck on.
+		shot.addEventListener('pointerup', endDrag);
+		shot.addEventListener('pointercancel', endDrag);
+		shot.addEventListener('lostpointercapture', function () {
 			dragging = false;
 		});
 		stage.appendChild(shot);

templates/assets/reglance.css

@@ -379,7 +379,11 @@ kbd {
 .taglabel.l { left: 10px; }
 .taglabel.r { right: 10px; }
 
-.swipe-stage { cursor: col-resize; touch-action: none; }
+.swipe-stage { cursor: col-resize; touch-action: none; user-select: none; }
+/* The images are never the pointer target: the stage handles the whole
+   gesture, and a non-draggable, non-selectable image can't start a native
+   drag that would hijack it. */
+.swipe-stage img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
 .divider { position: absolute; top: 0; bottom: 0; width: 0; z-index: 5; pointer-events: none; }
 .divider::before {
 	content: '';