aura-glass/dist/esm/components/layout/OptimizedGlassContainer.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useState, useEffect, useRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
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 { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { useA11yId } from '../../utils/a11y.js';

// Types
var OptimizationLevel;
(function (OptimizationLevel) {
  OptimizationLevel["NONE"] = "none";
  OptimizationLevel["LIGHT"] = "light";
  OptimizationLevel["MODERATE"] = "moderate";
  OptimizationLevel["HEAVY"] = "heavy";
  OptimizationLevel["MAXIMUM"] = "heavy";
  OptimizationLevel["AGGRESSIVE"] = "heavy";
})(OptimizationLevel || (OptimizationLevel = {}));
// Performance monitoring hook
const usePerformanceMonitoring = (targetFps, checkInterval, threshold) => {
  const [currentFps, setCurrentFps] = useState(60);
  const [performanceScore, setPerformanceScore] = useState(1);
  const frameCountRef = useRef(0);
  const lastTimeRef = useRef(performance.now());
  useEffect(() => {
    let animationFrame;
    const measureFps = () => {
      const now = performance.now();
      frameCountRef.current++;
      if (now - lastTimeRef.current >= checkInterval) {
        const fps = frameCountRef.current * 1000 / (now - lastTimeRef.current);
        setCurrentFps(fps);
        setPerformanceScore(fps / targetFps);
        frameCountRef.current = 0;
        lastTimeRef.current = now;
      }
      animationFrame = requestAnimationFrame(measureFps);
    };
    animationFrame = requestAnimationFrame(measureFps);
    return () => {
      if (animationFrame) {
        cancelAnimationFrame(animationFrame);
      }
    };
  }, [targetFps, checkInterval]);
  return {
    currentFps,
    performanceScore
  };
};
/**
 * OptimizedGlassContainer Component
 * A container that automatically adjusts glass effects based on performance
 */
const OptimizedGlassContainer = /*#__PURE__*/forwardRef(({
  // TODO: Integrate ContrastGuard for any section titles, labels, and helper text for WCAG AA compliance
  children,
  initialOptimizationLevel = "none",
  autoOptimize = true,
  performanceThreshold = 0.8,
  glassIntensity = 0.6,
  className,
  style,
  targetFps = 60,
  checkInterval = 1000,
  showIndicator = false,
  preferReducedMotion,
  preserveBlur = true,
  onOptimizationChange,
  maxOptimizationLevel = "heavy",
  "aria-label": ariaLabel = "Optimized glass container",
  role = "region",
  ...props
}, ref) => {
  const [optimizationLevel, setOptimizationLevel] = useState(initialOptimizationLevel);
  const prefersReducedMotion = useReducedMotion();
  const shouldReduceMotion = preferReducedMotion ?? prefersReducedMotion;
  const containerId = useA11yId();
  // Performance monitoring
  const {
    currentFps,
    performanceScore
  } = usePerformanceMonitoring(targetFps, checkInterval);
  // Auto optimization logic
  useEffect(() => {
    if (!autoOptimize) return;
    const maxLevelIndex = ["none", "light", "moderate", "heavy"].indexOf(maxOptimizationLevel);
    let newLevel = optimizationLevel;
    if (performanceScore < performanceThreshold) {
      // Performance is poor, increase optimization
      const currentIndex = ["none", "light", "moderate", "heavy"].indexOf(optimizationLevel);
      if (currentIndex < maxLevelIndex) {
        newLevel = ["none", "light", "moderate", "heavy"][currentIndex + 1];
      }
    } else if (performanceScore > performanceThreshold + 0.1) {
      // Performance is good, reduce optimization
      const currentIndex = ["none", "light", "moderate", "heavy"].indexOf(optimizationLevel);
      if (currentIndex > 0) {
        newLevel = ["none", "light", "moderate", "heavy"][currentIndex - 1];
      }
    }
    if (newLevel !== optimizationLevel) {
      setOptimizationLevel(newLevel);
      onOptimizationChange?.(newLevel);
    }
  }, [autoOptimize, performanceScore, performanceThreshold, optimizationLevel, maxOptimizationLevel, onOptimizationChange]);
  // Map optimization level to glass properties
  const getGlassProps = () => {
    const baseIntensity = shouldReduceMotion ? "subtle" : "medium";
    switch (optimizationLevel) {
      case "none":
        return {
          intensity: "ultra",
          performanceMode: "ultra",
          animation: shouldReduceMotion ? "none" : "float",
          depth: 4
        };
      case "light":
        return {
          intensity: "strong",
          performanceMode: "high",
          animation: shouldReduceMotion ? "none" : "gentle",
          depth: 3
        };
      case "moderate":
        return {
          intensity: baseIntensity,
          performanceMode: "medium",
          animation: "none",
          depth: 2
        };
      case "heavy":
        return {
          intensity: "subtle",
          performanceMode: "low",
          animation: "none",
          depth: 1
        };
      default:
        return {
          intensity: baseIntensity,
          performanceMode: "medium",
          animation: shouldReduceMotion ? "none" : "gentle",
          depth: 2
        };
    }
  };
  const glassProps = getGlassProps();
  // Performance indicator component
  const PerformanceIndicator = () => {
    if (!showIndicator) return null;
    const getIndicatorColor = () => {
      if (performanceScore >= 0.9) return "text-green-400";
      if (performanceScore >= 0.7) return "text-yellow-400";
      return "text-red-400";
    };
    return jsxs("div", {
      className: 'absolute glass-top-2 right-2 z-50 glass-surface-dark/50 text-primary glass-p-2 glass-radius-md glass-text-xs font-mono',
      children: [jsxs("div", {
        children: ["FPS:", " ", jsx("span", {
          className: getIndicatorColor(),
          children: Math.round(currentFps)
        })]
      }), jsxs("div", {
        children: ["Level: ", jsx("span", {
          className: 'text-primary',
          children: optimizationLevel
        })]
      }), jsxs("div", {
        children: ["Score:", " ", jsxs("span", {
          className: getIndicatorColor(),
          children: [(performanceScore * 100).toFixed(0), "%"]
        })]
      })]
    });
  };
  return jsxs(OptimizedGlassCore, {
    ref: ref,
    id: containerId,
    intent: "neutral",
    elevation: "level2",
    intensity: glassProps.intensity,
    depth: glassProps.depth,
    tint: "neutral",
    border: "subtle",
    animation: glassProps.animation,
    performanceMode: glassProps.performanceMode,
    role: role,
    "aria-label": ariaLabel,
    "aria-live": showIndicator ? "polite" : undefined,
    "aria-atomic": showIndicator ? "true" : undefined,
    className: cn("relative",
    // Apply different styling based on optimization level
    {
      "glass-backdrop-blur-xl": optimizationLevel === "none" && preserveBlur,
      "glass-backdrop-blur-lg": optimizationLevel === "light" && preserveBlur,
      "glass-backdrop-blur-md": optimizationLevel === "moderate" && preserveBlur,
      "glass-backdrop-blur-sm": optimizationLevel === "heavy" && preserveBlur
    }, className),
    style: {
      // Adjust opacity based on glass intensity and optimization level
      "--glass-opacity": glassIntensity * (optimizationLevel === "heavy" ? 0.5 : 1),
      ...style
    },
    ...props,
    children: [jsx(PerformanceIndicator, {}), children]
  });
});
OptimizedGlassContainer.displayName = "OptimizedGlassContainer";

export { OptimizationLevel, OptimizedGlassContainer, OptimizedGlassContainer as default };
//# sourceMappingURL=OptimizedGlassContainer.js.map