@supermousejs/ring 2.3.0 → 2.4.0

package/README.md

@@ -1,6 +1,6 @@
 # @supermousejs/ring
 
-The standard Ring cursor plugin for **Supermouse v2**. Supports morphing when used with the Stick logic plugin.
+Adds a lagging outer ring
 
 ## Installation
 
@@ -8,23 +8,29 @@ The standard Ring cursor plugin for **Supermouse v2**. Supports morphing when us
 pnpm add @supermousejs/ring
 ```
 
-## Usage
+## Ring
+
+Adds a lagging outer ring. Simple and performant.
+
+### 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
-  })
-);
+app.use(Ring({ size: 32, color: '#000' }));
 ```
 
+### Options
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| size | number | 20 | Diameter of the ring in pixels. |
+| color | string | '#ffffff' | Border color. |
+| borderWidth | number | 2 | Stroke width in pixels. |
+| opacity | number | 1 | Opacity level (0-1). |
+| mixBlendMode | string | 'difference' | CSS blend mode. |
+
 ## 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.mjs

@@ -1,37 +1,42 @@
-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(
+import { normalizeAll as a, definePlugin as l, dom as s, Layers as f } from "@supermousejs/utils";
+const x = (o = {}) => {
+  const t = a(o, {
+    size: 20,
+    color: "#ffffff",
+    borderWidth: 2,
+    opacity: 1
+  });
+  return l(
     {
-      name: t.name || "ring",
+      name: o.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",
+        const r = s.createCircle(t.size(e.state), "transparent");
+        return s.css(r, {
+          zIndex: f.FOLLOWER,
+          mixBlendMode: o.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)),
+        const i = t.size(e.state), n = e.state.interaction.color || t.color(e.state);
+        s.css(r, {
+          width: `${i}px`,
+          height: `${i}px`,
+          borderColor: n,
+          borderWidth: `${t.borderWidth(e.state)}px`,
+          opacity: String(t.opacity(e.state)),
           borderRadius: "50%"
         });
-        const { x: f, y: m } = e.state.smooth;
-        s.setTransform(r, f, m);
+        const { x: c, y: d } = e.state.smooth;
+        s.setTransform(r, c, d);
       }
     },
-    t
+    o
   );
 };
 export {
-  b as Ring
+  x as Ring
 };

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.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"})}));
+(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.SupermouseRing={},t.SupermouseUtils))})(this,(function(t,e){"use strict";const d=(i={})=>{const r=e.normalizeAll(i,{size:20,color:"#ffffff",borderWidth:2,opacity:1});return e.definePlugin({name:i.name||"ring",selector:"[data-supermouse-color]",create:o=>{const s=e.dom.createCircle(r.size(o.state),"transparent");return e.dom.css(s,{zIndex:e.Layers.FOLLOWER,mixBlendMode:i.mixBlendMode||"difference",borderStyle:"solid",transition:"opacity 0.2s ease",boxSizing:"border-box"}),s},update:(o,s)=>{const n=r.size(o.state),c=o.state.interaction.color||r.color(o.state);e.dom.css(s,{width:`${n}px`,height:`${n}px`,borderColor:c,borderWidth:`${r.borderWidth(o.state)}px`,opacity:String(r.opacity(o.state)),borderRadius:"50%"});const{x:f,y:a}=o.state.smooth;e.dom.setTransform(s,f,a)}},i)};t.Ring=d,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@supermousejs/ring",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "description": "Adds a lagging outer ring",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "author": "O.S David",
   "url": "https://github.com/Whitestar14/supermouse-js",
   "license": "MIT",
   "dependencies": {
-    "@supermousejs/utils": "2.3.0"
+    "@supermousejs/utils": "2.4.0"
   },
   "devDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.4.0"
   },
   "peerDependencies": {
-    "@supermousejs/core": "2.2.0"
+    "@supermousejs/core": "2.4.0"
   },
   "repository": {
     "type": "git",

package/CHANGELOG.md

@@ -1,95 +0,0 @@
-# @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
-
-- 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/meta.json

@@ -1,46 +0,0 @@
-{
-  "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/src/index.ts

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

package/vite.config.ts

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