@shohojdhara/atomix 0.6.5 → 0.6.6

package/src/lib/composables/usePerformanceMonitor.ts

@@ -385,69 +385,3 @@ export function usePerformanceMonitor(
     toggleMonitoring,
   };
 }
-
-/**
- * Debug Overlay Component (Optional)
- * 
- * Shows real-time performance metrics on screen.
- * Only rendered when showOverlay is enabled.
- */
-export function PerformanceOverlay({ metrics }: { metrics: PerformanceMetrics }) {
-  if (typeof window === 'undefined') return null;
-
-  const overlayStyle: React.CSSProperties = {
-    position: 'fixed',
-    top: '10px',
-    right: '10px',
-    padding: '10px',
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    color: '#fff',
-    fontFamily: 'monospace',
-    fontSize: '12px',
-    borderRadius: '4px',
-    zIndex: 9999,
-    pointerEvents: 'none',
-    minWidth: '150px',
-  };
-
-  const getFpsColor = (fps: number) => {
-    if (fps >= 58) return '#4ade80'; // Green
-    if (fps >= 45) return '#fbbf24'; // Yellow
-    return '#ef4444'; // Red
-  };
-
-  // Performance overlay removed - will be implemented as separate component
-  return null;
-}
-
-/**
- * Utility to get quality multipliers for glass parameters
- */
-export function getQualityMultipliers(quality: 'low' | 'medium' | 'high') {
-  switch (quality) {
-    case 'low':
-      return {
-        distortionOctaves: 2,
-        displacementScale: 0.6,
-        blurAmount: 0.7,
-        animationSpeed: 0.8,
-        chromaticIntensity: 0.5,
-      };
-    case 'medium':
-      return {
-        distortionOctaves: 4,
-        displacementScale: 0.85,
-        blurAmount: 0.9,
-        animationSpeed: 0.95,
-        chromaticIntensity: 0.75,
-      };
-    case 'high':
-      return {
-        distortionOctaves: 5,
-        displacementScale: 1.0,
-        blurAmount: 1.0,
-        animationSpeed: 1.0,
-        chromaticIntensity: 1.0,
-      };
-  }
-}

package/src/lib/constants/components.ts

@@ -2015,6 +2015,11 @@ export const ATOMIX_GLASS = {
     MIN_BLUR: 0.1,
     MOUSE_INFLUENCE_DIVISOR: 100,
     EDGE_FADE_PIXELS: 2,
+    // Interaction intensity multipliers shared by the hook and the imperative style updater
+    INTERACTION: {
+      HOVER_INTENSITY: 1.4,
+      ACTIVE_INTENSITY: 1.6,
+    },
     // Elasticity physics constants — Apple-tuned: soft springs, fast settling, minimal stretch
     ELASTICITY_TRANSLATION_FACTOR: 0.06, // Subtler elastic shift (was 0.1)
     ELASTICITY_DISTANCE_THRESHOLD: 200,
@@ -2131,7 +2136,7 @@ export const ATOMIX_GLASS = {
     // Container shadows — hairline inner catch + soft floating lift (Apple player bar)
     CONTAINER_SHADOW: {
       LIGHT:
-        'inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16)',
+        'inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08)',
     },
 
     // Phase 1: Animation System Constants

package/src/styles/01-settings/_settings.atomix-glass.scss

@@ -29,8 +29,8 @@ $glass-border-1-opacity: 0.08 !default;
 
 // Rim shadow tokens (inset hairline + inner catch + outer lift)
 $glass-border-color: rgba(255, 255, 255, 0.28) !default;
-$glass-inner-shadow-color: rgba(255, 255, 255, 0.30) !default;
-$glass-outer-shadow-color: rgba(0, 0, 0, 0.18) !default;
+$glass-inner-shadow-color: rgba(255, 255, 255, 0.20) !default;
+$glass-outer-shadow-color: rgba(0, 0, 0, 0.08) !default;
 
 // Border-only backdrop (ring sampling)
 $glass-border-backdrop-blur: 40px !default;

package/src/styles/02-tools/_tools.button.scss

@@ -65,54 +65,63 @@
   $active-border: null
 ) {
   $btn-color: var(--#{config.$prefix}#{$color}, #{map.get(tokens.$theme-colors, $color)});
-  $btn-hover-color: if(
-    $color-hover,
-    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}),
-    var(--#{config.$prefix}white, #{colors.$white})
+  $btn-hover-color: var(--#{config.$prefix}white, #{colors.$white});
+  $btn-hover-bg: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -15%)}
   );
-  $btn-hover-bg: if(
-    $hover-background,
-    var(
-      --#{config.$prefix}#{$hover-background},
-      #{map.get(tokens.$theme-colors, $hover-background)}
-    ),
-    var(
-      --#{config.$prefix}#{$color}-hover,
-      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -15%)}
-    )
+  $btn-hover-border: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -10%)}
   );
-  $btn-hover-border: if(
-    $hover-border,
-    var(--#{config.$prefix}#{$hover-border}, #{map.get(tokens.$theme-colors, $hover-border)}),
-    var(
-      --#{config.$prefix}#{$color}-hover,
-      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -10%)}
-    )
+  $btn-active-color: var(--#{config.$prefix}white, #{colors.$white});
+  $btn-active-bg: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -20%)}
   );
-  $btn-active-color: if(
-    $color-hover,
-    var(--#{config.$prefix}#{$color-hover}, #{map.get(tokens.$theme-colors, $color-hover)}),
-    var(--#{config.$prefix}white, #{colors.$white})
+  $btn-active-border: var(
+    --#{config.$prefix}#{$color}-hover,
+    #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -25%)}
   );
-  $btn-active-bg: if(
-    $active-background,
-    var(
+
+  @if $color-hover {
+    $btn-hover-color: var(
+      --#{config.$prefix}#{$color-hover},
+      #{map.get(tokens.$theme-colors, $color-hover)}
+    );
+    $btn-active-color: var(
+      --#{config.$prefix}#{$color-hover},
+      #{map.get(tokens.$theme-colors, $color-hover)}
+    );
+  }
+
+  @if $hover-background {
+    $btn-hover-bg: var(
+      --#{config.$prefix}#{$hover-background},
+      #{map.get(tokens.$theme-colors, $hover-background)}
+    );
+  }
+
+  @if $hover-border {
+    $btn-hover-border: var(
+      --#{config.$prefix}#{$hover-border},
+      #{map.get(tokens.$theme-colors, $hover-border)}
+    );
+  }
+
+  @if $active-background {
+    $btn-active-bg: var(
       --#{config.$prefix}#{$active-background},
       #{map.get(tokens.$theme-colors, $active-background)}
-    ),
-    var(
-      --#{config.$prefix}#{$color}-hover,
-      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -20%)}
-    )
-  );
-  $btn-active-border: if(
-    $active-border,
-    var(--#{config.$prefix}#{$active-border}, #{map.get(tokens.$theme-colors, $active-border)}),
-    var(
-      --#{config.$prefix}#{$color}-hover,
-      #{color.scale(map.get(tokens.$theme-colors, $color), $lightness: -25%)}
-    )
-  );
+    );
+  }
+
+  @if $active-border {
+    $btn-active-border: var(
+      --#{config.$prefix}#{$active-border},
+      #{map.get(tokens.$theme-colors, $active-border)}
+    );
+  }
 
   --#{config.$prefix}btn-color: #{$btn-color};
   --#{config.$prefix}btn-bg: transparent;

package/src/styles/06-components/_components.atomix-glass.scss

@@ -76,8 +76,8 @@
 
   --atomix-glass-border-shadow:
     0 0 0 0.5px var(--atomix-glass-border-color, #{$glass-border-color}) inset,
-    0 1px 2px var(--atomix-glass-inner-shadow-color, #{$glass-inner-shadow-color}) inset,
-    0 2px 6px var(--atomix-glass-outer-shadow-color, #{$glass-outer-shadow-color});
+    0 1px 1px var(--atomix-glass-inner-shadow-color, #{$glass-inner-shadow-color}) inset,
+    0 1px 3px var(--atomix-glass-outer-shadow-color, #{$glass-outer-shadow-color});
 
   // ── Over-light decorative layers (base, overlay) ─────────────────────────
   // These use var-based positioning so they correctly follow the container in

package/src/components/AtomixGlass/PerformanceDashboard.tsx

@@ -1,171 +0,0 @@
-import React, { memo } from 'react';
-import type { PerformanceMetrics } from '../../lib/composables/usePerformanceMonitor';
-
-interface PerformanceDashboardProps {
-  metrics: PerformanceMetrics;
-  isVisible?: boolean;
-  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 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> = 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>
-
-        {/* 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>
-
-        {/* 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>
-
-        {/* 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>
-
-        {/* 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>
-      </div>
-    );
-  }
-);
-
-PerformanceDashboard.displayName = 'PerformanceDashboard';