@wells-nelson/interactions 0.0.0-stage → 0.0.1

package/dist/account/SyncStatusCard.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { Button, Icon } from '@wells-nelson/displays';
+	import { capitalize, type AccountActions, type CloudStatus, type Nouns } from './types.js';
+
+	/** Signed-in summary: who, connection, last sync, what's waiting to upload, force re-sync. */
+	let {
+		cloud,
+		account,
+		nouns,
+		pending
+	}: {
+		cloud: CloudStatus;
+		account: Pick<AccountActions, 'forceResync'>;
+		nouns: Nouns;
+		/** Containers with unsynced changes, already named by the app. */
+		pending: { id: string; name: string }[];
+	} = $props();
+
+	let resyncing = $state(false);
+	const user = $derived(cloud.user);
+	const meta = $derived((user?.user_metadata ?? {}) as Record<string, string | undefined>);
+	const displayName = $derived(meta.full_name ?? meta.name ?? user?.email);
+	const lastSync = $derived(cloud.lastSync ? new Date(cloud.lastSync).toLocaleString() : 'Not yet');
+
+	async function resync() {
+		resyncing = true;
+		try {
+			await account.forceResync();
+		} finally {
+			setTimeout(() => (resyncing = false), 600);
+		}
+	}
+</script>
+
+<section class="card section">
+	<div class="who">
+		{#if meta.avatar_url}
+			<img src={meta.avatar_url} alt="" referrerpolicy="no-referrer" />
+		{/if}
+		<div>
+			<div class="name">{displayName}</div>
+			<div class="muted small">{user?.email}</div>
+		</div>
+	</div>
+</section>
+
+<section class="card section">
+	<h2>Sync</h2>
+	<dl class="status">
+		<dt>Connection</dt>
+		<dd>{cloud.online ? (cloud.active ? 'Online · syncing…' : 'Online') : 'Offline'}</dd>
+		<dt>Last synced</dt>
+		<dd>{lastSync}</dd>
+	</dl>
+	{#if pending.length > 0}
+		<div>
+			<p class="small"><strong>{capitalize(nouns.plural)} with changes waiting to sync</strong></p>
+			<ul class="pending">
+				{#each pending as p (p.id)}
+					<li><Icon name="cloud-pending" size={16} /> {p.name}</li>
+				{/each}
+			</ul>
+		</div>
+	{:else}
+		<p class="muted small">Everything is synced.</p>
+	{/if}
+	{#if cloud.error}<p class="error small">Last sync error: {cloud.error}</p>{/if}
+	<Button icon="refresh" onclick={resync} disabled={!cloud.online || resyncing}>
+		{resyncing ? 'Syncing…' : 'Force re-sync'}
+	</Button>
+</section>
+
+<style>
+	.section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1rem;
+		margin-bottom: 1rem;
+	}
+	.section p {
+		margin: 0;
+		line-height: 1.5;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.05rem;
+	}
+	.small {
+		font-size: 0.9rem;
+	}
+	.who {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+	.who img {
+		width: 3rem;
+		height: 3rem;
+		border-radius: 50%;
+	}
+	.name {
+		font-weight: 700;
+		font-size: 1.1rem;
+	}
+	.status {
+		display: grid;
+		grid-template-columns: max-content 1fr;
+		gap: 0.3rem 1rem;
+		margin: 0;
+	}
+	dt {
+		color: var(--muted);
+	}
+	dd {
+		margin: 0;
+	}
+	.pending {
+		list-style: none;
+		margin: 0.4rem 0 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+	.pending li {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+	}
+	.error {
+		color: var(--danger);
+	}
+</style>

package/dist/account/SyncStatusCard.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type AccountActions, type CloudStatus, type Nouns } from './types.js';
+type $$ComponentProps = {
+    cloud: CloudStatus;
+    account: Pick<AccountActions, 'forceResync'>;
+    nouns: Nouns;
+    /** Containers with unsynced changes, already named by the app. */
+    pending: {
+        id: string;
+        name: string;
+    }[];
+};
+declare const SyncStatusCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type SyncStatusCard = ReturnType<typeof SyncStatusCard>;
+export default SyncStatusCard;

package/dist/account/index.d.ts

@@ -0,0 +1,8 @@
+export { default as AccountPanel } from './AccountPanel.svelte';
+export { default as ContainerEditModal } from './ContainerEditModal.svelte';
+export { default as LocalItemsPrompt } from './LocalItemsPrompt.svelte';
+export { default as ShareModal } from './ShareModal.svelte';
+export { default as SignInCard } from './SignInCard.svelte';
+export { default as SignOutCard } from './SignOutCard.svelte';
+export { default as SyncStatusCard } from './SyncStatusCard.svelte';
+export { EMAIL_PATTERN, ROLE_OPTIONS, capitalize, type AccountActions, type AccountUser, type CloudStatus, type ContainerLocation, type Member, type MembersApi, type Nouns, type Role } from './types.js';

package/dist/account/index.js

@@ -0,0 +1,8 @@
+export { default as AccountPanel } from './AccountPanel.svelte';
+export { default as ContainerEditModal } from './ContainerEditModal.svelte';
+export { default as LocalItemsPrompt } from './LocalItemsPrompt.svelte';
+export { default as ShareModal } from './ShareModal.svelte';
+export { default as SignInCard } from './SignInCard.svelte';
+export { default as SignOutCard } from './SignOutCard.svelte';
+export { default as SyncStatusCard } from './SyncStatusCard.svelte';
+export { EMAIL_PATTERN, ROLE_OPTIONS, capitalize } from './types.js';

package/dist/account/types.d.ts

@@ -0,0 +1,64 @@
+/**
+ * What the account and sharing components need from the app's sync layer. These are plain
+ * interfaces so this package has no storage dependency; `@wells-nelson/data-storage`'s
+ * `CloudSync` and members API satisfy them as they are.
+ */
+export type Role = 'viewer' | 'editor' | 'owner';
+/** Where a container (project, list…) lives: only on this device, or synced to the cloud. */
+export type ContainerLocation = 'local' | 'cloud';
+/** Lowercase nouns for the app's container, e.g. `{ singular: 'project', plural: 'projects' }`. */
+export interface Nouns {
+    singular: string;
+    plural: string;
+}
+export interface AccountUser {
+    email?: string;
+    user_metadata?: Record<string, unknown>;
+}
+/** Read-only sync status. */
+export interface CloudStatus {
+    /** False when the app runs local-only (no Supabase settings). */
+    readonly configured: boolean;
+    readonly user: AccountUser | null;
+    /** The signed-in email, lowercased ('' when signed out). */
+    readonly email: string;
+    readonly online: boolean;
+    /** A replication is transferring right now. */
+    readonly active: boolean;
+    /** Supabase dropped the session on its own; data is kept until the user signs in again. */
+    readonly sessionExpired: boolean;
+    readonly error: string | null;
+    readonly lastSync: number | null;
+    readonly hasAnyPending: boolean;
+    /** Containers with local changes that haven't reached the cloud. */
+    readonly pendingIds: string[];
+    hasPending(containerId: string): boolean;
+}
+export interface AccountActions {
+    signInWithGoogle(redirectTo: string): Promise<void>;
+    /** Emails a magic sign-in link. */
+    signInWithEmail(email: string, redirectTo: string): Promise<void>;
+    signOut(): Promise<void>;
+    forceResync(): Promise<void>;
+}
+export interface Member {
+    id: string;
+    email: string;
+    /** True when the email belongs to a registered user; false means the invite is pending. */
+    active: boolean;
+    /** Present when the app uses roles. */
+    role?: Role | null;
+}
+export interface MembersApi {
+    fetchMembers(containerId: string): Promise<Member[]>;
+    inviteMember(containerId: string, email: string, role?: Role): Promise<void>;
+    removeMember(memberId: string): Promise<void>;
+    setMemberRole?(memberId: string, role: Role): Promise<void>;
+}
+export declare const ROLE_OPTIONS: {
+    value: Role;
+    label: string;
+}[];
+export declare const EMAIL_PATTERN: RegExp;
+export declare function capitalize(word: string): string;
+export declare function errorText(err: unknown): string;

package/dist/account/types.js

@@ -0,0 +1,17 @@
+/**
+ * What the account and sharing components need from the app's sync layer. These are plain
+ * interfaces so this package has no storage dependency; `@wells-nelson/data-storage`'s
+ * `CloudSync` and members API satisfy them as they are.
+ */
+export const ROLE_OPTIONS = [
+    { value: 'viewer', label: 'Viewer' },
+    { value: 'editor', label: 'Editor' },
+    { value: 'owner', label: 'Owner' }
+];
+export const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+export function capitalize(word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+}
+export function errorText(err) {
+    return err instanceof Error ? err.message : String(err);
+}

package/dist/dnd.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Long-press drag and drop that works for touch and mouse.
+ *
+ * - `draggable` starts a drag after holding still for DRAG_PRESS_MS (the shared long-press
+ *   detection in press.ts); moving earlier cancels it, so normal scrolling still works.
+ * - `dropZone` marks an element that accepts drops. Ordered zones report the insertion index
+ *   among their `[data-dnd-item]` children (the dragged element excluded).
+ */
+import type { Action } from 'svelte/action';
+export interface DragData {
+    type: string;
+    id: string;
+    [key: string]: unknown;
+}
+export interface DraggableOptions {
+    data: DragData;
+    disabled?: boolean;
+    onstart?: (data: DragData) => void;
+    onend?: (data: DragData) => void;
+}
+export interface DropZoneOptions {
+    accepts: (data: DragData) => boolean;
+    ondrop: (data: DragData, index: number) => void;
+    /** Show an insertion line and compute an index (reordering) instead of highlighting the zone. */
+    ordered?: boolean;
+}
+export declare const DRAG_PRESS_MS = 300;
+export declare function isDragging(): boolean;
+export declare const draggable: Action<HTMLElement, DraggableOptions>;
+export declare const dropZone: Action<HTMLElement, DropZoneOptions>;
+/** Move `id` to `index` within `ids` (index counted without `id`, as reported by ordered zones). */
+export declare function reorder(ids: string[], id: string, index: number): string[];

package/dist/dnd.js

@@ -0,0 +1,237 @@
+import { watchPress } from './press.js';
+export const DRAG_PRESS_MS = 300;
+const MOVE_TOLERANCE = 8;
+const EDGE = 72;
+const zones = new Map();
+let active = null;
+export function isDragging() {
+    return active !== null;
+}
+function findZone(x, y, data) {
+    for (const el of document.elementsFromPoint(x, y)) {
+        let node = el;
+        while (node) {
+            if (node instanceof HTMLElement) {
+                const opts = zones.get(node);
+                if (opts?.accepts(data))
+                    return node;
+            }
+            node = node.parentElement;
+        }
+    }
+    return null;
+}
+function zoneItems(zone, source) {
+    return [...zone.querySelectorAll(':scope > [data-dnd-item]')].filter((el) => el !== source && !el.contains(source));
+}
+function updateTarget(drag) {
+    const zone = findZone(drag.x, drag.y, drag.data);
+    if (drag.zone && drag.zone !== zone)
+        drag.zone.classList.remove('dnd-over');
+    drag.zone = zone;
+    drag.indicator.hidden = true;
+    if (!zone)
+        return;
+    const opts = zones.get(zone);
+    if (!opts.ordered) {
+        zone.classList.add('dnd-over');
+        drag.index = 0;
+        return;
+    }
+    const items = zoneItems(zone, drag.source);
+    let index = items.length;
+    for (let i = 0; i < items.length; i++) {
+        const r = items[i].getBoundingClientRect();
+        if (drag.y < r.top + r.height / 2) {
+            index = i;
+            break;
+        }
+    }
+    drag.index = index;
+    const zr = zone.getBoundingClientRect();
+    let lineY;
+    if (items.length === 0)
+        lineY = zr.top + 4;
+    else if (index < items.length)
+        lineY = items[index].getBoundingClientRect().top - 2;
+    else
+        lineY = items[items.length - 1].getBoundingClientRect().bottom + 2;
+    Object.assign(drag.indicator.style, {
+        top: `${lineY - 2}px`,
+        left: `${zr.left}px`,
+        width: `${zr.width}px`
+    });
+    drag.indicator.hidden = false;
+}
+function autoScroll() {
+    if (!active)
+        return;
+    const { y } = active;
+    let dy = 0;
+    if (y < EDGE)
+        dy = -Math.ceil((EDGE - y) / 6);
+    else if (y > window.innerHeight - EDGE)
+        dy = Math.ceil((y - (window.innerHeight - EDGE)) / 6);
+    if (dy !== 0) {
+        window.scrollBy(0, dy);
+        updateTarget(active);
+    }
+    active.scrollFrame = requestAnimationFrame(autoScroll);
+}
+function onMove(e) {
+    if (!active)
+        return;
+    active.x = e.clientX;
+    active.y = e.clientY;
+    active.ghost.style.transform = `translate(${e.clientX - active.offsetX}px, ${e.clientY - active.offsetY}px)`;
+    updateTarget(active);
+}
+function suppressNextClick() {
+    const stop = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    window.addEventListener('click', stop, { capture: true, once: true });
+    setTimeout(() => window.removeEventListener('click', stop, { capture: true }), 50);
+}
+function finish(drop) {
+    const drag = active;
+    if (!drag)
+        return;
+    active = null;
+    cancelAnimationFrame(drag.scrollFrame);
+    window.removeEventListener('pointermove', onMove);
+    window.removeEventListener('pointerup', onUp);
+    window.removeEventListener('pointercancel', onCancel);
+    window.removeEventListener('keydown', onKey);
+    drag.ghost.remove();
+    drag.indicator.remove();
+    drag.zone?.classList.remove('dnd-over');
+    drag.source.classList.remove('dnd-source');
+    document.body.classList.remove('dnd-active');
+    suppressNextClick();
+    if (drop && drag.zone) {
+        const opts = zones.get(drag.zone);
+        opts?.ondrop(drag.data, drag.index);
+    }
+    drag.options.onend?.(drag.data);
+    // Groups collapsed for the drag expand again on the next render; then return to where we were.
+    const y = drag.startScrollY;
+    requestAnimationFrame(() => requestAnimationFrame(() => window.scrollTo({ top: y })));
+}
+function onUp() {
+    finish(true);
+}
+function onCancel() {
+    finish(false);
+}
+function onKey(e) {
+    if (e.key === 'Escape')
+        finish(false);
+}
+function begin(node, options, x, y) {
+    const rect = node.getBoundingClientRect();
+    const ghost = node.cloneNode(true);
+    ghost.classList.add('dnd-ghost');
+    Object.assign(ghost.style, {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: `${rect.width}px`,
+        transform: `translate(${rect.left}px, ${rect.top}px)`,
+        pointerEvents: 'none',
+        zIndex: '1000'
+    });
+    const indicator = document.createElement('div');
+    indicator.className = 'dnd-indicator';
+    indicator.hidden = true;
+    document.body.append(ghost, indicator);
+    node.classList.add('dnd-source');
+    document.body.classList.add('dnd-active');
+    navigator.vibrate?.(25);
+    active = {
+        data: options.data,
+        source: node,
+        ghost,
+        offsetX: x - rect.left,
+        offsetY: y - rect.top,
+        x,
+        y,
+        zone: null,
+        index: 0,
+        indicator,
+        scrollFrame: 0,
+        startScrollY: window.scrollY,
+        options
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onCancel);
+    window.addEventListener('keydown', onKey);
+    options.onstart?.(options.data);
+    // Layout may change in onstart (e.g. groups collapse); measure after it settles.
+    requestAnimationFrame(() => active && updateTarget(active));
+    active.scrollFrame = requestAnimationFrame(autoScroll);
+}
+export const draggable = (node, initial) => {
+    let options = initial;
+    let stopWatching = null;
+    const cancelPress = () => {
+        stopWatching?.();
+        stopWatching = null;
+    };
+    const onPointerDown = (e) => {
+        if (options.disabled || active || e.button !== 0)
+            return;
+        cancelPress();
+        stopWatching = watchPress(e, {
+            delay: DRAG_PRESS_MS,
+            tolerance: MOVE_TOLERANCE,
+            onpress: (point) => {
+                stopWatching = null;
+                begin(node, options, point.x, point.y);
+            }
+        });
+    };
+    // While dragging on touch screens, stop the page from scrolling instead of the drag.
+    const onTouchMove = (e) => {
+        if (active?.source === node && e.cancelable)
+            e.preventDefault();
+    };
+    const onContextMenu = (e) => {
+        if (stopWatching || active)
+            e.preventDefault();
+    };
+    node.addEventListener('pointerdown', onPointerDown);
+    node.addEventListener('touchmove', onTouchMove, { passive: false });
+    node.addEventListener('contextmenu', onContextMenu);
+    return {
+        update(next) {
+            options = next;
+        },
+        destroy() {
+            cancelPress();
+            node.removeEventListener('pointerdown', onPointerDown);
+            node.removeEventListener('touchmove', onTouchMove);
+            node.removeEventListener('contextmenu', onContextMenu);
+            // An active drag keeps going: the ghost is a clone, and the drop handler doesn't need the node.
+        }
+    };
+};
+export const dropZone = (node, options) => {
+    zones.set(node, options);
+    return {
+        update(next) {
+            zones.set(node, next);
+        },
+        destroy() {
+            zones.delete(node);
+        }
+    };
+};
+/** Move `id` to `index` within `ids` (index counted without `id`, as reported by ordered zones). */
+export function reorder(ids, id, index) {
+    const rest = ids.filter((x) => x !== id);
+    rest.splice(Math.max(0, Math.min(index, rest.length)), 0, id);
+    return rest;
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export { default as ActiveList } from './ActiveList.svelte';
+export { default as AddRow } from './AddRow.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as CollapsibleSection } from './CollapsibleSection.svelte';
+export { default as Combobox, sameName, type ComboChoice, type ComboOption } from './Combobox.svelte';
+export { default as DevWipeButton } from './DevWipeButton.svelte';
+export { default as SearchBar } from './SearchBar.svelte';
+export { default as Segmented } from './Segmented.svelte';
+export { default as TextField } from './TextField.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as UndoButton } from './UndoButton.svelte';
+export { DRAG_PRESS_MS, draggable, dropZone, isDragging, reorder, type DragData, type DraggableOptions, type DropZoneOptions } from './dnd.js';
+export { LONG_PRESS_MS, longpress } from './longpress.js';
+export { watchPress, type PressOptions } from './press.js';
+export { UndoStack, type UndoEntry, type UndoStackOptions } from './undo.svelte.js';
+export { wipeAllData, type WipeOptions } from './wipe.js';

package/dist/index.js

@@ -0,0 +1,16 @@
+export { default as ActiveList } from './ActiveList.svelte';
+export { default as AddRow } from './AddRow.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as CollapsibleSection } from './CollapsibleSection.svelte';
+export { default as Combobox, sameName } from './Combobox.svelte';
+export { default as DevWipeButton } from './DevWipeButton.svelte';
+export { default as SearchBar } from './SearchBar.svelte';
+export { default as Segmented } from './Segmented.svelte';
+export { default as TextField } from './TextField.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as UndoButton } from './UndoButton.svelte';
+export { DRAG_PRESS_MS, draggable, dropZone, isDragging, reorder } from './dnd.js';
+export { LONG_PRESS_MS, longpress } from './longpress.js';
+export { watchPress } from './press.js';
+export { UndoStack } from './undo.svelte.js';
+export { wipeAllData } from './wipe.js';

package/dist/longpress.d.ts

@@ -0,0 +1,11 @@
+import type { Action } from 'svelte/action';
+export declare const LONG_PRESS_MS = 500;
+/**
+ * Calls `handler` after holding a pointer still for LONG_PRESS_MS (touch or mouse).
+ * The click that follows a long press is swallowed so the normal tap action doesn't also run.
+ *
+ * ```svelte
+ * <button onclick={open} use:longpress={() => startEditing(row)}>…</button>
+ * ```
+ */
+export declare const longpress: Action<HTMLElement, (() => void) | undefined>;

package/dist/longpress.js

@@ -0,0 +1,63 @@
+import { watchPress } from './press.js';
+export const LONG_PRESS_MS = 500;
+const MOVE_TOLERANCE = 10;
+/**
+ * Calls `handler` after holding a pointer still for LONG_PRESS_MS (touch or mouse).
+ * The click that follows a long press is swallowed so the normal tap action doesn't also run.
+ *
+ * ```svelte
+ * <button onclick={open} use:longpress={() => startEditing(row)}>…</button>
+ * ```
+ */
+export const longpress = (node, initial) => {
+    let handler = initial;
+    let stopWatching = null;
+    let fired = false;
+    const cancel = () => {
+        stopWatching?.();
+        stopWatching = null;
+    };
+    const onDown = (e) => {
+        if (!handler || e.button !== 0)
+            return;
+        fired = false;
+        cancel();
+        stopWatching = watchPress(e, {
+            delay: LONG_PRESS_MS,
+            tolerance: MOVE_TOLERANCE,
+            onpress: () => {
+                stopWatching = null;
+                fired = true;
+                navigator.vibrate?.(25);
+                handler?.();
+            }
+        });
+    };
+    const onClick = (e) => {
+        if (fired) {
+            fired = false;
+            e.stopImmediatePropagation();
+            e.preventDefault();
+        }
+    };
+    const onContextMenu = (e) => {
+        if (handler)
+            e.preventDefault();
+    };
+    node.addEventListener('pointerdown', onDown);
+    node.addEventListener('pointerleave', cancel);
+    node.addEventListener('click', onClick, { capture: true });
+    node.addEventListener('contextmenu', onContextMenu);
+    return {
+        update(next) {
+            handler = next;
+        },
+        destroy() {
+            cancel();
+            node.removeEventListener('pointerdown', onDown);
+            node.removeEventListener('pointerleave', cancel);
+            node.removeEventListener('click', onClick, { capture: true });
+            node.removeEventListener('contextmenu', onContextMenu);
+        }
+    };
+};

package/dist/press.d.ts

@@ -0,0 +1,18 @@
+/** Shared long-press detection used by the `longpress` and `draggable` actions. */
+export interface PressOptions {
+    /** How long the pointer has to stay down, in ms. */
+    delay: number;
+    /** How far (px) the pointer may move before the press is cancelled (e.g. the page scrolls). */
+    tolerance: number;
+    /** Called once the press has been held long enough, with the latest pointer position. */
+    onpress: (point: {
+        x: number;
+        y: number;
+    }) => void;
+}
+/**
+ * Watch the pointer that just went down. Moving further than `tolerance`, releasing or
+ * cancelling the pointer ends the watch; holding still for `delay` calls `onpress`.
+ * Returns a function that stops watching early.
+ */
+export declare function watchPress(down: PointerEvent, options: PressOptions): () => void;

package/dist/press.js

@@ -0,0 +1,36 @@
+/** Shared long-press detection used by the `longpress` and `draggable` actions. */
+/**
+ * Watch the pointer that just went down. Moving further than `tolerance`, releasing or
+ * cancelling the pointer ends the watch; holding still for `delay` calls `onpress`.
+ * Returns a function that stops watching early.
+ */
+export function watchPress(down, options) {
+    const id = down.pointerId;
+    const start = { x: down.clientX, y: down.clientY };
+    let last = { ...start };
+    const onMove = (e) => {
+        if (e.pointerId !== id)
+            return;
+        last = { x: e.clientX, y: e.clientY };
+        if (Math.hypot(last.x - start.x, last.y - start.y) > options.tolerance)
+            stop();
+    };
+    const onEnd = (e) => {
+        if (e.pointerId === id)
+            stop();
+    };
+    const timer = setTimeout(() => {
+        stop();
+        options.onpress(last);
+    }, options.delay);
+    function stop() {
+        clearTimeout(timer);
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onEnd);
+        window.removeEventListener('pointercancel', onEnd);
+    }
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onEnd);
+    window.addEventListener('pointercancel', onEnd);
+    return stop;
+}