@enigmax/primitives 0.1.1 → 0.2.0

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-QDGZANPT.js

@@ -1,282 +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 measured = readPeriod();
-    const needed = requiredCopies(measured);
-    const changed = measured !== period || needed !== copyCount;
-    period = measured;
-    if (needed !== copyCount) {
-      copyCount = needed;
-      if (opts.copies === "clone") syncClones(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 };