@supermousejs/labs 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -1,75 +1,94 @@
-# @supermousejs/labs
-
-## 2.1.1
-
-### Patch Changes
-
-- 67f771b: Add relevant npm metadata to package.json file
-- Updated dependencies [67f771b]
-  - @supermousejs/zoetrope@2.1.1
-  - @supermousejs/utils@2.1.1
-  - @supermousejs/core@2.0.5
-
-## 2.1.0
-
-### Minor Changes
-
-- 0a1652d: fixed build architecture and updated plugin metadata
-
-### Patch Changes
-
-- Updated dependencies [0a1652d]
-  - @supermousejs/zoetrope@2.1.0
-  - @supermousejs/utils@2.1.0
-
-## 2.0.4
-
-### Patch Changes
-
-- 993dc67: Updated supemousejs packages with proper author, license and url descriptors to repo
-- Updated dependencies [993dc67]
-  - @supermousejs/zoetrope@2.0.4
-  - @supermousejs/utils@2.0.4
-  - @supermousejs/core@2.0.4
-
-## 2.0.3
-
-### Patch Changes
-
-- Updated dependencies
-  - @supermousejs/core@2.0.3
-  - @supermousejs/utils@2.0.3
-  - @supermousejs/zoetrope@2.0.3
-
-## 2.0.2
-
-### Patch Changes
-
-- ae219a0: Update READMEs with correct link to documentation
-- Updated dependencies [ae219a0]
-  - @supermousejs/zoetrope@2.0.2
-  - @supermousejs/utils@2.0.2
-  - @supermousejs/core@2.0.2
-
-## 2.0.1
-
-### Patch Changes
-
-- Add minimal README.md files to packages
-- Updated dependencies
-  - @supermousejs/zoetrope@2.0.1
-  - @supermousejs/utils@2.0.1
-  - @supermousejs/core@2.0.1
-
-## 2.0.0
-
-### Major Changes
-
-- Initial v2.0.0 release
-
-### Patch Changes
-
-- Updated dependencies
-  - @supermousejs/zoetrope@2.0.0
-  - @supermousejs/utils@2.0.0
-  - @supermousejs/core@2.0.0
+# @supermousejs/labs
+
+## 2.2.0
+
+### Minor Changes
+
+- 9fa6ece: Add `injectStyles` to safely handle injecting global CSS styles into the document head
+
+### Patch Changes
+
+- 6d70c18: remove legacy package and update supermouse domain in readme
+- 14fb5b6: Updated tsconfig to be reference-compliant with core, utils and zoetrope when required
+- Updated dependencies [6d70c18]
+- Updated dependencies [2590af3]
+- Updated dependencies [14fb5b6]
+- Updated dependencies [9fe1a7b]
+- Updated dependencies [9fa6ece]
+  - @supermousejs/core@2.1.0
+  - @supermousejs/utils@2.2.0
+  - @supermousejs/zoetrope@2.2.0
+
+## 2.1.1
+
+### Patch Changes
+
+- 67f771b: Add relevant npm metadata to package.json file
+- Updated dependencies [67f771b]
+  - @supermousejs/zoetrope@2.1.1
+  - @supermousejs/utils@2.1.1
+  - @supermousejs/core@2.0.5
+
+## 2.1.0
+
+### Minor Changes
+
+- 0a1652d: fixed build architecture and updated plugin metadata
+
+### Patch Changes
+
+- Updated dependencies [0a1652d]
+  - @supermousejs/zoetrope@2.1.0
+  - @supermousejs/utils@2.1.0
+
+## 2.0.4
+
+### Patch Changes
+
+- 993dc67: Updated supemousejs packages with proper author, license and url descriptors to repo
+- Updated dependencies [993dc67]
+  - @supermousejs/zoetrope@2.0.4
+  - @supermousejs/utils@2.0.4
+  - @supermousejs/core@2.0.4
+
+## 2.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @supermousejs/core@2.0.3
+  - @supermousejs/utils@2.0.3
+  - @supermousejs/zoetrope@2.0.3
+
+## 2.0.2
+
+### Patch Changes
+
+- ae219a0: Update READMEs with correct link to documentation
+- Updated dependencies [ae219a0]
+  - @supermousejs/zoetrope@2.0.2
+  - @supermousejs/utils@2.0.2
+  - @supermousejs/core@2.0.2
+
+## 2.0.1
+
+### Patch Changes
+
+- Add minimal README.md files to packages
+- Updated dependencies
+  - @supermousejs/zoetrope@2.0.1
+  - @supermousejs/utils@2.0.1
+  - @supermousejs/core@2.0.1
+
+## 2.0.0
+
+### Major Changes
+
+- Initial v2.0.0 release
+
+### Patch Changes
+
+- Updated dependencies
+  - @supermousejs/zoetrope@2.0.0
+  - @supermousejs/utils@2.0.0
+  - @supermousejs/core@2.0.0

package/LICENSE.md

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Sijibomi Olusunmbola
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Sijibomi Olusunmbola
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,42 +1,45 @@
-
-# @supermousejs/labs
-
-Experimental and advanced plugins for Supermouse.
-
-## Included Plugins
-
-### SmartIcon
-Morphs SVG icons based on semantic tags (links, inputs) or context.
-
-```ts
-import { SmartIcon } from '@supermousejs/labs';
-app.use(SmartIcon({ icons: { default: '...', pointer: '...' } }));
-```
-
-### SmartRing
-A reactive ring that distorts with velocity and adapts to stuck elements.
-
-```ts
-import { SmartRing } from '@supermousejs/labs';
-app.use(SmartRing({ enableSkew: true }));
-```
-
-### Sparkles
-Emits particle trails based on movement velocity.
-
-```ts
-import { Sparkles } from '@supermousejs/labs';
-app.use(Sparkles({ color: 'gold' }));
-```
-
-### TextRing
-Rotates text around the cursor position.
-
-```ts
-import { TextRing } from '@supermousejs/labs';
-app.use(TextRing({ text: 'LOADING • ' }));
-```
-
-## Documentation
-
-Full documentation and interactive playground available at [supermouse](https://supermouse.vercel.app) or [check out the repo](https://github.com/Whitestar14/supermouse-js).
+# @supermousejs/labs
+
+Experimental and advanced plugins for Supermouse.
+
+## Included Plugins
+
+### SmartIcon
+
+Morphs SVG icons based on semantic tags (links, inputs) or context.
+
+```ts
+import { SmartIcon } from "@supermousejs/labs";
+app.use(SmartIcon({ icons: { default: "...", pointer: "..." } }));
+```
+
+### SmartRing
+
+A reactive ring that distorts with velocity and adapts to stuck elements.
+
+```ts
+import { SmartRing } from "@supermousejs/labs";
+app.use(SmartRing({ enableSkew: true }));
+```
+
+### Sparkles
+
+Emits particle trails based on movement velocity.
+
+```ts
+import { Sparkles } from "@supermousejs/labs";
+app.use(Sparkles({ color: "gold" }));
+```
+
+### TextRing
+
+Rotates text around the cursor position.
+
+```ts
+import { TextRing } from "@supermousejs/labs";
+app.use(TextRing({ text: "LOADING • " }));
+```
+
+## 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

@@ -1,5 +1,5 @@
-import { SupermousePlugin } from '../../core/src/index.ts';
-import { ValueOrGetter } from '../../core/src/index.ts';
+import { SupermousePlugin } from '../../core/src';
+import { ValueOrGetter } from '../../core/src';
 
 export declare const SmartIcon: (options: SmartIconOptions) => SupermousePlugin;
 

package/dist/index.mjs

@@ -1,29 +1,27 @@
-import { normalize as A, definePlugin as N, dom as n, math as w, Layers as k, effects as F } from "@supermousejs/utils";
+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 U(t, l) {
+function j(t, a) {
   const o = t.tagName.toLowerCase();
   if (o === "input" || o === "textarea" || t.isContentEditable) {
     const i = t.type;
-    if (["button", "submit", "checkbox", "radio", "range", "color"].includes(
-      i
-    )) {
-      if (l.pointer)
+    if (["button", "submit", "checkbox", "radio", "range", "color"].includes(i)) {
+      if (a.pointer)
         return "pointer";
-    } else if (l.text) return "text";
-  } else if ((o === "a" || o === "button" || t.closest("a") || t.closest("button")) && l.pointer)
+    } else if (a.text) return "text";
+  } else if ((o === "a" || o === "button" || t.closest("a") || t.closest("button")) && a.pointer)
     return "pointer";
   return null;
 }
 const q = (t) => {
-  let l, o = t.defaultState || "default", i = t.defaultState || "default", d = null, T = null, C = !1, x, h = 0, p = 0;
-  const E = A(t.size, 24), r = A(t.followStrategy, "smooth"), S = A(t.anchor, "center"), v = A(t.rotateWithVelocity, !1), y = t.useSemanticTags ?? !0, c = t.transitionDuration ?? 200, s = t.offset ? t.offset[0] : 0, R = t.offset ? t.offset[1] : 0;
+  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(
     {
       name: t.name || "smart-icon",
       selector: "[data-supermouse-icon]",
       create: () => {
-        const a = n.createActor("div");
-        return a.style.zIndex = k.CURSOR, l = n.createActor("div"), n.applyStyles(l, {
+        const l = n.createActor("div");
+        return l.style.zIndex = k.CURSOR, a = n.createActor("div"), n.applyStyles(a, {
           width: "100%",
           height: "100%",
           display: "flex",
@@ -31,45 +29,51 @@ const q = (t) => {
           justifyContent: "center",
           transformOrigin: "center center",
           transform: "scale(1)",
-          // Pre-baked ease. Note: If duration changes dynamically, this won't update.
           transition: `transform ${c / 2}ms cubic-bezier(0.16, 1, 0.3, 1)`
-        }), l.innerHTML = t.icons[o] || "", a.appendChild(l), a;
+        }), a.innerHTML = t.icons[o] || "", n.injectStyles(
+          "supermouse-smart-icon-styles",
+          `
+        @keyframes sm {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        .supermouse-spin {
+          animation: sm 1s linear infinite;
+        }
+        `
+        ), l.appendChild(a), l;
       },
       styles: {
         color: "color"
       },
-      update: (a, g) => {
-        const e = t.icons, m = a.state.hoverTarget;
+      update: (l, y) => {
+        const e = t.icons, g = l.state.hoverTarget;
         let f = t.defaultState || "default";
-        if (m) {
-          m !== d && (d = m, T = y ? U(m, e) : null);
-          const L = a.state.interaction?.icon;
+        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);
         } else
           d = null, T = null;
-        f !== o && !C && (e[f] || f === (t.defaultState || "default")) && (i = f, C = !0, clearTimeout(x), l.style.transform = "scale(0)", x = setTimeout(() => {
-          o = i, l.innerHTML = e[o] || "", l.style.transform = "scale(1)", x = setTimeout(() => {
-            C = !1;
+        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(a.state);
-        n.setStyle(g, "width", `${b}px`), n.setStyle(g, "height", `${b}px`);
+        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(a.state);
+        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(a.state) && !P && !a.state.reducedMotion) {
-          const { x: L, y: I } = a.state.velocity;
-          w.dist(L, I) > 1 && (p = w.angle(L, I)), h = w.lerpAngle(
-            h,
-            p,
-            0.15
-          );
+        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);
         } else
           h = w.lerpAngle(h, 0, 0.15);
-        const M = r(a.state) === "raw" ? a.state.pointer : a.state.smooth;
+        const M = r(l.state) === "raw" ? l.state.pointer : l.state.smooth;
         n.setTransform(
-          g,
+          y,
           M.x + s + u,
           M.y + R + z,
           h
@@ -82,14 +86,14 @@ const q = (t) => {
     t
   );
 }, V = (t = {}) => {
-  const l = A(t.size, 20), o = A(t.hoverSize, 40), i = A(t.color, "#ffffff"), d = A(t.borderWidth, 2), T = A(t.fill, "transparent");
-  let C = 20, x = 20, h = 0, p = 1, E = 1;
+  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(
     {
       name: t.name || "smart-ring",
       selector: "[data-supermouse-color]",
       create: (r) => {
-        const S = n.createCircle(l(r.state), T(r.state));
+        const S = n.createCircle(a(r.state), T(r.state));
         return n.applyStyles(S, {
           zIndex: k.FOLLOWER,
           mixBlendMode: t.mixBlendMode || "difference",
@@ -98,39 +102,39 @@ const q = (t) => {
         }), S;
       },
       update: (r, S) => {
-        const v = l(r.state), y = r.state.shape;
-        let c = v, s = v, R = "50%", a = i(r.state);
-        y ? (c = y.width, s = y.height, R = `${y.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 && (a = r.state.interaction.color), C = w.lerp(C, c, 0.2), x = w.lerp(x, s, 0.2), n.setStyle(S, "width", `${C}px`), n.setStyle(S, "height", `${x}px`), n.setStyle(S, "borderRadius", R), n.setStyle(S, "borderColor", a), n.setStyle(S, "backgroundColor", T(r.state)), n.setStyle(S, "borderWidth", `${d(r.state)}px`);
-        let g = 0, e = 1, m = 1;
-        if (!y && t.enableSkew && !r.state.reducedMotion) {
+        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);
-          g = z.rotation, e = z.scaleX, m = z.scaleY, h = w.lerpAngle(h, g, 0.15);
+          y = z.rotation, e = z.scaleX, g = z.scaleY, h = w.lerpAngle(h, y, 0.15);
         } else
           h = 0;
-        p = w.lerp(p, e, 0.15), E = w.lerp(E, m, 0.15);
+        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, p, E);
+        n.setTransform(S, f, b, h, C, E);
       }
     },
     t
   );
 }, G = (t = {}) => {
-  const l = t.count || 30, o = t.decay || 0.05, i = t.frequency || 10, d = t.scatter || 5, C = A(t.color, "#ff00ff"), x = [];
-  let h = 0, p = 0, E = !1, r = 0;
-  const S = (v, y, c) => {
+  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 = y + w.random(-d, d);
-    const R = w.random(0, Math.PI * 2), a = w.random(0.5, 1.5);
-    s.vx = Math.cos(R) * a, s.vy = Math.sin(R) * a, s.scale = w.random(0.5, 1.2), s.color = c;
-    const g = w.random(2, 5);
-    n.setStyle(s.el, "width", `${g}px`), n.setStyle(s.el, "height", `${g}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);
+    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);
   };
   return N(
     {
       name: t.name || "sparkles",
       install(v) {
-        for (let y = 0; y < l; y++) {
+        for (let m = 0; m < a; m++) {
           const c = n.createCircle(0, "transparent");
           n.applyStyles(c, {
             zIndex: k.TRACE,
@@ -151,27 +155,27 @@ const q = (t) => {
         }
       },
       update(v) {
-        const { x: y, y: c } = v.state.pointer;
-        E || (h = y, p = c, E = !0);
-        const s = y - h, R = c - p, a = Math.hypot(s, R);
-        if (r += a, r > i) {
-          const g = C(v.state), e = Math.floor(r / i);
-          for (let m = 0; m < e; m++) {
-            const f = m / e, b = h + s * f, u = p + R * f;
-            S(b, u, g);
+        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);
           }
           r = r % i;
         }
-        h = y, p = c;
-        for (let g = 0; g < l; g++) {
-          const e = x[g];
+        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";
             else {
               e.el.style.opacity = String(e.life);
-              const m = e.scale * e.life;
-              n.setTransform(e.el, e.x, e.y, 0, m, m);
+              const g = e.scale * e.life;
+              n.setTransform(e.el, e.x, e.y, 0, g, g);
             }
         }
       },
@@ -182,48 +186,51 @@ const q = (t) => {
     t
   );
 };
-let j = 0;
+let U = 0;
 const J = (t = {}) => {
-  let l, o, i, d, T;
-  const C = `supermouse-text-ring-path-${j++}`, x = "SUPERMOUSE • SUPERMOUSE • ", h = 60, p = 12, E = 0.5, r = t.className || "", S = t.spread ?? !1, v = A(t.text, x), y = A(t.radius, h), c = A(t.fontSize, p), s = A(t.speed, E), R = A(t.opacity, 1);
-  let a = 0, g = "", e = 0, m = 0;
-  return N({
-    name: "text-ring",
-    selector: "[data-supermouse-text-ring]",
-    create: (f) => {
-      const b = n.createActor("div");
-      n.applyStyles(b, {
-        zIndex: k.FOLLOWER,
-        transition: "opacity 0.2s ease",
-        opacity: "1",
-        width: "0px",
-        height: "0px",
-        overflow: "visible",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }), r && b.classList.add(...r.split(" ").filter(Boolean)), l = document.createElementNS("http://www.w3.org/2000/svg", "svg"), l.style.overflow = "visible", l.style.position = "absolute", l.style.left = "0", l.style.top = "0", o = document.createElementNS("http://www.w3.org/2000/svg", "path"), o.setAttribute("id", C), 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`), m = 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", `#${C}`), i.setAttribute("href", `#${C}`), i.setAttribute("startOffset", "0%"), T = document.createTextNode(""), i.appendChild(T), d.appendChild(i), l.appendChild(o), l.appendChild(d), b.appendChild(l), b;
-    },
-    styles: {
-      color: "color"
+  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(
+    {
+      name: "text-ring",
+      selector: "[data-supermouse-text-ring]",
+      create: (f) => {
+        const b = n.createActor("div");
+        n.applyStyles(b, {
+          zIndex: k.FOLLOWER,
+          transition: "opacity 0.2s ease",
+          opacity: "1",
+          width: "0px",
+          height: "0px",
+          overflow: "visible",
+          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;
+      },
+      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);
+        } 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);
+      }
     },
-    update: (f, b) => {
-      let u = v(f.state);
-      const z = y(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);
-      } else
-        i.removeAttribute("textLength"), i.removeAttribute("lengthAdjust");
-      $ !== m && (d.setAttribute("font-size", `${$}px`), m = $), u !== g && (T.textContent = u, g = u), a += O;
-      const { x: L, y: I } = f.state.smooth;
-      n.setTransform(b, L, I, a);
-    }
-  }, t);
+    t
+  );
 };
 export {
   q as SmartIcon,