@checkstack/ui 1.3.2 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @checkstack/ui
 
+## 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
+
+- 594eecc: Implemented a manual "Low Power Mode" toggle in the user menu, allowing users to explicitly disable expensive visual effects. This replaces the previous automatic performance diagnostics with a more predictable, user-controlled system that persists to localStorage while still respecting OS-level "Reduced Motion" settings.
+
 ## 1.3.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "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,18 +1,26 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 
+const STORAGE_KEY = "checkstack-low-power";
+
 interface PerformanceContextValue {
   /** 
-   * Whether the device is considered low-power or lacks hardware acceleration.
-   * If true, expensive animations, blurs, and transitions should be disabled.
+   * Whether the application should run in low-power mode.
+   * Derived from (manualLowPower || prefersReducedMotion).
    */
   isLowPower: boolean;
-  /** Whether the performance detection has completed */
+  /** Whether the performance state has been initialized from storage */
   isLoaded: boolean;
+  /** The current state of the manual toggle */
+  manualLowPower: boolean;
+  /** Toggle the manual low power setting */
+  toggleManualLowPower: () => void;
 }
 
 const PerformanceContext = createContext<PerformanceContextValue>({
   isLowPower: false,
   isLoaded: false,
+  manualLowPower: false,
+  toggleManualLowPower: () => {},
 });
 
 /**
@@ -26,99 +34,54 @@ interface PerformanceProviderProps {
 }
 
 /**
- * PerformanceProvider - Centralizes detection of hardware capabilities and user preferences.
- * Runs a suite of heuristics (Media Queries, WebGL Audit, and Canvas Benchmarks) 
- * once on mount and provides the result to the entire application.
+ * PerformanceProvider - Centralizes management of the application's performance tier.
+ * Supports manual override (persisted to localStorage) and respects OS-level
+ * Reduced Motion preferences.
  */
 export const PerformanceProvider: React.FC<PerformanceProviderProps> = ({ children }) => {
-  const [state, setState] = useState<PerformanceContextValue>({
-    isLowPower: false,
-    isLoaded: false,
-  });
+  const [manualLowPower, setManualLowPower] = useState<boolean>(false);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState<boolean>(false);
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
   useEffect(() => {
-    const runPerformanceChecks = () => {
-      // 1. Accessibility Override (Reduced Motion)
-      const prefersReducedMotion = globalThis.matchMedia(
-        "(prefers-reduced-motion: reduce)"
-      ).matches;
+    // 1. Initialize Manual Toggle from localStorage
+    const stored = globalThis.localStorage?.getItem(STORAGE_KEY);
+    if (stored === "true") {
+      setManualLowPower(true);
+    }
+
+    // 2. Initialize Reduced Motion Detection
+    const mediaQuery = globalThis.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
 
-      // 2. Hardware Hint Check (Low RAM or CPU Cores)
-      const nav = globalThis.navigator as Navigator & { deviceMemory?: number };
-      const isLowEndHardware =
-        (nav.deviceMemory !== undefined && nav.deviceMemory < 4) ||
-        nav.hardwareConcurrency <= 2;
+    // 3. Listen for changes in OS-level settings
+    const listener = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", listener);
 
-      // 3. Renderer Audit (Detecting Software Rasterizers)
-      let isSoftwareRenderer = false;
-      try {
-        const canvas = document.createElement("canvas");
-        const gl =
-          canvas.getContext("webgl") ||
-          canvas.getContext("experimental-webgl");
-        
-        if (gl instanceof WebGLRenderingContext) {
-          const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
-          const renderer = (
-            debugInfo
-              ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
-              : gl.getParameter(gl.RENDERER)
-          ).toLowerCase();
+    setIsLoaded(true);
 
-          isSoftwareRenderer = [
-            "software",
-            "swiftshader",
-            "llvmpipe",
-            "softpipe",
-            "swrast",
-            "osmesa",
-            "mesa off-screen",
-            "basic render",
-            "warp",
-          ].some((id) => renderer.includes(id));
-        } else {
-          // No WebGL support at all usually implies old/stripped browser
-          isSoftwareRenderer = true;
-        }
-      } catch {
-        isSoftwareRenderer = true;
-      }
+    return () => mediaQuery.removeEventListener("change", listener);
+  }, []);
 
-      // 4. Empirical Benchmark (Stress Test)
-      let isSlow = false;
-      try {
-        const benchCanvas = document.createElement("canvas");
-        benchCanvas.width = 100;
-        benchCanvas.height = 100;
-        const ctx = benchCanvas.getContext("2d");
-        if (ctx) {
-          const t0 = globalThis.performance.now();
-          ctx.filter = "blur(20px)";
-          for (let i = 0; i < 50; i++) {
-            ctx.fillRect(i, i, 5, 5);
-          }
-          // Force pipeline sync to measure actual drawing time
-          ctx.getImageData(0, 0, 1, 1);
-          const t1 = globalThis.performance.now();
-          isSlow = t1 - t0 > 4; // Threshold for CPU-based rasterization
-        }
-      } catch {
-        isSlow = true;
-      }
+  const toggleManualLowPower = () => {
+    setManualLowPower((prev) => {
+      const next = !prev;
+      globalThis.localStorage?.setItem(STORAGE_KEY, String(next));
+      return next;
+    });
+  };
 
-      const isLowPowerVerdict = prefersReducedMotion || isLowEndHardware || isSoftwareRenderer || isSlow;
-      
-      setState({
-        isLowPower: isLowPowerVerdict,
-        isLoaded: true,
-      });
-    };
+  const isLowPower = manualLowPower || prefersReducedMotion;
 
-    runPerformanceChecks();
-  }, []);
+  const value = {
+    isLowPower,
+    isLoaded,
+    manualLowPower,
+    toggleManualLowPower,
+  };
 
   return (
-    <PerformanceContext.Provider value={state}>
+    <PerformanceContext.Provider value={value}>
       {children}
     </PerformanceContext.Provider>
   );