@enigmax/primitives 0.1.2 → 0.2.0

package/dist/chunk-OKNWKBQI.js

@@ -0,0 +1,617 @@
+// 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);
+    }
+  };
+}
+
+// src/core/input.ts
+var EYE = '<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>';
+var EYE_OFF = '<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.6 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.2 6.2A17.7 17.7 0 0 0 2 12s3.5 7 10 7a9.6 9.6 0 0 0 4.2-.9"/><path d="m2 2 20 20"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></svg>';
+function resolve(value, state) {
+  return typeof value === "function" ? value(state) : value;
+}
+function paint(target, icon) {
+  if (typeof icon === "string") target.innerHTML = icon;
+  else {
+    target.replaceChildren(icon);
+  }
+}
+function createInput(input, options = {}) {
+  let opts = { ...options };
+  let revealed = false;
+  let destroyed = false;
+  let restoreTimer = null;
+  const owned = !opts.container;
+  const container = opts.container ?? document.createElement("span");
+  const buttons = /* @__PURE__ */ new Map();
+  function state() {
+    return { input, revealed, locked: input.disabled || input.readOnly };
+  }
+  function revealConfig() {
+    return typeof opts.reveal === "object" ? opts.reveal : {};
+  }
+  function revealAction() {
+    const config = revealConfig();
+    return {
+      name: "reveal",
+      label: (current) => current.revealed ? config.hideLabel ?? "Hide password" : config.showLabel ?? "Show password",
+      icon: (current) => current.revealed ? config.hideIcon ?? EYE_OFF : config.showIcon ?? EYE,
+      pressed: (current) => current.revealed,
+      onSelect: () => setRevealed(!revealed)
+    };
+  }
+  function isPasswordField() {
+    return input.type === "password" || revealed && input.dataset.enigmaInputReveal === "on";
+  }
+  function activeActions() {
+    const custom = opts.actions ?? [];
+    const wantsReveal = opts.reveal !== false && isPasswordField();
+    const builtIn = wantsReveal && !custom.some((action) => action.name === "reveal") ? [revealAction()] : [];
+    return [...builtIn, ...custom];
+  }
+  function setRevealed(next) {
+    if (!isPasswordField() && next) return;
+    const selection = readSelection();
+    revealed = next;
+    input.type = next ? "text" : "password";
+    input.dataset.enigmaInputReveal = next ? "on" : "off";
+    render();
+    if (selection) {
+      applySelection(selection);
+      if (restoreTimer !== null) clearTimeout(restoreTimer);
+      restoreTimer = setTimeout(() => {
+        restoreTimer = null;
+        if (!destroyed && document.activeElement === input) applySelection(selection);
+      }, 0);
+    }
+    opts.onRevealChange?.(next);
+  }
+  function readSelection() {
+    if (document.activeElement !== input) return null;
+    try {
+      const { selectionStart, selectionEnd } = input;
+      return selectionStart === null || selectionEnd === null ? null : [selectionStart, selectionEnd];
+    } catch {
+      return null;
+    }
+  }
+  function applySelection(selection) {
+    try {
+      input.setSelectionRange(selection[0], selection[1]);
+    } catch {
+    }
+  }
+  function render() {
+    if (destroyed) return;
+    const selection = readSelection();
+    const current = state();
+    const actions = activeActions();
+    const seen = /* @__PURE__ */ new Set();
+    for (const action of actions) {
+      seen.add(action.name);
+      const visible = action.visible ? action.visible(current) : true;
+      let button = buttons.get(action.name);
+      if (!button) {
+        button = document.createElement("button");
+        button.type = "button";
+        button.dataset.enigmaInputAction = action.name;
+        buttons.set(action.name, button);
+        container.append(button);
+      }
+      if (!visible) {
+        button.remove();
+        buttons.delete(action.name);
+        continue;
+      }
+      if (!button.isConnected) container.append(button);
+      const label = resolve(action.label, current);
+      button.setAttribute("aria-label", label);
+      button.title = label;
+      button.disabled = current.locked;
+      if (action.pressed) button.setAttribute("aria-pressed", String(action.pressed(current)));
+      else button.removeAttribute("aria-pressed");
+      paint(button, resolve(action.icon, current));
+    }
+    for (const [name, button] of [...buttons]) {
+      if (seen.has(name)) continue;
+      button.remove();
+      buttons.delete(name);
+    }
+    container.hidden = buttons.size === 0;
+    if (selection) {
+      try {
+        input.setSelectionRange(selection[0], selection[1]);
+      } catch {
+      }
+    }
+  }
+  function onMouseDown(event) {
+    if (!event.target?.closest("[data-enigma-input-action]")) return;
+    event.preventDefault();
+  }
+  function onClick(event) {
+    const target = event.target?.closest("[data-enigma-input-action]");
+    if (!target) return;
+    const action = activeActions().find((candidate) => candidate.name === target.dataset.enigmaInputAction);
+    if (!action) return;
+    event.preventDefault();
+    action.onSelect(state());
+  }
+  const observer = typeof MutationObserver === "function" ? new MutationObserver(() => {
+    if (!isPasswordField() && revealed) revealed = false;
+    render();
+  }) : null;
+  function mount() {
+    input.dataset.enigmaInput = "";
+    container.dataset.enigmaInputActions = "";
+    container.dataset.position = opts.position ?? "end";
+    if (owned && !container.isConnected) {
+      if ((opts.position ?? "end") === "start") input.before(container);
+      else input.after(container);
+    }
+    container.addEventListener("mousedown", onMouseDown);
+    container.addEventListener("click", onClick);
+    observer?.observe(input, { attributes: true, attributeFilter: ["type", "disabled", "readonly"] });
+    render();
+  }
+  mount();
+  return {
+    get revealed() {
+      return revealed;
+    },
+    reveal(next) {
+      setRevealed(next ?? !revealed);
+    },
+    refresh: render,
+    update(next) {
+      const moved = next.position !== void 0 && next.position !== opts.position;
+      opts = { ...opts, ...next };
+      if (moved && owned) {
+        container.dataset.position = opts.position ?? "end";
+        if (opts.position === "start") input.before(container);
+        else input.after(container);
+      }
+      render();
+    },
+    destroy() {
+      destroyed = true;
+      if (restoreTimer !== null) clearTimeout(restoreTimer);
+      observer?.disconnect();
+      container.removeEventListener("mousedown", onMouseDown);
+      container.removeEventListener("click", onClick);
+      for (const button of buttons.values()) button.remove();
+      buttons.clear();
+      if (owned) container.remove();
+      delete input.dataset.enigmaInput;
+      delete input.dataset.enigmaInputReveal;
+      if (revealed) input.type = "password";
+    }
+  };
+}
+
+// src/core/search.ts
+var DEFAULT_DEBOUNCE = 120;
+function fold(value) {
+  return value.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
+}
+function readPath(item, path) {
+  let cursor = item;
+  for (const step of path.split(".")) {
+    if (cursor == null || typeof cursor !== "object") return "";
+    cursor = cursor[step];
+  }
+  return cursor == null ? "" : String(cursor);
+}
+function substringMatcher(query, items, keys) {
+  const needle = fold(query);
+  const results = [];
+  for (const item of items) {
+    const fields = keys.length ? keys : [""];
+    let best = 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;
+      const score = haystack === needle ? 0 : (at + 1) / (haystack.length + 1) + index * 0.01;
+      if (!best || score < best.score) best = { item, score, key: key || void 0 };
+    }
+    if (best) results.push(best);
+  }
+  return results.sort((left, right) => left.score - right.score);
+}
+function createSearch(options = {}) {
+  let opts = { ...options };
+  let items = opts.items ?? [];
+  let query = "";
+  let results = [];
+  let timer = null;
+  let engine = null;
+  let destroyed = false;
+  const listeners = /* @__PURE__ */ new Set();
+  function buildEngine() {
+    engine = null;
+    if (opts.matcher || !opts.fuse) return;
+    engine = new opts.fuse(items, { keys: opts.keys ?? [], includeScore: true, includeMatches: true, threshold: 0.4, ...opts.fuseOptions });
+  }
+  function run(next) {
+    const trimmed = next.trim();
+    const minLength = opts.minLength ?? 1;
+    let found;
+    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) {
+    query = next;
+    results = run(next);
+    opts.onResults?.(results, query);
+    for (const listener of listeners) listener(results, query);
+    return results;
+  }
+  function clearTimer() {
+    if (timer === null) return;
+    clearTimeout(timer);
+    timer = null;
+  }
+  buildEngine();
+  return {
+    get query() {
+      return query;
+    },
+    get results() {
+      return results;
+    },
+    search(next) {
+      if (destroyed) return;
+      clearTimer();
+      const wait = opts.debounce ?? DEFAULT_DEBOUNCE;
+      if (wait <= 0) {
+        publish(next);
+        return;
+      }
+      timer = setTimeout(() => {
+        timer = null;
+        publish(next);
+      }, wait);
+    },
+    searchNow(next) {
+      clearTimer();
+      return publish(next);
+    },
+    setItems(next) {
+      items = next;
+      buildEngine();
+      if (query) publish(query);
+    },
+    update(next) {
+      opts = { ...opts, ...next };
+      if (next.items) items = next.items;
+      buildEngine();
+      if (query) publish(query);
+    },
+    attach(input) {
+      const onInput = () => this.search(input.value);
+      const onKeyDown = (event) => {
+        if (event.key !== "Escape" || !input.value) return;
+        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;
+    }
+  };
+}
+
+export { createInput, createMarquee, createSearch };