@shohojdhara/atomix 0.5.0 → 0.5.2

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -1,63 +1,50 @@
-import React, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
+import React, { forwardRef, useId, useRef, useState, useEffect, useMemo } from 'react';
 import type { CSSProperties } from 'react';
-import type { DisplacementMode, MousePosition, GlassSize, AtomixGlassProps } from '../../lib/types/components';
-import type { FragmentShaderType } from './shader-utils';
+import type {
+  DisplacementMode,
+  MousePosition,
+  GlassSize,
+  AtomixGlassProps,
+} from '../../lib/types/components';
+import type { FragmentShaderType, ShaderOptions, Vec2 } from './shader-utils';
 import { GlassFilter } from './GlassFilter';
-import { calculateMouseInfluence, clampBlur, validateGlassSize } from './glass-utils';
+import {
+  calculateMouseInfluence,
+  clampBlur,
+  validateGlassSize,
+  getCachedShader,
+  setCachedShader,
+} from './glass-utils';
 import { ATOMIX_GLASS } from '../../lib/constants/components';
 
 const { CONSTANTS } = ATOMIX_GLASS;
 
-// Module-level counter for deterministic ID generation
-let idCounter = 0;
-
-// Module-level shared shader cache with LRU eviction
-const MAX_CACHE_SIZE = 15;
-interface ShaderCacheEntry {
-  url: string;
-  timestamp: number;
+// ─── Blur multiplier constants (module-level, never change at runtime) ────────
+const EDGE_BLUR_MULTIPLIER = 1.25;
+const CENTER_BLUR_MULTIPLIER = 1.1;
+const FLOW_BLUR_MULTIPLIER = 1.2;
+const MOUSE_INFLUENCE_BLUR_FACTOR = 0.15;
+const EDGE_INTENSITY_MULTIPLIER = 1.5;
+const EDGE_INTENSITY_MOUSE_FACTOR = 0.15;
+const CENTER_INTENSITY_DISTANCE_FACTOR = 0.3;
+const CENTER_INTENSITY_MOUSE_FACTOR = 0.1;
+/** Maximum blur multiplier relative to base — prevents runaway blur. */
+const MAX_BLUR_RELATIVE = 2;
+
+// ─── Shader utility types ─────────────────────────────────────────────────────
+
+interface ShaderGenerator {
+  updateShader(): string;
+  destroy(): void;
 }
-const sharedShaderCache = new Map<string, ShaderCacheEntry>();
-
-/**
- * Get cached shader URL, updating access timestamp
- */
-const getCachedShader = (key: string): string | null => {
-  const entry = sharedShaderCache.get(key);
-  if (entry) {
-    // Update access timestamp for LRU
-    entry.timestamp = Date.now();
-    return entry.url;
-  }
-  return null;
-};
 
-/**
- * Set cached shader URL with LRU eviction
- */
-const setCachedShader = (key: string, url: string): void => {
-  // Evict oldest entries if at capacity
-  if (sharedShaderCache.size >= MAX_CACHE_SIZE) {
-    const entries = Array.from(sharedShaderCache.entries());
-    // Sort by timestamp (oldest first)
-    entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
-    // Remove oldest entry
-    const oldestEntry = entries[0];
-    if (oldestEntry) {
-      sharedShaderCache.delete(oldestEntry[0]);
-    }
-  }
-  sharedShaderCache.set(key, { url, timestamp: Date.now() });
+/** Fragment shader function — signature matches shader-utils.ts */
+type FragmentShaderFn = (uv: Vec2, mousePosition?: Vec2) => Vec2;
 
-  // Development mode: log cache size
-  if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
-    if (sharedShaderCache.size >= MAX_CACHE_SIZE * 0.8) {
-      console.log(
-        `AtomixGlass: Shader cache size: ${String(sharedShaderCache.size).replace(/[\r\n]/g, '')}/${String(MAX_CACHE_SIZE).replace(/[\r\n]/g, '')}`
-      );
-    }
-  }
-};
+interface ShaderUtilsModule {
+  ShaderDisplacementGenerator: new (opts: ShaderOptions) => ShaderGenerator;
+  fragmentShaders: Record<string, FragmentShaderFn>;
+}
 
 interface AtomixGlassContainerProps
   extends Pick<
@@ -101,11 +88,12 @@ interface AtomixGlassContainerProps
   effectiveReducedMotion?: boolean;
   shaderVariant?: FragmentShaderType;
   withLiquidBlur?: boolean;
+  isFixedOrSticky?: boolean;
 
   // Phase 1: Animation System props
   shaderTime?: number;
 
-  contentRef?: React.RefObject<HTMLDivElement>;
+  contentRef?: React.RefObject<HTMLDivElement | null>;
   children?: React.ReactNode;
 }
 
@@ -140,6 +128,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       effectiveReducedMotion = false,
       shaderVariant = 'liquidGlass',
       withLiquidBlur = false,
+      isFixedOrSticky = false,
 
       // Phase 1: Animation System props
       shaderTime,
@@ -155,23 +144,17 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     },
     ref
   ) => {
-    // Generate a stable, deterministic ID for SSR compatibility
-    // Use a module-level counter that's consistent across server and client
-    const filterId = useMemo(() => {
-      return `atomix-glass-filter-${++idCounter}`;
-    }, []);
+    // React 18 useId — stable, unique, and SSR-safe (no module-level counter)
+    const rawId = useId();
+    const filterId = useMemo(() => `atomix-glass-filter-${rawId.replace(/:/g, '')}`, [rawId]);
 
     const [shaderMapUrl, setShaderMapUrl] = useState<string>('');
-    const shaderGeneratorRef = useRef<any>(null);
-    const shaderUtilsRef = useRef<{
-      ShaderDisplacementGenerator: any;
-      fragmentShaders: any;
-    } | null>(null);
+    const shaderGeneratorRef = useRef<ShaderGenerator | null>(null);
+    const shaderUtilsRef = useRef<ShaderUtilsModule | null>(null);
 
-    // Use shared module-level cache (no per-instance cache needed)
     const shaderDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const shaderUpdateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    
+
     // Phase 1: Animation frame ref for continuous shader updates
     const animationFrameRef = useRef<number | null>(null);
 
@@ -228,7 +211,8 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
           try {
             const { ShaderDisplacementGenerator, fragmentShaders } = shaderUtilsRef.current;
             shaderGeneratorRef.current?.destroy();
-            const selectedShader = fragmentShaders[shaderVariant] || fragmentShaders.liquidGlass;
+            const selectedShader = (fragmentShaders[shaderVariant] ??
+              fragmentShaders.liquidGlass) as FragmentShaderFn;
             shaderGeneratorRef.current = new ShaderDisplacementGenerator({
               width: glassSize.width,
               height: glassSize.height,
@@ -236,7 +220,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             });
 
             shaderUpdateTimeoutRef.current = setTimeout(() => {
-              const url = shaderGeneratorRef.current?.updateShader() || '';
+              const url = shaderGeneratorRef.current?.updateShader() ?? '';
               if (url) {
                 setCachedShader(cacheKey, url);
               }
@@ -301,16 +285,18 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
               ? 24
               : 20;
       const effectiveSpeed = Math.max(0.5, Math.min(2, animationSpeed || 1));
-      const complexity =
-        withMultiLayerDistortion
-          ? Math.max(
-              1,
-              (distortionOctaves || 3) / 3 +
-                Math.max(0, (distortionLacunarity || 2) - 2) * 0.25 +
-                Math.max(0, (distortionGain || 0.5) - 0.5)
-            )
-          : 1;
-      const targetFps = Math.max(12, Math.min(60, Math.round((baseFps * effectiveSpeed) / complexity)));
+      const complexity = withMultiLayerDistortion
+        ? Math.max(
+            1,
+            (distortionOctaves || 3) / 3 +
+              Math.max(0, (distortionLacunarity || 2) - 2) * 0.25 +
+              Math.max(0, (distortionGain || 0.5) - 0.5)
+          )
+        : 1;
+      const targetFps = Math.max(
+        12,
+        Math.min(60, Math.round((baseFps * effectiveSpeed) / complexity))
+      );
       const frameInterval = 1000 / targetFps;
       let lastUpdate = 0;
       let isCancelled = false;
@@ -380,18 +366,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       return undefined;
     }, [ref, glassSize]);
 
-    // Pre-calculate static multipliers outside useMemo
-    const EDGE_BLUR_MULTIPLIER = 1.25;
-    const CENTER_BLUR_MULTIPLIER = 1.1;
-    const FLOW_BLUR_MULTIPLIER = 1.2;
-    const MOUSE_INFLUENCE_BLUR_FACTOR = 0.15;
-    const EDGE_INTENSITY_MULTIPLIER = 1.5;
-    const EDGE_INTENSITY_MOUSE_FACTOR = 0.15;
-    const CENTER_INTENSITY_DISTANCE_FACTOR = 0.3;
-    const CENTER_INTENSITY_MOUSE_FACTOR = 0.1;
-    // Maximum blur multiplier relative to base — prevents runaway blur
-    const MAX_BLUR_RELATIVE = 2;
-
     const liquidBlur = useMemo(() => {
       const defaultBlur = {
         baseBlur: blurAmount,
@@ -562,7 +536,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
         } as React.CSSProperties;
       }
     }, [
-    borderRadius,
+      borderRadius,
       backdropStyle,
       mouseOffset,
       overLight,
@@ -573,8 +547,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
     return (
       <div
         ref={el => {
-          // Apply force no-transition
-
           // Handle forwarded ref
           if (typeof ref === 'function') {
             ref(el);

package/src/components/AtomixGlass/PerformanceDashboard.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { memo } from 'react';
 import type { PerformanceMetrics } from '../../lib/composables/usePerformanceMonitor';
 
 interface PerformanceDashboardProps {
@@ -7,213 +7,165 @@ interface PerformanceDashboardProps {
   onClose?: () => void;
 }
 
+/** Map an FPS value to a semantic color token string. */
+const getFpsColor = (fps: number): string => {
+  if (fps >= 58) return 'var(--atomix-color-success, #4ade80)';
+  if (fps >= 45) return 'var(--atomix-color-warning, #fbbf24)';
+  return 'var(--atomix-color-danger, #ef4444)';
+};
+
+/** Map a quality level string to a semantic color token string. */
+const getQualityColor = (quality: string): string => {
+  switch (quality) {
+    case 'high':   return 'var(--atomix-color-success, #4ade80)';
+    case 'medium': return 'var(--atomix-color-warning, #fbbf24)';
+    case 'low':    return 'var(--atomix-color-danger, #ef4444)';
+    default:       return '#9ca3af';
+  }
+};
+
+const getFpsLabel = (fps: number): string => {
+  if (fps >= 58) return 'Optimal';
+  if (fps >= 45) return 'Warning';
+  return 'Critical';
+};
+
+// Keyframes for pulse animation (injected via style tag)
+const keyframesStyle = `
+@keyframes perf-dashboard-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+`;
+
+// Inject keyframes once
+if (typeof document !== 'undefined') {
+  const styleId = 'perf-dashboard-keyframes';
+  if (!document.getElementById(styleId)) {
+    const styleEl = document.createElement('style');
+    styleEl.id = styleId;
+    styleEl.textContent = keyframesStyle;
+    document.head.appendChild(styleEl);
+  }
+}
+
 /**
- * PerformanceDashboard - Real-time performance monitoring overlay
- * 
- * Displays:
- * - Current FPS with color coding
- * - Frame time statistics
- * - Quality level indicator
- * - GPU memory usage (if available)
- * - Auto-scaling status
+ * PerformanceDashboard - Real-time performance monitoring overlay.
+ *
+ * Displays FPS, frame time, quality level, GPU memory, and auto-scaling status.
+ * Rendered only when `debugPerformance={true}` on the parent `AtomixGlass`.
  */
-export const PerformanceDashboard: React.FC<PerformanceDashboardProps> = ({
-  metrics,
-  isVisible = true,
-  onClose
-}) => {
-  // Get color for FPS display
-  const getFpsColor = (fps: number): string => {
-    if (fps >= 58) return '#4ade80'; // Green - good
-    if (fps >= 45) return '#fbbf24'; // Yellow - warning
-    return '#ef4444'; // Red - critical
-  };
-
-  // Get quality level badge color
-  const getQualityColor = (quality: string): string => {
-    switch (quality) {
-      case 'high': return '#4ade80';
-      case 'medium': return '#fbbf24';
-      case 'low': return '#ef4444';
-      default: return '#9ca3af';
-    }
-  };
-
-  // Dashboard styles
-  const dashboardStyle: React.CSSProperties = useMemo(() => ({
-    position: 'fixed',
-    top: '16px',
-    right: '16px',
-    padding: '12px 16px',
-    backgroundColor: 'rgba(17, 24, 39, 0.95)',
-    borderRadius: '8px',
-    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-    fontFamily: 'monospace',
-    fontSize: '12px',
-    color: '#fff',
-    zIndex: 9999,
-    minWidth: '200px',
-    backdropFilter: 'blur(8px)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    transition: 'opacity 0.3s ease',
-    opacity: isVisible ? 1 : 0,
-    pointerEvents: isVisible ? 'auto' : 'none',
-  }), [isVisible]);
-
-  const headerStyle: React.CSSProperties = useMemo(() => ({
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: '8px',
-    paddingBottom: '8px',
-    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
-  }), []);
-
-  const titleStyle: React.CSSProperties = useMemo(() => ({
-    fontWeight: 'bold',
-    fontSize: '13px',
-    color: '#fff',
-  }), []);
-
-  const closeButtonStyle: React.CSSProperties = useMemo(() => ({
-    background: 'transparent',
-    border: 'none',
-    color: '#9ca3af',
-    cursor: 'pointer',
-    fontSize: '16px',
-    padding: '0',
-    lineHeight: '1',
-  }), []);
-
-  const metricRowStyle: React.CSSProperties = useMemo(() => ({
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: '6px',
-  }), []);
-
-  const labelStyle: React.CSSProperties = useMemo(() => ({
-    color: '#9ca3af',
-    marginRight: '12px',
-  }), []);
-
-  const valueStyle: React.CSSProperties = useMemo(() => ({
-    fontWeight: 'bold',
-  }), []);
-
-  if (!isVisible) return null;
-
-  return (
-    <div style={dashboardStyle}>
-      {/* Header */}
-      <div style={headerStyle}>
-        <span style={titleStyle}>Performance Monitor</span>
-        {onClose && (
-          <button 
-            style={closeButtonStyle} 
-            onClick={onClose}
-            aria-label="Close performance dashboard"
-          >
-            ×
-          </button>
-        )}
-      </div>
-
-      {/* FPS Display */}
-      <div style={metricRowStyle}>
-        <span style={labelStyle}>FPS</span>
-        <span 
-          style={{
-            ...valueStyle,
-            color: getFpsColor(metrics.fps)
-          }}
-        >
-          {Math.round(metrics.fps)}
-        </span>
-      </div>
+export const PerformanceDashboard: React.FC<PerformanceDashboardProps> = memo(
+  ({ metrics, isVisible = true, onClose }) => {
+    if (!isVisible) return null;
+
+    const fpsColor = getFpsColor(metrics.fps);
+    const isCritical = metrics.fps < 45;
+
+    return (
+      <div
+        className="c-perf-dashboard u-position-fixed u-top-4 u-end-4 u-p-3 u-px-4 u-text-xs u-font-mono u-text-white u-rounded-md u-border u-border-white-alpha-10 u-shadow-lg"
+        style={{
+          zIndex: 9999,
+          minWidth: '12.5rem', // 200px
+          backgroundColor: 'rgba(17, 24, 39, 0.95)',
+          backdropFilter: 'blur(8px)',
+          transition: 'opacity 0.3s ease',
+        }}
+      >
+        {/* Header */}
+        <div className="u-flex u-items-center u-justify-between u-mb-2 u-pb-2 u-border-b u-border-white-alpha-10">
+          <span className="u-text-sm u-font-bold u-text-white">Performance Monitor</span>
+          {onClose && (
+            <button
+              className="u-bg-transparent u-border-none u-p-0 u-line-height-1 u-text-base u-text-gray-400 u-cursor-pointer hover:u-text-white"
+              onClick={onClose}
+              aria-label="Close performance dashboard"
+              style={{ transition: 'color 0.2s ease' }}
+            >
+              ×
+            </button>
+          )}
+        </div>
 
-      {/* Frame Time */}
-      <div style={metricRowStyle}>
-        <span style={labelStyle}>Frame Time</span>
-        <span style={valueStyle}>
-          {metrics.frameTime.toFixed(2)}ms
-        </span>
-      </div>
+        {/* FPS */}
+        <div className="u-flex u-items-center u-justify-between u-mb-1-5">
+          <span className="u-text-gray-400 u-me-3">FPS</span>
+          <span className="u-font-bold" style={{ color: fpsColor }}>
+            {Math.round(metrics.fps)}
+          </span>
+        </div>
 
-      {/* Quality Level */}
-      <div style={metricRowStyle}>
-        <span style={labelStyle}>Quality</span>
-        <span 
-          style={{
-            ...valueStyle,
-            color: getQualityColor(metrics.qualityLevel),
-            textTransform: 'uppercase',
-            fontSize: '11px',
-          }}
-        >
-          {metrics.qualityLevel}
-        </span>
-      </div>
+        {/* Frame Time */}
+        <div className="u-flex u-items-center u-justify-between u-mb-1-5">
+          <span className="u-text-gray-400 u-me-3">Frame Time</span>
+          <span className="u-font-bold">
+            {metrics.frameTime.toFixed(2)}ms
+          </span>
+        </div>
 
-      {/* GPU Memory (if available) */}
-      {metrics.gpuMemory && (
-        <div style={metricRowStyle}>
-          <span style={labelStyle}>GPU Memory</span>
-          <span style={valueStyle}>
-            ~{Math.round(metrics.gpuMemory / 1024)}MB
+        {/* Quality Level */}
+        <div className="u-flex u-items-center u-justify-between u-mb-1-5">
+          <span className="u-text-gray-400 u-me-3">Quality</span>
+          <span
+            className="u-font-bold u-text-uppercase"
+            style={{ 
+              fontSize: '0.6875rem', // 11px
+              color: getQualityColor(metrics.qualityLevel) 
+            }}
+          >
+            {metrics.qualityLevel}
           </span>
         </div>
-      )}
-
-      {/* Auto-scaling Status */}
-      {metrics.isAutoScaling && (
-        <div style={{
-          marginTop: '8px',
-          paddingTop: '8px',
-          borderTop: '1px solid rgba(255, 255, 255, 0.1)',
-          fontSize: '10px',
-          color: '#6b7280',
-          textAlign: 'center',
-        }}>
-          Auto-scaling active
+
+        {/* GPU Memory (if available) */}
+        {metrics.gpuMemory && (
+          <div className="u-flex u-items-center u-justify-between u-mb-1-5">
+            <span className="u-text-gray-400 u-me-3">GPU Memory</span>
+            <span className="u-font-bold">
+              ~{Math.round(metrics.gpuMemory / 1024)}MB
+            </span>
+          </div>
+        )}
+
+        {/* Auto-scaling notice */}
+        {metrics.isAutoScaling && (
+          <div
+            className="u-mt-2 u-pt-2 u-border-t u-border-white-alpha-10 u-text-center"
+            style={{ 
+              fontSize: '0.625rem', // 10px
+              color: '#6b7280',
+            }}
+          >
+            Auto-scaling active
+          </div>
+        )}
+
+        {/* Status indicator */}
+        <div className="u-flex u-items-center u-gap-2 u-mt-2 u-pt-2 u-border-t u-border-white-alpha-10">
+          <div
+            className="u-rounded-full"
+            style={{
+              width: '0.5rem',
+              height: '0.5rem',
+              flexShrink: 0,
+              backgroundColor: fpsColor,
+              ...(isCritical && { animation: 'perf-dashboard-pulse 1s infinite' }),
+            }}
+          />
+          <span
+            className="u-text-xs"
+            style={{ 
+              fontSize: '0.625rem', // 10px
+              color: fpsColor 
+            }}
+          >
+            {getFpsLabel(metrics.fps)}
+          </span>
         </div>
-      )}
-
-      {/* Performance Status Indicator */}
-      <div style={{
-        marginTop: '8px',
-        paddingTop: '8px',
-        borderTop: '1px solid rgba(255, 255, 255, 0.1)',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '6px',
-      }}>
-        <div style={{
-          width: '8px',
-          height: '8px',
-          borderRadius: '50%',
-          backgroundColor: getFpsColor(metrics.fps),
-          animation: metrics.fps < 45 ? 'pulse 1s infinite' : 'none',
-        }} />
-        <span style={{
-          fontSize: '10px',
-          color: metrics.fps >= 58 ? '#4ade80' : metrics.fps >= 45 ? '#fbbf24' : '#ef4444',
-        }}>
-          {metrics.fps >= 58 ? 'Optimal' : metrics.fps >= 45 ? 'Warning' : 'Critical'}
-        </span>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
 
-// Add pulse animation for critical FPS
-if (typeof document !== 'undefined') {
-  const styleSheet = document.createElement('style');
-  styleSheet.textContent = `
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-  `;
-  document.head.appendChild(styleSheet);
-}
+PerformanceDashboard.displayName = 'PerformanceDashboard';