@supermousejs/labs 2.3.0 → 2.3.1

package/README.md

@@ -1,45 +1,116 @@
 # @supermousejs/labs
 
-Experimental and advanced plugins for Supermouse.
+Advanced state machine that morphs SVGs based on semantic context.
 
-## Included Plugins
+## Installation
 
-### SmartIcon
+```bash
+pnpm add @supermousejs/labs
+```
+
+## SmartIcon
 
-Morphs SVG icons based on semantic tags (links, inputs) or context.
+Advanced state machine that morphs SVGs based on semantic context.
+
+### Usage
 
 ```ts
-import { SmartIcon } from "@supermousejs/labs";
-app.use(SmartIcon({ icons: { default: "...", pointer: "..." } }));
+import { Supermouse } from "@supermousejs/core";
+import { SmartIcon } from '@supermousejs/labs';
+const app = new Supermouse();
+app.use(SmartIcon({ icons: { ... } }));
 ```
 
-### SmartRing
+### Options
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| icons | Record<string, string> | {} | Map of state names to SVG strings. |
+| defaultState | string | 'default' | Initial semantic state used before any hover interaction resolves. |
+| useSemanticTags | boolean | true | Resolve smart states from semantic HTML tags such as links and buttons. |
+| transitionDuration | number | 200 | Morph transition time in ms. |
+| switchDelay | number | 80 | Minimum ms a state must be requested before committing to the next icon. |
+| size | number | 24 | Size of the icon container. |
+| color | string | 'black' | Icon fill color (currentColor). |
+| offset | [number, number] | [0, 0] | Fixed offset. |
+| anchor | string | 'center' | Alignment (center, top-left, etc). |
+| followStrategy | 'smooth' | 'raw' | 'smooth' | Whether the icon should smoothly follow the pointer or snap to it. |
+| rotateWithVelocity | boolean | false | Rotate the icon based on movement velocity. |
+
+## SmartRing
 
 A reactive ring that distorts with velocity and adapts to stuck elements.
 
+### Usage
+
 ```ts
-import { SmartRing } from "@supermousejs/labs";
-app.use(SmartRing({ enableSkew: true }));
+import { Supermouse } from "@supermousejs/core";
+import { SmartRing } from '@supermousejs/labs';
+const app = new Supermouse();
+app.use(SmartRing({ size: 24, color: '#f59e0b', enableSkew: true }));
 ```
 
-### Sparkles
+### Options
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| size | number | 20 | Base diameter. |
+| hoverSize | number | 40 | Diameter on hover. |
+| color | string | '#ffffff' | Border color used for the ring. |
+| fill | string | 'transparent' | Background fill color applied to the ring. |
+| borderWidth | number | 2 | Border thickness in pixels. |
+| mixBlendMode | string | 'difference' | CSS mix-blend-mode applied to the ring element. |
+| enableSkew | boolean | false | Distort shape based on velocity. |
+
+## Sparkles
 
 Emits particle trails based on movement velocity.
 
+### Usage
+
 ```ts
-import { Sparkles } from "@supermousejs/labs";
-app.use(Sparkles({ color: "gold" }));
+import { Supermouse } from "@supermousejs/core";
+import { Sparkles } from '@supermousejs/labs';
+const app = new Supermouse();
+app.use(Sparkles({ color: '#f59e0b', frequency: 10 }));
 ```
 
-### TextRing
+### Options
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | string | '#ff00ff' | Particle color. |
+| count | number | 30 | Number of particles to keep in the pool. |
+| frequency | number | 10 | Pixels per spawn. |
+| decay | number | 0.05 | Fade rate. |
+| scatter | number | 5 | Random position offset for particle spawning. |
+
+## TextRing
 
 Rotates text around the cursor position.
 
+### Usage
+
 ```ts
-import { TextRing } from "@supermousejs/labs";
-app.use(TextRing({ text: "LOADING • " }));
+import { Supermouse } from "@supermousejs/core";
+import { TextRing } from '@supermousejs/labs';
+const app = new Supermouse();
+app.use(TextRing({ text: 'LOADING • ', radius: 40 }));
 ```
 
+### Options
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| text | string | 'SUPERMOUSE • SUPERMOUSE • ' | Text content. |
+| radius | number | 60 | Ring radius. |
+| fontSize | number | 12 | Text size in pixels. |
+| speed | number | 0.5 | Rotation speed deg/frame. |
+| color | string | 'currentColor' | Text color used by the SVG ring. |
+| opacity | number | 1 | Opacity of the rendered ring container. |
+| className | string | '' | Optional CSS class added to the container. |
+| spread | boolean | false | Stretch the text to fit around the full loop. |
+
 ## Documentation
 
 Full documentation and interactive playground available at [supermouse](https://supermouse.js.org) or [check out the repo](https://github.com/Whitestar14/supermouse-js).

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export declare interface SmartIconOptions {
     defaultState?: string;
     useSemanticTags?: boolean;
     transitionDuration?: number;
+    /** Minimum ms a state must be requested before committing. Default 80. */
+    switchDelay?: number;
     size?: ValueOrGetter<number>;
     color?: ValueOrGetter<string>;
     offset?: [number, number];

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { normalize as p, definePlugin as N, dom as n, math as w, Layers as k, effects as F } from "@supermousejs/utils";
-import { getCirclePath as H, getCircumference as X, formatLoopText as Y } from "@supermousejs/zoetrope";
-function j(t, a) {
+import { normalize as p, definePlugin as W, dom as l, math as b, Layers as D, effects as Y } from "@supermousejs/utils";
+import { getCirclePath as j, getCircumference as U, formatLoopText as B } from "@supermousejs/zoetrope";
+function q(t, a) {
   const o = t.tagName.toLowerCase();
   if (o === "input" || o === "textarea" || t.isContentEditable) {
     const i = t.type;
@@ -12,16 +12,25 @@ function j(t, a) {
     return "pointer";
   return null;
 }
-const q = (t) => {
-  let a, o = t.defaultState || "default", i = t.defaultState || "default", d = null, T = null, A = !1, x, h = 0, C = 0;
-  const E = p(t.size, 24), r = p(t.followStrategy, "smooth"), S = p(t.anchor, "center"), v = p(t.rotateWithVelocity, !1), m = t.useSemanticTags ?? !0, c = t.transitionDuration ?? 200, s = t.offset ? t.offset[0] : 0, R = t.offset ? t.offset[1] : 0;
-  return N(
+const Q = (t) => {
+  let a, o = t.defaultState || "default", i = t.defaultState || "default", f = null, T = null, C = !1, h, u = null, m = 0;
+  const M = t.switchDelay ?? 80;
+  let e = 0, y = 0;
+  const x = p(t.size, 24), d = p(t.followStrategy, "smooth"), c = p(t.anchor, "center"), r = p(t.rotateWithVelocity, !1), R = t.useSemanticTags ?? !0, A = t.transitionDuration ?? 200, S = t.offset ? t.offset[0] : 0, n = t.offset ? t.offset[1] : 0;
+  function v(s) {
+    i = s, C = !0, clearTimeout(h), a.style.transform = "scale(0)", h = setTimeout(() => {
+      o = i, a.innerHTML = t.icons[o] || "", a.style.transform = "scale(1)", h = setTimeout(() => {
+        C = !1;
+      }, A / 2);
+    }, A / 2);
+  }
+  return W(
     {
       name: t.name || "smart-icon",
       selector: "[data-supermouse-icon]",
       create: () => {
-        const l = n.createActor("div");
-        return l.style.zIndex = k.CURSOR, a = n.createActor("div"), n.applyStyles(a, {
+        const s = l.createActor("div");
+        return s.style.zIndex = D.CURSOR, a = l.createActor("div"), l.applyStyles(a, {
           width: "100%",
           height: "100%",
           display: "flex",
@@ -29,8 +38,8 @@ const q = (t) => {
           justifyContent: "center",
           transformOrigin: "center center",
           transform: "scale(1)",
-          transition: `transform ${c / 2}ms cubic-bezier(0.16, 1, 0.3, 1)`
-        }), a.innerHTML = t.icons[o] || "", n.injectStyles(
+          transition: `transform ${A / 2}ms cubic-bezier(0.16, 1, 0.3, 1)`
+        }), a.innerHTML = t.icons[o] || "", l.injectStyles(
           "supermouse-smart-icon-styles",
           `
         @keyframes sm {
@@ -41,107 +50,103 @@ const q = (t) => {
           animation: sm 1s linear infinite;
         }
         `
-        ), l.appendChild(a), l;
+        ), s.appendChild(a), s;
       },
       styles: {
         color: "color"
       },
-      update: (l, y) => {
-        const e = t.icons, g = l.state.hoverTarget;
-        let f = t.defaultState || "default";
-        if (g) {
-          g !== d && (d = g, T = m ? j(g, e) : null);
-          const L = l.state.interaction?.icon;
-          L && e[L] ? f = L : T && (f = T);
+      update: (s, w, g) => {
+        const z = t.icons, L = s.state.hoverTarget;
+        let E = t.defaultState || "default";
+        if (L) {
+          L !== f && (f = L, T = R ? q(L, z) : null);
+          const N = s.state.interaction?.icon;
+          N && z[N] ? E = N : T && (E = T);
         } else
-          d = null, T = null;
-        f !== o && !A && (e[f] || f === (t.defaultState || "default")) && (i = f, A = !0, clearTimeout(x), a.style.transform = "scale(0)", x = setTimeout(() => {
-          o = i, a.innerHTML = e[o] || "", a.style.transform = "scale(1)", x = setTimeout(() => {
-            A = !1;
-          }, c / 2);
-        }, c / 2));
-        const b = E(l.state);
-        n.setStyle(y, "width", `${b}px`), n.setStyle(y, "height", `${b}px`);
-        let u = 0, z = 0;
-        const $ = b / 2, O = S(l.state);
-        O !== "center" && (O.includes("left") && (u = $), O.includes("right") && (u = -$), O.includes("top") && (z = $), O.includes("bottom") && (z = -$));
-        const P = o === "pointer" || o === "text";
-        if (v(l.state) && !P && !l.state.reducedMotion) {
-          const { x: L, y: I } = l.state.velocity;
-          w.dist(L, I) > 1 && (C = w.angle(L, I)), h = w.lerpAngle(h, C, 0.15);
+          f = null, T = null;
+        E !== o && !C ? !z[E] && E !== (t.defaultState || "default") ? (u = null, m = 0) : E !== u ? (u = E, m = 0) : (m += g, m >= M && (v(E), u = null, m = 0)) : E === o && (u = null, m = 0);
+        const k = x(s.state);
+        l.setStyle(w, "width", `${k}px`), l.setStyle(w, "height", `${k}px`);
+        let $ = 0, P = 0;
+        const I = k / 2, O = c(s.state);
+        O !== "center" && (O.includes("left") && ($ = I), O.includes("right") && ($ = -I), O.includes("top") && (P = I), O.includes("bottom") && (P = -I));
+        const X = o === "pointer" || o === "text";
+        if (r(s.state) && !X && !s.state.reducedMotion) {
+          const { x: N, y: H } = s.state.velocity;
+          b.dist(N, H) > 1 && (y = b.angle(N, H)), e = b.lerpAngle(e, y, 0.15);
         } else
-          h = w.lerpAngle(h, 0, 0.15);
-        const M = r(l.state) === "raw" ? l.state.pointer : l.state.smooth;
-        n.setTransform(
-          y,
-          M.x + s + u,
-          M.y + R + z,
-          h
+          e = b.lerpAngle(e, 0, 0.15);
+        const F = d(s.state) === "raw" ? s.state.pointer : s.state.smooth;
+        l.setTransform(
+          w,
+          F.x + S + $,
+          F.y + n + P,
+          e
         );
       },
       cleanup() {
-        clearTimeout(x);
+        clearTimeout(h);
       }
     },
     t
   );
-}, V = (t = {}) => {
-  const a = p(t.size, 20), o = p(t.hoverSize, 40), i = p(t.color, "#ffffff"), d = p(t.borderWidth, 2), T = p(t.fill, "transparent");
-  let A = 20, x = 20, h = 0, C = 1, E = 1;
-  return N(
+}, Z = (t = {}) => {
+  const a = p(t.size, 20), o = p(t.hoverSize, 40), i = p(t.color, "#ffffff"), f = p(t.borderWidth, 2), T = p(t.fill, "transparent");
+  let C = 20, h = 20, u = 0, m = 1, M = 1;
+  return W(
     {
       name: t.name || "smart-ring",
       selector: "[data-supermouse-color]",
-      create: (r) => {
-        const S = n.createCircle(a(r.state), T(r.state));
-        return n.applyStyles(S, {
-          zIndex: k.FOLLOWER,
+      create: (e) => {
+        const y = l.createCircle(a(e.state), T(e.state));
+        return l.applyStyles(y, {
+          zIndex: D.FOLLOWER,
           mixBlendMode: t.mixBlendMode || "difference",
           transition: "opacity 0.2s ease, border-radius 0.2s ease",
           borderStyle: "solid"
-        }), S;
+        }), y;
       },
-      update: (r, S) => {
-        const v = a(r.state), m = r.state.shape;
-        let c = v, s = v, R = "50%", l = i(r.state);
-        m ? (c = m.width, s = m.height, R = `${m.borderRadius}px`) : (r.state.isHover && (c = o(r.state), s = o(r.state)), r.state.isDown && (c *= 0.9, s *= 0.9)), r.state.interaction.color && (l = r.state.interaction.color), A = w.lerp(A, c, 0.2), x = w.lerp(x, s, 0.2), n.setStyle(S, "width", `${A}px`), n.setStyle(S, "height", `${x}px`), n.setStyle(S, "borderRadius", R), n.setStyle(S, "borderColor", l), n.setStyle(S, "backgroundColor", T(r.state)), n.setStyle(S, "borderWidth", `${d(r.state)}px`);
-        let y = 0, e = 1, g = 1;
-        if (!m && t.enableSkew && !r.state.reducedMotion) {
-          const { velocity: u } = r.state, z = F.getVelocityDistortion(u.x, u.y);
-          y = z.rotation, e = z.scaleX, g = z.scaleY, h = w.lerpAngle(h, y, 0.15);
+      update: (e, y) => {
+        const x = a(e.state), d = e.state.shape;
+        let c = x, r = x, R = "50%", A = i(e.state);
+        d ? (c = d.width, r = d.height, R = `${d.borderRadius}px`) : (e.state.isHover && (c = o(e.state), r = o(e.state)), e.state.isDown && (c *= 0.9, r *= 0.9)), e.state.interaction.color && (A = e.state.interaction.color), C = b.lerp(C, c, 0.2), h = b.lerp(h, r, 0.2), l.setStyle(y, "width", `${C}px`), l.setStyle(y, "height", `${h}px`), l.setStyle(y, "borderRadius", R), l.setStyle(y, "borderColor", A), l.setStyle(y, "backgroundColor", T(e.state)), l.setStyle(y, "borderWidth", `${f(e.state)}px`);
+        let S = 0, n = 1, v = 1;
+        if (!d && t.enableSkew && !e.state.reducedMotion) {
+          const { velocity: g } = e.state, z = Y.getVelocityDistortion(g.x, g.y);
+          S = z.rotation, n = z.scaleX, v = z.scaleY, u = b.lerpAngle(u, S, 0.15);
         } else
-          h = 0;
-        C = w.lerp(C, e, 0.15), E = w.lerp(E, g, 0.15);
-        const { x: f, y: b } = r.state.smooth;
-        n.setTransform(S, f, b, h, C, E);
+          u = 0;
+        m = b.lerp(m, n, 0.15), M = b.lerp(M, v, 0.15);
+        const { x: s, y: w } = e.state.smooth;
+        l.setTransform(y, s, w, u, m, M);
       }
     },
     t
   );
-}, G = (t = {}) => {
-  const a = t.count || 30, o = t.decay || 0.05, i = t.frequency || 10, d = t.scatter || 5, A = p(t.color, "#ff00ff"), x = [];
-  let h = 0, C = 0, E = !1, r = 0;
-  const S = (v, m, c) => {
-    const s = x.find((e) => !e.isActive);
-    if (!s) return;
-    s.isActive = !0, s.life = 1, s.x = v + w.random(-d, d), s.y = m + w.random(-d, d);
-    const R = w.random(0, Math.PI * 2), l = w.random(0.5, 1.5);
-    s.vx = Math.cos(R) * l, s.vy = Math.sin(R) * l, s.scale = w.random(0.5, 1.2), s.color = c;
-    const y = w.random(2, 5);
-    n.setStyle(s.el, "width", `${y}px`), n.setStyle(s.el, "height", `${y}px`), n.setStyle(s.el, "backgroundColor", c), n.setStyle(s.el, "opacity", "1"), n.setTransform(s.el, s.x, s.y, 0, s.scale, s.scale);
+}, _ = (t = {}) => {
+  const a = t.count || 30, o = t.decay || 0.05, i = t.frequency || 10, f = t.scatter || 5, C = p(t.color, "#ff00ff"), h = [];
+  let u = 0, m = 0, M = !1, e = 0;
+  const y = (x, d, c) => {
+    const r = h.find((n) => !n.isActive);
+    if (!r) return;
+    r.isActive = !0, r.life = 1, r.x = x + b.random(-f, f), r.y = d + b.random(-f, f);
+    const R = b.random(0, Math.PI * 2), A = b.random(0.5, 1.5);
+    r.vx = Math.cos(R) * A, r.vy = Math.sin(R) * A, r.scale = b.random(0.5, 1.2), r.color = c;
+    const S = b.random(2, 5);
+    l.setStyle(r.el, "width", `${S}px`), l.setStyle(r.el, "height", `${S}px`), l.setStyle(r.el, "backgroundColor", c), l.setStyle(r.el, "opacity", "1"), l.setTransform(r.el, r.x, r.y, 0, r.scale, r.scale);
   };
-  return N(
+  return W(
     {
       name: t.name || "sparkles",
-      install(v) {
-        for (let m = 0; m < a; m++) {
-          const c = n.createCircle(0, "transparent");
-          n.applyStyles(c, {
-            zIndex: k.TRACE,
+      install(x) {
+        for (let d = 0; d < a; d++) {
+          const c = l.createCircle(0, "transparent");
+          l.applyStyles(c, {
+            zIndex: D.TRACE,
             opacity: "0",
             willChange: "transform, opacity",
             transition: "none"
-          }), v.container.appendChild(c), x.push({
+          }), x.container.appendChild(c), h.push({
             el: c,
             isActive: !1,
             x: 0,
@@ -154,51 +159,51 @@ const q = (t) => {
           });
         }
       },
-      update(v) {
-        const { x: m, y: c } = v.state.pointer;
-        E || (h = m, C = c, E = !0);
-        const s = m - h, R = c - C, l = Math.hypot(s, R);
-        if (r += l, r > i) {
-          const y = A(v.state), e = Math.floor(r / i);
-          for (let g = 0; g < e; g++) {
-            const f = g / e, b = h + s * f, u = C + R * f;
-            S(b, u, y);
+      update(x) {
+        const { x: d, y: c } = x.state.pointer;
+        M || (u = d, m = c, M = !0);
+        const r = d - u, R = c - m, A = Math.hypot(r, R);
+        if (e += A, e > i) {
+          const S = C(x.state), n = Math.floor(e / i);
+          for (let v = 0; v < n; v++) {
+            const s = v / n, w = u + r * s, g = m + R * s;
+            y(w, g, S);
           }
-          r = r % i;
+          e = e % i;
         }
-        h = m, C = c;
-        for (let y = 0; y < a; y++) {
-          const e = x[y];
-          if (e.isActive)
-            if (e.x += e.vx, e.y += e.vy, e.life -= o, e.life <= 0)
-              e.isActive = !1, e.el.style.opacity = "0";
+        u = d, m = c;
+        for (let S = 0; S < a; S++) {
+          const n = h[S];
+          if (n.isActive)
+            if (n.x += n.vx, n.y += n.vy, n.life -= o, n.life <= 0)
+              n.isActive = !1, n.el.style.opacity = "0";
             else {
-              e.el.style.opacity = String(e.life);
-              const g = e.scale * e.life;
-              n.setTransform(e.el, e.x, e.y, 0, g, g);
+              n.el.style.opacity = String(n.life);
+              const v = n.scale * n.life;
+              l.setTransform(n.el, n.x, n.y, 0, v, v);
             }
         }
       },
       destroy() {
-        x.forEach((v) => v.el.remove()), x.length = 0;
+        h.forEach((x) => x.el.remove()), h.length = 0;
       }
     },
     t
   );
 };
-let U = 0;
-const J = (t = {}) => {
-  let a, o, i, d, T;
-  const A = `supermouse-text-ring-path-${U++}`, x = "SUPERMOUSE • SUPERMOUSE • ", h = 60, C = 12, E = 0.5, r = t.className || "", S = t.spread ?? !1, v = p(t.text, x), m = p(t.radius, h), c = p(t.fontSize, C), s = p(t.speed, E), R = p(t.opacity, 1);
-  let l = 0, y = "", e = 0, g = 0;
-  return N(
+let V = 0;
+const tt = (t = {}) => {
+  let a, o, i, f, T;
+  const C = `supermouse-text-ring-path-${V++}`, h = "SUPERMOUSE • SUPERMOUSE • ", u = 60, m = 12, M = 0.5, e = t.className || "", y = t.spread ?? !1, x = p(t.text, h), d = p(t.radius, u), c = p(t.fontSize, m), r = p(t.speed, M), R = p(t.opacity, 1);
+  let A = 0, S = "", n = 0, v = 0;
+  return W(
     {
       name: "text-ring",
       selector: "[data-supermouse-text-ring]",
-      create: (f) => {
-        const b = n.createActor("div");
-        n.applyStyles(b, {
-          zIndex: k.FOLLOWER,
+      create: (s) => {
+        const w = l.createActor("div");
+        l.applyStyles(w, {
+          zIndex: D.FOLLOWER,
           transition: "opacity 0.2s ease",
           opacity: "1",
           width: "0px",
@@ -207,34 +212,34 @@ const J = (t = {}) => {
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
-        }), r && b.classList.add(...r.split(" ").filter(Boolean)), a = document.createElementNS("http://www.w3.org/2000/svg", "svg"), a.style.overflow = "visible", a.style.position = "absolute", a.style.left = "0", a.style.top = "0", o = document.createElementNS("http://www.w3.org/2000/svg", "path"), o.setAttribute("id", A), o.setAttribute("fill", "none"), d = document.createElementNS("http://www.w3.org/2000/svg", "text");
-        const u = c(f.state);
-        return d.setAttribute("font-size", `${u}px`), g = u, d.setAttribute("fill", "currentColor"), d.style.textTransform = "uppercase", d.style.letterSpacing = "2px", i = document.createElementNS("http://www.w3.org/2000/svg", "textPath"), i.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", `#${A}`), i.setAttribute("href", `#${A}`), i.setAttribute("startOffset", "0%"), T = document.createTextNode(""), i.appendChild(T), d.appendChild(i), a.appendChild(o), a.appendChild(d), b.appendChild(a), b;
+        }), e && w.classList.add(...e.split(" ").filter(Boolean)), a = document.createElementNS("http://www.w3.org/2000/svg", "svg"), a.style.overflow = "visible", a.style.position = "absolute", a.style.left = "0", a.style.top = "0", o = document.createElementNS("http://www.w3.org/2000/svg", "path"), o.setAttribute("id", C), o.setAttribute("fill", "none"), f = document.createElementNS("http://www.w3.org/2000/svg", "text");
+        const g = c(s.state);
+        return f.setAttribute("font-size", `${g}px`), v = g, f.setAttribute("fill", "currentColor"), f.style.textTransform = "uppercase", f.style.letterSpacing = "2px", i = document.createElementNS("http://www.w3.org/2000/svg", "textPath"), i.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", `#${C}`), i.setAttribute("href", `#${C}`), i.setAttribute("startOffset", "0%"), T = document.createTextNode(""), i.appendChild(T), f.appendChild(i), a.appendChild(o), a.appendChild(f), w.appendChild(a), w;
       },
       styles: {
         color: "color"
       },
-      update: (f, b) => {
-        let u = v(f.state);
-        const z = m(f.state), $ = c(f.state), O = s(f.state), P = R(f.state);
-        n.setStyle(b, "opacity", String(P));
-        const M = f.state.interaction;
-        if (M.textRing && typeof M.textRing == "string" ? u = M.textRing : M.text && typeof M.text == "string" && (u = M.text), z !== e && (o.setAttribute("d", H(z)), e = z), S) {
-          const W = X(z);
-          i.setAttribute("textLength", String(W)), i.setAttribute("lengthAdjust", "spacing"), u = Y(u, !0);
+      update: (s, w) => {
+        let g = x(s.state);
+        const z = d(s.state), L = c(s.state), E = r(s.state), k = R(s.state);
+        l.setStyle(w, "opacity", String(k));
+        const $ = s.state.interaction;
+        if ($.textRing && typeof $.textRing == "string" ? g = $.textRing : $.text && typeof $.text == "string" && (g = $.text), z !== n && (o.setAttribute("d", j(z)), n = z), y) {
+          const O = U(z);
+          i.setAttribute("textLength", String(O)), i.setAttribute("lengthAdjust", "spacing"), g = B(g, !0);
         } else
           i.removeAttribute("textLength"), i.removeAttribute("lengthAdjust");
-        $ !== g && (d.setAttribute("font-size", `${$}px`), g = $), u !== y && (T.textContent = u, y = u), l += O;
-        const { x: L, y: I } = f.state.smooth;
-        n.setTransform(b, L, I, l);
+        L !== v && (f.setAttribute("font-size", `${L}px`), v = L), g !== S && (T.textContent = g, S = g), A += E;
+        const { x: P, y: I } = s.state.smooth;
+        l.setTransform(w, P, I, A);
       }
     },
     t
   );
 };
 export {
-  q as SmartIcon,
-  V as SmartRing,
-  G as Sparkles,
-  J as TextRing
+  Q as SmartIcon,
+  Z as SmartRing,
+  _ as Sparkles,
+  tt as TextRing
 };

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils"),require("@supermousejs/zoetrope")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils","@supermousejs/zoetrope"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C.SupermouseLabs={},C.SupermouseUtils,C.SupermouseZoetrope))})(this,(function(C,e,P){"use strict";function k(t,a){const c=t.tagName.toLowerCase();if(c==="input"||c==="textarea"||t.isContentEditable){const i=t.type;if(["button","submit","checkbox","radio","range","color"].includes(i)){if(a.pointer)return"pointer"}else if(a.text)return"text"}else if((c==="a"||c==="button"||t.closest("a")||t.closest("button"))&&a.pointer)return"pointer";return null}const N=t=>{let a,c=t.defaultState||"default",i=t.defaultState||"default",f=null,w=null,b=!1,S,g=0,z=0;const R=e.normalize(t.size,24),o=e.normalize(t.followStrategy,"smooth"),x=e.normalize(t.anchor,"center"),p=e.normalize(t.rotateWithVelocity,!1),y=t.useSemanticTags??!0,l=t.transitionDuration??200,n=t.offset?t.offset[0]:0,T=t.offset?t.offset[1]:0;return e.definePlugin({name:t.name||"smart-icon",selector:"[data-supermouse-icon]",create:()=>{const s=e.dom.createActor("div");return s.style.zIndex=e.Layers.CURSOR,a=e.dom.createActor("div"),e.dom.applyStyles(a,{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",transformOrigin:"center center",transform:"scale(1)",transition:`transform ${l/2}ms cubic-bezier(0.16, 1, 0.3, 1)`}),a.innerHTML=t.icons[c]||"",e.dom.injectStyles("supermouse-smart-icon-styles",`
+(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils"),require("@supermousejs/zoetrope")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils","@supermousejs/zoetrope"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C.SupermouseLabs={},C.SupermouseUtils,C.SupermouseZoetrope))})(this,(function(C,e,k){"use strict";function D(t,s){const c=t.tagName.toLowerCase();if(c==="input"||c==="textarea"||t.isContentEditable){const l=t.type;if(["button","submit","checkbox","radio","range","color"].includes(l)){if(s.pointer)return"pointer"}else if(s.text)return"text"}else if((c==="a"||c==="button"||t.closest("a")||t.closest("button"))&&s.pointer)return"pointer";return null}const F=t=>{let s,c=t.defaultState||"default",l=t.defaultState||"default",d=null,z=null,w=!1,g,m=null,u=0;const E=t.switchDelay??80;let n=0,y=0;const x=e.normalize(t.size,24),f=e.normalize(t.followStrategy,"smooth"),i=e.normalize(t.anchor,"center"),o=e.normalize(t.rotateWithVelocity,!1),T=t.useSemanticTags??!0,b=t.transitionDuration??200,S=t.offset?t.offset[0]:0,a=t.offset?t.offset[1]:0;function p(r){l=r,w=!0,clearTimeout(g),s.style.transform="scale(0)",g=setTimeout(()=>{c=l,s.innerHTML=t.icons[c]||"",s.style.transform="scale(1)",g=setTimeout(()=>{w=!1},b/2)},b/2)}return e.definePlugin({name:t.name||"smart-icon",selector:"[data-supermouse-icon]",create:()=>{const r=e.dom.createActor("div");return r.style.zIndex=e.Layers.CURSOR,s=e.dom.createActor("div"),e.dom.applyStyles(s,{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",transformOrigin:"center center",transform:"scale(1)",transition:`transform ${b/2}ms cubic-bezier(0.16, 1, 0.3, 1)`}),s.innerHTML=t.icons[c]||"",e.dom.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;
         }
-        `),s.appendChild(a),s},styles:{color:"color"},update:(s,h)=>{const r=t.icons,u=s.state.hoverTarget;let d=t.defaultState||"default";if(u){u!==f&&(f=u,w=y?k(u,r):null);const M=s.state.interaction?.icon;M&&r[M]?d=M:w&&(d=w)}else f=null,w=null;d!==c&&!b&&(r[d]||d===(t.defaultState||"default"))&&(i=d,b=!0,clearTimeout(S),a.style.transform="scale(0)",S=setTimeout(()=>{c=i,a.innerHTML=r[c]||"",a.style.transform="scale(1)",S=setTimeout(()=>{b=!1},l/2)},l/2));const v=R(s.state);e.dom.setStyle(h,"width",`${v}px`),e.dom.setStyle(h,"height",`${v}px`);let m=0,A=0;const L=v/2,$=x(s.state);$!=="center"&&($.includes("left")&&(m=L),$.includes("right")&&(m=-L),$.includes("top")&&(A=L),$.includes("bottom")&&(A=-L));const j=c==="pointer"||c==="text";if(p(s.state)&&!j&&!s.state.reducedMotion){const{x:M,y:O}=s.state.velocity;e.math.dist(M,O)>1&&(z=e.math.angle(M,O)),g=e.math.lerpAngle(g,z,.15)}else g=e.math.lerpAngle(g,0,.15);const E=o(s.state)==="raw"?s.state.pointer:s.state.smooth;e.dom.setTransform(h,E.x+n+m,E.y+T+A,g)},cleanup(){clearTimeout(S)}},t)},W=(t={})=>{const a=e.normalize(t.size,20),c=e.normalize(t.hoverSize,40),i=e.normalize(t.color,"#ffffff"),f=e.normalize(t.borderWidth,2),w=e.normalize(t.fill,"transparent");let b=20,S=20,g=0,z=1,R=1;return e.definePlugin({name:t.name||"smart-ring",selector:"[data-supermouse-color]",create:o=>{const x=e.dom.createCircle(a(o.state),w(o.state));return e.dom.applyStyles(x,{zIndex:e.Layers.FOLLOWER,mixBlendMode:t.mixBlendMode||"difference",transition:"opacity 0.2s ease, border-radius 0.2s ease",borderStyle:"solid"}),x},update:(o,x)=>{const p=a(o.state),y=o.state.shape;let l=p,n=p,T="50%",s=i(o.state);y?(l=y.width,n=y.height,T=`${y.borderRadius}px`):(o.state.isHover&&(l=c(o.state),n=c(o.state)),o.state.isDown&&(l*=.9,n*=.9)),o.state.interaction.color&&(s=o.state.interaction.color),b=e.math.lerp(b,l,.2),S=e.math.lerp(S,n,.2),e.dom.setStyle(x,"width",`${b}px`),e.dom.setStyle(x,"height",`${S}px`),e.dom.setStyle(x,"borderRadius",T),e.dom.setStyle(x,"borderColor",s),e.dom.setStyle(x,"backgroundColor",w(o.state)),e.dom.setStyle(x,"borderWidth",`${f(o.state)}px`);let h=0,r=1,u=1;if(!y&&t.enableSkew&&!o.state.reducedMotion){const{velocity:m}=o.state,A=e.effects.getVelocityDistortion(m.x,m.y);h=A.rotation,r=A.scaleX,u=A.scaleY,g=e.math.lerpAngle(g,h,.15)}else g=0;z=e.math.lerp(z,r,.15),R=e.math.lerp(R,u,.15);const{x:d,y:v}=o.state.smooth;e.dom.setTransform(x,d,v,g,z,R)}},t)},F=(t={})=>{const a=t.count||30,c=t.decay||.05,i=t.frequency||10,f=t.scatter||5,b=e.normalize(t.color,"#ff00ff"),S=[];let g=0,z=0,R=!1,o=0;const x=(p,y,l)=>{const n=S.find(r=>!r.isActive);if(!n)return;n.isActive=!0,n.life=1,n.x=p+e.math.random(-f,f),n.y=y+e.math.random(-f,f);const T=e.math.random(0,Math.PI*2),s=e.math.random(.5,1.5);n.vx=Math.cos(T)*s,n.vy=Math.sin(T)*s,n.scale=e.math.random(.5,1.2),n.color=l;const h=e.math.random(2,5);e.dom.setStyle(n.el,"width",`${h}px`),e.dom.setStyle(n.el,"height",`${h}px`),e.dom.setStyle(n.el,"backgroundColor",l),e.dom.setStyle(n.el,"opacity","1"),e.dom.setTransform(n.el,n.x,n.y,0,n.scale,n.scale)};return e.definePlugin({name:t.name||"sparkles",install(p){for(let y=0;y<a;y++){const l=e.dom.createCircle(0,"transparent");e.dom.applyStyles(l,{zIndex:e.Layers.TRACE,opacity:"0",willChange:"transform, opacity",transition:"none"}),p.container.appendChild(l),S.push({el:l,isActive:!1,x:0,y:0,vx:0,vy:0,life:0,scale:1,color:""})}},update(p){const{x:y,y:l}=p.state.pointer;R||(g=y,z=l,R=!0);const n=y-g,T=l-z,s=Math.hypot(n,T);if(o+=s,o>i){const h=b(p.state),r=Math.floor(o/i);for(let u=0;u<r;u++){const d=u/r,v=g+n*d,m=z+T*d;x(v,m,h)}o=o%i}g=y,z=l;for(let h=0;h<a;h++){const r=S[h];if(r.isActive)if(r.x+=r.vx,r.y+=r.vy,r.life-=c,r.life<=0)r.isActive=!1,r.el.style.opacity="0";else{r.el.style.opacity=String(r.life);const u=r.scale*r.life;e.dom.setTransform(r.el,r.x,r.y,0,u,u)}}},destroy(){S.forEach(p=>p.el.remove()),S.length=0}},t)};let H=0;const U=(t={})=>{let a,c,i,f,w;const b=`supermouse-text-ring-path-${H++}`,S="SUPERMOUSE • SUPERMOUSE • ",g=60,z=12,R=.5,o=t.className||"",x=t.spread??!1,p=e.normalize(t.text,S),y=e.normalize(t.radius,g),l=e.normalize(t.fontSize,z),n=e.normalize(t.speed,R),T=e.normalize(t.opacity,1);let s=0,h="",r=0,u=0;return e.definePlugin({name:"text-ring",selector:"[data-supermouse-text-ring]",create:d=>{const v=e.dom.createActor("div");e.dom.applyStyles(v,{zIndex:e.Layers.FOLLOWER,transition:"opacity 0.2s ease",opacity:"1",width:"0px",height:"0px",overflow:"visible",display:"flex",alignItems:"center",justifyContent:"center"}),o&&v.classList.add(...o.split(" ").filter(Boolean)),a=document.createElementNS("http://www.w3.org/2000/svg","svg"),a.style.overflow="visible",a.style.position="absolute",a.style.left="0",a.style.top="0",c=document.createElementNS("http://www.w3.org/2000/svg","path"),c.setAttribute("id",b),c.setAttribute("fill","none"),f=document.createElementNS("http://www.w3.org/2000/svg","text");const m=l(d.state);return f.setAttribute("font-size",`${m}px`),u=m,f.setAttribute("fill","currentColor"),f.style.textTransform="uppercase",f.style.letterSpacing="2px",i=document.createElementNS("http://www.w3.org/2000/svg","textPath"),i.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",`#${b}`),i.setAttribute("href",`#${b}`),i.setAttribute("startOffset","0%"),w=document.createTextNode(""),i.appendChild(w),f.appendChild(i),a.appendChild(c),a.appendChild(f),v.appendChild(a),v},styles:{color:"color"},update:(d,v)=>{let m=p(d.state);const A=y(d.state),L=l(d.state),$=n(d.state),j=T(d.state);e.dom.setStyle(v,"opacity",String(j));const E=d.state.interaction;if(E.textRing&&typeof E.textRing=="string"?m=E.textRing:E.text&&typeof E.text=="string"&&(m=E.text),A!==r&&(c.setAttribute("d",P.getCirclePath(A)),r=A),x){const I=P.getCircumference(A);i.setAttribute("textLength",String(I)),i.setAttribute("lengthAdjust","spacing"),m=P.formatLoopText(m,!0)}else i.removeAttribute("textLength"),i.removeAttribute("lengthAdjust");L!==u&&(f.setAttribute("font-size",`${L}px`),u=L),m!==h&&(w.textContent=m,h=m),s+=$;const{x:M,y:O}=d.state.smooth;e.dom.setTransform(v,M,O,s)}},t)};C.SmartIcon=N,C.SmartRing=W,C.Sparkles=F,C.TextRing=U,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));
+        `),r.appendChild(s),r},styles:{color:"color"},update:(r,v,h)=>{const A=t.icons,M=r.state.hoverTarget;let R=t.defaultState||"default";if(M){M!==d&&(d=M,z=T?D(M,A):null);const P=r.state.interaction?.icon;P&&A[P]?R=P:z&&(R=z)}else d=null,z=null;R!==c&&!w?!A[R]&&R!==(t.defaultState||"default")?(m=null,u=0):R!==m?(m=R,u=0):(u+=h,u>=E&&(p(R),m=null,u=0)):R===c&&(m=null,u=0);const j=x(r.state);e.dom.setStyle(v,"width",`${j}px`),e.dom.setStyle(v,"height",`${j}px`);let L=0,I=0;const O=j/2,$=i(r.state);$!=="center"&&($.includes("left")&&(L=O),$.includes("right")&&(L=-O),$.includes("top")&&(I=O),$.includes("bottom")&&(I=-O));const q=c==="pointer"||c==="text";if(o(r.state)&&!q&&!r.state.reducedMotion){const{x:P,y:W}=r.state.velocity;e.math.dist(P,W)>1&&(y=e.math.angle(P,W)),n=e.math.lerpAngle(n,y,.15)}else n=e.math.lerpAngle(n,0,.15);const N=f(r.state)==="raw"?r.state.pointer:r.state.smooth;e.dom.setTransform(v,N.x+S+L,N.y+a+I,n)},cleanup(){clearTimeout(g)}},t)},H=(t={})=>{const s=e.normalize(t.size,20),c=e.normalize(t.hoverSize,40),l=e.normalize(t.color,"#ffffff"),d=e.normalize(t.borderWidth,2),z=e.normalize(t.fill,"transparent");let w=20,g=20,m=0,u=1,E=1;return e.definePlugin({name:t.name||"smart-ring",selector:"[data-supermouse-color]",create:n=>{const y=e.dom.createCircle(s(n.state),z(n.state));return e.dom.applyStyles(y,{zIndex:e.Layers.FOLLOWER,mixBlendMode:t.mixBlendMode||"difference",transition:"opacity 0.2s ease, border-radius 0.2s ease",borderStyle:"solid"}),y},update:(n,y)=>{const x=s(n.state),f=n.state.shape;let i=x,o=x,T="50%",b=l(n.state);f?(i=f.width,o=f.height,T=`${f.borderRadius}px`):(n.state.isHover&&(i=c(n.state),o=c(n.state)),n.state.isDown&&(i*=.9,o*=.9)),n.state.interaction.color&&(b=n.state.interaction.color),w=e.math.lerp(w,i,.2),g=e.math.lerp(g,o,.2),e.dom.setStyle(y,"width",`${w}px`),e.dom.setStyle(y,"height",`${g}px`),e.dom.setStyle(y,"borderRadius",T),e.dom.setStyle(y,"borderColor",b),e.dom.setStyle(y,"backgroundColor",z(n.state)),e.dom.setStyle(y,"borderWidth",`${d(n.state)}px`);let S=0,a=1,p=1;if(!f&&t.enableSkew&&!n.state.reducedMotion){const{velocity:h}=n.state,A=e.effects.getVelocityDistortion(h.x,h.y);S=A.rotation,a=A.scaleX,p=A.scaleY,m=e.math.lerpAngle(m,S,.15)}else m=0;u=e.math.lerp(u,a,.15),E=e.math.lerp(E,p,.15);const{x:r,y:v}=n.state.smooth;e.dom.setTransform(y,r,v,m,u,E)}},t)},U=(t={})=>{const s=t.count||30,c=t.decay||.05,l=t.frequency||10,d=t.scatter||5,w=e.normalize(t.color,"#ff00ff"),g=[];let m=0,u=0,E=!1,n=0;const y=(x,f,i)=>{const o=g.find(a=>!a.isActive);if(!o)return;o.isActive=!0,o.life=1,o.x=x+e.math.random(-d,d),o.y=f+e.math.random(-d,d);const T=e.math.random(0,Math.PI*2),b=e.math.random(.5,1.5);o.vx=Math.cos(T)*b,o.vy=Math.sin(T)*b,o.scale=e.math.random(.5,1.2),o.color=i;const S=e.math.random(2,5);e.dom.setStyle(o.el,"width",`${S}px`),e.dom.setStyle(o.el,"height",`${S}px`),e.dom.setStyle(o.el,"backgroundColor",i),e.dom.setStyle(o.el,"opacity","1"),e.dom.setTransform(o.el,o.x,o.y,0,o.scale,o.scale)};return e.definePlugin({name:t.name||"sparkles",install(x){for(let f=0;f<s;f++){const i=e.dom.createCircle(0,"transparent");e.dom.applyStyles(i,{zIndex:e.Layers.TRACE,opacity:"0",willChange:"transform, opacity",transition:"none"}),x.container.appendChild(i),g.push({el:i,isActive:!1,x:0,y:0,vx:0,vy:0,life:0,scale:1,color:""})}},update(x){const{x:f,y:i}=x.state.pointer;E||(m=f,u=i,E=!0);const o=f-m,T=i-u,b=Math.hypot(o,T);if(n+=b,n>l){const S=w(x.state),a=Math.floor(n/l);for(let p=0;p<a;p++){const r=p/a,v=m+o*r,h=u+T*r;y(v,h,S)}n=n%l}m=f,u=i;for(let S=0;S<s;S++){const a=g[S];if(a.isActive)if(a.x+=a.vx,a.y+=a.vy,a.life-=c,a.life<=0)a.isActive=!1,a.el.style.opacity="0";else{a.el.style.opacity=String(a.life);const p=a.scale*a.life;e.dom.setTransform(a.el,a.x,a.y,0,p,p)}}},destroy(){g.forEach(x=>x.el.remove()),g.length=0}},t)};let X=0;const Y=(t={})=>{let s,c,l,d,z;const w=`supermouse-text-ring-path-${X++}`,g="SUPERMOUSE • SUPERMOUSE • ",m=60,u=12,E=.5,n=t.className||"",y=t.spread??!1,x=e.normalize(t.text,g),f=e.normalize(t.radius,m),i=e.normalize(t.fontSize,u),o=e.normalize(t.speed,E),T=e.normalize(t.opacity,1);let b=0,S="",a=0,p=0;return e.definePlugin({name:"text-ring",selector:"[data-supermouse-text-ring]",create:r=>{const v=e.dom.createActor("div");e.dom.applyStyles(v,{zIndex:e.Layers.FOLLOWER,transition:"opacity 0.2s ease",opacity:"1",width:"0px",height:"0px",overflow:"visible",display:"flex",alignItems:"center",justifyContent:"center"}),n&&v.classList.add(...n.split(" ").filter(Boolean)),s=document.createElementNS("http://www.w3.org/2000/svg","svg"),s.style.overflow="visible",s.style.position="absolute",s.style.left="0",s.style.top="0",c=document.createElementNS("http://www.w3.org/2000/svg","path"),c.setAttribute("id",w),c.setAttribute("fill","none"),d=document.createElementNS("http://www.w3.org/2000/svg","text");const h=i(r.state);return d.setAttribute("font-size",`${h}px`),p=h,d.setAttribute("fill","currentColor"),d.style.textTransform="uppercase",d.style.letterSpacing="2px",l=document.createElementNS("http://www.w3.org/2000/svg","textPath"),l.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",`#${w}`),l.setAttribute("href",`#${w}`),l.setAttribute("startOffset","0%"),z=document.createTextNode(""),l.appendChild(z),d.appendChild(l),s.appendChild(c),s.appendChild(d),v.appendChild(s),v},styles:{color:"color"},update:(r,v)=>{let h=x(r.state);const A=f(r.state),M=i(r.state),R=o(r.state),j=T(r.state);e.dom.setStyle(v,"opacity",String(j));const L=r.state.interaction;if(L.textRing&&typeof L.textRing=="string"?h=L.textRing:L.text&&typeof L.text=="string"&&(h=L.text),A!==a&&(c.setAttribute("d",k.getCirclePath(A)),a=A),y){const $=k.getCircumference(A);l.setAttribute("textLength",String($)),l.setAttribute("lengthAdjust","spacing"),h=k.formatLoopText(h,!0)}else l.removeAttribute("textLength"),l.removeAttribute("lengthAdjust");M!==p&&(d.setAttribute("font-size",`${M}px`),p=M),h!==S&&(z.textContent=h,S=h),b+=R;const{x:I,y:O}=r.state.smooth;e.dom.setTransform(v,I,O,b)}},t)};C.SmartIcon=F,C.SmartRing=H,C.Sparkles=U,C.TextRing=Y,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,21 +1,25 @@
 {
   "name": "@supermousejs/labs",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "author": "O.S David",
   "url": "https://github.com/Whitestar14/supermouse-js",
   "license": "MIT",
   "dependencies": {
-    "@supermousejs/utils": "2.3.0",
-    "@supermousejs/zoetrope": "2.3.0"
+    "@supermousejs/zoetrope": "2.3.1",
+    "@supermousejs/utils": "2.3.1"
   },
   "peerDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.3.0"
   },
   "devDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.3.0"
   },
   "repository": {
     "type": "git",