@weasel-js/gestures 1.9.4 → 1.10.0

package/dist/index.js

@@ -2,6 +2,7 @@
 var GESTURE_DESCRIPTORS = [
   { name: "click", hasTarget: true },
   { name: "pointerDown", hasTarget: true },
+  { name: "hover", hasTarget: true },
   { name: "dblTap", hasTarget: true },
   { name: "drag", hasTarget: true },
   { name: "wheel", hasTarget: true, arg: { name: "direction", values: ["up", "down", "*"], default: "*" } },
@@ -271,6 +272,20 @@ function keyRouteToSpec(r) {
   return spec;
 }
 
+// src/ui/ingestTypes.ts
+function mimeMatchesGlob(mime, glob) {
+  const m = mime.toLowerCase();
+  const g = glob.toLowerCase();
+  if (g === "*" || g === "*/*") return true;
+  if (g.endsWith("/*")) return m.startsWith(g.slice(0, -1));
+  return m === g;
+}
+var UNKNOWN_MIME = "*/*";
+function matchIngestTypes(items, types) {
+  if (!types || types.length === 0) return true;
+  return items.some((it) => it.mime === UNKNOWN_MIME || types.some((g) => mimeMatchesGlob(it.mime, g)));
+}
+
 // src/ui/match.ts
 function resolveSpecValue(value) {
   if (value === true) return "required";
@@ -391,17 +406,6 @@ function matchPhaseAtom(a, ctx) {
   const isEngaged = ctx.engagedChannels.has(id);
   return a.phase === "engaged" ? isEngaged : !isEngaged;
 }
-function mimeMatchesGlob(mime, glob) {
-  const m = mime.toLowerCase();
-  const g = glob.toLowerCase();
-  if (g === "*" || g === "*/*") return true;
-  if (g.endsWith("/*")) return m.startsWith(g.slice(0, -1));
-  return m === g;
-}
-function matchIngestTypes(items, types) {
-  if (!types || types.length === 0) return true;
-  return items.some((it) => types.some((g) => mimeMatchesGlob(it.mime, g)));
-}
 function matchSpec(e, spec, isMac, phaseCtx) {
   if (spec.phase !== void 0) {
     const ctx = phaseCtx ?? { selfChannel: null, engagedChannels: EMPTY_ENGAGED };
@@ -445,13 +449,13 @@ function matchSpec(e, spec, isMac, phaseCtx) {
       if (!matchModifiers(e, spec.mods, isMac)) return false;
       return matchTarget(e.affordance, spec.target, e.bodyTarget, e.bodyKind);
     }
-    case "contextMenu": {
-      if (e.kind !== "contextmenu") return false;
-      if (!matchModifiers(e, spec.mods, isMac)) return false;
-      return matchTarget(e.affordance, spec.target, e.bodyTarget, e.bodyKind);
-    }
-    case "longPress": {
-      if (e.kind !== "longpress") return false;
+    // Each happens at a point, so its target is what the event classified
+    // there: for a long-press, the affordance its press landed on.
+    case "contextMenu":
+    case "longPress":
+    case "hover": {
+      if (e.kind !== "contextmenu" && e.kind !== "longpress" && e.kind !== "hover") return false;
+      if (e.kind !== spec.kind.toLowerCase()) return false;
       if (!matchModifiers(e, spec.mods, isMac)) return false;
       return matchTarget(e.affordance, spec.target, e.bodyTarget, e.bodyKind);
     }
@@ -505,6 +509,7 @@ var SPEC_KIND_TO_GESTURE = {
   longPress: "longPress",
   drag: "drag",
   pointerDown: "pointerDown",
+  hover: "hover",
   multiTouch: "multiTouch",
   multiTouchTap: "multiTouchTap",
   drop: "drop",
@@ -554,6 +559,7 @@ function routeToSpec(parsed) {
       return fail(`${parsed.gesture} has no GestureSpec kind`);
     case "click":
     case "pointerDown":
+    case "hover":
     case "doubleClick":
     case "drag":
     case "contextMenu":
@@ -681,6 +687,8 @@ function actionClause(parsed, required) {
       return userDoes(required, `clicks${target}`);
     case "pointerDown":
       return userDoes(required, `presses${target}`);
+    case "hover":
+      return userDoes(required, `moves the pointer${target}`);
     case "dblTap":
       return userDoes(required, `double-taps${target}`);
     case "drag":
@@ -730,6 +738,15 @@ function canonicalModifiers(mods2) {
   return Object.entries(mods2).sort(([a], [b]) => a.localeCompare(b)).map(([name, req]) => `${name}=${req}`).join("&");
 }
 
+// src/ui/stylus.ts
+function stylusOf(src) {
+  return {
+    ...typeof src.pressure === "number" ? { pressure: src.pressure } : {},
+    ...typeof src.tiltX === "number" ? { tiltX: src.tiltX } : {},
+    ...typeof src.tiltY === "number" ? { tiltY: src.tiltY } : {}
+  };
+}
+
 // src/ui/spec.ts
 function hitPredicate(fn) {
   return Object.assign(
@@ -752,6 +769,23 @@ function isApplePlatform() {
   return /mac|iphone|ipad|ipod/i.test(raw);
 }
 
+// src/ui/fixedSeat.ts
+var HOST_SELECTOR = "[data-wzl-portal-host],[data-wzl-theme],[data-wzl-mode]";
+function nearestPortalHost(from) {
+  return from?.closest(HOST_SELECTOR) ?? null;
+}
+function containsFixed(el) {
+  const cs = getComputedStyle(el);
+  const set = (value) => value !== void 0 && value !== "" && value !== "none";
+  return set(cs.transform) || set(cs.filter) || set(cs.backdropFilter) || set(cs.perspective) || /paint|layout|strict|content/.test(cs.contain ?? "");
+}
+function fixedSeat(from) {
+  const host = nearestPortalHost(from) ?? document.body;
+  if (host === document.body || !containsFixed(host)) return { host, left: 0, top: 0 };
+  const rect = host.getBoundingClientRect();
+  return { host, left: rect.left, top: rect.top };
+}
+
 // src/ui/specificity.ts
 function modsCount(mods2) {
   if (!mods2) return 0;
@@ -810,6 +844,313 @@ function pastDragThreshold(from, to, threshold = DRAG_THRESHOLD_PX) {
   return Math.hypot(to.clientX - from.clientX, to.clientY - from.clientY) >= threshold;
 }
 
+// src/recognizer/thresholds.ts
+var LONG_PRESS_MS = 500;
+var DOUBLE_CLICK_MAX_MS = 600;
+var DOUBLE_CLICK_MAX_PX = 8;
+var TAP_THRESHOLD_PX = 8;
+
+// src/recognizer/pressFacts.ts
+function pressedOn(down) {
+  return {
+    ...down.affordance !== void 0 ? { affordance: down.affordance } : {},
+    ...down.bodyTarget !== void 0 ? { bodyTarget: down.bodyTarget } : {},
+    ...down.bodyKind !== void 0 ? { bodyKind: down.bodyKind } : {}
+  };
+}
+function clickEvents(down, up) {
+  const shared = {
+    target: up.target,
+    altKey: up.altKey,
+    ctrlKey: up.ctrlKey,
+    metaKey: up.metaKey,
+    shiftKey: up.shiftKey,
+    x: up.worldX,
+    y: up.worldY,
+    clientX: up.clientX,
+    clientY: up.clientY,
+    ...pressedOn(down)
+  };
+  return {
+    click: { kind: "click", ...shared, pressX: down.worldX, pressY: down.worldY },
+    doubleclick: { kind: "doubleclick", ...shared }
+  };
+}
+function longPressEvents(down) {
+  const shared = {
+    target: down.target,
+    altKey: down.altKey,
+    ctrlKey: down.ctrlKey,
+    metaKey: down.metaKey,
+    shiftKey: down.shiftKey,
+    ...pressedOn(down)
+  };
+  const at2 = { x: down.worldX, y: down.worldY, clientX: down.clientX, clientY: down.clientY };
+  return {
+    longpress: { kind: "longpress", ...at2, ...shared },
+    contextmenu: { kind: "contextmenu", ...at2, ...shared }
+  };
+}
+
+// src/recognizer/click.ts
+function composeClick(down, up, clicks, now, dispatch, observer) {
+  const evs = clickEvents(down, up);
+  const world = { x: up.worldX, y: up.worldY };
+  dispatch(evs.click);
+  observer.click?.(world);
+  const t = now();
+  const prev = clicks.last;
+  const follows = prev !== null && t - prev.t < DOUBLE_CLICK_MAX_MS && Math.hypot(up.clientX - prev.clientX, up.clientY - prev.clientY) < DOUBLE_CLICK_MAX_PX;
+  if (!follows) {
+    clicks.last = { t, clientX: up.clientX, clientY: up.clientY };
+    return {};
+  }
+  observer.doubleClick?.(world);
+  const doubleClick = dispatch(evs.doubleclick);
+  clicks.last = null;
+  return { doubleClick };
+}
+
+// src/recognizer/longPressHold.ts
+function createLongPressHold(clock, onChange) {
+  let pending = null;
+  const cancel = (pointerId) => {
+    if (!pending || pointerId !== void 0 && pending.pointerId !== pointerId) return;
+    clock.clearTimer(pending.timer);
+    pending = null;
+    onChange(null);
+  };
+  return {
+    arm(press, fire) {
+      cancel();
+      const timer = clock.setTimer(() => {
+        pending = null;
+        onChange(null);
+        fire();
+      }, press.duration);
+      pending = { pointerId: press.pointerId, timer };
+      onChange(press);
+    },
+    pendingFor: (pointerId) => pending?.pointerId === pointerId,
+    cancel
+  };
+}
+
+// src/recognizer/multiTouch.ts
+function multiTouchGeometry(positions) {
+  const pts = [...positions];
+  if (pts.length < 2) return { centroid: { x: 0, y: 0 }, spread: 0, angle: 0 };
+  let sumX = 0;
+  let sumY = 0;
+  for (const p of pts) {
+    sumX += p.x;
+    sumY += p.y;
+  }
+  const dx = pts[1].x - pts[0].x;
+  const dy = pts[1].y - pts[0].y;
+  return {
+    centroid: { x: sumX / pts.length, y: sumY / pts.length },
+    spread: Math.sqrt(dx * dx + dy * dy),
+    angle: Math.atan2(dy, dx) * 180 / Math.PI
+  };
+}
+function createMultiTouchEpisode() {
+  let episode = null;
+  return {
+    join(positions, centroid, now) {
+      if (!episode) {
+        episode = {
+          fingers: positions.size,
+          centroid: { ...centroid },
+          joinedAt: /* @__PURE__ */ new Map(),
+          moved: false,
+          startedAt: now
+        };
+      } else {
+        episode.fingers = positions.size;
+      }
+      for (const [id, p] of positions) {
+        if (!episode.joinedAt.has(id)) episode.joinedAt.set(id, { ...p });
+      }
+    },
+    moved(pointerId, to) {
+      const from = episode?.joinedAt.get(pointerId);
+      if (episode && from && Math.hypot(to.x - from.x, to.y - from.y) > TAP_THRESHOLD_PX) episode.moved = true;
+    },
+    finish(centroid, now, maxHoldMs) {
+      const e = episode;
+      episode = null;
+      if (!e) return null;
+      const brief = now - e.startedAt < maxHoldMs;
+      const still = Math.hypot(centroid.x - e.centroid.x, centroid.y - e.centroid.y) <= TAP_THRESHOLD_PX;
+      return brief && !e.moved && still ? e.fingers : null;
+    },
+    abandon() {
+      episode = null;
+    }
+  };
+}
+
+// src/recognizer/samples.ts
+function modifiersOf(e) {
+  return { altKey: e.altKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey };
+}
+function pressFactsOf(s) {
+  return {
+    target: s.target,
+    clientX: s.clientX,
+    clientY: s.clientY,
+    worldX: s.x,
+    worldY: s.y,
+    ...modifiersOf(s),
+    ...pressedOn(s)
+  };
+}
+var at = (s, world) => ({
+  pointerId: s.pointerId,
+  x: world.x,
+  y: world.y,
+  clientX: s.clientX,
+  clientY: s.clientY,
+  ...modifiersOf(s)
+});
+function pointerDownEvent(s) {
+  return { kind: "pointerdown", target: s.target, ...at(s, s), ...stylusOf(s), ...pressedOn(s) };
+}
+function pointerMoveEvent(s, world) {
+  return { kind: "pointermove", ...at(s, world), ...stylusOf(s) };
+}
+function pointerUpEvent(s, world) {
+  return { kind: "pointerup", ...at(s, world) };
+}
+
+// src/recognizer/pointerRecognizer.ts
+function multiTouchEvent(fingers, mods2, more) {
+  return { kind: "multitouch", fingers, ...modifiersOf(mods2), ...more };
+}
+var positionsOf = (held) => new Map([...held].map(([id, p]) => [id, p.pos]));
+function heldGeometry(held, toSurface, extra) {
+  const g = multiTouchGeometry([...positionsOf(held).values(), ...extra]);
+  return { ...g, centroid: toSurface(g.centroid) };
+}
+function fireLongPress(rec, sink, observer) {
+  if (!rec) return;
+  const evs = longPressEvents(rec.down);
+  let result = sink.dispatch(evs.longpress);
+  if (result === "unhandled") result = sink.dispatch(evs.contextmenu);
+  if (result === "unhandled") return;
+  rec.buffered = null;
+  if (rec.holdType) observer.longPress?.(rec.holdType);
+}
+function createPointerRecognizer(opts) {
+  const { sink, clock, observer = {}, toSurface = (p) => p } = opts;
+  const world = (s) => opts.toWorld?.(s.clientX, s.clientY) ?? { x: s.clientX, y: s.clientY };
+  const clicks = opts.clicks ?? { last: null };
+  const held = /* @__PURE__ */ new Map();
+  const touches = createMultiTouchEpisode();
+  const hold = createLongPressHold(clock, (pending) => {
+    observer.holdChanged?.(pending);
+  });
+  const longPressMs = () => opts.longPressMs?.() ?? LONG_PRESS_MS;
+  const geometry = (extra = []) => heldGeometry(held, toSurface, extra);
+  const claimForMultiTouch = (mods2) => {
+    hold.cancel();
+    for (const p of held.values()) p.buffered = null;
+    const g = geometry();
+    touches.join(positionsOf(held), g.centroid, clock.now());
+    sink.dispatch(multiTouchEvent(held.size, mods2, g));
+  };
+  return {
+    press(s) {
+      const ev = pointerDownEvent(s);
+      const rec = { pos: { x: s.clientX, y: s.clientY }, buffered: ev, down: pressFactsOf(s) };
+      held.set(s.pointerId, rec);
+      if (held.size < 2) sink.dispatch({ ...ev, stage: "press" });
+      if ((s.pointerType === "touch" || s.pointerType === "pen") && held.size === 1) {
+        rec.holdType = s.pointerType;
+        hold.arm(
+          { pointerId: s.pointerId, pointerType: s.pointerType, press: rec.down, startedAt: clock.now(), duration: longPressMs() },
+          () => {
+            fireLongPress(held.get(s.pointerId), sink, observer);
+          }
+        );
+      }
+      if (held.size >= 2) claimForMultiTouch(s);
+    },
+    move(s) {
+      const rec = held.get(s.pointerId);
+      const to = { x: s.clientX, y: s.clientY };
+      if (rec) rec.pos = to;
+      touches.moved(s.pointerId, to);
+      if (rec?.buffered && pastDragThreshold(rec.down, s)) {
+        const press = rec.buffered;
+        rec.buffered = null;
+        hold.cancel(s.pointerId);
+        sink.dispatch(press);
+      }
+      if (held.size >= 2 && sink.multiTouchInFlight(held.size)) {
+        sink.dispatch(multiTouchEvent(held.size, s, geometry()));
+      }
+      sink.dispatch(pointerMoveEvent(s, world(s)));
+    },
+    release(s) {
+      hold.cancel(s.pointerId);
+      const before = held.size;
+      const rec = held.get(s.pointerId);
+      held.delete(s.pointerId);
+      if (before >= 2) sink.dispatch(multiTouchEvent(before, s, { end: "commit" }));
+      if (before >= 2 && held.size < 2) {
+        const fingers = touches.finish(
+          geometry([{ x: s.clientX, y: s.clientY }]).centroid,
+          clock.now(),
+          longPressMs()
+        );
+        if (fingers !== null) sink.dispatch({ kind: "multitouchtap", fingers, ...modifiersOf(s) });
+      }
+      sink.dispatch(pointerUpEvent(s, world(s)));
+      if (!rec?.buffered) return {};
+      const at2 = world(s);
+      const up = {
+        target: s.target,
+        clientX: s.clientX,
+        clientY: s.clientY,
+        worldX: at2.x,
+        worldY: at2.y,
+        ...modifiersOf(s)
+      };
+      return composeClick(rec.down, up, clicks, () => clock.now(), (ev) => sink.dispatch(ev), observer);
+    },
+    cancel(pointerId) {
+      const rec = held.get(pointerId);
+      if (!rec) return;
+      const before = held.size;
+      held.delete(pointerId);
+      hold.cancel(pointerId);
+      if (before >= 2) sink.dispatch(multiTouchEvent(before, rec.down, { end: "cancel" }));
+      touches.abandon();
+      sink.dispatch({ kind: "pointercancel", pointerId, ...modifiersOf(rec.down) });
+    },
+    takeHold() {
+      let holding = false;
+      for (const [id, rec] of held) {
+        if (!rec.holdType) continue;
+        holding = true;
+        if (!hold.pendingFor(id)) continue;
+        hold.cancel(id);
+        fireLongPress(rec, sink, observer);
+      }
+      return holding;
+    },
+    heldCount: () => held.size,
+    positionOf: (pointerId) => held.get(pointerId)?.pos,
+    reset() {
+      hold.cancel();
+      held.clear();
+      touches.abandon();
+    }
+  };
+}
+
 // src/ui/controlTarget.ts
 var CONTROL_SELECTOR = [
   "button",
@@ -831,6 +1172,47 @@ function isInControlWithin(target, host) {
   return control !== null && control !== host && host.contains(control);
 }
 
-export { ACTIVE_SIGILS, CONTROL_SELECTOR, DRAG_THRESHOLD_PX, GESTURE_DESCRIPTORS, MOD_NAME_SET, RESERVED_ID_NAMES, RESERVED_ID_PREFIXES, RESERVED_SIGILS, ROUTE_FIELD_DEFINITIONS, ROUTE_TERMS, VALID_MOD_NAMES, bodyPredicate, canonicalModifiers, collapseShiftPairs, describeRoute, describeRouteParts, formatKeyRoute, formatPhaseAtom, formatRoute, getGestureDescriptor, hitPredicate, isApplePlatform, isInControlWithin, isKnownGestureName, keyRouteToSpec, matchIngestTypes, matchKey, matchModifiers, matchPhase, matchSpec, matchTarget, mimeMatchesGlob, modifierComboToParsed, mods, parseKeyRoute, parseRoute, parseTargetSpec, pastDragThreshold, routeGestureForSpecKind, routeToSpec, specKindForRouteGesture, specificity };
+// src/ui/keyOwner.ts
+function isEditableTarget(target) {
+  if (!target || !(target instanceof Element)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA") return true;
+  if (target.isContentEditable) return true;
+  const ce = target.getAttribute("contenteditable");
+  return ce === "true" || ce === "";
+}
+var ACTIVATED_BY_KEY = [
+  "button",
+  "a[href]",
+  "summary",
+  "select",
+  'input[type="button"]',
+  'input[type="submit"]',
+  'input[type="reset"]',
+  'input[type="checkbox"]',
+  'input[type="radio"]',
+  '[role="button"]',
+  '[role="link"]',
+  '[role="checkbox"]',
+  '[role="switch"]',
+  '[role="menuitem"]',
+  '[role="tab"]',
+  '[role="option"]'
+].join(", ");
+function activatesFocusedControl(e) {
+  if (e.key !== " " && e.key !== "Enter") return false;
+  return e.target instanceof Element && e.target.matches(ACTIVATED_BY_KEY);
+}
+var SELECT_NAVIGATION = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"]);
+function selectOwnsKey(e) {
+  if (!(e.target instanceof Element) || e.target.tagName !== "SELECT") return false;
+  if (e.metaKey || e.ctrlKey || e.altKey) return false;
+  return SELECT_NAVIGATION.has(e.key) || e.key.length === 1;
+}
+function focusedControlOwnsKey(e) {
+  return activatesFocusedControl(e) || selectOwnsKey(e);
+}
+
+export { ACTIVE_SIGILS, CONTROL_SELECTOR, DOUBLE_CLICK_MAX_MS, DOUBLE_CLICK_MAX_PX, DRAG_THRESHOLD_PX, GESTURE_DESCRIPTORS, LONG_PRESS_MS, MOD_NAME_SET, RESERVED_ID_NAMES, RESERVED_ID_PREFIXES, RESERVED_SIGILS, ROUTE_FIELD_DEFINITIONS, ROUTE_TERMS, TAP_THRESHOLD_PX, UNKNOWN_MIME, VALID_MOD_NAMES, activatesFocusedControl, bodyPredicate, canonicalModifiers, clickEvents, collapseShiftPairs, createPointerRecognizer, describeRoute, describeRouteParts, fixedSeat, focusedControlOwnsKey, formatKeyRoute, formatPhaseAtom, formatRoute, getGestureDescriptor, hitPredicate, isApplePlatform, isEditableTarget, isInControlWithin, isKnownGestureName, keyRouteToSpec, longPressEvents, matchIngestTypes, matchKey, matchModifiers, matchPhase, matchSpec, matchTarget, mimeMatchesGlob, modifierComboToParsed, mods, multiTouchGeometry, nearestPortalHost, parseKeyRoute, parseRoute, parseTargetSpec, pastDragThreshold, routeGestureForSpecKind, routeToSpec, specKindForRouteGesture, specificity, stylusOf };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map