@solidrt/core 0.0.64 → 0.0.66

package/src/input-keyboard.ts

@@ -17,7 +17,9 @@
 //
 // Held state is a count behind a signal, so a source's rate is reactive
 // (a held key wakes a control's frame loop) and a blur - the up that never
-// arrives once focus has left - clears it. Composites clamp nothing: the
+// arrives once focus has left - clears it. A source also reports when its
+// keys last changed (the key event's timeStamp; nothing after a blur,
+// which is no release by the player). Composites clamp nothing: the
 // map's combination does (W and D together read [1, -1] before the
 // vec2 clamp to unit length, so diagonals walk at the same speed).
 //
@@ -60,9 +62,11 @@ let matches = (event: KeyEvent, key: string): boolean => {
   return key.length === 4 && key.startsWith("Key") && event.key.toLowerCase() === key[3]!.toLowerCase()
 }
 
-// A set of specs with a reactive "how many are held" count.
+// A set of specs with a reactive "how many are held" count, and the time
+// of the key event that last changed which are held.
 function held(specs: Spec[]) {
   let down = new Set<string>()
+  let changedAt: number | null = null
   // ownedWrite: a map forwards key events from wherever its handlers sit.
   let [count, setCount] = createSignal(0, { ownedWrite: true })
   return {
@@ -72,14 +76,18 @@ function held(specs: Spec[]) {
       // on its most specific matches (a repeat under a newly held Shift
       // moves "Tab" to "Shift+Tab" and back), an up frees them all.
       let onKey = specs.filter(s => matches(event, s.key))
+      let before = [...down].join()
       for (let s of onKey) down.delete(s.text)
       if (isDown) for (let s of mostSpecific(onKey, s => s.mods, event)) down.add(s.text)
+      if ([...down].join() !== before) changedAt = event.timeStamp
       setCount(down.size)
     },
     blur() {
+      if (down.size > 0) changedAt = null
       down.clear()
       setCount(0)
     },
+    changedAt: () => changedAt,
     has(text: string) {
       return down.has(text)
     },
@@ -95,6 +103,7 @@ function key(spec: string): InputSource<"button"> {
     id: `${DEVICE}:key:${spec}`,
     device: DEVICE,
     rate: () => state.count() > 0,
+    changedAt: state.changedAt,
     key: state.key,
     blur: state.blur,
   }

package/src/input-map.ts

@@ -76,7 +76,8 @@ export type DeviceName = "keyboard" | "gamepad" | "pointer"
  * One device control as an input source. `rate` reads its current value
  * (reactive); `deltas` subscribes a sink to the amounts a gesture
  * produces; `key`/`blur` receive the key events a map forwards
- * (InputMap.handlers). A source may carry any subset.
+ * (InputMap.handlers); `changedAt` says when the rate last changed. A
+ * source may carry any subset.
  */
 export interface InputSource<K extends ActionKind = ActionKind> {
   readonly kind: K
@@ -90,6 +91,16 @@ export interface InputSource<K extends ActionKind = ActionKind> {
    * may leave it out and never counts as the active device. */
   readonly device?: DeviceName
   rate?: () => ActionValue<K>
+  /**
+   * When `rate` last changed: the `timeStamp` (ms) of the input event that
+   * changed it, or null when the value was dropped and not let go by the
+   * player (a blur releases every held key with no event), and before any
+   * change. What `tap` and `doubleTap` measure with, so a button source
+   * has to carry it to sit under one: the time travels with the value,
+   * since whoever sees the change sees it after the event is gone. Not
+   * reactive.
+   */
+  changedAt?: () => number | null
   deltas?: (sink: DeltaSink) => () => void
   key?: (event: KeyEvent, down: boolean) => void
   blur?: () => void

package/src/input-pointer.ts

@@ -454,7 +454,7 @@ export function createPointerFeed(options: PointerFeedOptions = {}): PointerFeed
           if (downs.size === 1) {
             opening = { id: e.pointerId, x: e.clientX, y: e.clientY, mods: mods(e), alone: true }
             finger.reset()
-            finger.push(e.clientX, e.clientY)
+            finger.push(e.clientX, e.clientY, e.timeStamp)
           } else if (opening) opening.alone = false
         }
       },
@@ -465,7 +465,7 @@ export function createPointerFeed(options: PointerFeedOptions = {}): PointerFeed
         transform.handlers.onPointerMove(e)
         hold.move(e)
         taps.move(e)
-        if (opening && opening.id === e.pointerId) finger.push(e.clientX, e.clientY)
+        if (opening && opening.id === e.pointerId && !e.predicted) finger.push(e.clientX, e.clientY, e.timeStamp)
       },
       onPointerUp(e) {
         if (downs.get(e.pointerId) !== (e.button ?? PRIMARY)) return
@@ -475,7 +475,7 @@ export function createPointerFeed(options: PointerFeedOptions = {}): PointerFeed
         taps.up(e)
         if (opening && opening.id === e.pointerId) {
           if (opening.alone && downs.size === 0) {
-            let direction: SwipeDirection | null = classifySwipe(finger.velocity(), { dx: e.clientX - opening.x, dy: e.clientY - opening.y })
+            let direction: SwipeDirection | null = classifySwipe(finger.velocity(e.timeStamp), { dx: e.clientX - opening.x, dy: e.clientY - opening.y })
             if (direction) swipe.fire(opening.mods, direction)
           }
           opening = null

package/src/input-processors.ts

@@ -6,11 +6,15 @@
 // the plain press on another action, and the consumer reads one bool.
 //
 // Timing: an interaction watches its source's rate under a root of its
-// own and keeps time with setTimeout, so it works headless and needs no
-// frame loop; the root is disposed with the creating scope (a component
-// body) and lives for the session without one. `tap` and `doubleTap`
-// are edges, not levels: they read pressed for one task, long enough
-// for a map's onPress to fire, then release on their own.
+// own, so it works headless and needs no frame loop; the root is disposed
+// with the creating scope (a component body) and lives for the session
+// without one. `hold` keeps time with setTimeout. `tap` and `doubleTap`
+// measure between the source's edges with the source's own time
+// (`changedAt`, the timeStamp of the input event behind each edge): they
+// see an edge at the flush, after the event is gone, so they read no
+// clock of their own, and a source without `changedAt` cannot sit under
+// them. They are edges, not levels: they read pressed for one task, long
+// enough for a map's onPress to fire, then release on their own.
 //
 // Every processor composes the source's id (`invert(gamepad:leftStick)`,
 // `hold(400,keyboard:key:Space)`), so a saved binding restores through
@@ -49,6 +53,13 @@ let checkButtonSource = (what: string, source: InputSource): void => {
   if (source.kind !== "button") throw new Error(`${what}: "${source.label}" is a ${source.kind}, not a button`)
 }
 
+let checkTimedSource = (what: string, source: InputSource): void => {
+  checkButtonSource(what, source)
+  if (typeof source.changedAt !== "function") {
+    throw new Error(`${what}: "${source.label}" does not say when it changes (no changedAt), so its presses cannot be timed`)
+  }
+}
+
 let checkMs = (what: string, ms: number): void => {
   if (!Number.isFinite(ms) || ms < 0) throw new Error(`${what}: ms must be a non-negative number, got ${String(ms)}`)
 }
@@ -98,11 +109,13 @@ export function scale<K extends "axis" | "vec2">(source: InputSource<K>, factor:
 }
 
 // A button source derived from one button source's press and release
-// edges: `edge(down, now)` runs on each, with `set` for the derived
-// state and `later` for a timer that the disposal clears.
+// edges: `edge(down, at)` runs on each, with `set` for the derived
+// state and `later` for a timer that the disposal clears. `at` is the
+// source's time for the edge (its changedAt), null when it has none: a
+// source that carries no time, or a value that was dropped (a blur).
 type EdgeHooks = { set: (pressed: boolean) => void; later: (ms: number, run: () => void) => void; clearLater: () => void }
 
-function derived(source: InputSource<"button">, label: string, id: string, edge: (down: boolean, now: number, hooks: EdgeHooks) => void): InputSource<"button"> {
+function derived(source: InputSource<"button">, label: string, id: string, edge: (down: boolean, at: number | null, hooks: EdgeHooks) => void): InputSource<"button"> {
   // ownedWrite: the edges land inside an effect and timers.
   let [pressed, setPressed] = createSignal(false, { ownedWrite: true })
   let timer: ReturnType<typeof setTimeout> | null = null
@@ -124,7 +137,7 @@ function derived(source: InputSource<"button">, label: string, id: string, edge:
     createEffect(
       () => source.rate!(),
       (down, prev) => {
-        if (down !== prev) edge(down, performance.now(), hooks)
+        if (down !== prev) edge(down, source.changedAt?.() ?? null, hooks)
       },
       { defer: true },
     )
@@ -151,7 +164,7 @@ let pulse = (hooks: EdgeHooks): void => {
 export function hold(source: InputSource<"button">, ms = HOLD_MS): InputSource<"button"> {
   checkButtonSource("hold", source)
   checkMs("hold", ms)
-  return derived(source, `${source.label} (hold ${ms} ms)`, `hold(${ms},${source.id})`, (down, _now, hooks) => {
+  return derived(source, `${source.label} (hold ${ms} ms)`, `hold(${ms},${source.id})`, (down, _at, hooks) => {
     if (down) hooks.later(ms, () => hooks.set(true))
     else {
       hooks.clearLater()
@@ -161,40 +174,55 @@ export function hold(source: InputSource<"button">, ms = HOLD_MS): InputSource<"
 }
 
 /** A press released within `ms` (default 200): pressed for one task on the
- * release, so onPress fires once per tap and a long press is not one. */
+ * release, so onPress fires once per tap and a long press is not one. A
+ * press the player did not let go (a blur dropped it) is no tap. The
+ * source has to say when it changes (`changedAt`). */
 export function tap(source: InputSource<"button">, ms = TAP_MS): InputSource<"button"> {
-  checkButtonSource("tap", source)
+  checkTimedSource("tap", source)
   checkMs("tap", ms)
-  let downAt = 0
-  return derived(source, `${source.label} (tap)`, `tap(${ms},${source.id})`, (down, now, hooks) => {
-    if (down) downAt = now
-    else if (now - downAt <= ms) pulse(hooks)
+  let downAt: number | null = null
+  return derived(source, `${source.label} (tap)`, `tap(${ms},${source.id})`, (down, at, hooks) => {
+    if (down) downAt = at
+    else {
+      if (at !== null && downAt !== null && at - downAt <= ms) pulse(hooks)
+      downAt = null
+    }
   })
 }
 
 /** Two taps (each within `tapMs`, default 200) at most `gapMs` (default
- * 300) apart: pressed for one task on the second release. */
+ * 300) apart: pressed for one task on the second release. A press the
+ * player did not let go (a blur dropped it) is no tap and ends the pair.
+ * The source has to say when it changes (`changedAt`). */
 export function doubleTap(source: InputSource<"button">, gapMs = DOUBLE_TAP_GAP_MS, tapMs = TAP_MS): InputSource<"button"> {
-  checkButtonSource("doubleTap", source)
+  checkTimedSource("doubleTap", source)
   checkMs("doubleTap", gapMs)
   checkMs("doubleTap", tapMs)
-  let downAt = 0
+  let downAt: number | null = null
   let lastTap = -Infinity
-  return derived(source, `${source.label} (double tap)`, `doubleTap(${gapMs},${tapMs},${source.id})`, (down, now, hooks) => {
+  return derived(source, `${source.label} (double tap)`, `doubleTap(${gapMs},${tapMs},${source.id})`, (down, at, hooks) => {
     if (down) {
-      downAt = now
+      downAt = at
       return
     }
-    if (now - downAt > tapMs) return
-    if (now - lastTap <= gapMs) {
+    let pressedAt = downAt
+    downAt = null
+    if (at === null || pressedAt === null) {
+      lastTap = -Infinity
+      return
+    }
+    if (at - pressedAt > tapMs) return
+    if (at - lastTap <= gapMs) {
       lastTap = -Infinity
       pulse(hooks)
-    } else lastTap = now
+    } else lastTap = at
   })
 }
 
 /** Pressed while every source is: Shift+click on one action, a two-button
- * combo on a pad. Key events reach each keyboard source among them. */
+ * combo on a pad. Key events reach each keyboard source among them. It
+ * changes when the last of its sources to change did (`changedAt`, when
+ * each of them carries one). */
 export function chord(...sources: InputSource<"button">[]): InputSource<"button"> {
   if (sources.length < 2) throw new Error("chord: needs at least two button sources")
   for (let s of sources) checkButtonSource("chord", s)
@@ -204,6 +232,18 @@ export function chord(...sources: InputSource<"button">[]): InputSource<"button"
     id: `chord(${sources.map(s => s.id).join(",")})`,
     device: sources[0]!.device,
     rate: () => sources.every(s => s.rate?.() === true),
+    changedAt: sources.every(s => s.changedAt)
+      ? () => {
+          let latest: number | null = null
+          for (let s of sources) {
+            let at = s.changedAt!()
+            // One source dropped (a blur): so was the chord.
+            if (at === null) return null
+            if (latest === null || at > latest) latest = at
+          }
+          return latest
+        }
+      : undefined,
     key: (event, down) => {
       for (let s of sources) s.key?.(event, down)
     },

package/src/pan.ts

@@ -108,7 +108,7 @@ export function createPan(options: PanOptions) {
           armed = null
           origin = { x: e.parentX, y: e.parentY }
           tracker.reset()
-          tracker.push(e.parentX, e.parentY)
+          if (!e.predicted) tracker.push(e.parentX, e.parentY, e.timeStamp)
           options.onPanStart?.()
         } else {
           // The arena is resolved against us; the drag belongs elsewhere.
@@ -117,7 +117,8 @@ export function createPan(options: PanOptions) {
         return
       }
       if (active === e.pointerId && origin) {
-        tracker.push(e.parentX, e.parentY)
+        // The pan follows a predicted position; its velocity does not.
+        if (!e.predicted) tracker.push(e.parentX, e.parentY, e.timeStamp)
         options.onPanMove?.(e.parentX - origin.x, e.parentY - origin.y)
         origin = { x: e.parentX, y: e.parentY }
       }
@@ -126,7 +127,7 @@ export function createPan(options: PanOptions) {
       if (active === e.pointerId) {
         // The up is not a sample: it sits where the last move left the
         // pointer, and its age is what tells a rest from a flick.
-        let velocity = flingVelocity(tracker.velocity())
+        let velocity = flingVelocity(tracker.velocity(e.timeStamp))
         reset()
         options.onPanEnd?.(velocity)
       } else if (armed === e.pointerId) {

package/src/renderer.ts

@@ -1,6 +1,6 @@
 // createErrorBoundary comes from signals, not solid-js: solid-js marks it
 // @internal (an app writes <Errored>, a renderer reaches for the primitive)
-// and strips it from its .d.ts, so the solid-js re-export types as any.
+// and leaves it out of its public types.
 import { createErrorBoundary, createRoot, onCleanup, NotReadyError, untrack } from "@solidjs/signals"
 import { createRenderer } from "@solidjs/universal"
 import type { Element } from "solid-js"
@@ -86,7 +86,7 @@ function flushDestroy(): void {
 function removeNode(parent: ProxyNode, node: ProxyNode): void {
   if (!node || !parent) return
 
-  // console.debug("[srt] removeNode", parent.id, node.id)
+  // console.debug("[sol] removeNode", parent.id, node.id)
 
   // Update JS tree references
   let index = parent.children.indexOf(node)
@@ -113,7 +113,7 @@ function removeNode(parent: ProxyNode, node: ProxyNode): void {
 // bookkeeping on the hot create/insert paths, orphans are derived from the
 // proxy map itself: parentless, not the window root, and not awaiting the
 // destroy sweep. window.ts runs the scan on a rendered frame every few
-// seconds; dev bundles only (srt always defines import.meta.env.DEV, so a
+// seconds; dev bundles only (sol always defines import.meta.env.DEV, so a
 // production bundle folds the check into a constant early return).
 const SENTINEL_INTERVAL_MS = 5000
 let sentinelDue = 0
@@ -208,7 +208,7 @@ function routeFor(name: string): number {
 function applyProp<T>(node: ProxyNode, name: string, value: T): void {
   if (!node) return
 
-  // console.debug("[srt] applyProp", node.id, name, value)
+  // console.debug("[sol] applyProp", node.id, name, value)
 
   switch (routeFor(name)) {
     case ROUTE_EVENT:
@@ -234,7 +234,7 @@ let renderer = createRenderer<ProxyNode>({
   createElement: (elementType: string, props?: Record<string, any>): ProxyNode => {
     let proxy = createProxyNode(elementType)
 
-    // console.debug("[srt] createElement", proxy.id, elementType)
+    // console.debug("[sol] createElement", proxy.id, elementType)
 
     if (elementType === "window") tree.createRoot(proxy.id)
     else tree.createNode(proxy.id, elementType)
@@ -257,20 +257,20 @@ let renderer = createRenderer<ProxyNode>({
   // no element form of its own (the DOM's "#text" node name).
   createTextNode: (value: string): ProxyNode => {
     let proxy = createProxyNode("#text")
-    // console.debug("[srt] createTextNode", proxy.id, value)
+    // console.debug("[sol] createTextNode", proxy.id, value)
     tree.createNode(proxy.id, "#text")
     tree.setProperty(proxy.id, "text", "" + value)
     return proxy
   },
 
   replaceText: (node: ProxyNode, value: string): void => {
-    // console.debug("[srt] replaceText", node.id, value)
+    // console.debug("[sol] replaceText", node.id, value)
     tree.setProperty(node.id, "text", "" + value)
   },
 
   isTextNode: (node: ProxyNode): boolean => node?.elementType === "#text",
   setProperty: <T>(node: ProxyNode, name: string, value: T): void => {
-    // console.debug("[srt] setProperty", node.id, name, value)
+    // console.debug("[sol] setProperty", node.id, name, value)
     applyProp(node, name, value)
   },
 
@@ -294,7 +294,7 @@ let renderer = createRenderer<ProxyNode>({
     pendingDestroy.delete(node.id)
 
     if (parent) {
-      // console.debug("[srt] insertNode", parent.id, node.id, anchor?.id ?? "")
+      // console.debug("[sol] insertNode", parent.id, node.id, anchor?.id ?? "")
 
       // Native first: the tree refuses a laid-out element under a d-* parent
       // (it throws, naming both tags), and the mirror must not record a child

package/src/runtime-modules.d.ts

@@ -1,4 +1,4 @@
-// Lattice runner builtin modules (the "srt:*" surface). These are ambient
+// Lattice runner builtin modules (the "sol:*" surface). These are ambient
 // module declarations, so they live in this global-script .d.ts (no top-level
 // import/export) rather than in types.d.ts: an ambient `declare module` only
 // becomes globally visible to consumers from a non-module declaration file.
@@ -51,7 +51,7 @@ declare module "*.glb" {
   const bytes: Uint8Array
   export default bytes
 }
-declare module "*.srtm" {
+declare module "*.sol3m" {
   const bytes: Uint8Array
   export default bytes
 }
@@ -61,14 +61,15 @@ declare module "*.srtm" {
 // stream ("pointerMove"/"pointerDown"/... consumed by window.ts),
 // "pointerFrame" (the move-batch terminator: fires after all of a frame's
 // pointer moves have dispatched, every pointer the same age - multi-pointer
-// recognizers measure there), and "render" (the per-frame signal).
-declare module "srt:events" {
+// recognizers measure there; its `timeStamp` is theirs), and "render" (the
+// per-frame signal).
+declare module "sol:events" {
   export function on(event: string, callback: (data: any) => void): () => void
   export function once(event: string, callback: (data: any) => void): () => void
 }
 
 // The running application's own surface (lattice), present in every build.
-declare module "srt:app" {
+declare module "sol:app" {
   /**
    * End the current app now, without running the quit hooks: back to the
    * player in a dev client, quit when standalone or at the player root (on
@@ -99,7 +100,7 @@ declare module "srt:app" {
 
 // Dev-server control surface (lattice). Present only in dev/go builds; in other
 // builds `available` is false and the functions are no-ops.
-declare module "srt:dev" {
+declare module "sol:dev" {
   export const available: boolean
   export const canDiscover: boolean
   export const recents: string[]
@@ -138,7 +139,7 @@ declare module "srt:dev" {
 // Installed-app management (lattice), the player's surface over the client's
 // version store. Present only in go/dev client builds; elsewhere `available`
 // is false, `list` returns [], and launch/remove are no-ops.
-declare module "srt:apps" {
+declare module "sol:apps" {
   export const available: boolean
   /**
    * An installed app: id, display name (the installed manifest's displayName,
@@ -232,6 +233,72 @@ declare module "srt:apps" {
 // submits the display list. To schedule a future frame instead, use
 // requestFrame() from "flux:rendertree". The tree-building surface itself is
 // "flux:rendertree" (from @solidrt/flux-types).
-declare module "srt:render" {
+declare module "sol:render" {
   export function renderFrame(): void
 }
+
+// The engine verbs of an app test (lattice, dev client only), which
+// @solidrt/test builds its surface on; tests import that, not this.
+// The verbs work only in an engine a test host built (`sol test`) and throw
+// anywhere else. App time there is frame / frameRate and nothing else: no
+// frame runs unless one is asked for.
+declare module "sol:test" {
+  /**
+   * Runs one frame: timers due by its time fire, then frame callbacks and
+   * the flush, then the draw if anything demanded one. Fulfills once the
+   * frame has run. One frame at a time: throws while the previous one is
+   * still pending.
+   */
+  export function frame(): Promise<void>
+  /** The frames per second this engine steps at (60 unless set). */
+  export function frameRate(): number
+  /** Another frame rate, a positive integer. Throws once a frame has run. */
+  export function setFrameRate(fps: number): void
+  /** App time as of the last frame, in milliseconds; 0 before the first. */
+  export function time(): number
+  /**
+   * Fulfills once the window's size has reached the engine, at once when
+   * it already has. No frame runs for it and no time passes: a mounted
+   * window builds its first frame on that size.
+   */
+  export function windowReady(): Promise<void>
+  /**
+   * Expands `events` (JSON text, the control API's `/input` event shape)
+   * into the steps that are sent and returns what passes before each:
+   * `[ms, frames]` per step, at least that much time and that many frames.
+   * Throws on an invalid event, before anything is sent. The steps are then
+   * sent with `inputStep`, in order.
+   */
+  export function inputPlan(events: string): [ms: number, frames: number][]
+  /**
+   * Sends step `index` of the current plan into the input pipeline: a
+   * down, an up, a key or a wheel is dispatched on arrival, ahead of the
+   * next frame; a move with that frame.
+   */
+  export function inputStep(index: number): void
+  /**
+   * Runs frames until the app is at rest: nothing in flight, no timer due,
+   * no frame demanded. Work in flight is waited for with no app time
+   * passing. Rejects once `maxMs` of app time have passed without rest,
+   * with what is left in the message.
+   */
+  export function settle(maxMs: number): Promise<void>
+  /**
+   * Delivers a link the way an OS-routed one arrives (the raw string, on
+   * the `link` event, ahead of the next frame). Returns whether anything
+   * listens for links.
+   */
+  export function link(link: string): boolean
+  /**
+   * Calls a debug command the app registered with `registerDebug`. `args`
+   * and the result are JSON text (null for no args). Throws on an unknown
+   * name, a throwing command and a result JSON cannot carry.
+   */
+  export function debug(name: string, args: string | null): string
+  /**
+   * The pixels a node's subtree paints: RGBA8, premultiplied, rows top to
+   * bottom, at the display scale. Drawn at once from the tree as it is; no
+   * frame runs and no app time passes.
+   */
+  export function capture(node: number): { width: number; height: number; data: Uint8Array }
+}

package/src/swipe.ts

@@ -80,8 +80,8 @@ export function createSwipe(options: SwipeOptions) {
   // The down's window position and the finger's window-px velocity, over
   // every event the wrapped pan sees.
   let down: { id: number; x: number; y: number } | null = null
-  // The lift's window position, set just before the pan's up runs.
-  let lift: { x: number; y: number } | null = null
+  // The lift's window position and time, set just before the pan's up runs.
+  let lift: { x: number; y: number; at: number } | null = null
   let finger = createVelocityTracker()
   let pan = createPan({
     get axis() {
@@ -92,7 +92,7 @@ export function createSwipe(options: SwipeOptions) {
     onPanEnd: velocity => {
       let direction: SwipeDirection | null = null
       if (down && lift) {
-        direction = classifySwipe(finger.velocity(), { dx: lift.x - down.x, dy: lift.y - down.y }, directions())
+        direction = classifySwipe(finger.velocity(lift.at), { dx: lift.x - down.x, dy: lift.y - down.y }, directions())
       }
       if (direction) options.onSwipe?.(direction, velocity)
       options.onSwipeEnd?.(velocity)
@@ -104,16 +104,16 @@ export function createSwipe(options: SwipeOptions) {
       if (down === null && (e.button == null || e.button === 0)) {
         down = { id: e.pointerId, x: e.clientX, y: e.clientY }
         finger.reset()
-        finger.push(e.clientX, e.clientY)
+        finger.push(e.clientX, e.clientY, e.timeStamp)
       }
       pan.handlers.onPointerDown(e)
     },
     onPointerMove: (e: PointerEvent) => {
-      if (down && down.id === e.pointerId) finger.push(e.clientX, e.clientY)
+      if (down && down.id === e.pointerId && !e.predicted) finger.push(e.clientX, e.clientY, e.timeStamp)
       pan.handlers.onPointerMove(e)
     },
     onPointerUp: (e: PointerEvent) => {
-      if (down && down.id === e.pointerId) lift = { x: e.clientX, y: e.clientY }
+      if (down && down.id === e.pointerId) lift = { x: e.clientX, y: e.clientY, at: e.timeStamp }
       pan.handlers.onPointerUp(e)
       if (down && down.id === e.pointerId) {
         down = null