@supermousejs/icon 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,59 +1,87 @@
-# @supermousejs/icon
-
-## 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
+# @supermousejs/icon
+
+## 2.2.0
+
+### Minor Changes
+
+- 9fe1a7b: - Implemented idiomatic approach to using supermouse/utils
+  - Rewrote `applyStyles`, `setTransform` and `setStyles` to share a global cache registry
+
+### 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/LICENSE.md

@@ -1,21 +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.
+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/README.md

@@ -1,29 +1,30 @@
-
-# @supermousejs/icon
-
-Renders a static SVG icon at the cursor position. Useful for custom pointers.
-
-## Installation
-
-```bash
-pnpm add @supermousejs/icon
-```
-
-## Usage
-
-```ts
-import { Supermouse } from '@supermousejs/core';
-import { Icon } from '@supermousejs/icon';
-
-const app = new Supermouse();
-
-app.use(Icon({
-  svg: '<svg>...</svg>', // Your SVG string
-  size: 24,
-  color: 'black'
-}));
-```
-
-## Documentation
-
-Full documentation and interactive playground available at [supermouse](https://supermouse.vercel.app) or [check out the repo](https://github.com/Whitestar14/supermouse-js).
+# @supermousejs/icon
+
+Renders a static SVG icon at the cursor position. Useful for custom pointers.
+
+## Installation
+
+```bash
+pnpm add @supermousejs/icon
+```
+
+## Usage
+
+```ts
+import { Supermouse } from "@supermousejs/core";
+import { Icon } from "@supermousejs/icon";
+
+const app = new Supermouse();
+
+app.use(
+  Icon({
+    svg: "<svg>...</svg>", // Your SVG string
+    size: 24,
+    color: "black"
+  })
+);
+```
+
+## Documentation
+
+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

@@ -1,5 +1,5 @@
-import { SupermousePlugin } from '../../core/src/index.ts';
-import { ValueOrGetter } from '../../core/src/index.ts';
+import { SupermousePlugin } from '../../core/src';
+import { ValueOrGetter } from '../../core/src';
 
 export declare const Icon: (options: IconOptions) => SupermousePlugin;
 

package/dist/index.mjs

@@ -1,23 +1,36 @@
-import { normalize as o, definePlugin as g, dom as s, Layers as d } from "@supermousejs/utils";
-const x = (e) => {
-  const n = o(e.size, 24), l = o(e.opacity, 1), y = o(e.color, "black"), [a, i] = e.offset || [0, 0];
-  return g({
-    name: e.name || "icon",
-    create: () => {
-      const t = s.createActor("div");
-      return t.style.zIndex = d.CURSOR, t.style.display = "flex", t.style.alignItems = "center", t.style.justifyContent = "center", t.innerHTML = e.svg, t;
+import { normalize as r, definePlugin as d, dom as o, Layers as p } from "@supermousejs/utils";
+const S = (e) => {
+  const a = r(e.size, 24), l = r(e.opacity, 1), i = r(e.color, "black"), [y, f] = e.offset || [0, 0];
+  return d(
+    {
+      name: e.name || "icon",
+      create: () => {
+        const t = o.createActor("div");
+        return o.applyStyles(t, {
+          zIndex: String(p.CURSOR),
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }), t.innerHTML = e.svg, t;
+      },
+      styles: {
+        color: "color"
+      },
+      update: (t, n) => {
+        const c = t.state, s = a(c);
+        o.applyStyles(n, {
+          width: `${s}px`,
+          height: `${s}px`,
+          opacity: String(l(c)),
+          color: i(c)
+        });
+        const { x: g, y: m } = c.smooth;
+        o.setTransform(n, g + y, m + f, 0);
+      }
     },
-    styles: {
-      color: "color"
-    },
-    update: (t, c) => {
-      const r = n(t.state);
-      s.setStyle(c, "width", `${r}px`), s.setStyle(c, "height", `${r}px`), s.setStyle(c, "opacity", String(l(t.state))), s.setStyle(c, "color", y(t.state));
-      const { x: f, y: m } = t.state.smooth;
-      s.setTransform(c, f + a, m + i, 0);
-    }
-  }, e);
+    e
+  );
 };
 export {
-  x as Icon
+  S as Icon
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.SupermouseIcon={},o.SupermouseUtils))})(this,(function(o,e){"use strict";const c=n=>{const d=e.normalize(n.size,24),f=e.normalize(n.opacity,1),i=e.normalize(n.color,"black"),[m,y]=n.offset||[0,0];return e.definePlugin({name:n.name||"icon",create:()=>{const t=e.dom.createActor("div");return t.style.zIndex=e.Layers.CURSOR,t.style.display="flex",t.style.alignItems="center",t.style.justifyContent="center",t.innerHTML=n.svg,t},styles:{color:"color"},update:(t,s)=>{const r=d(t.state);e.dom.setStyle(s,"width",`${r}px`),e.dom.setStyle(s,"height",`${r}px`),e.dom.setStyle(s,"opacity",String(f(t.state))),e.dom.setStyle(s,"color",i(t.state));const{x:a,y:l}=t.state.smooth;e.dom.setTransform(s,a+m,l+y,0)}},n)};o.Icon=c,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.SupermouseIcon={},t.SupermouseUtils))})(this,(function(t,e){"use strict";const i=o=>{const f=e.normalize(o.size,24),d=e.normalize(o.opacity,1),a=e.normalize(o.color,"black"),[m,u]=o.offset||[0,0];return e.definePlugin({name:o.name||"icon",create:()=>{const n=e.dom.createActor("div");return e.dom.applyStyles(n,{zIndex:String(e.Layers.CURSOR),display:"flex",alignItems:"center",justifyContent:"center"}),n.innerHTML=o.svg,n},styles:{color:"color"},update:(n,s)=>{const r=n.state,c=f(r);e.dom.applyStyles(s,{width:`${c}px`,height:`${c}px`,opacity:String(d(r)),color:a(r)});const{x:l,y:p}=r.smooth;e.dom.setTransform(s,l+m,p+u,0)}},o)};t.Icon=i,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));

package/meta.json

@@ -1,16 +1,45 @@
-
-{
-  "id": "icon",
-  "name": "Icon",
-  "package": "@supermousejs/icon",
-  "description": "Renders a static SVG icon at the cursor position.",
-  "code": "app.use(Icon({ svg: '<svg>...</svg>', size: 24 }));",
-  "icon": "context",
-  "options": [
-    { "name": "svg", "type": "string", "default": "undefined", "description": "SVG content string. (Required)", "reactive": false },
-    { "name": "size", "type": "number", "default": "24", "description": "Size of the icon container.", "reactive": true },
-    { "name": "color", "type": "string", "default": "'black'", "description": "CSS color (currentColor).", "reactive": true },
-    { "name": "opacity", "type": "number", "default": "1", "description": "Opacity level (0-1).", "reactive": true },
-    { "name": "offset", "type": "[number, number]", "default": "[0, 0]", "description": "Fixed [x, y] offset from cursor center.", "reactive": false }
-  ]
-}
+{
+  "id": "icon",
+  "name": "Icon",
+  "package": "@supermousejs/icon",
+  "description": "Renders a static SVG icon at the cursor position.",
+  "code": "app.use(Icon({ svg: '<svg>...</svg>', size: 24 }));",
+  "icon": "context",
+  "options": [
+    {
+      "name": "svg",
+      "type": "string",
+      "default": "undefined",
+      "description": "SVG content string. (Required)",
+      "reactive": false
+    },
+    {
+      "name": "size",
+      "type": "number",
+      "default": "24",
+      "description": "Size of the icon container.",
+      "reactive": true
+    },
+    {
+      "name": "color",
+      "type": "string",
+      "default": "'black'",
+      "description": "CSS color (currentColor).",
+      "reactive": true
+    },
+    {
+      "name": "opacity",
+      "type": "number",
+      "default": "1",
+      "description": "Opacity level (0-1).",
+      "reactive": true
+    },
+    {
+      "name": "offset",
+      "type": "[number, number]",
+      "default": "[0, 0]",
+      "description": "Fixed [x, y] offset from cursor center.",
+      "reactive": false
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supermousejs/icon",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -8,14 +8,23 @@
   "url": "https://github.com/Whitestar14/supermouse-js",
   "license": "MIT",
   "dependencies": {
-    "@supermousejs/utils": "2.1.0"
+    "@supermousejs/utils": "2.2.0"
   },
   "devDependencies": {
-    "@supermousejs/core": "2.0.4"
+    "@supermousejs/core": "2.1.0"
   },
   "peerDependencies": {
-    "@supermousejs/core": "2.0.4"
+    "@supermousejs/core": "2.1.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Whitestar14/supermouse-js.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/Whitestar14/supermouse-js/issues"
+  },
+  "homepage": "https://github.com/Whitestar14/supermouse-js/tree/main/packages/icon#readme",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/index.ts

@@ -1,52 +1,63 @@
-import type { ValueOrGetter } from '@supermousejs/core';
-import { definePlugin, normalize, dom, Layers } from '@supermousejs/utils';
-
-export interface IconOptions {
-  name?: string;
-  isEnabled?: boolean;
-  /** SVG Content String */
-  svg: string;
-  /** Size in pixels (default 24) */
-  size?: ValueOrGetter<number>;
-  /** CSS Color (default black) */
-  color?: ValueOrGetter<string>;
-  opacity?: ValueOrGetter<number>;
-  /** Offset [x, y] from cursor center */
-  offset?: [number, number];
-}
-
-export const Icon = (options: IconOptions) => {
-  const getSize = normalize(options.size, 24);
-  const getOpacity = normalize(options.opacity, 1);
-  const getColor = normalize(options.color, 'black');
-  const [offX, offY] = options.offset || [0, 0];
-
-  return definePlugin<HTMLDivElement, IconOptions>({
-    name: options.name || 'icon',
-    
-    create: () => {
-      const el = dom.createActor('div') as HTMLDivElement;
-      el.style.zIndex = Layers.CURSOR;
-      el.style.display = 'flex';
-      el.style.alignItems = 'center';
-      el.style.justifyContent = 'center';
-      el.innerHTML = options.svg;
-      return el;
-    },
-
-    styles: {
-      color: 'color'
-    },
-
-    update: (app, el) => {
-      const size = getSize(app.state);
-      dom.setStyle(el, 'width', `${size}px`);
-      dom.setStyle(el, 'height', `${size}px`);
-      dom.setStyle(el, 'opacity', String(getOpacity(app.state)));
-      dom.setStyle(el, 'color', getColor(app.state));
-
-      const { x, y } = app.state.smooth;
-      dom.setTransform(el, x + offX, y + offY, 0);
-    }
-  }, options);
-};
+import type { ValueOrGetter, Supermouse } from "@supermousejs/core";
+import { definePlugin, normalize, dom, Layers } from "@supermousejs/utils";
+
+export interface IconOptions {
+  name?: string;
+  isEnabled?: boolean;
+  /** SVG Content String */
+  svg: string;
+  /** Size in pixels (default 24) */
+  size?: ValueOrGetter<number>;
+  /** CSS Color (default black) */
+  color?: ValueOrGetter<string>;
+  opacity?: ValueOrGetter<number>;
+  /** Offset [x, y] from cursor center */
+  offset?: [number, number];
+}
+
+export const Icon = (options: IconOptions) => {
+  const getSize = normalize(options.size, 24);
+  const getOpacity = normalize(options.opacity, 1);
+  const getColor = normalize(options.color, "black");
+  const [offX, offY] = options.offset || [0, 0];
+
+  return definePlugin<HTMLDivElement, IconOptions>(
+    {
+      name: options.name || "icon",
+
+      create: () => {
+        const el = dom.createActor("div") as HTMLDivElement;
+
+        dom.applyStyles(el, {
+          zIndex: String(Layers.CURSOR),
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        });
+
+        el.innerHTML = options.svg;
+        return el;
+      },
+
+      styles: {
+        color: "color"
+      },
+
+      update: (app: Supermouse, el: HTMLDivElement) => {
+        const state = app.state;
+        const size = getSize(state);
+
+        dom.applyStyles(el, {
+          width: `${size}px`,
+          height: `${size}px`,
+          opacity: String(getOpacity(state)),
+          color: getColor(state)
+        });
+
+        const { x, y } = state.smooth;
+        dom.setTransform(el, x + offX, y + offY, 0);
+      }
+    },
+    options
+  );
+};

package/tsconfig.json

@@ -1,18 +1,4 @@
 {
-  "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.plugin.json",
+  "include": ["src"]
+}

package/vite.config.ts

@@ -1,26 +1,23 @@
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-export default defineConfig({
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src/index.ts'),
-      name: 'SupermouseIcon',
-      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: "SupermouseIcon",
+      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 })]
+});