@supermousejs/utils 2.3.0 → 2.4.0

package/dist/index.mjs

@@ -1,67 +1,78 @@
 function y(e, t, n) {
   return e + (t - e) * n;
 }
-function v(e, t, n, r) {
+function E(e, t, n, r) {
   return y(e, t, 1 - Math.exp(-n * r));
 }
-function C(e, t, n) {
+function $(e, t, n) {
   const r = ((t - e) % 360 + 540) % 360 - 180;
   return e + r * n;
 }
 function O(e, t) {
   return Math.random() * (t - e) + e;
 }
-function m(e, t, n) {
+function g(e, t, n) {
   return Math.min(Math.max(e, t), n);
 }
 function b(e, t, n = 0, r = 0) {
-  const o = e - n, c = t - r;
-  return Math.sqrt(o * o + c * c);
+  const o = e - n, s = t - r;
+  return Math.sqrt(o * o + s * s);
 }
-function h(e, t) {
+function S(e, t) {
   return Math.atan2(t, e) * (180 / Math.PI);
 }
-const j = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+function I(e) {
+  return 2 * Math.PI * e;
+}
+const se = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  angle: h,
-  clamp: m,
-  damp: v,
+  angle: S,
+  circumference: I,
+  clamp: g,
+  damp: E,
   dist: b,
   lerp: y,
-  lerpAngle: C,
+  lerpAngle: $,
   random: O
-}, Symbol.toStringTag, { value: "Module" })), _ = (e, t) => {
+}, Symbol.toStringTag, { value: "Module" })), M = (e, t) => {
   if (typeof document > "u" || document.getElementById(e)) return;
   const n = document.createElement("style");
   n.id = e, n.innerHTML = t, document.head.appendChild(n);
-}, p = /* @__PURE__ */ new WeakMap();
-function a(e, t) {
+}, m = /* @__PURE__ */ new WeakMap();
+function C(e) {
+  return e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function l(e, t) {
   if (typeof document > "u" || !e) return;
-  let n = p.get(e);
-  n || (n = {}, p.set(e, n));
-  for (const r in t) {
-    const o = t[r];
-    n[r] !== o && (e.style[r] = o, n[r] = o);
+  let n = m.get(e);
+  n || (n = {}, m.set(e, n));
+  for (const [r, o] of Object.entries(t)) {
+    if (o === void 0) continue;
+    const s = String(o), c = C(r);
+    n[c] !== s && (e.style.setProperty(c, s), n[c] = s);
   }
 }
-function u(e, t, n) {
-  a(e, { [t]: n });
+function _(e, t, n) {
+  l(e, { [t]: n });
+}
+function T(e, t) {
+  l(e, t);
 }
-function M(e, t, n, r = 0, o = 1, c = 1, s = 0, l = 0) {
-  const i = `translate3d(${t}px, ${n}px, 0) translate(-50%, -50%) rotate(${r}deg) skew(${s}deg, ${l}deg) scale(${o}, ${c})`;
-  u(e, "transform", i);
+function x(e, t, n, r = 0, o = 1, s = 1, c = 0, i = 0) {
+  const f = `translate3d(${t}px, ${n}px, 0) translate(-50%, -50%) rotate(${r}deg) skew(${c}deg, ${i}deg) scale(${o}, ${s})`;
+  l(e, { transform: f });
 }
-function w(e, t = document.body) {
+function P(e, t = document.body) {
   const n = e.getBoundingClientRect();
   if (t !== document.body) {
-    const r = t.getBoundingClientRect(), o = n.left - r.left, c = n.top - r.top;
-    return new DOMRect(o, c, n.width, n.height);
+    const r = t.getBoundingClientRect(), o = n.left - r.left, s = n.top - r.top;
+    return new DOMRect(o, s, n.width, n.height);
   }
   return n;
 }
-function d(e = "div") {
+function p(e = "div") {
   const t = document.createElement(e);
-  return a(t, {
+  return l(t, {
     position: "absolute",
     top: "0",
     left: "0",
@@ -72,134 +83,417 @@ function d(e = "div") {
   }), t;
 }
 function R(e, t) {
-  const n = d("div");
-  return a(n, {
+  const n = p("div");
+  return l(n, {
     width: `${e}px`,
     height: `${e}px`,
     borderRadius: "50%",
     backgroundColor: t
   }), n;
 }
-function T() {
-  return d("div");
+function A() {
+  return p("div");
 }
-const z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  applyStyles: a,
-  createActor: d,
+  applyStyles: T,
+  createActor: p,
   createCircle: R,
-  createDiv: T,
-  injectStyles: _,
-  projectRect: w,
-  setStyle: u,
-  setTransform: M
+  createDiv: A,
+  css: l,
+  injectStyles: M,
+  projectRect: P,
+  setStyle: _,
+  setTransform: x
 }, Symbol.toStringTag, { value: "Module" }));
-function x(e, t, n = 4e-3, r = 0.5) {
+function k(e, t, n = 4e-3, r = 0.5) {
   const o = b(e, t);
   if (o < 0.1)
     return { rotation: 0, scaleX: 1, scaleY: 1 };
-  const c = h(e, t), s = m(o * n, 0, r), l = 1 + s, i = 1 - s * 0.5;
+  const s = S(e, t), c = g(o * n, 0, r), i = 1 + c, f = 1 - c * 0.5;
   return {
-    rotation: c,
-    scaleX: l,
-    scaleY: i
+    rotation: s,
+    scaleX: i,
+    scaleY: f
   };
 }
-const P = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ue = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  getVelocityDistortion: x
-}, Symbol.toStringTag, { value: "Module" })), D = {
-  /** The top-most layer. For text, tooltips, and crucial UI. */
-  OVERLAY: "400",
-  /** The main cursor layer. For the primary Dot/Pointer. */
-  CURSOR: "300",
-  /** The secondary layer. For Rings, brackets, or followers. */
-  FOLLOWER: "200",
-  /** The background layer. For trails, sparkles, and particles. */
-  TRACE: "100"
-}, L = {
-  /** Good for entrance animations (starts fast, slows down) */
-  EASE_OUT_EXPO: "cubic-bezier(0.16, 1, 0.3, 1)",
-  /** Good for elastic/bouncy UI elements */
-  ELASTIC_OUT: "cubic-bezier(0.34, 1.56, 0.64, 1)",
-  /** Standard smooth movement */
-  SMOOTH: "ease-out"
-};
-function A(e, t) {
+  getVelocityDistortion: k
+}, Symbol.toStringTag, { value: "Module" }));
+function N(e, t) {
   return e === void 0 ? () => t : typeof e == "function" ? e : () => e;
 }
-function $(e) {
-  return "create" in e && typeof e.create == "function";
-}
-function k(e, t = {}) {
-  const n = t.name || e.name, r = t.isEnabled ?? !0;
-  if ($(e)) {
-    let o;
-    const c = [];
-    if (e.styles)
-      for (const [s, l] of Object.entries(e.styles)) {
-        const i = A(t[s], void 0), g = l;
-        c.push((E, S) => {
-          const f = i(E.state);
-          f !== void 0 && u(S, g, f);
-        });
-      }
-    return {
-      name: n,
-      isEnabled: r,
-      install(s) {
-        o = e.create(s), e.selector && s.registerHoverTarget(e.selector), this.isEnabled === !1 && (o.style.opacity = "0"), s.container.appendChild(o);
-      },
-      update(s, l) {
-        if (o) {
-          for (let i = 0; i < c.length; i++)
-            c[i](s, o);
-          e.update?.(s, o, l);
-        }
-      },
-      onDisable(s) {
-        o && (u(o, "opacity", 0), e.onDisable?.(s, o));
-      },
-      onEnable(s) {
-        o && (u(o, "opacity", 1), e.onEnable?.(s, o));
-      },
-      destroy() {
-        o && (e.cleanup?.(o), o.remove());
+function ae(e, t) {
+  const n = {};
+  for (const r of Object.keys(t))
+    n[r] = N(
+      e[r],
+      t[r]
+    );
+  return n;
+}
+const le = () => typeof window < "u" && window.matchMedia("(pointer: fine)").matches, h = "[supermouse] doctor", a = {
+  brand: "color: #ffffff; background: #42b883; padding: 2px 4px; border-radius: 2px; font-weight: 700;",
+  error: "color: #ffffff; background: #f43f5e; padding: 2px 4px; border-radius: 2px; font-weight: 700;",
+  warn: "color: #1f2937; background: #f59e0b; padding: 2px 4px; border-radius: 2px; font-weight: 700;",
+  info: "color: #ffffff; background: #3b82f6; padding: 2px 4px; border-radius: 2px; font-weight: 700;",
+  dim: "color: #6b7280;",
+  code: "color: #a1a1aa; font-weight: 500;",
+  hint: "color: #10b981; font-weight: 600;"
+};
+function fe(e) {
+  const t = e ? D(e) : w();
+  H(t);
+}
+function D(e) {
+  const t = e.plugins ?? [], n = e.options ?? {};
+  return [
+    ...j(t),
+    ...z(t),
+    ...V(t),
+    ...B(n),
+    ...U(n),
+    ...G(n, e.state),
+    ...w(e)
+  ];
+}
+function v(e) {
+  return e.element !== void 0 || typeof e.update == "function" && e.update.length >= 3;
+}
+function L(e) {
+  return e.element !== void 0 ? !1 : typeof e.update == "function" && e.update.length === 2;
+}
+function j(e) {
+  const t = [];
+  for (const n of e) {
+    const r = n.name ?? "unknown", o = n.priority ?? 0;
+    L(n) && o >= 0 && t.push({
+      severity: "warn",
+      code: "PRIORITY_LOGIC",
+      message: `Plugin "${r}" has priority ${o} but appears to be a logic plugin (should run before physics).`,
+      hint: `Set priority to a negative value (e.g. -10) on "${r}"`
+    }), v(n) && o < 0 && t.push({
+      severity: "warn",
+      code: "PRIORITY_VISUAL",
+      message: `Plugin "${r}" has priority ${o} but appears to be a visual plugin (should run after physics).`,
+      hint: "Remove priority or use a positive value"
+    });
+  }
+  return t;
+}
+function z(e) {
+  const t = e.find((r) => r.name === "states");
+  if (!t) return [];
+  const n = t.priority ?? 0;
+  return n >= 0 ? [
+    {
+      severity: "error",
+      code: "STATES_PRIORITY",
+      message: `States plugin has priority ${n}. It must run before all visual plugins.`,
+      hint: "Set priority: -999 on the States plugin"
+    }
+  ] : [];
+}
+function V(e) {
+  const t = [];
+  for (const n of e) {
+    const r = n.name ?? "unknown";
+    v(n) && !n.element && t.push({
+      severity: "warn",
+      code: "MISSING_ELEMENT",
+      message: `Plugin "${r}" has no 'element' property — disablePlugin() will not hide its DOM.`,
+      hint: "Assign plugin.element = el in install(), or use definePlugin()"
+    });
+  }
+  return t;
+}
+function B(e) {
+  const t = document.querySelectorAll('[class*="supermouse-scope-"]');
+  return t.length <= 1 ? [] : e.container !== document.body ? [] : [
+    {
+      severity: "warn",
+      code: "MULTI_INSTANCE",
+      message: `Detected ${t.length} Supermouse instances. The body instance may conflict with scoped ones.`,
+      hint: "Use suspend() / resume() or scope instances to different containers"
+    }
+  ];
+}
+function U(e) {
+  const t = e.container;
+  return !t || t === document.body ? [] : window.getComputedStyle(t).position !== "static" ? [] : [
+    {
+      severity: "info",
+      code: "CONTAINER_POSITION",
+      message: "Container has position:static. Supermouse will mutate it to relative.",
+      hint: "Set position: relative in your CSS to avoid the mutation"
+    }
+  ];
+}
+function G(e, t) {
+  const n = e.cursor;
+  if (n === void 0) return [];
+  const r = ["auto", "custom", "native", "both"];
+  return typeof n == "string" && !r.includes(n) ? [
+    {
+      severity: "error",
+      code: "INVALID_CURSOR_MODE",
+      message: `Invalid cursor mode "${n}". Expected one of: ${r.join(", ")}.`,
+      hint: `Set cursor to one of: ${r.join(", ")}`
+    }
+  ] : n === "both" && e.container !== document.body && t?.cursorMode === "both" ? [
+    {
+      severity: "warn",
+      code: "NESTED_BOTH_MODE",
+      message: "Scoped instance uses cursor: 'both'. In nested scopes, the native cursor may be hidden by the outer instance's cursor suppression.",
+      hint: "Offset the custom cursor when cursorMode === 'both' or consider a single-instance scope architecture"
+    }
+  ] : [];
+}
+function w(e) {
+  const t = [];
+  if (!Array.from(document.querySelectorAll("style")).some(
+    (o) => o.id.startsWith("supermouse-style-")
+  ))
+    return [
+      {
+        severity: "error",
+        code: "NOT_INITIALIZED",
+        message: "Supermouse has not been initialized yet.",
+        hint: "Call doctor() after new Supermouse() has run"
       }
-    };
-  } else
+    ];
+  document.querySelectorAll('[style*="cursor"]').forEach((o) => {
+    const s = o.getAttribute("style") ?? "";
+    s.includes("cursor: none") || s.includes("cursor") && t.push({
+      severity: "warn",
+      code: "INLINE_CURSOR",
+      message: "Element has an inline cursor style that may override Supermouse.",
+      hint: "Remove inline cursor styles"
+    });
+  });
+  const r = document.querySelector(".supermouse-scope-0");
+  if (r) {
+    const o = r.classList.contains("supermouse-hide-0"), s = e?.state?.cursorMode ?? "auto", c = e?.state?.hasReceivedInput ?? !0, i = e?.input?.isEnabled ?? !0;
+    s === "custom" && i && c && !o && t.push({
+      severity: "warn",
+      code: "BODY_CURSOR_LEAK",
+      message: "Body instance has cursor: 'custom' but native cursor suppression class is not applied.",
+      hint: "Check that the animation loop is running and setCursor('custom') was called"
+    });
+  }
+  return t;
+}
+function H(e) {
+  if (e.length === 0) {
+    console.log(`%c${h}%c No issues found`, a.brand, a.dim);
+    return;
+  }
+  const t = [
+    d(e, "error", "error"),
+    d(e, "warn", "warning"),
+    d(e, "info", "note")
+  ].filter((n) => n !== null).join(" · ");
+  console.log(`%c${h}%c ${t}`, a.brand, a.dim);
+  for (const n of e)
+    Y(n);
+}
+function d(e, t, n) {
+  const r = e.filter((o) => o.severity === t).length;
+  return r > 0 ? `${r} ${n}${r > 1 ? "s" : ""}` : null;
+}
+function Y(e) {
+  console.log(
+    `%c${e.severity.toUpperCase()}%c %c${e.code}%c ${e.message}`,
+    a[e.severity],
+    a.dim,
+    a.code,
+    "color: inherit;"
+  ), e.hint && console.log(`  %c→%c ${e.hint}`, a.hint, a.dim);
+}
+function q(e) {
+  return typeof e.create == "function";
+}
+function de(e, t = {}) {
+  const n = t.name ?? e.name, r = t.isEnabled ?? !0;
+  if (!q(e))
     return {
       ...e,
       name: n,
       isEnabled: r
     };
+  let o = null, s = !1;
+  const c = (i) => {
+    if (o)
+      return e.beforeDisable?.(i, o);
+  };
+  return {
+    name: n,
+    isEnabled: r,
+    priority: e.priority,
+    install(i) {
+      if (o = e.create(i), !(o instanceof HTMLElement) && !(o instanceof SVGElement)) {
+        console.warn(
+          `[supermouse] Plugin "${n}" create() did not return an HTMLElement or SVGElement.`
+        );
+        return;
+      }
+      this.element = i.stage.appendChild(o), s = !0, e.selector && i.registerHoverTarget(e.selector), r || (o.style.display = "none"), e.install?.(i);
+    },
+    update(i, f) {
+      !o || !s || e.update?.(i, o, f);
+    },
+    onEnable(i) {
+      o && (o.style.display = "", e.onEnable?.(i, o));
+    },
+    async onBeforeDisable(i) {
+      await c(i);
+    },
+    onDisable(i) {
+      o && e.onDisable?.(i, o);
+    },
+    destroy(i) {
+      o && (e.cleanup?.(i, o), o.remove(), o = null, s = !1), e.destroy?.(i);
+    }
+  };
 }
-function I() {
-  if (console.group("🐭 Supermouse Doctor"), !Array.from(document.querySelectorAll("style")).some(
-    (r) => r.id.startsWith("supermouse-style-")
-  )) {
-    console.warn("[x] Supermouse has not been initialized yet."), console.warn("   Please call doctor() after `new Supermouse()` has run."), console.groupEnd();
-    return;
-  }
-  const t = [];
-  document.querySelectorAll('[style*="cursor"]').forEach((r) => {
-    r.getAttribute("style")?.includes("cursor: none") || t.push({
-      el: r,
-      reason: 'Element has inline "cursor" style. Remove it and let Supermouse handle state.'
-    });
-  }), document.body.style.cursor !== "none" && console.warn(
-    '[Global] document.body.style.cursor is not "none". Ensure { hideCursor: true } is passed to Supermouse.'
-  ), t.length > 0 ? (console.warn(`Found ${t.length} potential conflicts:`), t.forEach((r) => console.warn(`[${r.reason}]`, r.el)), console.info(
-    'Tip: Avoid setting "cursor: pointer" manually. Use plugins or `rules` config instead.'
-  )) : console.log("[ok] No obvious inline-style conflicts found."), console.groupEnd();
+function u(e, t = {}) {
+  const n = document.createElementNS("http://www.w3.org/2000/svg", e);
+  for (const [r, o] of Object.entries(t))
+    n.setAttribute(r, String(o));
+  return n;
+}
+function F(e, t) {
+  for (const [n, r] of Object.entries(t))
+    e.setAttribute(n, String(r));
+}
+function W(e = {}) {
+  return u("g", e);
+}
+function X(e = {}) {
+  return u("circle", e);
+}
+function K(e = {}) {
+  return u("rect", e);
+}
+function Z(e, t = {}) {
+  const n = u("path", t);
+  return e !== void 0 && n.setAttribute("d", e), n;
+}
+function J(e = {}, t) {
+  const n = u("text", e);
+  return t !== void 0 && (n.textContent = t), n;
+}
+function Q(e, t = {}) {
+  const n = u("textPath", { ...t, href: e });
+  return n.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", e), n;
 }
+function ee(e, t = {}, n = []) {
+  const r = u("filter", { id: e, ...t });
+  return n.forEach((o) => r.appendChild(o)), r;
+}
+function te(e = 0, t = {}) {
+  return u("feGaussianBlur", {
+    stdDeviation: String(e),
+    ...t
+  });
+}
+function ne(e = 0.1, t = {}) {
+  return u("feTurbulence", {
+    baseFrequency: String(e),
+    ...t
+  });
+}
+function re(e) {
+  return u("feMergeNode", e ? { in: e } : {});
+}
+function oe(e = []) {
+  const t = u("feMerge");
+  return e.forEach((n) => t.appendChild(n)), t;
+}
+function ie(e) {
+  const t = Math.round(e * 100) / 100;
+  return `
+    M 0, -${t}
+    A ${t},${t} 0 1,1 0,${t}
+    A ${t},${t} 0 1,1 0,-${t}
+  `.replace(/\s+/g, " ").trim();
+}
+const pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  circle: X,
+  circlePath: ie,
+  createSVGElement: u,
+  filter: ee,
+  gaussianBlur: te,
+  group: W,
+  merge: oe,
+  mergeNode: re,
+  path: Z,
+  rect: K,
+  setSVGAttrs: F,
+  text: J,
+  textPath: Q,
+  turbulence: ne
+}, Symbol.toStringTag, { value: "Module" })), me = {
+  /** Good for entrance animations (starts fast, slows down) */
+  EASE_OUT_EXPO: "cubic-bezier(0.16, 1, 0.3, 1)",
+  /** Good for elastic/bouncy UI elements */
+  ELASTIC_OUT: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  /** Standard smooth movement */
+  SMOOTH: "ease-out"
+}, he = {
+  /** The top-most layer. For text, tooltips, and crucial UI. */
+  OVERLAY: "400",
+  /** The main cursor layer. For the primary Dot/Pointer. */
+  CURSOR: "300",
+  /** The secondary layer. For Rings, brackets, or followers. */
+  FOLLOWER: "200",
+  /** The background layer. For trails, sparkles, and particles. */
+  TRACE: "100"
+};
 export {
-  L as Easings,
-  D as Layers,
-  k as definePlugin,
-  I as doctor,
-  z as dom,
-  P as effects,
-  j as math,
-  A as normalize
+  me as Easings,
+  he as Layers,
+  S as angle,
+  T as applyStyles,
+  X as circle,
+  ie as circlePath,
+  I as circumference,
+  g as clamp,
+  p as createActor,
+  R as createCircle,
+  A as createDiv,
+  u as createSVGElement,
+  l as css,
+  E as damp,
+  de as definePlugin,
+  b as dist,
+  fe as doctor,
+  ce as dom,
+  ue as effects,
+  ee as filter,
+  te as gaussianBlur,
+  k as getVelocityDistortion,
+  W as group,
+  le as hasFinePointer,
+  M as injectStyles,
+  y as lerp,
+  $ as lerpAngle,
+  se as math,
+  oe as merge,
+  re as mergeNode,
+  N as normalize,
+  ae as normalizeAll,
+  Z as path,
+  P as projectRect,
+  O as random,
+  K as rect,
+  F as setSVGAttrs,
+  _ as setStyle,
+  x as setTransform,
+  pe as svg,
+  J as text,
+  Q as textPath,
+  ne as turbulence
 };