@supermousejs/ring 2.1.1 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @supermousejs/ring
 
+## 2.3.0
+
+### Patch Changes
+
+- Updated dependencies [f6f44b2]
+  - @supermousejs/core@2.2.0
+  - @supermousejs/utils@2.3.0
+
+## 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

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/ring
-
-The standard Ring cursor plugin for **Supermouse v2**. Supports morphing when used with the Stick logic plugin.
-
-## Installation
-
-```bash
-pnpm add @supermousejs/ring
-```
-
-## Usage
-
-```ts
-import { Supermouse } from '@supermousejs/core';
-import { Ring } from '@supermousejs/ring';
-
-const app = new Supermouse();
-
-app.use(Ring({
-  size: 20,
-  color: 'black',
-  borderWidth: 2
-}));
-```
-
-## 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/ring
+
+The standard Ring cursor plugin for **Supermouse v2**. Supports morphing when used with the Stick logic plugin.
+
+## Installation
+
+```bash
+pnpm add @supermousejs/ring
+```
+
+## Usage
+
+```ts
+import { Supermouse } from "@supermousejs/core";
+import { Ring } from "@supermousejs/ring";
+
+const app = new Supermouse();
+
+app.use(
+  Ring({
+    size: 20,
+    color: "black",
+    borderWidth: 2
+  })
+);
+```
+
+## 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 '../packages/core/src';
+import { ValueOrGetter } from '../packages/core/src';
 
 export declare const Ring: (options?: RingOptions) => SupermousePlugin;
 

package/dist/index.mjs

@@ -1,28 +1,37 @@
-import { normalize as s, definePlugin as m, dom as r, Layers as S } from "@supermousejs/utils";
-const x = (o = {}) => {
-  const i = s(o.size, 20), c = s(o.color, "#ffffff"), d = s(o.borderWidth, 2), l = s(o.opacity, 1);
-  return m({
-    name: o.name || "ring",
-    selector: "[data-supermouse-color]",
-    create: (t) => {
-      const e = r.createCircle(i(t.state), "transparent");
-      return r.applyStyles(e, {
-        zIndex: S.FOLLOWER,
-        mixBlendMode: o.mixBlendMode || "difference",
-        borderStyle: "solid",
-        transition: "opacity 0.2s ease",
-        boxSizing: "border-box"
-      }), e;
+import { normalize as o, definePlugin as y, dom as s, Layers as g } from "@supermousejs/utils";
+const b = (t = {}) => {
+  const n = o(t.size, 20), i = o(t.color, "#ffffff"), c = o(t.borderWidth, 2), d = o(t.opacity, 1);
+  return y(
+    {
+      name: t.name || "ring",
+      selector: "[data-supermouse-color]",
+      create: (e) => {
+        const r = s.createCircle(n(e.state), "transparent");
+        return s.applyStyles(r, {
+          zIndex: g.FOLLOWER,
+          mixBlendMode: t.mixBlendMode || "difference",
+          borderStyle: "solid",
+          transition: "opacity 0.2s ease",
+          boxSizing: "border-box"
+        }), r;
+      },
+      update: (e, r) => {
+        const a = n(e.state), l = e.state.interaction.color || i(e.state);
+        s.applyStyles(r, {
+          width: `${a}px`,
+          height: `${a}px`,
+          borderColor: l,
+          borderWidth: `${c(e.state)}px`,
+          opacity: String(d(e.state)),
+          borderRadius: "50%"
+        });
+        const { x: f, y: m } = e.state.smooth;
+        s.setTransform(r, f, m);
+      }
     },
-    update: (t, e) => {
-      const n = i(t.state);
-      let a = c(t.state);
-      t.state.interaction.color && (a = t.state.interaction.color), r.setStyle(e, "width", `${n}px`), r.setStyle(e, "height", `${n}px`), r.setStyle(e, "borderRadius", "50%"), r.setStyle(e, "borderColor", a), r.setStyle(e, "borderWidth", `${d(t.state)}px`), r.setStyle(e, "opacity", String(l(t.state)));
-      const { x: y, y: f } = t.state.smooth;
-      r.setTransform(e, y, f);
-    }
-  }, o);
+    t
+  );
 };
 export {
-  x as Ring
+  b as Ring
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.SupermouseRing={},r.SupermouseUtils))})(this,(function(r,e){"use strict";const c=(n={})=>{const d=e.normalize(n.size,20),a=e.normalize(n.color,"#ffffff"),m=e.normalize(n.borderWidth,2),f=e.normalize(n.opacity,1);return e.definePlugin({name:n.name||"ring",selector:"[data-supermouse-color]",create:o=>{const t=e.dom.createCircle(d(o.state),"transparent");return e.dom.applyStyles(t,{zIndex:e.Layers.FOLLOWER,mixBlendMode:n.mixBlendMode||"difference",borderStyle:"solid",transition:"opacity 0.2s ease",boxSizing:"border-box"}),t},update:(o,t)=>{const s=d(o.state);let i=a(o.state);o.state.interaction.color&&(i=o.state.interaction.color),e.dom.setStyle(t,"width",`${s}px`),e.dom.setStyle(t,"height",`${s}px`),e.dom.setStyle(t,"borderRadius","50%"),e.dom.setStyle(t,"borderColor",i),e.dom.setStyle(t,"borderWidth",`${m(o.state)}px`),e.dom.setStyle(t,"opacity",String(f(o.state)));const{x:y,y:S}=o.state.smooth;e.dom.setTransform(t,y,S)}},n)};r.Ring=c,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+(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.SupermouseRing={},o.SupermouseUtils))})(this,(function(o,e){"use strict";const d=(r={})=>{const i=e.normalize(r.size,20),a=e.normalize(r.color,"#ffffff"),c=e.normalize(r.borderWidth,2),f=e.normalize(r.opacity,1);return e.definePlugin({name:r.name||"ring",selector:"[data-supermouse-color]",create:t=>{const n=e.dom.createCircle(i(t.state),"transparent");return e.dom.applyStyles(n,{zIndex:e.Layers.FOLLOWER,mixBlendMode:r.mixBlendMode||"difference",borderStyle:"solid",transition:"opacity 0.2s ease",boxSizing:"border-box"}),n},update:(t,n)=>{const s=i(t.state),m=t.state.interaction.color||a(t.state);e.dom.applyStyles(n,{width:`${s}px`,height:`${s}px`,borderColor:m,borderWidth:`${c(t.state)}px`,opacity:String(f(t.state)),borderRadius:"50%"});const{x:l,y:u}=t.state.smooth;e.dom.setTransform(n,l,u)}},r)};o.Ring=d,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));

package/meta.json

@@ -1,17 +1,46 @@
-
-{
-  "id": "ring",
-  "name": "Ring",
-  "package": "@supermousejs/ring",
-  "description": "Adds a lagging outer ring. Simple and performant.",
-  "code": "app.use(Ring({ size: 32, color: '#000' }));",
-  "recipeId": "magnetic-button",
-  "icon": "ring",
-  "options": [
-    { "name": "size", "type": "number", "default": "20", "description": "Diameter of the ring in pixels.", "reactive": true },
-    { "name": "color", "type": "string", "default": "'#ffffff'", "description": "Border color.", "reactive": true },
-    { "name": "borderWidth", "type": "number", "default": "2", "description": "Stroke width in pixels.", "reactive": true },
-    { "name": "opacity", "type": "number", "default": "1", "description": "Opacity level (0-1).", "reactive": true },
-    { "name": "mixBlendMode", "type": "string", "default": "'difference'", "description": "CSS blend mode.", "reactive": false }
-  ]
-}
+{
+  "id": "ring",
+  "name": "Ring",
+  "package": "@supermousejs/ring",
+  "description": "Adds a lagging outer ring. Simple and performant.",
+  "code": "app.use(Ring({ size: 32, color: '#000' }));",
+  "recipeId": "magnetic-button",
+  "icon": "ring",
+  "options": [
+    {
+      "name": "size",
+      "type": "number",
+      "default": "20",
+      "description": "Diameter of the ring in pixels.",
+      "reactive": true
+    },
+    {
+      "name": "color",
+      "type": "string",
+      "default": "'#ffffff'",
+      "description": "Border color.",
+      "reactive": true
+    },
+    {
+      "name": "borderWidth",
+      "type": "number",
+      "default": "2",
+      "description": "Stroke width in pixels.",
+      "reactive": true
+    },
+    {
+      "name": "opacity",
+      "type": "number",
+      "default": "1",
+      "description": "Opacity level (0-1).",
+      "reactive": true
+    },
+    {
+      "name": "mixBlendMode",
+      "type": "string",
+      "default": "'difference'",
+      "description": "CSS blend mode.",
+      "reactive": false
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supermousejs/ring",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -8,13 +8,13 @@
   "url": "https://github.com/Whitestar14/supermouse-js",
   "license": "MIT",
   "dependencies": {
-    "@supermousejs/utils": "2.1.1"
+    "@supermousejs/utils": "2.3.0"
   },
   "devDependencies": {
-    "@supermousejs/core": "2.0.5"
+    "@supermousejs/core": "2.2.0"
   },
   "peerDependencies": {
-    "@supermousejs/core": "2.0.5"
+    "@supermousejs/core": "2.2.0"
   },
   "repository": {
     "type": "git",

package/src/index.ts

@@ -1,56 +1,56 @@
-import type { ValueOrGetter } from '@supermousejs/core';
-import { definePlugin, normalize, dom, Layers } from '@supermousejs/utils';
-
-export interface RingOptions {
-  name?: string;
-  isEnabled?: boolean;
-  size?: ValueOrGetter<number>;
-  color?: ValueOrGetter<string>;
-  borderWidth?: ValueOrGetter<number>;
-  opacity?: ValueOrGetter<number>;
-  mixBlendMode?: string;
-}
-
-export const Ring = (options: RingOptions = {}) => {
-  const getSize = normalize(options.size, 20);
-  const getColor = normalize(options.color, '#ffffff');
-  const getBorder = normalize(options.borderWidth, 2);
-  const getOpacity = normalize(options.opacity, 1);
-
-  return definePlugin<HTMLDivElement, RingOptions>({
-    name: options.name || 'ring',
-    selector: '[data-supermouse-color]',
-
-    create: (app) => {
-      const el = dom.createCircle(getSize(app.state), 'transparent');
-      dom.applyStyles(el, {
-        zIndex: Layers.FOLLOWER,
-        mixBlendMode: options.mixBlendMode || 'difference',
-        borderStyle: 'solid',
-        transition: 'opacity 0.2s ease',
-        boxSizing: 'border-box'
-      });
-      return el;
-    },
-
-    update: (app, el) => {
-      const size = getSize(app.state);
-      let color = getColor(app.state);
-      
-      // Basic interaction override for color only
-      if (app.state.interaction.color) {
-        color = app.state.interaction.color;
-      }
-
-      dom.setStyle(el, 'width', `${size}px`);
-      dom.setStyle(el, 'height', `${size}px`);
-      dom.setStyle(el, 'borderRadius', '50%');
-      dom.setStyle(el, 'borderColor', color);
-      dom.setStyle(el, 'borderWidth', `${getBorder(app.state)}px`);
-      dom.setStyle(el, 'opacity', String(getOpacity(app.state)));
-
-      const { x, y } = app.state.smooth;
-      dom.setTransform(el, x, y);
-    }
-  }, options);
-};
+import type { ValueOrGetter, Supermouse } from "@supermousejs/core";
+import { definePlugin, normalize, dom, Layers } from "@supermousejs/utils";
+
+export interface RingOptions {
+  name?: string;
+  isEnabled?: boolean;
+  size?: ValueOrGetter<number>;
+  color?: ValueOrGetter<string>;
+  borderWidth?: ValueOrGetter<number>;
+  opacity?: ValueOrGetter<number>;
+  mixBlendMode?: string;
+}
+
+export const Ring = (options: RingOptions = {}) => {
+  const getSize = normalize(options.size, 20);
+  const getColor = normalize(options.color, "#ffffff");
+  const getBorder = normalize(options.borderWidth, 2);
+  const getOpacity = normalize(options.opacity, 1);
+
+  return definePlugin<HTMLDivElement, RingOptions>(
+    {
+      name: options.name || "ring",
+      selector: "[data-supermouse-color]",
+
+      create: (app: Supermouse) => {
+        const el = dom.createCircle(getSize(app.state), "transparent");
+        dom.applyStyles(el, {
+          zIndex: Layers.FOLLOWER,
+          mixBlendMode: options.mixBlendMode || "difference",
+          borderStyle: "solid",
+          transition: "opacity 0.2s ease",
+          boxSizing: "border-box"
+        });
+        return el;
+      },
+
+      update: (app: Supermouse, el: HTMLDivElement) => {
+        const size = getSize(app.state);
+        const color = app.state.interaction.color || getColor(app.state);
+
+        dom.applyStyles(el, {
+          width: `${size}px`,
+          height: `${size}px`,
+          borderColor: color,
+          borderWidth: `${getBorder(app.state)}px`,
+          opacity: String(getOpacity(app.state)),
+          borderRadius: "50%"
+        });
+
+        const { x, y } = app.state.smooth;
+        dom.setTransform(el, x, y);
+      }
+    },
+    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,22 +1,23 @@
-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: 'SupermouseRing',
-      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: "SupermouseRing",
+      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 })]
+});