fps

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import * as React from "react";
5import * as ReactDOM from "react-dom";
6import { cn } from "@/lib/utils";
7 
8const fpsVariants = cva(
9  "z-50 flex shrink-0 items-center gap-2 rounded-sm border bg-background/80 px-3 py-1.5 font-mono text-foreground text-sm backdrop-blur-sm",
10  {
11    variants: {
12      strategy: {
13        fixed: "fixed",
14        absolute: "absolute",
15      },
16      position: {
17        "top-left": "top-4 left-4",
18        "top-right": "top-4 right-4",
19        "bottom-left": "bottom-4 left-4",
20        "bottom-right": "right-4 bottom-4",
21      },
22      status: {
23        good: "text-primary",
24        warning: "text-orange-500",
25        error: "text-destructive",
26      },
27    },
28    defaultVariants: {
29      strategy: "fixed",
30      position: "top-right",
31      status: "good",
32    },
33  },
34);
35 
36interface FpsProps
37  extends React.ComponentProps<"div">,
38    Omit<VariantProps<typeof fpsVariants>, "status"> {
39  label?: string;
40  updateInterval?: number;
41  warningThreshold?: number;
42  errorThreshold?: number;
43  portalContainer?: Element | DocumentFragment | null;
44  enabled?: boolean;
45}
46 
47function Fps(props: FpsProps) {
48  const {
49    strategy = "fixed",
50    position = "top-right",
51    label,
52    updateInterval = 500,
53    warningThreshold = 30,
54    errorThreshold = 20,
55    portalContainer: portalContainerProp,
56    enabled = true,
57    className,
58    ...fpsProps
59  } = props;
60 
61  const [mounted, setMounted] = React.useState(false);
62  const [fps, setFps] = React.useState(0);
63  const frameCountRef = React.useRef(0);
64  const lastTimeRef = React.useRef(performance.now());
65  const animationFrameRef = React.useRef<number | null>(null);
66  const updateTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(
67    null,
68  );
69 
70  React.useLayoutEffect(() => setMounted(true), []);
71 
72  const status = React.useMemo(() => {
73    if (fps < errorThreshold) return "error";
74    if (fps < warningThreshold) return "warning";
75    return "good";
76  }, [fps, errorThreshold, warningThreshold]);
77 
78  React.useEffect(() => {
79    if (!enabled || typeof window === "undefined") return;
80 
81    function measureFps() {
82      const now = performance.now();
83      const delta = now - lastTimeRef.current;
84      frameCountRef.current += 1;
85 
86      if (delta >= updateInterval) {
87        const currentFps = Math.round((frameCountRef.current * 1000) / delta);
88        setFps(currentFps);
89        frameCountRef.current = 0;
90// … truncated