drawnui-react 0.1.0-preview.15 → 0.1.0-preview.17

package/dist/core/Canvas.js

@@ -1,5 +1,6 @@
 import { Super } from "./Super";
 import { SkiaAccessibilityManager } from "./Accessibility";
+import { HoverManager } from "./Hover";
 import { Colors, SKRect } from "./Types";
 import { ContextMenuEventArgs, GestureEventProcessingInfo, PointerData, SKPoint, SkiaGesturesParameters, TouchActionEventArgs, } from "./Gestures";
 /**
@@ -12,6 +13,11 @@ export class Canvas {
     Element;
     /** Points a pointer may travel between Down and Up and still count as a tap (AppoMobi TouchEffect default). */
     static TappedCancelMoveThresholdPoints = 16;
+    /**
+     * A press held this long without moving past TappedCancelMoveThresholdPoints is a LongPressing, at the press point
+     * (AppoMobi TouchEffect, DrawnUi.Rust LONG_PRESS_MS); its release sends no Tapped. A timer, no frames while waiting.
+     */
+    static LongPressTimeMs = 1500;
     BackgroundColor = Colors.Transparent;
     /** Accelerated = WebGL surface, Default = software. Read once at first frame. */
     RenderingMode = "Accelerated";
@@ -35,6 +41,8 @@ export class Canvas {
     WasDrawn;
     /** Registry + rate-limited snapshot of accessible controls, rendered by the DOM overlay (DrawnUi AccessibilityManager). */
     AccessibilityManager = new SkiaAccessibilityManager();
+    /** Mouse hover of the controls (drawnui-cross 6m): ReceivesHover / IsHovered / HoverChanged. */
+    Hover = new HoverManager();
     content;
     get Content() { return this.content; }
     set Content(value) {
@@ -45,6 +53,7 @@ export class Canvas {
             value.Parent = undefined;
             value._superview = this;
         }
+        this.Hover.RequestCheck();
         this.Update();
     }
     surface;
@@ -201,6 +210,7 @@ export class Canvas {
             root.Render({ Context: { Canvas: canvas, Surface: this.surface }, Destination: new SKRect(0, 0, w, h), Scale: scale });
         }
         this.AccessibilityManager.OnFrameEnd(this.RenderingScale, this.Element.width, this.Element.height, () => this.Update());
+        this.Hover.AfterFrame(this.content, this.activeTouchIds.size > 0);
         const now = performance.now();
         this.FrameTime = now - started;
         this.FrameIndex++;
@@ -237,17 +247,51 @@ export class Canvas {
     UnregisterAnimator(uid) { this.AnimatingControls.delete(uid); }
     /** Ticks every registered animator once; returns how many ran. */
     ExecuteAnimators(frameTimeNanos) {
-        let executed = 0;
+        let executed = 0, wake = Infinity;
         for (const a of [...this.AnimatingControls.values()]) {
             if (!a.Parent) {
                 this.AnimatingControls.delete(a.Uid);
                 continue;
             }
+            // the control or a parent is hidden: its animator pauses, no frames, and goes on from where it was when shown
+            if (a.Parent.HiddenInTree()) {
+                if (!a.IsPaused) {
+                    a.Pause();
+                    a.PausedWhileHidden = true;
+                }
+                continue;
+            }
+            if (a.PausedWhileHidden) {
+                a.PausedWhileHidden = false;
+                a.Resume();
+            }
+            if (a.IsPaused)
+                continue; // a paused animator neither ticks nor keeps frames coming (C# DrawnView)
+            if (a.SleepUntilNanos > frameTimeNanos) {
+                wake = Math.min(wake, a.SleepUntilNanos);
+                continue;
+            } // nothing changes yet
             a.TickFrame(frameTimeNanos);
             executed++;
+            if (a.SleepUntilNanos > frameTimeNanos)
+                wake = Math.min(wake, a.SleepUntilNanos);
         }
+        this.WakeAt(wake, frameTimeNanos);
         return executed;
     }
+    wakeTimer = 0;
+    wakeAtNanos = Infinity;
+    /** One timer for the earliest sleeping animator: the frame loop wakes then, no frames run in between. */
+    WakeAt(nanos, nowNanos) {
+        if (!isFinite(nanos))
+            return;
+        if (this.wakeTimer && this.wakeAtNanos <= nanos)
+            return;
+        if (this.wakeTimer)
+            clearTimeout(this.wakeTimer);
+        this.wakeAtNanos = nanos;
+        this.wakeTimer = window.setTimeout(() => { this.wakeTimer = 0; this.wakeAtNanos = Infinity; this.Update(); }, Math.max(0, (nanos - nowNanos) / 1_000_000));
+    }
     /** Frames drawn so far (SkiaBackdrop uses it to refresh once after a cached record). */
     FrameIndex = 0;
     /**
@@ -306,6 +350,10 @@ export class Canvas {
     }
     Dispose() {
         this.disposed = true;
+        if (this.wakeTimer) {
+            clearTimeout(this.wakeTimer);
+            this.wakeTimer = 0;
+        }
         this.Element.removeEventListener("webglcontextlost", this.onContextLost);
         this.Element.removeEventListener("webglcontextrestored", this.onContextRestored);
         this.Gestures = "Disabled";
@@ -344,10 +392,14 @@ export class Canvas {
         if (!type)
             return;
         if (type === "Moved" && !this.activeTouchIds.has(e.pointerId)) {
+            if (e.pointerType === "touch")
+                return; // touch never hovers
+            if (this.activeTouchIds.size === 0)
+                this.Hover.Move(this.content, e.offsetX * this.RenderingScale, e.offsetY * this.RenderingScale);
             if (e.pointerType === "mouse")
-                this.UpdateCursor(e.offsetX, e.offsetY);
+                this.UpdateCursor();
             return;
-        } // hover not ported (TouchActionResult.Pointer)
+        }
         if ((type === "Released" || type === "Cancelled") && !this.activeTouchIds.has(e.pointerId))
             return; // Up of a pointer that never pressed here
         // Capture so Up outside the element still arrives; throws for synthetic events (tests) — harmless.
@@ -377,6 +429,9 @@ export class Canvas {
             this.UpdateTouchAction();
         }
     };
+    /** The mouse left the canvas: hover ends at once, also while content moves. */
+    onPointerLeave = (e) => { if (e.pointerType !== "touch")
+        this.Hover.Leave(); };
     preventTouch = (e) => e.preventDefault();
     /** Gestures="Enabled": touch / pen pointers whose Down a control used (see OnTouchAction). */
     claimedTouches = new Set();
@@ -402,23 +457,19 @@ export class Canvas {
     cursorPointer = false;
     /**
      * DrawnUi.Blazor shows `cursor: pointer` over interactive controls through its overlay elements; here the overlay
-     * is pointer-events:none, so the mouse position is tested against the accessibility snapshot (the accessible
-     * controls' rects in points, already sorted and rate-limited), each hit control answering WantsPointerCursor
-     * (itself tappable, or a tappable span of a label), and the canvas element's cursor is switched only when the
-     * answer changes. Mouse moves only, no work without a mouse and none in the frame loop.
+     * is pointer-events:none, so the canvas decides from the hover hit path (Hover.Path: the controls under the mouse by
+     * the routing rules of ProcessGestures, so nothing below a popup that blocks gestures below): a control in the
+     * accessibility tree (it has a role) that answers WantsPointerCursor (itself tappable, or a tappable span of a label)
+     * shows the hand. A popup's close-on-background-tap wrapper has no role, so its backdrop shows none. The canvas
+     * element's cursor is switched only when the answer changes. Mouse moves only, none in the frame loop.
      */
-    UpdateCursor(x, y) {
+    UpdateCursor() {
         let hit = false;
-        const scale = this.RenderingScale;
-        for (const n of this.AccessibilityManager.Snapshot) {
-            if (x < n.Rect.Left || x >= n.Rect.Right || y < n.Rect.Top || y >= n.Rect.Bottom)
-                continue;
-            // the control decides (whole control, or a tappable span of a label); point in pixels relative to the control's
-            // origin, taken from the snapshot rect (already carries the scroll / cache offset; a rotated control gets its bbox)
-            if (n.Source.WantsPointerCursor((x - n.Rect.Left) * scale, (y - n.Rect.Top) * scale)) {
+        const path = this.Hover.Path, xs = this.Hover.PathX, ys = this.Hover.PathY;
+        for (let i = path.length - 1; i >= 0 && !hit; i--) {
+            const c = path[i];
+            if (c.IsAccessibilityElement && c.WantsPointerCursor(xs[i] - c.DrawingRect.Left, ys[i] - c.DrawingRect.Top))
                 hit = true;
-                break;
-            }
         }
         if (hit !== this.cursorPointer) {
             this.cursorPointer = hit;
@@ -519,13 +570,25 @@ export class Canvas {
         el.style.userSelect = "none";
         for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
             el.addEventListener(t, this.onPointer);
+        el.addEventListener("pointerleave", this.onPointerLeave);
         el.addEventListener("contextmenu", this.onContextMenu);
         el.addEventListener("wheel", this.onWheel, { passive: false });
-        if (this.gestures === "Lock")
+        if (this.gestures === "Lock") {
             el.addEventListener("touchmove", this.preventTouch, { passive: false });
+            // the canvas owns every touch (DrawnUi.Web applyGestureStyle, DrawnUi.Rust host): no iOS callout or text
+            // selection on a long press, and no rubber band / pull-down of the page starting on it
+            const st = el.style;
+            st.webkitUserSelect = "none";
+            st.webkitTouchCallout = "none";
+            this.pageOverscroll = [document.documentElement.style.overscrollBehavior, document.body.style.overscrollBehavior];
+            document.documentElement.style.overscrollBehavior = "none";
+            document.body.style.overscrollBehavior = "none";
+        }
         else if (this.gestures === "Enabled")
             el.addEventListener("touchmove", this.preventClaimedTouch, { passive: false });
     }
+    /** The page's own overscroll-behavior before Lock set it to none (html, body), put back on detach. */
+    pageOverscroll;
     DetachInput() {
         const el = this.Element;
         el.style.touchAction = "";
@@ -535,11 +598,22 @@ export class Canvas {
         el.style.userSelect = "";
         for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
             el.removeEventListener(t, this.onPointer);
+        el.removeEventListener("pointerleave", this.onPointerLeave);
         el.removeEventListener("contextmenu", this.onContextMenu);
         el.removeEventListener("wheel", this.onWheel);
         el.removeEventListener("touchmove", this.preventTouch);
         el.removeEventListener("touchmove", this.preventClaimedTouch);
+        if (this.pageOverscroll) {
+            const st = el.style;
+            st.webkitUserSelect = "";
+            st.webkitTouchCallout = "";
+            [document.documentElement.style.overscrollBehavior, document.body.style.overscrollBehavior] = this.pageOverscroll;
+            this.pageOverscroll = undefined;
+        }
         this.claimedTouches.clear();
+        for (const id of [...this.longPressTimers.keys()])
+            this.DisarmLongPress(id);
+        this.longPressed.clear();
         this.activeTouchIds.clear();
         this.pointerDownArgs.clear();
         this.previousTouchArgs.clear();
@@ -550,6 +624,7 @@ export class Canvas {
             return;
         const id = args.Id;
         if (args.Type === "Pressed") {
+            this.ArmLongPress(id, args);
             this.activeTouchIds.add(id);
             args.NumberOfTouches = this.activeTouchIds.size;
             args.StartingLocation = args.Location;
@@ -574,6 +649,9 @@ export class Canvas {
         const downArgs = this.pointerDownArgs.get(id);
         args.StartingLocation = downArgs ? downArgs.StartingLocation : args.Location;
         if (args.Type === "Moved") {
+            const threshold = Canvas.TappedCancelMoveThresholdPoints * Math.max(0.1, this.RenderingScale);
+            if (Math.abs(args.Distance.Total.X) >= threshold || Math.abs(args.Distance.Total.Y) >= threshold)
+                this.DisarmLongPress(id);
             if (args.Distance.Delta.X !== 0 || args.Distance.Delta.Y !== 0)
                 this.OnGestureEvent(args, "Panning");
             this.previousTouchArgs.set(id, args);
@@ -581,7 +659,9 @@ export class Canvas {
         }
         if (args.Type === "Released" || args.Type === "Cancelled") {
             args.IsInContact = args.NumberOfTouches > 1;
-            if (!args.IsInContact && downArgs && args.Type === "Released") {
+            const longPressed = this.longPressed.delete(id);
+            this.DisarmLongPress(id);
+            if (!args.IsInContact && downArgs && args.Type === "Released" && !longPressed) {
                 const threshold = Canvas.TappedCancelMoveThresholdPoints * Math.max(0.1, this.RenderingScale);
                 if (Math.abs(args.Distance.Total.X) < threshold && Math.abs(args.Distance.Total.Y) < threshold)
                     this.OnGestureEvent(args, "Tapped");
@@ -592,6 +672,30 @@ export class Canvas {
             this.activeTouchIds.delete(id);
         }
     }
+    longPressTimers = new Map();
+    longPressed = new Set();
+    /** The long press of a new press: due LongPressTimeMs later unless the pointer moves away or lets go. */
+    ArmLongPress(id, down) {
+        this.DisarmLongPress(id);
+        this.longPressed.delete(id);
+        this.longPressTimers.set(id, window.setTimeout(() => {
+            this.longPressTimers.delete(id);
+            if (!this.activeTouchIds.has(id))
+                return;
+            this.longPressed.add(id);
+            const args = new TouchActionEventArgs();
+            Object.assign(args, down);
+            args.Location = down.StartingLocation ?? down.Location;
+            this.OnGestureEvent(args, "LongPressing");
+        }, Canvas.LongPressTimeMs));
+    }
+    DisarmLongPress(id) {
+        const t = this.longPressTimers.get(id);
+        if (t) {
+            clearTimeout(t);
+            this.longPressTimers.delete(id);
+        }
+    }
     OnGestureEvent(args, result) {
         this.pendingGestures.push(SkiaGesturesParameters.Create(result, args));
         this.Update();
@@ -620,21 +724,30 @@ export class Canvas {
     /** Entry into the control tree, same shape as DrawnUi Canvas.ProcessGestures. */
     ProcessGestures(root, args) {
         const info = () => new GestureEventProcessingInfo(args.Event.Location, SKPoint.Empty, SKPoint.Empty, null);
+        // the wheel goes to the press owner only while a press is held; between presses it goes by position, and it
+        // never makes an owner: a wheel over a second scroll moves that one, not the last one the wheel moved
+        // (DrawnUi.Rust input_router "the wheel goes to the owner of the press first"; C# keeps the last wheel consumer)
+        const wheel = args.Type === "Wheel";
         if (args.Type === "Down")
             this.gestureOwner = null;
-        else if (this.gestureOwner && Canvas.IsSavedGesture(args.Type)) {
+        else if (this.gestureOwner && Canvas.IsSavedGesture(args.Type) && (!wheel || this.activeTouchIds.size > 0)) {
             const owner = this.gestureOwner;
             const alive = !!owner.Superview && owner.IsVisible && !owner.InputTransparent;
             const consumed = alive ? owner.OnSkiaGestureEvent(args, info()) : null;
             if (consumed) {
                 // it still wants the gesture: nobody else sees this one (C# skips the tree pass for a saved gesture)
-                this.gestureOwner = args.Type === "Up" ? null : consumed;
+                if (!wheel)
+                    this.gestureOwner = args.Type === "Up" ? null : consumed;
                 return consumed;
             }
-            this.gestureOwner = null; // it let go (a button whose press turned into a pan): route normally again
+            // it let go (a button whose press turned into a pan): route normally again; a wheel it does not use goes by
+            // position and leaves it the press
+            if (!wheel)
+                this.gestureOwner = null;
         }
         const consumed = root.ProcessGestures(args, info());
-        this.gestureOwner = consumed && args.Type !== "Up" ? consumed : null;
+        if (!wheel)
+            this.gestureOwner = consumed && args.Type !== "Up" ? consumed : null;
         return consumed;
     }
 }

package/dist/core/Easing.d.ts

@@ -1,4 +1,4 @@
-/** Mirrors MAUI Easing (subset): Ease(t) with t in 0..1. */
+/** Mirrors MAUI Easing: Ease(t) with t in 0..1 (Spring* leave 0..1 on the way). */
 export declare class Easing {
     private readonly fn;
     constructor(fn: (x: number) => number);
@@ -9,5 +9,16 @@ export declare class Easing {
     static readonly CubicInOut: Easing;
     static readonly SinOut: Easing;
     static readonly SinIn: Easing;
+    /** Half a cosine: slow at both ends. */
+    static readonly SinInOut: Easing;
+    /** Leaps to the end, bounces three times and settles. */
+    static readonly BounceOut: Easing;
+    /** Bounces three times, then leaps to the end. */
+    static readonly BounceIn: Easing;
+    /** Moves away first, then leaps to the end. */
+    static readonly SpringIn: Easing;
+    /** Goes a little past the end and comes back. */
+    static readonly SpringOut: Easing;
+    private static Bounce;
     static readonly Default: Easing;
 }

package/dist/core/Easing.js

@@ -1,4 +1,4 @@
-/** Mirrors MAUI Easing (subset): Ease(t) with t in 0..1. */
+/** Mirrors MAUI Easing: Ease(t) with t in 0..1 (Spring* leave 0..1 on the way). */
 export class Easing {
     fn;
     constructor(fn) {
@@ -11,5 +11,29 @@ export class Easing {
     static CubicInOut = new Easing((x) => (x < 0.5 ? 4 * x ** 3 : (x - 1) * (2 * x - 2) ** 2 + 1));
     static SinOut = new Easing((x) => Math.sin((x * Math.PI) / 2));
     static SinIn = new Easing((x) => 1 - Math.cos((x * Math.PI) / 2));
+    /** Half a cosine: slow at both ends. */
+    static SinInOut = new Easing((x) => -Math.cos(Math.PI * x) / 2 + 0.5);
+    /** Leaps to the end, bounces three times and settles. */
+    static BounceOut = new Easing(Easing.Bounce);
+    /** Bounces three times, then leaps to the end. */
+    static BounceIn = new Easing((x) => 1 - Easing.Bounce(1 - x));
+    /** Moves away first, then leaps to the end. */
+    static SpringIn = new Easing((x) => x * x * ((1.70158 + 1) * x - 1.70158));
+    /** Goes a little past the end and comes back. */
+    static SpringOut = new Easing((x) => (x - 1) * (x - 1) * ((1.70158 + 1) * (x - 1) + 1.70158) + 1);
+    static Bounce(p) {
+        if (p < 1 / 2.75)
+            return 7.5625 * p * p;
+        if (p < 2 / 2.75) {
+            p -= 1.5 / 2.75;
+            return 7.5625 * p * p + 0.75;
+        }
+        if (p < 2.5 / 2.75) {
+            p -= 2.25 / 2.75;
+            return 7.5625 * p * p + 0.9375;
+        }
+        p -= 2.625 / 2.75;
+        return 7.5625 * p * p + 0.984375;
+    }
     static Default = Easing.CubicInOut;
 }

package/dist/core/Gestures.d.ts

@@ -9,7 +9,7 @@ export declare class SKPoint {
 }
 /** Raw platform action (subset of TouchActionType). */
 export type TouchActionType = "Pressed" | "Moved" | "Released" | "Cancelled" | "Wheel" | "Pointer";
-/** Recognized gesture (TouchActionResult). LongPressing/Pointer/Touch declared for parity, not produced yet. */
+/** Recognized gesture (TouchActionResult). LongPressing after Canvas.LongPressTimeMs held still; Pointer / Touch declared for parity, not produced. */
 export type TouchActionResult = "Touch" | "Down" | "Up" | "Tapped" | "LongPressing" | "Panning" | "Wheel" | "Pointer";
 export type GesturesMode = "Disabled" | "Enabled" | "Lock";
 export type LockTouch = "Disabled" | "Enabled" | "PassNone" | "PassTap" | "PassTapAndLongPress";
@@ -21,6 +21,27 @@ export declare class DistanceInfo {
     Total: SKPoint;
     Velocity: SKPoint;
 }
+/**
+ * The last positions of a press with their times (DrawnUi.Rust gestures `Trail`, 6d525f7). Measured only against the
+ * previous move, irregular delivery made the velocity worthless: moves handled in one burst (queued pointer events
+ * handed over back to back by a busy main thread, WSLg pairs 0.01 ms apart) gave millions of px/s and every fling at
+ * the limit. Moves under BurstMs apart are one position; a move's velocity is its displacement over the last WindowMs,
+ * the earlier position interpolated; when the previous move is already that old, its own velocity exactly (evenly
+ * spaced input at 60 Hz measures as before).
+ */
+export declare class VelocityTrail {
+    /** A move's velocity is its displacement over this much time. */
+    static readonly WindowMs = 16;
+    /** Below this since the press no velocity is measured yet: the first moves of a burst. */
+    static readonly MinMs = 4;
+    /** Moves closer than this came in one burst: one position, at the burst's first time. */
+    static readonly BurstMs = 1;
+    private static readonly Capacity;
+    private readonly points;
+    Push(x: number, y: number, t: number): void;
+    /** The velocity at (x, y) at time t (ms), pixels per second; `fallback` right after the press. */
+    Velocity(x: number, y: number, t: number, fallback: SKPoint): SKPoint;
+}
 /** AppoMobi.Gestures MouseButton: which button pressed / released (DOM button 0..4). */
 export type MouseButton = "Left" | "Middle" | "Right" | "XButton1" | "XButton2" | "Extended";
 export type PointerDeviceType = "Mouse" | "Touch" | "Pen";
@@ -49,6 +70,8 @@ export declare class TouchActionEventArgs {
     Timestamp: number;
     /** ms since the previous event of the same pointer. */
     DeltaTimeMs: number;
+    /** The press's recent positions the velocity is measured over, carried from event to event of one pointer. */
+    Trail?: VelocityTrail;
     /**
      * Mouse wheel: Delta > 0 = wheel down / right (browser sign). IsHorizontal: the event is along the X axis (a tilting
      * wheel, the sideways part of a two-finger touchpad swipe), as C# WheelEventArgs.IsHorizontal.

package/dist/core/Gestures.js

@@ -18,6 +18,67 @@ export class DistanceInfo {
     Total = SKPoint.Empty;
     Velocity = SKPoint.Empty;
 }
+/**
+ * The last positions of a press with their times (DrawnUi.Rust gestures `Trail`, 6d525f7). Measured only against the
+ * previous move, irregular delivery made the velocity worthless: moves handled in one burst (queued pointer events
+ * handed over back to back by a busy main thread, WSLg pairs 0.01 ms apart) gave millions of px/s and every fling at
+ * the limit. Moves under BurstMs apart are one position; a move's velocity is its displacement over the last WindowMs,
+ * the earlier position interpolated; when the previous move is already that old, its own velocity exactly (evenly
+ * spaced input at 60 Hz measures as before).
+ */
+export class VelocityTrail {
+    /** A move's velocity is its displacement over this much time. */
+    static WindowMs = 16;
+    /** Below this since the press no velocity is measured yet: the first moves of a burst. */
+    static MinMs = 4;
+    /** Moves closer than this came in one burst: one position, at the burst's first time. */
+    static BurstMs = 1;
+    static Capacity = 16;
+    points = [];
+    Push(x, y, t) {
+        const last = this.points[this.points.length - 1];
+        if (last && t - last.T < VelocityTrail.BurstMs) {
+            last.X = x;
+            last.Y = y;
+            return;
+        }
+        if (this.points.length === VelocityTrail.Capacity)
+            this.points.shift();
+        this.points.push({ X: x, Y: y, T: t });
+    }
+    /** The velocity at (x, y) at time t (ms), pixels per second; `fallback` right after the press. */
+    Velocity(x, y, t, fallback) {
+        let n = this.points.length;
+        // a move in the burst of the last position measures from the positions before it
+        if (n > 0 && t - this.points[n - 1].T < VelocityTrail.BurstMs)
+            n--;
+        if (n === 0)
+            return fallback;
+        const since = t - this.points[0].T;
+        if (since < VelocityTrail.MinMs)
+            return fallback;
+        const window = Math.min(VelocityTrail.WindowMs, since), at = t - window;
+        const last = this.points[n - 1];
+        if (last.T <= at) {
+            const secs = (t - last.T) / 1000;
+            return new SKPoint((x - last.X) / secs, (y - last.Y) / secs);
+        }
+        // the position at `at`: between the two positions around it (the current one included)
+        let fromX = this.points[0].X, fromY = this.points[0].Y, prev = this.points[0];
+        for (let i = 1; i <= n; i++) {
+            const p = i < n ? this.points[i] : { X: x, Y: y, T: t };
+            if (p.T >= at) {
+                const share = p.T - prev.T < 1e-6 ? 1 : (at - prev.T) / (p.T - prev.T);
+                fromX = prev.X + (p.X - prev.X) * share;
+                fromY = prev.Y + (p.Y - prev.Y) * share;
+                break;
+            }
+            prev = p;
+        }
+        const secs = window / 1000;
+        return new SKPoint((x - fromX) / secs, (y - fromY) / secs);
+    }
+}
 /** AppoMobi.Gestures PointerData: the device and button behind a Down / Up / Tapped (every button is delivered). */
 export class PointerData {
     Button = "Left";
@@ -43,6 +104,8 @@ export class TouchActionEventArgs {
     Timestamp = performance.now();
     /** ms since the previous event of the same pointer. */
     DeltaTimeMs = 0;
+    /** The press's recent positions the velocity is measured over, carried from event to event of one pointer. */
+    Trail;
     /**
      * Mouse wheel: Delta > 0 = wheel down / right (browser sign). IsHorizontal: the event is along the X axis (a tilting
      * wheel, the sideways part of a two-finger touchpad swipe), as C# WheelEventArgs.IsHorizontal.
@@ -68,8 +131,18 @@ export class TouchActionEventArgs {
         d.End = released ? previous.Location : current.Location;
         d.Delta = released ? SKPoint.Empty : current.Location.Subtract(previous.Location);
         d.Total = previous.Distance.Total.Add(d.Delta);
-        const secs = current.DeltaTimeMs / 1000;
-        d.Velocity = secs > 0 && !released ? new SKPoint(d.Delta.X / secs, d.Delta.Y / secs) : previous.Distance.Velocity;
+        if (released)
+            d.Velocity = previous.Distance.Velocity;
+        else {
+            let trail = previous.Trail;
+            if (!trail) {
+                trail = new VelocityTrail();
+                trail.Push(previous.Location.X, previous.Location.Y, previous.Timestamp);
+            }
+            d.Velocity = trail.Velocity(current.Location.X, current.Location.Y, current.Timestamp, previous.Distance.Velocity);
+            trail.Push(current.Location.X, current.Location.Y, current.Timestamp);
+            current.Trail = trail;
+        }
         current.Distance = d;
     }
 }

package/dist/core/Hover.d.ts

@@ -0,0 +1,47 @@
+import type { SkiaControl } from "./SkiaControl";
+/**
+ * DrawnUI hover (drawnui-cross 6m, C# DrawnView ReportHover / CommitHover): every control under the mouse that takes
+ * hover (`ReceivesHover`) is hovered, a card and the button inside it alike, as CSS :hover. Decided from the hit path
+ * of one pointer position, by the routing rules of ProcessGestures (visible, not InputTransparent, inside, children
+ * not locked, nothing below a control that blocks gestures below).
+ * While content moves under the pointer (a scroll glide, fling or pan, a carousel or drawer transition) hover is not
+ * tracked and what was hovered stays; one check at the last pointer position follows when it stops, and after
+ * controls are added or removed, a cell is rebound, a hovered control is hidden or a scroll jumps. Leaving the canvas
+ * clears hover at once. Touch never hovers. No allocation on frames where nothing changes.
+ */
+export declare class HoverManager {
+    /** The hovered controls, root first. */
+    readonly Hovered: SkiaControl[];
+    private readonly next;
+    /** The controls under the pointer at the last hit test, root first, and the pointer in each one's own space. */
+    readonly Path: SkiaControl[];
+    readonly PathX: number[];
+    readonly PathY: number[];
+    private readonly movers;
+    private hasPointer;
+    private x;
+    private y;
+    private paused;
+    private check;
+    /**
+     * The mouse (or a pen in range) moved to (x, y), canvas pixels, nothing pressed. The hit path is taken also while
+     * hover waits (the cursor follows it), hover changes only when nothing moves.
+     */
+    Move(root: SkiaControl | undefined, x: number, y: number): void;
+    /** Fills Path with the controls under the pointer by the routing rules of ProcessGestures. */
+    private HitTest;
+    /** The pointer left the canvas: nothing is hovered, also while content moves. */
+    Leave(): void;
+    /** The controls under a still pointer may have changed: checked once at the end of the frame. */
+    RequestCheck(): void;
+    /** A control that moves its content (MovesContent) while drawn: hover waits while any of them moves. */
+    RegisterMover(control: SkiaControl): void;
+    /** End of a frame: pause while content moves, else run a pending check (at most one a frame, none while pressed). */
+    AfterFrame(root: SkiaControl | undefined, pressed: boolean): void;
+    private static Shown;
+    /**
+     * The hovered set becomes the controls of the hit path that take hover (`fromPath`), or none: the ones that left get
+     * HoverChanged(false), then the new ones (true).
+     */
+    private Apply;
+}