@thunderclap-engine/engine 0.0.0-stage → 1.1.0

package/dist/input/magnify.d.ts

@@ -0,0 +1,177 @@
+/**
+ * Magnify: loupe and snap for small touch targets (the `Gestures` `magnify` option).
+ *
+ * A finger covers about 44 CSS px. When a game's targets are smaller than that, a finger can't
+ * see what it is aiming at or hit it reliably. With `magnify`, while one touch pointer is down
+ * `Gestures` reports an `aim` each tick:
+ *
+ * - the aim point is the finger, raised by `lift` CSS px while the finger drags, so the thing
+ *   being dragged and its target stay in sight above the fingertip;
+ * - `snap` (the game's) turns the aim point into an accepted target, usually the nearest one
+ *   within half a pitch (`snapToGrid`);
+ * - while the target pitch is below `below` CSS px a round loupe beside the finger shows the
+ *   area under the aim point, `zoom` times bigger, with the snapped target ringed.
+ *
+ * Mouse and pen never aim: they have a precise tip and hover. Everything here is noun-free.
+ */
+/** A target picked by `snap`: its centre and radius in game space. */
+export interface MagnifyTarget {
+    x: number;
+    y: number;
+    r: number;
+    /** Anything the game attaches (the cell it snapped to). */
+    data?: unknown;
+}
+export interface MagnifyOptions {
+    /** The loupe shows while the target pitch is below this many CSS px. Default 44. */
+    below?: number;
+    /**
+     * Loupe diameter, CSS px. Default 128. A function is read each tick, so the loupe can be
+     * smaller where targets are dense (it is rebuilt when the size changes).
+     */
+    size?: number | (() => number);
+    /** Loupe magnification. Default 2.5. */
+    zoom?: number;
+    /** CSS px the aim point sits above a dragging finger. Default 56. */
+    lift?: number;
+    /** The current target pitch in CSS px (a grid cell, a list row). */
+    pitch: () => number;
+    /** While false nothing is aimed (for example nothing is held). Default: always. */
+    when?: () => boolean;
+    /** The accepted target at a game-space aim point, or `null`. Default: no snapping. */
+    snap?: (x: number, y: number) => MagnifyTarget | null;
+    /** True where the loupe is useful (over the targets' area). Default: wherever `snap` finds one. */
+    over?: (x: number, y: number) => boolean;
+    /** Game space to client CSS px (the inverse of the pointer transform), for the loupe's ring. */
+    toClient?: (x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+    /** The canvas the loupe magnifies. Without one no loupe is drawn; `aim` is still reported. */
+    source?: HTMLCanvasElement;
+    /** Extra class names on the loupe element (`tc-loupe`). */
+    className?: string;
+    /** Where the loupe element goes. Default the source canvas's document body. */
+    parent?: HTMLElement;
+    /**
+     * Areas (client CSS px) the loupe must leave in sight while it shows `target`, for example
+     * the target and its neighbours (`keep`), areas it should leave in sight when it can
+     * (`spare`, for example labels; ranked below `keep` and the fingertip), and areas it should
+     * rather not cover (`avoid`, ranked below `spare`). With one, the loupe goes where
+     * `loupeClear` puts it; without, beside the finger (`loupeSpot`).
+     */
+    clear?: (target: MagnifyTarget | null, aim: {
+        x: number;
+        y: number;
+    }) => {
+        keep: Edges[];
+        spare?: Edges[];
+        avoid?: Edges[];
+    } | null;
+    /** Draw a thin leader from the loupe's rim to the snapped target (`Loupe` `leader`). */
+    leader?: boolean;
+}
+/** An axis-aligned rectangle by its edges (left, top, right, bottom), client CSS px. */
+export interface Edges {
+    l: number;
+    t: number;
+    r: number;
+    b: number;
+}
+/** One tick's aim (see `Gestures.aim`). */
+export interface Aim {
+    /** The aim point in game space (the finger, lifted while dragging). */
+    x: number;
+    y: number;
+    /** False when the aim point is outside the game rect. */
+    inside: boolean;
+    /** The aim point in client CSS px. */
+    client: {
+        x: number;
+        y: number;
+    };
+    /** The finger in client CSS px. */
+    finger: {
+        x: number;
+        y: number;
+    };
+    /** True while the finger drags (the aim is lifted). */
+    lifted: boolean;
+    /** The snapped target, or `null`. */
+    target: MagnifyTarget | null;
+    /** The loupe is wanted this tick (pitch below `below`, and over the targets). */
+    loupe: boolean;
+    /**
+     * True on the one tick after the finger lifted: the aim it lifted at (where a dragged thing
+     * lands). The loupe is hidden on that tick.
+     */
+    ended: boolean;
+    /** Where the loupe's centre goes, client CSS px (beside the finger, towards the screen's middle, on screen). */
+    at: {
+        x: number;
+        y: number;
+    };
+}
+export declare const MAGNIFY_DEFAULTS: {
+    readonly below: 44;
+    readonly size: 128;
+    readonly zoom: 2.5;
+    readonly lift: 56;
+};
+/** The loupe diameter `m` asks for now (CSS px). */
+export declare function magnifySize(m: Pick<MagnifyOptions, 'size'>): number;
+/** A square grid of cells: `cols × rows`, cell (i, j) spans `left + i·pitch` to `+ pitch`. */
+export interface SnapGrid {
+    left: number;
+    top: number;
+    pitch: number;
+    cols: number;
+    rows: number;
+}
+/**
+ * The accepted cell nearest a point, within half a pitch of its square (so a point just off the
+ * board still finds an edge cell, and a point on a refused cell steps to an accepted neighbour),
+ * or `null`. Distances are measured between the point and the cell centres, in pitches.
+ */
+export declare function snapToGrid(g: SnapGrid, x: number, y: number, ok?: (i: number, j: number) => boolean): {
+    x: number;
+    y: number;
+} | null;
+/**
+ * Where a loupe of diameter `size` goes for a finger at `finger` aiming at `aim` (client px) in
+ * a `view` of `width × height`: above the aim point and off to the side of the finger towards
+ * the middle of the screen, kept 4 px inside the view.
+ */
+export declare function loupeSpot(finger: {
+    x: number;
+    y: number;
+}, aim: {
+    x: number;
+    y: number;
+}, size: number, view: {
+    width: number;
+    height: number;
+}): {
+    x: number;
+    y: number;
+};
+/**
+ * Where a loupe of diameter `size` goes when it must leave `keep` in sight: the nearest spot to
+ * the aim point, 6 px clear of every `keep` rect and of the fingertip (a 44 px disc), its centre
+ * never below the finger's (the hand is there), kept 4 px inside the view. Among those spots it
+ * takes one that covers the fewest `spare` rects, then one that covers no `avoid` rect, then the
+ * nearest. With no spot clear of `keep` it falls back to `loupeSpot`.
+ */
+export declare function loupeClear(finger: {
+    x: number;
+    y: number;
+}, aim: {
+    x: number;
+    y: number;
+}, size: number, view: {
+    width: number;
+    height: number;
+}, keep: Edges[], avoid?: Edges[], spare?: Edges[]): {
+    x: number;
+    y: number;
+};

package/dist/input/magnify.js

@@ -0,0 +1,131 @@
+/**
+ * Magnify: loupe and snap for small touch targets (the `Gestures` `magnify` option).
+ *
+ * A finger covers about 44 CSS px. When a game's targets are smaller than that, a finger can't
+ * see what it is aiming at or hit it reliably. With `magnify`, while one touch pointer is down
+ * `Gestures` reports an `aim` each tick:
+ *
+ * - the aim point is the finger, raised by `lift` CSS px while the finger drags, so the thing
+ *   being dragged and its target stay in sight above the fingertip;
+ * - `snap` (the game's) turns the aim point into an accepted target, usually the nearest one
+ *   within half a pitch (`snapToGrid`);
+ * - while the target pitch is below `below` CSS px a round loupe beside the finger shows the
+ *   area under the aim point, `zoom` times bigger, with the snapped target ringed.
+ *
+ * Mouse and pen never aim: they have a precise tip and hover. Everything here is noun-free.
+ */
+export const MAGNIFY_DEFAULTS = { below: 44, size: 128, zoom: 2.5, lift: 56 };
+/** The loupe diameter `m` asks for now (CSS px). */
+export function magnifySize(m) {
+    const s = typeof m.size === 'function' ? m.size() : m.size;
+    return s ?? MAGNIFY_DEFAULTS.size;
+}
+/**
+ * The accepted cell nearest a point, within half a pitch of its square (so a point just off the
+ * board still finds an edge cell, and a point on a refused cell steps to an accepted neighbour),
+ * or `null`. Distances are measured between the point and the cell centres, in pitches.
+ */
+export function snapToGrid(g, x, y, ok = () => true) {
+    const fx = (x - g.left) / g.pitch;
+    const fy = (y - g.top) / g.pitch;
+    const cx = Math.floor(fx);
+    const cy = Math.floor(fy);
+    let best = null;
+    let bestD = Number.POSITIVE_INFINITY;
+    for (let j = cy - 1; j <= cy + 1; j++) {
+        for (let i = cx - 1; i <= cx + 1; i++) {
+            if (i < 0 || j < 0 || i >= g.cols || j >= g.rows)
+                continue;
+            // Distance from the point to the cell's square, in pitches (0 inside it).
+            const ox = Math.max(0, Math.abs(fx - (i + 0.5)) - 0.5);
+            const oy = Math.max(0, Math.abs(fy - (j + 0.5)) - 0.5);
+            if (ox > 0.5 || oy > 0.5 || !ok(i, j))
+                continue;
+            const d = Math.hypot(fx - (i + 0.5), fy - (j + 0.5));
+            if (d < bestD) {
+                bestD = d;
+                best = { x: i, y: j };
+            }
+        }
+    }
+    return best;
+}
+/**
+ * Where a loupe of diameter `size` goes for a finger at `finger` aiming at `aim` (client px) in
+ * a `view` of `width × height`: above the aim point and off to the side of the finger towards
+ * the middle of the screen, kept 4 px inside the view.
+ */
+export function loupeSpot(finger, aim, size, view) {
+    const half = size / 2;
+    const side = finger.x > view.width / 2 ? -1 : 1;
+    const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+    return {
+        x: clamp(finger.x + side * (half + 28), half + 4, view.width - half - 4),
+        y: clamp(aim.y - half * 0.6, half + 4, view.height - half - 4),
+    };
+}
+/**
+ * Where a loupe of diameter `size` goes when it must leave `keep` in sight: the nearest spot to
+ * the aim point, 6 px clear of every `keep` rect and of the fingertip (a 44 px disc), its centre
+ * never below the finger's (the hand is there), kept 4 px inside the view. Among those spots it
+ * takes one that covers the fewest `spare` rects, then one that covers no `avoid` rect, then the
+ * nearest. With no spot clear of `keep` it falls back to `loupeSpot`.
+ */
+export function loupeClear(finger, aim, size, view, keep, avoid = [], spare = []) {
+    const half = size / 2;
+    const gap = 6;
+    const inView = (x, y) => x >= half + 4 && x <= view.width - half - 4 && y >= half + 4 && y <= view.height - half - 4;
+    const hits = (x, y, q, pad) => {
+        const dx = Math.max(q.l - x, 0, x - q.r);
+        const dy = Math.max(q.t - y, 0, y - q.b);
+        return Math.hypot(dx, dy) < half + pad;
+    };
+    const clearOf = (x, y) => inView(x, y) &&
+        y <= finger.y &&
+        Math.hypot(x - finger.x, y - finger.y) >= half + 22 + gap &&
+        !keep.some((q) => hits(x, y, q, gap));
+    // Candidates: tangent to the kept area on each side and corner, slid along it, beside the
+    // finger, and (so a spot clear of the spared rects is found when there is one) a coarse grid
+    // over the view.
+    const box = keep.reduce((a, q) => ({
+        l: Math.min(a.l, q.l),
+        t: Math.min(a.t, q.t),
+        r: Math.max(a.r, q.r),
+        b: Math.max(a.b, q.b),
+    }), { l: aim.x, t: aim.y, r: aim.x, b: aim.y });
+    const xs = [box.l - half - gap, box.r + half + gap];
+    const ys = [box.t - half - gap, box.b + half + gap];
+    const cands = [loupeSpot(finger, aim, size, view)];
+    for (let k = -4; k <= 4; k++) {
+        const sx = (k * half) / 2;
+        for (const x of xs)
+            cands.push({ x, y: aim.y + sx });
+        for (const y of ys)
+            cands.push({ x: aim.x + sx, y });
+    }
+    if (spare.length > 0 && Number.isFinite(view.width) && Number.isFinite(view.height)) {
+        const step = Math.max(8, half / 4);
+        for (let y = half + 4; y <= view.height - half - 4; y += step)
+            for (let x = half + 4; x <= view.width - half - 4; x += step)
+                cands.push({ x, y });
+    }
+    const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+    let best = null;
+    let bestCost = Number.POSITIVE_INFINITY;
+    for (const c0 of cands) {
+        const c = {
+            x: clamp(c0.x, half + 4, view.width - half - 4),
+            y: clamp(c0.y, half + 4, view.height - half - 4),
+        };
+        if (!clearOf(c.x, c.y))
+            continue;
+        const cost = Math.hypot(c.x - aim.x, c.y - aim.y) +
+            (avoid.some((q) => hits(c.x, c.y, q, 0)) ? 1e4 : 0) +
+            spare.filter((q) => hits(c.x, c.y, q, 0)).length * 1e6;
+        if (cost < bestCost) {
+            bestCost = cost;
+            best = c;
+        }
+    }
+    return best ?? loupeSpot(finger, aim, size, view);
+}

package/dist/input/pointer-dispatch.d.ts

@@ -0,0 +1,138 @@
+/**
+ * The pointer dispatcher (ws/input-4): one set of DOM pointer listeners per target, one
+ * `pointerType` parse, one pointer capture, fanned out to every consumer in priority order.
+ * `Input.attach` builds one and hands it to its linked `Gestures`, `Look`, `PointerRouter` and
+ * touch zones; each of those attached on its own builds a private one. A consumer may `claim` a
+ * pointer: from then until it lifts the pointer reaches only its owner (and the consumers added
+ * with `seesClaimed`, the feed and the router's screen source), so two thumbs in two touch zones
+ * never pinch and an orbit drag never pans.
+ */
+import type { PointerTransform } from './types.js';
+/** The device a DOM pointer event came from (`pointerType`, anything unknown read as mouse). */
+export type PointerRecordDevice = 'mouse' | 'touch' | 'pen';
+/**
+ * One pointer event as the dispatcher delivers it. The dispatcher owns the object and reuses it:
+ * read it in the consumer, copy what you keep.
+ */
+export interface PointerRecord {
+    /** `PointerEvent.pointerId`. */
+    id: number;
+    device: PointerRecordDevice;
+    /** `PointerEvent.button` clamped to 0 or more (0 primary, 1 middle, 2 secondary). */
+    button: number;
+    /** `PointerEvent.isPrimary`. */
+    primary: boolean;
+    /**
+     * Feed coordinates: client CSS px when the dispatcher has a transform (the transform maps
+     * them), else px relative to the target's top-left.
+     */
+    x: number;
+    y: number;
+    /** Raw `clientX`/`clientY`. */
+    clientX: number;
+    clientY: number;
+    /**
+     * `Event.timeStamp`: when the event happened, ms on the `performance.now()` clock (not when the
+     * page got round to handling it). `eventTime` maps it onto another clock.
+     */
+    time: number;
+    /**
+     * How long ago the event happened, ms (ws/input-7): for a live event `performance.now() -
+     * time` (0 when the stamp is unusable, see `eventTime`); for one `Input.replayPointer`
+     * dispatches, the age the playback gave it (negative when the replay runs ahead of the
+     * recording). A consumer times the event as `now() - age` on its own clock.
+     */
+    age: number;
+    /** False when the transform maps the point outside the game (true without a transform). */
+    inside: boolean;
+    /**
+     * True for an event `Input.replayPointer` dispatched (ws/input-11): a replay's pointer, which
+     * `PointerRouter.mute` never drops. False for real DOM events.
+     */
+    synthetic: boolean;
+}
+/** Something the dispatcher delivers to. Every method is optional. */
+export interface PointerConsumer {
+    pointerDown?(p: PointerRecord): void;
+    pointerMove?(p: PointerRecord): void;
+    pointerUp?(p: PointerRecord): void;
+    /** The browser took the pointer (`pointercancel`). */
+    pointerCancel?(p: PointerRecord): void;
+    /** A hovering pointer left the target (`pointerleave`). */
+    pointerLeave?(p: PointerRecord): void;
+    /** Window blur or a hidden tab: drop every pointer. */
+    cancelAll?(): void;
+}
+export interface PointerDispatcherOptions {
+    /** The client → game-space mapping; sets how `PointerRecord.x`/`y` are made. `null` = none. */
+    transform?: PointerTransform | null;
+    /**
+     * When true a claimed pointer still hovers through the router's screen source (it produces
+     * hits and `hit`/`hitEnd` but no select). Default false: a claimed pointer is hidden from the
+     * router until it is released.
+     */
+    hoverWhileClaimed?: boolean;
+    /**
+     * The element whose box positions are measured against (ws/core-8): `PointerRecord.x`/`y`
+     * without a transform, touch zones and `Look`'s move zone. Default the target. A target that
+     * is not laid out (a replay sink outside the page) passes the element it stands in for, so a
+     * replayed touch stick lands where the recorded one did.
+     */
+    bounds?: Element;
+}
+/**
+ * When an event happened, on the clock `now` (ws/input-6). `timeStamp` is `Event.timeStamp`, on
+ * the `performance.now()` clock; its age (how long the page took to handle it) is subtracted
+ * from `now()`, so a fake or tick-driven clock still sees a late event as early. An unusable
+ * stamp (not finite, negative, or in the future) counts as handled at once: `now()`.
+ */
+export declare function eventTime(timeStamp: number, now: () => number): number;
+/** Consumer priorities `Input` uses, lowest first. A game's own consumer picks any number. */
+export declare const POINTER_PRIORITY: {
+    /** The `Input` feed (`pointerAt`, `buttonDown`, ...): sees everything, claimed or not. */
+    readonly feed: 0;
+    /** Touch zones claim their thumbs before anything else reads them. */
+    readonly zones: 10;
+    /** `Look`: an orbit drag claims its mouse or pen pointer. */
+    readonly look: 20;
+    readonly gestures: 30;
+    /** The router's `ScreenPointers`: sees claimed pointers but hides them from `poll`. */
+    readonly screen: 40;
+};
+export interface PointerDispatcher {
+    readonly target: HTMLElement;
+    /** The box positions are measured against: `PointerDispatcherOptions.bounds`, else the target's. */
+    bounds(): DOMRect;
+    /** `PointerDispatcherOptions.hoverWhileClaimed`; may be changed at any time. */
+    hoverWhileClaimed: boolean;
+    /**
+     * Register a consumer; lower priorities are delivered first, equal priorities in registration
+     * order. With `seesClaimed` the consumer receives records for claimed pointers too. Returns
+     * the remover.
+     */
+    add(consumer: PointerConsumer, priority?: number, seesClaimed?: boolean): () => void;
+    remove(consumer: PointerConsumer): void;
+    /**
+     * Claim pointer `id` for `owner`: until `release(id)`, the pointer lifts or is cancelled, its
+     * records reach only `owner` and the `seesClaimed` consumers. False (and no change) when
+     * another owner holds it. Claiming during delivery takes effect for the consumers after the
+     * claimant on the same event.
+     */
+    claim(id: number, owner: object): boolean;
+    release(id: number): void;
+    /** The owner of a claimed pointer, or `null`. */
+    owner(id: number): object | null;
+    claimed(id: number): boolean;
+    /**
+     * While not `null`, the `age` every record gets instead of the event's own (ws/input-7).
+     * `Input.replayPointer` sets it around one synthetic dispatch, so a replayed event keeps its
+     * recorded timing; nothing else should.
+     */
+    replayAge: number | null;
+    /** Replace the transform (`Input.setPointerTransform` does this). */
+    setTransform(fn: PointerTransform | null): void;
+    /** Remove the DOM listeners and every consumer and claim. */
+    destroy(): void;
+}
+/** Build a dispatcher on `target` (see `PointerDispatcher`). The listeners go on at once. */
+export declare function createPointerDispatcher(target: HTMLElement, opts?: PointerDispatcherOptions): PointerDispatcher;

package/dist/input/pointer-dispatch.js

@@ -0,0 +1,180 @@
+function wallNow() {
+    return typeof performance !== 'undefined' ? performance.now() : Date.now();
+}
+/**
+ * When an event happened, on the clock `now` (ws/input-6). `timeStamp` is `Event.timeStamp`, on
+ * the `performance.now()` clock; its age (how long the page took to handle it) is subtracted
+ * from `now()`, so a fake or tick-driven clock still sees a late event as early. An unusable
+ * stamp (not finite, negative, or in the future) counts as handled at once: `now()`.
+ */
+export function eventTime(timeStamp, now) {
+    return now() - stampAge(timeStamp);
+}
+/** `performance.now() - timeStamp`, or 0 for an unusable stamp (see `eventTime`). */
+function stampAge(timeStamp) {
+    const wall = wallNow();
+    return Number.isFinite(timeStamp) && timeStamp >= 0 && timeStamp <= wall ? wall - timeStamp : 0;
+}
+/** Consumer priorities `Input` uses, lowest first. A game's own consumer picks any number. */
+export const POINTER_PRIORITY = {
+    /** The `Input` feed (`pointerAt`, `buttonDown`, ...): sees everything, claimed or not. */
+    feed: 0,
+    /** Touch zones claim their thumbs before anything else reads them. */
+    zones: 10,
+    /** `Look`: an orbit drag claims its mouse or pen pointer. */
+    look: 20,
+    gestures: 30,
+    /** The router's `ScreenPointers`: sees claimed pointers but hides them from `poll`. */
+    screen: 40,
+};
+/** Build a dispatcher on `target` (see `PointerDispatcher`). The listeners go on at once. */
+export function createPointerDispatcher(target, opts = {}) {
+    const doc = target.ownerDocument;
+    const win = doc.defaultView ?? window;
+    const boundsEl = opts.bounds ?? target;
+    let transform = opts.transform ?? null;
+    const entries = [];
+    const claims = new Map();
+    const record = {
+        id: 0,
+        device: 'mouse',
+        button: 0,
+        primary: true,
+        x: 0,
+        y: 0,
+        clientX: 0,
+        clientY: 0,
+        time: 0,
+        age: 0,
+        inside: true,
+        synthetic: false,
+    };
+    let replayAge = null;
+    const fill = (e) => {
+        const r = record;
+        r.id = e.pointerId;
+        const type = e.pointerType;
+        r.device = type === 'touch' || type === 'pen' ? type : 'mouse';
+        r.button = Math.max(e.button, 0);
+        r.primary = e.isPrimary;
+        r.clientX = e.clientX;
+        r.clientY = e.clientY;
+        r.time = e.timeStamp;
+        r.age = replayAge ?? stampAge(e.timeStamp);
+        r.synthetic = replayAge !== null;
+        if (transform) {
+            r.x = e.clientX;
+            r.y = e.clientY;
+            r.inside = transform(e.clientX, e.clientY) !== null;
+        }
+        else {
+            const b = boundsEl.getBoundingClientRect();
+            r.x = e.clientX - b.left;
+            r.y = e.clientY - b.top;
+            r.inside = true;
+        }
+        return r;
+    };
+    const deliver = (method, r) => {
+        // Consumers may add or remove themselves while delivering; index by position.
+        for (let i = 0; i < entries.length; i++) {
+            const en = entries[i];
+            if (!en.seesClaimed) {
+                const owner = claims.get(r.id);
+                if (owner !== undefined && owner !== en.consumer)
+                    continue;
+            }
+            en.consumer[method]?.(r);
+        }
+    };
+    const onDown = (e) => {
+        deliver('pointerDown', fill(e));
+        try {
+            target.setPointerCapture(e.pointerId);
+        }
+        catch {
+            // Synthetic events have no active pointer.
+        }
+    };
+    const onMove = (e) => deliver('pointerMove', fill(e));
+    const onUp = (e) => {
+        deliver('pointerUp', fill(e));
+        claims.delete(e.pointerId);
+    };
+    const onCancel = (e) => {
+        deliver('pointerCancel', fill(e));
+        claims.delete(e.pointerId);
+    };
+    const onLeave = (e) => deliver('pointerLeave', fill(e));
+    const cancelAll = () => {
+        claims.clear();
+        for (let i = 0; i < entries.length; i++)
+            entries[i].consumer.cancelAll?.();
+    };
+    const onBlur = () => cancelAll();
+    const onVisibility = () => {
+        if (doc.visibilityState === 'hidden')
+            cancelAll();
+    };
+    target.addEventListener('pointerdown', onDown);
+    target.addEventListener('pointermove', onMove);
+    target.addEventListener('pointerup', onUp);
+    target.addEventListener('pointercancel', onCancel);
+    target.addEventListener('pointerleave', onLeave);
+    win.addEventListener('blur', onBlur);
+    doc.addEventListener('visibilitychange', onVisibility);
+    const remove = (consumer) => {
+        const i = entries.findIndex((en) => en.consumer === consumer);
+        if (i >= 0)
+            entries.splice(i, 1);
+        for (const [id, owner] of claims)
+            if (owner === consumer)
+                claims.delete(id);
+    };
+    return {
+        target,
+        bounds: () => boundsEl.getBoundingClientRect(),
+        hoverWhileClaimed: opts.hoverWhileClaimed ?? false,
+        get replayAge() {
+            return replayAge;
+        },
+        set replayAge(v) {
+            replayAge = v;
+        },
+        add(consumer, priority = 0, seesClaimed = false) {
+            remove(consumer);
+            let at = entries.length;
+            while (at > 0 && entries[at - 1].priority > priority)
+                at--;
+            entries.splice(at, 0, { consumer, priority, seesClaimed });
+            return () => remove(consumer);
+        },
+        remove,
+        claim(id, owner) {
+            const held = claims.get(id);
+            if (held !== undefined && held !== owner)
+                return false;
+            claims.set(id, owner);
+            return true;
+        },
+        release(id) {
+            claims.delete(id);
+        },
+        owner: (id) => claims.get(id) ?? null,
+        claimed: (id) => claims.has(id),
+        setTransform(fn) {
+            transform = fn;
+        },
+        destroy() {
+            target.removeEventListener('pointerdown', onDown);
+            target.removeEventListener('pointermove', onMove);
+            target.removeEventListener('pointerup', onUp);
+            target.removeEventListener('pointercancel', onCancel);
+            target.removeEventListener('pointerleave', onLeave);
+            win.removeEventListener('blur', onBlur);
+            doc.removeEventListener('visibilitychange', onVisibility);
+            entries.length = 0;
+            claims.clear();
+        },
+    };
+}