@supermousejs/stick 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @supermousejs/stick
+
+## 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/LICENSE.md

@@ -0,0 +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.

package/dist/index.d.ts

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

package/dist/index.mjs

@@ -0,0 +1,38 @@
+import { normalize as c, definePlugin as h, dom as g } from "@supermousejs/utils";
+const m = (a = {}) => {
+  const d = c(a.padding, 10);
+  let s = null, e = null;
+  return h({
+    name: a.name || "stick",
+    // Logic plugin: must run before visuals to set the shape state
+    priority: -10,
+    install(t) {
+      t.registerHoverTarget("[data-supermouse-stick]");
+    },
+    update(t) {
+      const r = t.state.hoverTarget, l = t.state.interaction.stick === !0 || t.state.interaction.stick === "true";
+      if (r && l) {
+        if (r !== s || !e) {
+          s = r;
+          const i = g.projectRect(r, t.container), o = window.getComputedStyle(r), n = d(t.state);
+          e = {
+            width: i.width + n,
+            height: i.height + n,
+            radius: parseFloat(o.borderRadius) || 0,
+            x: i.left + i.width / 2,
+            y: i.top + i.height / 2
+          };
+        }
+        e && (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;
+    }
+  }, a);
+};
+export {
+  m as Stick
+};

package/dist/index.umd.js

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

package/meta.json

@@ -0,0 +1,13 @@
+
+{
+  "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/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@supermousejs/stick",
+  "version": "2.0.0",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@supermousejs/core": "2.0.0",
+    "@supermousejs/utils": "2.0.0"
+  },
+  "devDependencies": {},
+  "peerDependencies": {},
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/src/index.ts

@@ -0,0 +1,73 @@
+
+import type { ValueOrGetter } 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) {
+      app.registerHoverTarget('[data-supermouse-stick]');
+    },
+
+    update(app) {
+      // 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

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [
+    "src"
+  ],
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "@supermousejs/core": [
+        "../core/src/index.ts"
+      ],
+      "@supermousejs/utils": [
+        "../utils/src/index.ts"
+      ]
+    }
+  }
+}

package/vite.config.ts

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