reintroduce fps component

Author: sprocketc

package-lock.json

@@ -116,6 +116,7 @@
     "react": "19.1.0",
     "react-d3-tree": "3.6.6",
     "react-dom": "19.1.0",
+    "react-fps": "1.0.6",
     "react-frame-component": "5.2.7",
     "react-resizable-panels": "3.0.2",
     "react-svg": "16.3.0",

package.json

@@ -3,6 +3,7 @@
    ["@radix-ui/react-select" :as Select]
    ["@radix-ui/react-tooltip" :as Tooltip]
    ["path-browserify" :as path]
+   ["react-fps" :refer [FpsView]]
    ["react-resizable-panels" :refer [Panel PanelGroup PanelResizeHandle]]
    [clojure.string :as string]
    [config :as config]
@@ -80,9 +81,15 @@
 
 (defn debug-info
   []
-  (into [:div.absolute.top-1.left-2.pointer-events-none.text-color]
-        (for [[s v] (debug-rows)]
-          [:div.flex [:strong.mr-1 s] [:div v]])))
+  [:div
+   (into [:div.absolute.top-1.left-2.pointer-events-none.text-color]
+         (for [[s v] (debug-rows)]
+           [:div.flex
+            [:strong.mr-1 s]
+            [:div v]]))
+   [:div.fps-wrapper
+    [:> FpsView #js {:width 240
+                     :height 180}]]])
 
 (defn frame-panel
   []

src/renderer/app/views.cljs

@@ -206,3 +206,17 @@
 .devtools * {
   background: transparent !important;
 }
+
+.fps-wrapper {
+  > div {
+    @apply absolute! left-auto! top-2! right-2! drop-shadow-md overflow-hidden! px-1! font-sans! text-sm! bg-primary! text-color!;
+
+    > div {
+      @apply left-0! right-0! bottom-0! bg-primary!;
+
+      > div {
+         @apply bg-accent!;
+      }
+    }
+  }
+}