@supermousejs/image 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @supermousejs/image
 
+## 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

package/README.md

@@ -0,0 +1,33 @@
+
+# @supermousejs/image
+
+Displays a floating image thumbnail next to the cursor on hover.
+
+## Installation
+
+```bash
+pnpm add @supermousejs/image
+```
+
+## Usage
+
+```ts
+import { Supermouse } from '@supermousejs/core';
+import { Image } from '@supermousejs/image';
+
+const app = new Supermouse();
+
+app.use(Image({
+  offset: [30, 30],
+  smoothness: 0.1 // Lag factor for the image
+}));
+```
+
+**HTML:**
+```html
+<a href="#" data-supermouse-img="/path/to/image.jpg">Hover to see preview</a>
+```
+
+## Documentation
+
+Full documentation and interactive playground available at [supermouse](https://supermouse.vercel.app) or [check out the repo](https://github.com/Whitestar14/supermouse-js).

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@supermousejs/image",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "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"
+    "@supermousejs/utils": "2.0.2",
+    "@supermousejs/core": "2.0.2"
   },
   "devDependencies": {},
   "peerDependencies": {},

package/src/index.ts

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

@@ -1,18 +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"
-      ]
-    }
-  }
+{
+  "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

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