@supermousejs/trail 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @supermousejs/trail
+
+## 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,14 @@
+import { SupermousePlugin } from '../../core/src/index.ts';
+import { ValueOrGetter } from '../../core/src/index.ts';
+
+export declare const Trail: (options?: TrailOptions) => SupermousePlugin;
+
+export declare interface TrailOptions {
+    name?: string;
+    isEnabled?: boolean;
+    length?: number;
+    size?: ValueOrGetter<number>;
+    color?: ValueOrGetter<string>;
+}
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,28 @@
+import { normalize as d, definePlugin as p, dom as o, Layers as z } from "@supermousejs/utils";
+const C = (s = {}) => {
+  const l = s.length || 10, f = d(s.size, 6), m = d(s.color, "#ff00ff"), a = [], r = [];
+  return p({
+    name: s.name || "trail",
+    create: () => {
+      const t = o.createActor("div");
+      t.style.zIndex = z.TRACE;
+      for (let n = 0; n < l; n++) {
+        const e = o.createCircle(0, "#000");
+        e.style.position = "absolute", e.style.opacity = String(1 - n / l), t.appendChild(e), a.push(e), r.push({ x: -100, y: -100 });
+      }
+      return t;
+    },
+    update: (t) => {
+      const { x: n, y: e } = t.state.smooth;
+      r.pop(), r.unshift({ x: n, y: e });
+      const u = f(t.state), x = m(t.state);
+      a.forEach((c, i) => {
+        const h = r[i], g = 1 - i / l, y = u * g;
+        o.setStyle(c, "width", `${y}px`), o.setStyle(c, "height", `${y}px`), o.setStyle(c, "backgroundColor", x), o.setTransform(c, h.x, h.y);
+      });
+    }
+  }, s);
+};
+export {
+  C as Trail
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(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.SupermouseTrail={},t.SupermouseUtils))})(this,(function(t,e){"use strict";const u=(s={})=>{const d=s.length||10,y=e.normalize(s.size,6),h=e.normalize(s.color,"#ff00ff"),a=[],c=[];return e.definePlugin({name:s.name||"trail",create:()=>{const o=e.dom.createActor("div");o.style.zIndex=e.Layers.TRACE;for(let r=0;r<d;r++){const n=e.dom.createCircle(0,"#000");n.style.position="absolute",n.style.opacity=String(1-r/d),o.appendChild(n),a.push(n),c.push({x:-100,y:-100})}return o},update:o=>{const{x:r,y:n}=o.state.smooth;c.pop(),c.unshift({x:r,y:n});const p=y(o.state),S=h(o.state);a.forEach((i,f)=>{const l=c[f],x=1-f/d,m=p*x;e.dom.setStyle(i,"width",`${m}px`),e.dom.setStyle(i,"height",`${m}px`),e.dom.setStyle(i,"backgroundColor",S),e.dom.setTransform(i,l.x,l.y)})}},s)};t.Trail=u,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));

package/meta.json

@@ -0,0 +1,15 @@
+
+{
+  "id": "trail",
+  "name": "Trail",
+  "package": "@supermousejs/trail",
+  "description": "Generates procedural particles that trail behind your motion.",
+  "code": "app.use(Trail({ length: 12, color: '#f0f' }));",
+  "recipeId": "ghost-trail",
+  "icon": "trail",
+  "options": [
+    { "name": "length", "type": "number", "default": "10", "description": "Number of trail segments.", "reactive": false },
+    { "name": "size", "type": "number", "default": "6", "description": "Size of trail particles.", "reactive": true },
+    { "name": "color", "type": "string", "default": "'#ff00ff'", "description": "Color of segments.", "reactive": true }
+  ]
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@supermousejs/trail",
+  "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,61 @@
+import type { ValueOrGetter } from '@supermousejs/core';
+import { definePlugin, normalize, dom, Layers } from '@supermousejs/utils';
+
+export interface TrailOptions {
+  name?: string;
+  isEnabled?: boolean;
+  length?: number;
+  size?: ValueOrGetter<number>;
+  color?: ValueOrGetter<string>;
+}
+
+export const Trail = (options: TrailOptions = {}) => {
+  const length = options.length || 10;
+  const getSize = normalize(options.size, 6);
+  const getColor = normalize(options.color, '#ff00ff');
+  
+  const segments: HTMLDivElement[] = [];
+  const history: { x: number, y: number }[] = [];
+
+  return definePlugin<HTMLDivElement, TrailOptions>({
+    name: options.name || 'trail',
+    
+    create: () => {
+      const container = dom.createActor('div') as HTMLDivElement;
+      container.style.zIndex = Layers.TRACE;
+      
+      for(let i=0; i<length; i++) {
+        const d = dom.createCircle(0, '#000');
+        d.style.position = 'absolute';
+        d.style.opacity = String(1 - (i / length));
+        container.appendChild(d);
+        segments.push(d);
+        history.push({ x: -100, y: -100 });
+      }
+      return container;
+    },
+
+    update: (app) => {
+      const { x, y } = app.state.smooth;
+      
+      // Shift history
+      history.pop();
+      history.unshift({ x, y });
+      
+      const baseSize = getSize(app.state);
+      const color = getColor(app.state);
+
+      segments.forEach((seg, i) => {
+        const pos = history[i];
+        const scale = 1 - (i / length);
+        const size = baseSize * scale;
+        
+        dom.setStyle(seg, 'width', `${size}px`);
+        dom.setStyle(seg, 'height', `${size}px`);
+        dom.setStyle(seg, 'backgroundColor', color);
+        
+        dom.setTransform(seg, pos.x, pos.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: 'SupermouseTrail',
+      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 })]
+});