@supermousejs/labs 2.1.1 → 2.2.0

package/src/SmartIcon.ts

@@ -1,239 +1,200 @@
-import type { ValueOrGetter } from "@supermousejs/core";
-import { definePlugin, normalize, dom, math, Layers } from "@supermousejs/utils";
-
-export interface SmartIconMap {
-  [key: string]: string;
-}
-
-export type SmartIconAnchor =
-  | "center"
-  | "top-left"
-  | "top-right"
-  | "bottom-left"
-  | "bottom-right";
-
-export interface SmartIconOptions {
-  name?: string;
-  isEnabled?: boolean;
-  icons: SmartIconMap;
-  defaultState?: string;
-  useSemanticTags?: boolean;
-  transitionDuration?: number;
-  size?: ValueOrGetter<number>;
-  color?: ValueOrGetter<string>;
-  offset?: [number, number];
-  anchor?: ValueOrGetter<SmartIconAnchor>;
-  followStrategy?: ValueOrGetter<"smooth" | "raw">;
-  rotateWithVelocity?: ValueOrGetter<boolean>;
-}
-
-function resolveSemanticState(
-  target: HTMLElement,
-  icons: SmartIconMap
-): string | null {
-  const tag = target.tagName.toLowerCase();
-
-  if (tag === "input" || tag === "textarea" || target.isContentEditable) {
-    const type = (target as HTMLInputElement).type;
-    if (
-      !["button", "submit", "checkbox", "radio", "range", "color"].includes(
-        type
-      )
-    ) {
-      if (icons["text"]) return "text";
-    } else if (icons["pointer"]) {
-      return "pointer";
-    }
-  } else if (
-    tag === "a" ||
-    tag === "button" ||
-    target.closest("a") ||
-    target.closest("button")
-  ) {
-    if (icons["pointer"]) return "pointer";
-  }
-  return null;
-}
-
-export const SmartIcon = (options: SmartIconOptions) => {
-  let contentWrapper: HTMLDivElement;
-
-  // State
-  let currentState = options.defaultState || "default";
-  let targetState = options.defaultState || "default";
-
-  let lastTarget: HTMLElement | null = null;
-  let cachedSemanticState: string | null = null;
-
-  let isTransitioning = false;
-  let transitionTimer: ReturnType<typeof setTimeout>;
-
-  // Rotation State
-  let currentRotation = 0;
-  let lastTargetRotation = 0;
-
-  // Normalized Getters (Pre-calculated)
-  const getSize = normalize(options.size, 24);
-  const getStrategy = normalize(options.followStrategy, "smooth");
-  const getAnchor = normalize(options.anchor, "center");
-  const getShouldRotate = normalize(options.rotateWithVelocity, false);
-
-  const useSemanticTags = options.useSemanticTags ?? true;
-  const duration = options.transitionDuration ?? 200;
-  const userOffX = options.offset ? options.offset[0] : 0;
-  const userOffY = options.offset ? options.offset[1] : 0;
-
-  return definePlugin<HTMLDivElement, SmartIconOptions>(
-    {
-      name: options.name || "smart-icon",
-      selector: "[data-supermouse-icon]",
-
-      create: () => {
-        const el = dom.createActor("div") as HTMLDivElement;
-        el.style.zIndex = Layers.CURSOR;
-
-        contentWrapper = dom.createActor("div") as HTMLDivElement;
-        dom.applyStyles(contentWrapper, {
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          transformOrigin: "center center",
-          transform: "scale(1)",
-          // Pre-baked ease. Note: If duration changes dynamically, this won't update.
-          transition: `transform ${
-            duration / 2
-          }ms cubic-bezier(0.16, 1, 0.3, 1)`,
-        });
-
-        contentWrapper.innerHTML = options.icons[currentState] || "";
-
-        el.appendChild(contentWrapper);
-        return el;
-      },
-
-      styles: {
-        color: "color",
-      },
-
-      update: (app, el) => {
-        const icons = options.icons;
-        const target = app.state.hoverTarget;
-
-        // 1. Determine Next State
-        let nextState = options.defaultState || "default";
-
-        if (target) {
-          // A. Update Cache if target changed (Performance Fix)
-          if (target !== lastTarget) {
-            lastTarget = target;
-            cachedSemanticState = useSemanticTags
-              ? resolveSemanticState(target, icons)
-              : null;
-          }
-
-          // B. Resolve Logic
-          // Check Unified Interaction State (Attribute)
-          const attrSmartIcon = app.state.interaction?.icon; // Optional chaining safety
-
-          if (attrSmartIcon && icons[attrSmartIcon]) {
-            nextState = attrSmartIcon;
-          } else if (cachedSemanticState) {
-            nextState = cachedSemanticState;
-          }
-        } else {
-          lastTarget = null;
-          cachedSemanticState = null;
-        }
-
-        // 2. Handle State Transition
-        if (nextState !== currentState && !isTransitioning) {
-          if (
-            icons[nextState] ||
-            nextState === (options.defaultState || "default")
-          ) {
-            targetState = nextState;
-            isTransitioning = true;
-
-            // Clean up any pending timer to avoid race conditions
-            clearTimeout(transitionTimer);
-
-            // Scale Down
-            contentWrapper.style.transform = "scale(0)";
-
-            transitionTimer = setTimeout(() => {
-              currentState = targetState;
-              contentWrapper.innerHTML = icons[currentState] || "";
-              contentWrapper.style.transform = "scale(1)";
-
-              transitionTimer = setTimeout(() => {
-                isTransitioning = false;
-              }, duration / 2);
-            }, duration / 2);
-          }
-        }
-
-        // 3. Layout & Styling
-        const size = getSize(app.state);
-        dom.setStyle(el, "width", `${size}px`);
-        dom.setStyle(el, "height", `${size}px`);
-
-        // 4. Calculate Anchor
-        let anchorX = 0;
-        let anchorY = 0;
-        const half = size / 2;
-        const anchor = getAnchor(app.state);
-
-        if (anchor !== "center") {
-          if (anchor.includes("left")) anchorX = half;
-          if (anchor.includes("right")) anchorX = -half;
-          if (anchor.includes("top")) anchorY = half;
-          if (anchor.includes("bottom")) anchorY = -half;
-        }
-
-        // 5. Rotation
-        const isSemanticState =
-          currentState === "pointer" || currentState === "text";
-
-        if (
-          getShouldRotate(app.state) &&
-          !isSemanticState &&
-          !app.state.reducedMotion
-        ) {
-          const { x: vx, y: vy } = app.state.velocity;
-          const speed = math.dist(vx, vy);
-
-          if (speed > 1) {
-            lastTargetRotation = math.angle(vx, vy);
-          }
-          // Assuming math.lerpAngle handles the 360 wrap logic correctly
-          currentRotation = math.lerpAngle(
-            currentRotation,
-            lastTargetRotation,
-            0.15
-          );
-        } else {
-          currentRotation = math.lerpAngle(currentRotation, 0, 0.15);
-        }
-
-        // 6. Render
-        const pos =
-          getStrategy(app.state) === "raw"
-            ? app.state.pointer
-            : app.state.smooth;
-        dom.setTransform(
-          el,
-          pos.x + userOffX + anchorX,
-          pos.y + userOffY + anchorY,
-          currentRotation
-        );
-      },
-
-      cleanup() {
-        clearTimeout(transitionTimer);
-      },
-    },
-    options
-  );
-};
+import type { ValueOrGetter, Supermouse } from "@supermousejs/core";
+import { definePlugin, normalize, dom, math, Layers } from "@supermousejs/utils";
+
+export interface SmartIconMap {
+  [key: string]: string;
+}
+
+export type SmartIconAnchor = "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+
+export interface SmartIconOptions {
+  name?: string;
+  isEnabled?: boolean;
+  icons: SmartIconMap;
+  defaultState?: string;
+  useSemanticTags?: boolean;
+  transitionDuration?: number;
+  size?: ValueOrGetter<number>;
+  color?: ValueOrGetter<string>;
+  offset?: [number, number];
+  anchor?: ValueOrGetter<SmartIconAnchor>;
+  followStrategy?: ValueOrGetter<"smooth" | "raw">;
+  rotateWithVelocity?: ValueOrGetter<boolean>;
+}
+
+function resolveSemanticState(target: HTMLElement, icons: SmartIconMap): string | null {
+  const tag = target.tagName.toLowerCase();
+
+  if (tag === "input" || tag === "textarea" || target.isContentEditable) {
+    const type = (target as HTMLInputElement).type;
+    if (!["button", "submit", "checkbox", "radio", "range", "color"].includes(type)) {
+      if (icons["text"]) return "text";
+    } else if (icons["pointer"]) {
+      return "pointer";
+    }
+  } else if (tag === "a" || tag === "button" || target.closest("a") || target.closest("button")) {
+    if (icons["pointer"]) return "pointer";
+  }
+  return null;
+}
+
+export const SmartIcon = (options: SmartIconOptions) => {
+  let contentWrapper: HTMLDivElement;
+
+  let currentState = options.defaultState || "default";
+  let targetState = options.defaultState || "default";
+
+  let lastTarget: HTMLElement | null = null;
+  let cachedSemanticState: string | null = null;
+
+  let isTransitioning = false;
+  let transitionTimer: ReturnType<typeof setTimeout>;
+
+  let currentRotation = 0;
+  let lastTargetRotation = 0;
+
+  const getSize = normalize(options.size, 24);
+  const getStrategy = normalize(options.followStrategy, "smooth");
+  const getAnchor = normalize(options.anchor, "center");
+  const getShouldRotate = normalize(options.rotateWithVelocity, false);
+
+  const useSemanticTags = options.useSemanticTags ?? true;
+  const duration = options.transitionDuration ?? 200;
+  const userOffX = options.offset ? options.offset[0] : 0;
+  const userOffY = options.offset ? options.offset[1] : 0;
+
+  return definePlugin<HTMLDivElement, SmartIconOptions>(
+    {
+      name: options.name || "smart-icon",
+      selector: "[data-supermouse-icon]",
+
+      create: () => {
+        const el = dom.createActor("div") as HTMLDivElement;
+        el.style.zIndex = Layers.CURSOR;
+
+        contentWrapper = dom.createActor("div") as HTMLDivElement;
+        dom.applyStyles(contentWrapper, {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transformOrigin: "center center",
+          transform: "scale(1)",
+          transition: `transform ${duration / 2}ms cubic-bezier(0.16, 1, 0.3, 1)`
+        });
+
+        contentWrapper.innerHTML = options.icons[currentState] || "";
+
+        dom.injectStyles(
+          "supermouse-smart-icon-styles",
+          `
+        @keyframes sm {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        .supermouse-spin {
+          animation: sm 1s linear infinite;
+        }
+        `
+        );
+
+        el.appendChild(contentWrapper);
+        return el;
+      },
+
+      styles: {
+        color: "color"
+      },
+
+      update: (app: Supermouse, el: HTMLDivElement) => {
+        const icons = options.icons;
+        const target = app.state.hoverTarget;
+
+        let nextState = options.defaultState || "default";
+
+        if (target) {
+          if (target !== lastTarget) {
+            lastTarget = target;
+            cachedSemanticState = useSemanticTags ? resolveSemanticState(target, icons) : null;
+          }
+
+          const attrSmartIcon = app.state.interaction?.icon;
+
+          if (attrSmartIcon && icons[attrSmartIcon]) {
+            nextState = attrSmartIcon;
+          } else if (cachedSemanticState) {
+            nextState = cachedSemanticState;
+          }
+        } else {
+          lastTarget = null;
+          cachedSemanticState = null;
+        }
+
+        if (nextState !== currentState && !isTransitioning) {
+          if (icons[nextState] || nextState === (options.defaultState || "default")) {
+            targetState = nextState;
+            isTransitioning = true;
+
+            clearTimeout(transitionTimer);
+
+            contentWrapper.style.transform = "scale(0)";
+
+            transitionTimer = setTimeout(() => {
+              currentState = targetState;
+              contentWrapper.innerHTML = icons[currentState] || "";
+              contentWrapper.style.transform = "scale(1)";
+
+              transitionTimer = setTimeout(() => {
+                isTransitioning = false;
+              }, duration / 2);
+            }, duration / 2);
+          }
+        }
+
+        const size = getSize(app.state);
+        dom.setStyle(el, "width", `${size}px`);
+        dom.setStyle(el, "height", `${size}px`);
+
+        let anchorX = 0;
+        let anchorY = 0;
+        const half = size / 2;
+        const anchor = getAnchor(app.state);
+
+        if (anchor !== "center") {
+          if (anchor.includes("left")) anchorX = half;
+          if (anchor.includes("right")) anchorX = -half;
+          if (anchor.includes("top")) anchorY = half;
+          if (anchor.includes("bottom")) anchorY = -half;
+        }
+
+        const isSemanticState = currentState === "pointer" || currentState === "text";
+
+        if (getShouldRotate(app.state) && !isSemanticState && !app.state.reducedMotion) {
+          const { x: vx, y: vy } = app.state.velocity;
+          const speed = math.dist(vx, vy);
+
+          if (speed > 1) {
+            lastTargetRotation = math.angle(vx, vy);
+          }
+          currentRotation = math.lerpAngle(currentRotation, lastTargetRotation, 0.15);
+        } else {
+          currentRotation = math.lerpAngle(currentRotation, 0, 0.15);
+        }
+
+        const pos = getStrategy(app.state) === "raw" ? app.state.pointer : app.state.smooth;
+        dom.setTransform(
+          el,
+          pos.x + userOffX + anchorX,
+          pos.y + userOffY + anchorY,
+          currentRotation
+        );
+      },
+
+      cleanup() {
+        clearTimeout(transitionTimer);
+      }
+    },
+    options
+  );
+};

package/src/SmartRing.ts

@@ -1,105 +1,105 @@
-import type { ValueOrGetter } from "@supermousejs/core";
-import { definePlugin, normalize, dom, math, effects, Layers } from "@supermousejs/utils";
-
-export interface SmartRingOptions {
-  name?: string;
-  isEnabled?: boolean;
-  size?: ValueOrGetter<number>;
-  hoverSize?: ValueOrGetter<number>;
-  color?: ValueOrGetter<string>;
-  fill?: ValueOrGetter<string>;
-  borderWidth?: ValueOrGetter<number>;
-  mixBlendMode?: string;
-  enableSkew?: boolean;
-}
-
-export const SmartRing = (options: SmartRingOptions = {}) => {
-  const getSize = normalize(options.size, 20);
-  const getHoverSize = normalize(options.hoverSize, 40);
-  const getColor = normalize(options.color, "#ffffff");
-  const getBorder = normalize(options.borderWidth, 2);
-  const getFill = normalize(options.fill, "transparent");
-
-  let currentW = 20;
-  let currentH = 20;
-  let currentRot = 0;
-  let currentScaleX = 1;
-  let currentScaleY = 1;
-
-  return definePlugin<HTMLDivElement, SmartRingOptions>(
-    {
-      name: options.name || "smart-ring",
-      selector: "[data-supermouse-color]",
-
-      create: (app) => {
-        const el = dom.createCircle(getSize(app.state), getFill(app.state));
-        dom.applyStyles(el, {
-          zIndex: Layers.FOLLOWER,
-          mixBlendMode: options.mixBlendMode || "difference",
-          transition: "opacity 0.2s ease, border-radius 0.2s ease",
-          borderStyle: "solid",
-        });
-        return el;
-      },
-
-      update: (app, el) => {
-        const baseSize = getSize(app.state);
-        const shape = app.state.shape;
-
-        let targetW = baseSize;
-        let targetH = baseSize;
-        let targetRadius = "50%";
-        let color = getColor(app.state);
-
-        if (shape) {
-          targetW = shape.width;
-          targetH = shape.height;
-          targetRadius = `${shape.borderRadius}px`;
-        } else {
-          if (app.state.isHover) {
-            targetW = getHoverSize(app.state);
-            targetH = getHoverSize(app.state);
-          }
-          if (app.state.isDown) {
-            targetW *= 0.9;
-            targetH *= 0.9;
-          }
-        }
-
-        if (app.state.interaction.color) color = app.state.interaction.color;
-
-        currentW = math.lerp(currentW, targetW, 0.2);
-        currentH = math.lerp(currentH, targetH, 0.2);
-
-        dom.setStyle(el, "width", `${currentW}px`);
-        dom.setStyle(el, "height", `${currentH}px`);
-        dom.setStyle(el, "borderRadius", targetRadius);
-        dom.setStyle(el, "borderColor", color);
-        dom.setStyle(el, "backgroundColor", getFill(app.state));
-        dom.setStyle(el, "borderWidth", `${getBorder(app.state)}px`);
-
-        let targetRot = 0;
-        let targetScaleX = 1;
-        let targetScaleY = 1;
-
-        if (!shape && options.enableSkew && !app.state.reducedMotion) {
-          const { velocity } = app.state;
-          const dist = effects.getVelocityDistortion(velocity.x, velocity.y);
-          targetRot = dist.rotation;
-          targetScaleX = dist.scaleX;
-          targetScaleY = dist.scaleY;
-          currentRot = math.lerpAngle(currentRot, targetRot, 0.15);
-        } else {
-          currentRot = 0;
-        }
-
-        currentScaleX = math.lerp(currentScaleX, targetScaleX, 0.15);
-        currentScaleY = math.lerp(currentScaleY, targetScaleY, 0.15);
-
-        const { x, y } = app.state.smooth;
-        dom.setTransform(el, x, y, currentRot, currentScaleX, currentScaleY);
-      },
-    },
-    options
-  );
-};
+import type { ValueOrGetter, Supermouse } from "@supermousejs/core";
+import { definePlugin, normalize, dom, math, effects, Layers } from "@supermousejs/utils";
+
+export interface SmartRingOptions {
+  name?: string;
+  isEnabled?: boolean;
+  size?: ValueOrGetter<number>;
+  hoverSize?: ValueOrGetter<number>;
+  color?: ValueOrGetter<string>;
+  fill?: ValueOrGetter<string>;
+  borderWidth?: ValueOrGetter<number>;
+  mixBlendMode?: string;
+  enableSkew?: boolean;
+}
+
+export const SmartRing = (options: SmartRingOptions = {}) => {
+  const getSize = normalize(options.size, 20);
+  const getHoverSize = normalize(options.hoverSize, 40);
+  const getColor = normalize(options.color, "#ffffff");
+  const getBorder = normalize(options.borderWidth, 2);
+  const getFill = normalize(options.fill, "transparent");
+
+  let currentW = 20;
+  let currentH = 20;
+  let currentRot = 0;
+  let currentScaleX = 1;
+  let currentScaleY = 1;
+
+  return definePlugin<HTMLDivElement, SmartRingOptions>(
+    {
+      name: options.name || "smart-ring",
+      selector: "[data-supermouse-color]",
+
+      create: (app: Supermouse) => {
+        const el = dom.createCircle(getSize(app.state), getFill(app.state));
+        dom.applyStyles(el, {
+          zIndex: Layers.FOLLOWER,
+          mixBlendMode: options.mixBlendMode || "difference",
+          transition: "opacity 0.2s ease, border-radius 0.2s ease",
+          borderStyle: "solid"
+        });
+        return el;
+      },
+
+      update: (app: Supermouse, el: HTMLDivElement) => {
+        const baseSize = getSize(app.state);
+        const shape = app.state.shape;
+
+        let targetW = baseSize;
+        let targetH = baseSize;
+        let targetRadius = "50%";
+        let color = getColor(app.state);
+
+        if (shape) {
+          targetW = shape.width;
+          targetH = shape.height;
+          targetRadius = `${shape.borderRadius}px`;
+        } else {
+          if (app.state.isHover) {
+            targetW = getHoverSize(app.state);
+            targetH = getHoverSize(app.state);
+          }
+          if (app.state.isDown) {
+            targetW *= 0.9;
+            targetH *= 0.9;
+          }
+        }
+
+        if (app.state.interaction.color) color = app.state.interaction.color;
+
+        currentW = math.lerp(currentW, targetW, 0.2);
+        currentH = math.lerp(currentH, targetH, 0.2);
+
+        dom.setStyle(el, "width", `${currentW}px`);
+        dom.setStyle(el, "height", `${currentH}px`);
+        dom.setStyle(el, "borderRadius", targetRadius);
+        dom.setStyle(el, "borderColor", color);
+        dom.setStyle(el, "backgroundColor", getFill(app.state));
+        dom.setStyle(el, "borderWidth", `${getBorder(app.state)}px`);
+
+        let targetRot = 0;
+        let targetScaleX = 1;
+        let targetScaleY = 1;
+
+        if (!shape && options.enableSkew && !app.state.reducedMotion) {
+          const { velocity } = app.state;
+          const dist = effects.getVelocityDistortion(velocity.x, velocity.y);
+          targetRot = dist.rotation;
+          targetScaleX = dist.scaleX;
+          targetScaleY = dist.scaleY;
+          currentRot = math.lerpAngle(currentRot, targetRot, 0.15);
+        } else {
+          currentRot = 0;
+        }
+
+        currentScaleX = math.lerp(currentScaleX, targetScaleX, 0.15);
+        currentScaleY = math.lerp(currentScaleY, targetScaleY, 0.15);
+
+        const { x, y } = app.state.smooth;
+        dom.setTransform(el, x, y, currentRot, currentScaleX, currentScaleY);
+      }
+    },
+    options
+  );
+};