@supermousejs/dot 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @supermousejs/dot
+
+## 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

@@ -0,0 +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.

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { SupermousePlugin } from '../../core/src/index.ts';
+import { ValueOrGetter } from '../../core/src/index.ts';
+
+export declare const Dot: (options?: DotOptions) => SupermousePlugin;
+
+export declare interface DotOptions {
+    name?: string;
+    isEnabled?: boolean;
+    size?: ValueOrGetter<number>;
+    color?: ValueOrGetter<string>;
+    opacity?: ValueOrGetter<number>;
+    zIndex?: string;
+    mixBlendMode?: string;
+    /** Whether to hide the dot when the cursor is in a 'shape' state (e.g. Stuck). Default true. */
+    hideOnShape?: boolean;
+}
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,30 @@
+import { normalize as n, definePlugin as u, dom as o, Layers as m } from "@supermousejs/utils";
+const x = (s = {}) => {
+  const d = "#750c7e", y = s.hideOnShape ?? !0, a = n(s.size, 8), i = n(s.color, d), S = n(s.opacity, 1);
+  return u({
+    name: "dot",
+    selector: "[data-supermouse-color]",
+    create: (e) => {
+      const t = a(e.state), c = i(e.state), r = o.createCircle(t, c);
+      return o.applyStyles(r, {
+        zIndex: s.zIndex || m.CURSOR,
+        mixBlendMode: s.mixBlendMode || "difference",
+        transition: "background-color 0.2s ease, opacity 0.2s ease"
+      }), r;
+    },
+    styles: {},
+    update: (e, t) => {
+      const c = a(e.state);
+      o.setStyle(t, "width", `${c}px`), o.setStyle(t, "height", `${c}px`);
+      const r = e.state.interaction.color;
+      r ? o.setStyle(t, "backgroundColor", r) : o.setStyle(t, "backgroundColor", i(e.state));
+      let l = S(e.state);
+      y && e.state.shape && (l = 0), o.setStyle(t, "opacity", String(l));
+      const { x: g, y: f } = e.state.target;
+      o.setTransform(t, g, f);
+    }
+  }, s);
+};
+export {
+  x as Dot
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.SupermouseDot={},n.SupermouseUtils))})(this,(function(n,e){"use strict";const m=(r={})=>{const f="#750c7e",y=r.hideOnShape??!0,c=e.normalize(r.size,8),i=e.normalize(r.color,f),l=e.normalize(r.opacity,1);return e.definePlugin({name:"dot",selector:"[data-supermouse-color]",create:t=>{const o=c(t.state),d=i(t.state),s=e.dom.createCircle(o,d);return e.dom.applyStyles(s,{zIndex:r.zIndex||e.Layers.CURSOR,mixBlendMode:r.mixBlendMode||"difference",transition:"background-color 0.2s ease, opacity 0.2s ease"}),s},styles:{},update:(t,o)=>{const d=c(t.state);e.dom.setStyle(o,"width",`${d}px`),e.dom.setStyle(o,"height",`${d}px`);const s=t.state.interaction.color;s?e.dom.setStyle(o,"backgroundColor",s):e.dom.setStyle(o,"backgroundColor",i(t.state));let a=l(t.state);y&&t.state.shape&&(a=0),e.dom.setStyle(o,"opacity",String(a));const{x:u,y:S}=t.state.target;e.dom.setTransform(o,u,S)}},r)};n.Dot=m,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/meta.json

@@ -0,0 +1,17 @@
+{
+  "id": "dot",
+  "name": "Dot",
+  "package": "@supermousejs/dot",
+  "description": "A minimalist precision point that follows your movements perfectly.",
+  "code": "app.use(Dot({ size: 8, color: '#750c7e' }));",
+  "recipeId": "basic-dot",
+  "icon": "dot",
+  "options": [
+    { "name": "size", "type": "number", "default": "8", "description": "Diameter of the dot in pixels.", "reactive": true },
+    { "name": "color", "type": "string", "default": "'#750c7e'", "description": "Background color.", "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 },
+    { "name": "hideOnShape", "type": "boolean", "default": "true", "description": "Fade out when a shape (like Stick) is active.", "reactive": false },
+    { "name": "zIndex", "type": "string", "default": "'300'", "description": "CSS z-index.", "reactive": false }
+  ]
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@supermousejs/dot",
+  "version": "2.0.0",
+  "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"
+  },
+  "devDependencies": {},
+  "peerDependencies": {},
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/src/index.ts

@@ -0,0 +1,71 @@
+import type { ValueOrGetter } from '@supermousejs/core';
+import { definePlugin, normalize, dom, Layers } from '@supermousejs/utils';
+
+export interface DotOptions {
+  name?: string;
+  isEnabled?: boolean;
+  size?: ValueOrGetter<number>;
+  color?: ValueOrGetter<string>;
+  opacity?: ValueOrGetter<number>;
+  zIndex?: string;
+  mixBlendMode?: string;
+  /** Whether to hide the dot when the cursor is in a 'shape' state (e.g. Stuck). Default true. */
+  hideOnShape?: boolean;
+}
+
+export const Dot = (options: DotOptions = {}) => {
+  const defSize = 8;
+  const defColor = '#750c7e';
+  const hideOnShape = options.hideOnShape ?? true;
+
+  // Normalize options once during setup
+  const getSize = normalize(options.size, defSize);
+  const getColor = normalize(options.color, defColor);
+  const getOpacity = normalize(options.opacity, 1);
+
+  return definePlugin<HTMLDivElement, DotOptions>({
+    name: 'dot',
+    selector: '[data-supermouse-color]',
+
+    create: (app) => {
+      // Initial values
+      const size = getSize(app.state);
+      const color = getColor(app.state);
+      
+      const el = dom.createCircle(size, color);
+      dom.applyStyles(el, {
+        zIndex: options.zIndex || Layers.CURSOR, 
+        mixBlendMode: options.mixBlendMode || 'difference',
+        transition: 'background-color 0.2s ease, opacity 0.2s ease'
+      });
+      return el;
+    },
+
+    styles: {}, 
+
+    update: (app, el) => {
+      const size = getSize(app.state);
+      dom.setStyle(el, 'width', `${size}px`);
+      dom.setStyle(el, 'height', `${size}px`);
+
+      // Handle Color via Interaction State
+      const interactionColor = app.state.interaction.color;
+      if (interactionColor) {
+        dom.setStyle(el, 'backgroundColor', interactionColor);
+      } else {
+        dom.setStyle(el, 'backgroundColor', getColor(app.state));
+      }
+
+      let targetOpacity = getOpacity(app.state);
+
+      if (hideOnShape && app.state.shape) {
+        targetOpacity = 0;
+      }
+
+      dom.setStyle(el, 'opacity', String(targetOpacity));
+
+      const { x, y } = app.state.target;
+      dom.setTransform(el, x, y);
+    }
+  }, options);
+};

package/tsconfig.json

@@ -0,0 +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"
+      ]
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +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: 'SupermouseDot',
+      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 })]
+});