@shohojdhara/atomix 0.6.4 → 0.6.6

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/02-tools/_tools.glass.scss

@@ -1,6 +1,48 @@
 // AtomixGlass Tools
 // =============================================================================
-// Glass-specific mixins and utilities
-// Note: Focus ring and other general mixins are available in tools.component
+// Liquid glass border ring mixins
 
-@use 'tools.component' as *;
+@use '../01-settings/settings.atomix-glass' as *;
+
+/// Shared geometry for border effect layers (backdrop + gradient rings).
+@mixin liquid-glass-border-layer {
+  display: block;
+  box-sizing: border-box;
+  pointer-events: none;
+  position: var(--atomix-glass-position);
+  top: var(--atomix-glass-top);
+  left: var(--atomix-glass-left);
+  right: var(--atomix-glass-right);
+  bottom: var(--atomix-glass-bottom);
+  width: var(--atomix-glass-width);
+  height: var(--atomix-glass-height);
+  border-radius: var(--_glass-radius);
+  transform: var(--_glass-transform);
+  transition: var(--_glass-transition);
+}
+
+/// Hollow ring mask — clips content to the border band only (padding-box XOR border-box).
+/// Do not set overflow: hidden here; it breaks mask-composite at rounded corners.
+@mixin liquid-glass-border-ring-mask {
+  padding: var(--atomix-glass-border-width, #{$glass-border-width});
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+}
+
+/// Gradient / painted rim — mask ring + background (conic or JS linear-gradient).
+@mixin liquid-glass-border-painted-ring {
+  @include liquid-glass-border-layer;
+  @include liquid-glass-border-ring-mask;
+}
+
+/// Backdrop sampling ring — same mask geometry, backdrop-filter on the band only.
+@mixin liquid-glass-border-backdrop-ring {
+  @include liquid-glass-border-layer;
+  @include liquid-glass-border-ring-mask;
+}

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

@@ -3,6 +3,28 @@
 
 @use '../01-settings/settings.atomix-glass' as *;
 @use '../02-tools/tools.component' as *;
+@use '../02-tools/tools.glass' as glass;
+
+// ─── @property registrations ─────────────────────────────────────────────────
+// Typed custom properties let the browser interpolate these values in
+// CSS transitions without needing JS class-toggling.
+@property --atomix-glass-hover-1-opacity {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --atomix-glass-hover-2-opacity {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --atomix-glass-hover-3-opacity {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
 
 .c-atomix-glass {
   position: relative;
@@ -10,9 +32,11 @@
   // Local, sane defaults (kept minimal)
   --_glass-radius: var(--atomix-glass-radius, var(--atomix-radius-md, 0.75rem));
   --_glass-transform: var(--atomix-glass-transform, translateZ(0));
+  --_glass-backdrop: #{$glass-backdrop-filter};
 
   --atomix-glass-position: absolute;
-  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem);
+  --atomix-glass-border-width: #{$glass-border-width};
+  --atomix-glass-border-backdrop-filter: #{$glass-border-backdrop-filter};
   --atomix-glass-top: 0;
   --atomix-glass-left: 0;
   --atomix-glass-right: auto;
@@ -52,13 +76,12 @@
 
   --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});
 
-  // Base layer styles for effect layers
-  &__hover-1,
-  &__hover-2,
-  &__hover-3,
+  // ── Over-light decorative layers (base, overlay) ─────────────────────────
+  // These use var-based positioning so they correctly follow the container in
+  // fixed / sticky layouts where the container may have explicit pixel offsets.
   &__base,
   &__overlay {
     position: var(--atomix-glass-position);
@@ -72,65 +95,74 @@
     border-radius: var(--_glass-radius);
     transform: var(--_glass-transform);
     transition: var(--_glass-transition);
-  }
-
-  &__hover-1,
-  &__hover-2,
-  &__hover-3 {
-    z-index: var(--_glass-z-hover);
-  }
-
-  &__base,
-  &__overlay {
     z-index: var(--_glass-z-effect);
   }
 
-  // Interactive hover effects
+  // ── Interactive hover / press layers ─────────────────────────────────────
+  // Always fill the glass surface with inset: 0.  Move in sync with the
+  // elastic spring via the shared --atomix-glass-transform var.
+  // Opacity is driven via typed @property vars so CSS transitions interpolate.
   &__hover-1,
   &__hover-2,
   &__hover-3 {
-    mix-blend-mode: overlay;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: var(--_glass-radius);
+    transform: var(--_glass-transform);
+    // Opacity transition — works because @property declares the var as <number>
+    transition:
+      opacity #{$glass-transition-duration} #{$glass-easing},
+      border-radius #{$glass-transition-duration} #{$glass-easing};
+    z-index: var(--_glass-z-hover);
   }
 
+  // hover-1: ambient cursor-tracking highlight (white overlay glow)
   &__hover-1 {
     opacity: var(--atomix-glass-hover-1-opacity, 0);
+    mix-blend-mode: overlay;
     background: var(
       --atomix-glass-hover-1-gradient,
       radial-gradient(
-        60% 60% at 50% 0%,
-        var(--atomix-glass-hover-1-start-color, #{$glass-hover-1-start-color}) 0%,
-        var(--atomix-glass-hover-1-end-color, #{$glass-hover-1-end-color}) 60%
+        65% 55% at 50% 30%,
+        rgba(255, 255, 255, 0.22) 0%,
+        rgba(255, 255, 255, 0) 72%
       )
     );
   }
 
+  // hover-2: press depth — subtle shadow at the press point (darken only on active)
   &__hover-2 {
     opacity: var(--atomix-glass-hover-2-opacity, 0);
+    mix-blend-mode: multiply;
     background: var(
       --atomix-glass-hover-2-gradient,
       radial-gradient(
-        80% 80% at 50% 100%,
-        var(--atomix-glass-hover-2-start-color, #{$glass-hover-2-start-color}) 0%,
-        var(--atomix-glass-hover-2-end-color, #{$glass-hover-2-end-color}) 60%
+        70% 60% at 50% 60%,
+        rgba(0, 0, 0, 0.18) 0%,
+        rgba(0, 0, 0, 0) 72%
       )
     );
   }
 
+  // hover-3: global soft-light tint shift — full surface brightness on hover/press
   &__hover-3 {
     opacity: var(--atomix-glass-hover-3-opacity, 0);
+    mix-blend-mode: soft-light;
     background: var(
       --atomix-glass-hover-3-gradient,
       linear-gradient(
-        180deg,
-        var(--atomix-glass-hover-3-start-color, #{$glass-hover-3-start-color}) 0%,
-        var(--atomix-glass-hover-3-end-color, #{$glass-hover-3-end-color}) 100%
+        160deg,
+        rgba(255, 255, 255, 0.12) 0%,
+        rgba(255, 255, 255, 0.04) 55%,
+        rgba(255, 255, 255, 0) 100%
       )
     );
   }
 
   &__base {
     mix-blend-mode: soft-light;
-    opacity: var(--atomix-glass-base-opacity, 0.6);
+    opacity: var(--atomix-glass-base-opacity, #{$glass-base-opacity});
     background: var(
       --atomix-glass-base-gradient,
       linear-gradient(
@@ -143,7 +175,7 @@
 
   &__overlay {
     mix-blend-mode: overlay;
-    opacity: var(--atomix-glass-overlay-opacity, 0.35);
+    opacity: var(--atomix-glass-overlay-opacity, #{$glass-overlay-opacity});
     background: var(
       --atomix-glass-overlay-gradient,
       radial-gradient(
@@ -164,69 +196,59 @@
     transition: var(--_glass-transition);
     mix-blend-mode: screen;
     z-index: var(--_glass-z-overlay-highlight);
-    opacity: var(--atomix-glass-overlay-highlight-opacity, 0.25);
+    opacity: var(--atomix-glass-overlay-highlight-opacity, #{$glass-overlay-highlight-opacity});
     background: var(
       --atomix-glass-overlay-highlight-bg,
-      linear-gradient(
-        180deg,
+      radial-gradient(
+        90% 55% at 50% 0%,
         var(--atomix-glass-highlight-start-color, #{$glass-highlight-start-color}) 0%,
-        var(--atomix-glass-highlight-end-color, #{$glass-highlight-end-color}) 60%
+        var(--atomix-glass-highlight-end-color, #{$glass-highlight-end-color}) 72%
       )
     );
   }
 
-  // Border effect layers - matching old version exactly
-  &__border-backdrop,
-  &__border-1,
-  &__border-2 {
-    // Static styles
-    padding: var(--atomix-glass-border-width);
-    box-sizing: border-box;
-    overflow: hidden;
-    pointer-events: none;
-    /* autoprefixer: ignore next */
-    -webkit-mask:
-      linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
-      linear-gradient(var(--atomix-black, #000000) 0 0);
-    /* autoprefixer: ignore next */
-    -webkit-mask-composite: xor;
-    /* autoprefixer: ignore next */
-    mask:
-      linear-gradient(var(--atomix-black, #000000) 0 0) content-box,
-      linear-gradient(var(--atomix-black, #000000) 0 0);
-    /* autoprefixer: ignore next */
-    mask-composite: exclude;
-
-    position: var(--atomix-glass-position);
-    top: var(--atomix-glass-top);
-    left: var(--atomix-glass-left);
-    right: var(--atomix-glass-right);
-    bottom: var(--atomix-glass-bottom);
-    width: var(--atomix-glass-width);
-    height: var(--atomix-glass-height);
-    border-radius: var(--_glass-radius);
-    transform: var(--_glass-transform);
-    transition: var(--_glass-transition);
-  }
-
+  // Border effect layers — liquid glass rim (see tools.glass mixins)
   &__border-backdrop {
-    mix-blend-mode: overlay;
+    @include glass.liquid-glass-border-backdrop-ring;
+
+    mix-blend-mode: #{$glass-border-backdrop-blend-mode};
     z-index: var(--_glass-z-border-1);
-    backdrop-filter: #{$glass-backdrop-filter};
-    // box-shadow: var(--atomix-glass-border-shadow);
+    backdrop-filter: var(--atomix-glass-border-backdrop-filter, #{$glass-border-backdrop-filter});
+    box-shadow: var(--atomix-glass-border-shadow);
   }
 
   &__border-1 {
-    opacity: var(--atomix-glass-border-1-opacity, var(--atomix-opacity-18, 0.18));
-    mix-blend-mode: screen;
+    @include glass.liquid-glass-border-painted-ring;
+
+    background: var(--atomix-glass-border-gradient-1, #{$glass-border-fallback-rim});
+    opacity: var(--atomix-glass-border-1-opacity, #{$glass-border-1-opacity});
+    mix-blend-mode: #{$glass-border-1-blend-mode};
     z-index: var(--_glass-z-border-2);
-    background: var(--atomix-glass-border-gradient-1, none);
   }
 
   &__border-2 {
-    mix-blend-mode: overlay;
+    @include glass.liquid-glass-border-painted-ring;
+
+    background: var(--atomix-glass-border-gradient-2, #{$glass-border-fallback-inner-highlight});
+    mix-blend-mode: #{$glass-border-2-blend-mode};
     z-index: var(--_glass-z-border-3);
-    background: var(--atomix-glass-border-gradient-2, none);
+  }
+
+  // Over-light: darker conic rim + brighter top-left inner catch
+  &:has(.c-atomix-glass__container--over-light) {
+    .c-atomix-glass__border-1 {
+      background: var(
+        --atomix-glass-border-gradient-1,
+        #{$glass-border-fallback-rim-over-light}
+      );
+    }
+
+    .c-atomix-glass__border-2 {
+      background: var(
+        --atomix-glass-border-gradient-2,
+        #{$glass-border-fallback-inner-over-light}
+      );
+    }
   }
 
   &__container {
@@ -274,7 +296,7 @@
     position: absolute;
     inset: var(--atomix-glass-border-width);
     pointer-events: none;
-    border-radius: var(--_glass-radius);
+    border-radius: max(0px, calc(var(--_glass-radius) - var(--atomix-glass-border-width)));
     box-shadow: var(--atomix-glass-container-shadow);
     opacity: var(--atomix-glass-container-shadow-opacity);
     background: var(--atomix-glass-container-bg);
@@ -345,17 +367,30 @@
   &--disabled-effects {
     --atomix-glass-transform: none;
     --atomix-glass-transition: none;
+    --_glass-transition: none;
   }
 
-  // Focus ring for interactive elements (when onClick is provided)
+  // ── Interactive glass (onClick provided) ─────────────────────────────────
   &[role='button'],
   &[tabindex]:not([tabindex='-1']) {
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+
     @include focus-ring;
+
+    // CSS-level press scale fires instantly on :active (before the JS spring
+    // takes over) for zero-latency tactile feedback.
+    &:active > .c-atomix-glass__container {
+      transform: scale(0.985);
+      transition: transform 0.06s cubic-bezier(0.4, 0, 1, 1);
+    }
   }
 
   // Responsive and accessibility
   @media (prefers-reduced-motion: reduce) {
     --atomix-glass-transition: none;
+    --_glass-transition: none;
 
     * {
       transition: none !important;
@@ -363,6 +398,8 @@
   }
 
   @media (prefers-contrast: high) {
-    border-width: var(--atomix-spacing-0-5, 0.125rem);
+    border: var(--atomix-spacing-0-5, 0.125rem) solid currentColor;
+    outline: var(--atomix-spacing-0-5, 0.125rem) solid transparent;
+    outline-offset: var(--atomix-spacing-0-5, 0.125rem);
   }
 }

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';