aura-glass 2.0.39 → 2.1.0

package/dist/esm/hooks/useMotionPreference.js

@@ -0,0 +1,78 @@
+'use client';
+import { useReducedMotion } from './useReducedMotion.js';
+
+function useMotionAwareAnimation() {
+  const prefersReducedMotion = useReducedMotion();
+  const getAnimationProps = (props = {}) => {
+    if (prefersReducedMotion) {
+      return {
+        ...props,
+        // Use a zero-duration transition compatible with Framer Motion
+        transition: {
+          duration: 0
+        },
+        animate: props?.initial || {}
+      };
+    }
+    return props;
+  };
+  // Normalize easing to Framer Motion-friendly values
+  const normalizeEase = easing => {
+    if (typeof easing === 'string') {
+      const e = easing.trim().toLowerCase();
+      // Convert common CSS names to Framer Motion names
+      if (e === 'ease-in') return 'easeIn';
+      if (e === 'ease-out') return 'easeOut';
+      if (e === 'ease-in-out' || e === 'ease') return 'easeInOut';
+      if (e === 'linear') return 'linear';
+      if (e === 'spring') return 'spring';
+      // Support CSS cubic-bezier() by converting to an array that Framer understands
+      if (e.startsWith('cubic-bezier(') && e.endsWith(')')) {
+        const nums = e.slice('cubic-bezier('.length, -1).split(',').map(n => parseFloat(n.trim())).filter(n => Number.isFinite(n));
+        if (nums.length === 4) return nums;
+      }
+      // Fallback
+      return 'easeInOut';
+    }
+    return easing;
+  };
+  const getTransition = (duration = 0.3, easing = 'easeOut') => {
+    if (prefersReducedMotion) {
+      return {
+        duration: 0
+      };
+    }
+    const normalized = normalizeEase(easing);
+    if (normalized === 'spring') {
+      // Let callers provide additional spring settings if needed elsewhere
+      return {
+        type: 'spring'
+      };
+    }
+    return {
+      duration,
+      ease: normalized
+    };
+  };
+  return {
+    getAnimationProps,
+    getTransition
+  };
+}
+function useAnimationDuration(baseDuration = 200) {
+  const prefersReducedMotion = useReducedMotion();
+  return {
+    duration: prefersReducedMotion ? 0 : baseDuration
+  };
+}
+function useMotionPreference() {
+  const prefersReducedMotion = useReducedMotion();
+  const shouldAnimate = !prefersReducedMotion;
+  return {
+    shouldAnimate,
+    prefersReducedMotion
+  };
+}
+
+export { useAnimationDuration, useMotionAwareAnimation, useMotionPreference };
+//# sourceMappingURL=useMotionPreference.js.map

package/dist/esm/hooks/useMotionPreference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMotionPreference.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/hooks/usePerformance.js

@@ -0,0 +1,260 @@
+'use client';
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+const defaultMetrics = {
+  cls: 0,
+  fcp: 0,
+  lcp: 0,
+  fid: 0,
+  inp: 0,
+  fps: 60,
+  memoryUsage: 0,
+  domElements: 0,
+  networkLatency: 0,
+  bundleSize: 0,
+  timeToInteractive: 0,
+  totalBlockingTime: 0
+};
+const defaultSettings = {
+  enableMonitoring: true,
+  sampleRate: 100,
+  // Monitor 100% in development
+  reportingInterval: 5000,
+  // Report every 5 seconds
+  enableDevtools: process.env.NODE_ENV === 'development'
+};
+const usePerformance = (settings = {}) => {
+  const [metrics, setMetrics] = useState(defaultMetrics);
+  const [isMonitoring, setIsMonitoring] = useState(false);
+  const [alerts, setAlerts] = useState([]);
+  const config = {
+    ...defaultSettings,
+    ...settings
+  };
+  const frameId = useRef();
+  const lastFrameTime = useRef(performance.now());
+  const frameCount = useRef(0);
+  // FPS monitoring
+  const measureFPS = useCallback(() => {
+    const now = performance.now();
+    frameCount.current++;
+    if (now - lastFrameTime.current >= 1000) {
+      const fps = Math.round(frameCount.current * 1000 / (now - lastFrameTime.current));
+      setMetrics(prev => ({
+        ...prev,
+        fps
+      }));
+      frameCount.current = 0;
+      lastFrameTime.current = now;
+      // Alert on low FPS
+      if (fps < 30) {
+        setAlerts(prev => [...prev, `Low FPS detected: ${fps}`]);
+      }
+    }
+    if (isMonitoring) {
+      frameId.current = requestAnimationFrame(measureFPS);
+    }
+  }, [isMonitoring]);
+  // Memory usage monitoring
+  const measureMemoryUsage = useCallback(() => {
+    if ('memory' in performance) {
+      const memory = performance.memory;
+      const memoryUsage = Math.round(memory.usedJSHeapSize / 1024 / 1024);
+      setMetrics(prev => ({
+        ...prev,
+        memoryUsage
+      }));
+      // Alert on high memory usage
+      if (memoryUsage > 100) {
+        setAlerts(prev => [...prev, `High memory usage: ${memoryUsage}MB`]);
+      }
+    }
+  }, []);
+  // DOM elements count
+  const measureDOMComplexity = useCallback(() => {
+    const domElements = document.querySelectorAll('*').length;
+    setMetrics(prev => ({
+      ...prev,
+      domElements
+    }));
+    // Alert on DOM complexity
+    if (domElements > 2000) {
+      setAlerts(prev => [...prev, `High DOM complexity: ${domElements} elements`]);
+    }
+  }, []);
+  // Web Vitals monitoring
+  const measureWebVitals = useCallback(() => {
+    // Use Web Vitals library if available
+    if ('webVitals' in window) {
+      return;
+    }
+    // Basic CLS measurement
+    let clsValue = 0;
+    const observer = new PerformanceObserver(list => {
+      for (const entry of list.getEntries()) {
+        if (entry.entryType === 'layout-shift' && !entry.hadRecentInput) {
+          clsValue += entry.value;
+        }
+      }
+      setMetrics(prev => ({
+        ...prev,
+        cls: clsValue
+      }));
+    });
+    try {
+      observer.observe({
+        type: 'layout-shift',
+        buffered: true
+      });
+    } catch (e) {
+      // Layout shift not supported
+    }
+    // LCP measurement
+    const lcpObserver = new PerformanceObserver(list => {
+      const entries = list.getEntries();
+      const lastEntry = entries[entries.length - 1];
+      setMetrics(prev => ({
+        ...prev,
+        lcp: lastEntry.startTime
+      }));
+    });
+    try {
+      lcpObserver.observe({
+        type: 'largest-contentful-paint',
+        buffered: true
+      });
+    } catch (e) {
+      // LCP not supported
+    }
+    return () => {
+      observer.disconnect();
+      lcpObserver.disconnect();
+    };
+  }, []);
+  // Network latency estimation
+  const measureNetworkLatency = useCallback(async () => {
+    const start = performance.now();
+    try {
+      await fetch('/favicon.ico', {
+        method: 'HEAD'
+      });
+      const latency = performance.now() - start;
+      setMetrics(prev => ({
+        ...prev,
+        networkLatency: Math.round(latency)
+      }));
+    } catch (e) {
+      // Network request failed
+    }
+  }, []);
+  // Start monitoring
+  const startMonitoring = useCallback(() => {
+    if (Math.random() * 100 > config.sampleRate) return;
+    setIsMonitoring(true);
+    measureFPS();
+    const interval = setInterval(() => {
+      measureMemoryUsage();
+      measureDOMComplexity();
+      measureNetworkLatency();
+    }, config.reportingInterval);
+    const cleanup = measureWebVitals();
+    return () => {
+      setIsMonitoring(false);
+      clearInterval(interval);
+      if (frameId.current) {
+        cancelAnimationFrame(frameId.current);
+      }
+      cleanup?.();
+    };
+  }, [config.sampleRate, config.reportingInterval, measureFPS, measureMemoryUsage, measureDOMComplexity, measureNetworkLatency, measureWebVitals]);
+  // Stop monitoring
+  const stopMonitoring = useCallback(() => {
+    setIsMonitoring(false);
+    if (frameId.current) {
+      cancelAnimationFrame(frameId.current);
+    }
+  }, []);
+  // Performance recommendations
+  const getRecommendations = useCallback(() => {
+    const recommendations = [];
+    if (metrics.fps < 30) {
+      recommendations.push('Consider reducing animations or using will-change CSS property');
+    }
+    if (metrics.memoryUsage > 100) {
+      recommendations.push('High memory usage detected. Check for memory leaks');
+    }
+    if (metrics.domElements > 2000) {
+      recommendations.push('High DOM complexity. Consider virtualizing long lists');
+    }
+    if (metrics.cls > 0.1) {
+      recommendations.push('Layout shifts detected. Ensure elements have defined dimensions');
+    }
+    if (metrics.lcp > 2500) {
+      recommendations.push('Slow loading detected. Optimize images and critical resources');
+    }
+    if (metrics.networkLatency > 200) {
+      recommendations.push('High network latency. Consider caching or CDN optimization');
+    }
+    return recommendations;
+  }, [metrics]);
+  // Performance score calculation
+  const getPerformanceScore = useCallback(() => {
+    let score = 100;
+    // FPS penalty
+    if (metrics.fps < 60) score -= (60 - metrics.fps) * 0.5;
+    // Memory penalty
+    if (metrics.memoryUsage > 50) score -= (metrics.memoryUsage - 50) * 0.2;
+    // DOM complexity penalty
+    if (metrics.domElements > 1000) score -= (metrics.domElements - 1000) * 0.01;
+    // Web Vitals penalties
+    if (metrics.cls > 0.1) score -= metrics.cls * 100;
+    if (metrics.lcp > 2500) score -= (metrics.lcp - 2500) * 0.01;
+    return Math.max(0, Math.round(score));
+  }, [metrics]);
+  // Clear alerts
+  const clearAlerts = useCallback(() => {
+    setAlerts([]);
+  }, []);
+  // Export metrics for reporting
+  const exportMetrics = useCallback(() => {
+    return {
+      ...metrics,
+      timestamp: Date.now(),
+      userAgent: navigator.userAgent,
+      url: window.location.href,
+      performanceScore: getPerformanceScore(),
+      recommendations: getRecommendations()
+    };
+  }, [metrics, getPerformanceScore, getRecommendations]);
+  // Initialize monitoring on mount
+  useEffect(() => {
+    if (!config.enableMonitoring) return;
+    const cleanup = startMonitoring();
+    return cleanup;
+  }, [config.enableMonitoring, startMonitoring]);
+  // Performance grade
+  const getGrade = useCallback(() => {
+    const score = getPerformanceScore();
+    if (score >= 90) return 'A';
+    if (score >= 80) return 'B';
+    if (score >= 70) return 'C';
+    if (score >= 60) return 'D';
+    return 'F';
+  }, [getPerformanceScore]);
+  return {
+    metrics,
+    isMonitoring,
+    alerts,
+    startMonitoring,
+    stopMonitoring,
+    getRecommendations,
+    getPerformanceScore,
+    getGrade,
+    clearAlerts,
+    exportMetrics,
+    config
+  };
+};
+
+export { usePerformance };
+//# sourceMappingURL=usePerformance.js.map

package/dist/esm/hooks/usePerformance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePerformance.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/hooks/usePhysicsInteraction.js

@@ -0,0 +1,326 @@
+'use client';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { useAccessibleAnimation } from './useAccessibilitySettings.js';
+
+const DEFAULT_OPTIONS = {
+  scale: 1.02,
+  duration: 200,
+  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  damping: 0.8,
+  stiffness: 100,
+  mass: 1,
+  enableHover: true,
+  enableClick: true,
+  enableDrag: false,
+  threshold: 5,
+  onInteractionStart: () => {},
+  onInteractionEnd: () => {}
+};
+/**
+ * Enhanced physics interaction hook with spring animations and accessibility
+ */
+function usePhysicsInteraction(options = {}) {
+  const mergedOptions = {
+    ...DEFAULT_OPTIONS,
+    ...options
+  };
+  const {
+    scale,
+    duration,
+    easing,
+    damping,
+    stiffness,
+    mass,
+    enableHover,
+    enableClick,
+    enableDrag,
+    threshold,
+    onInteractionStart,
+    onInteractionEnd
+  } = mergedOptions;
+  const ref = useRef(null);
+  const animationFrameRef = useRef();
+  const isDraggingRef = useRef(false);
+  const startPositionRef = useRef({
+    x: 0,
+    y: 0
+  });
+  useRef({
+    x: 0,
+    y: 0
+  });
+  const [physicsState, setPhysicsState] = useState({
+    isInteracting: false,
+    velocity: {
+      x: 0,
+      y: 0
+    },
+    position: {
+      x: 0,
+      y: 0
+    },
+    scale: 1,
+    rotation: 0
+  });
+  const {
+    shouldAnimate,
+    transitionDuration
+  } = useAccessibleAnimation();
+  // Spring physics calculation
+  const calculateSpringForce = useCallback((current, target, velocity) => {
+    const force = -stiffness * (current - target) - damping * velocity;
+    const acceleration = force / mass;
+    const newVelocity = velocity + acceleration * 0.016; // 60fps
+    const newPosition = current + newVelocity * 0.016;
+    return {
+      position: newPosition,
+      velocity: newVelocity
+    };
+  }, [stiffness, damping, mass]);
+  // Apply transform with physics
+  const applyTransform = useCallback((element, state) => {
+    if (!shouldAnimate) return;
+    const transforms = [];
+    if (state.position) {
+      transforms.push(`translate3d(${state.position.x}px, ${state.position.y}px, 0)`);
+    }
+    if (state.scale && state.scale !== 1) {
+      transforms.push(`scale(${state.scale})`);
+    }
+    if (state.rotation && state.rotation !== 0) {
+      transforms.push(`rotate(${state.rotation}deg)`);
+    }
+    element.style.transform = transforms.length > 0 ? transforms.join(' ') : 'none';
+    element.style.transition = shouldAnimate ? `transform ${transitionDuration}ms ${easing}` : 'none';
+  }, [shouldAnimate, transitionDuration, easing]);
+  // Animation loop for spring physics
+  const animateSpring = useCallback(() => {
+    const element = ref.current;
+    if (!element || !physicsState.isInteracting) return;
+    setPhysicsState(prevState => {
+      const targetX = isDraggingRef.current ? prevState.position.x : 0;
+      const targetY = isDraggingRef.current ? prevState.position.y : 0;
+      const targetScale = prevState.isInteracting ? scale : 1;
+      const newX = calculateSpringForce(prevState.position.x, targetX, prevState.velocity.x);
+      const newY = calculateSpringForce(prevState.position.y, targetY, prevState.velocity.y);
+      const newScale = calculateSpringForce(prevState.scale, targetScale, 0);
+      const newState = {
+        ...prevState,
+        position: {
+          x: newX.position,
+          y: newY.position
+        },
+        velocity: {
+          x: newX.velocity,
+          y: newY.velocity
+        },
+        scale: newScale.position
+      };
+      applyTransform(element, newState);
+      // Check if animation should continue
+      const isStable = Math.abs(newX.velocity) < 0.01 && Math.abs(newY.velocity) < 0.01 && Math.abs(newState.scale - targetScale) < 0.001;
+      if (isStable && !isDraggingRef.current) {
+        return {
+          ...newState,
+          isInteracting: false
+        };
+      }
+      return newState;
+    });
+    if (physicsState.isInteracting) {
+      animationFrameRef.current = requestAnimationFrame(animateSpring);
+    }
+  }, [physicsState.isInteracting, scale, calculateSpringForce, applyTransform]);
+  // Start interaction
+  const startInteraction = useCallback(() => {
+    setPhysicsState(prev => ({
+      ...prev,
+      isInteracting: true
+    }));
+    onInteractionStart();
+    if (shouldAnimate && !animationFrameRef.current) {
+      animateSpring();
+    }
+  }, [shouldAnimate, animateSpring, onInteractionStart]);
+  // End interaction
+  const endInteraction = useCallback(() => {
+    isDraggingRef.current = false;
+    onInteractionEnd();
+    // Let spring animation finish naturally
+    setTimeout(() => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = undefined;
+      }
+    }, duration);
+  }, [duration, onInteractionEnd]);
+  // Mouse/Touch event handlers
+  const handlePointerDown = useCallback(e => {
+    if (!enableClick && !enableDrag) return;
+    startPositionRef.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    if (enableDrag) {
+      isDraggingRef.current = true;
+      startInteraction();
+    }
+  }, [enableClick, enableDrag, startInteraction]);
+  const handlePointerMove = useCallback(e => {
+    if (!isDraggingRef.current || !enableDrag) return;
+    const deltaX = e.clientX - startPositionRef.current.x;
+    const deltaY = e.clientY - startPositionRef.current.y;
+    if (Math.abs(deltaX) > threshold || Math.abs(deltaY) > threshold) {
+      setPhysicsState(prev => ({
+        ...prev,
+        position: {
+          x: deltaX * 0.5,
+          y: deltaY * 0.5
+        } // Damped movement
+      }));
+    }
+  }, [enableDrag, threshold]);
+  const handlePointerUp = useCallback(() => {
+    if (isDraggingRef.current) {
+      endInteraction();
+    }
+  }, [endInteraction]);
+  const handleMouseEnter = useCallback(() => {
+    if (!enableHover || !shouldAnimate) return;
+    const element = ref.current;
+    if (!element) return;
+    startInteraction();
+    applyTransform(element, {
+      scale
+    });
+  }, [enableHover, shouldAnimate, startInteraction, applyTransform, scale]);
+  const handleMouseLeave = useCallback(() => {
+    if (!enableHover || !shouldAnimate) return;
+    const element = ref.current;
+    if (!element) return;
+    endInteraction();
+    applyTransform(element, {
+      scale: 1,
+      position: {
+        x: 0,
+        y: 0
+      }
+    });
+  }, [enableHover, shouldAnimate, endInteraction, applyTransform]);
+  const handleClick = useCallback(() => {
+    if (!enableClick || !shouldAnimate) return;
+    const element = ref.current;
+    if (!element) return;
+    // Quick scale animation for click feedback
+    applyTransform(element, {
+      scale: scale * 0.95
+    });
+    setTimeout(() => {
+      applyTransform(element, {
+        scale: 1
+      });
+    }, 100);
+  }, [enableClick, shouldAnimate, applyTransform, scale]);
+  // Set up event listeners
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    // Mouse events
+    if (enableHover) {
+      element.addEventListener('mouseenter', handleMouseEnter, {
+        passive: true
+      });
+      element.addEventListener('mouseleave', handleMouseLeave, {
+        passive: true
+      });
+    }
+    if (enableClick) {
+      element.addEventListener('click', handleClick, {
+        passive: true
+      });
+    }
+    // Pointer events for drag
+    if (enableDrag) {
+      element.addEventListener('pointerdown', handlePointerDown, {
+        passive: true
+      });
+      document.addEventListener('pointermove', handlePointerMove, {
+        passive: true
+      });
+      document.addEventListener('pointerup', handlePointerUp, {
+        passive: true
+      });
+    }
+    // Keyboard support for accessibility
+    const handleKeyDown = e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        handleClick();
+      }
+    };
+    element.addEventListener('keydown', handleKeyDown);
+    return () => {
+      // Cleanup event listeners
+      element.removeEventListener('mouseenter', handleMouseEnter);
+      element.removeEventListener('mouseleave', handleMouseLeave);
+      element.removeEventListener('click', handleClick);
+      element.removeEventListener('pointerdown', handlePointerDown);
+      element.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerUp);
+      // Cleanup animation
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [enableHover, enableClick, enableDrag, handleMouseEnter, handleMouseLeave, handleClick, handlePointerDown, handlePointerMove, handlePointerUp]);
+  return {
+    ref,
+    physicsState,
+    isInteracting: physicsState.isInteracting,
+    startInteraction,
+    endInteraction
+  };
+}
+/**
+ * Simplified physics interaction hook for basic hover effects
+ */
+function useSimplePhysicsHover(scale = 1.02, duration = 200) {
+  return usePhysicsInteraction({
+    scale,
+    duration,
+    enableHover: true,
+    enableClick: false,
+    enableDrag: false
+  });
+}
+/**
+ * Physics interaction hook optimized for buttons
+ */
+function usePhysicsButton(options = {}) {
+  return usePhysicsInteraction({
+    scale: 0.95,
+    duration: 150,
+    enableHover: true,
+    enableClick: true,
+    enableDrag: false,
+    ...options
+  });
+}
+/**
+ * Physics interaction hook for draggable elements
+ */
+function usePhysicsDrag(options = {}) {
+  return usePhysicsInteraction({
+    scale: 1.05,
+    duration: 300,
+    enableHover: false,
+    enableClick: false,
+    enableDrag: true,
+    damping: 0.9,
+    stiffness: 150,
+    ...options
+  });
+}
+
+export { usePhysicsButton, usePhysicsDrag, usePhysicsInteraction, useSimplePhysicsHover };
+//# sourceMappingURL=usePhysicsInteraction.js.map

package/dist/esm/hooks/usePhysicsInteraction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePhysicsInteraction.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}