@supermousejs/labs 2.1.1 → 2.3.0

package/src/Sparkles.ts

@@ -1,168 +1,168 @@
-import type { ValueOrGetter } from "@supermousejs/core";
-import { definePlugin, normalize, dom, math, Layers } from "@supermousejs/utils";
-
-export interface SparklesOptions {
-  name?: string;
-  isEnabled?: boolean;
-  color?: ValueOrGetter<string>;
-  /** Number of particles to keep in the pool. Default 30. */
-  count?: number;
-  /** How fast particles fade out (0.01 - 0.1). Default 0.05. */
-  decay?: number;
-  /** Pixels of movement required to spawn a particle. Lower = denser trail. Default 10. */
-  frequency?: number;
-  /** Random position offset for spawning. Default 5. */
-  scatter?: number;
-}
-
-interface Particle {
-  el: HTMLDivElement;
-  isActive: boolean;
-  x: number;
-  y: number;
-  vx: number;
-  vy: number;
-  life: number; // 0.0 to 1.0
-  scale: number;
-  color: string;
-}
-
-export const Sparkles = (options: SparklesOptions = {}) => {
-  const poolSize = options.count || 30;
-  const decayRate = options.decay || 0.05;
-  const frequency = options.frequency || 10;
-  const scatter = options.scatter || 5;
-
-  const defColor = "#ff00ff";
-  const getColor = normalize(options.color, defColor);
-
-  const pool: Particle[] = [];
-
-  // Track previous position for interpolation
-  let lx = 0;
-  let ly = 0;
-  let hasMoved = false;
-  let accumulatedDist = 0;
-
-  const activateParticle = (x: number, y: number, color: string) => {
-    const p = pool.find((item) => !item.isActive);
-    if (!p) return;
-
-    p.isActive = true;
-    p.life = 1.0;
-
-    // Spawn with slight scatter around the calculated point
-    p.x = x + math.random(-scatter, scatter);
-    p.y = y + math.random(-scatter, scatter);
-
-    // Pure radial burst
-    const angle = math.random(0, Math.PI * 2);
-    const speed = math.random(0.5, 1.5);
-    p.vx = Math.cos(angle) * speed;
-    p.vy = Math.sin(angle) * speed;
-
-    p.scale = math.random(0.5, 1.2);
-    p.color = color;
-
-    // Apply immediate visual updates
-    const size = math.random(2, 5);
-    dom.setStyle(p.el, "width", `${size}px`);
-    dom.setStyle(p.el, "height", `${size}px`);
-    dom.setStyle(p.el, "backgroundColor", color);
-    dom.setStyle(p.el, "opacity", "1");
-    dom.setTransform(p.el, p.x, p.y, 0, p.scale, p.scale);
-  };
-
-  return definePlugin(
-    {
-      name: options.name || "sparkles",
-
-      install(app) {
-        for (let i = 0; i < poolSize; i++) {
-          const el = dom.createCircle(0, "transparent");
-          dom.applyStyles(el, {
-            zIndex: Layers.TRACE,
-            opacity: "0",
-            willChange: "transform, opacity",
-            transition: "none",
-          });
-          app.container.appendChild(el);
-          pool.push({
-            el,
-            isActive: false,
-            x: 0,
-            y: 0,
-            vx: 0,
-            vy: 0,
-            life: 0,
-            scale: 1,
-            color: "",
-          });
-        }
-      },
-
-      update(app) {
-        const { x: cx, y: cy } = app.state.pointer;
-
-        // --- 1. SPAWN LOGIC (Interpolated) ---
-        if (!hasMoved) {
-          lx = cx;
-          ly = cy;
-          hasMoved = true;
-        }
-
-        const dx = cx - lx;
-        const dy = cy - ly;
-        const dist = Math.hypot(dx, dy);
-
-        accumulatedDist += dist;
-
-        // If we have moved enough to spawn one or more particles
-        if (accumulatedDist > frequency) {
-          const color = getColor(app.state);
-
-          // How many particles fit in this movement?
-          const steps = Math.floor(accumulatedDist / frequency);
-
-          // Interpolate backwards from current position
-          for (let i = 0; i < steps; i++) {
-            const t = i / steps;
-            const spawnX = lx + dx * t;
-            const spawnY = ly + dy * t;
-            activateParticle(spawnX, spawnY, color);
-          }
-
-          accumulatedDist = accumulatedDist % frequency;
-        }
-
-        lx = cx;
-        ly = cy;
-
-        // --- 2. PHYSICS LOOP ---
-        for (let i = 0; i < poolSize; i++) {
-          const p = pool[i];
-          if (!p.isActive) continue;
-
-          p.x += p.vx;
-          p.y += p.vy;
-          p.life -= decayRate;
-
-          if (p.life <= 0) {
-            p.isActive = false;
-            p.el.style.opacity = "0";
-          } else {
-            p.el.style.opacity = String(p.life);
-            const currentScale = p.scale * p.life;
-            dom.setTransform(p.el, p.x, p.y, 0, currentScale, currentScale);
-          }
-        }
-      },
-
-      destroy() {
-        pool.forEach((p) => p.el.remove());
-        pool.length = 0;
-      },
-    },
-    options
-  );
-};
+import type { ValueOrGetter, Supermouse } from "@supermousejs/core";
+import { definePlugin, normalize, dom, math, Layers } from "@supermousejs/utils";
+
+export interface SparklesOptions {
+  name?: string;
+  isEnabled?: boolean;
+  color?: ValueOrGetter<string>;
+  /** Number of particles to keep in the pool. Default 30. */
+  count?: number;
+  /** How fast particles fade out (0.01 - 0.1). Default 0.05. */
+  decay?: number;
+  /** Pixels of movement required to spawn a particle. Lower = denser trail. Default 10. */
+  frequency?: number;
+  /** Random position offset for spawning. Default 5. */
+  scatter?: number;
+}
+
+interface Particle {
+  el: HTMLDivElement;
+  isActive: boolean;
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  life: number; // 0.0 to 1.0
+  scale: number;
+  color: string;
+}
+
+export const Sparkles = (options: SparklesOptions = {}) => {
+  const poolSize = options.count || 30;
+  const decayRate = options.decay || 0.05;
+  const frequency = options.frequency || 10;
+  const scatter = options.scatter || 5;
+
+  const defColor = "#ff00ff";
+  const getColor = normalize(options.color, defColor);
+
+  const pool: Particle[] = [];
+
+  // Track previous position for interpolation
+  let lx = 0;
+  let ly = 0;
+  let hasMoved = false;
+  let accumulatedDist = 0;
+
+  const activateParticle = (x: number, y: number, color: string) => {
+    const p = pool.find((item) => !item.isActive);
+    if (!p) return;
+
+    p.isActive = true;
+    p.life = 1.0;
+
+    // Spawn with slight scatter around the calculated point
+    p.x = x + math.random(-scatter, scatter);
+    p.y = y + math.random(-scatter, scatter);
+
+    // Pure radial burst
+    const angle = math.random(0, Math.PI * 2);
+    const speed = math.random(0.5, 1.5);
+    p.vx = Math.cos(angle) * speed;
+    p.vy = Math.sin(angle) * speed;
+
+    p.scale = math.random(0.5, 1.2);
+    p.color = color;
+
+    // Apply immediate visual updates
+    const size = math.random(2, 5);
+    dom.setStyle(p.el, "width", `${size}px`);
+    dom.setStyle(p.el, "height", `${size}px`);
+    dom.setStyle(p.el, "backgroundColor", color);
+    dom.setStyle(p.el, "opacity", "1");
+    dom.setTransform(p.el, p.x, p.y, 0, p.scale, p.scale);
+  };
+
+  return definePlugin(
+    {
+      name: options.name || "sparkles",
+
+      install(app: Supermouse) {
+        for (let i = 0; i < poolSize; i++) {
+          const el = dom.createCircle(0, "transparent");
+          dom.applyStyles(el, {
+            zIndex: Layers.TRACE,
+            opacity: "0",
+            willChange: "transform, opacity",
+            transition: "none"
+          });
+          app.container.appendChild(el);
+          pool.push({
+            el,
+            isActive: false,
+            x: 0,
+            y: 0,
+            vx: 0,
+            vy: 0,
+            life: 0,
+            scale: 1,
+            color: ""
+          });
+        }
+      },
+
+      update(app: Supermouse) {
+        const { x: cx, y: cy } = app.state.pointer;
+
+        // --- 1. SPAWN LOGIC (Interpolated) ---
+        if (!hasMoved) {
+          lx = cx;
+          ly = cy;
+          hasMoved = true;
+        }
+
+        const dx = cx - lx;
+        const dy = cy - ly;
+        const dist = Math.hypot(dx, dy);
+
+        accumulatedDist += dist;
+
+        // If we have moved enough to spawn one or more particles
+        if (accumulatedDist > frequency) {
+          const color = getColor(app.state);
+
+          // How many particles fit in this movement?
+          const steps = Math.floor(accumulatedDist / frequency);
+
+          // Interpolate backwards from current position
+          for (let i = 0; i < steps; i++) {
+            const t = i / steps;
+            const spawnX = lx + dx * t;
+            const spawnY = ly + dy * t;
+            activateParticle(spawnX, spawnY, color);
+          }
+
+          accumulatedDist = accumulatedDist % frequency;
+        }
+
+        lx = cx;
+        ly = cy;
+
+        // --- 2. PHYSICS LOOP ---
+        for (let i = 0; i < poolSize; i++) {
+          const p = pool[i];
+          if (!p.isActive) continue;
+
+          p.x += p.vx;
+          p.y += p.vy;
+          p.life -= decayRate;
+
+          if (p.life <= 0) {
+            p.isActive = false;
+            p.el.style.opacity = "0";
+          } else {
+            p.el.style.opacity = String(p.life);
+            const currentScale = p.scale * p.life;
+            dom.setTransform(p.el, p.x, p.y, 0, currentScale, currentScale);
+          }
+        }
+      },
+
+      destroy() {
+        pool.forEach((p) => p.el.remove());
+        pool.length = 0;
+      }
+    },
+    options
+  );
+};

package/src/TextRing.ts

@@ -1,156 +1,159 @@
-import type { ValueOrGetter } from '@supermousejs/core';
-import { definePlugin, normalize, dom, Layers } from '@supermousejs/utils';
-import { getCirclePath, getCircumference, formatLoopText } from '@supermousejs/zoetrope';
-
-export interface TextRingOptions {
-  name?: string;
-  isEnabled?: boolean;
-  text?: ValueOrGetter<string>;
-  radius?: ValueOrGetter<number>;
-  fontSize?: ValueOrGetter<number>;
-  speed?: ValueOrGetter<number>;
-  color?: ValueOrGetter<string>;
-  opacity?: ValueOrGetter<number>;
-  className?: string;
-  spread?: boolean;
-}
-
-let instanceCount = 0;
-
-export const TextRing = (options: TextRingOptions = {}) => {
-  let svg: SVGSVGElement;
-  let pathEl: SVGPathElement;
-  let textPathEl: SVGTextPathElement;
-  let textEl: SVGTextElement;
-  let textNode: Text;
-  
-  const pathId = `supermouse-text-ring-path-${instanceCount++}`;
-
-  const defText = 'SUPERMOUSE • SUPERMOUSE • ';
-  const defRadius = 60;
-  const defFontSize = 12;
-  const defSpeed = 0.5;
-  const className = options.className || '';
-  const spread = options.spread ?? false; 
-
-  const getText = normalize(options.text, defText);
-  const getRadius = normalize(options.radius, defRadius);
-  const getFontSize = normalize(options.fontSize, defFontSize);
-  const getSpeed = normalize(options.speed, defSpeed);
-  const getOpacity = normalize(options.opacity, 1);
-
-  let currentRotation = 0;
-  let lastText = '';
-  let lastRadius = 0;
-  let lastFontSize = 0;
-
-  return definePlugin<HTMLDivElement, TextRingOptions>({
-    name: 'text-ring',
-    selector: '[data-supermouse-text-ring]',
-
-    create: (app) => {
-      const container = dom.createActor('div') as HTMLDivElement;
-      dom.applyStyles(container, {
-        zIndex: Layers.FOLLOWER,
-        transition: 'opacity 0.2s ease',
-        opacity: '1',
-        width: '0px',
-        height: '0px',
-        overflow: 'visible',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      });
-      if (className) {
-        container.classList.add(...className.split(' ').filter(Boolean));
-      }
-
-      svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      svg.style.overflow = 'visible';
-      svg.style.position = 'absolute';
-      svg.style.left = '0';
-      svg.style.top = '0';
-      
-      pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      pathEl.setAttribute('id', pathId);
-      pathEl.setAttribute('fill', 'none');
-      
-      textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-      
-      const fs = getFontSize(app.state);
-      textEl.setAttribute('font-size', `${fs}px`);
-      lastFontSize = fs;
-
-      textEl.setAttribute('fill', 'currentColor');
-      textEl.style.textTransform = 'uppercase';
-      textEl.style.letterSpacing = '2px';
-
-      textPathEl = document.createElementNS('http://www.w3.org/2000/svg', 'textPath');
-      textPathEl.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `#${pathId}`);
-      textPathEl.setAttribute('href', `#${pathId}`);
-      textPathEl.setAttribute('startOffset', '0%');
-      
-      textNode = document.createTextNode('');
-      
-      textPathEl.appendChild(textNode);
-      textEl.appendChild(textPathEl);
-      svg.appendChild(pathEl);
-      svg.appendChild(textEl);
-      container.appendChild(svg);
-
-      return container;
-    },
-
-    styles: {
-      color: 'color'
-    },
-
-    update: (app, container) => {
-      let text = getText(app.state);
-      const radius = getRadius(app.state);
-      const fontSize = getFontSize(app.state);
-      const speed = getSpeed(app.state);
-      const opacity = getOpacity(app.state);
-
-      // Force update opacity
-      dom.setStyle(container, 'opacity', String(opacity));
-
-      const ia = app.state.interaction;
-      // Prefer specific "textRing" property, fallback to generic "text", then default option
-      if (ia.textRing && typeof ia.textRing === 'string') {
-        text = ia.textRing;
-      } else if (ia.text && typeof ia.text === 'string') {
-        text = ia.text;
-      }
-
-      if (radius !== lastRadius) {
-        pathEl.setAttribute('d', getCirclePath(radius));
-        lastRadius = radius;
-      }
-
-      if (spread) {
-        const circum = getCircumference(radius);
-        textPathEl.setAttribute('textLength', String(circum));
-        textPathEl.setAttribute('lengthAdjust', 'spacing');
-        text = formatLoopText(text, true);
-      } else {
-        textPathEl.removeAttribute('textLength');
-        textPathEl.removeAttribute('lengthAdjust');
-      }
-
-      if (fontSize !== lastFontSize) {
-        textEl.setAttribute('font-size', `${fontSize}px`);
-        lastFontSize = fontSize;
-      }
-
-      if (text !== lastText) {
-        textNode.textContent = text;
-        lastText = text;
-      }
-
-      currentRotation += speed;
-      const { x, y } = app.state.smooth;
-      dom.setTransform(container, x, y, currentRotation);
-    }
-  }, options);
-};
+import type { ValueOrGetter, Supermouse } from "@supermousejs/core";
+import { definePlugin, normalize, dom, Layers } from "@supermousejs/utils";
+import { getCirclePath, getCircumference, formatLoopText } from "@supermousejs/zoetrope";
+
+export interface TextRingOptions {
+  name?: string;
+  isEnabled?: boolean;
+  text?: ValueOrGetter<string>;
+  radius?: ValueOrGetter<number>;
+  fontSize?: ValueOrGetter<number>;
+  speed?: ValueOrGetter<number>;
+  color?: ValueOrGetter<string>;
+  opacity?: ValueOrGetter<number>;
+  className?: string;
+  spread?: boolean;
+}
+
+let instanceCount = 0;
+
+export const TextRing = (options: TextRingOptions = {}) => {
+  let svg: SVGSVGElement;
+  let pathEl: SVGPathElement;
+  let textPathEl: SVGTextPathElement;
+  let textEl: SVGTextElement;
+  let textNode: Text;
+
+  const pathId = `supermouse-text-ring-path-${instanceCount++}`;
+
+  const defText = "SUPERMOUSE • SUPERMOUSE • ";
+  const defRadius = 60;
+  const defFontSize = 12;
+  const defSpeed = 0.5;
+  const className = options.className || "";
+  const spread = options.spread ?? false;
+
+  const getText = normalize(options.text, defText);
+  const getRadius = normalize(options.radius, defRadius);
+  const getFontSize = normalize(options.fontSize, defFontSize);
+  const getSpeed = normalize(options.speed, defSpeed);
+  const getOpacity = normalize(options.opacity, 1);
+
+  let currentRotation = 0;
+  let lastText = "";
+  let lastRadius = 0;
+  let lastFontSize = 0;
+
+  return definePlugin<HTMLDivElement, TextRingOptions>(
+    {
+      name: "text-ring",
+      selector: "[data-supermouse-text-ring]",
+
+      create: (app: Supermouse) => {
+        const container = dom.createActor("div") as HTMLDivElement;
+        dom.applyStyles(container, {
+          zIndex: Layers.FOLLOWER,
+          transition: "opacity 0.2s ease",
+          opacity: "1",
+          width: "0px",
+          height: "0px",
+          overflow: "visible",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        });
+        if (className) {
+          container.classList.add(...className.split(" ").filter(Boolean));
+        }
+
+        svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.style.overflow = "visible";
+        svg.style.position = "absolute";
+        svg.style.left = "0";
+        svg.style.top = "0";
+
+        pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        pathEl.setAttribute("id", pathId);
+        pathEl.setAttribute("fill", "none");
+
+        textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+
+        const fs = getFontSize(app.state);
+        textEl.setAttribute("font-size", `${fs}px`);
+        lastFontSize = fs;
+
+        textEl.setAttribute("fill", "currentColor");
+        textEl.style.textTransform = "uppercase";
+        textEl.style.letterSpacing = "2px";
+
+        textPathEl = document.createElementNS("http://www.w3.org/2000/svg", "textPath");
+        textPathEl.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", `#${pathId}`);
+        textPathEl.setAttribute("href", `#${pathId}`);
+        textPathEl.setAttribute("startOffset", "0%");
+
+        textNode = document.createTextNode("");
+
+        textPathEl.appendChild(textNode);
+        textEl.appendChild(textPathEl);
+        svg.appendChild(pathEl);
+        svg.appendChild(textEl);
+        container.appendChild(svg);
+
+        return container;
+      },
+
+      styles: {
+        color: "color"
+      },
+
+      update: (app: Supermouse, container: HTMLDivElement) => {
+        let text = getText(app.state);
+        const radius = getRadius(app.state);
+        const fontSize = getFontSize(app.state);
+        const speed = getSpeed(app.state);
+        const opacity = getOpacity(app.state);
+
+        // Force update opacity
+        dom.setStyle(container, "opacity", String(opacity));
+
+        const ia = app.state.interaction;
+        // Prefer specific "textRing" property, fallback to generic "text", then default option
+        if (ia.textRing && typeof ia.textRing === "string") {
+          text = ia.textRing;
+        } else if (ia.text && typeof ia.text === "string") {
+          text = ia.text;
+        }
+
+        if (radius !== lastRadius) {
+          pathEl.setAttribute("d", getCirclePath(radius));
+          lastRadius = radius;
+        }
+
+        if (spread) {
+          const circum = getCircumference(radius);
+          textPathEl.setAttribute("textLength", String(circum));
+          textPathEl.setAttribute("lengthAdjust", "spacing");
+          text = formatLoopText(text, true);
+        } else {
+          textPathEl.removeAttribute("textLength");
+          textPathEl.removeAttribute("lengthAdjust");
+        }
+
+        if (fontSize !== lastFontSize) {
+          textEl.setAttribute("font-size", `${fontSize}px`);
+          lastFontSize = fontSize;
+        }
+
+        if (text !== lastText) {
+          textNode.textContent = text;
+          lastText = text;
+        }
+
+        currentRotation += speed;
+        const { x, y } = app.state.smooth;
+        dom.setTransform(container, x, y, currentRotation);
+      }
+    },
+    options
+  );
+};

package/src/index.ts

@@ -1,5 +1,4 @@
-
-export * from './SmartIcon';
-export * from './SmartRing';
-export * from './Sparkles';
-export * from './TextRing';
+export * from "./SmartIcon";
+export * from "./SmartRing";
+export * from "./Sparkles";
+export * from "./TextRing";