@astryxdesign/core 0.7.6 → 0.7.7-canary.1d04d40

package/dist/gestures/GestureHost.js

@@ -125,16 +125,17 @@ import { isRtlElement } from "../hooks/isRtlElement.js";
 import { presentedElements, presentedOffsetOf, resolvePresented, watchPresentedElements } from "../motion/presentation.js";
 import { UIKIT_PRESS, UIKIT_TAP } from "../motion/uikit/gestures.js";
 import { browserClock, GestureArena } from "./GestureArena.js";
-import { createNativeScrollProbe, parentAcrossShadow } from "./nativeScroll.js";
+import { canElementScroll, createNativeScrollProbe, parentAcrossShadow } from "./nativeScroll.js";
 import { containsAlongFlatTree } from "../utils/flatTree.js";
 import { isIosWebKit } from "../utils/touchQueries.js";
+import { WheelSegmenter } from "./wheelSegmenter.js";
 import { gestureHostStyle, intersectTouchAction } from "./touchAction.js";
 import { markTouchAction, TOUCH_ACTION_ATTRIBUTE, unmarkTouchAction } from "./touchActionRule.js";
 import { internals } from "./recognizerInternals.js";
 import { armClickGuard, disarmClickGuard, withoutClickGuard } from "../utils/clickGuard.js";
 import { subscribeInput } from "../utils/inputStream.js";
 import { isPrimaryClick } from "../utils/primaryClick.js";
-import { locksSelectionFor } from "../utils/selectionLock.js";
+import { lockDragSelection, locksSelectionFor, selectionRangesOf, startsOnSelectableText } from "../utils/selectionLock.js";
 import { isCoarsePointer, watchCoarsePointer } from "../utils/coarsePointer.js";
 import { gestureHosts } from "./hostRegistry.js";
 const STYLE_PROPERTIES = {
@@ -182,6 +183,16 @@ function claimsWhileMoving(recognizer) {
   return recognizer.claimsTouches && internals(recognizer).acceptsTouchInput && internals(recognizer).family !== 'tap';
 }
 
+/**
+ * Whether a recognizer takes a contact that comes with Touch Events and a
+ * long press's contextmenu: a finger's or a pen's. A scroll-only recognizer
+ * (`allowedPointerTypes: []`) and a mouse-only one take neither.
+ */
+function takesTouchContacts(recognizer) {
+  const types = recognizer.allowedPointerTypes;
+  return types == null || types.has('touch') || types.has('pen');
+}
+
 /**
  * A pan (or a pan subclass), told apart by its family rather than its class,
  * so a page that constructs no pan never ships PanGestureRecognizer.
@@ -232,6 +243,138 @@ function landedOn(event, retargeted = event.target) {
   return event.composedPath()[0] ?? retargeted;
 }
 
+/**
+ * How long after its last event a pinch or a mouse wheel's notches end, ms.
+ * The web reports no wheel phases, so a quiet wheel is a lifted one.
+ */
+const WHEEL_END_MS = 100;
+/**
+ * How long after its last event a vertical trackpad scroll ends, ms (a
+ * sheet's pull), whoever keeps it. A slow drag's stream pauses longer than
+ * WHEEL_END_MS between events.
+ */
+const WHEEL_FOLLOW_END_V_MS = 180;
+/**
+ * The same horizontally, ms (a pager's or a row's swipe), whose slow
+ * swipes pause longer still.
+ */
+const WHEEL_FOLLOW_END_MS = 220;
+/** A line-mode wheel's line, px, as the platforms scroll it. */
+const WHEEL_LINE_PX = 40;
+/** The span a ctrl-wheel pinch's two contacts start at, px. */
+const WHEEL_PINCH_SPAN = 100;
+
+/** A wheel gesture: the contacts it drives in the arena, or none where the page keeps it. */
+
+/** A trackpad scroll a pan follows: where its fingers lift, and what waits until then. */
+
+/**
+ * How long after its last wheel a wheel gesture ends, ms. A trackpad's
+ * two-finger scroll waits out a slow drag's pauses for its axis, whoever
+ * keeps the stream. A pinch and a mouse wheel's notches end 100 ms after
+ * their last wheel.
+ */
+function wheelEndMs(kind, scrollType, isHorizontal) {
+  if (kind === 'pinch' || scrollType !== 'continuous') {
+    return WHEEL_END_MS;
+  }
+  return isHorizontal ? WHEEL_FOLLOW_END_MS : WHEEL_FOLLOW_END_V_MS;
+}
+
+/**
+ * A provisional lead `debt` after a move of `moved`. The debt is what a
+ * followed pan shows past the fingers' travel, or short of it. Half the move
+ * is absorbed, so the pan keeps moving the way the fingers do.
+ */
+function absorbedDebt(debt, moved) {
+  return Math.sign(debt) * Math.max(0, Math.abs(debt) - Math.abs(moved) / 2);
+}
+
+/**
+ * `target` where it is ahead of `shown` in the direction of `speed`, else
+ * `shown`: a reconcile that never steps back.
+ */
+function ahead(shown, target, speed) {
+  return speed === 0 || (target - shown) * Math.sign(speed) > 0 ? target : shown;
+}
+
+/**
+ * A wheel's deltas in CSS px: a line is `WHEEL_LINE_PX`, a page the
+ * viewport.
+ */
+function wheelPixels(wheel, view) {
+  if (wheel.deltaMode === 1) {
+    return {
+      dx: wheel.deltaX * WHEEL_LINE_PX,
+      dy: wheel.deltaY * WHEEL_LINE_PX
+    };
+  }
+  if (wheel.deltaMode === 2) {
+    return {
+      dx: wheel.deltaX * (view?.innerWidth ?? 0),
+      dy: wheel.deltaY * (view?.innerHeight ?? 0)
+    };
+  }
+  return {
+    dx: wheel.deltaX,
+    dy: wheel.deltaY
+  };
+}
+
+/**
+ * The web's best reading of what scrolled: a mouse wheel's notches
+ * (`discrete`) or a trackpad's scroll (`continuous`). Input it cannot tell
+ * apart counts as a mouse wheel's, which a pan that takes only a trackpad's
+ * scroll leaves to the page. These read as a mouse wheel's:
+ * - a line- or page-mode delta;
+ * - a scroll with Shift held (Shift+wheel);
+ * - a pixel delta a hair off a whole pixel (a mouse wheel on Windows);
+ * - a scroll with no legacy `wheelDelta` (an engine that sends none);
+ * - a delta that is not a third of its legacy `wheelDelta`;
+ * - a 120 tick over a 40 px delta.
+ * A trackpad's precise deltas, a third of their legacy `wheelDelta` in
+ * Chromium and WebKit, read as a trackpad's.
+ */
+function scrollTypeOf(wheel) {
+  if (wheel.deltaMode !== 0 || wheel.shiftKey) {
+    return 'discrete';
+  }
+  const remainder = value => {
+    const fraction = Math.abs(value - Math.round(value));
+    return fraction > 0 && fraction < 0.01;
+  };
+  if (remainder(wheel.deltaX) || remainder(wheel.deltaY)) {
+    return 'discrete';
+  }
+  const legacy = wheel;
+  if (typeof legacy.wheelDeltaY !== 'number' || typeof legacy.wheelDeltaX !== 'number') {
+    return 'discrete';
+  }
+  const precise = (delta, legacyDelta) => delta === 0 ? legacyDelta === 0 : Math.abs(Math.abs(legacyDelta) - 3 * Math.abs(delta)) <= Math.max(1.5, 0.05 * Math.abs(delta) * 3);
+  if (!precise(wheel.deltaY, legacy.wheelDeltaY) || !precise(wheel.deltaX, legacy.wheelDeltaX)) {
+    return 'discrete';
+  }
+  const tick = (delta, legacyDelta) => legacyDelta !== 0 && legacyDelta % 120 === 0 && delta % 40 === 0;
+  return tick(wheel.deltaY, legacy.wheelDeltaY) || tick(wheel.deltaX, legacy.wheelDeltaX) ? 'discrete' : 'continuous';
+}
+
+/** Read without the pan class, which a page with no pan never ships. */
+function isScrollEdgePan(recognizer) {
+  return recognizer.scrollEdge === true;
+}
+
+/**
+ * Whether a pan takes a contact moving by (cx, cy), by its own direction
+ * rule, `axisRatio` included. A move its rule leaves undecided stays the
+ * page's.
+ */
+function panTakesMove(recognizer, cx, cy) {
+  return (internals(recognizer).classify?.({
+    x: cx,
+    y: cy
+  }) ?? 'begin') === 'begin';
+}
+
 /**
  * An event's time on the arena's clock (`performance.now()`). Some engines
  * and DOM emulators stamp events in epoch milliseconds instead.
@@ -261,6 +404,23 @@ export class GestureHost {
   cancelCallerRead = null;
   /** The selection lock each contact holds, by host contact id. */
   lockedBy = new Map();
+  /**
+   * The page's selection when each mouse or pen press began: a drag a
+   * recognizer claims keeps it.
+   */
+  pressSelections = new Map();
+  /**
+   * Mouse and pen contacts that began on selectable text. Once one moves, the
+   * browser keeps the drag for a selection, and no recognizer claims it.
+   */
+  selectingContacts = new Set();
+  /**
+   * Drag selection holds until their last task ends, a task after their lift
+   * (lockDragSelection); the last detach ends them at once.
+   */
+  dragHolds = new Set();
+  /** Each claimed contact's drag hold, until its lift or a give-back. */
+  claimHolds = new Map();
   /**
    * Contacts sent to what is drawn instead of what the engine hit, by host
    * contact id, with where they landed (for their click).
@@ -365,6 +525,16 @@ export class GestureHost {
    */
   fingerTargets = [];
   nextId = 1;
+  /** The wheel gesture in progress. */
+  wheel = null;
+  /** The wheel latch's input-stream subscription, while a gesture is latched. */
+  stopWheelLatch = null;
+  /** Splits the wheel stream into gestures and reads a trackpad's lift. */
+  segmenter = new WheelSegmenter();
+  /** The latest wheel's segment. */
+  wheelSegment = null;
+  /** Wheels already taken: each element on the path with a listener hears one. */
+  wheelsSeen = new WeakSet();
   isInstalled = false;
   /**
    * Whether the primary pointer is coarse (`spec:AST-094` FR19), read when
@@ -428,7 +598,10 @@ export class GestureHost {
       // A press whose decision waited on a timer (a tap waiting on a double
       // tap) ends here: an armed press stops listening (FR24).
       onIdle: () => this.releaseArmedPress(),
-      onTransition: options.onTransition
+      onTransition: options.onTransition,
+      onClaim: (ids, claimer) => this.lockClaimedDrags(ids, claimer),
+      onRelease: ids => this.releaseClaimedDrags(ids),
+      refusesClaim: touch => this.selectingContacts.has(touch.id) && (touch.x !== touch.startX || touch.y !== touch.startY)
     });
     const view = doc.defaultView;
     // A test may pass its own read; otherwise the one coarse-pointer gate,
@@ -485,6 +658,12 @@ export class GestureHost {
       if (recognizer.state !== 'possible' || recognizer.isInvolved()) {
         recognizer.cancel();
       }
+      const wheel = this.wheel;
+      if (wheel != null && wheel.takers.includes(recognizer) && !this.wheelHasTaker(wheel)) {
+        // At its last wheel: a later stamp would move the arena's clock past
+        // the next input's own time.
+        this.endWheel(wheel.last);
+      }
       this.refresh(element, registration);
       // Even when the element keeps other attachments: one left disabled
       // keeps no listener or observer (FR24).
@@ -847,6 +1026,7 @@ export class GestureHost {
         consumer: null,
         hasTouchEndListener: false,
         hasTouchMoveListener: false,
+        hasWheelListener: false,
         savedStyle: new Map(),
         authorTouchAction: null,
         manageStyle: true,
@@ -911,6 +1091,23 @@ export class GestureHost {
       element.removeEventListener('touchmove', this.onBlockingTouchMove);
       registration.hasTouchMoveListener = false;
     }
+    // Wheel and trackpad input, only where an enabled recognizer takes it. A
+    // non-passive wheel listener makes the browser's scrolling over the
+    // element wait for the main thread.
+    const needsWheel = registration.recognizers.some(recognizer => recognizer.isEnabled &&
+    // A watcher never takes the wheel: the page keeps it.
+    recognizer.claimsTouches && recognizer.allowedScrollTypes.size > 0 && (
+    // A wheel drives a pan or a pinch only.
+    internals(recognizer).family === 'pan' || internals(recognizer).family === 'pinch'));
+    if (needsWheel && !registration.hasWheelListener) {
+      element.addEventListener('wheel', this.onWheel, {
+        passive: false
+      });
+      registration.hasWheelListener = true;
+    } else if (!needsWheel && registration.hasWheelListener) {
+      element.removeEventListener('wheel', this.onWheel);
+      registration.hasWheelListener = false;
+    }
   }
   applyStyle(element, registration) {
     // A disabled recognizer leaves the browser everything (FR24).
@@ -1050,6 +1247,9 @@ export class GestureHost {
     if (registration.hasTouchMoveListener) {
       element.removeEventListener('touchmove', this.onBlockingTouchMove);
     }
+    if (registration.hasWheelListener) {
+      element.removeEventListener('wheel', this.onWheel);
+    }
     this.registry.delete(element);
     this.uninstallIfIdle();
   }
@@ -1138,7 +1338,9 @@ export class GestureHost {
     if (!this.isCoarse) {
       for (const [element, registration] of this.registry) {
         const consumer = registration.consumer;
-        if (registration.recognizers.some(recognizer => recognizer.isEnabled) || consumer != null && consumer.isEnabled?.() !== false) {
+        if (registration.recognizers.some(recognizer => recognizer.isEnabled && (
+        // One that takes only scroll input has no press to arm.
+        recognizer.allowedPointerTypes == null || recognizer.allowedPointerTypes.size > 0)) || consumer != null && consumer.isEnabled?.() !== false) {
           wanted.add(element);
         }
       }
@@ -1240,6 +1442,15 @@ export class GestureHost {
       }
       this.ownScrollFrames.clear();
       this.ownedScrolls.clear();
+      // A drag's hold whose press lifted in this task ends now, not a task
+      // later: nothing is attached to meet its mouseup or click.
+      for (const release of [...this.dragHolds]) {
+        release({
+          isCancel: true
+        });
+      }
+      this.pressSelections.clear();
+      this.selectingContacts.clear();
     });
   }
 
@@ -1273,13 +1484,14 @@ export class GestureHost {
 
   /**
    * Whether an enabled participant could claim a touch or cancel a lift: a
-   * consumer, or a recognizer that claims touches. With only watchers
-   * attached, the host's listeners are all passive (`spec:AST-094` FR20).
+   * consumer, or a recognizer that claims touches and takes a finger or a
+   * pen. With only watchers, or only scroll-only recognizers
+   * (`allowedPointerTypes: []`), the host's listeners are all passive.
    */
   hasClaimer() {
     for (const registration of this.registry.values()) {
       const consumer = registration.consumer;
-      if (consumer != null && consumer.isEnabled?.() !== false || registration.recognizers.some(recognizer => recognizer.isEnabled && recognizer.claimsTouches)) {
+      if (consumer != null && consumer.isEnabled?.() !== false || registration.recognizers.some(recognizer => recognizer.isEnabled && recognizer.claimsTouches && takesTouchContacts(recognizer))) {
         return true;
       }
     }
@@ -1498,10 +1710,564 @@ export class GestureHost {
     }
   }
 
-  /** Undo `lockSelection` for a contact that ended; idempotent. */
-  unlockSelection(id) {
-    this.lockedBy.get(id)?.();
+  /**
+   * Wheel and trackpad input. A wheel gesture drives the recognizers that
+   * allow its scroll type, as a contact that moves with the content. A pan
+   * takes it along its own axis, once no scroller between the pointer and
+   * the pan's element can scroll that way. The gesture's first wheel decides
+   * this. A pinch takes a ctrl-wheel, as a trackpad pinches, as two contacts
+   * whose span follows exp(-deltaY / 100). A wheel the page keeps is never
+   * prevented, and a wheel a recognizer takes always is. A gesture ends its
+   * end window after its last wheel (wheelEndMs), at that wheel's time, so
+   * its release keeps its velocity. A gesture a recognizer took is latched
+   * to it, as a browser latches a scroller. While the gesture lasts, the
+   * shared input stream hands this every wheel first, wherever it lands. So
+   * a pan whose element moves from under a still pointer keeps the gesture.
+   * The page listener exists only during a gesture.
+   */
+  onWheel = event => {
+    const wheel = event;
+    if (this.wheelsSeen.has(wheel)) {
+      return;
+    }
+    this.wheelsSeen.add(wheel);
+    const time = eventTime(wheel);
+    const kind = wheel.ctrlKey ? 'pinch' : 'pan';
+    let gesture = this.wheel;
+    if (gesture != null && (gesture.kind !== kind || time - gesture.last >= gesture.endMs)) {
+      this.endWheel(time);
+      gesture = null;
+    }
+    if (gesture != null && gesture.ids.length > 0 && gesture.follow?.lifted !== true && !this.wheelHasTaker(gesture)) {
+      // Every recognizer that took it has left (detached, disabled or
+      // cancelled), so the rest of the gesture is the page's. A followed
+      // pan's own lift does not count. Its momentum stays latched and
+      // prevented until the splitter's next gesture or the end timer, and
+      // moves nothing. The release is stamped at its last wheel.
+      this.endWheel(gesture.last);
+      const left = wheelPixels(wheel, this.doc.defaultView);
+      gesture = {
+        kind,
+        scrollType: scrollTypeOf(wheel),
+        ids: [],
+        x: wheel.clientX,
+        y: wheel.clientY,
+        span: WHEEL_PINCH_SPAN,
+        last: time,
+        endMs: wheelEndMs(kind, scrollTypeOf(wheel), Math.abs(left.dx) > Math.abs(left.dy)),
+        timer: null,
+        takers: []
+      };
+      this.wheel = gesture;
+    }
+    const {
+      dx,
+      dy
+    } = wheelPixels(wheel, this.doc.defaultView);
+    const horizontal = Math.abs(dx) > Math.abs(dy);
+    // The splitter reads a pan's stream only. A ctrl-wheel pinch has no
+    // fingers' phase or momentum to tell apart, and ends 100 ms after its
+    // last wheel.
+    let seg = null;
+    if (kind === 'pan') {
+      seg = this.segmenter.push(time, horizontal ? dx : dy, horizontal ? WHEEL_FOLLOW_END_MS : WHEEL_FOLLOW_END_V_MS);
+    } else {
+      this.segmenter.end();
+    }
+    this.wheelSegment = seg;
+    if (seg?.boundary != null) {
+      if (gesture != null) {
+        this.endWheel(time);
+        gesture = null;
+      }
+    }
+    if (gesture == null) {
+      gesture = this.beginWheel(wheel, kind, dx, dy, time);
+      this.wheel = gesture;
+      if (gesture.ids.length > 0) {
+        this.latchWheel();
+      }
+    }
+    gesture.last = time;
+    if (gesture.timer != null) {
+      this.clock.clearTimeout(gesture.timer);
+    }
+    // A trackpad scroll waits out a slow drag's pauses, whoever
+    // keeps it; a pinch or a mouse wheel's notches 100 ms.
+    gesture.timer = this.clock.setTimeout(() => {
+      this.segmenter.end();
+      this.endWheel();
+    }, gesture.endMs);
+    if (gesture.ids.length === 0) {
+      return;
+    }
+    wheel.preventDefault();
+    if (gesture.kind === 'pan' && gesture.follow) {
+      const f = gesture.follow;
+      if (f.lifted) {
+        return;
+      }
+      if (this.wheelSegment?.liftNow === true) {
+        // Momentum began: the fingers lifted before the held deltas. The pan
+        // keeps the travel it showed through the undecided stretch. It lets
+        // go here, still moving at the fingers' speed, so its release carries
+        // on from it. The rest of the momentum never moves the pan.
+        this.followProvisionally(gesture, f, time);
+        f.lifted = true;
+        this.arena.ended([{
+          id: gesture.ids[0],
+          x: gesture.x,
+          y: gesture.y,
+          time
+        }]);
+        return;
+      }
+      if (this.wheelSegment?.decaying === true) {
+        // Undecided: the real deltas wait for the splitter while the
+        // fingers' last speed carries the pan on.
+        f.heldX += dx;
+        f.heldY += dy;
+        this.followProvisionally(gesture, f, time);
+        return;
+      }
+      // The fingers' own delta; the held ones were theirs too. Their moves
+      // absorb what the pan shows ahead of their travel, or behind it, half a
+      // move at a time. So the pan never steps back, and ends on their travel.
+      const beforeX = f.trueX - f.heldX;
+      const beforeY = f.trueY - f.heldY;
+      const debtX = absorbedDebt(gesture.x - beforeX, dx);
+      const debtY = absorbedDebt(gesture.y - beforeY, dy);
+      const trueX = beforeX - dx;
+      const trueY = beforeY - dy;
+      const elapsed = time - f.lastMove;
+      if (elapsed > 0) {
+        f.speedX = (trueX - f.trueX) / elapsed;
+        f.speedY = (trueY - f.trueY) / elapsed;
+      }
+      f.trueX = trueX;
+      f.trueY = trueY;
+      f.heldX = 0;
+      f.heldY = 0;
+      f.lastMove = time;
+      gesture.x = trueX + debtX;
+      gesture.y = trueY + debtY;
+      f.baseX = gesture.x;
+      f.baseY = gesture.y;
+      this.arena.moved([{
+        id: gesture.ids[0],
+        x: gesture.x,
+        y: gesture.y,
+        time
+      }]);
+      return;
+    }
+    if (gesture.kind === 'pan') {
+      gesture.x -= dx;
+      gesture.y -= dy;
+      this.arena.moved([{
+        id: gesture.ids[0],
+        x: gesture.x,
+        y: gesture.y,
+        time
+      }]);
+    } else {
+      gesture.span *= Math.exp(-dy / 100);
+      this.arena.moved(this.pinchContacts(gesture, time));
+    }
+  };
+
+  /**
+   * Move a followed pan through the splitter's undecided stretch. It moves on
+   * from where it was shown at the fingers' last move, at their last speed.
+   * It never passes what that speed projects for the time since.
+   */
+  followProvisionally(gesture, f, time) {
+    const elapsed = Math.max(0, time - f.lastMove);
+    const x = f.baseX + f.speedX * elapsed;
+    const y = f.baseY + f.speedY * elapsed;
+    if (x === gesture.x && y === gesture.y) {
+      return;
+    }
+    gesture.x = x;
+    gesture.y = y;
+    this.arena.moved([{
+      id: gesture.ids[0],
+      x,
+      y,
+      time
+    }]);
+  }
+
+  /** Start a wheel gesture: who takes it, decided once, or nobody. */
+  beginWheel(wheel, kind, dx, dy, time) {
+    const type = scrollTypeOf(wheel);
+    const isHorizontal = Math.abs(dx) > Math.abs(dy);
+    const kept = {
+      kind,
+      scrollType: type,
+      ids: [],
+      x: wheel.clientX,
+      y: wheel.clientY,
+      span: WHEEL_PINCH_SPAN,
+      last: time,
+      endMs: wheelEndMs(kind, type, isHorizontal),
+      timer: null,
+      takers: []
+    };
+    // A contact already down keeps its gesture; the wheel stays the page's.
+    // So does a first wheel another handler already prevented, or one that
+    // cannot be cancelled: no recognizer could take it from the page.
+    if (this.arena.touches.length > 0 || dx === 0 && dy === 0 || wheel.defaultPrevented || !wheel.cancelable) {
+      return kept;
+    }
+    // Every scroller under the pointer, the page included, as a finger's
+    // probe reads them, without touch-action, which a wheel ignores.
+    // What the wheel landed on: at a shadow host's listener the event's
+    // target is the host, and a scroller inside its tree must count.
+    const target = landedOn(wheel);
+    const scroll = createNativeScrollProbe(target, {
+      readsTouchAction: false
+    });
+    const takers = [];
+    for (let node = target instanceof Node ? target : null; node != null; node = parentAcrossShadow(node)) {
+      if (!(node instanceof Element)) {
+        continue;
+      }
+      for (const recognizer of this.registry.get(node)?.recognizers ?? []) {
+        // A pan follows a trackpad, never a mouse wheel's notches, which
+        // scroll what is under the pointer.
+        if (!recognizer.isEnabled || !recognizer.claimsTouches || !recognizer.allowedScrollTypes.has(type) || internals(recognizer).family !== kind || kind === 'pan' && type !== 'continuous') {
+          continue;
+        }
+        if (kind === 'pan' && (!panTakesMove(recognizer, -dx, -dy) || this.scrollerTakes(target, node, dx, dy, isHorizontal) ||
+        // A scroll-edge pan only past every scroller's edge.
+        isScrollEdgePan(recognizer) && scroll.canScroll(-dx, -dy))) {
+          continue;
+        }
+        takers.push(recognizer);
+      }
+    }
+    if (takers.length === 0) {
+      return kept;
+    }
+    const base = {
+      pointerType: 'mouse',
+      target,
+      scroll,
+      scrollType: type,
+      recognizers: takers,
+      consumer: null
+    };
+    const ids = kind === 'pan' ? [this.nextId++] : [this.nextId++, this.nextId++];
+    const gesture = {
+      ...kept,
+      ids,
+      takers
+    };
+    if (kind === 'pan' && type === 'continuous') {
+      gesture.follow = {
+        lifted: false,
+        heldX: 0,
+        heldY: 0,
+        lastMove: time,
+        trueX: kept.x,
+        trueY: kept.y,
+        baseX: kept.x,
+        baseY: kept.y,
+        speedX: 0,
+        speedY: 0
+      };
+    }
+    this.arena.began(kind === 'pan' ? [{
+      ...base,
+      id: ids[0],
+      x: wheel.clientX,
+      y: wheel.clientY,
+      time
+    }] : this.pinchContacts(gesture, time).map(input => ({
+      ...base,
+      ...input
+    })));
+    // Every recognizer it was offered to may decline it (its own
+    // shouldReceiveTouch). Then nobody took the wheel, and it scrolls the
+    // page from its first step, as with no gesture system.
+    if (ids.every(id => this.arena.participantsOf(id).length === 0)) {
+      this.arena.cancelled(ids, time);
+      return kept;
+    }
+    return gesture;
+  }
+
+  /**
+   * Whether a scroller between `target` and `boundary` (both included)
+   * scrolls this wheel now, along the wheel's major axis. It uses the edge
+   * test a finger's probe uses (canElementScroll).
+   */
+  scrollerTakes(target, boundary, dx, dy, isHorizontal) {
+    for (let node = target instanceof Node ? target : null; node != null; node = parentAcrossShadow(node)) {
+      if (node instanceof Element && canElementScroll(node, isHorizontal ? -dx : 0, isHorizontal ? 0 : -dy)) {
+        return true;
+      }
+      if (node === boundary) {
+        break;
+      }
+    }
+    return false;
+  }
+
+  /** A ctrl-wheel pinch's two contacts, `span` apart around its center. */
+  pinchContacts(gesture, time) {
+    return [{
+      id: gesture.ids[0],
+      x: gesture.x - gesture.span / 2,
+      y: gesture.y,
+      time
+    }, {
+      id: gesture.ids[1],
+      x: gesture.x + gesture.span / 2,
+      y: gesture.y,
+      time
+    }];
+  }
+
+  /** Whether a recognizer that took this wheel gesture still takes part in it. */
+  wheelHasTaker(gesture) {
+    // A cancelled or failed recognizer keeps that state until its contacts
+    // end, which a wheel gesture's do only here.
+    return gesture.takers.some(recognizer => {
+      const {
+        state
+      } = recognizer;
+      return recognizer.isEnabled && (state === 'began' || state === 'changed' || state === 'possible' && recognizer.isInvolved());
+    });
+  }
+
+  /**
+   * Route every wheel on the page to the live wheel gesture, from its claim.
+   * The route is the shared input stream's capture listener on the window,
+   * which runs before any document listener. It is non-passive only while it
+   * is subscribed.
+   */
+  latchWheel() {
+    const view = this.doc.defaultView;
+    if (this.stopWheelLatch == null && view != null) {
+      const cancelWheel = () => {
+        const ids = this.dropDrivenWheel();
+        if (ids.length > 0) {
+          this.arena.cancelled(ids, this.arena.now());
+        }
+      };
+      const stops = [subscribeInput(view, 'wheel', this.onWheel, {
+        cancels: true
+      }),
+      // A page that loses focus or hides ends a trackpad pan, as it ends
+      // every touch. An element's blur reaches the window's capture phase
+      // too and means nothing here.
+      subscribeInput(view, 'blur', event => {
+        if (!(event.target instanceof view.Node)) {
+          cancelWheel();
+        }
+      }), subscribeInput(view, 'visibilitychange', () => {
+        if (this.doc.visibilityState === 'hidden') {
+          cancelWheel();
+        }
+      })];
+      this.stopWheelLatch = () => {
+        for (const stop of stops) {
+          stop();
+        }
+      };
+    }
+  }
+
+  /**
+   * Hold the page's selection for a mouse or pen contact that a recognizer
+   * claims. Examples are a pan's drag and a press a group claims at its own
+   * pointerdown. While the contact is down, the claiming recognizers'
+   * elements refuse a new selection. The selection the page had at the press
+   * is put back over anything that replaced it. That includes the press's own
+   * collapse and a selection the drag made before its claim. The claiming
+   * recognizer's element holds from its claim, in any state: a waiting
+   * recognizer claims while possible, and a swipe claims as ended. The
+   * participants that already recognize hold too. A claim given back to the
+   * browser lets its hold go (releaseClaimedDrags). A drag that starts on
+   * selectable text never gets here, because no recognizer claims it
+   * (`selectingContacts`). A tap claims only at its lift, so a click keeps
+   * the selection it made. A finger keeps the touch-down lock alone.
+   */
+  lockClaimedDrags(ids, claimer) {
+    for (const id of ids) {
+      if (this.claimHolds.has(id)) {
+        continue;
+      }
+      const touch = this.arena.touches.find(each => each.id === id);
+      // A claim made at the contact's own lift (a tap's) holds nothing: the
+      // drag is over, and a click keeps the selection it made. A wheel's
+      // contact keeps the page's selection, as a scroll does.
+      if (touch == null || touch.pointerType === 'touch' || touch.scrollType != null || touch.phase === 'ended' || touch.phase === 'cancelled') {
+        continue;
+      }
+      const elements = new Set();
+      for (const recognizer of this.arena.participantsOf(id)) {
+        if ((recognizer.state === 'began' || recognizer.state === 'changed') && recognizer.view?.nodeType === 1) {
+          elements.add(recognizer.view);
+        }
+      }
+      if (claimer.view?.nodeType === 1) {
+        elements.add(claimer.view);
+      }
+      if (elements.size === 0) {
+        continue;
+      }
+      const release = lockDragSelection(elements, this.doc.defaultView, this.pressSelections.get(id) ?? [], () => {
+        this.dragHolds.delete(release);
+      });
+      this.dragHolds.add(release);
+      // A press lock the contact took at its press stays in `lockedBy`. The
+      // hold sits beside it, and the contact's end releases both.
+      if (!this.lockedBy.has(id)) {
+        this.lockedBy.set(id, release);
+      }
+      this.claimHolds.set(id, release);
+    }
+  }
+
+  /**
+   * Claimed contacts the arena gave back. Their drag holds end at once, so
+   * the browser's drag selects again. A contact's press lock (lockSelection)
+   * is not a drag hold and stays.
+   */
+  releaseClaimedDrags(ids) {
+    for (const id of ids) {
+      const release = this.claimHolds.get(id);
+      if (release == null) {
+        continue;
+      }
+      this.claimHolds.delete(id);
+      if (this.lockedBy.get(id) === release) {
+        this.lockedBy.delete(id);
+      }
+      release({
+        isCancel: true
+      });
+    }
+  }
+
+  /**
+   * End the trackpad pan a recognizer still drives, when the page loses focus
+   * or hides, and return its contacts to cancel. The rest of its stream is
+   * the page's until the stream ends, as a touch the browser takes is. A
+   * ctrl-wheel pinch keeps its stream, so the page never zooms for it. A
+   * gesture the page keeps stays as it is. So does a pan its lift released:
+   * its momentum stays latched and prevented until the stream ends.
+   */
+  dropDrivenWheel() {
+    const gesture = this.wheel;
+    if (gesture == null || gesture.kind !== 'pan' || gesture.ids.length === 0 || gesture.follow?.lifted === true) {
+      return [];
+    }
+    const kept = {
+      ...gesture,
+      ids: [],
+      takers: []
+    };
+    delete kept.follow;
+    this.wheel = kept;
+    this.stopWheelLatch?.();
+    this.stopWheelLatch = null;
+    return gesture.ids;
+  }
+
+  /**
+   * End the wheel gesture in progress. On its own timer, it ends its end
+   * window after its last wheel. A taker that leaves (a detach, a disable)
+   * passes that last wheel's time. An input that ends it sooner (a press,
+   * the next gesture's first wheel) passes its own time. Both times are on
+   * the wheels' time base (eventTime), never the host's clock, which need
+   * not share it.
+   */
+  endWheel(endTime) {
+    const gesture = this.wheel;
+    this.stopWheelLatch?.();
+    this.stopWheelLatch = null;
+    if (gesture == null) {
+      return;
+    }
+    this.wheel = null;
+    if (gesture.timer != null) {
+      this.clock.clearTimeout(gesture.timer);
+    }
+    if (gesture.ids.length === 0 || gesture.follow?.lifted) {
+      return;
+    }
+    // Fingers that stop without a lift end on their travel, where it runs
+    // ahead of what the pan shows. What the undecided stretch showed past it
+    // stays, as a step back would show.
+    if (gesture.follow != null) {
+      const f = gesture.follow;
+      const x = ahead(gesture.x, f.trueX - f.heldX, f.speedX);
+      const y = ahead(gesture.y, f.trueY - f.heldY, f.speedY);
+      if (x !== gesture.x || y !== gesture.y) {
+        gesture.x = x;
+        gesture.y = y;
+        this.arena.moved([{
+          id: gesture.ids[0],
+          x,
+          y,
+          time: gesture.last
+        }]);
+      }
+    }
+    // A trackpad scroll whose fingers stop releases still, past the
+    // velocity's stillness interval. A pinch releases 100 ms after its last
+    // wheel, and a lift released the pan already. The release is never later
+    // than the input that ends it (a press, the next gesture's first wheel).
+    // The arena's clock only moves forward, so a later stamp would move that
+    // input's times too.
+    const end = gesture.last + gesture.endMs;
+    const time = endTime == null ? end : Math.max(gesture.last, Math.min(end, endTime));
+    this.arena.ended(gesture.kind === 'pan' ? [{
+      id: gesture.ids[0],
+      x: gesture.x,
+      y: gesture.y,
+      time
+    }] : this.pinchContacts(gesture, time));
+  }
+
+  /**
+   * At a mouse or pen press, mark one that lands on selectable text: once it
+   * moves, it is the browser's drag, and selects text.
+   * Text whose hold does something is locked at this press already
+   * (lockSelection), so it is not selectable text.
+   */
+  noteSelectingPress(id, x, y, target) {
+    if (!this.lockedBy.has(id) && startsOnSelectableText(this.doc, x, y, target)) {
+      this.selectingContacts.add(id);
+    }
+  }
+
+  /**
+   * Undo a contact's selection locks, its press lock and its drag hold, at
+   * once for a cancel, and forget its press's selection; idempotent. A
+   * drag's hold keeps its last task after a lift (lockDragSelection).
+   */
+  unlockSelection(id, isCancel = false) {
+    const lock = this.lockedBy.get(id);
+    lock?.({
+      isCancel
+    });
+    // A press lock keeps `lockedBy` when the contact also has a drag hold.
+    // Release the hold too.
+    const hold = this.claimHolds.get(id);
+    if (hold != null && hold !== lock) {
+      hold({
+        isCancel
+      });
+    }
     this.lockedBy.delete(id);
+    this.claimHolds.delete(id);
+    this.pressSelections.delete(id);
+    this.selectingContacts.delete(id);
   }
 
   // --- Touch events ----------------------------------------------------------
@@ -1539,6 +2305,7 @@ export class GestureHost {
     return true;
   }
   onTouchStart = event => {
+    this.endWheel(eventTime(event));
     this.noteFingersDown(event);
     // Where the host reads a finger from its pointer events (no ontouchstart,
     // as after touch emulation turns on), its Touch Events would track it twice.
@@ -2157,6 +2924,7 @@ export class GestureHost {
   // --- Pointer events --------------------------------------------------------
 
   onPointerDown = event => {
+    this.endWheel(eventTime(event));
     // A new press: whatever click is still owed to the last one is not this.
     disarmClickGuard(this.doc);
     if (!isPointerKind(event.pointerType)) {
@@ -2194,6 +2962,11 @@ export class GestureHost {
         target
       });
     }
+    // Before the arena admits it: a press a group claims at its own
+    // pointerdown keeps the selection the page has now.
+    if (event.pointerType !== 'touch') {
+      this.pressSelections.set(id, selectionRangesOf(this.doc.defaultView));
+    }
     this.arena.began([{
       id,
       x: event.clientX,
@@ -2210,6 +2983,10 @@ export class GestureHost {
       // hit test may still see the motion's start.
       this.lockSelection(id, this.arena.participantsOf(id), target, this.arena.consumerOf(id) ?? null, consumerElement);
     }
+    if (event.pointerType !== 'touch') {
+      // The engine's own hit: the text its caret query and a drag select.
+      this.noteSelectingPress(id, event.clientX, event.clientY, landed);
+    }
   };
   onPointerMove = event => {
     if (event.pointerType === 'touch' && this.usesTouchEvents) {
@@ -2345,7 +3122,7 @@ export class GestureHost {
     const id = this.pointerIds.get(event.pointerId);
     if (id != null) {
       this.pointerIds.delete(event.pointerId);
-      this.unlockSelection(id);
+      this.unlockSelection(id, true);
       this.retargeted.delete(id);
       this.arena.cancelled([id], eventTime(event));
     }
@@ -2549,7 +3326,7 @@ export class GestureHost {
   cancelEverything(time) {
     const ids = [...this.pointerIds.values()];
     for (const id of ids) {
-      this.unlockSelection(id);
+      this.unlockSelection(id, true);
     }
     for (const identifier of [...this.touchIds.keys()]) {
       // The browser may keep the touch alive: its lift must not click.
@@ -2566,6 +3343,8 @@ export class GestureHost {
     this.unpairedTouches.clear();
     this.lastFed.clear();
     this.pointerFed.clear();
+    // A trackpad pan a recognizer still drives is cancelled with them.
+    ids.push(...this.dropDrivenWheel());
     if (ids.length > 0) {
       this.arena.cancelled(ids, time);
     }