aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/advanced/GlassNeuroSync.js.map

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

package/dist/esm/components/advanced/GlassOrientationEffects.js

@@ -0,0 +1,269 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useMotionValue, useSpring, useTransform, motion } from 'framer-motion';
+import { cn } from '../../lib/utilsComprehensive.js';
+
+function GlassOrientationEffects({
+  children,
+  className,
+  sensitivity = 0.7,
+  smoothing = 0.8,
+  effectTypes = ["tilt", "parallax", "refraction"],
+  gyroscopeEnabled = true,
+  accelerometerEnabled = true,
+  compassEnabled = true,
+  onOrientationChange,
+  onMotionChange
+}) {
+  useReducedMotion();
+  const containerRef = useRef(null);
+  const [isSupported, setIsSupported] = useState(false);
+  const [permissionGranted, setPermissionGranted] = useState(false);
+  const [orientation, setOrientation] = useState({
+    alpha: 0,
+    beta: 0,
+    gamma: 0,
+    absolute: false
+  });
+  const [motionData, setMotionData] = useState({
+    acceleration: null,
+    accelerationIncludingGravity: null,
+    rotationRate: null,
+    interval: 0
+  });
+  // Motion values
+  const tiltX = useMotionValue(0);
+  const tiltY = useMotionValue(0);
+  const tiltZ = useMotionValue(0);
+  const parallaxX = useMotionValue(0);
+  const parallaxY = useMotionValue(0);
+  const refractionX = useMotionValue(0);
+  const refractionY = useMotionValue(0);
+  const shimmerAngle = useMotionValue(0);
+  // Smooth springs
+  const springConfig = {
+    stiffness: 100 * (1 - smoothing),
+    damping: 20 * smoothing
+  };
+  const smoothTiltX = useSpring(tiltX, springConfig);
+  const smoothTiltY = useSpring(tiltY, springConfig);
+  const smoothTiltZ = useSpring(tiltZ, springConfig);
+  const smoothParallaxX = useSpring(parallaxX, springConfig);
+  const smoothParallaxY = useSpring(parallaxY, springConfig);
+  useSpring(refractionX, springConfig);
+  useSpring(refractionY, springConfig);
+  useSpring(shimmerAngle, springConfig);
+  // Transform ranges
+  const perspectiveX = useTransform(smoothTiltY, [-90, 90], [-30, 30]);
+  const perspectiveY = useTransform(smoothTiltX, [-180, 180], [-20, 20]);
+  const backgroundX = useTransform(smoothParallaxX, [-1, 1], [-50, 50]);
+  const backgroundY = useTransform(smoothParallaxY, [-1, 1], [-50, 50]);
+  // Check for device orientation support
+  useEffect(() => {
+    const checkSupport = () => {
+      const hasOrientation = "DeviceOrientationEvent" in window;
+      const hasMotion = "DeviceMotionEvent" in window;
+      setIsSupported(hasOrientation || hasMotion);
+    };
+    checkSupport();
+  }, []);
+  // Request permissions for iOS 13+
+  const requestPermissions = useCallback(async () => {
+    if (typeof DeviceOrientationEvent.requestPermission === "function") {
+      try {
+        const orientationPermission = await DeviceOrientationEvent.requestPermission();
+        const motionPermission = await DeviceMotionEvent.requestPermission();
+        setPermissionGranted(orientationPermission === "granted" || motionPermission === "granted");
+      } catch (error) {
+        console.warn("Error requesting device orientation permission:", error);
+        setPermissionGranted(false);
+      }
+    } else {
+      // Assume permission granted on non-iOS devices
+      setPermissionGranted(true);
+    }
+  }, []);
+  // Handle device orientation changes
+  const handleOrientationChange = useCallback(event => {
+    if (!gyroscopeEnabled && !compassEnabled) return;
+    const orientationData = {
+      alpha: event.alpha || 0,
+      beta: event.beta || 0,
+      gamma: event.gamma || 0,
+      absolute: event.absolute || false
+    };
+    setOrientation(orientationData);
+    onOrientationChange?.(orientationData);
+    // Apply effects based on orientation
+    if (effectTypes.includes("tilt")) {
+      tiltX.set(orientationData.beta * sensitivity);
+      tiltY.set(orientationData.gamma * sensitivity);
+      tiltZ.set(orientationData.alpha * sensitivity * 0.1);
+    }
+    if (effectTypes.includes("parallax")) {
+      parallaxX.set(orientationData.gamma / 90 * sensitivity);
+      parallaxY.set(orientationData.beta / 180 * sensitivity);
+    }
+    if (effectTypes.includes("refraction")) {
+      refractionX.set(orientationData.gamma / 90 * sensitivity * 0.5);
+      refractionY.set(orientationData.beta / 180 * sensitivity * 0.5);
+    }
+    if (effectTypes.includes("shimmer")) {
+      shimmerAngle.set(orientationData.alpha);
+    }
+  }, [gyroscopeEnabled, compassEnabled, sensitivity, effectTypes, onOrientationChange]);
+  // Handle device motion changes
+  const handleMotionChange = useCallback(event => {
+    if (!accelerometerEnabled) return;
+    const motionData = {
+      acceleration: event.acceleration && event.acceleration.x !== null && event.acceleration.y !== null && event.acceleration.z !== null ? {
+        x: event.acceleration.x,
+        y: event.acceleration.y,
+        z: event.acceleration.z
+      } : null,
+      accelerationIncludingGravity: event.accelerationIncludingGravity && event.accelerationIncludingGravity.x !== null && event.accelerationIncludingGravity.y !== null && event.accelerationIncludingGravity.z !== null ? {
+        x: event.accelerationIncludingGravity.x,
+        y: event.accelerationIncludingGravity.y,
+        z: event.accelerationIncludingGravity.z
+      } : null,
+      rotationRate: event.rotationRate && event.rotationRate.alpha !== null && event.rotationRate.beta !== null && event.rotationRate.gamma !== null ? {
+        alpha: event.rotationRate.alpha,
+        beta: event.rotationRate.beta,
+        gamma: event.rotationRate.gamma
+      } : null,
+      interval: event.interval
+    };
+    setMotionData(motionData);
+    onMotionChange?.(motionData);
+    // Apply liquid effect based on acceleration
+    if (effectTypes.includes("liquid") && motionData.acceleration) {
+      const {
+        x,
+        y,
+        z
+      } = motionData.acceleration;
+      const intensity = Math.sqrt(x * x + y * y + z * z) / 10; // Normalize
+      tiltX.set(tiltX.get() + y * intensity * sensitivity);
+      tiltY.set(tiltY.get() + x * intensity * sensitivity);
+    }
+  }, [accelerometerEnabled, sensitivity, effectTypes, onMotionChange]);
+  // Setup event listeners
+  useEffect(() => {
+    if (!isSupported || !permissionGranted) return;
+    if (gyroscopeEnabled || compassEnabled) {
+      window.addEventListener("deviceorientation", handleOrientationChange);
+    }
+    if (accelerometerEnabled) {
+      window.addEventListener("devicemotion", handleMotionChange);
+    }
+    return () => {
+      window.removeEventListener("deviceorientation", handleOrientationChange);
+      window.removeEventListener("devicemotion", handleMotionChange);
+    };
+  }, [isSupported, permissionGranted, gyroscopeEnabled, compassEnabled, accelerometerEnabled, handleOrientationChange, handleMotionChange]);
+  // Handle orientation change (screen rotation)
+  useEffect(() => {
+    const handleScreenOrientationChange = () => {
+      // Reset motion values on orientation change
+      tiltX.set(0);
+      tiltY.set(0);
+      tiltZ.set(0);
+      parallaxX.set(0);
+      parallaxY.set(0);
+    };
+    window.addEventListener("orientationchange", handleScreenOrientationChange);
+    window.addEventListener("resize", handleScreenOrientationChange);
+    return () => {
+      window.removeEventListener("orientationchange", handleScreenOrientationChange);
+      window.removeEventListener("resize", handleScreenOrientationChange);
+    };
+  }, []);
+  // Permission request component
+  if (isSupported && !permissionGranted) {
+    return jsx("div", {
+      className: cn("relative OptimizedGlass intensity={0.2} glassBlur={6} glass-p-6", className),
+      children: jsxs("div", {
+        className: 'text-center',
+        children: [jsx("h3", {
+          className: 'glass-text-lg font-semibold mb-2',
+          children: "Enable Device Orientation"
+        }), jsx("p", {
+          className: 'glass-text-secondary mb-4',
+          children: "Allow orientation access for interactive glass effects"
+        }), jsx("button", {
+          onClick: requestPermissions,
+          className: "glass-button glass-button-primary glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard",
+          children: "Enable Orientation Effects"
+        })]
+      })
+    });
+  }
+  if (!isSupported) {
+    return jsx("div", {
+      className: cn("relative", className),
+      children: children
+    });
+  }
+  return jsxs(motion.div, {
+    ref: containerRef,
+    className: cn("relative OptimizedGlass intensity={0.2} glassBlur={6} overflow-hidden", "transform-gpu will-change-transform", className),
+    style: {
+      transformStyle: "preserve-3d",
+      perspective: "1000px"
+    },
+    children: [effectTypes.includes("tilt") && jsxs(motion.div, {
+      className: 'absolute inset-0',
+      style: {
+        rotateX: perspectiveX,
+        rotateY: perspectiveY,
+        rotateZ: smoothTiltZ
+      },
+      children: [effectTypes.includes("parallax") && jsx(motion.div, {
+        className: 'absolute inset-0 OptimizedGlass intensity={0.2} glassBlur={6} opacity-30',
+        style: {
+          x: backgroundX,
+          y: backgroundY,
+          scale: 1.1
+        }
+      }), effectTypes.includes("refraction") && jsx(motion.div, {
+        className: "glass-absolute glass-inset-0 glass-pointer-events-none glass-surface-primary/10"
+      }), effectTypes.includes("shimmer") && jsx(motion.div, {
+        className: 'glass-absolute glass-inset-0 glass-pointer-events-none opacity-20 glass-surface-primary/10'
+      }), jsx("div", {
+        className: 'relative z-10',
+        children: children
+      })]
+    }), !effectTypes.includes("tilt") && jsxs("div", {
+      className: 'relative',
+      children: [effectTypes.includes("parallax") && jsx(motion.div, {
+        className: "glass-absolute glass-inset-0 glass-opacity-30",
+        style: {
+          x: backgroundX,
+          y: backgroundY,
+          scale: 1.1
+        }
+      }), effectTypes.includes("refraction") && jsx(motion.div, {
+        className: "glass-absolute glass-inset-0 glass-pointer-events-none glass-surface-primary/10"
+      }), effectTypes.includes("shimmer") && jsx(motion.div, {
+        className: 'glass-absolute glass-inset-0 glass-pointer-events-none opacity-20 glass-surface-primary/10'
+      }), jsx("div", {
+        className: 'relative z-10',
+        children: children
+      })]
+    }), process.env.NODE_ENV === "development" && jsxs("div", {
+      className: 'absolute bottom-2 left-2 glass-text-xs glass-surface-primary glass-p-2 glass-radius-sm opacity-50',
+      children: [jsxs("div", {
+        children: ["\u03B1: ", orientation.alpha.toFixed(1), "\u00B0"]
+      }), jsxs("div", {
+        children: ["\u03B2: ", orientation.beta.toFixed(1), "\u00B0"]
+      }), jsxs("div", {
+        children: ["\u03B3: ", orientation.gamma.toFixed(1), "\u00B0"]
+      })]
+    })]
+  });
+}
+
+export { GlassOrientationEffects };
+//# sourceMappingURL=GlassOrientationEffects.js.map

package/dist/esm/components/advanced/GlassOrientationEffects.js.map

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

package/dist/esm/components/advanced/GlassParallaxLayers.js

@@ -0,0 +1,179 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { useMotionValue, useSpring, useScroll, useTransform, motion } from 'framer-motion';
+import { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import '../../primitives/GlassCore.js';
+import '../../primitives/glass/GlassAdvanced.js';
+import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
+import '../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../primitives/MotionNative.js';
+import '../../primitives/motion/MotionFramer.js';
+import { useA11yId } from '../../utils/a11y.js';
+
+const GlassParallaxLayers = /*#__PURE__*/forwardRef(({
+  layers,
+  className,
+  mouseIntensity = 0.5,
+  scrollIntensity = 0.3,
+  perspective = 1200,
+  autoRotate = false,
+  rotateSpeed = 0.5,
+  interactive = true,
+  debug = false,
+  "aria-label": ariaLabel,
+  respectMotionPreference = true
+}, ref) => {
+  const containerRef = useRef(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const componentId = useA11yId("parallax-layers");
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  // Check for reduced motion preference
+  useEffect(() => {
+    if (!respectMotionPreference) return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = e => setPrefersReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [respectMotionPreference]);
+  // Motion values for mouse position
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  // Smooth spring animation
+  const springConfig = {
+    damping: 25,
+    stiffness: 150
+  };
+  const smoothMouseX = useSpring(mouseX, springConfig);
+  const smoothMouseY = useSpring(mouseY, springConfig);
+  // Scroll progress
+  const {
+    scrollYProgress
+  } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end start"]
+  });
+  // Auto rotation
+  const [rotation, setRotation] = useState(0);
+  useEffect(() => {
+    if (!autoRotate) return;
+    const interval = setInterval(() => {
+      setRotation(prev => prev + rotateSpeed);
+    }, 16);
+    return () => clearInterval(interval);
+  }, [autoRotate, rotateSpeed]);
+  // Handle mouse movement
+  const handleMouseMove = useCallback(e => {
+    if (!interactive || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width - 0.5;
+    const y = (e.clientY - rect.top) / rect.height - 0.5;
+    mouseX.set(x);
+    mouseY.set(y);
+  }, [interactive, mouseX, mouseY]);
+  const handleMouseLeave = useCallback(() => {
+    mouseX.set(0);
+    mouseY.set(0);
+    setIsHovered(false);
+  }, [mouseX, mouseY]);
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+  // Sort layers by depth (furthest first for proper stacking)
+  const sortedLayers = [...layers].sort((a, b) => b.depth - a.depth);
+  return jsxs("div", {
+    ref: ref || containerRef,
+    id: componentId,
+    className: cn("relative overflow-hidden", "transform-gpu will-change-transform", className),
+    style: {
+      perspective: prefersReducedMotion ? "none" : `${perspective}px`,
+      transformStyle: prefersReducedMotion ? "flat" : "preserve-3d"
+    },
+    onMouseMove: prefersReducedMotion ? undefined : handleMouseMove,
+    onMouseEnter: prefersReducedMotion ? undefined : handleMouseEnter,
+    onMouseLeave: prefersReducedMotion ? undefined : handleMouseLeave,
+    role: "presentation",
+    "aria-label": ariaLabel || "Parallax layers with interactive effects",
+    "aria-hidden": !ariaLabel,
+    children: [sortedLayers.map((layer, index) => {
+      const depthFactor = layer.depth / 10;
+      const parallaxFactor = 1 - depthFactor;
+      // Calculate transforms based on depth
+      const xTransform = useTransform(smoothMouseX, [-0.5, 0.5], [-50 * parallaxFactor * mouseIntensity, 50 * parallaxFactor * mouseIntensity]);
+      useTransform(smoothMouseY, [-0.5, 0.5], [-30 * parallaxFactor * mouseIntensity, 30 * parallaxFactor * mouseIntensity]);
+      const scrollY = useTransform(scrollYProgress, [0, 1], [100 * depthFactor * scrollIntensity, -100 * depthFactor * scrollIntensity]);
+      const rotateXTransform = useTransform(smoothMouseY, [-0.5, 0.5], [15 * parallaxFactor * mouseIntensity, -15 * parallaxFactor * mouseIntensity]);
+      const rotateYTransform = useTransform(smoothMouseX, [-0.5, 0.5], [-15 * parallaxFactor * mouseIntensity, 15 * parallaxFactor * mouseIntensity]);
+      // Blur based on depth
+      const blurAmount = Math.round(depthFactor * 4);
+      const autoBlur = blurAmount === 0 ? "none" : blurAmount === 1 ? "subtle" : blurAmount === 2 ? "medium" : blurAmount === 3 ? "strong" : "intense";
+      // Map layer blur values to OptimizedGlass compatible values
+      const mapBlurValue = blur => {
+        switch (blur) {
+          case "sm":
+            return "subtle";
+          case "md":
+            return "medium";
+          case "lg":
+            return "strong";
+          case "xl":
+            return "intense";
+          default:
+            return blur;
+        }
+      };
+      const finalBlur = mapBlurValue(layer.blur) || autoBlur;
+      return jsx(motion.div, {
+        initial: {
+          opacity: 0,
+          scale: prefersReducedMotion ? 1 : 0.9
+        },
+        animate: {
+          opacity: layer.opacity || 1 - depthFactor * 0.2,
+          scale: layer.scale || 1 - depthFactor * 0.1
+        },
+        transition: {
+          duration: prefersReducedMotion ? 0 : 0.6,
+          delay: prefersReducedMotion ? 0 : index * 0.1
+        },
+        style: {
+          x: prefersReducedMotion ? 0 : xTransform,
+          y: prefersReducedMotion ? 0 : scrollY,
+          rotateX: prefersReducedMotion ? 0 : rotateXTransform,
+          rotateY: prefersReducedMotion ? 0 : autoRotate ? rotation : rotateYTransform,
+          z: prefersReducedMotion ? 0 : layer.depth * 50,
+          scale: layer.scale || 1 - depthFactor * 0.1,
+          opacity: layer.opacity || 1 - depthFactor * 0.2,
+          transformStyle: prefersReducedMotion ? "flat" : "preserve-3d"
+        },
+        children: jsxs(OptimizedGlassCore, {
+          intent: "neutral",
+          elevation: isHovered ? "level3" : "level1",
+          intensity: "medium",
+          glassBlur: finalBlur,
+          depth: Math.min(layer.depth, 5),
+          className: cn("absolute inset-0", "transition-all duration-300", layer.className),
+          children: [layer.content, debug && jsxs("div", {
+            className: 'absolute glass-top-2 left-2 glass-surface-dark/20 glass-glass-glass-backdrop-blur-sm glass-contrast-guard glass-p-2 glass-radius-sm glass-text-xs text-primary/90 glass-contrast-guard',
+            children: ["Layer ", index + 1, " | Depth: ", layer.depth]
+          })]
+        })
+      }, `layer-${index}`);
+    }), interactive && !prefersReducedMotion && jsx(motion.div, {
+      className: 'absolute bottom-4 right-4 text-primary/60 glass-text-xs glass-surface-dark/20 glass-glass-glass-backdrop-blur-sm glass-contrast-guard glass-p-2 glass-radius-md glass-contrast-guard',
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: isHovered ? 1 : 0.5
+      },
+      role: "status",
+      "aria-live": "polite",
+      children: isHovered ? "Move mouse to parallax" : "Hover to interact"
+    })]
+  });
+});
+
+export { GlassParallaxLayers };
+//# sourceMappingURL=GlassParallaxLayers.js.map

package/dist/esm/components/advanced/GlassParallaxLayers.js.map

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