@enigmax/primitives 0.1.2 → 0.3.0

package/src/core/search.ts

@@ -0,0 +1,225 @@
+/**
+ * Search-as-you-type: debouncing, ordering, cancellation and the field wiring, with the
+ * matching left pluggable.
+ *
+ * Fuse.js is NOT a dependency of this package. Hand it the constructor and you get fuzzy
+ * matching configured exactly as if you had called it yourself - `fuseOptions` is passed
+ * through untouched. Hand it nothing and a built-in accent-insensitive substring matcher
+ * runs instead, so the primitive works with zero dependencies. Hand it a `matcher` and
+ * every part of this is replaced by your own.
+ */
+
+export interface SearchMatch<T> {
+    item: T;
+    /** Lower is better, matching Fuse's convention. 0 is an exact hit. */
+    score: number;
+    /** Which key matched, when the matcher reports it. */
+    key?: string;
+}
+
+/** The shape of Fuse's constructor, declared here so the package need not depend on it. */
+export interface FuseLike<T> {
+    search(query: string): { item: T; score?: number; matches?: { key?: string; }[]; }[];
+}
+export type FuseConstructor = new <T>(items: readonly T[], options?: Record<string, unknown>) => FuseLike<T>;
+
+export interface SearchOptions<T> {
+    items?: readonly T[];
+    /** Fields to search. Dotted paths work with the built-in matcher and with Fuse. */
+    keys?: string[];
+    /**
+     * Pass Fuse.js's constructor to get fuzzy matching. Omit it for the built-in
+     * substring matcher. Ignored when `matcher` is set.
+     */
+    fuse?: FuseConstructor;
+    /** Handed to Fuse verbatim, so any Fuse option behaves exactly as documented there. */
+    fuseOptions?: Record<string, unknown>;
+    /** Replaces the engine entirely. Return the results in the order you want them. */
+    matcher?: (query: string, items: readonly T[]) => SearchMatch<T>[];
+    /** ms to wait after the last keystroke. 0 searches on every one. */
+    debounce?: number;
+    /** Queries shorter than this return nothing rather than everything. */
+    minLength?: number;
+    /** Cap the result list. */
+    limit?: number;
+    /** What an empty query returns. "none" (default) or "all". */
+    empty?: "none" | "all";
+    onResults?: (results: SearchMatch<T>[], query: string) => void;
+}
+
+export interface SearchInstance<T> {
+    readonly query: string;
+    readonly results: SearchMatch<T>[];
+    /** Debounced. */
+    search(query: string): void;
+    /** Skips the debounce, e.g. on Enter. */
+    searchNow(query: string): SearchMatch<T>[];
+    setItems(items: readonly T[]): void;
+    update(options: Partial<SearchOptions<T>>): void;
+    /** Bind to a field: input events search, Escape clears. Returns an unbind. */
+    attach(input: HTMLInputElement): () => void;
+    subscribe(listener: (results: SearchMatch<T>[], query: string) => void): () => void;
+    destroy(): void;
+}
+
+const DEFAULT_DEBOUNCE = 120;
+
+/** "Café" must match "cafe" - a search that fails on an accent reads as broken. */
+function fold(value: string): string {
+    return value.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
+}
+
+function readPath(item: unknown, path: string): string {
+    let cursor: unknown = item;
+    for (const step of path.split(".")) {
+        if (cursor == null || typeof cursor !== "object") return "";
+        cursor = (cursor as Record<string, unknown>)[step];
+    }
+    return cursor == null ? "" : String(cursor);
+}
+
+/**
+ * The zero-dependency fallback: accent-insensitive substring, ranked by where the match
+ * lands and which key it landed in, so a title hit outranks a body hit.
+ */
+function substringMatcher<T>(query: string, items: readonly T[], keys: string[]): SearchMatch<T>[] {
+    const needle = fold(query);
+    const results: SearchMatch<T>[] = [];
+
+    for (const item of items) {
+        const fields = keys.length ? keys : [""];
+        let best: SearchMatch<T> | null = null;
+
+        for (let index = 0; index < fields.length; index++) {
+            const key = fields[index];
+            const haystack = fold(key ? readPath(item, key) : String(item));
+            const at = haystack.indexOf(needle);
+            if (at < 0) continue;
+            // Earlier in the string and earlier in the key list is a better hit; a whole
+            // field that IS the query scores 0.
+            const score = haystack === needle ? 0 : (at + 1) / (haystack.length + 1) + index * 0.01;
+            if (!best || score < best.score) best = { item, score, key: key || undefined };
+        }
+        if (best) results.push(best);
+    }
+
+    return results.sort((left, right) => left.score - right.score);
+}
+
+export function createSearch<T>(options: SearchOptions<T> = {}): SearchInstance<T> {
+    let opts: SearchOptions<T> = { ...options };
+    let items: readonly T[] = opts.items ?? [];
+    let query = "";
+    let results: SearchMatch<T>[] = [];
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let engine: FuseLike<T> | null = null;
+    let destroyed = false;
+    const listeners = new Set<(results: SearchMatch<T>[], query: string) => void>();
+
+    function buildEngine(): void {
+        engine = null;
+        if (opts.matcher || !opts.fuse) return;
+        // Fuse indexes on construction, so it is rebuilt when the items or keys change
+        // and never per keystroke.
+        engine = new opts.fuse(items, { keys: opts.keys ?? [], includeScore: true, includeMatches: true, threshold: 0.4, ...opts.fuseOptions });
+    }
+
+    function run(next: string): SearchMatch<T>[] {
+        const trimmed = next.trim();
+        const minLength = opts.minLength ?? 1;
+
+        let found: SearchMatch<T>[];
+        // The limit applies to this branch too: a caller asking for 10 rows means 10 rows,
+        // including the "show everything" state, which is the longest list of them all.
+        if (trimmed.length < minLength) {
+            found = (opts.empty ?? "none") === "all" ? items.map((item) => ({ item, score: 0 })) : [];
+        } else if (opts.matcher) {
+            found = opts.matcher(trimmed, items);
+        } else if (engine) {
+            found = engine.search(trimmed).map((hit) => ({
+                item: hit.item,
+                score: hit.score ?? 0,
+                key: hit.matches?.[0]?.key
+            }));
+        } else {
+            found = substringMatcher(trimmed, items, opts.keys ?? []);
+        }
+
+        return opts.limit != null ? found.slice(0, opts.limit) : found;
+    }
+
+    function publish(next: string): SearchMatch<T>[] {
+        query = next;
+        results = run(next);
+        opts.onResults?.(results, query);
+        for (const listener of listeners) listener(results, query);
+        return results;
+    }
+
+    function clearTimer(): void {
+        if (timer === null) return;
+        clearTimeout(timer);
+        timer = null;
+    }
+
+    buildEngine();
+
+    return {
+        get query() { return query; },
+        get results() { return results; },
+        search(next: string) {
+            if (destroyed) return;
+            clearTimer();
+            const wait = opts.debounce ?? DEFAULT_DEBOUNCE;
+            // A pending search is dropped rather than queued, so a fast typist gets one
+            // pass over the data instead of one per keystroke.
+            if (wait <= 0) { publish(next); return; }
+            timer = setTimeout(() => { timer = null; publish(next); }, wait);
+        },
+        searchNow(next: string) {
+            clearTimer();
+            return publish(next);
+        },
+        setItems(next: readonly T[]) {
+            items = next;
+            buildEngine();
+            // The visible results are stale the moment the data changes under them.
+            if (query) publish(query);
+        },
+        update(next: Partial<SearchOptions<T>>) {
+            opts = { ...opts, ...next };
+            if (next.items) items = next.items;
+            buildEngine();
+            if (query) publish(query);
+        },
+        attach(input: HTMLInputElement) {
+            const onInput = () => this.search(input.value);
+            const onKeyDown = (event: KeyboardEvent) => {
+                if (event.key !== "Escape" || !input.value) return;
+                // Escape clears the field first and only then reaches the dialog around
+                // it, which is what a visitor expects from a search box.
+                event.stopPropagation();
+                input.value = "";
+                this.searchNow("");
+            };
+            input.addEventListener("input", onInput);
+            input.addEventListener("keydown", onKeyDown);
+            input.dataset.enigmaSearch = "";
+            return () => {
+                input.removeEventListener("input", onInput);
+                input.removeEventListener("keydown", onKeyDown);
+                delete input.dataset.enigmaSearch;
+            };
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => { listeners.delete(listener); };
+        },
+        destroy() {
+            destroyed = true;
+            clearTimer();
+            listeners.clear();
+            engine = null;
+        }
+    };
+}

package/src/index.ts

@@ -1 +1,3 @@
 export { createMarquee, type MarqueeOptions, type MarqueeInstance } from "@/core/marquee";
+export { createInput, type InputOptions, type InputInstance, type InputAction, type InputIcon, type InputActionState } from "@/core/input";
+export { createSearch, type SearchOptions, type SearchInstance, type SearchMatch, type FuseConstructor, type FuseLike } from "@/core/search";

package/src/react/index.ts

@@ -1,2 +1,6 @@
 export { useMarquee, type UseMarqueeResult } from "@/react/use-marquee";
 export { type MarqueeOptions, type MarqueeInstance } from "@/core/marquee";
+export { useInput, type UseInputResult } from "@/react/use-input";
+export { useSearch, type UseSearchResult } from "@/react/use-search";
+export { type InputOptions, type InputAction, type InputIcon } from "@/core/input";
+export { type SearchOptions, type SearchMatch, type FuseConstructor } from "@/core/search";

package/src/react/use-input.ts

@@ -0,0 +1,70 @@
+import { createInput, type InputOptions, type InputInstance } from "@/core/input";
+import { useRef, useState, useEffect, useLayoutEffect, type RefObject } from "react";
+
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export interface UseInputResult {
+    /** Attach to the `<input>`. */
+    inputRef: RefObject<HTMLInputElement | null>;
+    /** Attach to your own actions container, or leave it and one is created for you. */
+    actionsRef: RefObject<HTMLElement | null>;
+    /** True while a password is readable. */
+    revealed: boolean;
+    reveal: (next?: boolean) => void;
+    /** Re-render the actions after you change the field yourself. */
+    refresh: () => void;
+}
+
+/**
+ * In-field actions for an input, with the password reveal wired for free.
+ *
+ * ```tsx
+ * const { inputRef, revealed } = useInput();
+ * return <input ref={inputRef} type="password" autoComplete="current-password" />;
+ * ```
+ *
+ * The toggle is a real `<button type="button">`, so it never submits the form, and the
+ * caret survives the type switch.
+ */
+export function useInput(options: InputOptions = {}): UseInputResult {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const actionsRef = useRef<HTMLElement | null>(null);
+    const instanceRef = useRef<InputInstance | null>(null);
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+
+    const [revealed, setRevealed] = useState(false);
+
+    useIsomorphicLayoutEffect(() => {
+        const input = inputRef.current;
+        if (!input) return;
+
+        const instance = createInput(input, {
+            ...optionsRef.current,
+            container: actionsRef.current ?? optionsRef.current.container,
+            onRevealChange: (next) => {
+                setRevealed(next);
+                optionsRef.current.onRevealChange?.(next);
+            }
+        });
+        instanceRef.current = instance;
+        return () => {
+            instance.destroy();
+            instanceRef.current = null;
+        };
+        // Created once; option changes go through update() so the field is not rebuilt
+        // on every render, which would drop the caret mid-typing.
+    }, []);
+
+    useIsomorphicLayoutEffect(() => {
+        instanceRef.current?.update(options);
+    }, [options.reveal, options.actions, options.position]);
+
+    return {
+        inputRef,
+        actionsRef,
+        revealed,
+        reveal: (next?: boolean) => instanceRef.current?.reveal(next),
+        refresh: () => instanceRef.current?.refresh()
+    };
+}

package/src/react/use-search.ts

@@ -0,0 +1,77 @@
+import { useRef, useState, useEffect, useMemo, type RefObject } from "react";
+import { createSearch, type SearchOptions, type SearchMatch, type SearchInstance } from "@/core/search";
+
+export interface UseSearchResult<T> {
+    /** Attach to the search field, or drive it yourself with `search`. */
+    inputRef: RefObject<HTMLInputElement | null>;
+    query: string;
+    results: SearchMatch<T>[];
+    /** Debounced. */
+    search: (query: string) => void;
+    /** Skips the debounce. */
+    searchNow: (query: string) => void;
+    clear: () => void;
+}
+
+/**
+ * Search-as-you-type over a list.
+ *
+ * Pass `fuse` (Fuse.js's constructor) for fuzzy matching, `matcher` to replace the
+ * engine, or neither for the built-in accent-insensitive substring search.
+ *
+ * ```tsx
+ * import Fuse from "fuse.js";
+ *
+ * const { inputRef, results } = useSearch({ items: docs, keys: ["title", "body"], fuse: Fuse });
+ * return <input ref={inputRef} type="search" placeholder="Search" />;
+ * ```
+ */
+export function useSearch<T>(options: SearchOptions<T> = {}): UseSearchResult<T> {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const instanceRef = useRef<SearchInstance<T> | null>(null);
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+
+    const [query, setQuery] = useState("");
+    const [results, setResults] = useState<SearchMatch<T>[]>([]);
+
+    // Built once. The engine indexes its items on construction, so rebuilding it per
+    // render would re-index the whole list on every keystroke.
+    const instance = useMemo(() => {
+        const created = createSearch<T>({
+            ...optionsRef.current,
+            onResults: (next, nextQuery) => {
+                setResults(next);
+                setQuery(nextQuery);
+                optionsRef.current.onResults?.(next, nextQuery);
+            }
+        });
+        instanceRef.current = created;
+        return created;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => () => instance.destroy(), [instance]);
+
+    // New data must re-index and re-run the visible query, or the list shows matches
+    // against items that are gone.
+    useEffect(() => { instance.setItems(options.items ?? []); }, [instance, options.items]);
+
+    useEffect(() => {
+        const input = inputRef.current;
+        if (!input) return;
+        return instance.attach(input);
+    }, [instance]);
+
+    return {
+        inputRef,
+        query,
+        results,
+        search: (next: string) => instance.search(next),
+        searchNow: (next: string) => { instance.searchNow(next); },
+        clear: () => {
+            if (inputRef.current) inputRef.current.value = "";
+            instance.searchNow("");
+        }
+    };
+}

package/dist/chunk-55J5JEWX.js

@@ -1,288 +0,0 @@
-// src/core/marquee.ts
-var DEFAULT_DECAY = 0.12;
-var DRAG_THRESHOLD = 6;
-var STILL_MS = 90;
-var MAX_DT = 0.05;
-var VELOCITY_SMOOTHING = 0.6;
-var TOUCH_HOVER_SUPPRESS_MS = 1e3;
-var IDLE_EPSILON = 0.01;
-var DEFAULTS = {
-  speed: 60,
-  reverse: false,
-  vertical: false,
-  draggable: true,
-  hoverScale: 1,
-  decay: DEFAULT_DECAY,
-  manageStyles: true,
-  copies: "clone"
-};
-function createMarquee(lane, track, options = {}) {
-  let opts = { ...DEFAULTS, ...options };
-  let period = 0;
-  let copyCount = Math.max(2, track.children.length);
-  let offset = 0;
-  let velocity = 0;
-  let running = false;
-  let paused = false;
-  let destroyed = false;
-  let frame = 0;
-  let lastTime = 0;
-  let dragging = false;
-  let pointerId = null;
-  let lastPointer = 0;
-  let startPointer = 0;
-  let lastMoveTime = 0;
-  let maxTravel = 0;
-  let hovering = false;
-  let lastTouchAt = 0;
-  const motionQuery = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
-  let reducedMotion = motionQuery?.matches ?? false;
-  function target() {
-    if (reducedMotion || paused) return 0;
-    const cruise = opts.reverse ? -opts.speed : opts.speed;
-    return hovering ? cruise * opts.hoverScale : cruise;
-  }
-  function axisSize(element) {
-    return opts.vertical ? element.offsetHeight : element.offsetWidth;
-  }
-  function axisStart(element) {
-    return opts.vertical ? element.offsetTop : element.offsetLeft;
-  }
-  function applyStyles() {
-    if (!opts.manageStyles) return;
-    lane.style.overflow = "hidden";
-    lane.style.touchAction = opts.vertical ? "pan-x" : "pan-y";
-    lane.style.userSelect = "none";
-    lane.style.webkitUserSelect = "none";
-    track.style.willChange = "transform";
-  }
-  function render() {
-    const x = opts.vertical ? 0 : -offset;
-    const y = opts.vertical ? -offset : 0;
-    track.style.transform = `translate3d(${x}px, ${y}px, 0)`;
-  }
-  function readPeriod() {
-    const first = track.children[0];
-    const second = track.children[1];
-    if (!first) return 0;
-    if (second) {
-      const step = axisStart(second) - axisStart(first);
-      if (step > 0) return step;
-    }
-    return axisSize(first);
-  }
-  function requiredCopies(measured) {
-    if (measured <= 0) return 2;
-    return Math.max(2, Math.ceil(axisSize(lane) / measured) + 1);
-  }
-  function syncClones(count) {
-    const source = track.children[0];
-    if (!source) return;
-    while (track.children.length > count) track.removeChild(track.lastElementChild);
-    while (track.children.length < count) {
-      const clone = source.cloneNode(true);
-      clone.setAttribute("aria-hidden", "true");
-      clone.dataset.enigmaMarqueeCopy = String(track.children.length);
-      track.appendChild(clone);
-    }
-  }
-  function measure() {
-    if (destroyed) return;
-    const cloning = opts.copies === "clone";
-    if (cloning && track.children.length < 2) syncClones(2);
-    let measured = readPeriod();
-    let needed = requiredCopies(measured);
-    if (cloning && track.children.length !== needed) {
-      syncClones(needed);
-      measured = readPeriod();
-      needed = requiredCopies(measured);
-    }
-    const changed = measured !== period || needed !== copyCount;
-    period = measured;
-    if (needed !== copyCount) {
-      copyCount = needed;
-      opts.onCopyCountChange?.(needed);
-    }
-    if (period > 0) offset = wrap(offset);
-    render();
-    if (changed) opts.onMeasure?.(period, copyCount);
-    start();
-  }
-  function wrap(value) {
-    if (period <= 0) return value;
-    return (value % period + period) % period;
-  }
-  function tick(now) {
-    frame = 0;
-    if (destroyed) return;
-    const dt = Math.min((now - lastTime) / 1e3, MAX_DT);
-    lastTime = now;
-    if (!dragging) {
-      velocity += (target() - velocity) * (1 - Math.pow(opts.decay, dt));
-      offset = wrap(offset + velocity * dt);
-    }
-    render();
-    const idle = !dragging && Math.abs(velocity) < IDLE_EPSILON && Math.abs(target()) < IDLE_EPSILON;
-    if (idle) {
-      velocity = 0;
-      running = false;
-      return;
-    }
-    frame = requestAnimationFrame(tick);
-  }
-  function start() {
-    if (destroyed || running) return;
-    running = true;
-    lastTime = performance.now();
-    frame = requestAnimationFrame(tick);
-  }
-  function pointerDelta(event) {
-    return opts.vertical ? event.clientY : event.clientX;
-  }
-  function onPointerDown(event) {
-    if (event.pointerType !== "mouse") noteTouch();
-    if (!opts.draggable || event.button > 0 || pointerId !== null) return;
-    pointerId = event.pointerId;
-    dragging = true;
-    lastPointer = pointerDelta(event);
-    startPointer = lastPointer;
-    lastMoveTime = event.timeStamp;
-    maxTravel = 0;
-    lane.dataset.dragging = "true";
-    window.addEventListener("pointermove", onPointerMove);
-    window.addEventListener("pointerup", onPointerUp);
-    window.addEventListener("pointercancel", onPointerUp);
-    start();
-  }
-  function onPointerMove(event) {
-    if (event.pointerId !== pointerId) return;
-    const position = pointerDelta(event);
-    const delta = position - lastPointer;
-    lastPointer = position;
-    const dt = Math.max((event.timeStamp - lastMoveTime) / 1e3, 1e-3);
-    lastMoveTime = event.timeStamp;
-    maxTravel = Math.max(maxTravel, Math.abs(position - startPointer));
-    offset = wrap(offset - delta);
-    const instant = -delta / dt;
-    velocity = velocity * VELOCITY_SMOOTHING + instant * (1 - VELOCITY_SMOOTHING);
-  }
-  function onPointerUp(event) {
-    if (event.pointerId !== pointerId) return;
-    pointerId = null;
-    dragging = false;
-    delete lane.dataset.dragging;
-    window.removeEventListener("pointermove", onPointerMove);
-    window.removeEventListener("pointerup", onPointerUp);
-    window.removeEventListener("pointercancel", onPointerUp);
-    if (event.timeStamp - lastMoveTime > STILL_MS) velocity = 0;
-    start();
-  }
-  function onClickCapture(event) {
-    if (maxTravel <= DRAG_THRESHOLD) return;
-    event.preventDefault();
-    event.stopPropagation();
-  }
-  function onClick(event) {
-    if (maxTravel > DRAG_THRESHOLD) return;
-    opts.onItemClick?.(event);
-  }
-  function onPointerEnter(event) {
-    if (event.pointerType !== "mouse") {
-      noteTouch();
-      return;
-    }
-    if (Date.now() - lastTouchAt < TOUCH_HOVER_SUPPRESS_MS) return;
-    hovering = true;
-    lane.dataset.hovering = "true";
-    start();
-  }
-  function onPointerLeave() {
-    hovering = false;
-    delete lane.dataset.hovering;
-    start();
-  }
-  function noteTouch() {
-    lastTouchAt = Date.now();
-    if (!hovering) return;
-    hovering = false;
-    delete lane.dataset.hovering;
-    start();
-  }
-  function onMotionChange(event) {
-    reducedMotion = event.matches;
-    lane.dataset.reducedMotion = String(reducedMotion);
-    start();
-  }
-  const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => measure()) : null;
-  function init() {
-    applyStyles();
-    lane.dataset.enigmaMarquee = "";
-    lane.dataset.reducedMotion = String(reducedMotion);
-    track.dataset.enigmaMarqueeTrack = "";
-    for (const child of Array.from(track.children)) {
-      child.dataset.enigmaMarqueeCopy ??= "0";
-    }
-    lane.addEventListener("pointerdown", onPointerDown);
-    lane.addEventListener("pointerenter", onPointerEnter);
-    lane.addEventListener("pointerleave", onPointerLeave);
-    lane.addEventListener("touchstart", noteTouch, { passive: true });
-    lane.addEventListener("click", onClickCapture, true);
-    lane.addEventListener("click", onClick);
-    motionQuery?.addEventListener("change", onMotionChange);
-    resizeObserver?.observe(lane);
-    const first = track.children[0];
-    if (first) resizeObserver?.observe(first);
-    measure();
-    void document.fonts?.ready.then(() => measure());
-  }
-  init();
-  return {
-    get offset() {
-      return offset;
-    },
-    get period() {
-      return period;
-    },
-    get copyCount() {
-      return copyCount;
-    },
-    get dragging() {
-      return dragging;
-    },
-    get reducedMotion() {
-      return reducedMotion;
-    },
-    update(next) {
-      const styleKeys = next.vertical !== void 0 || next.manageStyles !== void 0;
-      opts = { ...opts, ...next };
-      if (styleKeys) applyStyles();
-      measure();
-    },
-    measure,
-    pause() {
-      paused = true;
-      start();
-    },
-    resume() {
-      paused = false;
-      start();
-    },
-    destroy() {
-      destroyed = true;
-      if (frame) cancelAnimationFrame(frame);
-      resizeObserver?.disconnect();
-      motionQuery?.removeEventListener("change", onMotionChange);
-      lane.removeEventListener("pointerdown", onPointerDown);
-      lane.removeEventListener("pointerenter", onPointerEnter);
-      lane.removeEventListener("pointerleave", onPointerLeave);
-      lane.removeEventListener("touchstart", noteTouch);
-      lane.removeEventListener("click", onClickCapture, true);
-      lane.removeEventListener("click", onClick);
-      window.removeEventListener("pointermove", onPointerMove);
-      window.removeEventListener("pointerup", onPointerUp);
-      window.removeEventListener("pointercancel", onPointerUp);
-    }
-  };
-}
-
-export { createMarquee };