@supermousejs/image 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @supermousejs/image
+
+## 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,15 @@
+import { SupermousePlugin } from '../../core/src/index.ts';
+
+declare const Image_2: (options?: ImageOptions) => SupermousePlugin;
+export { Image_2 as Image }
+
+export declare interface ImageOptions {
+    name?: string;
+    isEnabled?: boolean;
+    className?: string;
+    offset?: [number, number];
+    duration?: number;
+    smoothness?: number;
+}
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,37 @@
+import { definePlugin as S, dom as t, Easings as x, Layers as v, math as u } from "@supermousejs/utils";
+const w = (s = {}) => {
+  const y = s.className || "supermouse-image", [g, p] = s.offset || [0, 30], h = s.duration || 200, n = s.smoothness || 1;
+  let a, m = null, r = !1, o = 0, i = 0;
+  return S({
+    name: "image",
+    selector: "[data-supermouse-img]",
+    create: () => {
+      const e = t.createActor("div");
+      return e.classList.add(...y.split(" ").filter(Boolean)), a = document.createElement("img"), t.applyStyles(a, {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        display: "block"
+      }), e.appendChild(a), t.applyStyles(e, {
+        zIndex: v.OVERLAY,
+        opacity: "0",
+        overflow: "hidden",
+        transition: `opacity ${h}ms ${x.SMOOTH}`,
+        width: "150px",
+        height: "auto"
+      }), t.setTransform(e, -100, -100), e;
+    },
+    update: (e, c) => {
+      const l = e.state.interaction.img;
+      if (e.state.isHover && l) {
+        l !== m && (a.src = l, m = l), t.setStyle(c, "opacity", "1");
+        const d = e.state.pointer.x + g, f = e.state.pointer.y + p;
+        r ? (o = u.lerp(o, d, n), i = u.lerp(i, f, n)) : (o = d, i = f, r = !0), t.setTransform(c, o, i);
+      } else
+        t.setStyle(c, "opacity", "0"), r = !1;
+    }
+  }, s);
+};
+export {
+  w as Image
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.SupermouseImage={},s.SupermouseUtils))})(this,(function(s,e){"use strict";const p=(o={})=>{const y=o.className||"supermouse-image",[g,h]=o.offset||[0,30],S=o.duration||200,c=o.smoothness||1;let a,l=null,m=!1,n=0,r=0;return e.definePlugin({name:"image",selector:"[data-supermouse-img]",create:()=>{const t=e.dom.createActor("div");return t.classList.add(...y.split(" ").filter(Boolean)),a=document.createElement("img"),e.dom.applyStyles(a,{width:"100%",height:"100%",objectFit:"cover",display:"block"}),t.appendChild(a),e.dom.applyStyles(t,{zIndex:e.Layers.OVERLAY,opacity:"0",overflow:"hidden",transition:`opacity ${S}ms ${e.Easings.SMOOTH}`,width:"150px",height:"auto"}),e.dom.setTransform(t,-100,-100),t},update:(t,d)=>{const i=t.state.interaction.img;if(t.state.isHover&&i){i!==l&&(a.src=i,l=i),e.dom.setStyle(d,"opacity","1");const f=t.state.pointer.x+g,u=t.state.pointer.y+h;m?(n=e.math.lerp(n,f,c),r=e.math.lerp(r,u,c)):(n=f,r=u,m=!0),e.dom.setTransform(d,n,r)}else e.dom.setStyle(d,"opacity","0"),m=!1}},o)};s.Image=p,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/meta.json

@@ -0,0 +1,15 @@
+
+{
+  "id": "image",
+  "name": "Image",
+  "package": "@supermousejs/image",
+  "description": "Displays a custom image or thumbnail as the cursor hover state.",
+  "code": "app.use(Image({ rounded: true }));",
+  "icon": "image",
+  "options": [
+    { "name": "className", "type": "string", "default": "'supermouse-image'", "description": "CSS class added to container.", "reactive": false },
+    { "name": "offset", "type": "[number, number]", "default": "[0, 30]", "description": "X/Y offset from cursor.", "reactive": false },
+    { "name": "duration", "type": "number", "default": "200", "description": "Fade transition time in ms.", "reactive": false },
+    { "name": "smoothness", "type": "number", "default": "1", "description": "Lerp factor for image lag.", "reactive": false }
+  ]
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@supermousejs/image",
+  "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,85 @@
+import { definePlugin, dom, math, Layers, Easings } from '@supermousejs/utils';
+
+export interface ImageOptions {
+  name?: string;
+  isEnabled?: boolean;
+  className?: string;
+  offset?: [number, number];
+  duration?: number;
+  smoothness?: number;
+}
+
+export const Image = (options: ImageOptions = {}) => {
+  const className = options.className || 'supermouse-image';
+  const [offX, offY] = options.offset || [0, 30];
+  const duration = options.duration || 200;
+  const smoothness = options.smoothness || 1;
+
+  let img: HTMLImageElement;
+  let lastSrc: string | null = null;
+  let isVisible = false;
+  let lx = 0;
+  let ly = 0;
+
+  return definePlugin<HTMLDivElement, ImageOptions>({
+    name: 'image',
+    selector: '[data-supermouse-img]',
+
+    create: () => {
+      const container = dom.createActor('div') as HTMLDivElement;
+      if (className) {
+        container.classList.add(...className.split(' ').filter(Boolean));
+      }
+      
+      img = document.createElement('img');
+      dom.applyStyles(img, {
+        width: '100%', height: '100%', objectFit: 'cover', display: 'block'
+      });
+      container.appendChild(img);
+
+      dom.applyStyles(container, {
+        zIndex: Layers.OVERLAY,
+        opacity: '0',
+        overflow: 'hidden',
+        transition: `opacity ${duration}ms ${Easings.SMOOTH}`,
+        width: '150px', height: 'auto'
+      });
+
+      dom.setTransform(container, -100, -100);
+      return container;
+    },
+
+    update: (app, container) => {
+      // Use parsed interaction data
+      const src = app.state.interaction.img;
+
+      if (app.state.isHover && src) {
+        if (src !== lastSrc) {
+          img.src = src;
+          lastSrc = src;
+        }
+        
+        dom.setStyle(container, 'opacity', '1');
+        
+        const targetX = app.state.pointer.x + offX;
+        const targetY = app.state.pointer.y + offY;
+
+        // Reset position on first appearance to prevent flying in
+        if (!isVisible) {
+          lx = targetX;
+          ly = targetY;
+          isVisible = true;
+        } else {
+          lx = math.lerp(lx, targetX, smoothness);
+          ly = math.lerp(ly, targetY, smoothness);
+        }
+        
+        dom.setTransform(container, lx, ly);
+
+      } else {
+        dom.setStyle(container, 'opacity', '0');
+        isVisible = false;
+      }
+    }
+  }, 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: 'SupermouseImage',
+      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 })]
+});