@checkstack/ui 1.3.4 → 1.3.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/package.json

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

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;