@checkstack/ui 1.3.3 → 1.3.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @checkstack/ui
 
+## 1.3.5
+
+### Patch Changes
+
+- 286491a: Added automatic FPS detection that enables "Low Power Mode" once for devices running below 50 FPS, ensuring smooth performance even for users unaware of the manual toggle.
+
+## 1.3.4
+
+### Patch Changes
+
+- 692c717: Increased the brightness and color intensity of the AmbientBackground auroras to ensure high visibility through the 1px grid lines.
+
 ## 1.3.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {

package/src/components/AmbientBackground.tsx

@@ -24,35 +24,19 @@ export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({
     return (
       <>
         <div
-          className="aurora-blob absolute w-[50%] h-[50%] -top-[10%] -left-[10%]"
+          className="aurora-blob absolute w-[100%] h-[100%] -top-[40%] -left-[20%]"
           style={{
             background:
-              "radial-gradient(circle at center, hsl(var(--primary) / 0.8), transparent 60%)",
-            animation: "aurora-float-1 25s ease-in-out infinite",
+              "radial-gradient(circle at center, hsl(var(--primary) / 0.9) 0%, hsl(var(--primary) / 0.3) 50%, transparent 90%)",
+            animation: "aurora-float-1 60s ease-in-out infinite",
           }}
         />
         <div
-          className="aurora-blob absolute w-[40%] h-[40%] bottom-[10%] right-[10%]"
+          className="aurora-blob absolute w-[90%] h-[90%] -bottom-[30%] -right-[20%]"
           style={{
             background:
-              "radial-gradient(circle at center, hsl(var(--chart-2) / 0.7), transparent 60%)",
-            animation: "aurora-float-2 20s ease-in-out infinite",
-          }}
-        />
-        <div
-          className="aurora-blob absolute w-[35%] h-[35%] top-[30%] left-[40%]"
-          style={{
-            background:
-              "radial-gradient(circle at center, hsl(var(--primary) / 0.6), transparent 60%)",
-            animation: "aurora-float-3 30s ease-in-out infinite",
-          }}
-        />
-        <div
-          className="aurora-blob absolute w-[45%] h-[45%] bottom-[20%] left-[10%]"
-          style={{
-            background:
-              "radial-gradient(circle at center, hsl(var(--chart-1) / 0.5), transparent 60%)",
-            animation: "aurora-float-4 35s ease-in-out infinite",
+              "radial-gradient(circle at center, hsl(var(--chart-2) / 0.8) 0%, hsl(var(--chart-2) / 0.2) 50%, transparent 90%)",
+            animation: "aurora-float-2 50s ease-in-out infinite",
           }}
         />
       </>
@@ -67,8 +51,10 @@ export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({
       )}
     >
       <div className="pointer-events-none fixed inset-0 overflow-hidden">
-        {/* Layer 1: Aurora Blobs (Bottom) */}
-        {auroraBlobs}
+        {/* Layer 1: Aurora Blobs (Bottom) - Centered in content area */}
+        <div className="max-w-7xl mx-auto h-full relative">
+          {auroraBlobs}
+        </div>
 
         {/* Layer 2: Grid Mask - Switches mode based on performance capability */}
         <div

package/src/components/PerformanceProvider.tsx

@@ -1,9 +1,10 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
+import { useToast } from "./ToastProvider";
 
 const STORAGE_KEY = "checkstack-low-power";
 
 interface PerformanceContextValue {
-  /** 
+  /**
    * Whether the application should run in low-power mode.
    * Derived from (manualLowPower || prefersReducedMotion).
    */
@@ -38,9 +39,13 @@ interface PerformanceProviderProps {
  * Supports manual override (persisted to localStorage) and respects OS-level
  * Reduced Motion preferences.
  */
-export const PerformanceProvider: React.FC<PerformanceProviderProps> = ({ children }) => {
+export const PerformanceProvider: React.FC<PerformanceProviderProps> = ({
+  children,
+}) => {
+  const toast = useToast();
   const [manualLowPower, setManualLowPower] = useState<boolean>(false);
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState<boolean>(false);
+  const [prefersReducedMotion, setPrefersReducedMotion] =
+    useState<boolean>(false);
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
   useEffect(() => {
@@ -51,11 +56,14 @@ export const PerformanceProvider: React.FC<PerformanceProviderProps> = ({ childr
     }
 
     // 2. Initialize Reduced Motion Detection
-    const mediaQuery = globalThis.matchMedia("(prefers-reduced-motion: reduce)");
+    const mediaQuery = globalThis.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    );
     setPrefersReducedMotion(mediaQuery.matches);
 
     // 3. Listen for changes in OS-level settings
-    const listener = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);
+    const listener = (e: MediaQueryListEvent) =>
+      setPrefersReducedMotion(e.matches);
     mediaQuery.addEventListener("change", listener);
 
     setIsLoaded(true);
@@ -63,6 +71,61 @@ export const PerformanceProvider: React.FC<PerformanceProviderProps> = ({ childr
     return () => mediaQuery.removeEventListener("change", listener);
   }, []);
 
+  useEffect(() => {
+    // 4. Automatic FPS Detection (Runs once per device)
+    const stored = globalThis.localStorage?.getItem(STORAGE_KEY);
+    if (stored !== null) return; // User already has a saved preference, don't auto-detect
+
+    let rAFId: number;
+    let isCancelled = false;
+
+    // Wait 1 second for initial render and hydration to settle
+    const warmupTimer = setTimeout(() => {
+      if (isCancelled) return;
+
+      let frameCount = 0;
+      let startTime = performance.now();
+
+      const measure = (time: DOMHighResTimeStamp) => {
+        if (isCancelled) return;
+        if (frameCount === 0) startTime = time;
+        frameCount++;
+        const elapsed = time - startTime;
+
+        if (elapsed >= 1000) {
+          const fps = (frameCount * 1000) / elapsed;
+          if (fps < 50) {
+            setManualLowPower(true);
+            globalThis.localStorage?.setItem(STORAGE_KEY, "true");
+            toast.info(
+              "Low power mode was automatically activated to improve performance. Hardware acceleration appears to be disabled.",
+              8000
+            );
+            console.warn(
+              `[PerformanceProvider] Auto-enabled Low Power Mode. Detected FPS: ${fps.toFixed(1)}`,
+            );
+          } else {
+            // Save 'false' to prevent future auto-detection checks
+            globalThis.localStorage?.setItem(STORAGE_KEY, "false");
+            console.log(
+              `[PerformanceProvider] Performance OK. Detected FPS: ${fps.toFixed(1)}`,
+            );
+          }
+        } else {
+          rAFId = globalThis.requestAnimationFrame(measure);
+        }
+      };
+
+      rAFId = globalThis.requestAnimationFrame(measure);
+    }, 1000);
+
+    return () => {
+      isCancelled = true;
+      clearTimeout(warmupTimer);
+      if (rAFId) globalThis.cancelAnimationFrame(rAFId);
+    };
+  }, [toast]);
+
   const toggleManualLowPower = () => {
     setManualLowPower((prev) => {
       const next = !prev;