From 8ff2bf86c85d9042e86e25f86cd28e7e3769d1d8 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 11:21:42 +0100
Subject: [PATCH 01/43] refactor: example usage of solid/tsx (@fehmer)

---
 frontend/package.json                 |   2 +
 frontend/src/html/pages/test.html     |   1 +
 frontend/src/ts/ready.ts              |   3 +
 frontend/src/ts/test/live-counter.tsx |  12 ++
 frontend/src/ts/test/live-states.ts   |  11 ++
 frontend/src/ts/test/test-timer.ts    |   2 +
 frontend/tsconfig.json                |   5 +-
 frontend/vite.config.ts               |   2 +
 pnpm-lock.yaml                        | 208 +++++++++++++++++++++++---
 9 files changed, 227 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/ts/test/live-counter.tsx
 create mode 100644 frontend/src/ts/test/live-states.ts

diff --git a/frontend/package.json b/frontend/package.json
index 09d7b37315ab..7dce2304259b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -51,6 +51,7 @@
     "modern-screenshot": "4.6.5",
     "object-hash": "3.0.0",
     "slim-select": "2.9.2",
+    "solid-js": "1.9.10",
     "stemmer": "2.0.1",
     "throttle-debounce": "5.0.2",
     "zod": "3.23.8",
@@ -98,6 +99,7 @@
     "vite-plugin-inspect": "11.3.3",
     "vite-plugin-minify": "2.1.0",
     "vite-plugin-pwa": "1.1.0",
+    "vite-plugin-solid": "2.11.10",
     "vitest": "4.0.15"
   },
   "lint-staged": {
diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index a2cf8e5a2538..f590ab5d3db9 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -175,6 +175,7 @@
         <div class="liveSpeed hidden">123</div>
         <div class="liveAcc hidden">100%%</div>
         <div class="liveBurst hidden">1</div>
+        <div id="liveSpeedCounter"></div>
       </div>
     </div>
     <div id="monkey" class="hidden">
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 7c5fe24ac154..264026624802 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -11,6 +11,7 @@ import { configLoadPromise } from "./config";
 import { authPromise } from "./firebase";
 import { animate } from "animejs";
 import { onDOMReady, qs } from "./utils/dom";
+import { mountLiveCounters } from "./test/live-states";
 
 onDOMReady(async () => {
   await configLoadPromise;
@@ -77,4 +78,6 @@ onDOMReady(async () => {
       });
     }
   }
+
+  mountLiveCounters();
 });
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
new file mode 100644
index 000000000000..181236966cf5
--- /dev/null
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -0,0 +1,12 @@
+import { render } from "solid-js/web";
+import { ElementWithUtils } from "../utils/dom";
+import { Accessor } from "solid-js";
+
+export function LiveCounter(
+  el: ElementWithUtils,
+  value: Accessor<number>,
+): void {
+  render(() => {
+    return <div>{value()}</div>;
+  }, el.native);
+}
diff --git a/frontend/src/ts/test/live-states.ts b/frontend/src/ts/test/live-states.ts
new file mode 100644
index 000000000000..01eacad2444a
--- /dev/null
+++ b/frontend/src/ts/test/live-states.ts
@@ -0,0 +1,11 @@
+import { createSignal } from "solid-js";
+import { qsr } from "../utils/dom";
+import { LiveCounter } from "./live-counter";
+
+export const [getWpm, setWpm] = createSignal(0);
+export const [getAcc, setAcc] = createSignal(0);
+export const [getBurst, setBurst] = createSignal(0);
+
+export function mountLiveCounters(): void {
+  LiveCounter(qsr("#liveSpeedCounter"), getWpm);
+}
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index d0921a0f9db8..c188b84112fc 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -21,6 +21,7 @@ import * as SoundController from "../controllers/sound-controller";
 import { clearLowFpsMode, setLowFpsMode } from "../anim";
 import { createTimer } from "animejs";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
+import { setWpm } from "./live-states";
 
 let lastLoop = 0;
 const newTimer = createTimer({
@@ -236,6 +237,7 @@ function timerStep(): void {
   // already using raf
   TimerProgress.update();
   LiveSpeed.update(wpmAndRaw.wpm, wpmAndRaw.raw);
+  setWpm(Config.blindMode ? wpmAndRaw.raw : wpmAndRaw.wpm);
 
   //logic
   if (Config.playTimeWarning !== "off") playTimeWarning();
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index df28ff992246..b97555cd8cc6 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -13,10 +13,13 @@
         "./src/ts/types/virtual-language-hashes.d.ts"
       ],
       "virtual:env-config": ["./src/ts/types/virtual-env-config.d.ts"]
-    }
+    },
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
   },
   "include": [
     "./src/**/*.ts",
+    "./src/**/*.tsx",
     "./scripts/**/*.ts",
     "vite-plugins/**/*.ts",
     "vite.config.ts"
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 0b81b5466492..7f8e9c047c55 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -28,6 +28,7 @@ import replace from "vite-plugin-filter-replace";
 // eslint-disable-next-line import/no-unresolved
 import UnpluginInjectPreload from "unplugin-inject-preload/vite";
 import { KnownFontName } from "@monkeytype/schemas/fonts";
+import solid from "vite-plugin-solid";
 
 export default defineConfig(({ mode }): UserConfig => {
   const env = loadEnv(mode, process.cwd(), "");
@@ -88,6 +89,7 @@ function getPlugins({
     }),
     jqueryInject(),
     injectHTML(),
+    solid(),
   ];
 
   const devPlugins: PluginOption[] = [Inspect()];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 83e4030ce3af..0511d666d081 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -345,6 +345,9 @@ importers:
       slim-select:
         specifier: 2.9.2
         version: 2.9.2
+      solid-js:
+        specifier: 1.9.10
+        version: 1.9.10
       stemmer:
         specifier: 2.0.1
         version: 2.0.1
@@ -480,7 +483,10 @@ importers:
         version: 2.1.0(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
       vite-plugin-pwa:
         specifier: 1.1.0
-        version: 1.1.0(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))(workbox-build@7.1.1)(workbox-window@7.1.0)
+        version: 1.1.0(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
+      vite-plugin-solid:
+        specifier: 2.11.10
+        version: 2.11.10(solid-js@1.9.10)(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
       vitest:
         specifier: 4.0.15
         version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
@@ -748,8 +754,8 @@ packages:
     resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.24.7':
-    resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==}
+  '@babel/helper-module-imports@7.18.6':
+    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-module-imports@7.27.1':
@@ -877,6 +883,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-syntax-jsx@7.27.1':
+    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-unicode-sets-regex@7.18.6':
     resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
     engines: {node: '>=6.9.0'}
@@ -3188,6 +3200,18 @@ packages:
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
   '@types/bcrypt@5.0.2':
     resolution: {integrity: sha512-6atioO8Y75fNcbmj0G7UjI9lXN2pQ/IGJ2FWT4a/btd0Lk9lQalHLKhkgKVZ3r+spnmWUKfbMi1GEe9wyHQfNQ==}
 
@@ -3742,6 +3766,11 @@ packages:
   b4a@1.6.6:
     resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==}
 
+  babel-plugin-jsx-dom-expressions@0.40.3:
+    resolution: {integrity: sha512-5HOwwt0BYiv/zxl7j8Pf2bGL6rDXfV6nUhLs8ygBX+EFJXzBPHM/euj9j/6deMZ6wa52Wb2PBaAV5U/jKwIY1w==}
+    peerDependencies:
+      '@babel/core': ^7.20.12
+
   babel-plugin-polyfill-corejs2@0.4.14:
     resolution: {integrity: sha512-Co2Y9wX854ts6U8gAAPXfn0GmAyctHuK8n0Yhfjd6t30g7yvKjspvvOo9yG+z52PZRgFErt7Ka2pYnXCjLKEpg==}
     peerDependencies:
@@ -3757,6 +3786,15 @@ packages:
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
+  babel-preset-solid@1.9.10:
+    resolution: {integrity: sha512-HCelrgua/Y+kqO8RyL04JBWS/cVdrtUv/h45GntgQY+cJl4eBcKkCDV3TdMjtKx1nXwRaR9QXslM/Npm1dxdZQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      solid-js: ^1.9.10
+    peerDependenciesMeta:
+      solid-js:
+        optional: true
+
   babylon@6.18.0:
     resolution: {integrity: sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==}
     hasBin: true
@@ -5618,6 +5656,9 @@ packages:
   howler@2.2.3:
     resolution: {integrity: sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==}
 
+  html-entities@2.3.3:
+    resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
+
   html-entities@2.5.2:
     resolution: {integrity: sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==}
 
@@ -6013,6 +6054,10 @@ packages:
     resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
 
+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+
   is-wsl@1.1.0:
     resolution: {integrity: sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==}
     engines: {node: '>=4'}
@@ -6582,6 +6627,10 @@ packages:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
 
+  merge-anything@5.1.7:
+    resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
+    engines: {node: '>=12.13'}
+
   merge-descriptors@1.0.3:
     resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
 
@@ -8109,6 +8158,16 @@ packages:
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
+  seroval-plugins@1.3.3:
+    resolution: {integrity: sha512-16OL3NnUBw8JG1jBLUoZJsLnQq0n5Ua6aHalhJK4fMQkz1lqR7Osz1sA30trBtd9VUDc2NgkuRCn8+/pBwqZ+w==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+
+  seroval@1.3.2:
+    resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==}
+    engines: {node: '>=10'}
+
   serve-static@1.16.2:
     resolution: {integrity: sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==}
     engines: {node: '>= 0.8.0'}
@@ -8277,6 +8336,14 @@ packages:
     resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
+  solid-js@1.9.10:
+    resolution: {integrity: sha512-Coz956cos/EPDlhs6+jsdTxKuJDPT7B5SVIWgABwROyxjY7Xbr8wkzD68Et+NxnV7DLJ3nJdAC2r9InuV/4Jew==}
+
+  solid-refresh@0.6.3:
+    resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==}
+    peerDependencies:
+      solid-js: ^1.3
+
   sonic-boom@1.4.1:
     resolution: {integrity: sha512-LRHh/A8tpW7ru89lrlkU4AszXt1dbwSjVWguGrmlxE7tawVmDBlI1PILMkXAxJTwqhgsEeTHzj36D5CmHgQmNg==}
 
@@ -9159,6 +9226,16 @@ packages:
       '@vite-pwa/assets-generator':
         optional: true
 
+  vite-plugin-solid@2.11.10:
+    resolution: {integrity: sha512-Yr1dQybmtDtDAHkii6hXuc1oVH9CPcS/Zb2jN/P36qqcrkNnVPsMTzQ06jyzFPFjj3U1IYKMVt/9ZqcwGCEbjw==}
+    peerDependencies:
+      '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.*
+      solid-js: ^1.7.2
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+    peerDependenciesMeta:
+      '@testing-library/jest-dom':
+        optional: true
+
   vite@7.1.12:
     resolution: {integrity: sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -9199,6 +9276,14 @@ packages:
       yaml:
         optional: true
 
+  vitefu@1.1.1:
+    resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   vitest@4.0.15:
     resolution: {integrity: sha512-n1RxDp8UJm6N0IbJLQo+yzLZ2sQCDyl1o0LeugbPWf8+8Fttp29GghsQBjYJVmWq3gBFfe9Hs1spR44vovn2wA==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
@@ -9682,12 +9767,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-imports@7.24.7':
+  '@babel/helper-module-imports@7.18.6':
     dependencies:
-      '@babel/traverse': 7.25.2
       '@babel/types': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@babel/helper-module-imports@7.27.1':
     dependencies:
@@ -9699,10 +9781,10 @@ snapshots:
   '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
-      '@babel/helper-module-imports': 7.24.7
+      '@babel/helper-module-imports': 7.27.1
       '@babel/helper-simple-access': 7.24.7
       '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.25.2
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
@@ -9741,7 +9823,7 @@ snapshots:
 
   '@babel/helper-simple-access@7.24.7':
     dependencies:
-      '@babel/traverse': 7.25.2
+      '@babel/traverse': 7.28.5
       '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
@@ -9771,7 +9853,7 @@ snapshots:
 
   '@babel/helpers@7.25.0':
     dependencies:
-      '@babel/template': 7.25.0
+      '@babel/template': 7.27.2
       '@babel/types': 7.28.5
 
   '@babel/helpers@7.28.4':
@@ -9832,6 +9914,11 @@ snapshots:
       '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
   '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -10275,9 +10362,9 @@ snapshots:
   '@babel/traverse@7.25.2':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.25.0
+      '@babel/generator': 7.28.5
       '@babel/parser': 7.28.5
-      '@babel/template': 7.25.0
+      '@babel/template': 7.27.2
       '@babel/types': 7.28.5
       debug: 4.4.3
       globals: 11.12.0
@@ -11932,12 +12019,14 @@ snapshots:
     transitivePeerDependencies:
       - ajv
 
-  '@rollup/plugin-babel@5.3.1(@babel/core@7.28.5)(rollup@2.79.2)':
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.28.5)(@types/babel__core@7.20.5)(rollup@2.79.2)':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/helper-module-imports': 7.27.1
       '@rollup/pluginutils': 3.1.0(rollup@2.79.2)
       rollup: 2.79.2
+    optionalDependencies:
+      '@types/babel__core': 7.20.5
     transitivePeerDependencies:
       - supports-color
 
@@ -12288,6 +12377,27 @@ snapshots:
 
   '@types/aria-query@5.0.4': {}
 
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.28.5
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.28.5
+
   '@types/bcrypt@5.0.2':
     dependencies:
       '@types/node': 24.9.1
@@ -12940,6 +13050,15 @@ snapshots:
 
   b4a@1.6.6: {}
 
+  babel-plugin-jsx-dom-expressions@0.40.3(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/types': 7.28.5
+      html-entities: 2.3.3
+      parse5: 7.1.2
+
   babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.5):
     dependencies:
       '@babel/compat-data': 7.28.5
@@ -12964,6 +13083,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  babel-preset-solid@1.9.10(@babel/core@7.28.5)(solid-js@1.9.10):
+    dependencies:
+      '@babel/core': 7.28.5
+      babel-plugin-jsx-dom-expressions: 0.40.3(@babel/core@7.28.5)
+    optionalDependencies:
+      solid-js: 1.9.10
+
   babylon@6.18.0: {}
 
   balanced-match@1.0.2: {}
@@ -15324,6 +15450,8 @@ snapshots:
 
   howler@2.2.3: {}
 
+  html-entities@2.3.3: {}
+
   html-entities@2.5.2:
     optional: true
 
@@ -15735,6 +15863,8 @@ snapshots:
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
+  is-what@4.1.16: {}
+
   is-wsl@1.1.0: {}
 
   is-wsl@2.2.0:
@@ -16343,6 +16473,10 @@ snapshots:
       type-fest: 0.18.1
       yargs-parser: 20.2.9
 
+  merge-anything@5.1.7:
+    dependencies:
+      is-what: 4.1.16
+
   merge-descriptors@1.0.3: {}
 
   merge-descriptors@2.0.0: {}
@@ -18190,6 +18324,12 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
+  seroval-plugins@1.3.3(seroval@1.3.2):
+    dependencies:
+      seroval: 1.3.2
+
+  seroval@1.3.2: {}
+
   serve-static@1.16.2:
     dependencies:
       encodeurl: 2.0.0
@@ -18403,6 +18543,21 @@ snapshots:
       ip-address: 9.0.5
       smart-buffer: 4.2.0
 
+  solid-js@1.9.10:
+    dependencies:
+      csstype: 3.1.3
+      seroval: 1.3.2
+      seroval-plugins: 1.3.3(seroval@1.3.2)
+
+  solid-refresh@0.6.3(solid-js@1.9.10):
+    dependencies:
+      '@babel/generator': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/types': 7.28.5
+      solid-js: 1.9.10
+    transitivePeerDependencies:
+      - supports-color
+
   sonic-boom@1.4.1:
     dependencies:
       atomic-sleep: 1.0.0
@@ -19377,17 +19532,30 @@ snapshots:
       html-minifier-terser: 7.2.0
       vite: 7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
 
-  vite-plugin-pwa@1.1.0(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))(workbox-build@7.1.1)(workbox-window@7.1.0):
+  vite-plugin-pwa@1.1.0(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0):
     dependencies:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
       vite: 7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
-      workbox-build: 7.1.1
+      workbox-build: 7.1.1(@types/babel__core@7.20.5)
       workbox-window: 7.1.0
     transitivePeerDependencies:
       - supports-color
 
+  vite-plugin-solid@2.11.10(solid-js@1.9.10)(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@types/babel__core': 7.20.5
+      babel-preset-solid: 1.9.10(@babel/core@7.28.5)(solid-js@1.9.10)
+      merge-anything: 5.1.7
+      solid-js: 1.9.10
+      solid-refresh: 0.6.3(solid-js@1.9.10)
+      vite: 7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+      vitefu: 1.1.1(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
+    transitivePeerDependencies:
+      - supports-color
+
   vite@7.1.12(@types/node@20.5.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.11
@@ -19420,6 +19588,10 @@ snapshots:
       tsx: 4.16.2
       yaml: 2.8.1
 
+  vitefu@1.1.1(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)):
+    optionalDependencies:
+      vite: 7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+
   vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1):
     dependencies:
       '@vitest/expect': 4.0.15
@@ -19667,13 +19839,13 @@ snapshots:
     dependencies:
       workbox-core: 7.1.0
 
-  workbox-build@7.1.1:
+  workbox-build@7.1.1(@types/babel__core@7.20.5):
     dependencies:
       '@apideck/better-ajv-errors': 0.3.6(ajv@8.17.1)
       '@babel/core': 7.28.5
       '@babel/preset-env': 7.28.5(@babel/core@7.28.5)
       '@babel/runtime': 7.28.4
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.28.5)(rollup@2.79.2)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.28.5)(@types/babel__core@7.20.5)(rollup@2.79.2)
       '@rollup/plugin-node-resolve': 15.3.1(rollup@2.79.2)
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.2)
       '@rollup/plugin-terser': 0.4.4(rollup@2.79.2)

From b36b73f0a16d1e9647a77dcce4205e1532a73597 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 13:11:24 +0100
Subject: [PATCH 02/43] refactor, tests

---
 frontend/__tests__/setup-jsdom.ts             |   1 +
 .../test/live-counter.jsdom-spec.tsx          |  28 ++
 frontend/__tests__/tsconfig.json              |  10 +-
 frontend/package.json                         |   4 +-
 frontend/src/ts/test/live-counter.tsx         |  13 +-
 .../test/{live-states.ts => live-states.tsx}  |   3 +-
 frontend/tsconfig.json                        |   2 +-
 frontend/vitest.config.ts                     |  10 +-
 pnpm-lock.yaml                                | 445 ++++++++++++++++--
 9 files changed, 464 insertions(+), 52 deletions(-)
 create mode 100644 frontend/__tests__/test/live-counter.jsdom-spec.tsx
 rename frontend/src/ts/test/{live-states.ts => live-states.tsx} (72%)

diff --git a/frontend/__tests__/setup-jsdom.ts b/frontend/__tests__/setup-jsdom.ts
index ae671c34afdb..0255b940229d 100644
--- a/frontend/__tests__/setup-jsdom.ts
+++ b/frontend/__tests__/setup-jsdom.ts
@@ -1,4 +1,5 @@
 import $ from "jquery";
+import "@testing-library/jest-dom";
 
 //@ts-expect-error add to global
 global["$"] = $;
diff --git a/frontend/__tests__/test/live-counter.jsdom-spec.tsx b/frontend/__tests__/test/live-counter.jsdom-spec.tsx
new file mode 100644
index 000000000000..77c95b9b4315
--- /dev/null
+++ b/frontend/__tests__/test/live-counter.jsdom-spec.tsx
@@ -0,0 +1,28 @@
+// __tests__/LiveCounter.test.tsx
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
+import { LiveCounter } from "../../src/ts/test/live-counter";
+
+afterEach(() => cleanup());
+
+describe("LiveCounter", () => {
+  it("renders initial value", () => {
+    const [value] = createSignal(5);
+    render(() => <LiveCounter value={value} />);
+    expect(screen.getByText("5")).toBeInTheDocument();
+  });
+
+  it("updates reactively when signal changes", () => {
+    const [value, setValue] = createSignal(1);
+    render(() => <LiveCounter value={value} />);
+
+    expect(screen.getByText("1")).toBeInTheDocument();
+
+    setValue(42);
+    expect(screen.getByText("42")).toBeInTheDocument();
+
+    setValue(99);
+    expect(screen.getByText("99")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/__tests__/tsconfig.json b/frontend/__tests__/tsconfig.json
index 97e01a3900fa..0ba9893bd919 100644
--- a/frontend/__tests__/tsconfig.json
+++ b/frontend/__tests__/tsconfig.json
@@ -3,8 +3,14 @@
   "compilerOptions": {
     "moduleResolution": "Bundler",
     "module": "ESNext",
-    "noEmit": true
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
   },
   "files": ["vitest.d.ts"],
-  "include": ["./**/*.spec.ts", "./**/*.jsdom-spec.ts", "./setup-tests.ts"]
+  "include": [
+    "./**/*.spec.ts",
+    "./**/*.jsdom-spec.{ts,tsx}",
+    "./setup-tests.ts"
+  ]
 }
diff --git a/frontend/package.json b/frontend/package.json
index 7dce2304259b..5d777190f338 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -51,7 +51,6 @@
     "modern-screenshot": "4.6.5",
     "object-hash": "3.0.0",
     "slim-select": "2.9.2",
-    "solid-js": "1.9.10",
     "stemmer": "2.0.1",
     "throttle-debounce": "5.0.2",
     "zod": "3.23.8",
@@ -62,7 +61,9 @@
     "@fortawesome/fontawesome-free": "5.15.4",
     "@monkeytype/oxlint-config": "workspace:*",
     "@monkeytype/typescript-config": "workspace:*",
+    "@solidjs/testing-library": "0.8.10",
     "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
     "@testing-library/user-event": "14.6.1",
     "@types/canvas-confetti": "1.4.3",
     "@types/chartjs-plugin-trendline": "1.0.1",
@@ -88,6 +89,7 @@
     "oxlint-tsgolint": "0.10.1",
     "postcss": "8.4.31",
     "sass": "1.70.0",
+    "solid-js": "1.9.10",
     "subset-font": "2.3.0",
     "tsx": "4.16.2",
     "typescript": "5.9.3",
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index 181236966cf5..e4c6507086fe 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -1,12 +1,5 @@
-import { render } from "solid-js/web";
-import { ElementWithUtils } from "../utils/dom";
-import { Accessor } from "solid-js";
+import { Accessor, JSXElement } from "solid-js";
 
-export function LiveCounter(
-  el: ElementWithUtils,
-  value: Accessor<number>,
-): void {
-  render(() => {
-    return <div>{value()}</div>;
-  }, el.native);
+export function LiveCounter(props: { value: Accessor<number> }): JSXElement {
+  return <div>{props.value()}</div>;
 }
diff --git a/frontend/src/ts/test/live-states.ts b/frontend/src/ts/test/live-states.tsx
similarity index 72%
rename from frontend/src/ts/test/live-states.ts
rename to frontend/src/ts/test/live-states.tsx
index 01eacad2444a..91402fac361c 100644
--- a/frontend/src/ts/test/live-states.ts
+++ b/frontend/src/ts/test/live-states.tsx
@@ -1,11 +1,12 @@
 import { createSignal } from "solid-js";
 import { qsr } from "../utils/dom";
 import { LiveCounter } from "./live-counter";
+import { render } from "solid-js/web";
 
 export const [getWpm, setWpm] = createSignal(0);
 export const [getAcc, setAcc] = createSignal(0);
 export const [getBurst, setBurst] = createSignal(0);
 
 export function mountLiveCounters(): void {
-  LiveCounter(qsr("#liveSpeedCounter"), getWpm);
+  render(() => <LiveCounter value={getWpm} />, qsr("#liveSpeedCounter").native);
 }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index b97555cd8cc6..6c428d580e54 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -24,5 +24,5 @@
     "vite-plugins/**/*.ts",
     "vite.config.ts"
   ],
-  "exclude": ["node_modules", "build", "setup-tests.ts", "**/*.spec.ts"]
+  "exclude": ["node_modules", "build", "setup-tests.ts", "./__tests__/**/*.*"]
 }
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index 1b720dddc1b0..085b2ebde3db 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -1,10 +1,12 @@
 import { defineConfig, UserWorkspaceConfig } from "vitest/config";
 import { languageHashes } from "./vite-plugins/language-hashes";
 import { envConfig } from "./vite-plugins/env-config";
+import solidPlugin from "vite-plugin-solid";
 
 const plugins = [
   languageHashes({ skip: true }),
   envConfig({ isDevelopment: true, clientVersion: "TESTING", env: {} }),
+  solidPlugin(),
 ];
 
 export const projects: UserWorkspaceConfig[] = [
@@ -12,7 +14,7 @@ export const projects: UserWorkspaceConfig[] = [
     test: {
       name: { label: "unit", color: "blue" },
       include: ["__tests__/**/*.spec.ts"],
-      exclude: ["__tests__/**/*.jsdom-spec.ts"],
+      exclude: ["__tests__/**/*.jsdom-spec.{ts,tsx}"],
       environment: "happy-dom",
       globalSetup: "__tests__/global-setup.ts",
       setupFiles: ["__tests__/setup-tests.ts"],
@@ -22,20 +24,22 @@ export const projects: UserWorkspaceConfig[] = [
   {
     test: {
       name: { label: "jsdom", color: "yellow" },
-      include: ["__tests__/**/*.jsdom-spec.ts"],
+      include: ["__tests__/**/*.jsdom-spec.{ts,tsx}"],
       exclude: ["__tests__/**/*.spec.ts"],
       environment: "happy-dom",
       globalSetup: "__tests__/global-setup.ts",
       setupFiles: ["__tests__/setup-jsdom.ts"],
+      globals: true,
     },
     plugins,
   },
 ];
 export default defineConfig({
+  plugins,
   test: {
     projects: projects,
     coverage: {
-      include: ["**/*.ts"],
+      include: ["**/*.{ts,tsx}"],
     },
     deps: {
       optimizer: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0511d666d081..bf42a7053d3a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,7 +19,7 @@ importers:
         version: link:packages/release
       '@vitest/coverage-v8':
         specifier: 4.0.15
-        version: 4.0.15(vitest@4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
+        version: 4.0.15(vitest@4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
       conventional-changelog:
         specifier: 6.0.0
         version: 6.0.0(conventional-commits-filter@5.0.0)
@@ -52,7 +52,7 @@ importers:
         version: 2.5.6
       vitest:
         specifier: 4.0.15
-        version: 4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+        version: 4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
 
   backend:
     dependencies:
@@ -224,7 +224,7 @@ importers:
         version: 10.0.0
       '@vitest/coverage-v8':
         specifier: 4.0.15
-        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
+        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
       concurrently:
         specifier: 8.2.2
         version: 8.2.2
@@ -254,7 +254,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: 4.0.15
-        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
 
   frontend:
     dependencies:
@@ -345,9 +345,6 @@ importers:
       slim-select:
         specifier: 2.9.2
         version: 2.9.2
-      solid-js:
-        specifier: 1.9.10
-        version: 1.9.10
       stemmer:
         specifier: 2.0.1
         version: 2.0.1
@@ -373,9 +370,15 @@ importers:
       '@monkeytype/typescript-config':
         specifier: workspace:*
         version: link:../packages/typescript-config
+      '@solidjs/testing-library':
+        specifier: 0.8.10
+        version: 0.8.10(solid-js@1.9.10)
       '@testing-library/dom':
         specifier: 10.4.1
         version: 10.4.1
+      '@testing-library/jest-dom':
+        specifier: 6.9.1
+        version: 6.9.1
       '@testing-library/user-event':
         specifier: 14.6.1
         version: 14.6.1(@testing-library/dom@10.4.1)
@@ -408,7 +411,7 @@ importers:
         version: 5.0.2
       '@vitest/coverage-v8':
         specifier: 4.0.15
-        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
+        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
       autoprefixer:
         specifier: 10.4.20
         version: 10.4.20(postcss@8.4.31)
@@ -430,6 +433,9 @@ importers:
       happy-dom:
         specifier: 20.0.10
         version: 20.0.10
+      jsdom:
+        specifier: 27.4.0
+        version: 27.4.0
       madge:
         specifier: 8.0.0
         version: 8.0.0(typescript@5.9.3)
@@ -451,6 +457,9 @@ importers:
       sass:
         specifier: 1.70.0
         version: 1.70.0
+      solid-js:
+        specifier: 1.9.10
+        version: 1.9.10
       subset-font:
         specifier: 2.3.0
         version: 2.3.0
@@ -486,10 +495,10 @@ importers:
         version: 1.1.0(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
       vite-plugin-solid:
         specifier: 2.11.10
-        version: 2.11.10(solid-js@1.9.10)(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
+        version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
       vitest:
         specifier: 4.0.15
-        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
 
   packages/contracts:
     dependencies:
@@ -526,7 +535,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: 4.0.15
-        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
 
   packages/funbox:
     dependencies:
@@ -560,7 +569,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: 4.0.15
-        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
 
   packages/oxlint-config: {}
 
@@ -615,7 +624,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: 4.0.15
-        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
 
   packages/tsup-config:
     dependencies:
@@ -663,13 +672,19 @@ importers:
         version: 5.9.3
       vitest:
         specifier: 4.0.15
-        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
       zod:
         specifier: 3.23.8
         version: 3.23.8
 
 packages:
 
+  '@acemir/cssom@0.9.30':
+    resolution: {integrity: sha512-9CnlMCI0LmCIq0olalQqdWrJHPzm0/tw3gzOA9zJSgvFX7Xau3D24mAGa4BtwxwY69nsuJW6kQqqCzf/mEcQgg==}
+
+  '@adobe/css-tools@4.4.4':
+    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
+
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -689,6 +704,15 @@ packages:
   '@apidevtools/json-schema-ref-parser@9.1.2':
     resolution: {integrity: sha512-r1w81DpR+KyRWd3f+rk6TNqMgedmAxZP5v5KWlXQWlgMUUtyEJch0DKEci1SorPMiSeM8XPl7MZ3miJ60JIpQg==}
 
+  '@asamuzakjp/css-color@4.1.1':
+    resolution: {integrity: sha512-B0Hv6G3gWGMn0xKJ0txEi/jM5iFpT3MfDxmhZFb4W047GvytCf1DHQ1D69W3zHI4yWe2aTZAA0JnbMZ7Xc8DuQ==}
+
+  '@asamuzakjp/dom-selector@6.7.6':
+    resolution: {integrity: sha512-hBaJER6A9MpdG3WgdlOolHmbOYvSk46y7IQN/1+iqiCuUu6iWdQrs9DGKF8ocqsEqWujWf/V7b7vaDgiUmIvUg==}
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
+
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -1344,6 +1368,38 @@ packages:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-syntax-patches-for-csstree@1.0.23':
+    resolution: {integrity: sha512-YEmgyklR6l/oKUltidNVYdjSmLSW88vMsKx0pmiS3r71s8ZZRpd8A0Yf0U+6p/RzElmMnPBv27hNWjDQMSZRtQ==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
@@ -1854,6 +1910,15 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@exodus/bytes@1.8.0':
+    resolution: {integrity: sha512-8JPn18Bcp8Uo1T82gR8lh2guEOa5KKU/IEKvvdp0sgmi7coPBWf1Doi1EXsGZb2ehc8ym/StJCjffYV+ne7sXQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@exodus/crypto': ^1.0.0-rc.4
+    peerDependenciesMeta:
+      '@exodus/crypto':
+        optional: true
+
   '@exodus/schemasafe@1.3.0':
     resolution: {integrity: sha512-5Aap/GaRupgNx/feGBwLLTVv8OQFfv3pq2lPRzPg9R+IOBnDgghTGW7l7EuVXOvg5cc/xSAlRW8rBrjIC3Nvqw==}
 
@@ -3119,6 +3184,16 @@ packages:
     engines: {node: '>=8.10'}
     hasBin: true
 
+  '@solidjs/testing-library@0.8.10':
+    resolution: {integrity: sha512-qdeuIerwyq7oQTIrrKvV0aL9aFeuwTd86VYD3afdq5HYEwoox1OBTJy4y8A3TFZr8oAR0nujYgCzY/8wgHGfeQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      '@solidjs/router': '>=0.9.0'
+      solid-js: '>=1.0.0'
+    peerDependenciesMeta:
+      '@solidjs/router':
+        optional: true
+
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
@@ -3129,6 +3204,10 @@ packages:
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
 
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
   '@testing-library/user-event@14.6.1':
     resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
     engines: {node: '>=12', npm: '>=6'}
@@ -3548,6 +3627,10 @@ packages:
     resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==}
     engines: {node: '>= 14'}
 
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
   aggregate-error@3.1.0:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
     engines: {node: '>=8'}
@@ -3869,6 +3952,9 @@ packages:
     peerDependencies:
       ajv: 4.11.8 - 8
 
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
   bignumber.js@9.1.2:
     resolution: {integrity: sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==}
 
@@ -4505,10 +4591,21 @@ packages:
   css-to-react-native@3.2.0:
     resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
 
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
 
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
+  cssstyle@5.3.7:
+    resolution: {integrity: sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==}
+    engines: {node: '>=20'}
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -4526,6 +4623,10 @@ packages:
     resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
     engines: {node: '>= 14'}
 
+  data-urls@6.0.0:
+    resolution: {integrity: sha512-BnBS08aLUM+DKamupXs3w2tJJoqU+AkaE/+6vQxi/G/DPmIZFJJp9Dkb1kM03AZx8ADehDUZgsNxju3mPXZYIA==}
+    engines: {node: '>=20'}
+
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
@@ -4605,6 +4706,9 @@ packages:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
     engines: {node: '>=0.10.0'}
 
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
   decko@1.2.0:
     resolution: {integrity: sha512-m8FnyHXV1QX+S1cl+KPFDIl6NMkxtKsy6+U/aYyjrOqWMuwAwYWu7ePqrsUHtDR5Y8Yk2pi/KIDSgF+vT4cPOQ==}
 
@@ -4774,6 +4878,9 @@ packages:
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
   dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
@@ -4898,6 +5005,10 @@ packages:
     resolution: {integrity: sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==}
     engines: {node: '>=0.12'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -5656,6 +5767,10 @@ packages:
   howler@2.2.3:
     resolution: {integrity: sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==}
 
+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
   html-entities@2.3.3:
     resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
 
@@ -5713,6 +5828,10 @@ packages:
     resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
     engines: {node: '>= 14'}
 
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
   human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -5982,6 +6101,9 @@ packages:
     resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
     engines: {node: '>=0.10.0'}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-promise@4.0.0:
     resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
 
@@ -6193,6 +6315,15 @@ packages:
   jsbn@1.1.0:
     resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
 
+  jsdom@27.4.0:
+    resolution: {integrity: sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsep@1.4.0:
     resolution: {integrity: sha512-B7qPcEVE3NVkmSJbaYxvv4cHkVW7DQsZz13pUMrfS8z8Q/BuShN+gcTXrUlPiGqM2/t/EEaI030bpxMqY8gMlw==}
     engines: {node: '>= 10.16.0'}
@@ -6490,8 +6621,8 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  lru-cache@11.1.0:
-    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
+  lru-cache@11.2.4:
+    resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
     engines: {node: 20 || >=22}
 
   lru-cache@5.1.1:
@@ -6605,6 +6736,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+
   media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -7401,6 +7535,9 @@ packages:
   parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
 
+  parse5@8.0.0:
+    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -8102,6 +8239,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -8643,6 +8784,9 @@ packages:
     resolution: {integrity: sha512-upi/0ZGkYgEcLeGieoz8gT74oWHA0E7JivX7aN9mAf+Tc7BQoRBvnIGHoPDw+f9TXTW4s6kGYCZJtauP6OYp7g==}
     hasBin: true
 
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -8755,6 +8899,13 @@ packages:
     resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
     engines: {node: '>=14.0.0'}
 
+  tldts-core@7.0.19:
+    resolution: {integrity: sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==}
+
+  tldts@7.0.19:
+    resolution: {integrity: sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==}
+    hasBin: true
+
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -8792,6 +8943,10 @@ packages:
     resolution: {integrity: sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==}
     hasBin: true
 
+  tough-cookie@6.0.0:
+    resolution: {integrity: sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==}
+    engines: {node: '>=16'}
+
   toxic@1.0.1:
     resolution: {integrity: sha512-WI3rIGdcaKULYg7KVoB0zcjikqvcYYvcuT6D89bFPz2rVR0Rl0PK6x8/X62rtdLtBKIE985NzVf/auTtGegIIg==}
 
@@ -8805,6 +8960,10 @@ packages:
     resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
     engines: {node: '>=14'}
 
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
+
   tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -9321,6 +9480,10 @@ packages:
   vlq@0.2.3:
     resolution: {integrity: sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==}
 
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
   walkdir@0.4.1:
     resolution: {integrity: sha512-3eBwRyEln6E1MSzcxcVpQIhRG8Q1jLvEqRmCZqS3dsfXEDR/AhOF4d+jHg1qvDCpYaVRZjENPQyrVxAkQqxPgQ==}
     engines: {node: '>=6.0.0'}
@@ -9349,6 +9512,10 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
+
   webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
@@ -9374,10 +9541,18 @@ packages:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
 
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
   whatwg-url@13.0.0:
     resolution: {integrity: sha512-9WWbymnqj57+XEuqADHrCJ2eSXzn8WXIW/YSGaZtb2WKAInQ6CHfaUUcTyyver0p8BDg5StLQq8h1vtZuwmOig==}
     engines: {node: '>=16'}
 
+  whatwg-url@15.1.0:
+    resolution: {integrity: sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==}
+    engines: {node: '>=20'}
+
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -9527,6 +9702,18 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@8.19.0:
+    resolution: {integrity: sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   wsl-utils@0.1.0:
     resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
     engines: {node: '>=18'}
@@ -9535,6 +9722,13 @@ packages:
     resolution: {integrity: sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==}
     engines: {node: '>=8'}
 
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
@@ -9617,6 +9811,10 @@ packages:
 
 snapshots:
 
+  '@acemir/cssom@0.9.30': {}
+
+  '@adobe/css-tools@4.4.4': {}
+
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -9642,6 +9840,24 @@ snapshots:
       call-me-maybe: 1.0.2
       js-yaml: 4.1.0
 
+  '@asamuzakjp/css-color@4.1.1':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 11.2.4
+
+  '@asamuzakjp/dom-selector@6.7.6':
+    dependencies:
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.1.0
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.2.4
+
+  '@asamuzakjp/nwsapi@2.3.9': {}
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -10531,6 +10747,28 @@ snapshots:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
+  '@csstools/color-helpers@5.1.0': {}
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-syntax-patches-for-csstree@1.0.23': {}
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
   '@dabh/diagnostics@2.0.3':
     dependencies:
       colorspace: 1.1.4
@@ -10847,6 +11085,8 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@exodus/bytes@1.8.0': {}
+
   '@exodus/schemasafe@1.3.0': {}
 
   '@faker-js/faker@7.6.0': {}
@@ -11642,9 +11882,9 @@ snapshots:
 
   '@npmcli/agent@2.2.2':
     dependencies:
-      agent-base: 7.1.1
+      agent-base: 7.1.4
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       lru-cache: 10.4.3
       socks-proxy-agent: 8.0.4
     transitivePeerDependencies:
@@ -11979,7 +12219,7 @@ snapshots:
       '@redocly/ajv': 8.11.2
       '@redocly/config': 0.20.3
       colorette: 1.4.0
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       js-levenshtein: 1.1.6
       js-yaml: 4.1.0
       minimatch: 5.1.6
@@ -12305,6 +12545,11 @@ snapshots:
       ignore: 5.3.2
       p-map: 4.0.0
 
+  '@solidjs/testing-library@0.8.10(solid-js@1.9.10)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+      solid-js: 1.9.10
+
   '@standard-schema/spec@1.0.0': {}
 
   '@surma/rollup-plugin-off-main-thread@2.2.3':
@@ -12325,6 +12570,15 @@ snapshots:
       picocolors: 1.1.1
       pretty-format: 27.5.1
 
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      aria-query: 5.3.0
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
   '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
     dependencies:
       '@testing-library/dom': 10.4.1
@@ -12659,7 +12913,7 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       eslint-visitor-keys: 3.4.3
 
-  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
+  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.0.15
@@ -12672,11 +12926,11 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+      vitest: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
+  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.0.15
@@ -12689,7 +12943,7 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+      vitest: 4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -12823,6 +13077,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  agent-base@7.1.4: {}
+
   aggregate-error@3.1.0:
     dependencies:
       clean-stack: 2.2.0
@@ -13156,6 +13412,10 @@ snapshots:
       jsonpointer: 5.0.1
       leven: 3.1.0
 
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
   bignumber.js@9.1.2: {}
 
   binary-extensions@2.3.0: {}
@@ -13876,8 +14136,22 @@ snapshots:
       css-color-keywords: 1.0.0
       postcss-value-parser: 4.2.0
 
+  css-tree@3.1.0:
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
+
   css-what@6.1.0: {}
 
+  css.escape@1.5.1: {}
+
+  cssstyle@5.3.7:
+    dependencies:
+      '@asamuzakjp/css-color': 4.1.1
+      '@csstools/css-syntax-patches-for-csstree': 1.0.23
+      css-tree: 3.1.0
+      lru-cache: 11.2.4
+
   csstype@3.1.3: {}
 
   csv-parse@5.5.6: {}
@@ -13888,6 +14162,11 @@ snapshots:
 
   data-uri-to-buffer@6.0.2: {}
 
+  data-urls@6.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 15.1.0
+
   data-view-buffer@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -13945,6 +14224,8 @@ snapshots:
 
   decamelize@1.2.0: {}
 
+  decimal.js@10.6.0: {}
+
   decko@1.2.0: {}
 
   deep-equal-in-any-order@2.0.6:
@@ -14119,6 +14400,8 @@ snapshots:
 
   dom-accessibility-api@0.5.16: {}
 
+  dom-accessibility-api@0.6.3: {}
+
   dom-serializer@1.4.1:
     dependencies:
       domelementtype: 2.3.0
@@ -14250,6 +14533,8 @@ snapshots:
 
   entities@5.0.0: {}
 
+  entities@6.0.1: {}
+
   env-paths@2.2.1:
     optional: true
 
@@ -15127,7 +15412,7 @@ snapshots:
   gaxios@6.7.0(encoding@0.1.13):
     dependencies:
       extend: 3.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       is-stream: 2.0.1
       node-fetch: 2.7.0(encoding@0.1.13)
       uuid: 10.0.0
@@ -15450,6 +15735,12 @@ snapshots:
 
   howler@2.2.3: {}
 
+  html-encoding-sniffer@6.0.0:
+    dependencies:
+      '@exodus/bytes': 1.8.0
+    transitivePeerDependencies:
+      - '@exodus/crypto'
+
   html-entities@2.3.3: {}
 
   html-entities@2.5.2:
@@ -15521,7 +15812,7 @@ snapshots:
 
   http-proxy-agent@7.0.2:
     dependencies:
-      agent-base: 7.1.1
+      agent-base: 7.1.4
       debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
@@ -15542,6 +15833,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   human-signals@2.1.0: {}
 
   human-signals@4.3.1: {}
@@ -15802,6 +16100,8 @@ snapshots:
 
   is-plain-obj@1.1.0: {}
 
+  is-potential-custom-element-name@1.0.1: {}
+
   is-promise@4.0.0: {}
 
   is-regex@1.2.1:
@@ -16006,6 +16306,34 @@ snapshots:
 
   jsbn@1.1.0: {}
 
+  jsdom@27.4.0:
+    dependencies:
+      '@acemir/cssom': 0.9.30
+      '@asamuzakjp/dom-selector': 6.7.6
+      '@exodus/bytes': 1.8.0
+      cssstyle: 5.3.7
+      data-urls: 6.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      parse5: 8.0.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 6.0.0
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 15.1.0
+      ws: 8.19.0
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - '@exodus/crypto'
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   jsep@1.4.0: {}
 
   jsesc@2.5.2: {}
@@ -16325,7 +16653,7 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  lru-cache@11.1.0: {}
+  lru-cache@11.2.4: {}
 
   lru-cache@5.1.1:
     dependencies:
@@ -16449,6 +16777,8 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mdn-data@2.12.2: {}
+
   media-typer@0.3.0: {}
 
   media-typer@1.1.0: {}
@@ -17386,11 +17716,11 @@ snapshots:
   pac-proxy-agent@7.0.2:
     dependencies:
       '@tootallnate/quickjs-emscripten': 0.23.0
-      agent-base: 7.1.1
+      agent-base: 7.1.4
       debug: 4.4.3
       get-uri: 6.0.3
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       pac-resolver: 7.0.1
       socks-proxy-agent: 8.0.4
     transitivePeerDependencies:
@@ -17452,6 +17782,10 @@ snapshots:
     dependencies:
       entities: 4.5.0
 
+  parse5@8.0.0:
+    dependencies:
+      entities: 6.0.1
+
   parseurl@1.3.3: {}
 
   pascal-case@3.1.2:
@@ -17480,7 +17814,7 @@ snapshots:
 
   path-scurry@2.0.0:
     dependencies:
-      lru-cache: 11.1.0
+      lru-cache: 11.2.4
       minipass: 7.1.2
 
   path-to-regexp@0.1.12: {}
@@ -17744,7 +18078,7 @@ snapshots:
       agent-base: 7.1.1
       debug: 4.4.3
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.5
+      https-proxy-agent: 7.0.6
       lru-cache: 7.18.3
       pac-proxy-agent: 7.0.2
       proxy-from-env: 1.1.0
@@ -18242,6 +18576,10 @@ snapshots:
       immutable: 4.3.7
       source-map-js: 1.2.1
 
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
@@ -18532,7 +18870,7 @@ snapshots:
 
   socks-proxy-agent@8.0.4:
     dependencies:
-      agent-base: 7.1.1
+      agent-base: 7.1.4
       debug: 4.4.3
       socks: 2.8.3
     transitivePeerDependencies:
@@ -18930,6 +19268,8 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  symbol-tree@3.2.4: {}
+
   tapable@2.2.1: {}
 
   tar-fs@2.1.4:
@@ -19086,6 +19426,12 @@ snapshots:
 
   tinyrainbow@3.0.3: {}
 
+  tldts-core@7.0.19: {}
+
+  tldts@7.0.19:
+    dependencies:
+      tldts-core: 7.0.19
+
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
@@ -19114,6 +19460,10 @@ snapshots:
 
   touch@3.1.1: {}
 
+  tough-cookie@6.0.0:
+    dependencies:
+      tldts: 7.0.19
+
   toxic@1.0.1:
     dependencies:
       lodash: 4.17.21
@@ -19128,6 +19478,10 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
+
   tree-kill@1.2.2: {}
 
   trim-newlines@3.0.1: {}
@@ -19543,7 +19897,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-solid@2.11.10(solid-js@1.9.10)(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)):
+  vite-plugin-solid@2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)):
     dependencies:
       '@babel/core': 7.28.5
       '@types/babel__core': 7.20.5
@@ -19553,6 +19907,8 @@ snapshots:
       solid-refresh: 0.6.3(solid-js@1.9.10)
       vite: 7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
       vitefu: 1.1.1(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
+    optionalDependencies:
+      '@testing-library/jest-dom': 6.9.1
     transitivePeerDependencies:
       - supports-color
 
@@ -19592,7 +19948,7 @@ snapshots:
     optionalDependencies:
       vite: 7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
 
-  vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1):
+  vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1):
     dependencies:
       '@vitest/expect': 4.0.15
       '@vitest/mocker': 4.0.15(vite@7.1.12(@types/node@24.9.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
@@ -19618,6 +19974,7 @@ snapshots:
       '@opentelemetry/api': 1.8.0
       '@types/node': 24.9.1
       happy-dom: 20.0.10
+      jsdom: 27.4.0
     transitivePeerDependencies:
       - jiti
       - less
@@ -19631,7 +19988,7 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1):
+  vitest@4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1):
     dependencies:
       '@vitest/expect': 4.0.15
       '@vitest/mocker': 4.0.15(vite@7.1.12(@types/node@20.5.1)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
@@ -19656,6 +20013,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.5.1
       happy-dom: 20.0.10
+      jsdom: 27.4.0
     transitivePeerDependencies:
       - jiti
       - less
@@ -19671,6 +20029,10 @@ snapshots:
 
   vlq@0.2.3: {}
 
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
   walkdir@0.4.1: {}
 
   wawoff2@2.0.1:
@@ -19700,6 +20062,8 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
+  webidl-conversions@8.0.1: {}
+
   webpack-sources@3.2.3: {}
 
   webpack-virtual-modules@0.5.0: {}
@@ -19718,11 +20082,18 @@ snapshots:
 
   whatwg-mimetype@3.0.0: {}
 
+  whatwg-mimetype@4.0.0: {}
+
   whatwg-url@13.0.0:
     dependencies:
       tr46: 4.1.1
       webidl-conversions: 7.0.0
 
+  whatwg-url@15.1.0:
+    dependencies:
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3
@@ -19972,12 +20343,18 @@ snapshots:
 
   ws@7.5.10: {}
 
+  ws@8.19.0: {}
+
   wsl-utils@0.1.0:
     dependencies:
       is-wsl: 3.1.0
 
   xdg-basedir@4.0.0: {}
 
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
   xtend@4.0.2: {}
 
   y18n@5.0.8: {}

From 87f70ac9f31fec14bd271e273b496d050fc94094 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 13:16:37 +0100
Subject: [PATCH 03/43] fix lint issue

---
 frontend/__tests__/tsconfig.json | 3 ++-
 frontend/__tests__/vitest.d.ts   | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/__tests__/tsconfig.json b/frontend/__tests__/tsconfig.json
index 0ba9893bd919..b149e8c6930e 100644
--- a/frontend/__tests__/tsconfig.json
+++ b/frontend/__tests__/tsconfig.json
@@ -10,7 +10,8 @@
   "files": ["vitest.d.ts"],
   "include": [
     "./**/*.spec.ts",
-    "./**/*.jsdom-spec.{ts,tsx}",
+    "./**/*.jsdom-spec.ts",
+    "./**/*.jsdom-spec.tsx",
     "./setup-tests.ts"
   ]
 }
diff --git a/frontend/__tests__/vitest.d.ts b/frontend/__tests__/vitest.d.ts
index d08189355996..2420f547252d 100644
--- a/frontend/__tests__/vitest.d.ts
+++ b/frontend/__tests__/vitest.d.ts
@@ -1,6 +1,9 @@
 import type { Assertion, AsymmetricMatchersContaining } from "vitest";
 import { TestActivityDay } from "../src/ts/elements/test-activity-calendar";
 
+/// <reference types="vitest" />
+import "@testing-library/jest-dom";
+
 interface ActivityDayMatchers<R = TestActivityDay> {
   toBeDate: (date: string) => ActivityDayMatchers<R>;
   toHaveTests: (tests: number) => ActivityDayMatchers<R>;

From 8169bfd385d4067cc3ed5e9648b565ad21ac4ce4 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 13:53:28 +0100
Subject: [PATCH 04/43] only update live speed if enabled

---
 frontend/src/ts/test/live-counter.tsx |  4 +++-
 frontend/src/ts/test/live-states.tsx  | 25 ++++++++++++++++++++++---
 frontend/src/ts/test/test-timer.ts    |  7 ++++++-
 frontend/src/ts/test/test-ui.ts       |  2 ++
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index e4c6507086fe..03a159bbb05b 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -1,5 +1,7 @@
 import { Accessor, JSXElement } from "solid-js";
 
-export function LiveCounter(props: { value: Accessor<number> }): JSXElement {
+export function LiveCounter(props: {
+  value: Accessor<number | string>;
+}): JSXElement {
   return <div>{props.value()}</div>;
 }
diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index 91402fac361c..9e96671b396d 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -1,12 +1,31 @@
-import { createSignal } from "solid-js";
+import { createMemo, createSignal } from "solid-js";
 import { qsr } from "../utils/dom";
 import { LiveCounter } from "./live-counter";
 import { render } from "solid-js/web";
+import config from "../config";
+import * as ConfigEvent from "../observables/config-event";
 
-export const [getWpm, setWpm] = createSignal(0);
+export const [getWpm, setWpm] = createSignal("0");
 export const [getAcc, setAcc] = createSignal(0);
 export const [getBurst, setBurst] = createSignal(0);
 
+const [getLiveSpeedStyle, setLifeSpeedStype] = createSignal(
+  config.liveSpeedStyle,
+);
+
+const liveWpm = createMemo(() => {
+  return getLiveSpeedStyle() !== "off" ? getWpm() : "";
+});
+
 export function mountLiveCounters(): void {
-  render(() => <LiveCounter value={getWpm} />, qsr("#liveSpeedCounter").native);
+  render(
+    () => <LiveCounter value={liveWpm} />,
+    qsr("#liveSpeedCounter").native,
+  );
 }
+
+ConfigEvent.subscribe(({ key, newValue }) => {
+  if (key === "liveSpeedStyle") {
+    setLifeSpeedStype(newValue);
+  }
+});
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index c188b84112fc..6fdac0473634 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -22,6 +22,7 @@ import { clearLowFpsMode, setLowFpsMode } from "../anim";
 import { createTimer } from "animejs";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { setWpm } from "./live-states";
+import Format from "../utils/format";
 
 let lastLoop = 0;
 const newTimer = createTimer({
@@ -237,7 +238,11 @@ function timerStep(): void {
   // already using raf
   TimerProgress.update();
   LiveSpeed.update(wpmAndRaw.wpm, wpmAndRaw.raw);
-  setWpm(Config.blindMode ? wpmAndRaw.raw : wpmAndRaw.wpm);
+  setWpm(
+    Format.typingSpeed(Config.blindMode ? wpmAndRaw.raw : wpmAndRaw.wpm, {
+      showDecimalPlaces: false,
+    }),
+  );
 
   //logic
   if (Config.playTimeWarning !== "off") playTimeWarning();
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 73c0110ff816..8039e98dd3d3 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -58,6 +58,7 @@ import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
+import { setWpm } from "./live-states";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -1827,6 +1828,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   Focus.set(false);
   LiveSpeed.instantHide();
   LiveSpeed.reset();
+  setWpm("0");
   LiveBurst.instantHide();
   LiveBurst.reset();
   LiveAcc.instantHide();

From 396b95e48bd23703ccd645503cfd4afe4cacfa85 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 14:27:03 +0100
Subject: [PATCH 05/43] move stuff around

---
 frontend/src/ts/signals/config.ts      | 13 +++++++++++++
 frontend/src/ts/signals/live-states.ts |  4 ++++
 frontend/src/ts/test/live-states.tsx   | 20 +++-----------------
 frontend/src/ts/test/test-timer.ts     |  2 +-
 frontend/src/ts/test/test-ui.ts        |  2 +-
 5 files changed, 22 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/ts/signals/config.ts
 create mode 100644 frontend/src/ts/signals/live-states.ts

diff --git a/frontend/src/ts/signals/config.ts b/frontend/src/ts/signals/config.ts
new file mode 100644
index 000000000000..6fa08ea2d63e
--- /dev/null
+++ b/frontend/src/ts/signals/config.ts
@@ -0,0 +1,13 @@
+import { createSignal } from "solid-js";
+import * as ConfigEvent from "../observables/config-event";
+import config from "../config";
+
+export const [getLiveSpeedStyle, setLifeSpeedStype] = createSignal(
+  config.liveSpeedStyle,
+);
+
+ConfigEvent.subscribe(({ key, newValue }) => {
+  if (key === "liveSpeedStyle") {
+    setLifeSpeedStype(newValue);
+  }
+});
diff --git a/frontend/src/ts/signals/live-states.ts b/frontend/src/ts/signals/live-states.ts
new file mode 100644
index 000000000000..da44df438f0e
--- /dev/null
+++ b/frontend/src/ts/signals/live-states.ts
@@ -0,0 +1,4 @@
+import { createSignal } from "solid-js";
+export const [getWpm, setWpm] = createSignal("0");
+export const [getAcc, setAcc] = createSignal(0);
+export const [getBurst, setBurst] = createSignal(0);
diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index 9e96671b396d..24b836bd442b 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -1,17 +1,9 @@
-import { createMemo, createSignal } from "solid-js";
+import { createMemo } from "solid-js";
 import { qsr } from "../utils/dom";
 import { LiveCounter } from "./live-counter";
 import { render } from "solid-js/web";
-import config from "../config";
-import * as ConfigEvent from "../observables/config-event";
-
-export const [getWpm, setWpm] = createSignal("0");
-export const [getAcc, setAcc] = createSignal(0);
-export const [getBurst, setBurst] = createSignal(0);
-
-const [getLiveSpeedStyle, setLifeSpeedStype] = createSignal(
-  config.liveSpeedStyle,
-);
+import { getWpm } from "../signals/live-states";
+import { getLiveSpeedStyle } from "../signals/config";
 
 const liveWpm = createMemo(() => {
   return getLiveSpeedStyle() !== "off" ? getWpm() : "";
@@ -23,9 +15,3 @@ export function mountLiveCounters(): void {
     qsr("#liveSpeedCounter").native,
   );
 }
-
-ConfigEvent.subscribe(({ key, newValue }) => {
-  if (key === "liveSpeedStyle") {
-    setLifeSpeedStype(newValue);
-  }
-});
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index 6fdac0473634..3ec01820ee75 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -21,7 +21,7 @@ import * as SoundController from "../controllers/sound-controller";
 import { clearLowFpsMode, setLowFpsMode } from "../anim";
 import { createTimer } from "animejs";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { setWpm } from "./live-states";
+import { setWpm } from "../signals/live-states";
 import Format from "../utils/format";
 
 let lastLoop = 0;
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 8039e98dd3d3..597724760639 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -58,7 +58,7 @@ import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
-import { setWpm } from "./live-states";
+import { setWpm } from "../signals/live-states";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,

From 0e4bcfa4ba9f899a0bdbd97f48c2a016279add9d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 14:58:59 +0100
Subject: [PATCH 06/43] on a page

---
 frontend/src/html/pages/account.html |  4 ++++
 frontend/src/ts/pages/account.ts     |  8 ++++++--
 frontend/src/ts/test/live-states.tsx | 10 ++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
index b1d7a856c0f7..b51c2723aa10 100644
--- a/frontend/src/html/pages/account.html
+++ b/frontend/src/html/pages/account.html
@@ -80,6 +80,10 @@
           </button>
         </div>
       </div>
+      <div>
+        Your speed style is:
+        <div id="accountSpeedStyle"></div>
+      </div>
       <div class="leaderboardsPositions">
         <div class="title">All-Time English Leaderboards</div>
         <div class="group t15">
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index f57c3ade6b85..b3076facbce7 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -36,7 +36,7 @@ import Ape from "../ape";
 import { AccountChart } from "@monkeytype/schemas/configs";
 import { SortedTableWithLimit } from "../utils/sorted-table";
 import { qs, qsa, qsr, onWindowLoad, ElementWithUtils } from "../utils/dom";
-
+import { mountAccountPage } from "../test/live-states";
 let filterDebug = false;
 //toggle filterdebug
 export function toggleFilterDebug(): void {
@@ -51,6 +51,8 @@ let visibleTableLines = 0;
 let testActivityEl: HTMLElement | null;
 let historyTable: SortedTableWithLimit<SnapshotResult<Mode>>;
 
+let accountDispose: () => void;
+
 function loadMoreLines(lineIndex?: number): void {
   if (filteredResults === undefined || filteredResults.length === 0) return;
   let newVisibleLines;
@@ -564,7 +566,7 @@ async function fillContent(): Promise<void> {
         histogramChartData.push(0);
       }
     }
-    (histogramChartData[bucket] as number)++;
+    (histogramChartData[bucket] as number) += 1;
 
     let tt = 0;
     if (
@@ -1243,10 +1245,12 @@ export const page = new Page<undefined>({
   afterHide: async (): Promise<void> => {
     reset();
     Skeleton.remove("pageAccount");
+    accountDispose?.();
   },
   beforeShow: async (): Promise<void> => {
     Skeleton.append("pageAccount", "main");
     const snapshot = DB.getSnapshot();
+    accountDispose = mountAccountPage();
     await ResultFilters.appendDropdowns(update);
     ResultFilters.updateActive();
     await Misc.sleep(0);
diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index 24b836bd442b..4290b1547d2c 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -15,3 +15,13 @@ export function mountLiveCounters(): void {
     qsr("#liveSpeedCounter").native,
   );
 }
+
+export function mountAccountPage(): () => void {
+  const speedStyleDispose = render(
+    () => <LiveCounter value={getLiveSpeedStyle} />,
+    qsr("#accountSpeedStyle").native,
+  );
+  return () => {
+    speedStyleDispose();
+  };
+}

From fa0611cba988b0c735f95e5ce5c6fe17f35a13dd Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 16:29:55 +0100
Subject: [PATCH 07/43] convert live stats

---
 .../test/live-counter.jsdom-spec.tsx          |  8 +-
 frontend/src/html/pages/test.html             | 12 +--
 frontend/src/styles/test.scss                 |  2 +-
 frontend/src/ts/signals/config.ts             | 14 ++-
 frontend/src/ts/signals/live-states.ts        |  6 +-
 frontend/src/ts/test/focus.ts                 | 12 +--
 frontend/src/ts/test/live-acc.ts              | 89 ------------------
 frontend/src/ts/test/live-burst.ts            | 87 ------------------
 frontend/src/ts/test/live-counter.tsx         |  9 +-
 frontend/src/ts/test/live-speed.ts            | 91 -------------------
 frontend/src/ts/test/live-states.tsx          | 63 +++++++++++--
 frontend/src/ts/test/test-timer.ts            |  2 -
 frontend/src/ts/test/test-ui.ts               | 34 +++----
 13 files changed, 102 insertions(+), 327 deletions(-)
 delete mode 100644 frontend/src/ts/test/live-acc.ts
 delete mode 100644 frontend/src/ts/test/live-burst.ts
 delete mode 100644 frontend/src/ts/test/live-speed.ts

diff --git a/frontend/__tests__/test/live-counter.jsdom-spec.tsx b/frontend/__tests__/test/live-counter.jsdom-spec.tsx
index 77c95b9b4315..61e6f2ff2528 100644
--- a/frontend/__tests__/test/live-counter.jsdom-spec.tsx
+++ b/frontend/__tests__/test/live-counter.jsdom-spec.tsx
@@ -8,21 +8,21 @@ afterEach(() => cleanup());
 
 describe("LiveCounter", () => {
   it("renders initial value", () => {
-    const [value] = createSignal(5);
+    const [value] = createSignal("5");
     render(() => <LiveCounter value={value} />);
     expect(screen.getByText("5")).toBeInTheDocument();
   });
 
   it("updates reactively when signal changes", () => {
-    const [value, setValue] = createSignal(1);
+    const [value, setValue] = createSignal("1");
     render(() => <LiveCounter value={value} />);
 
     expect(screen.getByText("1")).toBeInTheDocument();
 
-    setValue(42);
+    setValue("42");
     expect(screen.getByText("42")).toBeInTheDocument();
 
-    setValue(99);
+    setValue("99");
     expect(screen.getByText("99")).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index f590ab5d3db9..4da84f0bec3b 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -131,9 +131,6 @@
     </div>
     <div id="liveStatsMini" class="full-width timerMain">
       <div class="time hidden">1:00</div>
-      <div class="speed hidden">60</div>
-      <div class="acc hidden">100%</div>
-      <div class="burst hidden">1</div>
     </div>
     <div id="wordsWrapper" class="content-grid full-width" translate="no">
       <textarea
@@ -170,14 +167,7 @@
     >
       <i class="fas fa-fw fa-redo-alt"></i>
     </button>
-    <div id="liveStatsTextBottom" class="timerMain">
-      <div class="wrapper">
-        <div class="liveSpeed hidden">123</div>
-        <div class="liveAcc hidden">100%%</div>
-        <div class="liveBurst hidden">1</div>
-        <div id="liveSpeedCounter"></div>
-      </div>
-    </div>
+    <div id="liveStatsTextBottom" class="timerMain"></div>
     <div id="monkey" class="hidden">
       <div class="up"></div>
       <div class="left hidden"></div>
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index d0064f2c7c24..74d14afd65ff 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -1497,7 +1497,7 @@
     .speed,
     .acc,
     .burst {
-      opacity: 0;
+      //opacity: 0;
     }
 
     &.timerMain {
diff --git a/frontend/src/ts/signals/config.ts b/frontend/src/ts/signals/config.ts
index 6fa08ea2d63e..af5c7531f92c 100644
--- a/frontend/src/ts/signals/config.ts
+++ b/frontend/src/ts/signals/config.ts
@@ -2,12 +2,22 @@ import { createSignal } from "solid-js";
 import * as ConfigEvent from "../observables/config-event";
 import config from "../config";
 
-export const [getLiveSpeedStyle, setLifeSpeedStype] = createSignal(
+export const [getLiveSpeedStyle, setLiveSpeedStyle] = createSignal(
+  config.liveSpeedStyle,
+);
+export const [getLiveAccStyle, setLiveAccStyle] = createSignal(
+  config.liveSpeedStyle,
+);
+export const [getLiveBurstStyle, setLiveBurstStyle] = createSignal(
   config.liveSpeedStyle,
 );
 
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "liveSpeedStyle") {
-    setLifeSpeedStype(newValue);
+    setLiveSpeedStyle(newValue);
+  } else if (key === "liveAccStyle") {
+    setLiveAccStyle(newValue);
+  } else if (key === "liveBurstStyle") {
+    setLiveBurstStyle(newValue);
   }
 });
diff --git a/frontend/src/ts/signals/live-states.ts b/frontend/src/ts/signals/live-states.ts
index da44df438f0e..1ac3bdbbd2c8 100644
--- a/frontend/src/ts/signals/live-states.ts
+++ b/frontend/src/ts/signals/live-states.ts
@@ -1,4 +1,6 @@
 import { createSignal } from "solid-js";
 export const [getWpm, setWpm] = createSignal("0");
-export const [getAcc, setAcc] = createSignal(0);
-export const [getBurst, setBurst] = createSignal(0);
+export const [getAcc, setAcc] = createSignal("100%");
+export const [getBurst, setBurst] = createSignal("0");
+export const [getFocus, setFocus] = createSignal(false);
+export const [getTestRunning, setTestRunning] = createSignal(false);
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index 7b9842e2f124..dd2bad158283 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -1,10 +1,8 @@
 import * as Caret from "./caret";
-import * as LiveSpeed from "./live-speed";
-import * as LiveBurst from "./live-burst";
-import * as LiveAcc from "./live-acc";
 import * as TimerProgress from "./timer-progress";
 import * as PageTransition from "../states/page-transition";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
+import { setFocus } from "../signals/live-states";
 
 const unfocusPx = 3;
 let state = false;
@@ -61,9 +59,6 @@ export function set(value: boolean, withCursor = false): void {
       }
 
       Caret.stopAnimation();
-      LiveSpeed.show();
-      LiveBurst.show();
-      LiveAcc.show();
       TimerProgress.show();
     } else if (!value && state) {
       state = false;
@@ -80,11 +75,10 @@ export function set(value: boolean, withCursor = false): void {
       }
 
       Caret.startAnimation();
-      LiveSpeed.hide();
-      LiveBurst.hide();
-      LiveAcc.hide();
       TimerProgress.hide();
     }
+
+    setFocus(state);
   });
 }
 
diff --git a/frontend/src/ts/test/live-acc.ts b/frontend/src/ts/test/live-acc.ts
deleted file mode 100644
index 3158d0e36928..000000000000
--- a/frontend/src/ts/test/live-acc.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import Config from "../config";
-import * as TestState from "../test/test-state";
-import * as ConfigEvent from "../observables/config-event";
-import { applyReducedMotion } from "../utils/misc";
-import { animate } from "animejs";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-
-const textEl = document.querySelector(
-  "#liveStatsTextBottom .liveAcc",
-) as HTMLElement;
-const miniEl = document.querySelector("#liveStatsMini .acc") as HTMLElement;
-
-export function update(acc: number): void {
-  requestDebouncedAnimationFrame("live-acc.update", () => {
-    let number = Math.floor(acc);
-    if (Config.blindMode) {
-      number = 100;
-    }
-    miniEl.innerHTML = number + "%";
-    textEl.innerHTML = number + "%";
-  });
-}
-
-export function reset(): void {
-  requestDebouncedAnimationFrame("live-acc.reset", () => {
-    miniEl.innerHTML = "100%";
-    textEl.innerHTML = "100%";
-  });
-}
-
-let state = false;
-
-export function show(): void {
-  if (Config.liveAccStyle === "off") return;
-  if (!TestState.isActive) return;
-  if (state) return;
-  requestDebouncedAnimationFrame("live-acc.show", () => {
-    if (Config.liveAccStyle === "mini") {
-      miniEl.classList.remove("hidden");
-      animate(miniEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    } else {
-      textEl.classList.remove("hidden");
-      animate(textEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    }
-    state = true;
-  });
-}
-
-export function hide(): void {
-  if (!state) return;
-  requestDebouncedAnimationFrame("live-acc.hide", () => {
-    animate(textEl, {
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        textEl.classList.add("hidden");
-      },
-    });
-    animate(miniEl, {
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        miniEl.classList.add("hidden");
-      },
-    });
-    state = false;
-  });
-}
-
-export function instantHide(): void {
-  if (!state) return;
-
-  textEl.classList.add("hidden");
-  textEl.style.opacity = "0";
-  miniEl.classList.add("hidden");
-  miniEl.style.opacity = "0";
-
-  state = false;
-}
-
-ConfigEvent.subscribe(({ key, newValue }) => {
-  if (key === "liveAccStyle") newValue === "off" ? hide() : show();
-});
diff --git a/frontend/src/ts/test/live-burst.ts b/frontend/src/ts/test/live-burst.ts
deleted file mode 100644
index b37537d5de30..000000000000
--- a/frontend/src/ts/test/live-burst.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import Config from "../config";
-import * as TestState from "../test/test-state";
-import * as ConfigEvent from "../observables/config-event";
-import Format from "../utils/format";
-import { applyReducedMotion } from "../utils/misc";
-import { animate } from "animejs";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-
-const textEl = document.querySelector(
-  "#liveStatsTextBottom .liveBurst",
-) as HTMLElement;
-const miniEl = document.querySelector("#liveStatsMini .burst") as HTMLElement;
-
-export function reset(): void {
-  requestDebouncedAnimationFrame("live-burst.reset", () => {
-    textEl.innerHTML = "0";
-    miniEl.innerHTML = "0";
-  });
-}
-
-export async function update(burst: number): Promise<void> {
-  requestDebouncedAnimationFrame("live-burst.update", () => {
-    const burstText = Format.typingSpeed(burst, { showDecimalPlaces: false });
-    miniEl.innerHTML = burstText;
-    textEl.innerHTML = burstText;
-  });
-}
-
-let state = false;
-
-export function show(): void {
-  if (Config.liveBurstStyle === "off") return;
-  if (!TestState.isActive) return;
-  if (state) return;
-  requestDebouncedAnimationFrame("live-burst.show", () => {
-    if (Config.liveBurstStyle === "mini") {
-      miniEl.classList.remove("hidden");
-      animate(miniEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    } else {
-      textEl.classList.remove("hidden");
-      animate(textEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    }
-    state = true;
-  });
-}
-
-export function hide(): void {
-  if (!state) return;
-  requestDebouncedAnimationFrame("live-burst.hide", () => {
-    animate(textEl, {
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        textEl.classList.add("hidden");
-      },
-    });
-    animate(miniEl, {
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        miniEl.classList.add("hidden");
-      },
-    });
-    state = false;
-  });
-}
-
-export function instantHide(): void {
-  if (!state) return;
-
-  textEl.classList.add("hidden");
-  textEl.style.opacity = "0";
-  miniEl.classList.add("hidden");
-  miniEl.style.opacity = "0";
-
-  state = false;
-}
-
-ConfigEvent.subscribe(({ key, newValue }) => {
-  if (key === "liveBurstStyle") newValue === "off" ? hide() : show();
-});
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index 03a159bbb05b..13c4700413df 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -1,7 +1,12 @@
 import { Accessor, JSXElement } from "solid-js";
 
 export function LiveCounter(props: {
-  value: Accessor<number | string>;
+  value: Accessor<string>;
+  class?: string;
 }): JSXElement {
-  return <div>{props.value()}</div>;
+  return (
+    <div class={`${props.class}`} classList={{ hidden: props.value() === "" }}>
+      {props.value()}
+    </div>
+  );
 }
diff --git a/frontend/src/ts/test/live-speed.ts b/frontend/src/ts/test/live-speed.ts
deleted file mode 100644
index cef8273e4c04..000000000000
--- a/frontend/src/ts/test/live-speed.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import Config from "../config";
-import * as TestState from "./test-state";
-import * as ConfigEvent from "../observables/config-event";
-import Format from "../utils/format";
-import { applyReducedMotion } from "../utils/misc";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { animate } from "animejs";
-
-const textElement = document.querySelector(
-  "#liveStatsTextBottom .liveSpeed",
-) as HTMLElement;
-const miniElement = document.querySelector(
-  "#liveStatsMini .speed",
-) as HTMLElement;
-
-export function reset(): void {
-  requestDebouncedAnimationFrame("live-speed.reset", () => {
-    textElement.innerHTML = "0";
-    miniElement.innerHTML = "0";
-  });
-}
-
-export function update(wpm: number, raw: number): void {
-  requestDebouncedAnimationFrame("live-speed.update", () => {
-    let number = wpm;
-    if (Config.blindMode) {
-      number = raw;
-    }
-    const numberText = Format.typingSpeed(number, { showDecimalPlaces: false });
-    textElement.innerHTML = numberText;
-    miniElement.innerHTML = numberText;
-  });
-}
-
-let state = false;
-
-export function show(): void {
-  if (Config.liveSpeedStyle === "off") return;
-  if (!TestState.isActive) return;
-  if (state) return;
-  requestDebouncedAnimationFrame("live-speed.show", () => {
-    if (Config.liveSpeedStyle === "mini") {
-      miniElement.classList.remove("hidden");
-      animate(miniElement, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    } else {
-      textElement.classList.remove("hidden");
-      animate(textElement, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-      });
-    }
-    state = true;
-  });
-}
-
-export function hide(): void {
-  if (!state) return;
-  requestDebouncedAnimationFrame("live-speed.hide", () => {
-    animate(miniElement, {
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        miniElement.classList.add("hidden");
-      },
-    });
-    animate(textElement, {
-      opacity: [1, 0],
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        textElement.classList.add("hidden");
-      },
-    });
-    state = false;
-  });
-}
-
-export function instantHide(): void {
-  if (!state) return;
-  miniElement.classList.add("hidden");
-  miniElement.style.opacity = "0";
-  textElement.classList.add("hidden");
-  textElement.style.opacity = "0";
-  state = false;
-}
-
-ConfigEvent.subscribe(({ key, newValue }) => {
-  if (key === "liveSpeedStyle") newValue === "off" ? hide() : show();
-});
diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index 4290b1547d2c..bfa0ed2412b6 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -2,24 +2,71 @@ import { createMemo } from "solid-js";
 import { qsr } from "../utils/dom";
 import { LiveCounter } from "./live-counter";
 import { render } from "solid-js/web";
-import { getWpm } from "../signals/live-states";
-import { getLiveSpeedStyle } from "../signals/config";
+import {
+  getAcc,
+  getBurst,
+  getFocus,
+  getTestRunning,
+  getWpm,
+} from "../signals/live-states";
+import {
+  getLiveAccStyle,
+  getLiveBurstStyle,
+  getLiveSpeedStyle,
+} from "../signals/config";
 
-const liveWpm = createMemo(() => {
-  return getLiveSpeedStyle() !== "off" ? getWpm() : "";
-});
+const isTestRunning = createMemo(() => getTestRunning() && getFocus());
+
+const liveWpmText = createMemo(() =>
+  isTestRunning() && getLiveSpeedStyle() === "text" ? getWpm() : "",
+);
+const liveWpmMini = createMemo(() =>
+  isTestRunning() && getLiveSpeedStyle() === "mini" ? getWpm() : "",
+);
+const liveAccText = createMemo(() =>
+  isTestRunning() && getLiveAccStyle() === "text" ? getAcc() : "",
+);
+const liveAccMini = createMemo(() =>
+  isTestRunning() && getLiveAccStyle() === "mini" ? getAcc() : "",
+);
+const liveBurstText = createMemo(() =>
+  isTestRunning() && getLiveBurstStyle() === "text" ? getBurst() : "",
+);
+const liveBurstMini = createMemo(() =>
+  isTestRunning() && getLiveBurstStyle() === "mini" ? getBurst() : "",
+);
 
 export function mountLiveCounters(): void {
+  const textWrapper = qsr("#liveStatsTextBottom");
+  render(
+    () => (
+      <div class="wrapper">
+        <LiveCounter class="liveSpeed" value={liveWpmText} />
+        <LiveCounter class="liveAcc" value={liveAccText} />
+        <LiveCounter class="liveBurst" value={liveBurstText} />
+      </div>
+    ),
+    textWrapper.native,
+  );
+
+  const miniWrapper = qsr("#liveStatsMini");
   render(
-    () => <LiveCounter value={liveWpm} />,
-    qsr("#liveSpeedCounter").native,
+    () => (
+      <div>
+        <LiveCounter class="speed" value={liveWpmMini} />
+        <LiveCounter class="acc" value={liveAccMini} />
+        <LiveCounter class="burst" value={liveBurstMini} />
+      </div>
+    ),
+    miniWrapper.native,
   );
 }
 
 export function mountAccountPage(): () => void {
+  const wrapper = qsr("#accountSpeedStyle").setText("");
   const speedStyleDispose = render(
     () => <LiveCounter value={getLiveSpeedStyle} />,
-    qsr("#accountSpeedStyle").native,
+    wrapper.native,
   );
   return () => {
     speedStyleDispose();
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index 3ec01820ee75..fa18c2eceb49 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -4,7 +4,6 @@
 import Config, { setConfig } from "../config";
 import * as CustomText from "./custom-text";
 import * as TimerProgress from "./timer-progress";
-import * as LiveSpeed from "./live-speed";
 import * as TestStats from "./test-stats";
 import * as TestInput from "./test-input";
 import * as Monkey from "./monkey";
@@ -237,7 +236,6 @@ function timerStep(): void {
 
   // already using raf
   TimerProgress.update();
-  LiveSpeed.update(wpmAndRaw.wpm, wpmAndRaw.raw);
   setWpm(
     Format.typingSpeed(Config.blindMode ? wpmAndRaw.raw : wpmAndRaw.wpm, {
       showDecimalPlaces: false,
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 597724760639..a388ff7637b1 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -32,11 +32,8 @@ import * as SoundController from "../controllers/sound-controller";
 import * as Numbers from "@monkeytype/util/numbers";
 import * as TestStats from "./test-stats";
 import * as KeymapEvent from "../observables/keymap-event";
-import * as LiveAcc from "./live-acc";
 import * as Focus from "../test/focus";
 import * as TimerProgress from "../test/timer-progress";
-import * as LiveBurst from "./live-burst";
-import * as LiveSpeed from "./live-speed";
 import * as Monkey from "./monkey";
 import { animate } from "animejs";
 import {
@@ -58,7 +55,12 @@ import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
-import { setWpm } from "../signals/live-states";
+import {
+  setAcc,
+  setBurst,
+  setTestRunning,
+  setWpm,
+} from "../signals/live-states";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -1681,7 +1683,9 @@ function afterAnyTestInput(
   }
 
   const acc: number = Numbers.roundTo2(TestStats.calculateAccuracy());
-  if (!isNaN(acc)) LiveAcc.update(acc);
+  if (!isNaN(acc)) {
+    setAcc(Format.percentage(Config.blindMode ? 100 : acc));
+  }
 
   if (Config.mode !== "time") {
     TimerProgress.update();
@@ -1785,7 +1789,7 @@ export async function afterTestWordChange(
 
   const lastBurst = TestInput.burstHistory[TestInput.burstHistory.length - 1];
   if (Numbers.isSafeNumber(lastBurst)) {
-    void LiveBurst.update(Math.round(lastBurst));
+    setBurst(Format.typingSpeed(lastBurst, { showDecimalPlaces: false }));
   }
   if (direction === "forward") {
     //
@@ -1814,9 +1818,7 @@ export function onTestStart(): void {
   Focus.set(true);
   Monkey.show();
   TimerProgress.show();
-  LiveSpeed.show();
-  LiveAcc.show();
-  LiveBurst.show();
+  setTestRunning(true);
   TimerProgress.update();
 }
 
@@ -1826,13 +1828,9 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   getInputElement().style.left = "0";
   TestConfig.show();
   Focus.set(false);
-  LiveSpeed.instantHide();
-  LiveSpeed.reset();
-  setWpm("0");
-  LiveBurst.instantHide();
-  LiveBurst.reset();
-  LiveAcc.instantHide();
-  LiveAcc.reset();
+  setWpm("");
+  setBurst("");
+  setAcc("");
   TimerProgress.instantHide();
   TimerProgress.reset();
   Monkey.instantHide();
@@ -1877,9 +1875,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
 
 export function onTestFinish(): void {
   Caret.hide();
-  LiveSpeed.hide();
-  LiveAcc.hide();
-  LiveBurst.hide();
+  setTestRunning(false);
   TimerProgress.hide();
   OutOfFocus.hide();
   Monkey.hide();

From 56273366499f04c29dedb634c6437a877a5c4cbf Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 16:53:41 +0100
Subject: [PATCH 08/43] remove account experiment

---
 frontend/src/html/pages/account.html |  4 --
 frontend/src/ts/pages/account.ts     |  5 --
 frontend/src/ts/test/live-states.tsx | 11 ----
 pnpm-lock.yaml                       | 84 +++++++++++++++++++---------
 4 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
index b51c2723aa10..b1d7a856c0f7 100644
--- a/frontend/src/html/pages/account.html
+++ b/frontend/src/html/pages/account.html
@@ -80,10 +80,6 @@
           </button>
         </div>
       </div>
-      <div>
-        Your speed style is:
-        <div id="accountSpeedStyle"></div>
-      </div>
       <div class="leaderboardsPositions">
         <div class="title">All-Time English Leaderboards</div>
         <div class="group t15">
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index b3076facbce7..a4d72418dea4 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -36,7 +36,6 @@ import Ape from "../ape";
 import { AccountChart } from "@monkeytype/schemas/configs";
 import { SortedTableWithLimit } from "../utils/sorted-table";
 import { qs, qsa, qsr, onWindowLoad, ElementWithUtils } from "../utils/dom";
-import { mountAccountPage } from "../test/live-states";
 let filterDebug = false;
 //toggle filterdebug
 export function toggleFilterDebug(): void {
@@ -51,8 +50,6 @@ let visibleTableLines = 0;
 let testActivityEl: HTMLElement | null;
 let historyTable: SortedTableWithLimit<SnapshotResult<Mode>>;
 
-let accountDispose: () => void;
-
 function loadMoreLines(lineIndex?: number): void {
   if (filteredResults === undefined || filteredResults.length === 0) return;
   let newVisibleLines;
@@ -1245,12 +1242,10 @@ export const page = new Page<undefined>({
   afterHide: async (): Promise<void> => {
     reset();
     Skeleton.remove("pageAccount");
-    accountDispose?.();
   },
   beforeShow: async (): Promise<void> => {
     Skeleton.append("pageAccount", "main");
     const snapshot = DB.getSnapshot();
-    accountDispose = mountAccountPage();
     await ResultFilters.appendDropdowns(update);
     ResultFilters.updateActive();
     await Misc.sleep(0);
diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index bfa0ed2412b6..bb7dce51c1f6 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -61,14 +61,3 @@ export function mountLiveCounters(): void {
     miniWrapper.native,
   );
 }
-
-export function mountAccountPage(): () => void {
-  const wrapper = qsr("#accountSpeedStyle").setText("");
-  const speedStyleDispose = render(
-    () => <LiveCounter value={getLiveSpeedStyle} />,
-    wrapper.native,
-  );
-  return () => {
-    speedStyleDispose();
-  };
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bf42a7053d3a..bf3f19e0cc68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -224,7 +224,7 @@ importers:
         version: 10.0.0
       '@vitest/coverage-v8':
         specifier: 4.0.15
-        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
+        version: 4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
       concurrently:
         specifier: 8.2.2
         version: 8.2.2
@@ -411,7 +411,7 @@ importers:
         version: 5.0.2
       '@vitest/coverage-v8':
         specifier: 4.0.15
-        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
+        version: 4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
       autoprefixer:
         specifier: 10.4.20
         version: 10.4.20(postcss@8.4.31)
@@ -433,9 +433,6 @@ importers:
       happy-dom:
         specifier: 20.0.10
         version: 20.0.10
-      jsdom:
-        specifier: 27.4.0
-        version: 27.4.0
       madge:
         specifier: 8.0.0
         version: 8.0.0(typescript@5.9.3)
@@ -9811,7 +9808,8 @@ packages:
 
 snapshots:
 
-  '@acemir/cssom@0.9.30': {}
+  '@acemir/cssom@0.9.30':
+    optional: true
 
   '@adobe/css-tools@4.4.4': {}
 
@@ -9847,6 +9845,7 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
       lru-cache: 11.2.4
+    optional: true
 
   '@asamuzakjp/dom-selector@6.7.6':
     dependencies:
@@ -9855,8 +9854,10 @@ snapshots:
       css-tree: 3.1.0
       is-potential-custom-element-name: 1.0.1
       lru-cache: 11.2.4
+    optional: true
 
-  '@asamuzakjp/nwsapi@2.3.9': {}
+  '@asamuzakjp/nwsapi@2.3.9':
+    optional: true
 
   '@babel/code-frame@7.27.1':
     dependencies:
@@ -10747,12 +10748,14 @@ snapshots:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
-  '@csstools/color-helpers@5.1.0': {}
+  '@csstools/color-helpers@5.1.0':
+    optional: true
 
   '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
+    optional: true
 
   '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
     dependencies:
@@ -10760,14 +10763,18 @@ snapshots:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
+    optional: true
 
   '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
     dependencies:
       '@csstools/css-tokenizer': 3.0.4
+    optional: true
 
-  '@csstools/css-syntax-patches-for-csstree@1.0.23': {}
+  '@csstools/css-syntax-patches-for-csstree@1.0.23':
+    optional: true
 
-  '@csstools/css-tokenizer@3.0.4': {}
+  '@csstools/css-tokenizer@3.0.4':
+    optional: true
 
   '@dabh/diagnostics@2.0.3':
     dependencies:
@@ -11085,7 +11092,8 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
-  '@exodus/bytes@1.8.0': {}
+  '@exodus/bytes@1.8.0':
+    optional: true
 
   '@exodus/schemasafe@1.3.0': {}
 
@@ -12913,7 +12921,7 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       eslint-visitor-keys: 3.4.3
 
-  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
+  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.0.15
@@ -12926,11 +12934,11 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+      vitest: 4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
+  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.0.15
@@ -12943,7 +12951,7 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+      vitest: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -13415,6 +13423,7 @@ snapshots:
   bidi-js@1.0.3:
     dependencies:
       require-from-string: 2.0.2
+    optional: true
 
   bignumber.js@9.1.2: {}
 
@@ -14140,6 +14149,7 @@ snapshots:
     dependencies:
       mdn-data: 2.12.2
       source-map-js: 1.2.1
+    optional: true
 
   css-what@6.1.0: {}
 
@@ -14151,6 +14161,7 @@ snapshots:
       '@csstools/css-syntax-patches-for-csstree': 1.0.23
       css-tree: 3.1.0
       lru-cache: 11.2.4
+    optional: true
 
   csstype@3.1.3: {}
 
@@ -14166,6 +14177,7 @@ snapshots:
     dependencies:
       whatwg-mimetype: 4.0.0
       whatwg-url: 15.1.0
+    optional: true
 
   data-view-buffer@1.0.2:
     dependencies:
@@ -14224,7 +14236,8 @@ snapshots:
 
   decamelize@1.2.0: {}
 
-  decimal.js@10.6.0: {}
+  decimal.js@10.6.0:
+    optional: true
 
   decko@1.2.0: {}
 
@@ -14533,7 +14546,8 @@ snapshots:
 
   entities@5.0.0: {}
 
-  entities@6.0.1: {}
+  entities@6.0.1:
+    optional: true
 
   env-paths@2.2.1:
     optional: true
@@ -15740,6 +15754,7 @@ snapshots:
       '@exodus/bytes': 1.8.0
     transitivePeerDependencies:
       - '@exodus/crypto'
+    optional: true
 
   html-entities@2.3.3: {}
 
@@ -16100,7 +16115,8 @@ snapshots:
 
   is-plain-obj@1.1.0: {}
 
-  is-potential-custom-element-name@1.0.1: {}
+  is-potential-custom-element-name@1.0.1:
+    optional: true
 
   is-promise@4.0.0: {}
 
@@ -16333,6 +16349,7 @@ snapshots:
       - bufferutil
       - supports-color
       - utf-8-validate
+    optional: true
 
   jsep@1.4.0: {}
 
@@ -16777,7 +16794,8 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  mdn-data@2.12.2: {}
+  mdn-data@2.12.2:
+    optional: true
 
   media-typer@0.3.0: {}
 
@@ -17785,6 +17803,7 @@ snapshots:
   parse5@8.0.0:
     dependencies:
       entities: 6.0.1
+    optional: true
 
   parseurl@1.3.3: {}
 
@@ -18579,6 +18598,7 @@ snapshots:
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
+    optional: true
 
   scheduler@0.23.2:
     dependencies:
@@ -19268,7 +19288,8 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  symbol-tree@3.2.4: {}
+  symbol-tree@3.2.4:
+    optional: true
 
   tapable@2.2.1: {}
 
@@ -19426,11 +19447,13 @@ snapshots:
 
   tinyrainbow@3.0.3: {}
 
-  tldts-core@7.0.19: {}
+  tldts-core@7.0.19:
+    optional: true
 
   tldts@7.0.19:
     dependencies:
       tldts-core: 7.0.19
+    optional: true
 
   tmp@0.0.33:
     dependencies:
@@ -19463,6 +19486,7 @@ snapshots:
   tough-cookie@6.0.0:
     dependencies:
       tldts: 7.0.19
+    optional: true
 
   toxic@1.0.1:
     dependencies:
@@ -19481,6 +19505,7 @@ snapshots:
   tr46@6.0.0:
     dependencies:
       punycode: 2.3.1
+    optional: true
 
   tree-kill@1.2.2: {}
 
@@ -20032,6 +20057,7 @@ snapshots:
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
+    optional: true
 
   walkdir@0.4.1: {}
 
@@ -20062,7 +20088,8 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
-  webidl-conversions@8.0.1: {}
+  webidl-conversions@8.0.1:
+    optional: true
 
   webpack-sources@3.2.3: {}
 
@@ -20082,7 +20109,8 @@ snapshots:
 
   whatwg-mimetype@3.0.0: {}
 
-  whatwg-mimetype@4.0.0: {}
+  whatwg-mimetype@4.0.0:
+    optional: true
 
   whatwg-url@13.0.0:
     dependencies:
@@ -20093,6 +20121,7 @@ snapshots:
     dependencies:
       tr46: 6.0.0
       webidl-conversions: 8.0.1
+    optional: true
 
   whatwg-url@5.0.0:
     dependencies:
@@ -20343,7 +20372,8 @@ snapshots:
 
   ws@7.5.10: {}
 
-  ws@8.19.0: {}
+  ws@8.19.0:
+    optional: true
 
   wsl-utils@0.1.0:
     dependencies:
@@ -20351,9 +20381,11 @@ snapshots:
 
   xdg-basedir@4.0.0: {}
 
-  xml-name-validator@5.0.0: {}
+  xml-name-validator@5.0.0:
+    optional: true
 
-  xmlchars@2.2.0: {}
+  xmlchars@2.2.0:
+    optional: true
 
   xtend@4.0.2: {}
 

From 205a5154dfb97343d59a27d5fc32de897f3bcedf Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 16:55:39 +0100
Subject: [PATCH 09/43] dont export state setters

---
 frontend/src/ts/signals/config.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/signals/config.ts b/frontend/src/ts/signals/config.ts
index af5c7531f92c..8a8a6e02fcb3 100644
--- a/frontend/src/ts/signals/config.ts
+++ b/frontend/src/ts/signals/config.ts
@@ -2,16 +2,16 @@ import { createSignal } from "solid-js";
 import * as ConfigEvent from "../observables/config-event";
 import config from "../config";
 
-export const [getLiveSpeedStyle, setLiveSpeedStyle] = createSignal(
+const [getLiveSpeedStyle, setLiveSpeedStyle] = createSignal(
   config.liveSpeedStyle,
 );
-export const [getLiveAccStyle, setLiveAccStyle] = createSignal(
-  config.liveSpeedStyle,
-);
-export const [getLiveBurstStyle, setLiveBurstStyle] = createSignal(
+const [getLiveAccStyle, setLiveAccStyle] = createSignal(config.liveSpeedStyle);
+const [getLiveBurstStyle, setLiveBurstStyle] = createSignal(
   config.liveSpeedStyle,
 );
 
+export { getLiveSpeedStyle, getLiveAccStyle, getLiveBurstStyle };
+
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "liveSpeedStyle") {
     setLiveSpeedStyle(newValue);

From 75a36c9feb3a584ccda2b32efe820268a0f7884d Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 16:56:10 +0100
Subject: [PATCH 10/43] use signals for focus and isactive state

---
 frontend/src/ts/config.ts                     |  4 ++--
 frontend/src/ts/controllers/ad-controller.ts  |  2 +-
 .../src/ts/controllers/route-controller.ts    |  2 +-
 .../src/ts/input/handlers/before-delete.ts    |  2 +-
 frontend/src/ts/input/handlers/insert-text.ts |  2 +-
 .../src/ts/input/listeners/composition.ts     |  2 +-
 frontend/src/ts/signals/live-states.ts        |  2 --
 frontend/src/ts/states/connection.ts          |  2 +-
 frontend/src/ts/test/focus.ts                 | 20 ++++++++++---------
 frontend/src/ts/test/live-states.tsx          | 12 ++++-------
 frontend/src/ts/test/monkey.ts                |  2 +-
 frontend/src/ts/test/pace-caret.ts            |  2 +-
 frontend/src/ts/test/test-logic.ts            | 10 +++++-----
 frontend/src/ts/test/test-state.ts            |  7 ++-----
 frontend/src/ts/test/test-stats.ts            |  6 +++---
 frontend/src/ts/test/test-timer.ts            |  2 +-
 frontend/src/ts/test/test-ui.ts               | 11 ++--------
 frontend/src/ts/test/timer-progress.ts        |  4 ++--
 frontend/src/ts/ui.ts                         |  2 +-
 19 files changed, 41 insertions(+), 55 deletions(-)

diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
index 271105df54d9..eef25f4bdbc1 100644
--- a/frontend/src/ts/config.ts
+++ b/frontend/src/ts/config.ts
@@ -79,7 +79,7 @@ export function saveFullConfigToLocalStorage(noDbCheck = false): void {
 }
 
 function isConfigChangeBlocked(): boolean {
-  if (TestState.isActive && config.funbox.includes("no_quit")) {
+  if (TestState.isActive() && config.funbox.includes("no_quit")) {
     Notifications.add("No quit funbox is active. Please finish the test.", 0, {
       important: true,
     });
@@ -112,7 +112,7 @@ export function setConfig<T extends keyof Config>(
 
   if (
     metadata.changeRequiresRestart &&
-    TestState.isActive &&
+    TestState.isActive() &&
     config.funbox.includes("no_quit")
   ) {
     Notifications.add("No quit funbox is active. Please finish the test.", 0, {
diff --git a/frontend/src/ts/controllers/ad-controller.ts b/frontend/src/ts/controllers/ad-controller.ts
index 31bab3ca7659..d9c98545eceb 100644
--- a/frontend/src/ts/controllers/ad-controller.ts
+++ b/frontend/src/ts/controllers/ad-controller.ts
@@ -42,7 +42,7 @@ function init(): void {
   }
 
   setInterval(() => {
-    if (TestState.isActive) {
+    if (TestState.isActive()) {
       return;
     }
     if (choice === "eg") {
diff --git a/frontend/src/ts/controllers/route-controller.ts b/frontend/src/ts/controllers/route-controller.ts
index d9d4295251c4..5949cc683c3a 100644
--- a/frontend/src/ts/controllers/route-controller.ts
+++ b/frontend/src/ts/controllers/route-controller.ts
@@ -176,7 +176,7 @@ export async function navigate(
   }
 
   const noQuit = isFunboxActive("no_quit");
-  if (TestState.isActive && noQuit) {
+  if (TestState.isActive() && noQuit) {
     Notifications.add("No quit funbox is active. Please finish the test.", 0, {
       important: true,
     });
diff --git a/frontend/src/ts/input/handlers/before-delete.ts b/frontend/src/ts/input/handlers/before-delete.ts
index 79fb28d77d50..c42d36517bf4 100644
--- a/frontend/src/ts/input/handlers/before-delete.ts
+++ b/frontend/src/ts/input/handlers/before-delete.ts
@@ -7,7 +7,7 @@ import * as TestUI from "../../test/test-ui";
 import { isAwaitingNextWord } from "../state";
 
 export function onBeforeDelete(event: InputEvent): void {
-  if (!TestState.isActive) {
+  if (!TestState.isActive()) {
     event.preventDefault();
     return;
   }
diff --git a/frontend/src/ts/input/handlers/insert-text.ts b/frontend/src/ts/input/handlers/insert-text.ts
index 00a0f7258522..6ecc39886d94 100644
--- a/frontend/src/ts/input/handlers/insert-text.ts
+++ b/frontend/src/ts/input/handlers/insert-text.ts
@@ -113,7 +113,7 @@ export async function onInsertText(options: OnInsertTextParams): Promise<void> {
   const data = normalizedData ?? options.data;
 
   // start if needed
-  if (!TestState.isActive) {
+  if (!TestState.isActive()) {
     TestLogic.startTest(now);
   }
 
diff --git a/frontend/src/ts/input/listeners/composition.ts b/frontend/src/ts/input/listeners/composition.ts
index e3388a557df7..4904651c1ee9 100644
--- a/frontend/src/ts/input/listeners/composition.ts
+++ b/frontend/src/ts/input/listeners/composition.ts
@@ -19,7 +19,7 @@ inputEl.addEventListener("compositionstart", (event) => {
   CompositionState.setComposing(true);
   CompositionState.setData("");
   setLastInsertCompositionTextData("");
-  if (!TestState.isActive) {
+  if (!TestState.isActive()) {
     TestLogic.startTest(performance.now());
   }
 });
diff --git a/frontend/src/ts/signals/live-states.ts b/frontend/src/ts/signals/live-states.ts
index 1ac3bdbbd2c8..7440f8bbdf19 100644
--- a/frontend/src/ts/signals/live-states.ts
+++ b/frontend/src/ts/signals/live-states.ts
@@ -2,5 +2,3 @@ import { createSignal } from "solid-js";
 export const [getWpm, setWpm] = createSignal("0");
 export const [getAcc, setAcc] = createSignal("100%");
 export const [getBurst, setBurst] = createSignal("0");
-export const [getFocus, setFocus] = createSignal(false);
-export const [getTestRunning, setTestRunning] = createSignal(false);
diff --git a/frontend/src/ts/states/connection.ts b/frontend/src/ts/states/connection.ts
index efaeebd8f6a4..76bd47cfa287 100644
--- a/frontend/src/ts/states/connection.ts
+++ b/frontend/src/ts/states/connection.ts
@@ -39,7 +39,7 @@ const throttledHandleState = debounce(5000, () => {
       )?.dispatch("click");
     }
     bannerAlreadyClosed = false;
-  } else if (!TestState.isActive) {
+  } else if (!TestState.isActive()) {
     showOfflineBanner();
   }
 });
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index dd2bad158283..4ce820e55a67 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -2,10 +2,10 @@ import * as Caret from "./caret";
 import * as TimerProgress from "./timer-progress";
 import * as PageTransition from "../states/page-transition";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { setFocus } from "../signals/live-states";
+import { createSignal } from "solid-js";
 
 const unfocusPx = 3;
-let state = false;
+let [state, setState] = createSignal(false);
 
 let cacheReady = false;
 let cache: {
@@ -13,6 +13,10 @@ let cache: {
   cursor?: HTMLElement[];
 } = {};
 
+export function isFocused(): boolean {
+  return state();
+}
+
 function initializeCache(): void {
   if (cacheReady) return;
 
@@ -43,8 +47,8 @@ export function set(value: boolean, withCursor = false): void {
   requestDebouncedAnimationFrame("focus.set", () => {
     initializeCache();
 
-    if (value && !state) {
-      state = true;
+    if (value && !state()) {
+      setState(true);
 
       // batch DOM operations for better performance
       if (cache.focus) {
@@ -60,8 +64,8 @@ export function set(value: boolean, withCursor = false): void {
 
       Caret.stopAnimation();
       TimerProgress.show();
-    } else if (!value && state) {
-      state = false;
+    } else if (!value && state()) {
+      setState(false);
 
       if (cache.focus) {
         for (const el of cache.focus) {
@@ -77,14 +81,12 @@ export function set(value: boolean, withCursor = false): void {
       Caret.startAnimation();
       TimerProgress.hide();
     }
-
-    setFocus(state);
   });
 }
 
 $(document).on("mousemove", function (event) {
   if (PageTransition.get()) return;
-  if (!state) return;
+  if (!state()) return;
   if (
     event.originalEvent &&
     // To avoid mouse/desk vibration from creating a flashy effect, we'll unfocus @ >5px instead of >0px
diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index bb7dce51c1f6..c5cbad303082 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -2,20 +2,16 @@ import { createMemo } from "solid-js";
 import { qsr } from "../utils/dom";
 import { LiveCounter } from "./live-counter";
 import { render } from "solid-js/web";
-import {
-  getAcc,
-  getBurst,
-  getFocus,
-  getTestRunning,
-  getWpm,
-} from "../signals/live-states";
+import { getAcc, getBurst, getWpm } from "../signals/live-states";
 import {
   getLiveAccStyle,
   getLiveBurstStyle,
   getLiveSpeedStyle,
 } from "../signals/config";
+import { isActive } from "./test-state";
+import { isFocused } from "./focus";
 
-const isTestRunning = createMemo(() => getTestRunning() && getFocus());
+const isTestRunning = createMemo(() => isActive() && isFocused());
 
 const liveWpmText = createMemo(() =>
   isTestRunning() && getLiveSpeedStyle() === "text" ? getWpm() : "",
diff --git a/frontend/src/ts/test/monkey.ts b/frontend/src/ts/test/monkey.ts
index b1966c3e4c86..f05a6f0e2980 100644
--- a/frontend/src/ts/test/monkey.ts
+++ b/frontend/src/ts/test/monkey.ts
@@ -9,7 +9,7 @@ const monkeyEl = document.querySelector("#monkey") as HTMLElement;
 const monkeyFastEl = document.querySelector("#monkey .fast") as HTMLElement;
 
 ConfigEvent.subscribe(({ key }) => {
-  if (key === "monkey" && TestState.isActive) {
+  if (key === "monkey" && TestState.isActive()) {
     if (Config.monkey) {
       monkeyEl.classList.remove("hidden");
     } else {
diff --git a/frontend/src/ts/test/pace-caret.ts b/frontend/src/ts/test/pace-caret.ts
index da0b4d01cd40..8308495896d4 100644
--- a/frontend/src/ts/test/pace-caret.ts
+++ b/frontend/src/ts/test/pace-caret.ts
@@ -133,7 +133,7 @@ export async function update(expectedStepEnd: number): Promise<void> {
   const currentSettings = settings;
   if (
     currentSettings === null ||
-    !TestState.isActive ||
+    !TestState.isActive() ||
     TestState.resultVisible
   ) {
     return;
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 90138cefa18f..a01ef91b568b 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -151,7 +151,7 @@ export function restart(options = {} as RestartOptions): void {
   const animationTime = options.noAnim ? 0 : Misc.applyReducedMotion(125);
 
   const noQuit = isFunboxActive("no_quit");
-  if (TestState.isActive && noQuit) {
+  if (TestState.isActive() && noQuit) {
     Notifications.add("No quit funbox is active. Please finish the test.", 0, {
       important: true,
     });
@@ -196,7 +196,7 @@ export function restart(options = {} as RestartOptions): void {
     }
   }
 
-  if (TestState.isActive) {
+  if (TestState.isActive()) {
     if (TestState.isRepeated) {
       options.withSameWordset = true;
     }
@@ -221,7 +221,7 @@ export function restart(options = {} as RestartOptions): void {
     TestWords.currentQuote !== null &&
     Config.language.startsWith(TestWords.currentQuote.language) &&
     Config.repeatQuotes === "typing" &&
-    (TestState.isActive || failReason !== "")
+    (TestState.isActive() || failReason !== "")
   ) {
     options.withSameWordset = true;
   }
@@ -854,7 +854,7 @@ function buildCompletedEvent(
 }
 
 export async function finish(difficultyFailed = false): Promise<void> {
-  if (!TestState.isActive) return;
+  if (!TestState.isActive()) return;
   TestUI.setResultCalculating(true);
   const now = performance.now();
   TestTimer.clear();
@@ -1404,7 +1404,7 @@ $(".pageTest").on("click", "#restartTestButton", () => {
   ManualRestart.set();
   if (TestUI.resultCalculating) return;
   if (
-    TestState.isActive &&
+    TestState.isActive() &&
     Config.repeatQuotes === "typing" &&
     Config.mode === "quote"
   ) {
diff --git a/frontend/src/ts/test/test-state.ts b/frontend/src/ts/test/test-state.ts
index 1b5079d9d377..a47220c75830 100644
--- a/frontend/src/ts/test/test-state.ts
+++ b/frontend/src/ts/test/test-state.ts
@@ -1,9 +1,10 @@
 import { Challenge } from "@monkeytype/schemas/challenges";
 import { promiseWithResolvers } from "../utils/misc";
+import { createSignal } from "solid-js";
 
 export let isRepeated = false;
 export let isPaceRepeat = false;
-export let isActive = false;
+export let [isActive, setActive] = createSignal(false);
 export let activeChallenge: null | Challenge = null;
 export let savingEnabled = true;
 export let bailedOut = false;
@@ -23,10 +24,6 @@ export function setPaceRepeat(tf: boolean): void {
   isPaceRepeat = tf;
 }
 
-export function setActive(tf: boolean): void {
-  isActive = tf;
-}
-
 export function setActiveChallenge(val: null | Challenge): void {
   activeChallenge = val;
 }
diff --git a/frontend/src/ts/test/test-stats.ts b/frontend/src/ts/test/test-stats.ts
index 2644e4ee6a88..9d27941de477 100644
--- a/frontend/src/ts/test/test-stats.ts
+++ b/frontend/src/ts/test/test-stats.ts
@@ -160,7 +160,7 @@ export function calculateWpmAndRaw(
   raw: number;
 } {
   const testSeconds = calculateTestSeconds(
-    TestState.isActive ? performance.now() : end,
+    TestState.isActive() ? performance.now() : end,
   );
   const chars = countChars(final);
   const wpm = Numbers.roundTo2(
@@ -256,7 +256,7 @@ function getInputWords(): string[] {
 
   let inputWords = [...TestInput.input.getHistory()];
 
-  if (TestState.isActive) {
+  if (TestState.isActive()) {
     inputWords.push(TestInput.input.current);
   }
 
@@ -276,7 +276,7 @@ function getTargetWords(): string[] {
       : TestWords.words.list),
   ];
 
-  if (TestState.isActive) {
+  if (TestState.isActive()) {
     targetWords.push(
       Config.mode === "zen"
         ? TestInput.input.current
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index fa18c2eceb49..4c67aa4ddec6 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -308,7 +308,7 @@ async function _startOld(): Promise<void> {
     const drift = Math.abs(interval - delay);
     checkIfTimerIsSlow(drift);
     timer = setTimeout(function () {
-      if (!TestState.isActive) {
+      if (!TestState.isActive()) {
         if (timer !== null) clearTimeout(timer);
         SlowTimer.clear();
         slowTimerCount = 0;
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index a388ff7637b1..ee5d9a2c78db 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -55,12 +55,7 @@ import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
-import {
-  setAcc,
-  setBurst,
-  setTestRunning,
-  setWpm,
-} from "../signals/live-states";
+import { setAcc, setBurst, setWpm } from "../signals/live-states";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -88,7 +83,7 @@ export function focusWords(force = false): void {
     blurInputElement();
   }
   focusInputElement(true);
-  if (TestState.isActive) {
+  if (TestState.isActive()) {
     keepWordsInputInTheCenter(true);
   } else {
     const typingTest = document.querySelector<HTMLElement>("#typingTest");
@@ -1818,7 +1813,6 @@ export function onTestStart(): void {
   Focus.set(true);
   Monkey.show();
   TimerProgress.show();
-  setTestRunning(true);
   TimerProgress.update();
 }
 
@@ -1875,7 +1869,6 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
 
 export function onTestFinish(): void {
   Caret.hide();
-  setTestRunning(false);
   TimerProgress.hide();
   OutOfFocus.hide();
   Monkey.hide();
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index a1fe882caa08..8b3967d60b94 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -20,7 +20,7 @@ const textEl = document.querySelector(
 const miniEl = document.querySelector("#liveStatsMini .time") as HTMLElement;
 
 export function show(): void {
-  if (!TestState.isActive) return;
+  if (!TestState.isActive()) return;
   requestDebouncedAnimationFrame("timer-progress.show", () => {
     if (Config.mode !== "zen" && Config.timerStyle === "bar") {
       animate(barOpacityEl, {
@@ -255,7 +255,7 @@ export function update(): void {
 }
 
 export function updateStyle(): void {
-  if (!TestState.isActive) return;
+  if (!TestState.isActive()) return;
   hide();
   update();
   if (Config.timerStyle === "off") return;
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 568a21cb1f50..39d2ed126dee 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -81,7 +81,7 @@ window.addEventListener("beforeunload", (event) => {
   ) {
     //ignore
   } else {
-    if (TestState.isActive) {
+    if (TestState.isActive()) {
       event.preventDefault();
       // Included for legacy support, e.g. Chrome/Edge < 119
       // oxlint-disable-next-line no-deprecated

From 4007f439bcdebf3dc234f8e76d6cc1d39a9c1ca3 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 16:57:42 +0100
Subject: [PATCH 11/43] pre-commit lint

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aa1d0b896aa2..a69cd880458f 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
     "*": [
       "oxfmt --no-error-on-unmatched-pattern"
     ],
-    "*.{ts,js}": [
+    "*.{ts,tsx,js}": [
       "oxlint --type-aware --type-check"
     ]
   },

From bca19b493331725351019081da7ba292eec0a74c Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 17:05:25 +0100
Subject: [PATCH 12/43] obsolete

---
 frontend/src/ts/test/test-ui.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index ee5d9a2c78db..6b62a53cb95a 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -55,7 +55,7 @@ import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
-import { setAcc, setBurst, setWpm } from "../signals/live-states";
+import { setAcc, setBurst } from "../signals/live-states";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -1822,9 +1822,6 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   getInputElement().style.left = "0";
   TestConfig.show();
   Focus.set(false);
-  setWpm("");
-  setBurst("");
-  setAcc("");
   TimerProgress.instantHide();
   TimerProgress.reset();
   Monkey.instantHide();

From 80d8c22c52a847cc96c3aa163239b1899cf5774d Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 17:22:16 +0100
Subject: [PATCH 13/43] animation wip

---
 frontend/src/ts/signals/live-states.ts |  4 ---
 frontend/src/ts/test/live-counter.tsx  | 37 +++++++++++++++++++++++--
 frontend/src/ts/test/live-states.tsx   | 38 +++++++++++++++-----------
 frontend/src/ts/test/test-timer.ts     |  4 +--
 frontend/src/ts/test/test-ui.ts        | 24 ++++++++++++++--
 5 files changed, 80 insertions(+), 27 deletions(-)
 delete mode 100644 frontend/src/ts/signals/live-states.ts

diff --git a/frontend/src/ts/signals/live-states.ts b/frontend/src/ts/signals/live-states.ts
deleted file mode 100644
index 7440f8bbdf19..000000000000
--- a/frontend/src/ts/signals/live-states.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createSignal } from "solid-js";
-export const [getWpm, setWpm] = createSignal("0");
-export const [getAcc, setAcc] = createSignal("100%");
-export const [getBurst, setBurst] = createSignal("0");
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index 13c4700413df..8fc45dc10533 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -1,11 +1,44 @@
-import { Accessor, JSXElement } from "solid-js";
+import { Accessor, createEffect, JSXElement } from "solid-js";
+import { animate } from "animejs";
+import { isFocused } from "./focus";
 
 export function LiveCounter(props: {
   value: Accessor<string>;
+  visible: Accessor<{
+    value: boolean;
+    withAnimation: boolean;
+  }>;
   class?: string;
 }): JSXElement {
+  let divRef: HTMLDivElement | undefined;
+
+  createEffect(() => {
+    if (divRef === undefined) return;
+    const visibleState = props.visible();
+    const focusState = isFocused();
+    if (visibleState.value && focusState) {
+      if (visibleState.withAnimation) {
+        animate(divRef, {
+          opacity: [0, 1],
+          duration: 125,
+        });
+      } else {
+        divRef.style.opacity = "1";
+      }
+    } else {
+      if (visibleState.withAnimation) {
+        animate(divRef, {
+          opacity: [1, 0],
+          duration: 125,
+        });
+      } else {
+        divRef.style.opacity = "0";
+      }
+    }
+  });
+
   return (
-    <div class={`${props.class}`} classList={{ hidden: props.value() === "" }}>
+    <div ref={divRef} class={`${props.class}`}>
       {props.value()}
     </div>
   );
diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index c5cbad303082..22b4408f06f2 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -1,35 +1,41 @@
-import { createMemo } from "solid-js";
+import { createMemo, createSignal } from "solid-js";
 import { qsr } from "../utils/dom";
 import { LiveCounter } from "./live-counter";
 import { render } from "solid-js/web";
-import { getAcc, getBurst, getWpm } from "../signals/live-states";
 import {
   getLiveAccStyle,
   getLiveBurstStyle,
   getLiveSpeedStyle,
 } from "../signals/config";
-import { isActive } from "./test-state";
-import { isFocused } from "./focus";
 
-const isTestRunning = createMemo(() => isActive() && isFocused());
+const [getWpm, setLiveStatWpm] = createSignal("0");
+const [getAcc, setLiveStatAcc] = createSignal("100%");
+const [getBurst, setLiveStatBurst] = createSignal("0");
+
+const [wpmVisible, setWpmVisible] = createSignal({
+  value: false,
+  withAnimation: true,
+});
+
+export { setLiveStatWpm, setLiveStatAcc, setLiveStatBurst, setWpmVisible };
 
 const liveWpmText = createMemo(() =>
-  isTestRunning() && getLiveSpeedStyle() === "text" ? getWpm() : "",
+  getLiveSpeedStyle() === "text" ? getWpm() : "",
 );
 const liveWpmMini = createMemo(() =>
-  isTestRunning() && getLiveSpeedStyle() === "mini" ? getWpm() : "",
+  getLiveSpeedStyle() === "mini" ? getWpm() : "",
 );
 const liveAccText = createMemo(() =>
-  isTestRunning() && getLiveAccStyle() === "text" ? getAcc() : "",
+  getLiveAccStyle() === "text" ? getAcc() : "",
 );
 const liveAccMini = createMemo(() =>
-  isTestRunning() && getLiveAccStyle() === "mini" ? getAcc() : "",
+  getLiveAccStyle() === "mini" ? getAcc() : "",
 );
 const liveBurstText = createMemo(() =>
-  isTestRunning() && getLiveBurstStyle() === "text" ? getBurst() : "",
+  getLiveBurstStyle() === "text" ? getBurst() : "",
 );
 const liveBurstMini = createMemo(() =>
-  isTestRunning() && getLiveBurstStyle() === "mini" ? getBurst() : "",
+  getLiveBurstStyle() === "mini" ? getBurst() : "",
 );
 
 export function mountLiveCounters(): void {
@@ -37,9 +43,9 @@ export function mountLiveCounters(): void {
   render(
     () => (
       <div class="wrapper">
-        <LiveCounter class="liveSpeed" value={liveWpmText} />
+        {/* <LiveCounter class="liveSpeed" value={liveWpmText} />
         <LiveCounter class="liveAcc" value={liveAccText} />
-        <LiveCounter class="liveBurst" value={liveBurstText} />
+        <LiveCounter class="liveBurst" value={liveBurstText} /> */}
       </div>
     ),
     textWrapper.native,
@@ -49,9 +55,9 @@ export function mountLiveCounters(): void {
   render(
     () => (
       <div>
-        <LiveCounter class="speed" value={liveWpmMini} />
-        <LiveCounter class="acc" value={liveAccMini} />
-        <LiveCounter class="burst" value={liveBurstMini} />
+        <LiveCounter class="speed" value={liveWpmMini} visible={wpmVisible} />
+        {/* <LiveCounter class="acc" value={liveAccMini} />
+        <LiveCounter class="burst" value={liveBurstMini} /> */}
       </div>
     ),
     miniWrapper.native,
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index 4c67aa4ddec6..b8bb36d49ae5 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -20,8 +20,8 @@ import * as SoundController from "../controllers/sound-controller";
 import { clearLowFpsMode, setLowFpsMode } from "../anim";
 import { createTimer } from "animejs";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { setWpm } from "../signals/live-states";
 import Format from "../utils/format";
+import { setLiveStatWpm } from "./live-states";
 
 let lastLoop = 0;
 const newTimer = createTimer({
@@ -236,7 +236,7 @@ function timerStep(): void {
 
   // already using raf
   TimerProgress.update();
-  setWpm(
+  setLiveStatWpm(
     Format.typingSpeed(Config.blindMode ? wpmAndRaw.raw : wpmAndRaw.wpm, {
       showDecimalPlaces: false,
     }),
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 6b62a53cb95a..a95ba5157bb6 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -55,7 +55,12 @@ import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
-import { setAcc, setBurst } from "../signals/live-states";
+import {
+  setLiveStatAcc,
+  setLiveStatBurst,
+  setLiveStatWpm,
+  setWpmVisible,
+} from "./live-states";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -1679,7 +1684,7 @@ function afterAnyTestInput(
 
   const acc: number = Numbers.roundTo2(TestStats.calculateAccuracy());
   if (!isNaN(acc)) {
-    setAcc(Format.percentage(Config.blindMode ? 100 : acc));
+    setLiveStatAcc(Format.percentage(Config.blindMode ? 100 : acc));
   }
 
   if (Config.mode !== "time") {
@@ -1784,7 +1789,9 @@ export async function afterTestWordChange(
 
   const lastBurst = TestInput.burstHistory[TestInput.burstHistory.length - 1];
   if (Numbers.isSafeNumber(lastBurst)) {
-    setBurst(Format.typingSpeed(lastBurst, { showDecimalPlaces: false }));
+    setLiveStatBurst(
+      Format.typingSpeed(lastBurst, { showDecimalPlaces: false }),
+    );
   }
   if (direction === "forward") {
     //
@@ -1814,6 +1821,10 @@ export function onTestStart(): void {
   Monkey.show();
   TimerProgress.show();
   TimerProgress.update();
+  setWpmVisible({
+    value: true,
+    withAnimation: true,
+  });
 }
 
 export function onTestRestart(source: "testPage" | "resultPage"): void {
@@ -1822,6 +1833,13 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   getInputElement().style.left = "0";
   TestConfig.show();
   Focus.set(false);
+  setWpmVisible({
+    value: false,
+    withAnimation: false,
+  });
+  setLiveStatWpm("0");
+  setLiveStatBurst("");
+  setLiveStatAcc("");
   TimerProgress.instantHide();
   TimerProgress.reset();
   Monkey.instantHide();

From e9fcf1fefccdf16fa89eb63f70881b2a3e5433a0 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 17:27:14 +0100
Subject: [PATCH 14/43] need to ignore lint error

---
 frontend/src/ts/test/live-counter.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index 8fc45dc10533..39d49528885b 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -10,6 +10,7 @@ export function LiveCounter(props: {
   }>;
   class?: string;
 }): JSXElement {
+  // oxlint-disable-next-line no-unassigned-vars
   let divRef: HTMLDivElement | undefined;
 
   createEffect(() => {

From f6fe948ab8458fd5830e4eb2a69e6ce7f989cbc3 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 17:30:42 +0100
Subject: [PATCH 15/43] util

---
 frontend/src/ts/test/live-counter.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index 39d49528885b..0e17aa130f3c 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -1,5 +1,5 @@
-import { Accessor, createEffect, JSXElement } from "solid-js";
-import { animate } from "animejs";
+import { Accessor, createEffect, JSXElement, onMount } from "solid-js";
+import { ElementWithUtils } from "../utils/dom";
 import { isFocused } from "./focus";
 
 export function LiveCounter(props: {
@@ -12,28 +12,35 @@ export function LiveCounter(props: {
 }): JSXElement {
   // oxlint-disable-next-line no-unassigned-vars
   let divRef: HTMLDivElement | undefined;
+  let divUtil: ElementWithUtils<HTMLDivElement> | undefined;
+
+  onMount(() => {
+    if (divRef) {
+      divUtil = new ElementWithUtils(divRef);
+    }
+  });
 
   createEffect(() => {
-    if (divRef === undefined) return;
+    if (divUtil === undefined) return;
     const visibleState = props.visible();
     const focusState = isFocused();
     if (visibleState.value && focusState) {
       if (visibleState.withAnimation) {
-        animate(divRef, {
+        divUtil.animate({
           opacity: [0, 1],
           duration: 125,
         });
       } else {
-        divRef.style.opacity = "1";
+        divUtil.setStyle({ opacity: "1" });
       }
     } else {
       if (visibleState.withAnimation) {
-        animate(divRef, {
+        divUtil.animate({
           opacity: [1, 0],
           duration: 125,
         });
       } else {
-        divRef.style.opacity = "0";
+        divUtil.setStyle({ opacity: "0" });
       }
     }
   });

From 1bae0e70d08e18a8e2289c5afeb5117c6e290fe2 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 17:38:32 +0100
Subject: [PATCH 16/43] final

---
 frontend/src/ts/test/live-states.tsx | 45 ++++++++++++++++++++--------
 frontend/src/ts/test/test-ui.ts      |  4 +--
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index 22b4408f06f2..f5532938442b 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -12,12 +12,17 @@ const [getWpm, setLiveStatWpm] = createSignal("0");
 const [getAcc, setLiveStatAcc] = createSignal("100%");
 const [getBurst, setLiveStatBurst] = createSignal("0");
 
-const [wpmVisible, setWpmVisible] = createSignal({
+const [statsVisible, setStatsVisible] = createSignal({
   value: false,
   withAnimation: true,
 });
 
-export { setLiveStatWpm, setLiveStatAcc, setLiveStatBurst, setWpmVisible };
+export {
+  setLiveStatWpm,
+  setLiveStatAcc,
+  setLiveStatBurst,
+  setStatsVisible as setWpmVisible,
+};
 
 const liveWpmText = createMemo(() =>
   getLiveSpeedStyle() === "text" ? getWpm() : "",
@@ -42,11 +47,23 @@ export function mountLiveCounters(): void {
   const textWrapper = qsr("#liveStatsTextBottom");
   render(
     () => (
-      <div class="wrapper">
-        {/* <LiveCounter class="liveSpeed" value={liveWpmText} />
-        <LiveCounter class="liveAcc" value={liveAccText} />
-        <LiveCounter class="liveBurst" value={liveBurstText} /> */}
-      </div>
+      <>
+        <LiveCounter
+          class="liveSpeed"
+          value={liveWpmText}
+          visible={statsVisible}
+        />
+        <LiveCounter
+          class="liveAcc"
+          value={liveAccText}
+          visible={statsVisible}
+        />
+        <LiveCounter
+          class="liveBurst"
+          value={liveBurstText}
+          visible={statsVisible}
+        />
+      </>
     ),
     textWrapper.native,
   );
@@ -54,11 +71,15 @@ export function mountLiveCounters(): void {
   const miniWrapper = qsr("#liveStatsMini");
   render(
     () => (
-      <div>
-        <LiveCounter class="speed" value={liveWpmMini} visible={wpmVisible} />
-        {/* <LiveCounter class="acc" value={liveAccMini} />
-        <LiveCounter class="burst" value={liveBurstMini} /> */}
-      </div>
+      <>
+        <LiveCounter class="speed" value={liveWpmMini} visible={statsVisible} />
+        <LiveCounter class="acc" value={liveAccMini} visible={statsVisible} />
+        <LiveCounter
+          class="burst"
+          value={liveBurstMini}
+          visible={statsVisible}
+        />
+      </>
     ),
     miniWrapper.native,
   );
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index a95ba5157bb6..c03fea197c53 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -1838,8 +1838,8 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
     withAnimation: false,
   });
   setLiveStatWpm("0");
-  setLiveStatBurst("");
-  setLiveStatAcc("");
+  setLiveStatBurst("0");
+  setLiveStatAcc("100%");
   TimerProgress.instantHide();
   TimerProgress.reset();
   Monkey.instantHide();

From a297539ba2053c1fff0e5aebca23bb6cca219d35 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 17:41:25 +0100
Subject: [PATCH 17/43] no rename

---
 frontend/src/ts/test/live-states.tsx | 7 +------
 frontend/src/ts/test/test-ui.ts      | 6 +++---
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index f5532938442b..7b65829d46ba 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -17,12 +17,7 @@ const [statsVisible, setStatsVisible] = createSignal({
   withAnimation: true,
 });
 
-export {
-  setLiveStatWpm,
-  setLiveStatAcc,
-  setLiveStatBurst,
-  setStatsVisible as setWpmVisible,
-};
+export { setLiveStatWpm, setLiveStatAcc, setLiveStatBurst, setStatsVisible };
 
 const liveWpmText = createMemo(() =>
   getLiveSpeedStyle() === "text" ? getWpm() : "",
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index c03fea197c53..f344d6cb04d7 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -59,7 +59,7 @@ import {
   setLiveStatAcc,
   setLiveStatBurst,
   setLiveStatWpm,
-  setWpmVisible,
+  setStatsVisible,
 } from "./live-states";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
@@ -1821,7 +1821,7 @@ export function onTestStart(): void {
   Monkey.show();
   TimerProgress.show();
   TimerProgress.update();
-  setWpmVisible({
+  setStatsVisible({
     value: true,
     withAnimation: true,
   });
@@ -1833,7 +1833,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   getInputElement().style.left = "0";
   TestConfig.show();
   Focus.set(false);
-  setWpmVisible({
+  setStatsVisible({
     value: false,
     withAnimation: false,
   });

From 12bb3ddab35a766c30d110b9c2f1063a11e74318 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 17:44:29 +0100
Subject: [PATCH 18/43] no memo

---
 frontend/src/ts/test/live-states.tsx | 39 ++++++++++------------------
 1 file changed, 14 insertions(+), 25 deletions(-)

diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index 7b65829d46ba..c9b832568318 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -19,25 +19,6 @@ const [statsVisible, setStatsVisible] = createSignal({
 
 export { setLiveStatWpm, setLiveStatAcc, setLiveStatBurst, setStatsVisible };
 
-const liveWpmText = createMemo(() =>
-  getLiveSpeedStyle() === "text" ? getWpm() : "",
-);
-const liveWpmMini = createMemo(() =>
-  getLiveSpeedStyle() === "mini" ? getWpm() : "",
-);
-const liveAccText = createMemo(() =>
-  getLiveAccStyle() === "text" ? getAcc() : "",
-);
-const liveAccMini = createMemo(() =>
-  getLiveAccStyle() === "mini" ? getAcc() : "",
-);
-const liveBurstText = createMemo(() =>
-  getLiveBurstStyle() === "text" ? getBurst() : "",
-);
-const liveBurstMini = createMemo(() =>
-  getLiveBurstStyle() === "mini" ? getBurst() : "",
-);
-
 export function mountLiveCounters(): void {
   const textWrapper = qsr("#liveStatsTextBottom");
   render(
@@ -45,17 +26,17 @@ export function mountLiveCounters(): void {
       <>
         <LiveCounter
           class="liveSpeed"
-          value={liveWpmText}
+          value={() => (getLiveSpeedStyle() === "text" ? getWpm() : "")}
           visible={statsVisible}
         />
         <LiveCounter
           class="liveAcc"
-          value={liveAccText}
+          value={() => (getLiveAccStyle() === "text" ? getAcc() : "")}
           visible={statsVisible}
         />
         <LiveCounter
           class="liveBurst"
-          value={liveBurstText}
+          value={() => (getLiveBurstStyle() === "text" ? getBurst() : "")}
           visible={statsVisible}
         />
       </>
@@ -67,11 +48,19 @@ export function mountLiveCounters(): void {
   render(
     () => (
       <>
-        <LiveCounter class="speed" value={liveWpmMini} visible={statsVisible} />
-        <LiveCounter class="acc" value={liveAccMini} visible={statsVisible} />
+        <LiveCounter
+          class="speed"
+          value={() => (getLiveSpeedStyle() === "mini" ? getWpm() : "")}
+          visible={statsVisible}
+        />
+        <LiveCounter
+          class="acc"
+          value={() => (getLiveAccStyle() === "mini" ? getAcc() : "")}
+          visible={statsVisible}
+        />
         <LiveCounter
           class="burst"
-          value={liveBurstMini}
+          value={() => (getLiveBurstStyle() === "mini" ? getBurst() : "")}
           visible={statsVisible}
         />
       </>

From bf50fe73985485d302d58f90cd063771103452fd Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 17:49:55 +0100
Subject: [PATCH 19/43] export hook

---
 .../src/ts/hooks/useVisibilityAnimation.ts    | 41 +++++++++++++++++++
 frontend/src/ts/test/live-counter.tsx         | 41 ++++---------------
 2 files changed, 48 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/ts/hooks/useVisibilityAnimation.ts

diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
new file mode 100644
index 000000000000..8bdf13741800
--- /dev/null
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -0,0 +1,41 @@
+import { Accessor, createEffect } from "solid-js";
+import { ElementWithUtils } from "../utils/dom";
+
+export function useVisibilityAnimation(
+  element: () => ElementWithUtils<HTMLDivElement> | undefined,
+  visible: Accessor<{
+    value: boolean;
+    withAnimation: boolean;
+  }>,
+  additionalCondition?: Accessor<boolean>,
+): void {
+  createEffect(() => {
+    const el = element();
+    if (!el) return;
+
+    const visibleState = visible();
+    const shouldShow = additionalCondition
+      ? visibleState.value && additionalCondition()
+      : visibleState.value;
+
+    if (shouldShow) {
+      if (visibleState.withAnimation) {
+        el.animate({
+          opacity: [0, 1],
+          duration: 125,
+        });
+      } else {
+        el.setStyle({ opacity: "1" });
+      }
+    } else {
+      if (visibleState.withAnimation) {
+        el.animate({
+          opacity: [1, 0],
+          duration: 125,
+        });
+      } else {
+        el.setStyle({ opacity: "0" });
+      }
+    }
+  });
+}
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index 0e17aa130f3c..c605790a9ef4 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -1,6 +1,7 @@
-import { Accessor, createEffect, JSXElement, onMount } from "solid-js";
+import { Accessor, JSXElement } from "solid-js";
 import { ElementWithUtils } from "../utils/dom";
 import { isFocused } from "./focus";
+import { useVisibilityAnimation } from "../hooks/useVisibilityAnimation";
 
 export function LiveCounter(props: {
   value: Accessor<string>;
@@ -10,43 +11,15 @@ export function LiveCounter(props: {
   }>;
   class?: string;
 }): JSXElement {
-  // oxlint-disable-next-line no-unassigned-vars
-  let divRef: HTMLDivElement | undefined;
   let divUtil: ElementWithUtils<HTMLDivElement> | undefined;
 
-  onMount(() => {
-    if (divRef) {
-      divUtil = new ElementWithUtils(divRef);
-    }
-  });
-
-  createEffect(() => {
-    if (divUtil === undefined) return;
-    const visibleState = props.visible();
-    const focusState = isFocused();
-    if (visibleState.value && focusState) {
-      if (visibleState.withAnimation) {
-        divUtil.animate({
-          opacity: [0, 1],
-          duration: 125,
-        });
-      } else {
-        divUtil.setStyle({ opacity: "1" });
-      }
-    } else {
-      if (visibleState.withAnimation) {
-        divUtil.animate({
-          opacity: [1, 0],
-          duration: 125,
-        });
-      } else {
-        divUtil.setStyle({ opacity: "0" });
-      }
-    }
-  });
+  useVisibilityAnimation(() => divUtil, props.visible, isFocused);
 
   return (
-    <div ref={divRef} class={`${props.class}`}>
+    <div
+      ref={(el) => (divUtil = new ElementWithUtils(el))}
+      class={`${props.class}`}
+    >
       {props.value()}
     </div>
   );

From 3f20d89b0170b865a74002f441b7cdac9ef5633d Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 17:51:31 +0100
Subject: [PATCH 20/43] rename

---
 frontend/src/ts/test/live-counter.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index c605790a9ef4..70e6fe68dbc1 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -11,13 +11,13 @@ export function LiveCounter(props: {
   }>;
   class?: string;
 }): JSXElement {
-  let divUtil: ElementWithUtils<HTMLDivElement> | undefined;
+  let ref: ElementWithUtils<HTMLDivElement> | undefined;
 
-  useVisibilityAnimation(() => divUtil, props.visible, isFocused);
+  useVisibilityAnimation(() => ref, props.visible, isFocused);
 
   return (
     <div
-      ref={(el) => (divUtil = new ElementWithUtils(el))}
+      ref={(el) => (ref = new ElementWithUtils(el))}
       class={`${props.class}`}
     >
       {props.value()}

From 97b54b6373e16c65f0217e47801be965b6a99e1f Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 18:04:15 +0100
Subject: [PATCH 21/43] improve hook

---
 .../src/ts/hooks/useVisibilityAnimation.ts    | 19 +++++--------------
 frontend/src/ts/test/live-counter.tsx         |  6 +++++-
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
index 8bdf13741800..1f13633774f4 100644
--- a/frontend/src/ts/hooks/useVisibilityAnimation.ts
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -3,23 +3,14 @@ import { ElementWithUtils } from "../utils/dom";
 
 export function useVisibilityAnimation(
   element: () => ElementWithUtils<HTMLDivElement> | undefined,
-  visible: Accessor<{
-    value: boolean;
-    withAnimation: boolean;
-  }>,
-  additionalCondition?: Accessor<boolean>,
+  visible: Accessor<boolean>,
+  animate: Accessor<boolean> = () => true,
 ): void {
   createEffect(() => {
     const el = element();
     if (!el) return;
-
-    const visibleState = visible();
-    const shouldShow = additionalCondition
-      ? visibleState.value && additionalCondition()
-      : visibleState.value;
-
-    if (shouldShow) {
-      if (visibleState.withAnimation) {
+    if (visible()) {
+      if (animate()) {
         el.animate({
           opacity: [0, 1],
           duration: 125,
@@ -28,7 +19,7 @@ export function useVisibilityAnimation(
         el.setStyle({ opacity: "1" });
       }
     } else {
-      if (visibleState.withAnimation) {
+      if (animate()) {
         el.animate({
           opacity: [1, 0],
           duration: 125,
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index 70e6fe68dbc1..5fdbd7dac1c5 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -13,7 +13,11 @@ export function LiveCounter(props: {
 }): JSXElement {
   let ref: ElementWithUtils<HTMLDivElement> | undefined;
 
-  useVisibilityAnimation(() => ref, props.visible, isFocused);
+  useVisibilityAnimation(
+    () => ref,
+    () => props.visible().value && isFocused(),
+    () => props.visible().withAnimation,
+  );
 
   return (
     <div

From 71f93d7dff805d7117b6aac534e67fb3bd93949f Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 18:04:45 +0100
Subject: [PATCH 22/43] type

---
 frontend/src/ts/hooks/useVisibilityAnimation.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
index 1f13633774f4..b34289c8b444 100644
--- a/frontend/src/ts/hooks/useVisibilityAnimation.ts
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -2,7 +2,7 @@ import { Accessor, createEffect } from "solid-js";
 import { ElementWithUtils } from "../utils/dom";
 
 export function useVisibilityAnimation(
-  element: () => ElementWithUtils<HTMLDivElement> | undefined,
+  element: Accessor<ElementWithUtils<HTMLDivElement> | undefined>,
   visible: Accessor<boolean>,
   animate: Accessor<boolean> = () => true,
 ): void {

From 2056487d4974d4743f0f3cb9f2b939f0f273c417 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 18:05:43 +0100
Subject: [PATCH 23/43] one object

---
 frontend/src/ts/hooks/useVisibilityAnimation.ts | 11 ++++++-----
 frontend/src/ts/test/live-counter.tsx           | 10 +++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
index b34289c8b444..67f56c40a84b 100644
--- a/frontend/src/ts/hooks/useVisibilityAnimation.ts
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -1,11 +1,12 @@
 import { Accessor, createEffect } from "solid-js";
 import { ElementWithUtils } from "../utils/dom";
 
-export function useVisibilityAnimation(
-  element: Accessor<ElementWithUtils<HTMLDivElement> | undefined>,
-  visible: Accessor<boolean>,
-  animate: Accessor<boolean> = () => true,
-): void {
+export function useVisibilityAnimation(options: {
+  element: Accessor<ElementWithUtils<HTMLDivElement> | undefined>;
+  visible: Accessor<boolean>;
+  animate?: Accessor<boolean>;
+}): void {
+  const { element, visible, animate = () => true } = options;
   createEffect(() => {
     const el = element();
     if (!el) return;
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index 5fdbd7dac1c5..acf391c3249c 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -13,11 +13,11 @@ export function LiveCounter(props: {
 }): JSXElement {
   let ref: ElementWithUtils<HTMLDivElement> | undefined;
 
-  useVisibilityAnimation(
-    () => ref,
-    () => props.visible().value && isFocused(),
-    () => props.visible().withAnimation,
-  );
+  useVisibilityAnimation({
+    element: () => ref,
+    visible: () => props.visible().value && isFocused(),
+    animate: () => props.visible().withAnimation,
+  });
 
   return (
     <div

From 082adde75d5734e2e8afca75c9bbaae8f8689ba9 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 18:07:59 +0100
Subject: [PATCH 24/43] sweep

---
 frontend/src/ts/test/live-counter.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index acf391c3249c..cce40f4c3408 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -20,10 +20,7 @@ export function LiveCounter(props: {
   });
 
   return (
-    <div
-      ref={(el) => (ref = new ElementWithUtils(el))}
-      class={`${props.class}`}
-    >
+    <div ref={(el) => (ref = new ElementWithUtils(el))} class={props.class}>
       {props.value()}
     </div>
   );

From 7b86390ce22f5f0ba3d26ec04733d3f9b2bcd258 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 19:20:47 +0100
Subject: [PATCH 25/43] ref with utils, move isfocused up

---
 frontend/src/ts/hooks/useRefWithUtils.ts | 17 +++++++++++++++++
 frontend/src/ts/test/live-counter.tsx    | 11 +++++------
 frontend/src/ts/test/live-states.tsx     | 20 ++++++++++++++------
 3 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/ts/hooks/useRefWithUtils.ts

diff --git a/frontend/src/ts/hooks/useRefWithUtils.ts b/frontend/src/ts/hooks/useRefWithUtils.ts
new file mode 100644
index 000000000000..32fc5232764f
--- /dev/null
+++ b/frontend/src/ts/hooks/useRefWithUtils.ts
@@ -0,0 +1,17 @@
+import { Accessor } from "solid-js";
+import { ElementWithUtils } from "../utils/dom";
+
+export function useRefWithUtils<T extends HTMLElement>(): [
+  ref: (el: T) => void,
+  element: Accessor<ElementWithUtils<T> | undefined>,
+] {
+  let elementWithUtils: ElementWithUtils<T> | undefined;
+
+  const ref = (el: T): void => {
+    elementWithUtils = new ElementWithUtils(el);
+  };
+
+  const element = (): ElementWithUtils<T> | undefined => elementWithUtils;
+
+  return [ref, element];
+}
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index cce40f4c3408..4a99f2264fdb 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -1,7 +1,6 @@
 import { Accessor, JSXElement } from "solid-js";
-import { ElementWithUtils } from "../utils/dom";
-import { isFocused } from "./focus";
 import { useVisibilityAnimation } from "../hooks/useVisibilityAnimation";
+import { useRefWithUtils } from "../hooks/useRefWithUtils";
 
 export function LiveCounter(props: {
   value: Accessor<string>;
@@ -11,16 +10,16 @@ export function LiveCounter(props: {
   }>;
   class?: string;
 }): JSXElement {
-  let ref: ElementWithUtils<HTMLDivElement> | undefined;
+  const [ref, element] = useRefWithUtils<HTMLDivElement>();
 
   useVisibilityAnimation({
-    element: () => ref,
-    visible: () => props.visible().value && isFocused(),
+    element,
+    visible: () => props.visible().value,
     animate: () => props.visible().withAnimation,
   });
 
   return (
-    <div ref={(el) => (ref = new ElementWithUtils(el))} class={props.class}>
+    <div ref={ref} class={props.class}>
       {props.value()}
     </div>
   );
diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index c9b832568318..a11b0e3e2546 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -7,6 +7,7 @@ import {
   getLiveBurstStyle,
   getLiveSpeedStyle,
 } from "../signals/config";
+import { isFocused } from "./focus";
 
 const [getWpm, setLiveStatWpm] = createSignal("0");
 const [getAcc, setLiveStatAcc] = createSignal("100%");
@@ -17,6 +18,13 @@ const [statsVisible, setStatsVisible] = createSignal({
   withAnimation: true,
 });
 
+const getStatsVisible = () => {
+  return {
+    value: statsVisible().value && isFocused(),
+    withAnimation: statsVisible().withAnimation,
+  };
+};
+
 export { setLiveStatWpm, setLiveStatAcc, setLiveStatBurst, setStatsVisible };
 
 export function mountLiveCounters(): void {
@@ -27,17 +35,17 @@ export function mountLiveCounters(): void {
         <LiveCounter
           class="liveSpeed"
           value={() => (getLiveSpeedStyle() === "text" ? getWpm() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
         <LiveCounter
           class="liveAcc"
           value={() => (getLiveAccStyle() === "text" ? getAcc() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
         <LiveCounter
           class="liveBurst"
           value={() => (getLiveBurstStyle() === "text" ? getBurst() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
       </>
     ),
@@ -51,17 +59,17 @@ export function mountLiveCounters(): void {
         <LiveCounter
           class="speed"
           value={() => (getLiveSpeedStyle() === "mini" ? getWpm() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
         <LiveCounter
           class="acc"
           value={() => (getLiveAccStyle() === "mini" ? getAcc() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
         <LiveCounter
           class="burst"
           value={() => (getLiveBurstStyle() === "mini" ? getBurst() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
       </>
     ),

From 883e43637e07e167c8623fd1ed91f25673638b93 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 19:30:40 +0100
Subject: [PATCH 26/43] refactor

---
 .../src/ts/hooks/useVisibilityAnimation.ts    | 22 +++++++++++--------
 frontend/src/ts/test/live-counter.tsx         | 16 +++++---------
 frontend/src/ts/test/live-states.tsx          | 19 ++++++++--------
 3 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
index 67f56c40a84b..06dc87a66cde 100644
--- a/frontend/src/ts/hooks/useVisibilityAnimation.ts
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -1,17 +1,21 @@
 import { Accessor, createEffect } from "solid-js";
 import { ElementWithUtils } from "../utils/dom";
 
-export function useVisibilityAnimation(options: {
-  element: Accessor<ElementWithUtils<HTMLDivElement> | undefined>;
-  visible: Accessor<boolean>;
-  animate?: Accessor<boolean>;
-}): void {
-  const { element, visible, animate = () => true } = options;
+export type VisibilityAnimationOptions = {
+  visible: boolean;
+  animate?: boolean;
+};
+
+export function useVisibilityAnimation(
+  element: Accessor<ElementWithUtils<HTMLDivElement> | undefined>,
+  options: Accessor<VisibilityAnimationOptions>,
+): void {
   createEffect(() => {
     const el = element();
+    const opt = options();
     if (!el) return;
-    if (visible()) {
-      if (animate()) {
+    if (opt.visible) {
+      if (opt.animate) {
         el.animate({
           opacity: [0, 1],
           duration: 125,
@@ -20,7 +24,7 @@ export function useVisibilityAnimation(options: {
         el.setStyle({ opacity: "1" });
       }
     } else {
-      if (animate()) {
+      if (opt.animate) {
         el.animate({
           opacity: [1, 0],
           duration: 125,
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index 4a99f2264fdb..1089af04b605 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -1,22 +1,18 @@
 import { Accessor, JSXElement } from "solid-js";
-import { useVisibilityAnimation } from "../hooks/useVisibilityAnimation";
+import {
+  useVisibilityAnimation,
+  VisibilityAnimationOptions,
+} from "../hooks/useVisibilityAnimation";
 import { useRefWithUtils } from "../hooks/useRefWithUtils";
 
 export function LiveCounter(props: {
   value: Accessor<string>;
-  visible: Accessor<{
-    value: boolean;
-    withAnimation: boolean;
-  }>;
+  visibilityOptions: Accessor<VisibilityAnimationOptions>;
   class?: string;
 }): JSXElement {
   const [ref, element] = useRefWithUtils<HTMLDivElement>();
 
-  useVisibilityAnimation({
-    element,
-    visible: () => props.visible().value,
-    animate: () => props.visible().withAnimation,
-  });
+  useVisibilityAnimation(element, props.visibilityOptions);
 
   return (
     <div ref={ref} class={props.class}>
diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index a11b0e3e2546..9644e455a734 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -8,6 +8,7 @@ import {
   getLiveSpeedStyle,
 } from "../signals/config";
 import { isFocused } from "./focus";
+import { VisibilityAnimationOptions } from "../hooks/useVisibilityAnimation";
 
 const [getWpm, setLiveStatWpm] = createSignal("0");
 const [getAcc, setLiveStatAcc] = createSignal("100%");
@@ -18,10 +19,10 @@ const [statsVisible, setStatsVisible] = createSignal({
   withAnimation: true,
 });
 
-const getStatsVisible = () => {
+const getStatsVisible = (): VisibilityAnimationOptions => {
   return {
-    value: statsVisible().value && isFocused(),
-    withAnimation: statsVisible().withAnimation,
+    visible: statsVisible().value && isFocused(),
+    animate: statsVisible().withAnimation,
   };
 };
 
@@ -35,17 +36,17 @@ export function mountLiveCounters(): void {
         <LiveCounter
           class="liveSpeed"
           value={() => (getLiveSpeedStyle() === "text" ? getWpm() : "")}
-          visible={getStatsVisible}
+          visibilityOptions={getStatsVisible}
         />
         <LiveCounter
           class="liveAcc"
           value={() => (getLiveAccStyle() === "text" ? getAcc() : "")}
-          visible={getStatsVisible}
+          visibilityOptions={getStatsVisible}
         />
         <LiveCounter
           class="liveBurst"
           value={() => (getLiveBurstStyle() === "text" ? getBurst() : "")}
-          visible={getStatsVisible}
+          visibilityOptions={getStatsVisible}
         />
       </>
     ),
@@ -59,17 +60,17 @@ export function mountLiveCounters(): void {
         <LiveCounter
           class="speed"
           value={() => (getLiveSpeedStyle() === "mini" ? getWpm() : "")}
-          visible={getStatsVisible}
+          visibilityOptions={getStatsVisible}
         />
         <LiveCounter
           class="acc"
           value={() => (getLiveAccStyle() === "mini" ? getAcc() : "")}
-          visible={getStatsVisible}
+          visibilityOptions={getStatsVisible}
         />
         <LiveCounter
           class="burst"
           value={() => (getLiveBurstStyle() === "mini" ? getBurst() : "")}
-          visible={getStatsVisible}
+          visibilityOptions={getStatsVisible}
         />
       </>
     ),

From 2d0c8df7ff40bad7a2848dc02c7bcca036ca574a Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 19:31:42 +0100
Subject: [PATCH 27/43] renames

---
 frontend/src/ts/test/live-states.tsx | 13 +++++++------
 frontend/src/ts/test/test-ui.ts      |  8 ++++----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index 9644e455a734..c9f68bf6d458 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -14,15 +14,16 @@ const [getWpm, setLiveStatWpm] = createSignal("0");
 const [getAcc, setLiveStatAcc] = createSignal("100%");
 const [getBurst, setLiveStatBurst] = createSignal("0");
 
-const [statsVisible, setStatsVisible] = createSignal({
-  value: false,
-  withAnimation: true,
-});
+const [statsVisible, setStatsVisible] =
+  createSignal<VisibilityAnimationOptions>({
+    visible: false,
+    animate: true,
+  });
 
 const getStatsVisible = (): VisibilityAnimationOptions => {
   return {
-    visible: statsVisible().value && isFocused(),
-    animate: statsVisible().withAnimation,
+    visible: statsVisible().visible && isFocused(),
+    animate: statsVisible().animate,
   };
 };
 
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index f344d6cb04d7..c9a8310d33b4 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -1822,8 +1822,8 @@ export function onTestStart(): void {
   TimerProgress.show();
   TimerProgress.update();
   setStatsVisible({
-    value: true,
-    withAnimation: true,
+    visible: true,
+    animate: true,
   });
 }
 
@@ -1834,8 +1834,8 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   TestConfig.show();
   Focus.set(false);
   setStatsVisible({
-    value: false,
-    withAnimation: false,
+    visible: false,
+    animate: false,
   });
   setLiveStatWpm("0");
   setLiveStatBurst("0");

From b5fa8add40c3acfac2005de8823ed3ac0f70271e Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 19:32:03 +0100
Subject: [PATCH 28/43] unused import

---
 frontend/src/ts/test/live-states.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/test/live-states.tsx
index c9f68bf6d458..5a29bf8c957d 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/test/live-states.tsx
@@ -1,4 +1,4 @@
-import { createMemo, createSignal } from "solid-js";
+import { createSignal } from "solid-js";
 import { qsr } from "../utils/dom";
 import { LiveCounter } from "./live-counter";
 import { render } from "solid-js/web";

From 9013fdbe93585719865049d884e4c44cfba72a34 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 19:32:48 +0100
Subject: [PATCH 29/43] reduced motion

---
 frontend/src/ts/hooks/useVisibilityAnimation.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
index 06dc87a66cde..72721740345b 100644
--- a/frontend/src/ts/hooks/useVisibilityAnimation.ts
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -1,5 +1,6 @@
 import { Accessor, createEffect } from "solid-js";
 import { ElementWithUtils } from "../utils/dom";
+import { applyReducedMotion } from "../utils/misc";
 
 export type VisibilityAnimationOptions = {
   visible: boolean;
@@ -18,7 +19,7 @@ export function useVisibilityAnimation(
       if (opt.animate) {
         el.animate({
           opacity: [0, 1],
-          duration: 125,
+          duration: applyReducedMotion(125),
         });
       } else {
         el.setStyle({ opacity: "1" });
@@ -27,7 +28,7 @@ export function useVisibilityAnimation(
       if (opt.animate) {
         el.animate({
           opacity: [1, 0],
-          duration: 125,
+          duration: applyReducedMotion(125),
         });
       } else {
         el.setStyle({ opacity: "0" });

From e29ff7a07568ebb3ad3d400ca2b3018a21d89a29 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 19:45:21 +0100
Subject: [PATCH 30/43] optional visibility options

---
 frontend/src/ts/hooks/useVisibilityAnimation.ts | 3 ++-
 frontend/src/ts/test/live-counter.tsx           | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
index 72721740345b..c54d926b7c64 100644
--- a/frontend/src/ts/hooks/useVisibilityAnimation.ts
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -9,8 +9,9 @@ export type VisibilityAnimationOptions = {
 
 export function useVisibilityAnimation(
   element: Accessor<ElementWithUtils<HTMLDivElement> | undefined>,
-  options: Accessor<VisibilityAnimationOptions>,
+  options?: Accessor<VisibilityAnimationOptions>,
 ): void {
+  if (!options) return;
   createEffect(() => {
     const el = element();
     const opt = options();
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
index 1089af04b605..4d41f8a3fa33 100644
--- a/frontend/src/ts/test/live-counter.tsx
+++ b/frontend/src/ts/test/live-counter.tsx
@@ -7,7 +7,7 @@ import { useRefWithUtils } from "../hooks/useRefWithUtils";
 
 export function LiveCounter(props: {
   value: Accessor<string>;
-  visibilityOptions: Accessor<VisibilityAnimationOptions>;
+  visibilityOptions?: Accessor<VisibilityAnimationOptions>;
   class?: string;
 }): JSXElement {
   const [ref, element] = useRefWithUtils<HTMLDivElement>();

From ec0e15efd7475ef3aca57af68988b0766fbf1119 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 19:34:33 +0100
Subject: [PATCH 31/43] move and rename

---
 .../live-states.tsx => components/test/live-stats.tsx} | 10 +++++-----
 frontend/src/ts/ready.ts                               |  2 +-
 frontend/src/ts/test/test-timer.ts                     |  2 +-
 frontend/src/ts/test/test-ui.ts                        |  2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)
 rename frontend/src/ts/{test/live-states.tsx => components/test/live-stats.tsx} (89%)

diff --git a/frontend/src/ts/test/live-states.tsx b/frontend/src/ts/components/test/live-stats.tsx
similarity index 89%
rename from frontend/src/ts/test/live-states.tsx
rename to frontend/src/ts/components/test/live-stats.tsx
index 5a29bf8c957d..290bf0d65ebd 100644
--- a/frontend/src/ts/test/live-states.tsx
+++ b/frontend/src/ts/components/test/live-stats.tsx
@@ -1,14 +1,14 @@
 import { createSignal } from "solid-js";
-import { qsr } from "../utils/dom";
-import { LiveCounter } from "./live-counter";
+import { qsr } from "../../utils/dom";
+import { LiveCounter } from "../../test/live-counter";
 import { render } from "solid-js/web";
 import {
   getLiveAccStyle,
   getLiveBurstStyle,
   getLiveSpeedStyle,
-} from "../signals/config";
-import { isFocused } from "./focus";
-import { VisibilityAnimationOptions } from "../hooks/useVisibilityAnimation";
+} from "../../signals/config";
+import { isFocused } from "../../test/focus";
+import { VisibilityAnimationOptions } from "../../hooks/useVisibilityAnimation";
 
 const [getWpm, setLiveStatWpm] = createSignal("0");
 const [getAcc, setLiveStatAcc] = createSignal("100%");
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 264026624802..1f09edde65ec 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -11,7 +11,7 @@ import { configLoadPromise } from "./config";
 import { authPromise } from "./firebase";
 import { animate } from "animejs";
 import { onDOMReady, qs } from "./utils/dom";
-import { mountLiveCounters } from "./test/live-states";
+import { mountLiveCounters } from "./components/test/live-stats";
 
 onDOMReady(async () => {
   await configLoadPromise;
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index b8bb36d49ae5..89e8981cc970 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -21,7 +21,7 @@ import { clearLowFpsMode, setLowFpsMode } from "../anim";
 import { createTimer } from "animejs";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import Format from "../utils/format";
-import { setLiveStatWpm } from "./live-states";
+import { setLiveStatWpm } from "../components/test/live-stats";
 
 let lastLoop = 0;
 const newTimer = createTimer({
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index c9a8310d33b4..bf1fe9451244 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -60,7 +60,7 @@ import {
   setLiveStatBurst,
   setLiveStatWpm,
   setStatsVisible,
-} from "./live-states";
+} from "../components/test/live-stats";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,

From a86c2f186ad4b2df2989df1b3ffa51fc2ee88ff1 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 19:48:56 +0100
Subject: [PATCH 32/43] refactor

---
 frontend/src/ts/components/mount.tsx          | 15 +++
 frontend/src/ts/components/test/LiveStats.tsx | 95 +++++++++++++++++++
 .../src/ts/components/test/live-stats.tsx     | 80 ----------------
 frontend/src/ts/index.ts                      |  3 +
 frontend/src/ts/ready.ts                      |  3 -
 frontend/src/ts/signals/test.ts               |  5 +
 frontend/src/ts/test/live-counter.tsx         | 22 -----
 frontend/src/ts/test/test-timer.ts            |  2 +-
 frontend/src/ts/test/test-ui.ts               |  4 +-
 9 files changed, 121 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/ts/components/mount.tsx
 create mode 100644 frontend/src/ts/components/test/LiveStats.tsx
 delete mode 100644 frontend/src/ts/components/test/live-stats.tsx
 create mode 100644 frontend/src/ts/signals/test.ts
 delete mode 100644 frontend/src/ts/test/live-counter.tsx

diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
new file mode 100644
index 000000000000..dd7271c1afa2
--- /dev/null
+++ b/frontend/src/ts/components/mount.tsx
@@ -0,0 +1,15 @@
+import { render } from "solid-js/web";
+import { qsr } from "../utils/dom";
+import { LiveStats, LiveStatsMini } from "./test/LiveStats";
+import { getAcc, getBurst, getWpm } from "../signals/test";
+
+export function mountComponents(): void {
+  render(
+    () => <LiveStatsMini wpm={getWpm} acc={getAcc} burst={getBurst} />,
+    qsr("#liveStatsMini").native,
+  );
+  render(
+    () => <LiveStats wpm={getWpm} acc={getAcc} burst={getBurst} />,
+    qsr("#liveStatsTextBottom").native,
+  );
+}
diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
new file mode 100644
index 000000000000..915c4c837d0d
--- /dev/null
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -0,0 +1,95 @@
+import { Accessor, createSignal, JSXElement } from "solid-js";
+import {
+  getLiveAccStyle,
+  getLiveBurstStyle,
+  getLiveSpeedStyle,
+} from "../../signals/config";
+import { isFocused } from "../../test/focus";
+import {
+  useVisibilityAnimation,
+  VisibilityAnimationOptions,
+} from "../../hooks/useVisibilityAnimation";
+import { useRefWithUtils } from "../../hooks/useRefWithUtils";
+
+export function Stat(props: {
+  value: Accessor<string>;
+  visibilityOptions: Accessor<VisibilityAnimationOptions>;
+  class?: string;
+}): JSXElement {
+  const [ref, element] = useRefWithUtils<HTMLDivElement>();
+
+  useVisibilityAnimation(element, props.visibilityOptions);
+
+  return (
+    <div ref={ref} class={props.class}>
+      {props.value()}
+    </div>
+  );
+}
+
+const [miniStatsVisible, setMiniStatsVisible] =
+  createSignal<VisibilityAnimationOptions>({
+    visible: false,
+    animate: true,
+  });
+
+const getStatsVisible = (): VisibilityAnimationOptions => {
+  return {
+    visible: miniStatsVisible().visible && isFocused(),
+    animate: miniStatsVisible().animate,
+  };
+};
+
+export { setMiniStatsVisible as setStatsVisible };
+
+export function LiveStatsMini(props: {
+  wpm: Accessor<string>;
+  acc: Accessor<string>;
+  burst: Accessor<string>;
+}): JSXElement {
+  return (
+    <>
+      <Stat
+        class="speed"
+        value={() => (getLiveSpeedStyle() === "mini" ? props.wpm() : "")}
+        visibilityOptions={getStatsVisible}
+      />
+      <Stat
+        class="acc"
+        value={() => (getLiveAccStyle() === "mini" ? props.acc() : "")}
+        visibilityOptions={getStatsVisible}
+      />
+      <Stat
+        class="burst"
+        value={() => (getLiveBurstStyle() === "mini" ? props.burst() : "")}
+        visibilityOptions={getStatsVisible}
+      />
+    </>
+  );
+}
+
+export function LiveStats(props: {
+  wpm: Accessor<string>;
+  acc: Accessor<string>;
+  burst: Accessor<string>;
+}): JSXElement {
+  return (
+    <>
+      <Stat
+        class="liveSpeed"
+        value={() => (getLiveSpeedStyle() === "text" ? props.wpm() : "")}
+        visibilityOptions={getStatsVisible}
+      />
+      <Stat
+        class="liveAcc"
+        value={() => (getLiveAccStyle() === "text" ? props.acc() : "")}
+        visibilityOptions={getStatsVisible}
+      />
+      <Stat
+        class="liveBurst"
+        value={() => (getLiveBurstStyle() === "text" ? props.burst() : "")}
+        visibilityOptions={getStatsVisible}
+      />
+    </>
+  );
+}
diff --git a/frontend/src/ts/components/test/live-stats.tsx b/frontend/src/ts/components/test/live-stats.tsx
deleted file mode 100644
index 290bf0d65ebd..000000000000
--- a/frontend/src/ts/components/test/live-stats.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { createSignal } from "solid-js";
-import { qsr } from "../../utils/dom";
-import { LiveCounter } from "../../test/live-counter";
-import { render } from "solid-js/web";
-import {
-  getLiveAccStyle,
-  getLiveBurstStyle,
-  getLiveSpeedStyle,
-} from "../../signals/config";
-import { isFocused } from "../../test/focus";
-import { VisibilityAnimationOptions } from "../../hooks/useVisibilityAnimation";
-
-const [getWpm, setLiveStatWpm] = createSignal("0");
-const [getAcc, setLiveStatAcc] = createSignal("100%");
-const [getBurst, setLiveStatBurst] = createSignal("0");
-
-const [statsVisible, setStatsVisible] =
-  createSignal<VisibilityAnimationOptions>({
-    visible: false,
-    animate: true,
-  });
-
-const getStatsVisible = (): VisibilityAnimationOptions => {
-  return {
-    visible: statsVisible().visible && isFocused(),
-    animate: statsVisible().animate,
-  };
-};
-
-export { setLiveStatWpm, setLiveStatAcc, setLiveStatBurst, setStatsVisible };
-
-export function mountLiveCounters(): void {
-  const textWrapper = qsr("#liveStatsTextBottom");
-  render(
-    () => (
-      <>
-        <LiveCounter
-          class="liveSpeed"
-          value={() => (getLiveSpeedStyle() === "text" ? getWpm() : "")}
-          visibilityOptions={getStatsVisible}
-        />
-        <LiveCounter
-          class="liveAcc"
-          value={() => (getLiveAccStyle() === "text" ? getAcc() : "")}
-          visibilityOptions={getStatsVisible}
-        />
-        <LiveCounter
-          class="liveBurst"
-          value={() => (getLiveBurstStyle() === "text" ? getBurst() : "")}
-          visibilityOptions={getStatsVisible}
-        />
-      </>
-    ),
-    textWrapper.native,
-  );
-
-  const miniWrapper = qsr("#liveStatsMini");
-  render(
-    () => (
-      <>
-        <LiveCounter
-          class="speed"
-          value={() => (getLiveSpeedStyle() === "mini" ? getWpm() : "")}
-          visibilityOptions={getStatsVisible}
-        />
-        <LiveCounter
-          class="acc"
-          value={() => (getLiveAccStyle() === "mini" ? getAcc() : "")}
-          visibilityOptions={getStatsVisible}
-        />
-        <LiveCounter
-          class="burst"
-          value={() => (getLiveBurstStyle() === "mini" ? getBurst() : "")}
-          visibilityOptions={getStatsVisible}
-        />
-      </>
-    ),
-    miniWrapper.native,
-  );
-}
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index f74f3104e236..0ad2ffc0a0d5 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -48,6 +48,7 @@ import "./utils/url-handler";
 import "./modals/last-signed-out-result";
 import { applyEngineSettings } from "./anim";
 import { qs, qsa, qsr } from "./utils/dom";
+import { mountComponents } from "./components/mount";
 
 // Lock Math.random
 Object.defineProperty(Math, "random", {
@@ -107,3 +108,5 @@ if (isDevEnvironment()) {
     module.appendButton();
   });
 }
+
+mountComponents();
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 1f09edde65ec..7c5fe24ac154 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -11,7 +11,6 @@ import { configLoadPromise } from "./config";
 import { authPromise } from "./firebase";
 import { animate } from "animejs";
 import { onDOMReady, qs } from "./utils/dom";
-import { mountLiveCounters } from "./components/test/live-stats";
 
 onDOMReady(async () => {
   await configLoadPromise;
@@ -78,6 +77,4 @@ onDOMReady(async () => {
       });
     }
   }
-
-  mountLiveCounters();
 });
diff --git a/frontend/src/ts/signals/test.ts b/frontend/src/ts/signals/test.ts
new file mode 100644
index 000000000000..12ff6510c5de
--- /dev/null
+++ b/frontend/src/ts/signals/test.ts
@@ -0,0 +1,5 @@
+import { createSignal } from "solid-js";
+
+export const [getWpm, setLiveStatWpm] = createSignal("0");
+export const [getAcc, setLiveStatAcc] = createSignal("100%");
+export const [getBurst, setLiveStatBurst] = createSignal("0");
diff --git a/frontend/src/ts/test/live-counter.tsx b/frontend/src/ts/test/live-counter.tsx
deleted file mode 100644
index 4d41f8a3fa33..000000000000
--- a/frontend/src/ts/test/live-counter.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Accessor, JSXElement } from "solid-js";
-import {
-  useVisibilityAnimation,
-  VisibilityAnimationOptions,
-} from "../hooks/useVisibilityAnimation";
-import { useRefWithUtils } from "../hooks/useRefWithUtils";
-
-export function LiveCounter(props: {
-  value: Accessor<string>;
-  visibilityOptions?: Accessor<VisibilityAnimationOptions>;
-  class?: string;
-}): JSXElement {
-  const [ref, element] = useRefWithUtils<HTMLDivElement>();
-
-  useVisibilityAnimation(element, props.visibilityOptions);
-
-  return (
-    <div ref={ref} class={props.class}>
-      {props.value()}
-    </div>
-  );
-}
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index 89e8981cc970..19ef7c74ac21 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -21,7 +21,7 @@ import { clearLowFpsMode, setLowFpsMode } from "../anim";
 import { createTimer } from "animejs";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import Format from "../utils/format";
-import { setLiveStatWpm } from "../components/test/live-stats";
+import { setLiveStatWpm } from "../signals/test";
 
 let lastLoop = 0;
 const newTimer = createTimer({
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index bf1fe9451244..2d78bf9d6b84 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -55,12 +55,12 @@ import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
+import { setStatsVisible } from "../components/test/LiveStats";
 import {
   setLiveStatAcc,
   setLiveStatBurst,
   setLiveStatWpm,
-  setStatsVisible,
-} from "../components/test/live-stats";
+} from "../signals/test";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,

From ff6c6f35d98b65a013587eec048f43b906ee9ad7 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 19:50:54 +0100
Subject: [PATCH 33/43] rename

---
 frontend/src/ts/components/test/LiveStats.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
index 915c4c837d0d..4bb44e72c9c1 100644
--- a/frontend/src/ts/components/test/LiveStats.tsx
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -27,7 +27,7 @@ export function Stat(props: {
   );
 }
 
-const [miniStatsVisible, setMiniStatsVisible] =
+const [statsVisible, setStatsVisible] =
   createSignal<VisibilityAnimationOptions>({
     visible: false,
     animate: true,
@@ -35,12 +35,12 @@ const [miniStatsVisible, setMiniStatsVisible] =
 
 const getStatsVisible = (): VisibilityAnimationOptions => {
   return {
-    visible: miniStatsVisible().visible && isFocused(),
-    animate: miniStatsVisible().animate,
+    visible: statsVisible().visible && isFocused(),
+    animate: statsVisible().animate,
   };
 };
 
-export { setMiniStatsVisible as setStatsVisible };
+export { setStatsVisible as setStatsVisible };
 
 export function LiveStatsMini(props: {
   wpm: Accessor<string>;

From 457a1588ec608ef4a1f33a30ae4096d912a3bcab Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 19:52:30 +0100
Subject: [PATCH 34/43] fix

---
 frontend/src/ts/elements/scroll-to-top.ts       |  2 +-
 frontend/src/ts/hooks/useVisibilityAnimation.ts |  2 +-
 frontend/src/ts/utils/accessibility.ts          | 12 ++++++++++++
 frontend/src/ts/utils/misc.ts                   |  7 ++-----
 4 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/ts/utils/accessibility.ts

diff --git a/frontend/src/ts/elements/scroll-to-top.ts b/frontend/src/ts/elements/scroll-to-top.ts
index 2ebd2d48ea82..02791356baca 100644
--- a/frontend/src/ts/elements/scroll-to-top.ts
+++ b/frontend/src/ts/elements/scroll-to-top.ts
@@ -1,5 +1,5 @@
 import * as ActivePage from "../states/active-page";
-import { prefersReducedMotion } from "../utils/misc";
+import { prefersReducedMotion } from "../utils/accessibility";
 import { qsr } from "../utils/dom";
 
 let visible = false;
diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
index c54d926b7c64..8bbdd3b09ed4 100644
--- a/frontend/src/ts/hooks/useVisibilityAnimation.ts
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -1,6 +1,6 @@
 import { Accessor, createEffect } from "solid-js";
 import { ElementWithUtils } from "../utils/dom";
-import { applyReducedMotion } from "../utils/misc";
+import { applyReducedMotion } from "../utils/accessibility";
 
 export type VisibilityAnimationOptions = {
   visible: boolean;
diff --git a/frontend/src/ts/utils/accessibility.ts b/frontend/src/ts/utils/accessibility.ts
new file mode 100644
index 000000000000..9e9387b8d683
--- /dev/null
+++ b/frontend/src/ts/utils/accessibility.ts
@@ -0,0 +1,12 @@
+export function prefersReducedMotion(): boolean {
+  return matchMedia?.("(prefers-reduced-motion)")?.matches;
+}
+
+/**
+ * Reduce the animation time based on the browser preference `prefers-reduced-motion`.
+ * @param animationTime
+ * @returns `0` if user prefers reduced-motion, else the given animationTime
+ */
+export function applyReducedMotion(animationTime: number): number {
+  return prefersReducedMotion() ? 0 : animationTime;
+}
diff --git a/frontend/src/ts/utils/misc.ts b/frontend/src/ts/utils/misc.ts
index 6e6ea8fca4ca..a6f034115c40 100644
--- a/frontend/src/ts/utils/misc.ts
+++ b/frontend/src/ts/utils/misc.ts
@@ -8,6 +8,7 @@ import { RankAndCount } from "@monkeytype/schemas/users";
 import { roundTo2 } from "@monkeytype/util/numbers";
 import { animate, AnimationParams } from "animejs";
 import { ElementWithUtils } from "./dom";
+import * as Accessibility from "./accessibility";
 
 export function whorf(speed: number, wordlen: number): number {
   return Math.min(
@@ -581,17 +582,13 @@ export function isObject(obj: unknown): obj is Record<string, unknown> {
   return typeof obj === "object" && !Array.isArray(obj) && obj !== null;
 }
 
-export function prefersReducedMotion(): boolean {
-  return matchMedia?.("(prefers-reduced-motion)")?.matches;
-}
-
 /**
  * Reduce the animation time based on the browser preference `prefers-reduced-motion`.
  * @param animationTime
  * @returns `0` if user prefers reduced-motion, else the given animationTime
  */
 export function applyReducedMotion(animationTime: number): number {
-  return prefersReducedMotion() ? 0 : animationTime;
+  return Accessibility.applyReducedMotion(animationTime);
 }
 
 /**

From e34eb6d2b6d88f8b848a13b93476e451084c7326 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 19:53:39 +0100
Subject: [PATCH 35/43] fix

---
 frontend/src/ts/components/test/LiveStats.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
index 4bb44e72c9c1..0afdfcd8f6b6 100644
--- a/frontend/src/ts/components/test/LiveStats.tsx
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -40,7 +40,7 @@ const getStatsVisible = (): VisibilityAnimationOptions => {
   };
 };
 
-export { setStatsVisible as setStatsVisible };
+export { setStatsVisible };
 
 export function LiveStatsMini(props: {
   wpm: Accessor<string>;

From af35057815b79fed142acae710dd8b4d3dc9c7a6 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 20:14:02 +0100
Subject: [PATCH 36/43] dont export

---
 frontend/src/ts/components/test/LiveStats.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
index 0afdfcd8f6b6..d5b0016b0c27 100644
--- a/frontend/src/ts/components/test/LiveStats.tsx
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -11,7 +11,7 @@ import {
 } from "../../hooks/useVisibilityAnimation";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 
-export function Stat(props: {
+function Stat(props: {
   value: Accessor<string>;
   visibilityOptions: Accessor<VisibilityAnimationOptions>;
   class?: string;

From 645eaebfa583f7463fa1e3b9c5c15b60f00fdf93 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 20:36:00 +0100
Subject: [PATCH 37/43] support hide

---
 frontend/src/ts/components/test/LiveStats.tsx | 40 ++++++++++++-------
 .../src/ts/hooks/useVisibilityAnimation.ts    |  6 +++
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
index d5b0016b0c27..c6e39fd9aefa 100644
--- a/frontend/src/ts/components/test/LiveStats.tsx
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -33,11 +33,13 @@ const [statsVisible, setStatsVisible] =
     animate: true,
   });
 
-const getStatsVisible = (): VisibilityAnimationOptions => {
-  return {
-    visible: statsVisible().visible && isFocused(),
+const getStatsVisible = (
+  visible: Accessor<boolean>,
+): Accessor<VisibilityAnimationOptions> => {
+  return () => ({
+    visible: statsVisible().visible && isFocused() && visible(),
     animate: statsVisible().animate,
-  };
+  });
 };
 
 export { setStatsVisible };
@@ -52,17 +54,21 @@ export function LiveStatsMini(props: {
       <Stat
         class="speed"
         value={() => (getLiveSpeedStyle() === "mini" ? props.wpm() : "")}
-        visibilityOptions={getStatsVisible}
+        visibilityOptions={getStatsVisible(
+          () => getLiveSpeedStyle() === "mini",
+        )}
       />
       <Stat
         class="acc"
-        value={() => (getLiveAccStyle() === "mini" ? props.acc() : "")}
-        visibilityOptions={getStatsVisible}
+        value={props.acc}
+        visibilityOptions={getStatsVisible(() => getLiveAccStyle() === "mini")}
       />
       <Stat
         class="burst"
-        value={() => (getLiveBurstStyle() === "mini" ? props.burst() : "")}
-        visibilityOptions={getStatsVisible}
+        value={props.burst}
+        visibilityOptions={getStatsVisible(
+          () => getLiveBurstStyle() === "mini",
+        )}
       />
     </>
   );
@@ -77,18 +83,22 @@ export function LiveStats(props: {
     <>
       <Stat
         class="liveSpeed"
-        value={() => (getLiveSpeedStyle() === "text" ? props.wpm() : "")}
-        visibilityOptions={getStatsVisible}
+        value={props.wpm}
+        visibilityOptions={getStatsVisible(
+          () => getLiveSpeedStyle() === "text",
+        )}
       />
       <Stat
         class="liveAcc"
-        value={() => (getLiveAccStyle() === "text" ? props.acc() : "")}
-        visibilityOptions={getStatsVisible}
+        value={props.acc}
+        visibilityOptions={getStatsVisible(() => getLiveAccStyle() === "text")}
       />
       <Stat
         class="liveBurst"
-        value={() => (getLiveBurstStyle() === "text" ? props.burst() : "")}
-        visibilityOptions={getStatsVisible}
+        value={props.burst}
+        visibilityOptions={getStatsVisible(
+          () => getLiveBurstStyle() === "text",
+        )}
       />
     </>
   );
diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
index 8bbdd3b09ed4..e4c42682f31f 100644
--- a/frontend/src/ts/hooks/useVisibilityAnimation.ts
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -18,21 +18,27 @@ export function useVisibilityAnimation(
     if (!el) return;
     if (opt.visible) {
       if (opt.animate) {
+        el.show();
         el.animate({
           opacity: [0, 1],
           duration: applyReducedMotion(125),
         });
       } else {
         el.setStyle({ opacity: "1" });
+        el.show();
       }
     } else {
       if (opt.animate) {
         el.animate({
           opacity: [1, 0],
           duration: applyReducedMotion(125),
+          onComplete: () => {
+            el.hide();
+          },
         });
       } else {
         el.setStyle({ opacity: "0" });
+        el.hide();
       }
     }
   });

From 97c50aa29a0bc23565547afeb7168962e01b2239 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 20:41:53 +0100
Subject: [PATCH 38/43] update value

---
 frontend/src/ts/components/test/LiveStats.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
index c6e39fd9aefa..5ce07d118094 100644
--- a/frontend/src/ts/components/test/LiveStats.tsx
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -53,7 +53,7 @@ export function LiveStatsMini(props: {
     <>
       <Stat
         class="speed"
-        value={() => (getLiveSpeedStyle() === "mini" ? props.wpm() : "")}
+        value={props.wpm}
         visibilityOptions={getStatsVisible(
           () => getLiveSpeedStyle() === "mini",
         )}

From 610be26d07c5326aa4bcf41803941b29889bb588 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 8 Jan 2026 21:04:58 +0100
Subject: [PATCH 39/43] move timer state outside

---
 frontend/src/ts/components/test/LiveStats.tsx | 9 +--------
 frontend/src/ts/signals/test.ts               | 7 +++++++
 frontend/src/ts/test/test-ui.ts               | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
index 5ce07d118094..6d97f472e197 100644
--- a/frontend/src/ts/components/test/LiveStats.tsx
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -10,6 +10,7 @@ import {
   VisibilityAnimationOptions,
 } from "../../hooks/useVisibilityAnimation";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
+import { statsVisible } from "../../signals/test";
 
 function Stat(props: {
   value: Accessor<string>;
@@ -27,12 +28,6 @@ function Stat(props: {
   );
 }
 
-const [statsVisible, setStatsVisible] =
-  createSignal<VisibilityAnimationOptions>({
-    visible: false,
-    animate: true,
-  });
-
 const getStatsVisible = (
   visible: Accessor<boolean>,
 ): Accessor<VisibilityAnimationOptions> => {
@@ -42,8 +37,6 @@ const getStatsVisible = (
   });
 };
 
-export { setStatsVisible };
-
 export function LiveStatsMini(props: {
   wpm: Accessor<string>;
   acc: Accessor<string>;
diff --git a/frontend/src/ts/signals/test.ts b/frontend/src/ts/signals/test.ts
index 12ff6510c5de..133f9a4e3dc0 100644
--- a/frontend/src/ts/signals/test.ts
+++ b/frontend/src/ts/signals/test.ts
@@ -1,5 +1,12 @@
 import { createSignal } from "solid-js";
+import { VisibilityAnimationOptions } from "../hooks/useVisibilityAnimation";
 
 export const [getWpm, setLiveStatWpm] = createSignal("0");
 export const [getAcc, setLiveStatAcc] = createSignal("100%");
 export const [getBurst, setLiveStatBurst] = createSignal("0");
+
+export const [statsVisible, setStatsVisible] =
+  createSignal<VisibilityAnimationOptions>({
+    visible: false,
+    animate: true,
+  });
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 2d78bf9d6b84..f3d8f3cdd915 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -55,11 +55,11 @@ import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
-import { setStatsVisible } from "../components/test/LiveStats";
 import {
   setLiveStatAcc,
   setLiveStatBurst,
   setLiveStatWpm,
+  setStatsVisible,
 } from "../signals/test";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(

From 435794eb1bef41f54281bdd70afcd35ef3a25149 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 8 Jan 2026 23:16:07 +0100
Subject: [PATCH 40/43] remove LiveStatsMini

---
 frontend/src/ts/components/mount.tsx          |  6 +--
 frontend/src/ts/components/test/LiveStats.tsx | 50 ++++---------------
 2 files changed, 14 insertions(+), 42 deletions(-)

diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index dd7271c1afa2..b083c8270a28 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -1,15 +1,15 @@
 import { render } from "solid-js/web";
 import { qsr } from "../utils/dom";
-import { LiveStats, LiveStatsMini } from "./test/LiveStats";
+import { LiveStats } from "./test/LiveStats";
 import { getAcc, getBurst, getWpm } from "../signals/test";
 
 export function mountComponents(): void {
   render(
-    () => <LiveStatsMini wpm={getWpm} acc={getAcc} burst={getBurst} />,
+    () => <LiveStats mode="mini" wpm={getWpm} acc={getAcc} burst={getBurst} />,
     qsr("#liveStatsMini").native,
   );
   render(
-    () => <LiveStats wpm={getWpm} acc={getAcc} burst={getBurst} />,
+    () => <LiveStats mode="text" wpm={getWpm} acc={getAcc} burst={getBurst} />,
     qsr("#liveStatsTextBottom").native,
   );
 }
diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
index 6d97f472e197..82d18384c61e 100644
--- a/frontend/src/ts/components/test/LiveStats.tsx
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -1,4 +1,4 @@
-import { Accessor, createSignal, JSXElement } from "solid-js";
+import { Accessor, JSXElement } from "solid-js";
 import {
   getLiveAccStyle,
   getLiveBurstStyle,
@@ -37,61 +37,33 @@ const getStatsVisible = (
   });
 };
 
-export function LiveStatsMini(props: {
+export function LiveStats(props: {
+  mode: "mini" | "text";
   wpm: Accessor<string>;
   acc: Accessor<string>;
   burst: Accessor<string>;
 }): JSXElement {
+  const isVisible = (
+    config: Accessor<string>,
+  ): Accessor<VisibilityAnimationOptions> =>
+    getStatsVisible(() => config() === props.mode);
+
   return (
     <>
       <Stat
         class="speed"
         value={props.wpm}
-        visibilityOptions={getStatsVisible(
-          () => getLiveSpeedStyle() === "mini",
-        )}
+        visibilityOptions={isVisible(getLiveSpeedStyle)}
       />
       <Stat
         class="acc"
         value={props.acc}
-        visibilityOptions={getStatsVisible(() => getLiveAccStyle() === "mini")}
+        visibilityOptions={isVisible(getLiveAccStyle)}
       />
       <Stat
         class="burst"
         value={props.burst}
-        visibilityOptions={getStatsVisible(
-          () => getLiveBurstStyle() === "mini",
-        )}
-      />
-    </>
-  );
-}
-
-export function LiveStats(props: {
-  wpm: Accessor<string>;
-  acc: Accessor<string>;
-  burst: Accessor<string>;
-}): JSXElement {
-  return (
-    <>
-      <Stat
-        class="liveSpeed"
-        value={props.wpm}
-        visibilityOptions={getStatsVisible(
-          () => getLiveSpeedStyle() === "text",
-        )}
-      />
-      <Stat
-        class="liveAcc"
-        value={props.acc}
-        visibilityOptions={getStatsVisible(() => getLiveAccStyle() === "text")}
-      />
-      <Stat
-        class="liveBurst"
-        value={props.burst}
-        visibilityOptions={getStatsVisible(
-          () => getLiveBurstStyle() === "text",
-        )}
+        visibilityOptions={isVisible(getLiveBurstStyle)}
       />
     </>
   );

From 091dcf704e02b7dece9491bbbc26b22334aabf10 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 9 Jan 2026 01:23:58 +0100
Subject: [PATCH 41/43] fix existing tests, add component test

---
 .../components/test/LiveStats.jsdom-spec.tsx  | 104 ++++++++++++
 frontend/__tests__/root/config.spec.ts        |   2 +-
 frontend/__tests__/setup-jsdom.ts             |  14 ++
 .../test/live-counter.jsdom-spec.tsx          |  28 ----
 frontend/__tests__/utils/dom.jsdom-spec.ts    |   4 +-
 frontend/src/ts/components/test/LiveStats.tsx |   5 +-
 .../src/ts/hooks/useVisibilityAnimation.ts    |   1 +
 frontend/src/ts/test/test-state.ts            |   2 +-
 frontend/vitest.config.ts                     |   2 +-
 pnpm-lock.yaml                                | 157 +-----------------
 vitest.config.ts                              |  24 ++-
 11 files changed, 155 insertions(+), 188 deletions(-)
 create mode 100644 frontend/__tests__/components/test/LiveStats.jsdom-spec.tsx
 delete mode 100644 frontend/__tests__/test/live-counter.jsdom-spec.tsx

diff --git a/frontend/__tests__/components/test/LiveStats.jsdom-spec.tsx b/frontend/__tests__/components/test/LiveStats.jsdom-spec.tsx
new file mode 100644
index 000000000000..4d477f574d57
--- /dev/null
+++ b/frontend/__tests__/components/test/LiveStats.jsdom-spec.tsx
@@ -0,0 +1,104 @@
+import { describe, vi, it, expect, beforeEach, Mock } from "vitest";
+import { createSignal } from "solid-js";
+import { render } from "@solidjs/testing-library";
+import { LiveStats } from "../../../src/ts/components/test/LiveStats";
+
+import * as ConfigSignals from "../../../src/ts/signals/config";
+import * as TestSignals from "../../../src/ts/signals/test";
+
+import { isFocused } from "../../../src/ts/test/focus";
+
+describe("LiveStats", () => {
+  const [wpm] = createSignal("120");
+  const [acc] = createSignal("98%");
+  const [burst] = createSignal("140");
+
+  const liveSpeedStyleMock = vi.spyOn(ConfigSignals, "getLiveSpeedStyle");
+  const liveAccStyleMock = vi.spyOn(ConfigSignals, "getLiveAccStyle");
+  const liveBurstStyleMock = vi.spyOn(ConfigSignals, "getLiveBurstStyle");
+  const statsVisibleMock = vi.spyOn(TestSignals, "statsVisible");
+
+  beforeEach(() => {
+    [
+      isFocused as Mock,
+      liveSpeedStyleMock,
+      liveAccStyleMock,
+      liveBurstStyleMock,
+      statsVisibleMock,
+    ].forEach((it) => it.mockClear());
+
+    (isFocused as Mock).mockReturnValue(true);
+    liveSpeedStyleMock.mockReturnValue("text");
+    liveBurstStyleMock.mockReturnValue("text");
+    liveAccStyleMock.mockReturnValue("text");
+    statsVisibleMock.mockReturnValue({ visible: true, animate: false });
+  });
+
+  function renderElement(mode: "mini" | "text"): {
+    speed: HTMLElement;
+    acc: HTMLElement;
+    burst: HTMLElement;
+  } {
+    const { container } = render(() => (
+      <LiveStats mode={mode} wpm={wpm} acc={acc} burst={burst} />
+    ));
+
+    return {
+      // oxlint-disable-next-line no-non-null-assertion
+      speed: container.querySelector(".speed")!,
+      // oxlint-disable-next-line no-non-null-assertion
+      acc: container.querySelector(".acc")!,
+      // oxlint-disable-next-line no-non-null-assertion
+      burst: container.querySelector(".burst")!,
+    };
+  }
+
+  it("does render if mode matches", () => {
+    //GIVEN
+
+    //WHEN
+    const { speed, acc, burst } = renderElement("text");
+
+    //THEN
+    expect(speed).toHaveAttribute("data-visible", "true");
+    expect(speed).toHaveTextContent("120");
+    expect(acc).toHaveAttribute("data-visible", "true");
+    expect(acc).toHaveTextContent("98%");
+    expect(burst).toHaveAttribute("data-visible", "true");
+    expect(burst).toHaveTextContent("140");
+  });
+  it("does not render if mode does not match", () => {
+    //WHEN
+    const { speed, acc, burst } = renderElement("mini");
+
+    //THEN
+    expect(speed).toHaveAttribute("data-visible", "false");
+    expect(acc).toHaveAttribute("data-visible", "false");
+    expect(burst).toHaveAttribute("data-visible", "false");
+  });
+
+  it("does not render if not focussed", () => {
+    //GIVEN
+    (isFocused as Mock).mockReturnValue(false);
+
+    //WHEN
+    const { speed, acc, burst } = renderElement("text");
+
+    //WHEN
+    expect(speed).toHaveAttribute("data-visible", "false");
+    expect(acc).toHaveAttribute("data-visible", "false");
+    expect(burst).toHaveAttribute("data-visible", "false");
+  });
+  it("does not render if statsVisible=false", () => {
+    //GIVEN
+    statsVisibleMock.mockReturnValue({ visible: false });
+
+    //WHEN
+    const { speed, acc, burst } = renderElement("text");
+
+    //WHEN
+    expect(speed).toHaveAttribute("data-visible", "false");
+    expect(acc).toHaveAttribute("data-visible", "false");
+    expect(burst).toHaveAttribute("data-visible", "false");
+  });
+});
diff --git a/frontend/__tests__/root/config.spec.ts b/frontend/__tests__/root/config.spec.ts
index 9021c5ea1b54..974bfe5106b9 100644
--- a/frontend/__tests__/root/config.spec.ts
+++ b/frontend/__tests__/root/config.spec.ts
@@ -53,7 +53,7 @@ describe("Config", () => {
       mocks.forEach((it) => it.mockClear());
 
       vi.mock("../../src/ts/test/test-state", () => ({
-        isActive: true,
+        isActive: () => true,
       }));
 
       isConfigValueValidMock.mockReturnValue(true);
diff --git a/frontend/__tests__/setup-jsdom.ts b/frontend/__tests__/setup-jsdom.ts
index 0255b940229d..dd762f0824dc 100644
--- a/frontend/__tests__/setup-jsdom.ts
+++ b/frontend/__tests__/setup-jsdom.ts
@@ -1,7 +1,21 @@
 import $ from "jquery";
+import { vi } from "vitest";
 import "@testing-library/jest-dom";
+import { getDefaultConfig } from "../src/ts/constants/default-config";
 
 //@ts-expect-error add to global
 global["$"] = $;
 //@ts-expect-error add to global
 global["jQuery"] = $;
+
+vi.mock("../src/ts/config", () => {
+  return {
+    default: getDefaultConfig(),
+  };
+});
+
+vi.mock("../src/ts/test/focus", () => {
+  return {
+    isFocused: vi.fn(),
+  };
+});
diff --git a/frontend/__tests__/test/live-counter.jsdom-spec.tsx b/frontend/__tests__/test/live-counter.jsdom-spec.tsx
deleted file mode 100644
index 61e6f2ff2528..000000000000
--- a/frontend/__tests__/test/live-counter.jsdom-spec.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// __tests__/LiveCounter.test.tsx
-import { describe, it, expect, afterEach } from "vitest";
-import { render, screen, cleanup } from "@solidjs/testing-library";
-import { createSignal } from "solid-js";
-import { LiveCounter } from "../../src/ts/test/live-counter";
-
-afterEach(() => cleanup());
-
-describe("LiveCounter", () => {
-  it("renders initial value", () => {
-    const [value] = createSignal("5");
-    render(() => <LiveCounter value={value} />);
-    expect(screen.getByText("5")).toBeInTheDocument();
-  });
-
-  it("updates reactively when signal changes", () => {
-    const [value, setValue] = createSignal("1");
-    render(() => <LiveCounter value={value} />);
-
-    expect(screen.getByText("1")).toBeInTheDocument();
-
-    setValue("42");
-    expect(screen.getByText("42")).toBeInTheDocument();
-
-    setValue("99");
-    expect(screen.getByText("99")).toBeInTheDocument();
-  });
-});
diff --git a/frontend/__tests__/utils/dom.jsdom-spec.ts b/frontend/__tests__/utils/dom.jsdom-spec.ts
index 8d38ebf56f40..25c5f424c4ed 100644
--- a/frontend/__tests__/utils/dom.jsdom-spec.ts
+++ b/frontend/__tests__/utils/dom.jsdom-spec.ts
@@ -27,7 +27,7 @@ describe("dom", () => {
       }
 
       beforeEach(() => {
-        handler.mockReset();
+        handler.mockClear();
 
         document.body.innerHTML = "";
         const root = document.createElement("div");
@@ -151,7 +151,7 @@ describe("dom", () => {
         );
 
         //WHEN click on mid1 handler is only called one time
-        handler.mockReset();
+        handler.mockClear();
         clickTarget = screen.getByTestId("mid1");
         await userEvent.click(clickTarget);
 
diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
index 82d18384c61e..d74d8380e0a6 100644
--- a/frontend/src/ts/components/test/LiveStats.tsx
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -45,8 +45,9 @@ export function LiveStats(props: {
 }): JSXElement {
   const isVisible = (
     config: Accessor<string>,
-  ): Accessor<VisibilityAnimationOptions> =>
-    getStatsVisible(() => config() === props.mode);
+  ): Accessor<VisibilityAnimationOptions> => {
+    return getStatsVisible(() => config() === props.mode);
+  };
 
   return (
     <>
diff --git a/frontend/src/ts/hooks/useVisibilityAnimation.ts b/frontend/src/ts/hooks/useVisibilityAnimation.ts
index e4c42682f31f..855280673c57 100644
--- a/frontend/src/ts/hooks/useVisibilityAnimation.ts
+++ b/frontend/src/ts/hooks/useVisibilityAnimation.ts
@@ -16,6 +16,7 @@ export function useVisibilityAnimation(
     const el = element();
     const opt = options();
     if (!el) return;
+    el.setAttribute("data-visible", opt.visible ? "true" : "false");
     if (opt.visible) {
       if (opt.animate) {
         el.show();
diff --git a/frontend/src/ts/test/test-state.ts b/frontend/src/ts/test/test-state.ts
index a47220c75830..6616b717c536 100644
--- a/frontend/src/ts/test/test-state.ts
+++ b/frontend/src/ts/test/test-state.ts
@@ -4,7 +4,7 @@ import { createSignal } from "solid-js";
 
 export let isRepeated = false;
 export let isPaceRepeat = false;
-export let [isActive, setActive] = createSignal(false);
+export const [isActive, setActive] = createSignal(false);
 export let activeChallenge: null | Challenge = null;
 export let savingEnabled = true;
 export let bailedOut = false;
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index 085b2ebde3db..05081b32ecef 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -31,7 +31,7 @@ export const projects: UserWorkspaceConfig[] = [
       setupFiles: ["__tests__/setup-jsdom.ts"],
       globals: true,
     },
-    plugins,
+    plugins: [solidPlugin()],
   },
 ];
 export default defineConfig({
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bf3f19e0cc68..c8a7514ad98b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -224,7 +224,7 @@ importers:
         version: 10.0.0
       '@vitest/coverage-v8':
         specifier: 4.0.15
-        version: 4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
+        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
       concurrently:
         specifier: 8.2.2
         version: 8.2.2
@@ -411,7 +411,7 @@ importers:
         version: 5.0.2
       '@vitest/coverage-v8':
         specifier: 4.0.15
-        version: 4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
+        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))
       autoprefixer:
         specifier: 10.4.20
         version: 10.4.20(postcss@8.4.31)
@@ -682,10 +682,6 @@ packages:
   '@adobe/css-tools@4.4.4':
     resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
-
   '@anatine/zod-openapi@1.14.2':
     resolution: {integrity: sha512-q0qHfnuNYVKu0Swrnnvfj9971AEyW7c8v9jCOZGCl5ZbyGMNG4RPyJkRcMi/JC8CRfdOe0IDfNm1nNsi2avprg==}
     peerDependencies:
@@ -714,26 +710,14 @@ packages:
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.25.2':
-    resolution: {integrity: sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/compat-data@7.28.5':
     resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.25.2':
-    resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/core@7.28.5':
     resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.25.0':
-    resolution: {integrity: sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/generator@7.28.5':
     resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
     engines: {node: '>=6.9.0'}
@@ -742,10 +726,6 @@ packages:
     resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.25.2':
-    resolution: {integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-compilation-targets@7.27.2':
     resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
     engines: {node: '>=6.9.0'}
@@ -783,12 +763,6 @@ packages:
     resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.25.2':
-    resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
   '@babel/helper-module-transforms@7.28.3':
     resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
     engines: {node: '>=6.9.0'}
@@ -815,10 +789,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-simple-access@7.24.7':
-    resolution: {integrity: sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
     resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
     engines: {node: '>=6.9.0'}
@@ -831,10 +801,6 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.24.8':
-    resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-validator-option@7.27.1':
     resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
     engines: {node: '>=6.9.0'}
@@ -843,10 +809,6 @@ packages:
     resolution: {integrity: sha512-zdf983tNfLZFletc0RRXYrHrucBEg95NIFMkn6K9dbeMYnsgHaSBGcQqdsCSStG2PYwRre0Qc2NNSCXbG+xc6g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.25.0':
-    resolution: {integrity: sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helpers@7.28.4':
     resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
     engines: {node: '>=6.9.0'}
@@ -1241,18 +1203,10 @@ packages:
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.25.0':
-    resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.25.2':
-    resolution: {integrity: sha512-s4/r+a7xTnny2O6FcZzqgT6nE4/GHEdcqj4qAeglbUOh0TeglEfmNJFAd/OLoVtGd6ZhAO8GCVvCNUO5t/VJVQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/traverse@7.28.5':
     resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
     engines: {node: '>=6.9.0'}
@@ -5620,10 +5574,6 @@ packages:
     resolution: {integrity: sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==}
     engines: {node: '>=10'}
 
-  globals@11.12.0:
-    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
-    engines: {node: '>=4'}
-
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -6325,11 +6275,6 @@ packages:
     resolution: {integrity: sha512-B7qPcEVE3NVkmSJbaYxvv4cHkVW7DQsZz13pUMrfS8z8Q/BuShN+gcTXrUlPiGqM2/t/EEaI030bpxMqY8gMlw==}
     engines: {node: '>= 10.16.0'}
 
-  jsesc@2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -9813,11 +9758,6 @@ snapshots:
 
   '@adobe/css-tools@4.4.4': {}
 
-  '@ampproject/remapping@2.3.0':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-
   '@anatine/zod-openapi@1.14.2(openapi3-ts@2.0.2)(zod@3.23.8)':
     dependencies:
       openapi3-ts: 2.0.2
@@ -9865,30 +9805,8 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.25.2': {}
-
   '@babel/compat-data@7.28.5': {}
 
-  '@babel/core@7.25.2':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.25.0
-      '@babel/helper-compilation-targets': 7.25.2
-      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
-      '@babel/helpers': 7.25.0
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.25.0
-      '@babel/traverse': 7.25.2
-      '@babel/types': 7.28.5
-      convert-source-map: 2.0.0
-      debug: 4.4.3
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/core@7.28.5':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -9909,13 +9827,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.25.0':
-    dependencies:
-      '@babel/types': 7.28.5
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 2.5.2
-
   '@babel/generator@7.28.5':
     dependencies:
       '@babel/parser': 7.28.5
@@ -9928,14 +9839,6 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.5
 
-  '@babel/helper-compilation-targets@7.25.2':
-    dependencies:
-      '@babel/compat-data': 7.25.2
-      '@babel/helper-validator-option': 7.24.8
-      browserslist: 4.24.4
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
   '@babel/helper-compilation-targets@7.27.2':
     dependencies:
       '@babel/compat-data': 7.28.5
@@ -9995,16 +9898,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)':
-    dependencies:
-      '@babel/core': 7.25.2
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-simple-access': 7.24.7
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -10038,13 +9931,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-simple-access@7.24.7':
-    dependencies:
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
     dependencies:
       '@babel/traverse': 7.28.5
@@ -10056,8 +9942,6 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
-  '@babel/helper-validator-option@7.24.8': {}
-
   '@babel/helper-validator-option@7.27.1': {}
 
   '@babel/helper-wrap-function@7.28.3':
@@ -10068,11 +9952,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helpers@7.25.0':
-    dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
-
   '@babel/helpers@7.28.4':
     dependencies:
       '@babel/template': 7.27.2
@@ -10564,30 +10443,12 @@ snapshots:
 
   '@babel/runtime@7.28.4': {}
 
-  '@babel/template@7.25.0':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
       '@babel/parser': 7.28.5
       '@babel/types': 7.28.5
 
-  '@babel/traverse@7.25.2':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
-      debug: 4.4.3
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/traverse@7.28.5':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -12473,7 +12334,7 @@ snapshots:
 
   '@sentry/bundler-plugin-core@3.3.1(encoding@0.1.13)':
     dependencies:
-      '@babel/core': 7.25.2
+      '@babel/core': 7.28.5
       '@sentry/babel-plugin-component-annotate': 3.3.1
       '@sentry/cli': 2.42.2(encoding@0.1.13)
       dotenv: 16.4.5
@@ -12921,7 +12782,7 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       eslint-visitor-keys: 3.4.3
 
-  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
+  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.0.15
@@ -12934,11 +12795,11 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+      vitest: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
+  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1))':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.0.15
@@ -12951,7 +12812,7 @@ snapshots:
       obug: 2.1.1
       std-env: 3.10.0
       tinyrainbow: 3.0.3
-      vitest: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
+      vitest: 4.0.15(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(sass@1.70.0)(terser@5.44.1)(tsx@4.16.2)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -15590,8 +15451,6 @@ snapshots:
     dependencies:
       ini: 2.0.0
 
-  globals@11.12.0: {}
-
   globals@14.0.0: {}
 
   globals@15.15.0: {}
@@ -16353,8 +16212,6 @@ snapshots:
 
   jsep@1.4.0: {}
 
-  jsesc@2.5.2: {}
-
   jsesc@3.1.0: {}
 
   json-bigint@1.0.0:
diff --git a/vitest.config.ts b/vitest.config.ts
index 22005f4254fc..55784ecabbe8 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -2,6 +2,9 @@ import { defineConfig, UserWorkspaceConfig } from "vitest/config";
 import { projects as backendProjects } from "./backend/vitest.config";
 import { projects as frontendProjects } from "./frontend/vitest.config";
 
+//oxlint-disable-next-line no-explicit-any
+let plugins: any[] = [];
+
 export default defineConfig({
   test: {
     projects: [
@@ -10,6 +13,7 @@ export default defineConfig({
       "packages/**/vitest.config.ts",
     ],
   },
+  plugins,
 });
 
 function convertTests(
@@ -17,15 +21,16 @@ function convertTests(
   root: string,
 ): UserWorkspaceConfig[] {
   return (projects as UserWorkspaceConfig[]).map((it) => {
+    copySolidPlugin(it);
     const test = it.test ?? {};
     const name: string | { label: string } = test.name ?? "unknown";
 
     let updatedName =
       name === null || typeof name === "string"
-        ? `${name} (${root})`
-        : { ...name, label: `${name.label} (${root})` };
+        ? `${name}-${root}`
+        : { ...name, label: `${name.label}-${root}` };
 
-    return {
+    const final = {
       ...it,
       test: {
         ...test,
@@ -33,5 +38,18 @@ function convertTests(
         name: updatedName,
       },
     } as UserWorkspaceConfig;
+
+    return final;
   });
 }
+
+/**
+ * Tests for solidJs need the solid plugin to run on config level and on test level. idk why.
+ */
+function copySolidPlugin(config: UserWorkspaceConfig): void {
+  if (!config.plugins) return;
+  config.plugins
+    //@ts-expect-error this is fine
+    .filter((it) => it["name"] === "solid")
+    .forEach((it) => plugins.push(it));
+}

From b3adfcc04f8eb5999104b5764d60e1b5d5e40532 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 9 Jan 2026 11:30:46 +0100
Subject: [PATCH 42/43] cleanup

---
 vitest.config.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/vitest.config.ts b/vitest.config.ts
index 55784ecabbe8..f5211a3af1be 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -30,7 +30,7 @@ function convertTests(
         ? `${name}-${root}`
         : { ...name, label: `${name.label}-${root}` };
 
-    const final = {
+    return {
       ...it,
       test: {
         ...test,
@@ -38,13 +38,11 @@ function convertTests(
         name: updatedName,
       },
     } as UserWorkspaceConfig;
-
-    return final;
   });
 }
 
 /**
- * Tests for solidJs need the solid plugin to run on config level and on test level. idk why.
+ * Tests for solidJs need the solid plugin to run on config level and on test level. idk why
  */
 function copySolidPlugin(config: UserWorkspaceConfig): void {
   if (!config.plugins) return;

From 048c4a18d075b89f5a89ad6ba11376b8527e9fed Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Fri, 9 Jan 2026 13:05:53 +0100
Subject: [PATCH 43/43] implement color, opacity change config to a single
 signal

---
 frontend/src/html/pages/test.html             |  10 +-
 frontend/src/styles/test.scss                 |  95 ++-----
 frontend/src/ts/components/mount.tsx          |  23 +-
 frontend/src/ts/components/test/LiveStats.tsx | 166 +++++++++--
 frontend/src/ts/signals/config.ts             |  21 +-
 frontend/src/ts/signals/test.ts               | 108 +++++++
 frontend/src/ts/states/time.ts                |   4 +
 frontend/src/ts/test/focus.ts                 |   3 -
 frontend/src/ts/test/test-timer.ts            |   5 +-
 frontend/src/ts/test/test-ui.ts               |  66 +----
 frontend/src/ts/test/timer-progress.ts        | 269 ------------------
 11 files changed, 330 insertions(+), 440 deletions(-)
 delete mode 100644 frontend/src/ts/test/timer-progress.ts

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index 4da84f0bec3b..3067055f618e 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -124,14 +124,8 @@
     <div id="memoryTimer">Time left to memorise all words: 0s</div>
     <div id="layoutfluidTimer">Time left to memorise all words: 0s</div>
     <div id="testModesNotice"></div>
-    <div id="liveStatsTextTop" class="timerMain">
-      <div class="wrapper">
-        <div class="timerProgress hidden">1:00</div>
-      </div>
-    </div>
-    <div id="liveStatsMini" class="full-width timerMain">
-      <div class="time hidden">1:00</div>
-    </div>
+    <div id="liveStatsTextTop"></div>
+    <div id="liveStatsMini" class="full-width"></div>
     <div id="wordsWrapper" class="content-grid full-width" translate="no">
       <textarea
         id="wordsInput"
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 74d14afd65ff..80b217b397c0 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -124,7 +124,6 @@
     display: grid;
     font-size: 10rem;
 
-    opacity: 0;
     width: 0;
     height: 0;
     justify-self: center;
@@ -163,8 +162,8 @@
     }
   }
 
-  #liveStatsTextBottom.timerMain,
-  #liveStatsTextTop.timerMain {
+  #liveStatsTextBottom .colorMain,
+  #liveStatsTextTop .colorMain {
     color: var(--main-color);
   }
 
@@ -172,8 +171,8 @@
     background: var(--main-color);
   }
 
-  #liveStatsTextBottom.timerSub,
-  #liveStatsTextTop.timerSub {
+  #liveStatsTextBottom .colorSub,
+  #liveStatsTextTop .colorSub {
     color: var(--sub-color);
   }
 
@@ -181,8 +180,8 @@
     background: var(--sub-color);
   }
 
-  #liveStatsTextBottom.timerText,
-  #liveStatsTextTop.timerText {
+  #liveStatsTextBottom .colorText,
+  #liveStatsTextTop .colorText {
     color: var(--text-color);
   }
 
@@ -1474,68 +1473,36 @@
     }
   }
   #liveStatsMini {
-    width: 0;
-    justify-content: start;
-    height: 0;
-    margin-left: 0.25em;
-    display: flex;
-    margin-top: -1.25em;
-    color: black;
-
-    div {
-      font-size: 1em;
-      line-height: 1em;
-    }
-
-    .time,
-    .speed,
-    .acc {
-      margin-right: 0.5em;
-    }
+    .wrapper {
+      width: 0;
+      justify-content: start;
+      height: 0;
+      display: flex;
+      margin-top: -1.25em;
+      color: black;
 
-    .time,
-    .speed,
-    .acc,
-    .burst {
-      //opacity: 0;
-    }
+      div {
+        font-size: 1em;
+        line-height: 1em;
+      }
 
-    &.timerMain {
-      color: var(--main-color);
-    }
+      .time,
+      .speed,
+      .acc {
+        margin-right: 0.5em;
+      }
 
-    &.timerSub {
-      color: var(--sub-color);
-    }
+      &.colorMain {
+        color: var(--main-color);
+      }
 
-    &.timerText {
-      color: var(--text-color);
-    }
+      &.colorSub {
+        color: var(--sub-color);
+      }
 
-    &.size125 {
-      margin-top: -1.75rem;
-      font-size: 1.25rem;
-      line-height: 1.25rem;
-    }
-    &.size15 {
-      margin-top: -2rem;
-      font-size: 1.5rem;
-      line-height: 1.5rem;
-    }
-    &.size2 {
-      margin-top: -2.5rem;
-      font-size: 2rem;
-      line-height: 2rem;
-    }
-    &.size3 {
-      margin-top: -3.5rem;
-      font-size: 3rem;
-      line-height: 3rem;
-    }
-    &.size4 {
-      margin-top: -4.5rem;
-      font-size: 4rem;
-      line-height: 4rem;
+      &.colorText {
+        color: var(--text-color);
+      }
     }
   }
 }
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index b083c8270a28..3387e85db644 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -1,15 +1,30 @@
 import { render } from "solid-js/web";
 import { qsr } from "../utils/dom";
-import { LiveStats } from "./test/LiveStats";
-import { getAcc, getBurst, getWpm } from "../signals/test";
+import {
+  TextLiveStatsBottom,
+  MiniLiveStats,
+  TextLiveStatsTop,
+} from "./test/LiveStats";
+import { getAcc, getBurst, getProgress, getWpm } from "../signals/test";
 
 export function mountComponents(): void {
   render(
-    () => <LiveStats mode="mini" wpm={getWpm} acc={getAcc} burst={getBurst} />,
+    () => (
+      <MiniLiveStats
+        progress={getProgress}
+        wpm={getWpm}
+        acc={getAcc}
+        burst={getBurst}
+      />
+    ),
     qsr("#liveStatsMini").native,
   );
   render(
-    () => <LiveStats mode="text" wpm={getWpm} acc={getAcc} burst={getBurst} />,
+    () => <TextLiveStatsBottom wpm={getWpm} acc={getAcc} burst={getBurst} />,
     qsr("#liveStatsTextBottom").native,
   );
+  render(
+    () => <TextLiveStatsTop progress={getProgress} />,
+    qsr("#liveStatsTextTop").native,
+  );
 }
diff --git a/frontend/src/ts/components/test/LiveStats.tsx b/frontend/src/ts/components/test/LiveStats.tsx
index d74d8380e0a6..57fb14036b36 100644
--- a/frontend/src/ts/components/test/LiveStats.tsx
+++ b/frontend/src/ts/components/test/LiveStats.tsx
@@ -1,28 +1,28 @@
 import { Accessor, JSXElement } from "solid-js";
-import {
-  getLiveAccStyle,
-  getLiveBurstStyle,
-  getLiveSpeedStyle,
-} from "../../signals/config";
+
 import { isFocused } from "../../test/focus";
 import {
   useVisibilityAnimation,
   VisibilityAnimationOptions,
 } from "../../hooks/useVisibilityAnimation";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
-import { statsVisible } from "../../signals/test";
+import { getTestTime, statsVisible } from "../../signals/test";
+import Config from "../../config";
+import * as CustomText from "../../test/custom-text";
+import { getConfigSignal } from "../../signals/config";
 
 function Stat(props: {
   value: Accessor<string>;
   visibilityOptions: Accessor<VisibilityAnimationOptions>;
   class?: string;
+  style?: Record<string, string>;
 }): JSXElement {
   const [ref, element] = useRefWithUtils<HTMLDivElement>();
 
   useVisibilityAnimation(element, props.visibilityOptions);
 
   return (
-    <div ref={ref} class={props.class}>
+    <div ref={ref} class={props.class} style={props.style}>
       {props.value()}
     </div>
   );
@@ -37,8 +37,49 @@ const getStatsVisible = (
   });
 };
 
-export function LiveStats(props: {
-  mode: "mini" | "text";
+function getStatsColorClass(): string {
+  const cfg = getConfigSignal();
+  const configValue = cfg.timerColor;
+  if (configValue === "main") {
+    return "colorMain";
+  } else if (configValue === "sub") {
+    return "colorSub";
+  } else if (configValue === "text") {
+    return "colorText";
+  } else if (configValue === "black") {
+    return "colorBlack";
+  }
+  return "";
+}
+
+function getFlashTimerOpacity(): string {
+  let opacity = "1";
+  const time = getTestTime();
+  let maxtime = Config.time;
+  if (Config.mode === "custom" && CustomText.getLimitMode() === "time") {
+    maxtime = CustomText.getLimitValue();
+  }
+
+  const timedTest =
+    Config.mode === "time" ||
+    (Config.mode === "custom" && CustomText.getLimitMode() === "time");
+
+  if (
+    timedTest &&
+    (getConfigSignal().timerStyle === "flash_mini" ||
+      getConfigSignal().timerStyle === "flash_text")
+  ) {
+    if ((maxtime - time) % 15 !== 0) {
+      opacity = "0";
+    } else {
+      opacity = "1";
+    }
+  }
+  return opacity;
+}
+
+export function MiniLiveStats(props: {
+  progress: Accessor<string>;
   wpm: Accessor<string>;
   acc: Accessor<string>;
   burst: Accessor<string>;
@@ -50,22 +91,113 @@ export function LiveStats(props: {
   };
 
   return (
-    <>
+    <div
+      class="wrapper"
+      classList={{
+        [getStatsColorClass()]: true,
+      }}
+      style={{
+        opacity: getConfigSignal().timerOpacity,
+      }}
+    >
+      <Stat
+        class={"progress time"}
+        value={props.progress}
+        style={{ opacity: getFlashTimerOpacity() }}
+        visibilityOptions={getStatsVisible(
+          () =>
+            getConfigSignal().timerStyle === "mini" ||
+            getConfigSignal().timerStyle === "flash_mini",
+        )}
+      />
       <Stat
-        class="speed"
+        class={"speed"}
         value={props.wpm}
-        visibilityOptions={isVisible(getLiveSpeedStyle)}
+        visibilityOptions={getStatsVisible(
+          () => getConfigSignal().liveSpeedStyle === "mini",
+        )}
       />
       <Stat
-        class="acc"
+        class={"acc"}
         value={props.acc}
-        visibilityOptions={isVisible(getLiveAccStyle)}
+        visibilityOptions={getStatsVisible(
+          () => getConfigSignal().liveAccStyle === "mini",
+        )}
       />
       <Stat
-        class="burst"
+        class={"burst"}
         value={props.burst}
-        visibilityOptions={isVisible(getLiveBurstStyle)}
+        visibilityOptions={getStatsVisible(
+          () => getConfigSignal().liveBurstStyle === "mini",
+        )}
       />
-    </>
+    </div>
+  );
+}
+
+export function TextLiveStatsTop(props: {
+  progress: Accessor<string>;
+}): JSXElement {
+  return (
+    <div
+      class="wrapper"
+      classList={{
+        [getStatsColorClass()]: true,
+      }}
+      style={{
+        opacity: getConfigSignal().timerOpacity,
+      }}
+    >
+      <Stat
+        class={"progress time"}
+        value={props.progress}
+        style={{ opacity: getFlashTimerOpacity() }}
+        visibilityOptions={getStatsVisible(
+          () =>
+            getConfigSignal().timerStyle === "text" ||
+            getConfigSignal().timerStyle === "flash_text",
+        )}
+      />
+    </div>
+  );
+}
+
+export function TextLiveStatsBottom(props: {
+  wpm: Accessor<string>;
+  acc: Accessor<string>;
+  burst: Accessor<string>;
+}): JSXElement {
+  return (
+    <div
+      class="wrapper"
+      classList={{
+        [getStatsColorClass()]: true,
+      }}
+      style={{
+        opacity: getConfigSignal().timerOpacity,
+      }}
+    >
+      <Stat
+        class={"liveSpeed"}
+        value={props.wpm}
+        visibilityOptions={getStatsVisible(
+          () => getConfigSignal().liveSpeedStyle === "text",
+        )}
+      />
+      <Stat
+        class={"liveAcc"}
+        value={props.acc}
+        visibilityOptions={getStatsVisible(
+          () => getConfigSignal().liveAccStyle === "text",
+        )}
+      />
+      <Stat
+        class={"liveBurst"}
+        value={props.burst}
+        visibilityOptions={getStatsVisible(
+          () => getConfigSignal().liveBurstStyle === "text",
+        )}
+      />
+    </div>
   );
 }
diff --git a/frontend/src/ts/signals/config.ts b/frontend/src/ts/signals/config.ts
index 8a8a6e02fcb3..3a0a68cb2a19 100644
--- a/frontend/src/ts/signals/config.ts
+++ b/frontend/src/ts/signals/config.ts
@@ -1,23 +1,12 @@
 import { createSignal } from "solid-js";
 import * as ConfigEvent from "../observables/config-event";
 import config from "../config";
+import { Config } from "@monkeytype/schemas/configs";
 
-const [getLiveSpeedStyle, setLiveSpeedStyle] = createSignal(
-  config.liveSpeedStyle,
-);
-const [getLiveAccStyle, setLiveAccStyle] = createSignal(config.liveSpeedStyle);
-const [getLiveBurstStyle, setLiveBurstStyle] = createSignal(
-  config.liveSpeedStyle,
-);
+const [getConfigSignal, setConfigSignal] = createSignal<Config>(config);
 
-export { getLiveSpeedStyle, getLiveAccStyle, getLiveBurstStyle };
+export { getConfigSignal };
 
-ConfigEvent.subscribe(({ key, newValue }) => {
-  if (key === "liveSpeedStyle") {
-    setLiveSpeedStyle(newValue);
-  } else if (key === "liveAccStyle") {
-    setLiveAccStyle(newValue);
-  } else if (key === "liveBurstStyle") {
-    setLiveBurstStyle(newValue);
-  }
+ConfigEvent.subscribe(() => {
+  setConfigSignal(structuredClone(config));
 });
diff --git a/frontend/src/ts/signals/test.ts b/frontend/src/ts/signals/test.ts
index 133f9a4e3dc0..c3487ba86bf7 100644
--- a/frontend/src/ts/signals/test.ts
+++ b/frontend/src/ts/signals/test.ts
@@ -1,6 +1,15 @@
 import { createSignal } from "solid-js";
 import { VisibilityAnimationOptions } from "../hooks/useVisibilityAnimation";
+import * as Time from "../states/time";
+import Config from "../config";
+import * as CustomText from "../test/custom-text";
+import * as DateTime from "../utils/date-and-time";
+import * as TestWords from "../test/test-words";
+import * as TestInput from "../test/test-input";
+import * as TestState from "../test/test-state";
 
+export const [getTestTime, setTestTime] = createSignal(0);
+export const [getProgress, setLiveProgress] = createSignal("");
 export const [getWpm, setLiveStatWpm] = createSignal("0");
 export const [getAcc, setLiveStatAcc] = createSignal("100%");
 export const [getBurst, setLiveStatBurst] = createSignal("0");
@@ -10,3 +19,102 @@ export const [statsVisible, setStatsVisible] =
     visible: false,
     animate: true,
   });
+
+function getCurrentCount(): number {
+  if (Config.mode === "custom" && CustomText.getLimitMode() === "section") {
+    return (
+      (TestWords.words.sectionIndexList[TestState.activeWordIndex] as number) -
+      1
+    );
+  } else {
+    return TestInput.input.getHistory().length;
+  }
+}
+
+export function updateProgressSignal(): void {
+  const time = Time.get();
+  if (
+    Config.mode === "time" ||
+    (Config.mode === "custom" && CustomText.getLimitMode() === "time")
+  ) {
+    let maxtime = Config.time;
+    if (Config.mode === "custom" && CustomText.getLimitMode() === "time") {
+      maxtime = CustomText.getLimitValue();
+    }
+    if (Config.timerStyle === "text") {
+      let displayTime = DateTime.secondsToString(maxtime - time);
+      if (maxtime === 0) {
+        displayTime = DateTime.secondsToString(time);
+      }
+      setLiveProgress(displayTime);
+    } else if (Config.timerStyle === "flash_mini") {
+      let displayTime = DateTime.secondsToString(maxtime - time);
+      if (maxtime === 0) {
+        displayTime = DateTime.secondsToString(time);
+      }
+      setLiveProgress(displayTime);
+    } else if (Config.timerStyle === "flash_text") {
+      let displayTime = DateTime.secondsToString(maxtime - time);
+      if (maxtime === 0) {
+        displayTime = DateTime.secondsToString(time);
+      }
+      setLiveProgress(displayTime);
+    } else if (Config.timerStyle === "mini") {
+      let displayTime = DateTime.secondsToString(maxtime - time);
+      if (maxtime === 0) {
+        displayTime = DateTime.secondsToString(time);
+      }
+      setLiveProgress(displayTime);
+    }
+  } else if (
+    Config.mode === "words" ||
+    Config.mode === "custom" ||
+    Config.mode === "quote"
+  ) {
+    let outof = TestWords.words.length;
+    if (Config.mode === "words") {
+      outof = Config.words;
+    }
+    if (Config.mode === "custom") {
+      outof = CustomText.getLimitValue();
+    }
+    if (Config.mode === "quote") {
+      outof = TestWords.currentQuote?.textSplit.length ?? 1;
+    }
+    if (Config.timerStyle === "text") {
+      if (outof === 0) {
+        setLiveProgress(`${TestInput.input.getHistory().length}`);
+      } else {
+        setLiveProgress(`${getCurrentCount()}/${outof}`);
+      }
+    } else if (Config.timerStyle === "flash_mini") {
+      if (outof === 0) {
+        setLiveProgress(`${TestInput.input.getHistory().length}`);
+      } else {
+        setLiveProgress(`${getCurrentCount()}/${outof}`);
+      }
+    } else if (Config.timerStyle === "flash_text") {
+      if (outof === 0) {
+        setLiveProgress(`${TestInput.input.getHistory().length}`);
+      } else {
+        setLiveProgress(`${getCurrentCount()}/${outof}`);
+      }
+    } else if (Config.timerStyle === "mini") {
+      if (outof === 0) {
+        setLiveProgress(`${TestInput.input.getHistory().length}`);
+      } else {
+        setLiveProgress(`${getCurrentCount()}/${outof}`);
+      }
+    }
+  } else if (Config.mode === "zen") {
+    if (Config.timerStyle === "text") {
+      setLiveProgress(`${TestInput.input.getHistory().length}`);
+    } else if (Config.timerStyle === "flash_mini") {
+      setLiveProgress(`${TestInput.input.getHistory().length}`);
+    } else if (Config.timerStyle === "flash_text") {
+      setLiveProgress(`${TestInput.input.getHistory().length}`);
+    } else {
+      setLiveProgress(`${TestInput.input.getHistory().length}`);
+    }
+  }
+}
diff --git a/frontend/src/ts/states/time.ts b/frontend/src/ts/states/time.ts
index c18761a1a208..35e3496def25 100644
--- a/frontend/src/ts/states/time.ts
+++ b/frontend/src/ts/states/time.ts
@@ -1,3 +1,5 @@
+import { setTestTime } from "../signals/test";
+
 let time = 0;
 
 export function get(): number {
@@ -6,8 +8,10 @@ export function get(): number {
 
 export function set(number: number): void {
   time = number;
+  setTestTime(time);
 }
 
 export function increment(): void {
   time++;
+  setTestTime(time);
 }
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index 4ce820e55a67..8cbd420234a0 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -1,5 +1,4 @@
 import * as Caret from "./caret";
-import * as TimerProgress from "./timer-progress";
 import * as PageTransition from "../states/page-transition";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { createSignal } from "solid-js";
@@ -63,7 +62,6 @@ export function set(value: boolean, withCursor = false): void {
       }
 
       Caret.stopAnimation();
-      TimerProgress.show();
     } else if (!value && state()) {
       setState(false);
 
@@ -79,7 +77,6 @@ export function set(value: boolean, withCursor = false): void {
       }
 
       Caret.startAnimation();
-      TimerProgress.hide();
     }
   });
 }
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index 19ef7c74ac21..093a3511dd9a 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -3,7 +3,6 @@
 
 import Config, { setConfig } from "../config";
 import * as CustomText from "./custom-text";
-import * as TimerProgress from "./timer-progress";
 import * as TestStats from "./test-stats";
 import * as TestInput from "./test-input";
 import * as Monkey from "./monkey";
@@ -21,7 +20,7 @@ import { clearLowFpsMode, setLowFpsMode } from "../anim";
 import { createTimer } from "animejs";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import Format from "../utils/format";
-import { setLiveStatWpm } from "../signals/test";
+import { setLiveStatWpm, updateProgressSignal } from "../signals/test";
 
 let lastLoop = 0;
 const newTimer = createTimer({
@@ -235,7 +234,7 @@ function timerStep(): void {
   });
 
   // already using raf
-  TimerProgress.update();
+  updateProgressSignal();
   setLiveStatWpm(
     Format.typingSpeed(Config.blindMode ? wpmAndRaw.raw : wpmAndRaw.wpm, {
       showDecimalPlaces: false,
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index f3d8f3cdd915..f5850d322541 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -16,7 +16,6 @@ import * as Hangul from "hangul-js";
 import * as ResultWordHighlight from "../elements/result-word-highlight";
 import * as ActivePage from "../states/active-page";
 import Format from "../utils/format";
-import { TimerColor, TimerOpacity } from "@monkeytype/schemas/configs";
 import { convertRemToPixels } from "../utils/numbers";
 import {
   findSingleActiveFunboxWithFunction,
@@ -33,7 +32,6 @@ import * as Numbers from "@monkeytype/util/numbers";
 import * as TestStats from "./test-stats";
 import * as KeymapEvent from "../observables/keymap-event";
 import * as Focus from "../test/focus";
-import * as TimerProgress from "../test/timer-progress";
 import * as Monkey from "./monkey";
 import { animate } from "animejs";
 import {
@@ -56,10 +54,12 @@ import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import { qsr } from "../utils/dom";
 import {
+  setLiveProgress,
   setLiveStatAcc,
   setLiveStatBurst,
   setLiveStatWpm,
   setStatsVisible,
+  updateProgressSignal,
 } from "../signals/test";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
@@ -1586,48 +1586,6 @@ function updateLiveStatsMargin(): void {
   }
 }
 
-function updateLiveStatsOpacity(value: TimerOpacity): void {
-  $("#barTimerProgress").css("opacity", parseFloat(value as string));
-  $("#liveStatsTextTop").css("opacity", parseFloat(value as string));
-  $("#liveStatsTextBottom").css("opacity", parseFloat(value as string));
-  $("#liveStatsMini").css("opacity", parseFloat(value as string));
-}
-
-function updateLiveStatsColor(value: TimerColor): void {
-  $("#barTimerProgress").removeClass("timerSub");
-  $("#barTimerProgress").removeClass("timerText");
-  $("#barTimerProgress").removeClass("timerMain");
-
-  $("#liveStatsTextTop").removeClass("timerSub");
-  $("#liveStatsTextTop").removeClass("timerText");
-  $("#liveStatsTextTop").removeClass("timerMain");
-
-  $("#liveStatsTextBottom").removeClass("timerSub");
-  $("#liveStatsTextBottom").removeClass("timerText");
-  $("#liveStatsTextBottom").removeClass("timerMain");
-
-  $("#liveStatsMini").removeClass("timerSub");
-  $("#liveStatsMini").removeClass("timerText");
-  $("#liveStatsMini").removeClass("timerMain");
-
-  if (value === "main") {
-    $("#barTimerProgress").addClass("timerMain");
-    $("#liveStatsTextTop").addClass("timerMain");
-    $("#liveStatsTextBottom").addClass("timerMain");
-    $("#liveStatsMini").addClass("timerMain");
-  } else if (value === "sub") {
-    $("#barTimerProgress").addClass("timerSub");
-    $("#liveStatsTextTop").addClass("timerSub");
-    $("#liveStatsTextBottom").addClass("timerSub");
-    $("#liveStatsMini").addClass("timerSub");
-  } else if (value === "text") {
-    $("#barTimerProgress").addClass("timerText");
-    $("#liveStatsTextTop").addClass("timerText");
-    $("#liveStatsTextBottom").addClass("timerText");
-    $("#liveStatsMini").addClass("timerText");
-  }
-}
-
 function showHideTestRestartButton(showHide: boolean): void {
   if (showHide) {
     $(".pageTest #restartTestButton").removeClass("hidden");
@@ -1688,7 +1646,8 @@ function afterAnyTestInput(
   }
 
   if (Config.mode !== "time") {
-    TimerProgress.update();
+    // TimerProgress.update();
+    updateProgressSignal();
   }
 
   if (Config.keymapMode === "next") {
@@ -1819,8 +1778,7 @@ export async function afterTestWordChange(
 export function onTestStart(): void {
   Focus.set(true);
   Monkey.show();
-  TimerProgress.show();
-  TimerProgress.update();
+  updateProgressSignal();
   setStatsVisible({
     visible: true,
     animate: true,
@@ -1837,11 +1795,10 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
     visible: false,
     animate: false,
   });
+  setLiveProgress("0");
   setLiveStatWpm("0");
   setLiveStatBurst("0");
   setLiveStatAcc("100%");
-  TimerProgress.instantHide();
-  TimerProgress.reset();
   Monkey.instantHide();
   LayoutfluidFunboxTimer.instantHide();
   updatePremid();
@@ -1884,12 +1841,15 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
 
 export function onTestFinish(): void {
   Caret.hide();
-  TimerProgress.hide();
   OutOfFocus.hide();
   Monkey.hide();
   if (Config.playSoundOnClick === "16") {
     void SoundController.playFartReverb();
   }
+  setStatsVisible({
+    visible: false,
+    animate: true,
+  });
 }
 
 $(".pageTest #copyWordsListButton").on("click", async () => {
@@ -2000,12 +1960,6 @@ ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "quickRestart") {
     showHideTestRestartButton(newValue === "off");
   }
-  if (key === "timerOpacity") {
-    updateLiveStatsOpacity(newValue);
-  }
-  if (key === "timerColor") {
-    updateLiveStatsColor(newValue);
-  }
   if (key === "showOutOfFocusWarning" && !newValue) {
     OutOfFocus.hide();
   }
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
deleted file mode 100644
index 8b3967d60b94..000000000000
--- a/frontend/src/ts/test/timer-progress.ts
+++ /dev/null
@@ -1,269 +0,0 @@
-import Config from "../config";
-import * as CustomText from "./custom-text";
-import * as DateTime from "../utils/date-and-time";
-import * as TestWords from "./test-words";
-import * as TestInput from "./test-input";
-import * as Time from "../states/time";
-import * as TestState from "./test-state";
-import * as ConfigEvent from "../observables/config-event";
-import { applyReducedMotion } from "../utils/misc";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { animate } from "animejs";
-
-const barEl = document.querySelector("#barTimerProgress .bar") as HTMLElement;
-const barOpacityEl = document.querySelector(
-  "#barTimerProgress .opacityWrapper",
-) as HTMLElement;
-const textEl = document.querySelector(
-  "#liveStatsTextTop .timerProgress",
-) as HTMLElement;
-const miniEl = document.querySelector("#liveStatsMini .time") as HTMLElement;
-
-export function show(): void {
-  if (!TestState.isActive()) return;
-  requestDebouncedAnimationFrame("timer-progress.show", () => {
-    if (Config.mode !== "zen" && Config.timerStyle === "bar") {
-      animate(barOpacityEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          barOpacityEl.classList.remove("hidden");
-        },
-      });
-    } else if (Config.timerStyle === "text") {
-      animate(textEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          textEl.classList.remove("hidden");
-        },
-      });
-    } else if (Config.timerStyle === "flash_mini") {
-      animate(miniEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          miniEl.classList.remove("hidden");
-        },
-      });
-    } else if (Config.timerStyle === "flash_text") {
-      animate(textEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          textEl.classList.remove("hidden");
-        },
-      });
-    } else if (Config.mode === "zen" || Config.timerStyle === "mini") {
-      animate(miniEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          miniEl.classList.remove("hidden");
-        },
-      });
-    }
-  });
-}
-
-export function reset(): void {
-  requestDebouncedAnimationFrame("timer-progress.reset", () => {
-    let width = "0vw";
-    if (
-      Config.mode === "time" ||
-      (Config.mode === "custom" && CustomText.getLimitMode() === "time")
-    ) {
-      width = "100vw";
-    }
-
-    animate(barEl, {
-      width,
-      duration: 0,
-    });
-    miniEl.textContent = "0";
-    textEl.textContent = "0";
-  });
-}
-
-export function hide(): void {
-  requestDebouncedAnimationFrame("timer-progress.hide", () => {
-    animate(barOpacityEl, {
-      opacity: 0,
-      duration: applyReducedMotion(125),
-    });
-
-    animate(miniEl, {
-      opacity: 0,
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        miniEl.classList.add("hidden");
-      },
-    });
-
-    animate(textEl, {
-      opacity: 0,
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        textEl.classList.add("hidden");
-      },
-    });
-  });
-}
-
-export function instantHide(): void {
-  barOpacityEl.style.opacity = "0";
-
-  miniEl.classList.add("hidden");
-  miniEl.style.opacity = "0";
-
-  textEl.classList.add("hidden");
-  textEl.style.opacity = "0";
-}
-
-function getCurrentCount(): number {
-  if (Config.mode === "custom" && CustomText.getLimitMode() === "section") {
-    return (
-      (TestWords.words.sectionIndexList[TestState.activeWordIndex] as number) -
-      1
-    );
-  } else {
-    return TestInput.input.getHistory().length;
-  }
-}
-
-export function update(): void {
-  requestDebouncedAnimationFrame("timer-progress.update", () => {
-    const time = Time.get();
-    if (
-      Config.mode === "time" ||
-      (Config.mode === "custom" && CustomText.getLimitMode() === "time")
-    ) {
-      let maxtime = Config.time;
-      if (Config.mode === "custom" && CustomText.getLimitMode() === "time") {
-        maxtime = CustomText.getLimitValue();
-      }
-      if (Config.timerStyle === "bar") {
-        const percent = 100 - ((time + 1) / maxtime) * 100;
-
-        animate(barEl, {
-          width: percent + "vw",
-          duration: 1000,
-          ease: "linear",
-        });
-      } else if (Config.timerStyle === "text") {
-        let displayTime = DateTime.secondsToString(maxtime - time);
-        if (maxtime === 0) {
-          displayTime = DateTime.secondsToString(time);
-        }
-        if (textEl !== null) {
-          textEl.innerHTML = "<div>" + displayTime + "</div>";
-        }
-      } else if (Config.timerStyle === "flash_mini") {
-        let displayTime = DateTime.secondsToString(maxtime - time);
-        if (maxtime === 0) {
-          displayTime = DateTime.secondsToString(time);
-        }
-        if (miniEl !== null) {
-          if ((maxtime - time) % 15 !== 0) {
-            miniEl.style.opacity = "0";
-          } else {
-            miniEl.style.opacity = "1";
-          }
-          miniEl.innerHTML = "<div>" + displayTime + "</div>";
-        }
-      } else if (Config.timerStyle === "flash_text") {
-        let displayTime = DateTime.secondsToString(maxtime - time);
-        if (maxtime === 0) {
-          displayTime = DateTime.secondsToString(time);
-        }
-        if (textEl !== null) {
-          textEl.innerHTML =
-            "<div>" +
-            `${(maxtime - time) % 15 !== 0 ? "" : displayTime}` +
-            "</div>";
-        }
-      } else if (Config.timerStyle === "mini") {
-        let displayTime = DateTime.secondsToString(maxtime - time);
-        if (maxtime === 0) {
-          displayTime = DateTime.secondsToString(time);
-        }
-        if (miniEl !== null) {
-          miniEl.innerHTML = displayTime;
-        }
-      }
-    } else if (
-      Config.mode === "words" ||
-      Config.mode === "custom" ||
-      Config.mode === "quote"
-    ) {
-      let outof = TestWords.words.length;
-      if (Config.mode === "words") {
-        outof = Config.words;
-      }
-      if (Config.mode === "custom") {
-        outof = CustomText.getLimitValue();
-      }
-      if (Config.mode === "quote") {
-        outof = TestWords.currentQuote?.textSplit.length ?? 1;
-      }
-      if (Config.timerStyle === "bar") {
-        const percent = Math.floor(
-          ((TestState.activeWordIndex + 1) / outof) * 100,
-        );
-
-        animate(barEl, {
-          width: percent + "vw",
-          duration: 250,
-        });
-      } else if (Config.timerStyle === "text") {
-        if (outof === 0) {
-          textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-        } else {
-          textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
-        }
-      } else if (Config.timerStyle === "flash_mini") {
-        if (outof === 0) {
-          miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-        } else {
-          miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
-        }
-      } else if (Config.timerStyle === "flash_text") {
-        if (outof === 0) {
-          textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-        } else {
-          textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
-        }
-      } else if (Config.timerStyle === "mini") {
-        if (outof === 0) {
-          miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-        } else {
-          miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
-        }
-      }
-    } else if (Config.mode === "zen") {
-      if (Config.timerStyle === "text") {
-        textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-      } else if (Config.timerStyle === "flash_mini") {
-        miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-      } else if (Config.timerStyle === "flash_text") {
-        textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-      } else {
-        miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-      }
-    }
-  });
-}
-
-export function updateStyle(): void {
-  if (!TestState.isActive()) return;
-  hide();
-  update();
-  if (Config.timerStyle === "off") return;
-  setTimeout(() => {
-    show();
-  }, 125);
-}
-
-ConfigEvent.subscribe(({ key }) => {
-  if (key === "timerStyle") updateStyle();
-});