@supermousejs/image 2.1.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,59 +1,82 @@
1
- # @supermousejs/image
2
-
3
- ## 2.1.0
4
-
5
- ### Minor Changes
6
-
7
- - 0a1652d: fixed build architecture and updated plugin metadata
8
-
9
- ### Patch Changes
10
-
11
- - Updated dependencies [0a1652d]
12
- - @supermousejs/utils@2.1.0
13
-
14
- ## 2.0.4
15
-
16
- ### Patch Changes
17
-
18
- - 993dc67: Updated supemousejs packages with proper author, license and url descriptors to repo
19
- - Updated dependencies [993dc67]
20
- - @supermousejs/utils@2.0.4
21
- - @supermousejs/core@2.0.4
22
-
23
- ## 2.0.3
24
-
25
- ### Patch Changes
26
-
27
- - Updated dependencies
28
- - @supermousejs/core@2.0.3
29
- - @supermousejs/utils@2.0.3
30
-
31
- ## 2.0.2
32
-
33
- ### Patch Changes
34
-
35
- - ae219a0: Update READMEs with correct link to documentation
36
- - Updated dependencies [ae219a0]
37
- - @supermousejs/utils@2.0.2
38
- - @supermousejs/core@2.0.2
39
-
40
- ## 2.0.1
41
-
42
- ### Patch Changes
43
-
44
- - Add minimal README.md files to packages
45
- - Updated dependencies
46
- - @supermousejs/utils@2.0.1
47
- - @supermousejs/core@2.0.1
48
-
49
- ## 2.0.0
50
-
51
- ### Major Changes
52
-
53
- - Initial v2.0.0 release
54
-
55
- ### Patch Changes
56
-
57
- - Updated dependencies
58
- - @supermousejs/utils@2.0.0
59
- - @supermousejs/core@2.0.0
1
+ # @supermousejs/image
2
+
3
+ ## 2.2.0
4
+
5
+ ### Patch Changes
6
+
7
+ - 6d70c18: remove legacy package and update supermouse domain in readme
8
+ - 14fb5b6: Updated tsconfig to be reference-compliant with core, utils and zoetrope when required
9
+ - Updated dependencies [6d70c18]
10
+ - Updated dependencies [2590af3]
11
+ - Updated dependencies [14fb5b6]
12
+ - Updated dependencies [9fe1a7b]
13
+ - Updated dependencies [9fa6ece]
14
+ - @supermousejs/core@2.1.0
15
+ - @supermousejs/utils@2.2.0
16
+
17
+ ## 2.1.1
18
+
19
+ ### Patch Changes
20
+
21
+ - 67f771b: Add relevant npm metadata to package.json file
22
+ - Updated dependencies [67f771b]
23
+ - @supermousejs/utils@2.1.1
24
+ - @supermousejs/core@2.0.5
25
+
26
+ ## 2.1.0
27
+
28
+ ### Minor Changes
29
+
30
+ - 0a1652d: fixed build architecture and updated plugin metadata
31
+
32
+ ### Patch Changes
33
+
34
+ - Updated dependencies [0a1652d]
35
+ - @supermousejs/utils@2.1.0
36
+
37
+ ## 2.0.4
38
+
39
+ ### Patch Changes
40
+
41
+ - 993dc67: Updated supemousejs packages with proper author, license and url descriptors to repo
42
+ - Updated dependencies [993dc67]
43
+ - @supermousejs/utils@2.0.4
44
+ - @supermousejs/core@2.0.4
45
+
46
+ ## 2.0.3
47
+
48
+ ### Patch Changes
49
+
50
+ - Updated dependencies
51
+ - @supermousejs/core@2.0.3
52
+ - @supermousejs/utils@2.0.3
53
+
54
+ ## 2.0.2
55
+
56
+ ### Patch Changes
57
+
58
+ - ae219a0: Update READMEs with correct link to documentation
59
+ - Updated dependencies [ae219a0]
60
+ - @supermousejs/utils@2.0.2
61
+ - @supermousejs/core@2.0.2
62
+
63
+ ## 2.0.1
64
+
65
+ ### Patch Changes
66
+
67
+ - Add minimal README.md files to packages
68
+ - Updated dependencies
69
+ - @supermousejs/utils@2.0.1
70
+ - @supermousejs/core@2.0.1
71
+
72
+ ## 2.0.0
73
+
74
+ ### Major Changes
75
+
76
+ - Initial v2.0.0 release
77
+
78
+ ### Patch Changes
79
+
80
+ - Updated dependencies
81
+ - @supermousejs/utils@2.0.0
82
+ - @supermousejs/core@2.0.0
package/LICENSE.md CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 Sijibomi Olusunmbola
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Sijibomi Olusunmbola
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,33 +1,35 @@
1
-
2
- # @supermousejs/image
3
-
4
- Displays a floating image thumbnail next to the cursor on hover.
5
-
6
- ## Installation
7
-
8
- ```bash
9
- pnpm add @supermousejs/image
10
- ```
11
-
12
- ## Usage
13
-
14
- ```ts
15
- import { Supermouse } from '@supermousejs/core';
16
- import { Image } from '@supermousejs/image';
17
-
18
- const app = new Supermouse();
19
-
20
- app.use(Image({
21
- offset: [30, 30],
22
- smoothness: 0.1 // Lag factor for the image
23
- }));
24
- ```
25
-
26
- **HTML:**
27
- ```html
28
- <a href="#" data-supermouse-img="/path/to/image.jpg">Hover to see preview</a>
29
- ```
30
-
31
- ## Documentation
32
-
33
- Full documentation and interactive playground available at [supermouse](https://supermouse.vercel.app) or [check out the repo](https://github.com/Whitestar14/supermouse-js).
1
+ # @supermousejs/image
2
+
3
+ Displays a floating image thumbnail next to the cursor on hover.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ pnpm add @supermousejs/image
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```ts
14
+ import { Supermouse } from "@supermousejs/core";
15
+ import { Image } from "@supermousejs/image";
16
+
17
+ const app = new Supermouse();
18
+
19
+ app.use(
20
+ Image({
21
+ offset: [30, 30],
22
+ smoothness: 0.1 // Lag factor for the image
23
+ })
24
+ );
25
+ ```
26
+
27
+ **HTML:**
28
+
29
+ ```html
30
+ <a href="#" data-supermouse-img="/path/to/image.jpg">Hover to see preview</a>
31
+ ```
32
+
33
+ ## Documentation
34
+
35
+ Full documentation and interactive playground available at [supermouse](https://supermouse.js.org) or [check out the repo](https://github.com/Whitestar14/supermouse-js).
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SupermousePlugin } from '../../core/src/index.ts';
1
+ import { SupermousePlugin } from '../../core/src';
2
2
 
3
3
  declare const Image_2: (options?: ImageOptions) => SupermousePlugin;
4
4
  export { Image_2 as Image }
package/dist/index.mjs CHANGED
@@ -2,35 +2,38 @@ import { definePlugin as S, dom as t, Easings as x, Layers as v, math as u } fro
2
2
  const w = (s = {}) => {
3
3
  const y = s.className || "supermouse-image", [g, p] = s.offset || [0, 30], h = s.duration || 200, n = s.smoothness || 1;
4
4
  let a, m = null, r = !1, o = 0, i = 0;
5
- return S({
6
- name: "image",
7
- selector: "[data-supermouse-img]",
8
- create: () => {
9
- const e = t.createActor("div");
10
- return e.classList.add(...y.split(" ").filter(Boolean)), a = document.createElement("img"), t.applyStyles(a, {
11
- width: "100%",
12
- height: "100%",
13
- objectFit: "cover",
14
- display: "block"
15
- }), e.appendChild(a), t.applyStyles(e, {
16
- zIndex: v.OVERLAY,
17
- opacity: "0",
18
- overflow: "hidden",
19
- transition: `opacity ${h}ms ${x.SMOOTH}`,
20
- width: "150px",
21
- height: "auto"
22
- }), t.setTransform(e, -100, -100), e;
5
+ return S(
6
+ {
7
+ name: "image",
8
+ selector: "[data-supermouse-img]",
9
+ create: () => {
10
+ const e = t.createActor("div");
11
+ return e.classList.add(...y.split(" ").filter(Boolean)), a = document.createElement("img"), t.applyStyles(a, {
12
+ width: "100%",
13
+ height: "100%",
14
+ objectFit: "cover",
15
+ display: "block"
16
+ }), e.appendChild(a), t.applyStyles(e, {
17
+ zIndex: v.OVERLAY,
18
+ opacity: "0",
19
+ overflow: "hidden",
20
+ transition: `opacity ${h}ms ${x.SMOOTH}`,
21
+ width: "150px",
22
+ height: "auto"
23
+ }), t.setTransform(e, -100, -100), e;
24
+ },
25
+ update: (e, c) => {
26
+ const l = e.state.interaction.img;
27
+ if (e.state.isHover && l) {
28
+ l !== m && (a.src = l, m = l), t.setStyle(c, "opacity", "1");
29
+ const d = e.state.pointer.x + g, f = e.state.pointer.y + p;
30
+ r ? (o = u.lerp(o, d, n), i = u.lerp(i, f, n)) : (o = d, i = f, r = !0), t.setTransform(c, o, i);
31
+ } else
32
+ t.setStyle(c, "opacity", "0"), r = !1;
33
+ }
23
34
  },
24
- update: (e, c) => {
25
- const l = e.state.interaction.img;
26
- if (e.state.isHover && l) {
27
- l !== m && (a.src = l, m = l), t.setStyle(c, "opacity", "1");
28
- const d = e.state.pointer.x + g, f = e.state.pointer.y + p;
29
- r ? (o = u.lerp(o, d, n), i = u.lerp(i, f, n)) : (o = d, i = f, r = !0), t.setTransform(c, o, i);
30
- } else
31
- t.setStyle(c, "opacity", "0"), r = !1;
32
- }
33
- }, s);
35
+ s
36
+ );
34
37
  };
35
38
  export {
36
39
  w as Image
package/meta.json CHANGED
@@ -1,15 +1,38 @@
1
-
2
- {
3
- "id": "image",
4
- "name": "Image",
5
- "package": "@supermousejs/image",
6
- "description": "Displays a custom image or thumbnail as the cursor hover state.",
7
- "code": "app.use(Image({ rounded: true }));",
8
- "icon": "image",
9
- "options": [
10
- { "name": "className", "type": "string", "default": "'supermouse-image'", "description": "CSS class added to container.", "reactive": false },
11
- { "name": "offset", "type": "[number, number]", "default": "[0, 30]", "description": "X/Y offset from cursor.", "reactive": false },
12
- { "name": "duration", "type": "number", "default": "200", "description": "Fade transition time in ms.", "reactive": false },
13
- { "name": "smoothness", "type": "number", "default": "1", "description": "Lerp factor for image lag.", "reactive": false }
14
- ]
15
- }
1
+ {
2
+ "id": "image",
3
+ "name": "Image",
4
+ "package": "@supermousejs/image",
5
+ "description": "Displays a custom image or thumbnail as the cursor hover state.",
6
+ "code": "app.use(Image({ rounded: true }));",
7
+ "icon": "image",
8
+ "options": [
9
+ {
10
+ "name": "className",
11
+ "type": "string",
12
+ "default": "'supermouse-image'",
13
+ "description": "CSS class added to container.",
14
+ "reactive": false
15
+ },
16
+ {
17
+ "name": "offset",
18
+ "type": "[number, number]",
19
+ "default": "[0, 30]",
20
+ "description": "X/Y offset from cursor.",
21
+ "reactive": false
22
+ },
23
+ {
24
+ "name": "duration",
25
+ "type": "number",
26
+ "default": "200",
27
+ "description": "Fade transition time in ms.",
28
+ "reactive": false
29
+ },
30
+ {
31
+ "name": "smoothness",
32
+ "type": "number",
33
+ "default": "1",
34
+ "description": "Lerp factor for image lag.",
35
+ "reactive": false
36
+ }
37
+ ]
38
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@supermousejs/image",
3
- "version": "2.1.0",
3
+ "version": "2.2.0",
4
4
  "main": "dist/index.umd.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",
@@ -8,14 +8,23 @@
8
8
  "url": "https://github.com/Whitestar14/supermouse-js",
9
9
  "license": "MIT",
10
10
  "dependencies": {
11
- "@supermousejs/utils": "2.1.0"
11
+ "@supermousejs/utils": "2.2.0"
12
12
  },
13
13
  "devDependencies": {
14
- "@supermousejs/core": "2.0.4"
14
+ "@supermousejs/core": "2.1.0"
15
15
  },
16
16
  "peerDependencies": {
17
- "@supermousejs/core": "2.0.4"
17
+ "@supermousejs/core": "2.1.0"
18
18
  },
19
+ "repository": {
20
+ "type": "git",
21
+ "url": "git+https://github.com/Whitestar14/supermouse-js.git",
22
+ "directory": "packages/core"
23
+ },
24
+ "bugs": {
25
+ "url": "https://github.com/Whitestar14/supermouse-js/issues"
26
+ },
27
+ "homepage": "https://github.com/Whitestar14/supermouse-js/tree/main/packages/image#readme",
19
28
  "exports": {
20
29
  ".": {
21
30
  "types": "./dist/index.d.ts",
package/src/index.ts CHANGED
@@ -1,85 +1,92 @@
1
- import { definePlugin, dom, math, Layers, Easings } from '@supermousejs/utils';
2
-
3
- export interface ImageOptions {
4
- name?: string;
5
- isEnabled?: boolean;
6
- className?: string;
7
- offset?: [number, number];
8
- duration?: number;
9
- smoothness?: number;
10
- }
11
-
12
- export const Image = (options: ImageOptions = {}) => {
13
- const className = options.className || 'supermouse-image';
14
- const [offX, offY] = options.offset || [0, 30];
15
- const duration = options.duration || 200;
16
- const smoothness = options.smoothness || 1;
17
-
18
- let img: HTMLImageElement;
19
- let lastSrc: string | null = null;
20
- let isVisible = false;
21
- let lx = 0;
22
- let ly = 0;
23
-
24
- return definePlugin<HTMLDivElement, ImageOptions>({
25
- name: 'image',
26
- selector: '[data-supermouse-img]',
27
-
28
- create: () => {
29
- const container = dom.createActor('div') as HTMLDivElement;
30
- if (className) {
31
- container.classList.add(...className.split(' ').filter(Boolean));
32
- }
33
-
34
- img = document.createElement('img');
35
- dom.applyStyles(img, {
36
- width: '100%', height: '100%', objectFit: 'cover', display: 'block'
37
- });
38
- container.appendChild(img);
39
-
40
- dom.applyStyles(container, {
41
- zIndex: Layers.OVERLAY,
42
- opacity: '0',
43
- overflow: 'hidden',
44
- transition: `opacity ${duration}ms ${Easings.SMOOTH}`,
45
- width: '150px', height: 'auto'
46
- });
47
-
48
- dom.setTransform(container, -100, -100);
49
- return container;
50
- },
51
-
52
- update: (app, container) => {
53
- // Use parsed interaction data
54
- const src = app.state.interaction.img;
55
-
56
- if (app.state.isHover && src) {
57
- if (src !== lastSrc) {
58
- img.src = src;
59
- lastSrc = src;
60
- }
61
-
62
- dom.setStyle(container, 'opacity', '1');
63
-
64
- const targetX = app.state.pointer.x + offX;
65
- const targetY = app.state.pointer.y + offY;
66
-
67
- // Reset position on first appearance to prevent flying in
68
- if (!isVisible) {
69
- lx = targetX;
70
- ly = targetY;
71
- isVisible = true;
72
- } else {
73
- lx = math.lerp(lx, targetX, smoothness);
74
- ly = math.lerp(ly, targetY, smoothness);
75
- }
76
-
77
- dom.setTransform(container, lx, ly);
78
-
79
- } else {
80
- dom.setStyle(container, 'opacity', '0');
81
- isVisible = false;
82
- }
83
- }
84
- }, options);
85
- };
1
+ import type { Supermouse } from "@supermousejs/core";
2
+ import { definePlugin, dom, math, Layers, Easings } from "@supermousejs/utils";
3
+
4
+ export interface ImageOptions {
5
+ name?: string;
6
+ isEnabled?: boolean;
7
+ className?: string;
8
+ offset?: [number, number];
9
+ duration?: number;
10
+ smoothness?: number;
11
+ }
12
+
13
+ export const Image = (options: ImageOptions = {}) => {
14
+ const className = options.className || "supermouse-image";
15
+ const [offX, offY] = options.offset || [0, 30];
16
+ const duration = options.duration || 200;
17
+ const smoothness = options.smoothness || 1;
18
+
19
+ let img: HTMLImageElement;
20
+ let lastSrc: string | null = null;
21
+ let isVisible = false;
22
+ let lx = 0;
23
+ let ly = 0;
24
+
25
+ return definePlugin<HTMLDivElement, ImageOptions>(
26
+ {
27
+ name: "image",
28
+ selector: "[data-supermouse-img]",
29
+
30
+ create: () => {
31
+ const container = dom.createActor("div") as HTMLDivElement;
32
+ if (className) {
33
+ container.classList.add(...className.split(" ").filter(Boolean));
34
+ }
35
+
36
+ img = document.createElement("img");
37
+ dom.applyStyles(img, {
38
+ width: "100%",
39
+ height: "100%",
40
+ objectFit: "cover",
41
+ display: "block"
42
+ });
43
+ container.appendChild(img);
44
+
45
+ dom.applyStyles(container, {
46
+ zIndex: Layers.OVERLAY,
47
+ opacity: "0",
48
+ overflow: "hidden",
49
+ transition: `opacity ${duration}ms ${Easings.SMOOTH}`,
50
+ width: "150px",
51
+ height: "auto"
52
+ });
53
+
54
+ dom.setTransform(container, -100, -100);
55
+ return container;
56
+ },
57
+
58
+ update: (app: Supermouse, container: HTMLDivElement) => {
59
+ // Use parsed interaction data
60
+ const src = app.state.interaction.img;
61
+
62
+ if (app.state.isHover && src) {
63
+ if (src !== lastSrc) {
64
+ img.src = src;
65
+ lastSrc = src;
66
+ }
67
+
68
+ dom.setStyle(container, "opacity", "1");
69
+
70
+ const targetX = app.state.pointer.x + offX;
71
+ const targetY = app.state.pointer.y + offY;
72
+
73
+ // Reset position on first appearance to prevent flying in
74
+ if (!isVisible) {
75
+ lx = targetX;
76
+ ly = targetY;
77
+ isVisible = true;
78
+ } else {
79
+ lx = math.lerp(lx, targetX, smoothness);
80
+ ly = math.lerp(ly, targetY, smoothness);
81
+ }
82
+
83
+ dom.setTransform(container, lx, ly);
84
+ } else {
85
+ dom.setStyle(container, "opacity", "0");
86
+ isVisible = false;
87
+ }
88
+ }
89
+ },
90
+ options
91
+ );
92
+ };
package/tsconfig.json CHANGED
@@ -1,18 +1,4 @@
1
1
  {
2
- "extends": "../../tsconfig.base.json",
3
- "include": [
4
- "src"
5
- ],
6
- "compilerOptions": {
7
- "outDir": "dist",
8
- "baseUrl": ".",
9
- "paths": {
10
- "@supermousejs/core": [
11
- "../core/src/index.ts"
12
- ],
13
- "@supermousejs/utils": [
14
- "../utils/src/index.ts"
15
- ]
16
- }
17
- }
18
- }
2
+ "extends": "../../tsconfig.plugin.json",
3
+ "include": ["src"]
4
+ }
package/vite.config.ts CHANGED
@@ -1,22 +1,23 @@
1
- import { defineConfig } from 'vite';
2
- import dts from 'vite-plugin-dts';
3
- import path from 'path';
4
-
5
- export default defineConfig({
6
- build: {
7
- lib: {
8
- entry: path.resolve(__dirname, 'src/index.ts'),
9
- name: 'SupermouseImage',
10
- fileName: (format) => format === 'es' ? 'index.mjs' : 'index.umd.js',
11
- },
12
- rollupOptions: {
13
- external: ['@supermousejs/core', '@supermousejs/utils'],
14
- output: {
15
- globals: {
16
- '@supermousejs/core': 'SupermouseCore'
17
- , '@supermousejs/utils': 'SupermouseUtils'}
18
- }
19
- }
20
- },
21
- plugins: [dts({ rollupTypes: true })]
22
- });
1
+ import { defineConfig } from "vite";
2
+ import dts from "vite-plugin-dts";
3
+ import path from "path";
4
+
5
+ export default defineConfig({
6
+ build: {
7
+ lib: {
8
+ entry: path.resolve(__dirname, "src/index.ts"),
9
+ name: "SupermouseImage",
10
+ fileName: (format) => (format === "es" ? "index.mjs" : "index.umd.js")
11
+ },
12
+ rollupOptions: {
13
+ external: ["@supermousejs/core", "@supermousejs/utils"],
14
+ output: {
15
+ globals: {
16
+ "@supermousejs/core": "SupermouseCore",
17
+ "@supermousejs/utils": "SupermouseUtils"
18
+ }
19
+ }
20
+ }
21
+ },
22
+ plugins: [dts({ rollupTypes: true })]
23
+ });