@supermousejs/pointer 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @supermousejs/pointer
 
+## 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

package/README.md

@@ -0,0 +1,30 @@
+
+# @supermousejs/pointer
+
+A "Vehicle" style pointer arrow that rotates based on movement velocity.
+
+## Installation
+
+```bash
+pnpm add @supermousejs/pointer
+```
+
+## Usage
+
+```ts
+import { Supermouse } from '@supermousejs/core';
+import { Pointer } from '@supermousejs/pointer';
+
+const app = new Supermouse();
+
+app.use(Pointer({
+  size: 32,
+  color: 'black',
+  restingAngle: -45, // Angle when stopped
+  returnToRest: true // Snap back when stopped
+}));
+```
+
+## Documentation
+
+Full documentation and interactive playground available at [supermouse](https://supermouse.vercel.app) or [check out the repo](https://github.com/Whitestar14/supermouse-js).

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@supermousejs/pointer",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "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"
+    "@supermousejs/core": "2.0.2",
+    "@supermousejs/utils": "2.0.2"
   },
   "devDependencies": {},
   "peerDependencies": {},

package/src/index.ts

@@ -1,96 +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);
+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

@@ -1,18 +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"
-      ]
-    }
-  }
+{
+  "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

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