@supermousejs/labs 2.3.0 → 2.4.0

package/package.json

@@ -1,21 +1,25 @@
 {
   "name": "@supermousejs/labs",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
+  "description": "Experimentental state machines and effects for supermouse",
   "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/utils": "2.4.0"
   },
   "peerDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.4.0"
   },
   "devDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.4.0"
   },
   "repository": {
     "type": "git",

package/CHANGELOG.md

@@ -1,103 +0,0 @@
-# @supermousejs/labs
-
-## 2.3.0
-
-### Patch Changes
-
-- Updated dependencies [f6f44b2]
-  - @supermousejs/core@2.2.0
-  - @supermousejs/utils@2.3.0
-  - @supermousejs/zoetrope@2.3.0
-
-## 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/meta.json

@@ -1,148 +0,0 @@
-[
-  {
-    "id": "smart-icon",
-    "name": "SmartIcon",
-    "package": "@supermousejs/labs",
-    "description": "Advanced state machine that morphs SVGs based on semantic context.",
-    "code": "import { SmartIcon } from '@supermousejs/labs';\n\napp.use(SmartIcon({ icons: { ... } }));",
-    "recipeId": "context-icon",
-    "icon": "labs",
-    "options": [
-      {
-        "name": "icons",
-        "type": "Record<string, string>",
-        "default": "{}",
-        "description": "Map of state names to SVG strings.",
-        "reactive": false
-      },
-      {
-        "name": "size",
-        "type": "number",
-        "default": "24",
-        "description": "Size of the icon container.",
-        "reactive": true
-      },
-      {
-        "name": "color",
-        "type": "string",
-        "default": "'black'",
-        "description": "Icon fill color (currentColor).",
-        "reactive": true
-      },
-      {
-        "name": "anchor",
-        "type": "string",
-        "default": "'center'",
-        "description": "Alignment (center, top-left, etc).",
-        "reactive": true
-      },
-      {
-        "name": "offset",
-        "type": "[number, number]",
-        "default": "[0, 0]",
-        "description": "Fixed offset.",
-        "reactive": false
-      },
-      {
-        "name": "transitionDuration",
-        "type": "number",
-        "default": "200",
-        "description": "Morph transition time in ms.",
-        "reactive": false
-      }
-    ]
-  },
-  {
-    "id": "smart-ring",
-    "name": "SmartRing",
-    "package": "@supermousejs/labs",
-    "description": "A reactive ring that distorts with velocity and adapts to stuck elements.",
-    "code": "import { SmartRing } from '@supermousejs/labs';\n\napp.use(SmartRing({ size: 24, color: '#f59e0b', enableSkew: true }));",
-    "icon": "ring",
-    "options": [
-      {
-        "name": "size",
-        "type": "number",
-        "default": "20",
-        "description": "Base diameter.",
-        "reactive": true
-      },
-      {
-        "name": "hoverSize",
-        "type": "number",
-        "default": "40",
-        "description": "Diameter on hover.",
-        "reactive": true
-      },
-      {
-        "name": "enableSkew",
-        "type": "boolean",
-        "default": "false",
-        "description": "Distort shape based on velocity.",
-        "reactive": false
-      }
-    ]
-  },
-  {
-    "id": "sparkles",
-    "name": "Sparkles",
-    "package": "@supermousejs/labs",
-    "description": "Emits particle trails based on movement velocity.",
-    "code": "import { Sparkles } from '@supermousejs/labs';\n\napp.use(Sparkles({ color: '#f59e0b', frequency: 10 }));",
-    "icon": "trail",
-    "options": [
-      {
-        "name": "color",
-        "type": "string",
-        "default": "'#ff00ff'",
-        "description": "Particle color.",
-        "reactive": true
-      },
-      {
-        "name": "frequency",
-        "type": "number",
-        "default": "10",
-        "description": "Pixels per spawn.",
-        "reactive": false
-      },
-      {
-        "name": "decay",
-        "type": "number",
-        "default": "0.05",
-        "description": "Fade rate.",
-        "reactive": false
-      }
-    ]
-  },
-  {
-    "id": "text-ring",
-    "name": "TextRing",
-    "package": "@supermousejs/labs",
-    "description": "Rotates text around the cursor position.",
-    "code": "import { TextRing } from '@supermousejs/labs';\n\napp.use(TextRing({ text: 'LOADING • ', radius: 40 }));",
-    "icon": "text",
-    "options": [
-      {
-        "name": "text",
-        "type": "string",
-        "default": "'SUPERMOUSE • '",
-        "description": "Text content.",
-        "reactive": true
-      },
-      {
-        "name": "radius",
-        "type": "number",
-        "default": "60",
-        "description": "Ring radius.",
-        "reactive": true
-      },
-      {
-        "name": "speed",
-        "type": "number",
-        "default": "0.5",
-        "description": "Rotation speed deg/frame.",
-        "reactive": true
-      }
-    ]
-  }
-]

package/src/SmartIcon.ts

@@ -1,200 +0,0 @@
-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 +0,0 @@
-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
-  );
-};