@supermousejs/labs 2.4.4-beta.3 → 2.4.4-beta.4

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @supermousejs/labs
 
+## 2.4.4-beta.4
+
+### Patch Changes
+
+- cb9bf9a: Beta.4
+
+  **Added**
+  - `state.authoredCursor` — the cursor value the page intends at the element under the pointer, resolved as if Supermouse's suppression were not active. Populated on every pointerTarget change, in all cursor modes. Read this to know what the page wants (`canvas { cursor: crosshair }`, `.drag-handle { cursor: grab }`, `[disabled] { cursor: not-allowed }`) rather than just whether the OS cursor should be shown (`state.isNative`).
+  - `state.pointerTarget` — the raw element under the pointer, regardless of hover selectors. Distinct from `state.hoverTarget`, which reports the nearest ancestor matching a hover selector.
+
+  **Fixed**
+  - Cursor detection in `auto` mode no longer reads its own suppression output. The previous implementation called `getComputedStyle(target).cursor` while the scope's hide class was active, so it always saw `"none"` and never triggered native fallback for authored exotic cursors. A probe attribute (`data-sm-probe`) is now excluded from every generated suppression rule, so the read sees the page's intended value.
+
+  **Changed**
+  - `@supermousejs/labs`: `SmartIcon` now reads `state.pointerTarget` and `state.authoredCursor` instead of relying on a broad hover-selector sweep. Hovering a `<p>` no longer sets `state.isHover` on the primary scope.
+  - `@supermousejs/labs`: `SmartIconOptions.useSemanticTags` renamed to `useSemanticDetection`. The old name referred to a `registerHoverTarget` sweep that no longer runs.
+
+  **Internal**
+  - Size budget raised to 6.5 kB gzip / 5.75 kB brotli to accommodate the beta.4 surface. Will be re-tightened once the shape settles.
+
+- Updated dependencies [cb9bf9a]
+  - @supermousejs/core@2.5.0-beta.4
+  - @supermousejs/utils@2.4.4-beta.4
+
 ## 2.4.4-beta.3
 
 ### Patch Changes

package/dist/index.d.ts

@@ -14,7 +14,14 @@ export declare interface SmartIconOptions {
     isEnabled?: boolean;
     icons: SmartIconMap;
     defaultState?: string;
-    useSemanticTags?: boolean;
+    /**
+     * If true (default), resolve icon state from the semantic meaning of the
+     * pointer target — text inputs become "text", links become "pointer",
+     * authored cursors feed the "text"/"grab" icons. If false, only
+     * `data-supermouse-icon` attributes drive state, with `defaultState`
+     * as the fallback.
+     */
+    useSemanticDetection?: boolean;
     transitionDuration?: number;
     /** Minimum ms a state must be requested before committing. Default 80. */
     switchDelay?: number;

package/dist/index.mjs

@@ -1,48 +1,41 @@
-import { normalizeAll as X, definePlugin as N, css as x, math as M, createActor as j, Layers as U, injectStyles as tt, damp as V, effects as et, lerpAngle as rt, setTransform as D, createCircle as _, normalize as nt, circlePath as st, circumference as ot, createSVGElement as G, path as it, text as at, textPath as lt } from "@supermousejs/utils";
-function ct(t, e) {
-  const f = t.tagName.toLowerCase();
-  if (f === "input" || f === "textarea" || t.isContentEditable) {
-    const a = t.type;
-    if (["button", "submit", "checkbox", "radio", "range", "color"].includes(a)) {
-      if (e.pointer)
+import { normalizeAll as X, definePlugin as N, css as x, math as M, createActor as H, Layers as U, injectStyles as tt, damp as j, effects as et, lerpAngle as nt, setTransform as I, createCircle as _, normalize as st, circlePath as ot, circumference as rt, createSVGElement as G, path as it, text as at, textPath as lt } from "@supermousejs/utils";
+function ct(t, n, u) {
+  const a = t.tagName.toLowerCase(), r = t.isContentEditable || t.closest(
+    '[contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]'
+  ) !== null;
+  if (a === "input" || a === "textarea" || r) {
+    const g = t.type;
+    if (["button", "submit", "checkbox", "radio", "range", "color"].includes(g)) {
+      if (n.pointer)
         return "pointer";
-    } else if (e.text) return "text";
-  } else if ((f === "a" || f === "button" || t.closest("a") || t.closest("button")) && e.pointer)
+    } else if (n.text) return "text";
+  } else if ((a === "a" || a === "button" || t.closest("a") || t.closest("button")) && n.pointer)
     return "pointer";
-  if (e.text && ["p", "span", "h1", "h2", "h3", "h4", "h5", "h6", "li", "blockquote", "code", "pre"].includes(
-    f
-  ))
-    return "text";
-  if (e.text || e.grab) {
-    const a = window.getComputedStyle(t).cursor;
-    if (e.text && a === "text") return "text";
-    if (e.grab && a === "grab") return "grab";
-  }
-  return null;
+  return n.text && t.closest("p, span, h1, h2, h3, h4, h5, h6, li, blockquote, code, pre") || n.text && u === "text" ? "text" : n.grab && u === "grab" ? "grab" : null;
 }
 const xt = (t) => {
-  let e, f = t.defaultState ?? "default", a = null, i, g = "idle", c = 0, C = f, u = null, n = 0, o = 0, z = 0;
+  let n, u = t.defaultState ?? "default", a = null, r, g = "idle", c = 0, C = u, f = null, s = 0, i = 0, z = 0;
   const d = X(t, {
     size: 24,
     color: "",
     followStrategy: "smooth",
     anchor: "center",
     rotateWithVelocity: !1
-  }), p = t.useSemanticTags ?? !0, m = t.transitionDuration ?? 200, r = t.switchDelay ?? 80, h = t.offset?.[0] ?? 0, y = t.offset?.[1] ?? 0, A = t.defaultState ?? "default", b = m / 2;
-  function v(s) {
-    x(e, { transform: `scale(${s})` });
+  }), S = t.useSemanticDetection ?? !0, m = t.transitionDuration ?? 200, e = t.switchDelay ?? 80, h = t.offset?.[0] ?? 0, y = t.offset?.[1] ?? 0, w = t.defaultState ?? "default", b = m / 2;
+  function v(o) {
+    x(n, { transform: `scale(${o})` });
   }
-  function S(s) {
-    f = s, e.innerHTML = t.icons[s] ?? "";
+  function p(o) {
+    u = o, n.innerHTML = t.icons[o] ?? "";
   }
   let l;
   return N(
     {
       name: t.name ?? "smart-icon",
       selector: "[data-supermouse-icon]",
-      create: (s) => {
-        const w = j("div");
-        return x(w, { zIndex: U.CURSOR }), p && s.registerHoverTarget("p, span, h1, h2, h3, h4, h5, h6, li, blockquote, code, pre"), e = j("div"), x(e, {
+      create: (o) => {
+        const A = H("div");
+        return x(A, { zIndex: U.CURSOR }), n = H("div"), x(n, {
           width: "100%",
           height: "100%",
           display: "flex",
@@ -51,7 +44,7 @@ const xt = (t) => {
           transformOrigin: "center center",
           transform: "scale(1)",
           transition: `transform ${b}ms cubic-bezier(0.16, 1, 0.3, 1)`
-        }), e.innerHTML = t.icons[f] ?? "", tt(
+        }), n.innerHTML = t.icons[u] ?? "", tt(
           "supermouse-smart-icon-styles",
           `
           @keyframes sm {
@@ -62,27 +55,27 @@ const xt = (t) => {
             animation: sm 1s linear infinite;
           }
           `
-        ), l = s.state.cursorMode, s.setCursor("custom"), w.appendChild(e), w;
+        ), l = o.state.cursorMode, o.setCursor("custom"), A.appendChild(n), A;
       },
-      update: (s, w, $) => {
-        const T = performance.now(), F = $ / 1e3, O = t.icons, k = s.state.hoverTarget, H = !!k, I = H && k !== a;
-        let R = A;
-        if (H) {
-          I && (a = k, i = p ? ct(k, O) : null);
-          const L = s.state.interaction?.icon;
-          L && O[L] ? R = L : i && (R = i);
+      update: (o, A, $) => {
+        const R = performance.now(), F = $ / 1e3, D = t.icons, E = o.state.pointerTarget, V = !!E, O = V && E !== a;
+        let T = w;
+        if (V) {
+          O && (a = E, r = S ? ct(E, D, o.state.authoredCursor) : null);
+          const k = o.state.interaction?.icon;
+          k && D[k] ? T = k : r && (T = r);
         } else
-          a && (a = null, i = null);
-        R !== f && g === "idle" ? !!O[R] || R === A ? I ? (S(R), v(1), u = null, n = 0) : R !== u ? (u = R, n = 0) : (n += $, n >= r && (C = R, g = "out", c = T, v(0), u = null, n = 0)) : (u = null, n = 0) : R === f && (u = null, n = 0), g === "out" && T - c >= b && (S(C), g = "in", c = T, v(0)), g === "in" && T - c >= b && (g = "idle", v(1));
-        const E = d.size(s.state), J = d.color(s.state);
-        x(w, {
-          width: `${E}px`,
-          height: `${E}px`,
+          a && (a = null, r = null);
+        T !== u && g === "idle" ? !!D[T] || T === w ? O ? (p(T), v(1), f = null, s = 0) : T !== f ? (f = T, s = 0) : (s += $, s >= e && (C = T, g = "out", c = R, v(0), f = null, s = 0)) : (f = null, s = 0) : T === u && (f = null, s = 0), g === "out" && R - c >= b && (p(C), g = "in", c = R, v(0)), g === "in" && R - c >= b && (g = "idle", v(1));
+        const L = d.size(o.state), J = d.color(o.state);
+        x(A, {
+          width: `${L}px`,
+          height: `${L}px`,
           color: J || "inherit"
         });
         let P = 0, W = 0;
-        const Y = E / 2;
-        switch (d.anchor(s.state)) {
+        const Y = L / 2;
+        switch (d.anchor(o.state)) {
           case "center":
             P = -Y, W = -Y;
             break;
@@ -90,123 +83,123 @@ const xt = (t) => {
             P = 0, W = 0;
             break;
           case "top-right":
-            P = -E, W = 0;
+            P = -L, W = 0;
             break;
           case "bottom-left":
-            P = 0, W = -E;
+            P = 0, W = -L;
             break;
           case "bottom-right":
-            P = -E, W = -E;
+            P = -L, W = -L;
             break;
         }
-        const K = f === "pointer" || f === "text";
-        if (d.rotateWithVelocity(s.state) && !K && !s.state.reducedMotion) {
-          const { x: L, y: B } = s.state.velocity;
-          M.dist(L, B) > 1 && (z = M.angle(L, B));
+        const K = u === "pointer" || u === "text";
+        if (d.rotateWithVelocity(o.state) && !K && !o.state.reducedMotion) {
+          const { x: k, y: B } = o.state.velocity;
+          M.dist(k, B) > 1 && (z = M.angle(k, B));
           const Z = 1 - Math.exp(-20 * F);
-          o = M.lerpAngle(o, z, Z);
+          i = M.lerpAngle(i, z, Z);
         } else {
-          const L = 1 - Math.exp(-20 * F);
-          o = M.lerpAngle(o, 0, L);
+          const k = 1 - Math.exp(-20 * F);
+          i = M.lerpAngle(i, 0, k);
         }
-        const q = d.followStrategy(s.state) === "raw" ? s.state.pointer : s.state.smooth, Q = `translate3d(${q.x + h + P}px, ${q.y + y + W}px, 0) rotate(${o}deg)`;
-        w.style.transform = Q;
+        const q = d.followStrategy(o.state) === "raw" ? o.state.pointer : o.state.smooth, Q = `translate3d(${q.x + h + P}px, ${q.y + y + W}px, 0) rotate(${i}deg)`;
+        A.style.transform = Q;
       },
-      cleanup(s) {
-        s.setCursor(l);
+      cleanup(o) {
+        o.setCursor(l);
       }
     },
     t
   );
 }, gt = (t = {}) => {
-  const e = X(t, {
+  const n = X(t, {
     size: 20,
     hoverSize: 40,
     color: "#ffffff",
     fill: "transparent",
     borderWidth: 2
   });
-  let f = 20, a = 20, i = 0, g = 1, c = 1;
+  let u = 20, a = 20, r = 0, g = 1, c = 1;
   const C = 150;
-  let u = null;
+  let f = null;
   return N(
     {
       name: t.name ?? "smart-ring",
       selector: "[data-supermouse-color]",
-      create: (n) => {
-        const o = _(e.size(n.state), e.fill(n.state));
-        return x(o, {
+      create: (s) => {
+        const i = _(n.size(s.state), n.fill(s.state));
+        return x(i, {
           zIndex: U.FOLLOWER,
           mixBlendMode: t.mixBlendMode ?? "difference",
           transition: "border-radius 0.2s ease",
           borderStyle: "solid",
           opacity: "0"
-        }), o;
+        }), i;
       },
-      onEnable(n, o) {
-        const z = e.size(n.state);
-        f = z * 0.5, a = z * 0.5, i = 0, g = 1, c = 1, clearTimeout(u ?? void 0), o.style.display = "block", o.style.opacity = "1", o.style.transition = "border-radius 0.2s ease";
+      onEnable(s, i) {
+        const z = n.size(s.state);
+        u = z * 0.5, a = z * 0.5, r = 0, g = 1, c = 1, clearTimeout(f ?? void 0), i.style.display = "block", i.style.opacity = "1", i.style.transition = "border-radius 0.2s ease";
       },
-      beforeDisable(n, o) {
-        const { x: z, y: d } = n.state.smooth;
-        return o.style.transition = `opacity ${C}ms ease, transform ${C}ms ease`, o.style.opacity = "0", D(o, z, d, 0, 0.2, 0.2), new Promise((p) => {
-          u = setTimeout(() => {
-            o.style.transition = "border-radius 0.2s ease", p();
+      beforeDisable(s, i) {
+        const { x: z, y: d } = s.state.smooth;
+        return i.style.transition = `opacity ${C}ms ease, transform ${C}ms ease`, i.style.opacity = "0", I(i, z, d, 0, 0.2, 0.2), new Promise((S) => {
+          f = setTimeout(() => {
+            i.style.transition = "border-radius 0.2s ease", S();
           }, C);
         });
       },
-      update: (n, o, z) => {
-        if (o.style.display === "none") return;
-        const d = z / 1e3, p = e.size(n.state), m = n.state.shape;
-        let r = p, h = p, y = "50%", A = e.color(n.state);
-        m ? (r = m.width, h = m.height, y = `${m.borderRadius}px`) : (n.state.isHover && (r = e.hoverSize(n.state), h = e.hoverSize(n.state)), n.state.isDown && (r *= 0.9, h *= 0.9)), n.state.interaction.color && (A = n.state.interaction.color), f = V(f, r, 20, d), a = V(a, h, 20, d), x(o, {
-          width: `${f}px`,
+      update: (s, i, z) => {
+        if (i.style.display === "none") return;
+        const d = z / 1e3, S = n.size(s.state), m = s.state.shape;
+        let e = S, h = S, y = "50%", w = n.color(s.state);
+        m ? (e = m.width, h = m.height, y = `${m.borderRadius}px`) : (s.state.isHover && (e = n.hoverSize(s.state), h = n.hoverSize(s.state)), s.state.isDown && (e *= 0.9, h *= 0.9)), s.state.interaction.color && (w = s.state.interaction.color), u = j(u, e, 20, d), a = j(a, h, 20, d), x(i, {
+          width: `${u}px`,
           height: `${a}px`,
           borderRadius: y,
-          borderColor: A,
-          backgroundColor: e.fill(n.state),
-          borderWidth: `${e.borderWidth(n.state)}px`,
+          borderColor: w,
+          backgroundColor: n.fill(s.state),
+          borderWidth: `${n.borderWidth(s.state)}px`,
           opacity: "1"
         });
-        let b = 0, v = 1, S = 1;
-        if (!m && t.enableSkew && !n.state.reducedMotion) {
-          const { displacement: w } = n.state, $ = et.getVelocityDistortion(w.x, w.y);
-          b = $.rotation, v = $.scaleX, S = $.scaleY;
-          const T = 1 - Math.exp(-20 * d);
-          i = rt(i, b, T);
+        let b = 0, v = 1, p = 1;
+        if (!m && t.enableSkew && !s.state.reducedMotion) {
+          const { displacement: A } = s.state, $ = et.getVelocityDistortion(A.x, A.y);
+          b = $.rotation, v = $.scaleX, p = $.scaleY;
+          const R = 1 - Math.exp(-20 * d);
+          r = nt(r, b, R);
         } else
-          i = 0;
-        g = V(g, v, 20, d), c = V(c, S, 20, d);
-        const { x: l, y: s } = n.state.smooth;
-        D(o, l, s, i, g, c);
+          r = 0;
+        g = j(g, v, 20, d), c = j(c, p, 20, d);
+        const { x: l, y: o } = s.state.smooth;
+        I(i, l, o, r, g, c);
       }
     },
     t
   );
 }, yt = (t = {}) => {
-  const e = t.count ?? 30, f = t.decay ?? 2.5, a = t.frequency ?? 10, i = t.scatter ?? 5, g = nt(t.color, "#ff00ff"), c = [];
-  let C = 0, u = 0, n = !1, o = 0;
-  const z = (d, p, m) => {
-    const r = c.find((b) => !b.isActive);
-    if (!r) return;
-    r.isActive = !0, r.life = 1, r.x = d + M.random(-i, i), r.y = p + M.random(-i, i);
+  const n = t.count ?? 30, u = t.decay ?? 2.5, a = t.frequency ?? 10, r = t.scatter ?? 5, g = st(t.color, "#ff00ff"), c = [];
+  let C = 0, f = 0, s = !1, i = 0;
+  const z = (d, S, m) => {
+    const e = c.find((b) => !b.isActive);
+    if (!e) return;
+    e.isActive = !0, e.life = 1, e.x = d + M.random(-r, r), e.y = S + M.random(-r, r);
     const h = M.random(0, Math.PI * 2), y = M.random(0.5, 1.5);
-    r.vx = Math.cos(h) * y, r.vy = Math.sin(h) * y, r.scale = M.random(0.5, 1.2), r.color = m;
-    const A = M.random(2, 5);
-    x(r.el, {
-      width: `${A}px`,
-      height: `${A}px`,
+    e.vx = Math.cos(h) * y, e.vy = Math.sin(h) * y, e.scale = M.random(0.5, 1.2), e.color = m;
+    const w = M.random(2, 5);
+    x(e.el, {
+      width: `${w}px`,
+      height: `${w}px`,
       backgroundColor: m,
       opacity: "1"
-    }), D(r.el, r.x, r.y, 0, r.scale, r.scale);
+    }), I(e.el, e.x, e.y, 0, e.scale, e.scale);
   };
   return N(
     {
       name: t.name ?? "sparkles",
       create: () => {
-        const d = j("div");
+        const d = H("div");
         x(d, { zIndex: U.TRACE });
-        for (let p = 0; p < e; p++) {
+        for (let S = 0; S < n; S++) {
           const m = _(0, "transparent");
           x(m, {
             opacity: "0",
@@ -225,27 +218,27 @@ const xt = (t) => {
         }
         return d;
       },
-      update: (d, p, m) => {
-        const r = m / 1e3, { x: h, y } = d.state.pointer;
-        n || (C = h, u = y, n = !0);
-        const A = h - C, b = y - u, v = Math.hypot(A, b);
-        if (o += v, o > a) {
-          const S = g(d.state), l = Math.floor(o / a);
-          for (let s = 0; s < l; s++) {
-            const w = s / l;
-            z(C + A * w, u + b * w, S);
+      update: (d, S, m) => {
+        const e = m / 1e3, { x: h, y } = d.state.pointer;
+        s || (C = h, f = y, s = !0);
+        const w = h - C, b = y - f, v = Math.hypot(w, b);
+        if (i += v, i > a) {
+          const p = g(d.state), l = Math.floor(i / a);
+          for (let o = 0; o < l; o++) {
+            const A = o / l;
+            z(C + w * A, f + b * A, p);
           }
-          o = o % a;
+          i = i % a;
         }
-        C = h, u = y;
-        for (let S = 0; S < e; S++) {
-          const l = c[S];
+        C = h, f = y;
+        for (let p = 0; p < n; p++) {
+          const l = c[p];
           if (l.isActive)
-            if (l.x += l.vx * r * 60, l.y += l.vy * r * 60, l.life -= f * r, l.life <= 0)
+            if (l.x += l.vx * e * 60, l.y += l.vy * e * 60, l.life -= u * e, l.life <= 0)
               l.isActive = !1, x(l.el, { opacity: "0" });
             else {
-              const s = l.scale * l.life;
-              x(l.el, { opacity: String(l.life) }), D(l.el, l.x, l.y, 0, s, s);
+              const o = l.scale * l.life;
+              x(l.el, { opacity: String(l.life) }), I(l.el, l.x, l.y, 0, o, o);
             }
         }
       },
@@ -256,27 +249,27 @@ const xt = (t) => {
     t
   );
 };
-function dt(t, e) {
-  return e ? t + " " : t;
+function dt(t, n) {
+  return n ? t + " " : t;
 }
 let ft = 0;
 const pt = (t = {}) => {
-  let e, f, a, i, g, c;
-  const C = `supermouse-text-ring-path-${ft++}`, u = X(t, {
+  let n, u, a, r, g, c;
+  const C = `supermouse-text-ring-path-${ft++}`, f = X(t, {
     text: "SUPERMOUSE • SUPERMOUSE • ",
     radius: 60,
     fontSize: 12,
     speed: 30,
     opacity: 1,
     color: "currentColor"
-  }), n = t.className ?? "", o = t.spread ?? !0;
-  let z = 0, d = "", p = 0, m = 0;
+  }), s = t.className ?? "", i = t.spread ?? !0;
+  let z = 0, d = "", S = 0, m = 0;
   return N(
     {
       name: t.name ?? "text-ring",
       selector: "[data-supermouse-text-ring]",
-      create: (r) => {
-        const h = j("div");
+      create: (e) => {
+        const h = H("div");
         x(h, {
           zIndex: U.FOLLOWER,
           transition: "opacity 0.2s ease",
@@ -287,53 +280,53 @@ const pt = (t = {}) => {
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
-        }), n && h.classList.add(...n.split(" ").filter(Boolean)), e = G("svg"), x(e, {
+        }), s && h.classList.add(...s.split(" ").filter(Boolean)), n = G("svg"), x(n, {
           overflow: "visible",
           position: "absolute",
           left: "0",
           top: "0"
-        }), f = it(void 0, { id: C, fill: "none" });
-        const y = u.fontSize(r.state);
-        return m = y, i = at({ "font-size": `${y}px`, fill: "currentColor" }), x(i, {
+        }), u = it(void 0, { id: C, fill: "none" });
+        const y = f.fontSize(e.state);
+        return m = y, r = at({ "font-size": `${y}px`, fill: "currentColor" }), x(r, {
           textTransform: "uppercase",
           letterSpacing: "2px"
-        }), a = lt(`#${C}`, { startOffset: "0%" }), g = document.createTextNode(""), a.appendChild(g), i.appendChild(a), e.appendChild(f), e.appendChild(i), c = G("text"), x(c, {
+        }), a = lt(`#${C}`, { startOffset: "0%" }), g = document.createTextNode(""), a.appendChild(g), r.appendChild(a), n.appendChild(u), n.appendChild(r), c = G("text"), x(c, {
           visibility: "hidden",
           position: "absolute",
           pointerEvents: "none",
           whiteSpace: "nowrap"
-        }), c.setAttribute("font-size", `${y}px`), c.setAttribute("font-family", getComputedStyle(i).fontFamily || "sans-serif"), c.setAttribute("font-weight", getComputedStyle(i).fontWeight || "normal"), c.setAttribute("font-style", getComputedStyle(i).fontStyle || "normal"), e.appendChild(c), h.appendChild(e), h;
+        }), c.setAttribute("font-size", `${y}px`), c.setAttribute("font-family", getComputedStyle(r).fontFamily || "sans-serif"), c.setAttribute("font-weight", getComputedStyle(r).fontWeight || "normal"), c.setAttribute("font-style", getComputedStyle(r).fontStyle || "normal"), n.appendChild(c), h.appendChild(n), h;
       },
-      update: (r, h, y) => {
-        const A = y / 1e3;
-        let b = u.text(r.state);
-        const v = u.radius(r.state), S = u.fontSize(r.state), l = u.speed(r.state), s = u.opacity(r.state), w = u.color(r.state);
-        x(h, { color: w, opacity: String(s) });
-        const $ = r.state.interaction;
-        if ($.textRing && typeof $.textRing == "string" ? b = $.textRing : $.text && typeof $.text == "string" && (b = $.text), v !== p) {
-          f.setAttribute("d", st(v));
-          const k = v * 2;
-          x(e, {
-            width: `${k}px`,
-            height: `${k}px`
-          }), p = v;
+      update: (e, h, y) => {
+        const w = y / 1e3;
+        let b = f.text(e.state);
+        const v = f.radius(e.state), p = f.fontSize(e.state), l = f.speed(e.state), o = f.opacity(e.state), A = f.color(e.state);
+        x(h, { color: A, opacity: String(o) });
+        const $ = e.state.interaction;
+        if ($.textRing && typeof $.textRing == "string" ? b = $.textRing : $.text && typeof $.text == "string" && (b = $.text), v !== S) {
+          u.setAttribute("d", ot(v));
+          const E = v * 2;
+          x(n, {
+            width: `${E}px`,
+            height: `${E}px`
+          }), S = v;
         }
-        const T = dt(b, o);
-        if (S !== m && (i.setAttribute("font-size", `${S}px`), c.setAttribute("font-size", `${S}px`), m = S), T !== d && (g.textContent = T, d = T), o) {
-          const k = ot(v);
-          c.textContent = T;
-          const H = c.getComputedTextLength(), I = T.length;
-          if (I > 1) {
-            const E = (k - H) / (I - 1);
-            x(i, { letterSpacing: `${E}px` });
+        const R = dt(b, i);
+        if (p !== m && (r.setAttribute("font-size", `${p}px`), c.setAttribute("font-size", `${p}px`), m = p), R !== d && (g.textContent = R, d = R), i) {
+          const E = rt(v);
+          c.textContent = R;
+          const V = c.getComputedTextLength(), O = R.length;
+          if (O > 1) {
+            const L = (E - V) / (O - 1);
+            x(r, { letterSpacing: `${L}px` });
           } else
-            x(i, { letterSpacing: "0px" });
-          i.removeAttribute("textLength"), a.removeAttribute("textLength"), a.removeAttribute("lengthAdjust");
+            x(r, { letterSpacing: "0px" });
+          r.removeAttribute("textLength"), a.removeAttribute("textLength"), a.removeAttribute("lengthAdjust");
         } else
-          x(i, { letterSpacing: "2px" }), i.removeAttribute("textLength"), a.removeAttribute("textLength"), a.removeAttribute("lengthAdjust");
-        z += l * A;
-        const { x: F, y: O } = r.state.smooth;
-        D(h, F, O, z);
+          x(r, { letterSpacing: "2px" }), r.removeAttribute("textLength"), a.removeAttribute("textLength"), a.removeAttribute("lengthAdjust");
+        z += l * w;
+        const { x: F, y: D } = e.state.smooth;
+        I(h, F, D, z);
       }
     },
     t

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(L,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(L=typeof globalThis<"u"?globalThis:L||self,e(L.SupermouseLabs={},L.SupermouseUtils))})(this,(function(L,e){"use strict";function U(t,r){const m=t.tagName.toLowerCase();if(m==="input"||m==="textarea"||t.isContentEditable){const i=t.type;if(["button","submit","checkbox","radio","range","color"].includes(i)){if(r.pointer)return"pointer"}else if(r.text)return"text"}else if((m==="a"||m==="button"||t.closest("a")||t.closest("button"))&&r.pointer)return"pointer";if(r.text&&["p","span","h1","h2","h3","h4","h5","h6","li","blockquote","code","pre"].includes(m))return"text";if(r.text||r.grab){const i=window.getComputedStyle(t).cursor;if(r.text&&i==="text")return"text";if(r.grab&&i==="grab")return"grab"}return null}const q=t=>{let r,m=t.defaultState??"default",i=null,c,x="idle",d=0,C=m,h=null,o=0,a=0,z=0;const f=e.normalizeAll(t,{size:24,color:"",followStrategy:"smooth",anchor:"center",rotateWithVelocity:!1}),p=t.useSemanticTags??!0,g=t.transitionDuration??200,n=t.switchDelay??80,u=t.offset?.[0]??0,y=t.offset?.[1]??0,T=t.defaultState??"default",b=g/2;function v(s){e.css(r,{transform:`scale(${s})`})}function S(s){m=s,r.innerHTML=t.icons[s]??""}let l;return e.definePlugin({name:t.name??"smart-icon",selector:"[data-supermouse-icon]",create:s=>{const A=e.createActor("div");return e.css(A,{zIndex:e.Layers.CURSOR}),p&&s.registerHoverTarget("p, span, h1, h2, h3, h4, h5, h6, li, blockquote, code, pre"),r=e.createActor("div"),e.css(r,{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",transformOrigin:"center center",transform:"scale(1)",transition:`transform ${b}ms cubic-bezier(0.16, 1, 0.3, 1)`}),r.innerHTML=t.icons[m]??"",e.injectStyles("supermouse-smart-icon-styles",`
+(function(L,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(L=typeof globalThis<"u"?globalThis:L||self,e(L.SupermouseLabs={},L.SupermouseUtils))})(this,(function(L,e){"use strict";function H(t,r,h){const i=t.tagName.toLowerCase(),a=t.isContentEditable||t.closest('[contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]')!==null;if(i==="input"||i==="textarea"||a){const g=t.type;if(["button","submit","checkbox","radio","range","color"].includes(g)){if(r.pointer)return"pointer"}else if(r.text)return"text"}else if((i==="a"||i==="button"||t.closest("a")||t.closest("button"))&&r.pointer)return"pointer";return r.text&&t.closest("p, span, h1, h2, h3, h4, h5, h6, li, blockquote, code, pre")||r.text&&h==="text"?"text":r.grab&&h==="grab"?"grab":null}const N=t=>{let r,h=t.defaultState??"default",i=null,a,g="idle",d=0,C=h,m=null,o=0,c=0,z=0;const f=e.normalizeAll(t,{size:24,color:"",followStrategy:"smooth",anchor:"center",rotateWithVelocity:!1}),S=t.useSemanticDetection??!0,x=t.transitionDuration??200,n=t.switchDelay??80,u=t.offset?.[0]??0,y=t.offset?.[1]??0,T=t.defaultState??"default",b=x/2;function v(s){e.css(r,{transform:`scale(${s})`})}function p(s){h=s,r.innerHTML=t.icons[s]??""}let l;return e.definePlugin({name:t.name??"smart-icon",selector:"[data-supermouse-icon]",create:s=>{const A=e.createActor("div");return e.css(A,{zIndex:e.Layers.CURSOR}),r=e.createActor("div"),e.css(r,{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",transformOrigin:"center center",transform:"scale(1)",transition:`transform ${b}ms cubic-bezier(0.16, 1, 0.3, 1)`}),r.innerHTML=t.icons[h]??"",e.injectStyles("supermouse-smart-icon-styles",`
           @keyframes sm {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
@@ -6,4 +6,4 @@
           .supermouse-spin {
             animation: sm 1s linear infinite;
           }
-          `),l=s.state.cursorMode,s.setCursor("custom"),A.appendChild(r),A},update:(s,A,w)=>{const $=performance.now(),j=w/1e3,W=t.icons,M=s.state.hoverTarget,D=!!M,I=D&&M!==i;let R=T;if(D){I&&(i=M,c=p?U(M,W):null);const E=s.state.interaction?.icon;E&&W[E]?R=E:c&&(R=c)}else i&&(i=null,c=null);R!==m&&x==="idle"?!!W[R]||R===T?I?(S(R),v(1),h=null,o=0):R!==h?(h=R,o=0):(o+=w,o>=n&&(C=R,x="out",d=$,v(0),h=null,o=0)):(h=null,o=0):R===m&&(h=null,o=0),x==="out"&&$-d>=b&&(S(C),x="in",d=$,v(0)),x==="in"&&$-d>=b&&(x="idle",v(1));const k=f.size(s.state),_=f.color(s.state);e.css(A,{width:`${k}px`,height:`${k}px`,color:_||"inherit"});let P=0,O=0;const F=k/2;switch(f.anchor(s.state)){case"center":P=-F,O=-F;break;case"top-left":P=0,O=0;break;case"top-right":P=-k,O=0;break;case"bottom-left":P=0,O=-k;break;case"bottom-right":P=-k,O=-k;break}const J=m==="pointer"||m==="text";if(f.rotateWithVelocity(s.state)&&!J&&!s.state.reducedMotion){const{x:E,y:H}=s.state.velocity;e.math.dist(E,H)>1&&(z=e.math.angle(E,H));const Q=1-Math.exp(-20*j);a=e.math.lerpAngle(a,z,Q)}else{const E=1-Math.exp(-20*j);a=e.math.lerpAngle(a,0,E)}const V=f.followStrategy(s.state)==="raw"?s.state.pointer:s.state.smooth,K=`translate3d(${V.x+u+P}px, ${V.y+y+O}px, 0) rotate(${a}deg)`;A.style.transform=K},cleanup(s){s.setCursor(l)}},t)},N=(t={})=>{const r=e.normalizeAll(t,{size:20,hoverSize:40,color:"#ffffff",fill:"transparent",borderWidth:2});let m=20,i=20,c=0,x=1,d=1;const C=150;let h=null;return e.definePlugin({name:t.name??"smart-ring",selector:"[data-supermouse-color]",create:o=>{const a=e.createCircle(r.size(o.state),r.fill(o.state));return e.css(a,{zIndex:e.Layers.FOLLOWER,mixBlendMode:t.mixBlendMode??"difference",transition:"border-radius 0.2s ease",borderStyle:"solid",opacity:"0"}),a},onEnable(o,a){const z=r.size(o.state);m=z*.5,i=z*.5,c=0,x=1,d=1,clearTimeout(h??void 0),a.style.display="block",a.style.opacity="1",a.style.transition="border-radius 0.2s ease"},beforeDisable(o,a){const{x:z,y:f}=o.state.smooth;return a.style.transition=`opacity ${C}ms ease, transform ${C}ms ease`,a.style.opacity="0",e.setTransform(a,z,f,0,.2,.2),new Promise(p=>{h=setTimeout(()=>{a.style.transition="border-radius 0.2s ease",p()},C)})},update:(o,a,z)=>{if(a.style.display==="none")return;const f=z/1e3,p=r.size(o.state),g=o.state.shape;let n=p,u=p,y="50%",T=r.color(o.state);g?(n=g.width,u=g.height,y=`${g.borderRadius}px`):(o.state.isHover&&(n=r.hoverSize(o.state),u=r.hoverSize(o.state)),o.state.isDown&&(n*=.9,u*=.9)),o.state.interaction.color&&(T=o.state.interaction.color),m=e.damp(m,n,20,f),i=e.damp(i,u,20,f),e.css(a,{width:`${m}px`,height:`${i}px`,borderRadius:y,borderColor:T,backgroundColor:r.fill(o.state),borderWidth:`${r.borderWidth(o.state)}px`,opacity:"1"});let b=0,v=1,S=1;if(!g&&t.enableSkew&&!o.state.reducedMotion){const{displacement:A}=o.state,w=e.effects.getVelocityDistortion(A.x,A.y);b=w.rotation,v=w.scaleX,S=w.scaleY;const $=1-Math.exp(-20*f);c=e.lerpAngle(c,b,$)}else c=0;x=e.damp(x,v,20,f),d=e.damp(d,S,20,f);const{x:l,y:s}=o.state.smooth;e.setTransform(a,l,s,c,x,d)}},t)},X=(t={})=>{const r=t.count??30,m=t.decay??2.5,i=t.frequency??10,c=t.scatter??5,x=e.normalize(t.color,"#ff00ff"),d=[];let C=0,h=0,o=!1,a=0;const z=(f,p,g)=>{const n=d.find(b=>!b.isActive);if(!n)return;n.isActive=!0,n.life=1,n.x=f+e.math.random(-c,c),n.y=p+e.math.random(-c,c);const u=e.math.random(0,Math.PI*2),y=e.math.random(.5,1.5);n.vx=Math.cos(u)*y,n.vy=Math.sin(u)*y,n.scale=e.math.random(.5,1.2),n.color=g;const T=e.math.random(2,5);e.css(n.el,{width:`${T}px`,height:`${T}px`,backgroundColor:g,opacity:"1"}),e.setTransform(n.el,n.x,n.y,0,n.scale,n.scale)};return e.definePlugin({name:t.name??"sparkles",create:()=>{const f=e.createActor("div");e.css(f,{zIndex:e.Layers.TRACE});for(let p=0;p<r;p++){const g=e.createCircle(0,"transparent");e.css(g,{opacity:"0",willChange:"transform, opacity"}),f.appendChild(g),d.push({el:g,isActive:!1,x:0,y:0,vx:0,vy:0,life:0,scale:1,color:""})}return f},update:(f,p,g)=>{const n=g/1e3,{x:u,y}=f.state.pointer;o||(C=u,h=y,o=!0);const T=u-C,b=y-h,v=Math.hypot(T,b);if(a+=v,a>i){const S=x(f.state),l=Math.floor(a/i);for(let s=0;s<l;s++){const A=s/l;z(C+T*A,h+b*A,S)}a=a%i}C=u,h=y;for(let S=0;S<r;S++){const l=d[S];if(l.isActive)if(l.x+=l.vx*n*60,l.y+=l.vy*n*60,l.life-=m*n,l.life<=0)l.isActive=!1,e.css(l.el,{opacity:"0"});else{const s=l.scale*l.life;e.css(l.el,{opacity:String(l.life)}),e.setTransform(l.el,l.x,l.y,0,s,s)}}},destroy:()=>{d.length=0}},t)};function Y(t,r){return r?t+" ":t}let B=0;const G=(t={})=>{let r,m,i,c,x,d;const C=`supermouse-text-ring-path-${B++}`,h=e.normalizeAll(t,{text:"SUPERMOUSE • SUPERMOUSE • ",radius:60,fontSize:12,speed:30,opacity:1,color:"currentColor"}),o=t.className??"",a=t.spread??!0;let z=0,f="",p=0,g=0;return e.definePlugin({name:t.name??"text-ring",selector:"[data-supermouse-text-ring]",create:n=>{const u=e.createActor("div");e.css(u,{zIndex:e.Layers.FOLLOWER,transition:"opacity 0.2s ease",opacity:"1",width:"0px",height:"0px",overflow:"visible",display:"flex",alignItems:"center",justifyContent:"center"}),o&&u.classList.add(...o.split(" ").filter(Boolean)),r=e.createSVGElement("svg"),e.css(r,{overflow:"visible",position:"absolute",left:"0",top:"0"}),m=e.path(void 0,{id:C,fill:"none"});const y=h.fontSize(n.state);return g=y,c=e.text({"font-size":`${y}px`,fill:"currentColor"}),e.css(c,{textTransform:"uppercase",letterSpacing:"2px"}),i=e.textPath(`#${C}`,{startOffset:"0%"}),x=document.createTextNode(""),i.appendChild(x),c.appendChild(i),r.appendChild(m),r.appendChild(c),d=e.createSVGElement("text"),e.css(d,{visibility:"hidden",position:"absolute",pointerEvents:"none",whiteSpace:"nowrap"}),d.setAttribute("font-size",`${y}px`),d.setAttribute("font-family",getComputedStyle(c).fontFamily||"sans-serif"),d.setAttribute("font-weight",getComputedStyle(c).fontWeight||"normal"),d.setAttribute("font-style",getComputedStyle(c).fontStyle||"normal"),r.appendChild(d),u.appendChild(r),u},update:(n,u,y)=>{const T=y/1e3;let b=h.text(n.state);const v=h.radius(n.state),S=h.fontSize(n.state),l=h.speed(n.state),s=h.opacity(n.state),A=h.color(n.state);e.css(u,{color:A,opacity:String(s)});const w=n.state.interaction;if(w.textRing&&typeof w.textRing=="string"?b=w.textRing:w.text&&typeof w.text=="string"&&(b=w.text),v!==p){m.setAttribute("d",e.circlePath(v));const M=v*2;e.css(r,{width:`${M}px`,height:`${M}px`}),p=v}const $=Y(b,a);if(S!==g&&(c.setAttribute("font-size",`${S}px`),d.setAttribute("font-size",`${S}px`),g=S),$!==f&&(x.textContent=$,f=$),a){const M=e.circumference(v);d.textContent=$;const D=d.getComputedTextLength(),I=$.length;if(I>1){const k=(M-D)/(I-1);e.css(c,{letterSpacing:`${k}px`})}else e.css(c,{letterSpacing:"0px"});c.removeAttribute("textLength"),i.removeAttribute("textLength"),i.removeAttribute("lengthAdjust")}else e.css(c,{letterSpacing:"2px"}),c.removeAttribute("textLength"),i.removeAttribute("textLength"),i.removeAttribute("lengthAdjust");z+=l*T;const{x:j,y:W}=n.state.smooth;e.setTransform(u,j,W,z)}},t)};L.SmartIcon=q,L.SmartRing=N,L.Sparkles=X,L.TextRing=G,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})}));
+          `),l=s.state.cursorMode,s.setCursor("custom"),A.appendChild(r),A},update:(s,A,w)=>{const $=performance.now(),I=w/1e3,W=t.icons,M=s.state.pointerTarget,j=!!M,D=j&&M!==i;let R=T;if(j){D&&(i=M,a=S?H(M,W,s.state.authoredCursor):null);const P=s.state.interaction?.icon;P&&W[P]?R=P:a&&(R=a)}else i&&(i=null,a=null);R!==h&&g==="idle"?!!W[R]||R===T?D?(p(R),v(1),m=null,o=0):R!==m?(m=R,o=0):(o+=w,o>=n&&(C=R,g="out",d=$,v(0),m=null,o=0)):(m=null,o=0):R===h&&(m=null,o=0),g==="out"&&$-d>=b&&(p(C),g="in",d=$,v(0)),g==="in"&&$-d>=b&&(g="idle",v(1));const E=f.size(s.state),_=f.color(s.state);e.css(A,{width:`${E}px`,height:`${E}px`,color:_||"inherit"});let k=0,O=0;const F=E/2;switch(f.anchor(s.state)){case"center":k=-F,O=-F;break;case"top-left":k=0,O=0;break;case"top-right":k=-E,O=0;break;case"bottom-left":k=0,O=-E;break;case"bottom-right":k=-E,O=-E;break}const J=h==="pointer"||h==="text";if(f.rotateWithVelocity(s.state)&&!J&&!s.state.reducedMotion){const{x:P,y:U}=s.state.velocity;e.math.dist(P,U)>1&&(z=e.math.angle(P,U));const Q=1-Math.exp(-20*I);c=e.math.lerpAngle(c,z,Q)}else{const P=1-Math.exp(-20*I);c=e.math.lerpAngle(c,0,P)}const V=f.followStrategy(s.state)==="raw"?s.state.pointer:s.state.smooth,K=`translate3d(${V.x+u+k}px, ${V.y+y+O}px, 0) rotate(${c}deg)`;A.style.transform=K},cleanup(s){s.setCursor(l)}},t)},X=(t={})=>{const r=e.normalizeAll(t,{size:20,hoverSize:40,color:"#ffffff",fill:"transparent",borderWidth:2});let h=20,i=20,a=0,g=1,d=1;const C=150;let m=null;return e.definePlugin({name:t.name??"smart-ring",selector:"[data-supermouse-color]",create:o=>{const c=e.createCircle(r.size(o.state),r.fill(o.state));return e.css(c,{zIndex:e.Layers.FOLLOWER,mixBlendMode:t.mixBlendMode??"difference",transition:"border-radius 0.2s ease",borderStyle:"solid",opacity:"0"}),c},onEnable(o,c){const z=r.size(o.state);h=z*.5,i=z*.5,a=0,g=1,d=1,clearTimeout(m??void 0),c.style.display="block",c.style.opacity="1",c.style.transition="border-radius 0.2s ease"},beforeDisable(o,c){const{x:z,y:f}=o.state.smooth;return c.style.transition=`opacity ${C}ms ease, transform ${C}ms ease`,c.style.opacity="0",e.setTransform(c,z,f,0,.2,.2),new Promise(S=>{m=setTimeout(()=>{c.style.transition="border-radius 0.2s ease",S()},C)})},update:(o,c,z)=>{if(c.style.display==="none")return;const f=z/1e3,S=r.size(o.state),x=o.state.shape;let n=S,u=S,y="50%",T=r.color(o.state);x?(n=x.width,u=x.height,y=`${x.borderRadius}px`):(o.state.isHover&&(n=r.hoverSize(o.state),u=r.hoverSize(o.state)),o.state.isDown&&(n*=.9,u*=.9)),o.state.interaction.color&&(T=o.state.interaction.color),h=e.damp(h,n,20,f),i=e.damp(i,u,20,f),e.css(c,{width:`${h}px`,height:`${i}px`,borderRadius:y,borderColor:T,backgroundColor:r.fill(o.state),borderWidth:`${r.borderWidth(o.state)}px`,opacity:"1"});let b=0,v=1,p=1;if(!x&&t.enableSkew&&!o.state.reducedMotion){const{displacement:A}=o.state,w=e.effects.getVelocityDistortion(A.x,A.y);b=w.rotation,v=w.scaleX,p=w.scaleY;const $=1-Math.exp(-20*f);a=e.lerpAngle(a,b,$)}else a=0;g=e.damp(g,v,20,f),d=e.damp(d,p,20,f);const{x:l,y:s}=o.state.smooth;e.setTransform(c,l,s,a,g,d)}},t)},Y=(t={})=>{const r=t.count??30,h=t.decay??2.5,i=t.frequency??10,a=t.scatter??5,g=e.normalize(t.color,"#ff00ff"),d=[];let C=0,m=0,o=!1,c=0;const z=(f,S,x)=>{const n=d.find(b=>!b.isActive);if(!n)return;n.isActive=!0,n.life=1,n.x=f+e.math.random(-a,a),n.y=S+e.math.random(-a,a);const u=e.math.random(0,Math.PI*2),y=e.math.random(.5,1.5);n.vx=Math.cos(u)*y,n.vy=Math.sin(u)*y,n.scale=e.math.random(.5,1.2),n.color=x;const T=e.math.random(2,5);e.css(n.el,{width:`${T}px`,height:`${T}px`,backgroundColor:x,opacity:"1"}),e.setTransform(n.el,n.x,n.y,0,n.scale,n.scale)};return e.definePlugin({name:t.name??"sparkles",create:()=>{const f=e.createActor("div");e.css(f,{zIndex:e.Layers.TRACE});for(let S=0;S<r;S++){const x=e.createCircle(0,"transparent");e.css(x,{opacity:"0",willChange:"transform, opacity"}),f.appendChild(x),d.push({el:x,isActive:!1,x:0,y:0,vx:0,vy:0,life:0,scale:1,color:""})}return f},update:(f,S,x)=>{const n=x/1e3,{x:u,y}=f.state.pointer;o||(C=u,m=y,o=!0);const T=u-C,b=y-m,v=Math.hypot(T,b);if(c+=v,c>i){const p=g(f.state),l=Math.floor(c/i);for(let s=0;s<l;s++){const A=s/l;z(C+T*A,m+b*A,p)}c=c%i}C=u,m=y;for(let p=0;p<r;p++){const l=d[p];if(l.isActive)if(l.x+=l.vx*n*60,l.y+=l.vy*n*60,l.life-=h*n,l.life<=0)l.isActive=!1,e.css(l.el,{opacity:"0"});else{const s=l.scale*l.life;e.css(l.el,{opacity:String(l.life)}),e.setTransform(l.el,l.x,l.y,0,s,s)}}},destroy:()=>{d.length=0}},t)};function q(t,r){return r?t+" ":t}let B=0;const G=(t={})=>{let r,h,i,a,g,d;const C=`supermouse-text-ring-path-${B++}`,m=e.normalizeAll(t,{text:"SUPERMOUSE • SUPERMOUSE • ",radius:60,fontSize:12,speed:30,opacity:1,color:"currentColor"}),o=t.className??"",c=t.spread??!0;let z=0,f="",S=0,x=0;return e.definePlugin({name:t.name??"text-ring",selector:"[data-supermouse-text-ring]",create:n=>{const u=e.createActor("div");e.css(u,{zIndex:e.Layers.FOLLOWER,transition:"opacity 0.2s ease",opacity:"1",width:"0px",height:"0px",overflow:"visible",display:"flex",alignItems:"center",justifyContent:"center"}),o&&u.classList.add(...o.split(" ").filter(Boolean)),r=e.createSVGElement("svg"),e.css(r,{overflow:"visible",position:"absolute",left:"0",top:"0"}),h=e.path(void 0,{id:C,fill:"none"});const y=m.fontSize(n.state);return x=y,a=e.text({"font-size":`${y}px`,fill:"currentColor"}),e.css(a,{textTransform:"uppercase",letterSpacing:"2px"}),i=e.textPath(`#${C}`,{startOffset:"0%"}),g=document.createTextNode(""),i.appendChild(g),a.appendChild(i),r.appendChild(h),r.appendChild(a),d=e.createSVGElement("text"),e.css(d,{visibility:"hidden",position:"absolute",pointerEvents:"none",whiteSpace:"nowrap"}),d.setAttribute("font-size",`${y}px`),d.setAttribute("font-family",getComputedStyle(a).fontFamily||"sans-serif"),d.setAttribute("font-weight",getComputedStyle(a).fontWeight||"normal"),d.setAttribute("font-style",getComputedStyle(a).fontStyle||"normal"),r.appendChild(d),u.appendChild(r),u},update:(n,u,y)=>{const T=y/1e3;let b=m.text(n.state);const v=m.radius(n.state),p=m.fontSize(n.state),l=m.speed(n.state),s=m.opacity(n.state),A=m.color(n.state);e.css(u,{color:A,opacity:String(s)});const w=n.state.interaction;if(w.textRing&&typeof w.textRing=="string"?b=w.textRing:w.text&&typeof w.text=="string"&&(b=w.text),v!==S){h.setAttribute("d",e.circlePath(v));const M=v*2;e.css(r,{width:`${M}px`,height:`${M}px`}),S=v}const $=q(b,c);if(p!==x&&(a.setAttribute("font-size",`${p}px`),d.setAttribute("font-size",`${p}px`),x=p),$!==f&&(g.textContent=$,f=$),c){const M=e.circumference(v);d.textContent=$;const j=d.getComputedTextLength(),D=$.length;if(D>1){const E=(M-j)/(D-1);e.css(a,{letterSpacing:`${E}px`})}else e.css(a,{letterSpacing:"0px"});a.removeAttribute("textLength"),i.removeAttribute("textLength"),i.removeAttribute("lengthAdjust")}else e.css(a,{letterSpacing:"2px"}),a.removeAttribute("textLength"),i.removeAttribute("textLength"),i.removeAttribute("lengthAdjust");z+=l*T;const{x:I,y:W}=n.state.smooth;e.setTransform(u,I,W,z)}},t)};L.SmartIcon=N,L.SmartRing=X,L.Sparkles=Y,L.TextRing=G,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supermousejs/labs",
-  "version": "2.4.4-beta.3",
+  "version": "2.4.4-beta.4",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "description": "Experimentental state machines and effects for supermouse",
@@ -14,13 +14,13 @@
   "url": "https://github.com/Whitestar14/supermouse-js",
   "license": "MIT",
   "dependencies": {
-    "@supermousejs/utils": "2.4.4-beta.3"
+    "@supermousejs/utils": "2.4.4-beta.4"
   },
   "peerDependencies": {
-    "@supermousejs/core": "2.5.0-beta.3"
+    "@supermousejs/core": "2.5.0-beta.4"
   },
   "devDependencies": {
-    "@supermousejs/core": "2.5.0-beta.3"
+    "@supermousejs/core": "2.5.0-beta.4"
   },
   "repository": {
     "type": "git",
@@ -42,6 +42,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "test": "vitest",
+    "test:watch": "vitest --watch"
   }
 }