@supermousejs/stick 2.3.0 → 2.4.0

package/README.md

@@ -1,7 +1,6 @@
 # @supermousejs/stick
 
-A **Logic Plugin** that calculates the bounding box of hovered elements.
-Used in combination with `@supermousejs/ring` (or SmartRing) to create a morphing effect.
+Morphs the cursor shape to match the bounding box of hovered elements.
 
 ## Installation
 
@@ -9,24 +8,24 @@ Used in combination with `@supermousejs/ring` (or SmartRing) to create a morphin
 pnpm add @supermousejs/stick
 ```
 
-## Usage
+## Stick
+
+Morphs the cursor shape to match the bounding box of hovered elements.
+
+### Usage
 
 ```ts
 import { Supermouse } from "@supermousejs/core";
 import { Stick } from "@supermousejs/stick";
-import { Ring } from "@supermousejs/ring";
-
 const app = new Supermouse();
-
 app.use(Stick({ padding: 10 }));
-app.use(Ring()); // Ring automatically detects 'stick' state and morphs
 ```
 
-**HTML:**
+### Options
 
-```html
-<button data-supermouse-stick="true">Sticky Element</button>
-```
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| padding | number | 10 | Extra padding around the target element in pixels. |
 
 ## Documentation
 

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import { SupermousePlugin } from '../packages/core/src';
-import { ValueOrGetter } from '../packages/core/src';
 
 export declare const Stick: (options?: StickOptions) => SupermousePlugin;
 
@@ -7,7 +6,7 @@ export declare interface StickOptions {
     name?: string;
     isEnabled?: boolean;
     /** Extra padding around the element when calculating shape. Default 10. */
-    padding?: ValueOrGetter<number>;
+    padding?: number;
 }
 
 export { }

package/dist/index.mjs

@@ -4,8 +4,7 @@ const m = (a = {}) => {
   let s = null, e = null;
   return h(
     {
-      name: a.name || "stick",
-      // Logic plugin: must run before visuals to set the shape state
+      name: a.name ?? "stick",
       priority: -10,
       install(t) {
         t.registerHoverTarget("[data-supermouse-stick]");
@@ -24,11 +23,11 @@ const m = (a = {}) => {
               y: i.top + i.height / 2
             };
           }
-          e && (t.state.target.x = e.x, t.state.target.y = e.y, t.state.shape = {
+          t.state.target.x = e.x, t.state.target.y = e.y, t.state.shape = {
             width: e.width,
             height: e.height,
             borderRadius: e.radius
-          });
+          };
         } else
           s && (s = null, e = null), t.state.shape = null;
       }

package/dist/index.umd.js

@@ -1 +1 @@
-(function(i,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],s):(i=typeof globalThis<"u"?globalThis:i||self,s(i.SupermouseStick={},i.SupermouseUtils))})(this,(function(i,s){"use strict";const a=(u={})=>{const c=s.normalize(u.padding,10);let o=null,t=null;return s.definePlugin({name:u.name||"stick",priority:-10,install(e){e.registerHoverTarget("[data-supermouse-stick]")},update(e){const r=e.state.hoverTarget,l=e.state.interaction.stick===!0||e.state.interaction.stick==="true";if(r&&l){if(r!==o||!t){o=r;const n=s.dom.projectRect(r,e.container),h=window.getComputedStyle(r),d=c(e.state);t={width:n.width+d,height:n.height+d,radius:parseFloat(h.borderRadius)||0,x:n.left+n.width/2,y:n.top+n.height/2}}t&&(e.state.target.x=t.x,e.state.target.y=t.y,e.state.shape={width:t.width,height:t.height,borderRadius:t.radius})}else o&&(o=null,t=null),e.state.shape=null}},u)};i.Stick=a,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
+(function(i,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],s):(i=typeof globalThis<"u"?globalThis:i||self,s(i.SupermouseStick={},i.SupermouseUtils))})(this,(function(i,s){"use strict";const a=(u={})=>{const c=s.normalize(u.padding,10);let o=null,t=null;return s.definePlugin({name:u.name??"stick",priority:-10,install(e){e.registerHoverTarget("[data-supermouse-stick]")},update(e){const r=e.state.hoverTarget,l=e.state.interaction.stick===!0||e.state.interaction.stick==="true";if(r&&l){if(r!==o||!t){o=r;const n=s.dom.projectRect(r,e.container),h=window.getComputedStyle(r),d=c(e.state);t={width:n.width+d,height:n.height+d,radius:parseFloat(h.borderRadius)||0,x:n.left+n.width/2,y:n.top+n.height/2}}e.state.target.x=t.x,e.state.target.y=t.y,e.state.shape={width:t.width,height:t.height,borderRadius:t.radius}}else o&&(o=null,t=null),e.state.shape=null}},u)};i.Stick=a,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@supermousejs/stick",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "description": "Morphs the cursor shape to match the bounding box of hovered elements.",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "author": "O.S David",
   "url": "https://github.com/Whitestar14/supermouse-js",
   "license": "MIT",
   "dependencies": {
-    "@supermousejs/utils": "2.3.0"
+    "@supermousejs/utils": "2.4.0"
   },
   "devDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.4.0"
   },
   "peerDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.4.0"
   },
   "repository": {
     "type": "git",

package/CHANGELOG.md

@@ -1,90 +0,0 @@
-# @supermousejs/stick
-
-## 2.3.0
-
-### Patch Changes
-
-- Updated dependencies [f6f44b2]
-  - @supermousejs/core@2.2.0
-  - @supermousejs/utils@2.3.0
-
-## 2.2.0
-
-### 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
-
-## 2.1.1
-
-### Patch Changes
-
-- 67f771b: Add relevant npm metadata to package.json file
-- Updated dependencies [67f771b]
-  - @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/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/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
-
-## 2.0.2
-
-### Patch Changes
-
-- ae219a0: Update READMEs with correct link to documentation
-- Updated dependencies [ae219a0]
-  - @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/utils@2.0.1
-  - @supermousejs/core@2.0.1
-
-## 2.0.0
-
-### Major Changes
-
-- Initial v2.0.0 release
-
-### Patch Changes
-
-- Updated dependencies
-  - @supermousejs/utils@2.0.0
-  - @supermousejs/core@2.0.0

package/meta.json

@@ -1,18 +0,0 @@
-{
-  "id": "stick",
-  "name": "Stick",
-  "package": "@supermousejs/stick",
-  "description": "Morphs the cursor shape to match the bounding box of hovered elements.",
-  "code": "app.use(Stick({ padding: 10 }));",
-  "recipeId": "sticky-element",
-  "icon": "stick",
-  "options": [
-    {
-      "name": "padding",
-      "type": "number",
-      "default": "10",
-      "description": "Extra padding around the target element in pixels.",
-      "reactive": true
-    }
-  ]
-}

package/src/index.ts

@@ -1,75 +0,0 @@
-import type { ValueOrGetter, Supermouse } from "@supermousejs/core";
-import { definePlugin, normalize, dom } from "@supermousejs/utils";
-
-export interface StickOptions {
-  name?: string;
-  isEnabled?: boolean;
-  /** Extra padding around the element when calculating shape. Default 10. */
-  padding?: ValueOrGetter<number>;
-}
-
-export const Stick = (options: StickOptions = {}) => {
-  const getPadding = normalize(options.padding, 10);
-
-  let lastTarget: HTMLElement | null = null;
-  let cache: { width: number; height: number; radius: number; x: number; y: number } | null = null;
-
-  return definePlugin(
-    {
-      name: options.name || "stick",
-      // Logic plugin: must run before visuals to set the shape state
-      priority: -10,
-
-      install(app: Supermouse) {
-        app.registerHoverTarget("[data-supermouse-stick]");
-      },
-
-      update(app: Supermouse) {
-        // Check normalized interaction key (camelCase, no prefix)
-        const target = app.state.hoverTarget;
-        const isSticky =
-          app.state.interaction.stick === true || app.state.interaction.stick === "true";
-
-        if (target && isSticky) {
-          // Recalculate only if target changed or on first frame
-          if (target !== lastTarget || !cache) {
-            lastTarget = target;
-
-            const rect = dom.projectRect(target, app.container);
-            const style = window.getComputedStyle(target);
-            const padding = getPadding(app.state);
-
-            cache = {
-              width: rect.width + padding,
-              height: rect.height + padding,
-              radius: parseFloat(style.borderRadius) || 0,
-              x: rect.left + rect.width / 2,
-              y: rect.top + rect.height / 2
-            };
-          }
-
-          if (cache) {
-            // 1. Override Target (Physics) - Snap target to center of element
-            app.state.target.x = cache.x;
-            app.state.target.y = cache.y;
-
-            // 2. Set Shape (Visuals) - Visual plugins like Ring will read this
-            app.state.shape = {
-              width: cache.width,
-              height: cache.height,
-              borderRadius: cache.radius
-            };
-          }
-        } else {
-          // Reset
-          if (lastTarget) {
-            lastTarget = null;
-            cache = null;
-          }
-          app.state.shape = null;
-        }
-      }
-    },
-    options
-  );
-};

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.plugin.json",
-  "include": ["src"]
-}

package/vite.config.ts

@@ -1,23 +0,0 @@
-import { defineConfig } from "vite";
-import dts from "vite-plugin-dts";
-import path from "path";
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, "src/index.ts"),
-      name: "SupermouseStick",
-      fileName: (format) => (format === "es" ? "index.mjs" : "index.umd.js")
-    },
-    rollupOptions: {
-      external: ["@supermousejs/core", "@supermousejs/utils"],
-      output: {
-        globals: {
-          "@supermousejs/core": "SupermouseCore",
-          "@supermousejs/utils": "SupermouseUtils"
-        }
-      }
-    }
-  },
-  plugins: [dts({ rollupTypes: true })]
-});