@supermousejs/pointer 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @supermousejs/pointer
+
+## 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,19 @@
+import { SupermousePlugin } from '../../core/src/index.ts';
+import { ValueOrGetter } from '../../core/src/index.ts';
+
+export declare const Pointer: (options?: PointerOptions) => SupermousePlugin;
+
+export declare interface PointerOptions {
+    name?: string;
+    isEnabled?: boolean;
+    size?: ValueOrGetter<number>;
+    color?: ValueOrGetter<string>;
+    svg?: string;
+    rotationSmoothing?: number;
+    restingAngle?: ValueOrGetter<number>;
+    returnToRest?: ValueOrGetter<boolean>;
+    restDelay?: ValueOrGetter<number>;
+    opacity?: ValueOrGetter<number>;
+}
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,35 @@
+import { normalize as o, definePlugin as M, dom as r, math as u, Layers as P } from "@supermousejs/utils";
+const U = `
+<svg viewBox="0 0 100 100" fill="currentColor" style="display: block; width: 100%; height: 100%;">
+  <path d="M10 20 L90 50 L10 80 L25 50 Z" />
+</svg>
+`, B = (s = {}) => {
+  const f = s.rotationSmoothing || 0.15, h = s.svg || U, S = o(s.size, 32), y = o(s.restingAngle, -45), v = o(s.returnToRest, !0), x = o(s.restDelay, 200), z = o(s.opacity, 1);
+  let c = 0, l = 0, a = 0;
+  return M({
+    name: "pointer",
+    create: (t) => {
+      const e = r.createActor("div");
+      e.style.zIndex = P.CURSOR, e.style.transformOrigin = "center center";
+      const n = y(t.state);
+      return c = n, l = n, e.innerHTML = h, e;
+    },
+    styles: {
+      color: "color"
+    },
+    update: (t, e) => {
+      const n = S(t.state), A = y(t.state), d = v(t.state), m = x(t.state), T = z(t.state);
+      r.setStyle(e, "width", `${n}px`), r.setStyle(e, "height", `${n}px`), r.setStyle(e, "opacity", String(T));
+      const { x: L, y: w } = t.state.velocity, R = u.dist(L, w), g = performance.now();
+      let i = l;
+      R > 1 ? (i = t.state.angle, l = i, a = g) : d && g - a > m && (i = A);
+      const D = R <= 1 && d && g - a > m ? 0.05 : f;
+      c = u.lerpAngle(c, i, D);
+      const { x: C, y: O } = t.state.smooth;
+      r.setTransform(e, C, O, c);
+    }
+  }, s);
+};
+export {
+  B as Pointer
+};

package/dist/index.umd.js

@@ -0,0 +1,5 @@
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.SupermousePointer={},s.SupermouseUtils))})(this,(function(s,e){"use strict";const u=`
+<svg viewBox="0 0 100 100" fill="currentColor" style="display: block; width: 100%; height: 100%;">
+  <path d="M10 20 L90 50 L10 80 L25 50 Z" />
+</svg>
+`,h=(o={})=>{const S=o.rotationSmoothing||.15,R=o.svg||u,z=e.normalize(o.size,32),l=e.normalize(o.restingAngle,-45),v=e.normalize(o.returnToRest,!0),T=e.normalize(o.restDelay,200),x=e.normalize(o.opacity,1);let i=0,a=0,g=0;return e.definePlugin({name:"pointer",create:t=>{const n=e.dom.createActor("div");n.style.zIndex=e.Layers.CURSOR,n.style.transformOrigin="center center";const r=l(t.state);return i=r,a=r,n.innerHTML=R,n},styles:{color:"color"},update:(t,n)=>{const r=z(t.state),A=l(t.state),m=v(t.state),y=T(t.state),L=x(t.state);e.dom.setStyle(n,"width",`${r}px`),e.dom.setStyle(n,"height",`${r}px`),e.dom.setStyle(n,"opacity",String(L));const{x:w,y:P}=t.state.velocity,f=e.math.dist(w,P),d=performance.now();let c=a;f>1?(c=t.state.angle,a=c,g=d):m&&d-g>y&&(c=A);const j=f<=1&&m&&d-g>y?.05:S;i=e.math.lerpAngle(i,c,j);const{x:p,y:D}=t.state.smooth;e.dom.setTransform(n,p,D,i)}},o)};s.Pointer=h,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/meta.json

@@ -0,0 +1,20 @@
+
+{
+  "id": "pointer",
+  "name": "Pointer",
+  "package": "@supermousejs/pointer",
+  "description": "A 'Vehicle' style arrow that rotates based on velocity vectors.",
+  "code": "app.use(Pointer({ size: 32, color: '#000' }));",
+  "recipeId": "vehicle-pointer",
+  "icon": "pointer",
+  "options": [
+    { "name": "size", "type": "number", "default": "32", "description": "Size of the pointer in pixels.", "reactive": true },
+    { "name": "color", "type": "string", "default": "'black'", "description": "Fill color of the SVG.", "reactive": true },
+    { "name": "svg", "type": "string", "default": "Default Arrow", "description": "Custom SVG content string.", "reactive": false },
+    { "name": "restingAngle", "type": "number", "default": "-45", "description": "Angle when stationary (degrees).", "reactive": true },
+    { "name": "returnToRest", "type": "boolean", "default": "true", "description": "Snap back to resting angle when stopped.", "reactive": true },
+    { "name": "restDelay", "type": "number", "default": "200", "description": "Milliseconds to wait before returning to rest.", "reactive": true },
+    { "name": "opacity", "type": "number", "default": "1", "description": "Opacity level (0-1).", "reactive": true },
+    { "name": "rotationSmoothing", "type": "number", "default": "0.15", "description": "Lerp factor for rotation.", "reactive": false }
+  ]
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@supermousejs/pointer",
+  "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,96 @@
+import type { ValueOrGetter } from '@supermousejs/core';
+import { definePlugin, normalize, dom, math, Layers } from '@supermousejs/utils';
+
+export interface PointerOptions {
+  name?: string;
+  isEnabled?: boolean;
+  size?: ValueOrGetter<number>;
+  color?: ValueOrGetter<string>;
+  svg?: string;
+  rotationSmoothing?: number;
+  restingAngle?: ValueOrGetter<number>;
+  returnToRest?: ValueOrGetter<boolean>;
+  restDelay?: ValueOrGetter<number>;
+  opacity?: ValueOrGetter<number>;
+}
+
+const DEFAULT_SVG = `
+<svg viewBox="0 0 100 100" fill="currentColor" style="display: block; width: 100%; height: 100%;">
+  <path d="M10 20 L90 50 L10 80 L25 50 Z" />
+</svg>
+`;
+
+export const Pointer = (options: PointerOptions = {}) => {
+  const defSize = 32;
+  const smoothing = options.rotationSmoothing || 0.15;
+  const svgContent = options.svg || DEFAULT_SVG;
+  
+  const getSize = normalize(options.size, defSize);
+  const getRestingAngle = normalize(options.restingAngle, -45);
+  const getReturnToRest = normalize(options.returnToRest, true);
+  const getRestDelay = normalize(options.restDelay, 200);
+  const getOpacity = normalize(options.opacity, 1);
+
+  let currentRotation = 0;
+  let lastRotation = 0;
+  let stopTime = 0;
+
+  return definePlugin<HTMLDivElement, PointerOptions>({
+    name: 'pointer',
+
+    create: (app) => {
+      const el = dom.createActor('div') as HTMLDivElement;
+      el.style.zIndex = Layers.CURSOR;
+      el.style.transformOrigin = 'center center'; 
+      
+      const restAngle = getRestingAngle(app.state);
+      currentRotation = restAngle;
+      lastRotation = restAngle;
+      
+      el.innerHTML = svgContent;
+      
+      return el;
+    },
+
+    styles: {
+      color: 'color'
+    },
+
+    update: (app, el) => {
+      const size = getSize(app.state);
+      const restingAngle = getRestingAngle(app.state);
+      const returnToRest = getReturnToRest(app.state);
+      const restDelay = getRestDelay(app.state);
+      const opacity = getOpacity(app.state);
+
+      dom.setStyle(el, 'width', `${size}px`);
+      dom.setStyle(el, 'height', `${size}px`);
+      dom.setStyle(el, 'opacity', String(opacity));
+
+      const { x: vx, y: vy } = app.state.velocity;
+      const speed = math.dist(vx, vy);
+      const now = performance.now();
+      
+      let targetRotation = lastRotation;
+      
+      if (speed > 1) {
+        targetRotation = app.state.angle;
+        lastRotation = targetRotation;
+        stopTime = now;
+      } else {
+        if (returnToRest && (now - stopTime > restDelay)) {
+            targetRotation = restingAngle;
+        }
+      }
+
+      // Use core interpolation with shortest-path logic
+      const isReturning = speed <= 1 && returnToRest && (now - stopTime > restDelay);
+      const factor = isReturning ? 0.05 : smoothing;
+      
+      currentRotation = math.lerpAngle(currentRotation, targetRotation, factor);
+
+      const { x, y } = app.state.smooth;
+      dom.setTransform(el, x, y, currentRotation);
+    }
+  }, 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: 'SupermousePointer',
+      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 })]
+});