agex 0.2.2 → 0.2.4

package/assets/assets/cursor.js

@@ -1,5 +1,8 @@
 (() => {
   let hasMoved = false;
+  let clickRippleEnabled = true;
+  let trailEnabled = false;
+  let trailPoints = [];
 
   function createCursor() {
     if (document.getElementById('agex-cursor')) return;
@@ -26,7 +29,30 @@
 
     const style = document.createElement('style');
     style.id = 'agex-cursor-style';
-    style.textContent = ``;
+    style.textContent = `
+      .agex-cursor-ripple {
+        position: fixed;
+        border-radius: 50%;
+        background: rgba(255, 50, 50, 0.4);
+        pointer-events: none;
+        z-index: 2147483646;
+        transform: translate(-50%, -50%) scale(0);
+        animation: agex-ripple 0.4s ease-out forwards;
+      }
+      @keyframes agex-ripple {
+        to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
+      }
+      .agex-cursor-trail {
+        position: fixed;
+        width: 8px;
+        height: 8px;
+        background: rgba(255, 50, 50, 0.3);
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 2147483645;
+        transform: translate(-50%, -50%);
+      }
+    `;
     document.head.appendChild(style);
 
     document.addEventListener('mousemove', (e) => {
@@ -38,14 +64,22 @@
           hasMoved = true;
           c.style.opacity = '1';
         }
+        
+        if (trailEnabled) {
+          createTrailPoint(e.clientX, e.clientY);
+        }
       }
     }, true);
 
-    document.addEventListener('mousedown', () => {
+    document.addEventListener('mousedown', (e) => {
       const c = document.getElementById('agex-cursor');
       if (c) {
         c.style.transform = 'translate(-50%, -50%) scale(0.8)';
         c.style.background = 'rgba(255, 200, 50, 1)';
+        
+        if (clickRippleEnabled) {
+          createClickRipple(e.clientX, e.clientY);
+        }
       }
     }, true);
 
@@ -58,6 +92,76 @@
     }, true);
   }
 
+  function createClickRipple(x, y) {
+    const ripple = document.createElement('div');
+    ripple.className = 'agex-cursor-ripple';
+    ripple.style.left = `${x}px`;
+    ripple.style.top = `${y}px`;
+    ripple.style.width = '60px';
+    ripple.style.height = '60px';
+    document.body.appendChild(ripple);
+    setTimeout(() => ripple.remove(), 400);
+  }
+
+  function createTrailPoint(x, y) {
+    const point = document.createElement('div');
+    point.className = 'agex-cursor-trail';
+    point.style.left = `${x}px`;
+    point.style.top = `${y}px`;
+    document.body.appendChild(point);
+    trailPoints.push(point);
+    
+    setTimeout(() => {
+      point.style.opacity = '0';
+      point.style.transition = 'opacity 0.3s';
+    }, 100);
+    
+    setTimeout(() => {
+      point.remove();
+      trailPoints = trailPoints.filter(p => p !== point);
+    }, 400);
+  }
+
+  // Expose cursor configuration API
+  window.__agexCursor = {
+    setSize(size) {
+      const cursor = document.getElementById('agex-cursor');
+      if (!cursor) return;
+      const sizes = { normal: 16, large: 24, 'extra-large': 32 };
+      const s = sizes[size] || sizes.large;
+      cursor.style.width = `${s}px`;
+      cursor.style.height = `${s}px`;
+    },
+    setClickRipple(enabled) {
+      clickRippleEnabled = enabled;
+    },
+    setTrail(enabled) {
+      trailEnabled = enabled;
+    },
+    configure(options = {}) {
+      if (options.size) this.setSize(options.size);
+      if (options.clickRipple !== undefined) this.setClickRipple(options.clickRipple);
+      if (options.trail !== undefined) this.setTrail(options.trail);
+    },
+    sync() {
+      const cursor = document.getElementById('agex-cursor');
+      if (!cursor) return Promise.resolve('no cursor');
+      return new Promise(resolve => {
+        const handler = function(e) {
+          cursor.style.left = e.clientX + 'px';
+          cursor.style.top = e.clientY + 'px';
+          cursor.style.opacity = '1';
+          resolve('moved to ' + e.clientX + ',' + e.clientY);
+        };
+        document.addEventListener('mousemove', handler, { once: true });
+        setTimeout(function() {
+          document.removeEventListener('mousemove', handler);
+          resolve('hover complete');
+        }, 150);
+      });
+    }
+  };
+
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', createCursor);
   } else {