From f5fe3ded357dc985b6b5d52387f072a947596465 Mon Sep 17 00:00:00 2001
From: Jack <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 22:29:17 +0100
Subject: [PATCH 1/7] refactor: convert observables to events (@miodec) (#7680)

Convert observables to events using a new hook which supports vanilla
and solid.
Replace existing hook with this new universal one.
Convert star imports to named imports.
Update all usage.
---
 frontend/__tests__/hooks/createEvent.spec.ts  | 95 +++++++++++++------
 frontend/__tests__/root/config.spec.ts        |  4 +-
 frontend/src/ts/auth.tsx                      |  8 +-
 frontend/src/ts/commandline/lists/themes.ts   |  4 +-
 .../components/layout/header/AccountXpBar.tsx | 23 +++--
 .../src/ts/components/layout/header/Logo.tsx  |  4 +-
 .../src/ts/components/layout/header/Nav.tsx   |  4 +-
 .../pages/profile/ProfileSearchPage.tsx       |  7 +-
 frontend/src/ts/config/lifecycle.ts           |  6 +-
 frontend/src/ts/config/setters.ts             |  6 +-
 frontend/src/ts/controllers/ad-controller.ts  |  4 +-
 .../ts/controllers/challenge-controller.ts    |  4 +-
 .../src/ts/controllers/chart-controller.ts    |  4 +-
 .../src/ts/controllers/quotes-controller.ts   |  4 +-
 .../src/ts/controllers/route-controller.ts    | 16 ++--
 .../src/ts/controllers/sound-controller.ts    |  4 +-
 frontend/src/ts/controllers/tag-controller.ts |  4 +-
 .../src/ts/controllers/theme-controller.ts    |  4 +-
 frontend/src/ts/controllers/url-handler.tsx   |  4 +-
 frontend/src/ts/db.ts                         |  6 +-
 .../src/ts/elements/account/result-filters.ts |  4 +-
 .../ts/elements/custom-background-filter.ts   |  4 +-
 frontend/src/ts/elements/keymap.ts            |  8 +-
 frontend/src/ts/elements/modes-notice.ts      |  6 +-
 frontend/src/ts/elements/psa.tsx              |  4 +-
 .../src/ts/elements/settings/theme-picker.ts  |  4 +-
 frontend/src/ts/events/auth.ts                | 11 +++
 frontend/src/ts/events/config.ts              | 18 ++++
 frontend/src/ts/events/connection.ts          | 12 +++
 frontend/src/ts/events/google-sign-up.ts      |  9 ++
 frontend/src/ts/events/keymap.ts              | 17 ++++
 frontend/src/ts/events/navigation.ts          | 17 ++++
 frontend/src/ts/events/timer.ts               |  9 ++
 frontend/src/ts/events/tts.ts                 |  3 +
 frontend/src/ts/firebase.ts                   |  4 +-
 frontend/src/ts/hooks/createEvent.ts          | 68 ++++++++-----
 frontend/src/ts/input/handlers/insert-text.ts |  4 +-
 frontend/src/ts/legacy-states/connection.ts   |  4 +-
 frontend/src/ts/modals/google-sign-up.ts      |  4 +-
 .../src/ts/modals/last-signed-out-result.ts   |  4 +-
 frontend/src/ts/observables/auth-event.ts     | 26 -----
 frontend/src/ts/observables/config-event.ts   | 34 -------
 .../src/ts/observables/connection-event.ts    | 27 ------
 .../ts/observables/google-sign-up-event.ts    | 26 -----
 frontend/src/ts/observables/keymap-event.ts   | 33 -------
 .../src/ts/observables/navigation-event.ts    | 28 ------
 frontend/src/ts/observables/timer-event.ts    | 18 ----
 frontend/src/ts/observables/tts-event.ts      | 18 ----
 frontend/src/ts/pages/account-settings.ts     |  4 +-
 frontend/src/ts/pages/account.ts              |  4 +-
 frontend/src/ts/pages/friends.ts              |  4 +-
 frontend/src/ts/pages/settings.ts             | 10 +-
 frontend/src/ts/states/core.ts                |  2 +-
 frontend/src/ts/states/header.ts              |  2 +-
 frontend/src/ts/test/caret.ts                 |  4 +-
 .../src/ts/test/funbox/funbox-functions.ts    |  8 +-
 frontend/src/ts/test/funbox/funbox.ts         |  4 +-
 frontend/src/ts/test/live-acc.ts              |  4 +-
 frontend/src/ts/test/live-burst.ts            |  4 +-
 frontend/src/ts/test/live-speed.ts            |  4 +-
 frontend/src/ts/test/monkey.ts                |  4 +-
 frontend/src/ts/test/pace-caret.ts            |  4 +-
 frontend/src/ts/test/practise-words.ts        |  4 +-
 frontend/src/ts/test/result.ts                |  4 +-
 frontend/src/ts/test/test-config.ts           |  8 +-
 frontend/src/ts/test/test-logic.ts            | 21 ++--
 frontend/src/ts/test/test-timer.ts            | 14 +--
 frontend/src/ts/test/test-ui.ts               | 12 +--
 frontend/src/ts/test/timer-progress.ts        |  4 +-
 frontend/src/ts/test/tts.ts                   |  8 +-
 frontend/src/ts/ui.ts                         |  4 +-
 71 files changed, 364 insertions(+), 416 deletions(-)
 create mode 100644 frontend/src/ts/events/auth.ts
 create mode 100644 frontend/src/ts/events/config.ts
 create mode 100644 frontend/src/ts/events/connection.ts
 create mode 100644 frontend/src/ts/events/google-sign-up.ts
 create mode 100644 frontend/src/ts/events/keymap.ts
 create mode 100644 frontend/src/ts/events/navigation.ts
 create mode 100644 frontend/src/ts/events/timer.ts
 create mode 100644 frontend/src/ts/events/tts.ts
 delete mode 100644 frontend/src/ts/observables/auth-event.ts
 delete mode 100644 frontend/src/ts/observables/config-event.ts
 delete mode 100644 frontend/src/ts/observables/connection-event.ts
 delete mode 100644 frontend/src/ts/observables/google-sign-up-event.ts
 delete mode 100644 frontend/src/ts/observables/keymap-event.ts
 delete mode 100644 frontend/src/ts/observables/navigation-event.ts
 delete mode 100644 frontend/src/ts/observables/timer-event.ts
 delete mode 100644 frontend/src/ts/observables/tts-event.ts

diff --git a/frontend/__tests__/hooks/createEvent.spec.ts b/frontend/__tests__/hooks/createEvent.spec.ts
index af5a28518a2f..d4455d0f128f 100644
--- a/frontend/__tests__/hooks/createEvent.spec.ts
+++ b/frontend/__tests__/hooks/createEvent.spec.ts
@@ -1,46 +1,81 @@
 import { createRoot } from "solid-js";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { createEvent } from "../../src/ts/hooks/createEvent";
 
 describe("createEvent", () => {
-  it("initial value is 0", () => {
-    createRoot((dispose) => {
-      const [event] = createEvent();
-      expect(event()).toBe(0);
-      dispose();
-    });
+  it("dispatch notifies subscribers", () => {
+    const event = createEvent<string>();
+    const fn = vi.fn();
+    event.subscribe(fn);
+    event.dispatch("hello");
+    expect(fn).toHaveBeenCalledWith("hello");
   });
 
-  it("dispatch increments the value by 1", () => {
-    createRoot((dispose) => {
-      const [event, dispatch] = createEvent();
-      dispatch();
-      expect(event()).toBe(1);
-      dispose();
-    });
+  it("dispatch notifies multiple subscribers", () => {
+    const event = createEvent<number>();
+    const fn1 = vi.fn();
+    const fn2 = vi.fn();
+    event.subscribe(fn1);
+    event.subscribe(fn2);
+    event.dispatch(42);
+    expect(fn1).toHaveBeenCalledWith(42);
+    expect(fn2).toHaveBeenCalledWith(42);
   });
 
-  it("each dispatch increments independently", () => {
-    createRoot((dispose) => {
-      const [event, dispatch] = createEvent();
-      dispatch();
-      dispatch();
-      dispatch();
-      expect(event()).toBe(3);
-      dispose();
-    });
+  it("dispatch with no type arg requires no arguments", () => {
+    const event = createEvent();
+    const fn = vi.fn();
+    event.subscribe(fn);
+    event.dispatch();
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("subscribe returns an unsubscribe function", () => {
+    const event = createEvent<string>();
+    const fn = vi.fn();
+    const unsub = event.subscribe(fn);
+    event.dispatch("a");
+    unsub();
+    event.dispatch("b");
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith("a");
   });
 
   it("two independent events do not share state", () => {
+    const eventA = createEvent<string>();
+    const eventB = createEvent<string>();
+    const fnA = vi.fn();
+    const fnB = vi.fn();
+    eventA.subscribe(fnA);
+    eventB.subscribe(fnB);
+    eventA.dispatch("a");
+    expect(fnA).toHaveBeenCalledWith("a");
+    expect(fnB).not.toHaveBeenCalled();
+  });
+
+  it("useListener auto-unsubscribes on dispose", () => {
+    const event = createEvent<string>();
+    const fn = vi.fn();
     createRoot((dispose) => {
-      const [eventA, dispatchA] = createEvent();
-      const [eventB, dispatchB] = createEvent();
-      dispatchA();
-      dispatchA();
-      dispatchB();
-      expect(eventA()).toBe(2);
-      expect(eventB()).toBe(1);
+      event.useListener(fn);
+      event.dispatch("inside");
       dispose();
     });
+    event.dispatch("outside");
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith("inside");
+  });
+
+  it("subscriber errors do not prevent other subscribers from running", () => {
+    const event = createEvent<string>();
+    const fn1 = vi.fn(() => {
+      throw new Error("oops");
+    });
+    const fn2 = vi.fn();
+    event.subscribe(fn1);
+    event.subscribe(fn2);
+    event.dispatch("test");
+    expect(fn1).toHaveBeenCalled();
+    expect(fn2).toHaveBeenCalled();
   });
 });
diff --git a/frontend/__tests__/root/config.spec.ts b/frontend/__tests__/root/config.spec.ts
index 0f89fb6aa4d6..d8c881e5588f 100644
--- a/frontend/__tests__/root/config.spec.ts
+++ b/frontend/__tests__/root/config.spec.ts
@@ -12,7 +12,7 @@ import {
 } from "@monkeytype/schemas/configs";
 import * as FunboxValidation from "../../src/ts/config/funbox-validation";
 import * as ConfigValidation from "../../src/ts/config/validation";
-import * as ConfigEvent from "../../src/ts/observables/config-event";
+import { configEvent } from "../../src/ts/events/config";
 import * as ApeConfig from "../../src/ts/ape/config";
 import * as Notifications from "../../src/ts/states/notifications";
 const { replaceConfig, getConfig } = __testing;
@@ -33,7 +33,7 @@ describe("Config", () => {
       ConfigValidation,
       "isConfigValueValid",
     );
-    const dispatchConfigEventMock = vi.spyOn(ConfigEvent, "dispatch");
+    const dispatchConfigEventMock = vi.spyOn(configEvent, "dispatch");
     const dbSaveConfigMock = vi.spyOn(ApeConfig, "saveConfig");
     const notificationAddMock = vi.spyOn(
       Notifications,
diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index 5fc6c39b58d5..39d411e64fd3 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -12,6 +12,7 @@ import Ape from "./ape";
 import { showRegisterCaptchaModal } from "./components/modals/RegisterCaptchaModal";
 import { updateFromServer as updateConfigFromServer } from "./config/remote";
 import * as DB from "./db";
+import { authEvent } from "./events/auth";
 import {
   isAuthAvailable,
   getAuthenticatedUser,
@@ -23,7 +24,6 @@ import {
   resetIgnoreAuthCallback,
 } from "./firebase";
 import { showPopup } from "./modals/simple-modals-base";
-import * as AuthEvent from "./observables/auth-event";
 import * as Sentry from "./sentry";
 import { addBanner } from "./states/banners";
 import { showLoaderBar, hideLoaderBar } from "./states/loader-bar";
@@ -131,7 +131,7 @@ export async function loadUser(_user: UserType): Promise<void> {
     signOut();
     return;
   }
-  AuthEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: true } });
+  authEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: true } });
 }
 
 export async function onAuthStateChanged(
@@ -155,7 +155,7 @@ export async function onAuthStateChanged(
     void Sentry.clearUser();
   }
 
-  AuthEvent.dispatch({
+  authEvent.dispatch({
     type: "authStateChanged",
     data: { isUserSignedIn: user !== null, loadPromise: userPromise },
   });
@@ -231,7 +231,7 @@ async function addAuthProvider(
     await linkWithPopup(user, provider);
     hideLoaderBar();
     showSuccessNotification(`${providerName} authentication added`);
-    AuthEvent.dispatch({ type: "authConfigUpdated" });
+    authEvent.dispatch({ type: "authConfigUpdated" });
   } catch (error) {
     hideLoaderBar();
     showErrorNotification(`Failed to add ${providerName} authentication`, {
diff --git a/frontend/src/ts/commandline/lists/themes.ts b/frontend/src/ts/commandline/lists/themes.ts
index 0b4874f72bdb..394ca2c29821 100644
--- a/frontend/src/ts/commandline/lists/themes.ts
+++ b/frontend/src/ts/commandline/lists/themes.ts
@@ -5,7 +5,7 @@ import * as ThemeController from "../../controllers/theme-controller";
 import { Command, CommandsSubgroup } from "../types";
 import { ThemesList, ThemeWithName } from "../../constants/themes";
 import { not } from "@monkeytype/util/predicates";
-import * as ConfigEvent from "../../observables/config-event";
+import { configEvent } from "../../events/config";
 import * as getErrorMessage from "../../utils/error";
 
 const isFavorite = (theme: ThemeWithName): boolean =>
@@ -77,7 +77,7 @@ export function update(themes: ThemeWithName[]): void {
 }
 
 // subscribe to theme-related config events to update the theme command list
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "favThemes") {
     // update themes list when favorites change
     try {
diff --git a/frontend/src/ts/components/layout/header/AccountXpBar.tsx b/frontend/src/ts/components/layout/header/AccountXpBar.tsx
index 0e95cd5e84e7..06988455bb60 100644
--- a/frontend/src/ts/components/layout/header/AccountXpBar.tsx
+++ b/frontend/src/ts/components/layout/header/AccountXpBar.tsx
@@ -1,7 +1,6 @@
 import { XpBreakdown } from "@monkeytype/schemas/results";
 import { isSafeNumber } from "@monkeytype/util/numbers";
 import {
-  createMemo,
   createSignal,
   For,
   JSXElement,
@@ -14,7 +13,7 @@ import { createSignalWithSetters } from "../../../hooks/createSignalWithSetters"
 import { createEffectOn } from "../../../hooks/effects";
 import { getFocus } from "../../../states/core";
 import {
-  getSkipBreakdownEvent,
+  skipBreakdownEvent,
   getXpBarData,
   setAnimatedLevel,
 } from "../../../states/header";
@@ -38,11 +37,11 @@ export function AccountXpBar(): JSXElement {
   const [getBarAnimationDuration, setBarAnimationDuration] = createSignal(0);
   const [getBarAnimationEase, setBarAnimationEase] = createSignal("out(5)");
 
-  const [getAnimationEvent, fireAnimationEvent] = createEvent();
+  const animationEvent = createEvent();
   const [getTotal, { setTotal }] = createSignalWithSetters(0)({
     setTotal: (set, value: number) => {
       set(value);
-      fireAnimationEvent();
+      animationEvent.dispatch();
     },
   });
 
@@ -54,23 +53,29 @@ export function AccountXpBar(): JSXElement {
   let skipped = false;
   let runId = 0;
 
-  const flashAnimation = createMemo(() => {
-    getAnimationEvent(); // trigger on every total update, even if value unchanged
+  const [flashAnimation, setFlashAnimation] = createSignal({
+    scale: [1, 1],
+    rotate: [0, 0],
+    duration: 2000,
+    ease: "out(5)",
+  });
+
+  animationEvent.useListener(() => {
     const rand = (Math.random() * 2 - 1) / 4;
     const rand2 = (Math.random() + 1) / 2;
-    return {
+    setFlashAnimation({
       scale: [1 + 0.5 * rand2, 1],
       rotate: [10 * rand, 0],
       duration: 2000,
       ease: "out(5)",
-    };
+    });
   });
 
   const addItem = (label: string, amount: number | string): void => {
     setBreakdownItems((items) => [...items, { label, amount }]);
   };
 
-  createEffectOn(getSkipBreakdownEvent, async () => {
+  skipBreakdownEvent.useListener(async () => {
     if (skipped || !canSkip) return;
 
     const myId = runId; // capture before first await
diff --git a/frontend/src/ts/components/layout/header/Logo.tsx b/frontend/src/ts/components/layout/header/Logo.tsx
index bc838e360b53..41127879c8c2 100644
--- a/frontend/src/ts/components/layout/header/Logo.tsx
+++ b/frontend/src/ts/components/layout/header/Logo.tsx
@@ -1,7 +1,7 @@
 import { JSXElement } from "solid-js";
 
 import {
-  dispatchRestartTest,
+  restartTestEvent,
   getActivePage,
   getFocus,
 } from "../../../states/core";
@@ -21,7 +21,7 @@ export function Logo(): JSXElement {
       }}
       data-ui-element="logo"
       onClick={() => {
-        if (getActivePage() === "test") dispatchRestartTest();
+        if (getActivePage() === "test") restartTestEvent.dispatch();
       }}
     >
       <svg
diff --git a/frontend/src/ts/components/layout/header/Nav.tsx b/frontend/src/ts/components/layout/header/Nav.tsx
index 69c0426e17fb..d2214a28a1ae 100644
--- a/frontend/src/ts/components/layout/header/Nav.tsx
+++ b/frontend/src/ts/components/layout/header/Nav.tsx
@@ -4,7 +4,7 @@ import { createMemo, JSXElement, Show } from "solid-js";
 import { createEffectOn } from "../../../hooks/effects";
 import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
 import {
-  dispatchRestartTest,
+  restartTestEvent,
   getActivePage,
   getFocus,
 } from "../../../states/core";
@@ -80,7 +80,7 @@ export function Nav(): JSXElement {
           "data-nav-item": "test",
         }}
         onClick={() => {
-          if (getActivePage() === "test") dispatchRestartTest();
+          if (getActivePage() === "test") restartTestEvent.dispatch();
         }}
       />
       <Button
diff --git a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
index 61c409cf7e7e..6f2076910f1a 100644
--- a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
+++ b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
@@ -2,8 +2,8 @@ import { UserNameSchema } from "@monkeytype/schemas/users";
 import { createForm } from "@tanstack/solid-form";
 import { createEffect, createSignal, JSXElement, Show } from "solid-js";
 
+import { navigationEvent } from "../../../events/navigation";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
-import * as NavigationEvent from "../../../observables/navigation-event";
 import { queryClient } from "../../../queries";
 import { getUserProfile } from "../../../queries/profile";
 import { getActivePage } from "../../../states/core";
@@ -27,7 +27,10 @@ export function ProfileSearchPage(): JSXElement {
     onSubmit: async ({ value }) => {
       setEditable(false);
       try {
-        NavigationEvent.dispatch(`/profile/${value.username}`, {});
+        navigationEvent.dispatch({
+          url: `/profile/${value.username}`,
+          options: {},
+        });
       } finally {
         setEditable(true);
       }
diff --git a/frontend/src/ts/config/lifecycle.ts b/frontend/src/ts/config/lifecycle.ts
index 636c38481bb6..9402afa95698 100644
--- a/frontend/src/ts/config/lifecycle.ts
+++ b/frontend/src/ts/config/lifecycle.ts
@@ -11,7 +11,7 @@ import {
 } from "./persistence";
 import { Config, setConfigStore } from "./store";
 import { getDefaultConfig } from "../constants/default-config";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { migrateConfig } from "./utils";
 import { promiseWithResolvers, typedKeys } from "../utils/misc";
 import { setConfig } from "./setters";
@@ -76,7 +76,7 @@ export async function applyConfig(
   //migrate old values if needed, remove additional keys and merge with default config
   const fullConfig: ConfigSchemas.Config = migrateConfig(partialConfig);
 
-  ConfigEvent.dispatch({ key: "fullConfigChange" });
+  configEvent.dispatch({ key: "fullConfigChange" });
 
   const defaultConfig = getDefaultConfig();
   for (const key of typedKeys(fullConfig)) {
@@ -107,7 +107,7 @@ export async function applyConfig(
     saveToLocalStorage(key);
   }
 
-  ConfigEvent.dispatch({ key: "fullConfigChangeFinished" });
+  configEvent.dispatch({ key: "fullConfigChangeFinished" });
   setConfigStore(reconcile(Config));
 }
 
diff --git a/frontend/src/ts/config/setters.ts b/frontend/src/ts/config/setters.ts
index e409c043eabb..385b948fc428 100644
--- a/frontend/src/ts/config/setters.ts
+++ b/frontend/src/ts/config/setters.ts
@@ -3,7 +3,7 @@ import { ZodType as ZodSchema } from "zod";
 import { saveToLocalStorage } from "../config/persistence";
 import { configMetadata, ConfigMetadataObject } from "./metadata";
 import { isConfigValueValid } from "./validation";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { showNoticeNotification } from "../states/notifications";
 import {
   canSetConfigWithCurrentFunboxes,
@@ -124,7 +124,7 @@ export function setConfig<T extends keyof ConfigSchemas.Config>(
   if (!options?.nosave) saveToLocalStorage(key, options?.nosave);
 
   // @ts-expect-error i can't figure this out
-  ConfigEvent.dispatch({
+  configEvent.dispatch({
     key: key,
     newValue: value,
     nosave: options?.nosave ?? false,
@@ -195,7 +195,7 @@ export function toggleFunbox(funbox: FunboxName, nosave?: boolean): boolean {
 
   Config.funbox = newConfig;
   saveToLocalStorage("funbox", nosave);
-  ConfigEvent.dispatch({
+  configEvent.dispatch({
     key: "funbox",
     newValue: Config.funbox,
     nosave,
diff --git a/frontend/src/ts/controllers/ad-controller.ts b/frontend/src/ts/controllers/ad-controller.ts
index 85bd1efe6255..f8f471827be8 100644
--- a/frontend/src/ts/controllers/ad-controller.ts
+++ b/frontend/src/ts/controllers/ad-controller.ts
@@ -1,6 +1,6 @@
 /* oxlint-disable no-unsafe-member-access */
 import { debounce } from "throttle-debounce";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { Config } from "../config/store";
 import * as TestState from "../test/test-state";
 import * as EG from "./eg-ad-controller";
@@ -286,7 +286,7 @@ window.addEventListener("resize", () => {
   debouncedBreakpoint2Update();
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "ads") {
     if (newValue === "off") {
       removeAll();
diff --git a/frontend/src/ts/controllers/challenge-controller.ts b/frontend/src/ts/controllers/challenge-controller.ts
index acb7864f0c29..2e7c145ea129 100644
--- a/frontend/src/ts/controllers/challenge-controller.ts
+++ b/frontend/src/ts/controllers/challenge-controller.ts
@@ -10,7 +10,7 @@ import * as Funbox from "../test/funbox/funbox";
 
 import { Config } from "../config/store";
 import { setConfig } from "../config/setters";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import * as TestState from "../test/test-state";
 
 import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
@@ -389,7 +389,7 @@ export async function setup(challengeName: string): Promise<boolean> {
   }
 }
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (
     [
       "difficulty",
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index afc75ff6c85a..6fc1a33d6807 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -60,7 +60,7 @@ Chart.defaults.elements.line.fill = "origin";
 import "chartjs-adapter-date-fns";
 import { format } from "date-fns/format";
 import { Config } from "../config/store";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import * as TestInput from "../test/test-input";
 import * as DateTime from "../utils/date-and-time";
 import * as Arrays from "../utils/arrays";
@@ -1354,7 +1354,7 @@ createDebouncedEffectOn(125, getTheme, (theme) => {
   void miniResult.updateColors(theme);
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "accountChart" && getActivePage() === "account") {
     updateAccountChartButtons();
     accountHistory.update();
diff --git a/frontend/src/ts/controllers/quotes-controller.ts b/frontend/src/ts/controllers/quotes-controller.ts
index a15d3002251c..53eac99b1095 100644
--- a/frontend/src/ts/controllers/quotes-controller.ts
+++ b/frontend/src/ts/controllers/quotes-controller.ts
@@ -1,7 +1,7 @@
 import { removeLanguageSize } from "../utils/strings";
 import { randomElementFromArray, shuffle } from "../utils/arrays";
 import { cachedFetchJson } from "../utils/json-data";
-import { subscribe } from "../observables/config-event";
+import { configEvent } from "../events/config";
 import * as DB from "../db";
 import Ape from "../ape";
 import { tryCatch } from "@monkeytype/util/trycatch";
@@ -251,7 +251,7 @@ class QuotesController {
 
 const quoteController = new QuotesController();
 
-subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "quoteLength") {
     quoteController.updateQuoteQueue(newValue as number[]);
   }
diff --git a/frontend/src/ts/controllers/route-controller.ts b/frontend/src/ts/controllers/route-controller.ts
index bb41cf1407ef..58c5d6a5c3f8 100644
--- a/frontend/src/ts/controllers/route-controller.ts
+++ b/frontend/src/ts/controllers/route-controller.ts
@@ -5,8 +5,8 @@ import { isAuthAvailable, isAuthenticated } from "../firebase";
 import { isFunboxActive } from "../test/funbox/list";
 import * as TestState from "../test/test-state";
 import { showNoticeNotification } from "../states/notifications";
-import * as NavigationEvent from "../observables/navigation-event";
-import * as AuthEvent from "../observables/auth-event";
+import { navigationEvent, type NavigateOptions } from "../events/navigation";
+import { authEvent } from "../events/auth";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
@@ -34,7 +34,7 @@ type Route = {
   path: string;
   load: (
     params: Record<string, string>,
-    navigateOptions: NavigationEvent.NavigateOptions,
+    navigateOptions: NavigateOptions,
   ) => Promise<void>;
 };
 
@@ -159,7 +159,7 @@ export async function navigate(
   url = window.location.pathname +
     window.location.search +
     window.location.hash,
-  options = {} as NavigationEvent.NavigateOptions,
+  options = {} as NavigateOptions,
 ): Promise<void> {
   if (
     !options.force &&
@@ -207,9 +207,7 @@ export async function navigate(
   await router(options);
 }
 
-async function router(
-  options = {} as NavigationEvent.NavigateOptions,
-): Promise<void> {
+async function router(options = {} as NavigateOptions): Promise<void> {
   const matches = routes.map((r) => {
     return {
       route: r,
@@ -249,11 +247,11 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 
-NavigationEvent.subscribe((url, options) => {
+navigationEvent.subscribe(({ url, options }) => {
   void navigate(url, options);
 });
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
     let keyframes = [
       {
diff --git a/frontend/src/ts/controllers/sound-controller.ts b/frontend/src/ts/controllers/sound-controller.ts
index b3103789a720..24e01e6b397a 100644
--- a/frontend/src/ts/controllers/sound-controller.ts
+++ b/frontend/src/ts/controllers/sound-controller.ts
@@ -1,5 +1,5 @@
 import { Config } from "../config/store";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { randomElementFromArray } from "../utils/arrays";
 import { randomIntFromRange } from "@monkeytype/util/numbers";
 import { leftState, rightState } from "../test/shift-tracker";
@@ -833,7 +833,7 @@ function setVolume(val: number): void {
   }
 }
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "playSoundOnClick" && newValue !== "off") void init();
   if (key === "soundVolume") {
     setVolume(newValue);
diff --git a/frontend/src/ts/controllers/tag-controller.ts b/frontend/src/ts/controllers/tag-controller.ts
index abc6fcdcf7f4..c1a414c9eba0 100644
--- a/frontend/src/ts/controllers/tag-controller.ts
+++ b/frontend/src/ts/controllers/tag-controller.ts
@@ -3,7 +3,7 @@ import * as DB from "../db";
 import * as ModesNotice from "../elements/modes-notice";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import { IdSchema } from "@monkeytype/schemas/util";
-import * as AuthEvent from "../observables/auth-event";
+import { authEvent } from "../events/auth";
 
 const activeTagsLS = new LocalStorageWithSchema({
   key: "activeTags",
@@ -77,7 +77,7 @@ export function loadActiveFromLocalStorage(): void {
   saveActiveToLocalStorage();
 }
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "snapshotUpdated" && event.data.isInitial) {
     loadActiveFromLocalStorage();
   }
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index bca26542ad9d..7cf1d46fde69 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -4,7 +4,7 @@ import { isColorDark, isColorLight } from "../utils/colors";
 import { Config } from "../config/store";
 import { setConfig } from "../config/setters";
 import * as BackgroundFilter from "../elements/custom-background-filter";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import * as DB from "../db";
 import { showNoticeNotification } from "../states/notifications";
 import { debounce } from "throttle-debounce";
@@ -333,7 +333,7 @@ window
 
 let ignoreConfigEvent = false;
 
-ConfigEvent.subscribe(async ({ key, newValue, nosave }) => {
+configEvent.subscribe(async ({ key, newValue, nosave }) => {
   if (key === "fullConfigChange") {
     ignoreConfigEvent = true;
   }
diff --git a/frontend/src/ts/controllers/url-handler.tsx b/frontend/src/ts/controllers/url-handler.tsx
index acd5a586828b..27b62003a14a 100644
--- a/frontend/src/ts/controllers/url-handler.tsx
+++ b/frontend/src/ts/controllers/url-handler.tsx
@@ -24,7 +24,7 @@ import Ape from "../ape";
 import { setConfig } from "../config/setters";
 import { Config } from "../config/store";
 import * as DB from "../db";
-import * as AuthEvent from "../observables/auth-event";
+import { authEvent } from "../events/auth";
 import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
 import {
   showNoticeNotification,
@@ -331,7 +331,7 @@ export function loadChallengeFromUrl(getOverride?: string): void {
     });
 }
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
     const search = window.location.search;
     const hash = window.location.hash;
diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index 3a1515cd62f1..bfe89e9330b8 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -26,10 +26,9 @@ import {
   SnapshotResult,
   SnapshotUserTag,
 } from "./constants/default-snapshot";
-import { FunboxMetadata } from "../../../packages/funbox/src/types";
 import { getFirstDayOfTheWeek } from "./utils/date-and-time";
 import { Language } from "@monkeytype/schemas/languages";
-import * as AuthEvent from "./observables/auth-event";
+import { authEvent } from "./events/auth";
 import {
   configurationPromise,
   get as getServerConfiguration,
@@ -41,6 +40,7 @@ import {
 } from "./states/snapshot";
 import { XpBreakdown } from "@monkeytype/schemas/results";
 import { setXpBarData } from "./states/header";
+import { FunboxMetadata } from "@monkeytype/funbox";
 
 let dbSnapshot: Snapshot | undefined;
 const firstDayOfTheWeek = getFirstDayOfTheWeek();
@@ -84,7 +84,7 @@ export function setSnapshot(
   }
 
   if (options?.dispatchEvent !== false) {
-    AuthEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: false } });
+    authEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: false } });
   }
 
   setSolidSnapshot(newSnapshot);
diff --git a/frontend/src/ts/elements/account/result-filters.ts b/frontend/src/ts/elements/account/result-filters.ts
index 35410cc996b7..cc1a78ea7065 100644
--- a/frontend/src/ts/elements/account/result-filters.ts
+++ b/frontend/src/ts/elements/account/result-filters.ts
@@ -22,7 +22,7 @@ import defaultResultFilters from "../../constants/default-result-filters";
 import { getAllFunboxes } from "@monkeytype/funbox";
 import { Snapshot } from "../../constants/default-snapshot";
 import { LanguageList } from "../../constants/languages";
-import * as AuthEvent from "../../observables/auth-event";
+import { authEvent } from "../../events/auth";
 import { sanitize } from "../../utils/sanitize";
 import { qs, qsa } from "../../utils/dom";
 
@@ -962,7 +962,7 @@ function verifyResultFiltersStructure(filterIn: ResultFilters): ResultFilters {
   return filter;
 }
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "snapshotUpdated" && event.data.isInitial) {
     loadTags();
     void load();
diff --git a/frontend/src/ts/elements/custom-background-filter.ts b/frontend/src/ts/elements/custom-background-filter.ts
index 21f5e9973d89..72663886bee9 100644
--- a/frontend/src/ts/elements/custom-background-filter.ts
+++ b/frontend/src/ts/elements/custom-background-filter.ts
@@ -1,6 +1,6 @@
 import { CustomBackgroundFilter } from "@monkeytype/schemas/configs";
 import { setConfig } from "../config/setters";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { debounce } from "throttle-debounce";
 import { qs, qsr } from "../utils/dom";
 
@@ -133,7 +133,7 @@ const debouncedSave = debounce(2000, async () => {
   setConfig("customBackgroundFilter", arr);
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "customBackgroundFilter") {
     loadConfig(newValue);
     apply();
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 114acdb8f8e3..cdb305d95090 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
-import * as ConfigEvent from "../observables/config-event";
-import * as KeymapEvent from "../observables/keymap-event";
+import { configEvent } from "../events/config";
+import { keymapEvent } from "../events/keymap";
 import * as Misc from "../utils/misc";
 import * as JSONData from "../utils/json-data";
 import * as Hangul from "hangul-js";
@@ -601,7 +601,7 @@ async function updateLegends(): Promise<void> {
 }
 let ignoreConfigEvent = false;
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   const handleMode = (): void => {
     keymap.qsa(".activeKey").removeClass("activeKey");
     keymap.qsa(".keymapKey").setAttribute("style", "");
@@ -672,7 +672,7 @@ ConfigEvent.subscribe(({ key }) => {
   }
 });
 
-KeymapEvent.subscribe((mode, key, correct) => {
+keymapEvent.subscribe(({ mode, key, correct }) => {
   if (mode === "highlight") {
     highlightKey(key);
   }
diff --git a/frontend/src/ts/elements/modes-notice.ts b/frontend/src/ts/elements/modes-notice.ts
index a1ef87f20660..6f670371044c 100644
--- a/frontend/src/ts/elements/modes-notice.ts
+++ b/frontend/src/ts/elements/modes-notice.ts
@@ -4,7 +4,7 @@ import * as DB from "../db";
 import * as Last10Average from "../elements/last-10-average";
 import { Config } from "../config/store";
 import * as TestWords from "../test/test-words";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent, type ConfigEventKey } from "../events/config";
 import { isAuthenticated } from "../firebase";
 import * as CustomTextState from "../legacy-states/custom-text-name";
 import { getLanguageDisplayString } from "../utils/strings";
@@ -13,8 +13,8 @@ import { getActiveFunboxes, getActiveFunboxNames } from "../test/funbox/list";
 import { escapeHTML, getMode2 } from "../utils/misc";
 import { qsr } from "../utils/dom";
 
-ConfigEvent.subscribe(({ key }) => {
-  const configKeys: ConfigEvent.ConfigEventKey[] = [
+configEvent.subscribe(({ key }) => {
+  const configKeys: ConfigEventKey[] = [
     "difficulty",
     "blindMode",
     "stopOnError",
diff --git a/frontend/src/ts/elements/psa.tsx b/frontend/src/ts/elements/psa.tsx
index 32d053bc0924..53010aeb1138 100644
--- a/frontend/src/ts/elements/psa.tsx
+++ b/frontend/src/ts/elements/psa.tsx
@@ -6,7 +6,7 @@ import { format } from "date-fns/format";
 import { z } from "zod";
 
 import Ape from "../ape";
-import * as AuthEvent from "../observables/auth-event";
+import { authEvent } from "../events/auth";
 import { addBanner } from "../states/banners";
 import { addPsa } from "../states/psas";
 import { secondsToString } from "../utils/date-and-time";
@@ -204,7 +204,7 @@ export async function show(): Promise<void> {
   });
 }
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
     void show();
   }
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 5e88f52b0972..5e8856daea3c 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -10,7 +10,7 @@ import {
 } from "../../states/notifications";
 import { showLoaderBar, hideLoaderBar } from "../../states/loader-bar";
 import * as DB from "../../db";
-import * as ConfigEvent from "../../observables/config-event";
+import { configEvent } from "../../events/config";
 import { isAuthenticated } from "../../firebase";
 import { getActivePage } from "../../states/core";
 import { ThemeName } from "@monkeytype/schemas/configs";
@@ -415,7 +415,7 @@ qs(".pageSettings #saveCustomThemeButton")?.on("click", async () => {
   void fillCustomButtons();
 });
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "theme" && getActivePage() === "settings") {
     updateActiveButton();
   }
diff --git a/frontend/src/ts/events/auth.ts b/frontend/src/ts/events/auth.ts
new file mode 100644
index 000000000000..8747d10862c1
--- /dev/null
+++ b/frontend/src/ts/events/auth.ts
@@ -0,0 +1,11 @@
+import { createEvent } from "../hooks/createEvent";
+
+export type AuthEvent =
+  | {
+      type: "authStateChanged";
+      data: { isUserSignedIn: boolean; loadPromise: Promise<void> };
+    }
+  | { type: "snapshotUpdated"; data: { isInitial: boolean } }
+  | { type: "authConfigUpdated"; data?: undefined };
+
+export const authEvent = createEvent<AuthEvent>();
diff --git a/frontend/src/ts/events/config.ts b/frontend/src/ts/events/config.ts
new file mode 100644
index 000000000000..3f53dab1edb4
--- /dev/null
+++ b/frontend/src/ts/events/config.ts
@@ -0,0 +1,18 @@
+import { Config } from "@monkeytype/schemas/configs";
+import { createEvent } from "../hooks/createEvent";
+
+export type ConfigEventKey =
+  | keyof Config
+  | "fullConfigChange"
+  | "fullConfigChangeFinished";
+
+export type ConfigEventData = {
+  nosave?: boolean;
+  fullConfig?: Config;
+} & {
+  [K in ConfigEventKey]?: K extends keyof Config
+    ? { key: K; newValue: Config[K]; previousValue: Config[K] }
+    : { key: K; newValue?: undefined; previousValue?: undefined };
+}[ConfigEventKey];
+
+export const configEvent = createEvent<ConfigEventData>();
diff --git a/frontend/src/ts/events/connection.ts b/frontend/src/ts/events/connection.ts
new file mode 100644
index 000000000000..f47e30538d35
--- /dev/null
+++ b/frontend/src/ts/events/connection.ts
@@ -0,0 +1,12 @@
+import { createEvent } from "../hooks/createEvent";
+
+export const connectionEvent = createEvent<boolean>();
+
+window.addEventListener("load", () => {
+  window.addEventListener("online", () => {
+    connectionEvent.dispatch(true);
+  });
+  window.addEventListener("offline", () => {
+    connectionEvent.dispatch(false);
+  });
+});
diff --git a/frontend/src/ts/events/google-sign-up.ts b/frontend/src/ts/events/google-sign-up.ts
new file mode 100644
index 000000000000..afa97168ee1b
--- /dev/null
+++ b/frontend/src/ts/events/google-sign-up.ts
@@ -0,0 +1,9 @@
+import { UserCredential } from "firebase/auth";
+import { createEvent } from "../hooks/createEvent";
+
+export type GoogleSignUpEventData = {
+  signedInUser: UserCredential;
+  isNewUser: boolean;
+};
+
+export const googleSignUpEvent = createEvent<GoogleSignUpEventData>();
diff --git a/frontend/src/ts/events/keymap.ts b/frontend/src/ts/events/keymap.ts
new file mode 100644
index 000000000000..a69d228f5848
--- /dev/null
+++ b/frontend/src/ts/events/keymap.ts
@@ -0,0 +1,17 @@
+import { createEvent } from "../hooks/createEvent";
+
+export type KeymapEventData = {
+  mode: "highlight" | "flash";
+  key: string;
+  correct?: boolean;
+};
+
+export const keymapEvent = createEvent<KeymapEventData>();
+
+export function flash(key: string, correct?: boolean): void {
+  keymapEvent.dispatch({ mode: "flash", key, correct });
+}
+
+export function highlight(key: string): void {
+  keymapEvent.dispatch({ mode: "highlight", key });
+}
diff --git a/frontend/src/ts/events/navigation.ts b/frontend/src/ts/events/navigation.ts
new file mode 100644
index 000000000000..73e62f05afba
--- /dev/null
+++ b/frontend/src/ts/events/navigation.ts
@@ -0,0 +1,17 @@
+import { createEvent } from "../hooks/createEvent";
+import { LoadingOptions } from "../pages/page";
+
+export type NavigateOptions = {
+  force?: boolean;
+  empty?: boolean;
+  //this will be used in tribe
+  data?: unknown;
+  loadingOptions?: LoadingOptions;
+};
+
+export type NavigationEventData = {
+  url: string;
+  options: NavigateOptions;
+};
+
+export const navigationEvent = createEvent<NavigationEventData>();
diff --git a/frontend/src/ts/events/timer.ts b/frontend/src/ts/events/timer.ts
new file mode 100644
index 000000000000..e61cc0a719a5
--- /dev/null
+++ b/frontend/src/ts/events/timer.ts
@@ -0,0 +1,9 @@
+import { createEvent } from "../hooks/createEvent";
+
+export type TimerEventData = {
+  key: string;
+  value?: string;
+  value2?: string;
+};
+
+export const timerEvent = createEvent<TimerEventData>();
diff --git a/frontend/src/ts/events/tts.ts b/frontend/src/ts/events/tts.ts
new file mode 100644
index 000000000000..bd9d663358f1
--- /dev/null
+++ b/frontend/src/ts/events/tts.ts
@@ -0,0 +1,3 @@
+import { createEvent } from "../hooks/createEvent";
+
+export const ttsEvent = createEvent<string>();
diff --git a/frontend/src/ts/firebase.ts b/frontend/src/ts/firebase.ts
index 4ac22ba8f32f..3a45a7244ec2 100644
--- a/frontend/src/ts/firebase.ts
+++ b/frontend/src/ts/firebase.ts
@@ -31,7 +31,7 @@ import {
   getAnalytics as firebaseGetAnalytics,
 } from "firebase/analytics";
 import { tryCatch } from "@monkeytype/util/trycatch";
-import { dispatch as dispatchSignUpEvent } from "./observables/google-sign-up-event";
+import { googleSignUpEvent } from "./events/google-sign-up";
 import { addBanner } from "./states/banners";
 import { setUserId } from "./states/core";
 
@@ -156,7 +156,7 @@ export async function signInWithPopup(
   }
   const additionalUserInfo = getAdditionalUserInfo(signedInUser);
   if (additionalUserInfo?.isNewUser) {
-    dispatchSignUpEvent(signedInUser, true);
+    googleSignUpEvent.dispatch({ signedInUser, isNewUser: true });
   } else {
     ignoreAuthCallback = false;
     await readyCallback?.(true, signedInUser.user);
diff --git a/frontend/src/ts/hooks/createEvent.ts b/frontend/src/ts/hooks/createEvent.ts
index 4247ede6913a..de30b7b2e520 100644
--- a/frontend/src/ts/hooks/createEvent.ts
+++ b/frontend/src/ts/hooks/createEvent.ts
@@ -1,34 +1,56 @@
-import { Accessor, createSignal } from "solid-js";
+import { onCleanup } from "solid-js";
+
+type Listener<T> = (value: T) => void;
+
+type EventBus<T> = {
+  dispatch: (...args: T extends undefined ? [] : [value: T]) => void;
+  subscribe: (fn: Listener<T>) => () => void;
+  useListener: (fn: Listener<T>) => void;
+};
 
 /**
- * Creates a reactive event primitive.
+ * Creates a pub-sub event bus.
  *
- * Returns a tuple of:
- * - An accessor whose value increments each time the event is dispatched.
- *   Reactive consumers (effects, memos, etc.) re-run whenever the event fires.
- * - A dispatch function that triggers the event.
- *
- * @returns `[accessor, dispatch]`
+ * - `dispatch(value)` notifies all listeners. No args needed when `T` is `undefined`.
+ * - `subscribe(fn)` registers a listener, returns an unsubscribe function.
+ * - `useListener(fn)` registers a listener that auto-unsubscribes via Solid's `onCleanup`.
  *
  * @example
  * ```ts
- * const [onSave, dispatchSave] = createEvent();
- *
- * createEffect(() => {
- *   onSave(); // re-runs every time dispatchSave() is called
- *   console.log("saved!");
- * });
+ * const clickEvent = createEvent<{ x: number; y: number }>();
+ * clickEvent.useListener(({ x, y }) => console.log(x, y));
+ * clickEvent.dispatch({ x: 10, y: 20 });
  *
- * dispatchSave(); // triggers the effect
+ * const resetEvent = createEvent();
+ * resetEvent.useListener(() => console.log("reset"));
+ * resetEvent.dispatch();
  * ```
  */
 
-export function createEvent(): [Accessor<number>, () => void] {
-  const [get, set] = createSignal(0);
-  return [
-    get,
-    () => {
-      set((v) => v + 1);
-    },
-  ];
+export function createEvent<T = undefined>(): EventBus<T> {
+  const listeners = new Set<Listener<T>>();
+
+  function dispatch(...args: T extends undefined ? [] : [value: T]): void {
+    const value = args[0] as T;
+    for (const fn of listeners) {
+      try {
+        fn(value);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
+  function subscribe(fn: Listener<T>): () => void {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+  }
+
+  // Auto-unsubscribes when the Solid owner scope is disposed
+  function useListener(fn: Listener<T>): void {
+    listeners.add(fn);
+    onCleanup(() => listeners.delete(fn));
+  }
+
+  return { dispatch, subscribe, useListener };
 }
diff --git a/frontend/src/ts/input/handlers/insert-text.ts b/frontend/src/ts/input/handlers/insert-text.ts
index 190783c66227..4b577eece08c 100644
--- a/frontend/src/ts/input/handlers/insert-text.ts
+++ b/frontend/src/ts/input/handlers/insert-text.ts
@@ -21,7 +21,7 @@ import {
 } from "../../test/funbox/list";
 import * as Replay from "../../test/replay";
 import { Config } from "../../config/store";
-import * as KeymapEvent from "../../observables/keymap-event";
+import { flash } from "../../events/keymap";
 import * as WeakSpot from "../../test/weak-spot";
 import * as CompositionState from "../../legacy-states/composition";
 import {
@@ -172,7 +172,7 @@ export async function onInsertText(options: OnInsertTextParams): Promise<void> {
     TestInput.pushMissedWord(TestWords.words.getCurrent());
   }
   if (Config.keymapMode === "react") {
-    void KeymapEvent.flash(data, correct);
+    flash(data, correct);
   }
   if (testInput.length === 0) {
     TestInput.setBurstStart(now);
diff --git a/frontend/src/ts/legacy-states/connection.ts b/frontend/src/ts/legacy-states/connection.ts
index 6c4506eb1c00..a3a6e3dfc3c4 100644
--- a/frontend/src/ts/legacy-states/connection.ts
+++ b/frontend/src/ts/legacy-states/connection.ts
@@ -1,6 +1,6 @@
 import { debounce } from "throttle-debounce";
 import { showSuccessNotification } from "../states/notifications";
-import * as ConnectionEvent from "../observables/connection-event";
+import { connectionEvent } from "../events/connection";
 import * as TestState from "../test/test-state";
 import { onDOMReady } from "../utils/dom";
 import { addBanner, removeBanner } from "../states/banners";
@@ -43,7 +43,7 @@ const throttledHandleState = debounce(5000, () => {
   }
 });
 
-ConnectionEvent.subscribe((newState) => {
+connectionEvent.subscribe((newState) => {
   state = newState;
   throttledHandleState();
 });
diff --git a/frontend/src/ts/modals/google-sign-up.ts b/frontend/src/ts/modals/google-sign-up.ts
index d42ddb8c2613..33da69dddaf4 100644
--- a/frontend/src/ts/modals/google-sign-up.ts
+++ b/frontend/src/ts/modals/google-sign-up.ts
@@ -15,7 +15,7 @@ import * as AccountController from "../auth";
 import * as CaptchaController from "../controllers/captcha-controller";
 
 import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import { subscribe as subscribeToSignUpEvent } from "../observables/google-sign-up-event";
+import { googleSignUpEvent } from "../events/google-sign-up";
 import AnimatedModal from "../utils/animated-modal";
 import { resetIgnoreAuthCallback } from "../firebase";
 import { ValidatedHtmlInputElement } from "../elements/input-validation";
@@ -171,7 +171,7 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
   });
 }
 
-subscribeToSignUpEvent((signedInUser, isNewUser) => {
+googleSignUpEvent.subscribe(({ signedInUser, isNewUser }) => {
   if (signedInUser !== undefined && isNewUser) {
     show(signedInUser);
   }
diff --git a/frontend/src/ts/modals/last-signed-out-result.ts b/frontend/src/ts/modals/last-signed-out-result.ts
index 8a7c0f648207..ce0c5cdb5b2d 100644
--- a/frontend/src/ts/modals/last-signed-out-result.ts
+++ b/frontend/src/ts/modals/last-signed-out-result.ts
@@ -7,7 +7,7 @@ import {
 } from "../states/notifications";
 import { CompletedEvent } from "@monkeytype/schemas/results";
 import { getAuthenticatedUser } from "../firebase";
-import * as AuthEvent from "../observables/auth-event";
+import { authEvent } from "../events/auth";
 
 function reset(): void {
   modal.getModal().qs(".result")?.setHtml(`
@@ -117,7 +117,7 @@ function hide(): void {
   void modal.hide();
 }
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "snapshotUpdated" && event.data.isInitial) {
     if (TestLogic.notSignedInLastResult !== null) {
       show();
diff --git a/frontend/src/ts/observables/auth-event.ts b/frontend/src/ts/observables/auth-event.ts
deleted file mode 100644
index 1a9523aeeed5..000000000000
--- a/frontend/src/ts/observables/auth-event.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-type AuthEvent =
-  | {
-      type: "authStateChanged";
-      data: { isUserSignedIn: boolean; loadPromise: Promise<void> };
-    }
-  | { type: "snapshotUpdated"; data: { isInitial: boolean } }
-  | { type: "authConfigUpdated"; data?: undefined };
-
-type SubscribeFunction = (event: AuthEvent) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export function dispatch(event: AuthEvent): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(event);
-    } catch (e) {
-      console.error("Auth event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
diff --git a/frontend/src/ts/observables/config-event.ts b/frontend/src/ts/observables/config-event.ts
deleted file mode 100644
index 4794c6e25b35..000000000000
--- a/frontend/src/ts/observables/config-event.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Config } from "@monkeytype/schemas/configs";
-
-export type ConfigEventKey =
-  | keyof Config
-  | "fullConfigChange"
-  | "fullConfigChangeFinished";
-
-type SubscribeParams = {
-  nosave?: boolean;
-  fullConfig?: Config;
-} & {
-  [K in ConfigEventKey]?: K extends keyof Config
-    ? { key: K; newValue: Config[K]; previousValue: Config[K] }
-    : { key: K; newValue?: undefined; previousValue?: undefined };
-}[ConfigEventKey];
-
-type SubscribeFunction = (options: SubscribeParams) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export function dispatch(options: SubscribeParams): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(options);
-    } catch (e) {
-      console.error("Config event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
diff --git a/frontend/src/ts/observables/connection-event.ts b/frontend/src/ts/observables/connection-event.ts
deleted file mode 100644
index ef15553467f3..000000000000
--- a/frontend/src/ts/observables/connection-event.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-type SubscribeFunction = (state: boolean) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-window.addEventListener("load", () => {
-  window.addEventListener("online", () => {
-    dispatch(true);
-  });
-  window.addEventListener("offline", () => {
-    dispatch(false);
-  });
-});
-
-function dispatch(state: boolean): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(state);
-    } catch (e) {
-      console.error("Connection event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
diff --git a/frontend/src/ts/observables/google-sign-up-event.ts b/frontend/src/ts/observables/google-sign-up-event.ts
deleted file mode 100644
index 07e8d0b31b90..000000000000
--- a/frontend/src/ts/observables/google-sign-up-event.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { UserCredential } from "firebase/auth";
-
-type SubscribeFunction = (
-  signedInUser: UserCredential,
-  isNewUser: boolean,
-) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export function dispatch(
-  signedInUser: UserCredential,
-  isNewUser: boolean,
-): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(signedInUser, isNewUser);
-    } catch (e) {
-      console.error("Google Sign Up event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
diff --git a/frontend/src/ts/observables/keymap-event.ts b/frontend/src/ts/observables/keymap-event.ts
deleted file mode 100644
index 48fa8b4a9d2b..000000000000
--- a/frontend/src/ts/observables/keymap-event.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-type SubscribeFunction = (
-  mode: "highlight" | "flash",
-  key: string,
-  correct?: boolean,
-) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export async function flash(key: string, correct?: boolean): Promise<void> {
-  subscribers.forEach((fn) => {
-    try {
-      fn("flash", key, correct);
-    } catch (e) {
-      console.error("Keymap flash event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
-
-export async function highlight(key: string): Promise<void> {
-  subscribers.forEach((fn) => {
-    try {
-      fn("highlight", key);
-    } catch (e) {
-      console.error("Keymap highlight event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
diff --git a/frontend/src/ts/observables/navigation-event.ts b/frontend/src/ts/observables/navigation-event.ts
deleted file mode 100644
index 51d4584a6162..000000000000
--- a/frontend/src/ts/observables/navigation-event.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { LoadingOptions } from "../pages/page";
-
-export type NavigateOptions = {
-  force?: boolean;
-  empty?: boolean;
-  //this will be used in tribe
-  data?: unknown;
-  loadingOptions?: LoadingOptions;
-};
-
-type SubscribeFunction = (url: string, options: NavigateOptions) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export function dispatch(url: string, options: NavigateOptions): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(url, options);
-    } catch (e) {
-      console.error("Navigation event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
diff --git a/frontend/src/ts/observables/timer-event.ts b/frontend/src/ts/observables/timer-event.ts
deleted file mode 100644
index e0326156fbff..000000000000
--- a/frontend/src/ts/observables/timer-event.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-type SubscribeFunction = (key: string, value?: string, value2?: string) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export function dispatch(key: string, value?: string, value2?: string): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(key, value, value2);
-    } catch (e) {
-      console.error("Timer event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
diff --git a/frontend/src/ts/observables/tts-event.ts b/frontend/src/ts/observables/tts-event.ts
deleted file mode 100644
index 78035cdae529..000000000000
--- a/frontend/src/ts/observables/tts-event.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-type SubscribeFunction = (text: string) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export async function dispatch(text: string): Promise<void> {
-  subscribers.forEach((fn) => {
-    try {
-      fn(text);
-    } catch (e) {
-      console.error("TTS event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts
index c23732c83237..a7dce4331425 100644
--- a/frontend/src/ts/pages/account-settings.ts
+++ b/frontend/src/ts/pages/account-settings.ts
@@ -11,7 +11,7 @@ import * as ApeKeyTable from "../elements/account-settings/ape-key-table";
 import * as BlockedUserTable from "../elements/account-settings/blocked-user-table";
 import { showErrorNotification } from "../states/notifications";
 import { z } from "zod";
-import * as AuthEvent from "../observables/auth-event";
+import { authEvent } from "../events/auth";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
 import { showPopup } from "../modals/simple-modals-base";
 import { addGithubAuth, addGoogleAuth } from "../auth";
@@ -254,7 +254,7 @@ qs(".pageAccountSettings")?.onChild("click", "#addGithubAuth", () => {
   void addGithubAuth();
 });
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authConfigUpdated") {
     updateUI();
   }
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index 080ab29e4336..9232daddee18 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -20,7 +20,7 @@ import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
 import { format } from "date-fns/format";
 import * as Skeleton from "../utils/skeleton";
 import type { ScaleChartOptions, LinearScaleOptions } from "chart.js";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { getActivePage } from "../states/core";
 import { getAuthenticatedUser } from "../firebase";
 
@@ -1174,7 +1174,7 @@ qs(".pageAccount")?.onChild("click", ".sendVerificationEmail", async () => {
   qs(".sendVerificationEmail")?.enable();
 });
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (getActivePage() === "account" && key === "typingSpeedUnit") {
     void update();
   }
diff --git a/frontend/src/ts/pages/friends.ts b/frontend/src/ts/pages/friends.ts
index 3724aad11c8b..81459af97429 100644
--- a/frontend/src/ts/pages/friends.ts
+++ b/frontend/src/ts/pages/friends.ts
@@ -28,7 +28,7 @@ import { getLanguageDisplayString } from "../utils/strings";
 import * as DB from "../db";
 import { getAuthenticatedUser } from "../firebase";
 import * as ServerConfiguration from "../ape/server-configuration";
-import * as AuthEvent from "../observables/auth-event";
+import { authEvent } from "../events/auth";
 import { Connection } from "@monkeytype/schemas/connections";
 import { Friend, UserNameSchema } from "@monkeytype/schemas/users";
 
@@ -567,7 +567,7 @@ onDOMReady(() => {
   Skeleton.save("pageFriends");
 });
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged" && !event.data.isUserSignedIn) {
     pendingRequests = undefined;
     friendsList = undefined;
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index a40605db8e8e..3cf3e11f6bc2 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -17,7 +17,7 @@ import {
   showSuccessNotification,
 } from "../states/notifications";
 import * as ImportExportSettingsModal from "../modals/import-export-settings";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent, type ConfigEventKey } from "../events/config";
 import { getActivePage } from "../states/core";
 import { PageWithUrlParams } from "./page";
 import { isAuthenticated } from "../firebase";
@@ -48,7 +48,7 @@ import { handleConfigInput } from "../elements/input-validation";
 import { Fonts } from "../constants/fonts";
 import * as CustomBackgroundPicker from "../elements/settings/custom-background-picker";
 import * as CustomFontPicker from "../elements/settings/custom-font-picker";
-import * as AuthEvent from "../observables/auth-event";
+import { authEvent } from "../events/auth";
 import * as FpsLimitSection from "../elements/settings/fps-limit-section";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
 import { showPopup } from "../modals/simple-modals-base";
@@ -598,7 +598,7 @@ export async function updateFilterSectionVisibility(): Promise<void> {
 
 export async function update(
   options: {
-    eventKey?: ConfigEvent.ConfigEventKey;
+    eventKey?: ConfigEventKey;
   } = {},
 ): Promise<void> {
   if (getActivePage() !== "settings") {
@@ -1027,7 +1027,7 @@ qs(".pageSettings #resetSettingsButton")?.on("click", () => {
   showPopup("resetSettings");
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "fullConfigChange") setEventDisabled(true);
   if (key === "fullConfigChangeFinished") setEventDisabled(false);
   if (key === "themeLight") {
@@ -1048,7 +1048,7 @@ ConfigEvent.subscribe(({ key, newValue }) => {
   }
 });
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
     if (event.data.isUserSignedIn) {
       showAccountSection();
diff --git a/frontend/src/ts/states/core.ts b/frontend/src/ts/states/core.ts
index 9b3f9cf8c8ff..00695db0a8cc 100644
--- a/frontend/src/ts/states/core.ts
+++ b/frontend/src/ts/states/core.ts
@@ -38,4 +38,4 @@ export const [getSelectedProfileName, setSelectedProfileName] = createSignal<
   string | undefined
 >(undefined);
 
-export const [onRestartTest, dispatchRestartTest] = createEvent();
+export const restartTestEvent = createEvent();
diff --git a/frontend/src/ts/states/header.ts b/frontend/src/ts/states/header.ts
index 45f65dea9d83..3469da892b95 100644
--- a/frontend/src/ts/states/header.ts
+++ b/frontend/src/ts/states/header.ts
@@ -15,4 +15,4 @@ export const [getXpBarData, setXpBarData] = createSignal<XpBarData | null>(
   null,
 );
 
-export const [getSkipBreakdownEvent, skipBreakdown] = createEvent();
+export const skipBreakdownEvent = createEvent();
diff --git a/frontend/src/ts/test/caret.ts b/frontend/src/ts/test/caret.ts
index 04a2fd7dc74a..bbb380838266 100644
--- a/frontend/src/ts/test/caret.ts
+++ b/frontend/src/ts/test/caret.ts
@@ -1,7 +1,7 @@
 import { Config } from "../config/store";
 import * as TestInput from "./test-input";
 import * as TestState from "../test/test-state";
-import { subscribe } from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { Caret } from "../elements/caret";
 import * as CompositionState from "../legacy-states/composition";
 import { qsr } from "../utils/dom";
@@ -43,7 +43,7 @@ export function updatePosition(noAnim = false): void {
 
 export const caret = new Caret(qsr("#caret"), Config.caretStyle);
 
-subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "caretStyle") {
     caret.setStyle(Config.caretStyle);
     updatePosition(true);
diff --git a/frontend/src/ts/test/funbox/funbox-functions.ts b/frontend/src/ts/test/funbox/funbox-functions.ts
index db4927a82797..1c65da0b870a 100644
--- a/frontend/src/ts/test/funbox/funbox-functions.ts
+++ b/frontend/src/ts/test/funbox/funbox-functions.ts
@@ -7,7 +7,7 @@ import * as Strings from "../../utils/strings";
 import { randomIntFromRange } from "@monkeytype/util/numbers";
 import * as Arrays from "../../utils/arrays";
 import { save } from "./funbox-memory";
-import * as TTSEvent from "../../observables/tts-event";
+import { ttsEvent } from "../../events/tts";
 import {
   showNoticeNotification,
   showErrorNotification,
@@ -16,7 +16,7 @@ import * as DDR from "../../utils/ddr";
 import * as TestWords from "../test-words";
 import * as TestInput from "../test-input";
 import * as LayoutfluidFunboxTimer from "./layoutfluid-funbox-timer";
-import * as KeymapEvent from "../../observables/keymap-event";
+import { highlight } from "../../events/keymap";
 import * as MemoryTimer from "./memory-funbox-timer";
 import { getPoem } from "../poetry";
 import * as JSONData from "../../utils/json-data";
@@ -234,7 +234,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
         showErrorNotification("Failed to load text-to-speech script");
         return;
       }
-      if (params[0] !== undefined) void TTSEvent.dispatch(params[0]);
+      if (params[0] !== undefined) ttsEvent.dispatch(params[0]);
     },
   },
   arrows: {
@@ -451,7 +451,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
           LayoutfluidFunboxTimer.hide();
         }
         setTimeout(() => {
-          void KeymapEvent.highlight(
+          highlight(
             TestWords.words.getCurrent().charAt(TestInput.input.current.length),
           );
         }, 1);
diff --git a/frontend/src/ts/test/funbox/funbox.ts b/frontend/src/ts/test/funbox/funbox.ts
index 7d4d846fbcdf..de19d9a93452 100644
--- a/frontend/src/ts/test/funbox/funbox.ts
+++ b/frontend/src/ts/test/funbox/funbox.ts
@@ -24,7 +24,7 @@ import {
 } from "./list";
 import { tryCatch } from "@monkeytype/util/trycatch";
 import { qs, qsa } from "../../utils/dom";
-import * as ConfigEvent from "../../observables/config-event";
+import { configEvent } from "../../events/config";
 
 export function toggleScript(...params: string[]): void {
   if (Config.funbox.length === 0) return;
@@ -231,7 +231,7 @@ async function applyFunboxCSS(): Promise<boolean> {
   return true;
 }
 
-ConfigEvent.subscribe(async ({ key }) => {
+configEvent.subscribe(async ({ key }) => {
   if (key === "funbox") {
     const active = getActiveFunboxNames();
     getAllFunboxes()
diff --git a/frontend/src/ts/test/live-acc.ts b/frontend/src/ts/test/live-acc.ts
index cda6654997a2..9594bcc26eee 100644
--- a/frontend/src/ts/test/live-acc.ts
+++ b/frontend/src/ts/test/live-acc.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
 import * as TestState from "../test/test-state";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { qs } from "../utils/dom";
@@ -82,6 +82,6 @@ export function instantHide(): void {
   state = false;
 }
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+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
index 3f1b6c308d64..9ed2ebac2025 100644
--- a/frontend/src/ts/test/live-burst.ts
+++ b/frontend/src/ts/test/live-burst.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
 import * as TestState from "../test/test-state";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import Format from "../singletons/format";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
@@ -80,6 +80,6 @@ export function instantHide(): void {
   state = false;
 }
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "liveBurstStyle") newValue === "off" ? hide() : show();
 });
diff --git a/frontend/src/ts/test/live-speed.ts b/frontend/src/ts/test/live-speed.ts
index a35090a2beac..34a963359d9a 100644
--- a/frontend/src/ts/test/live-speed.ts
+++ b/frontend/src/ts/test/live-speed.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
 import * as TestState from "./test-state";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import Format from "../singletons/format";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
@@ -82,6 +82,6 @@ export function instantHide(): void {
   state = false;
 }
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "liveSpeedStyle") newValue === "off" ? hide() : show();
 });
diff --git a/frontend/src/ts/test/monkey.ts b/frontend/src/ts/test/monkey.ts
index 2299f2df752b..0b2590b20aa8 100644
--- a/frontend/src/ts/test/monkey.ts
+++ b/frontend/src/ts/test/monkey.ts
@@ -1,6 +1,6 @@
 import { mapRange } from "@monkeytype/util/numbers";
 import { Config } from "../config/store";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import * as TestState from "../test/test-state";
 import * as KeyConverter from "../utils/key-converter";
 import { qs } from "../utils/dom";
@@ -9,7 +9,7 @@ import { Keycode } from "../constants/keys";
 const monkeyEl = qs("#monkey");
 const monkeyFastEl = qs("#monkey .fast");
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "monkey" && TestState.isActive) {
     if (Config.monkey) {
       monkeyEl?.show();
diff --git a/frontend/src/ts/test/pace-caret.ts b/frontend/src/ts/test/pace-caret.ts
index 5dd45a69ba84..d934c71c0264 100644
--- a/frontend/src/ts/test/pace-caret.ts
+++ b/frontend/src/ts/test/pace-caret.ts
@@ -3,7 +3,7 @@ import { Config } from "../config/store";
 import * as DB from "../db";
 import * as Misc from "../utils/misc";
 import * as TestState from "./test-state";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { getActiveFunboxes } from "./funbox/list";
 import { Caret } from "../elements/caret";
 import { qsr } from "../utils/dom";
@@ -265,7 +265,7 @@ export function start(): void {
   void update((settings?.spc ?? 0) * 1000);
 }
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "paceCaret") void init();
   if (key === "paceCaretStyle") {
     caret.setStyle(Config.paceCaretStyle);
diff --git a/frontend/src/ts/test/practise-words.ts b/frontend/src/ts/test/practise-words.ts
index f84b178bfed7..6bb97b5e023d 100644
--- a/frontend/src/ts/test/practise-words.ts
+++ b/frontend/src/ts/test/practise-words.ts
@@ -5,7 +5,7 @@ import { Config } from "../config/store";
 import { setConfig } from "../config/setters";
 import * as CustomText from "./custom-text";
 import * as TestInput from "./test-input";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { setCustomTextName } from "../legacy-states/custom-text-name";
 import { Mode } from "@monkeytype/schemas/shared";
 import { CustomTextSettings } from "@monkeytype/schemas/results";
@@ -182,6 +182,6 @@ export function resetBefore(): void {
   before.customText = null;
 }
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "mode") resetBefore();
 });
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 98d63f85f2eb..8669d7dc51f1 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -31,7 +31,7 @@ import * as TestInput from "./test-input";
 import * as TestStats from "./test-stats";
 import * as TestUI from "./test-ui";
 import * as TodayTracker from "./today-tracker";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import * as Focus from "./focus";
 import * as CustomText from "./custom-text";
 import * as CustomTextState from "./../legacy-states/custom-text-name";
@@ -1404,7 +1404,7 @@ qs(".pageTest #favoriteQuoteButton")?.on("click", async () => {
   }
 });
 
-ConfigEvent.subscribe(async ({ key }) => {
+configEvent.subscribe(async ({ key }) => {
   if (
     ["typingSpeedUnit", "startGraphsAtZero"].includes(key) &&
     TestState.resultVisible
diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts
index 3a1ea2b6e679..ccfca5ef1552 100644
--- a/frontend/src/ts/test/test-config.ts
+++ b/frontend/src/ts/test/test-config.ts
@@ -1,11 +1,11 @@
 import { ConfigValue, QuoteLength } from "@monkeytype/schemas/configs";
 import { Mode } from "@monkeytype/schemas/shared";
 import { Config } from "../config/store";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { getActivePage } from "../states/core";
 import { applyReducedMotion } from "../utils/misc";
 import { areUnsortedArraysEqual } from "../utils/arrays";
-import * as AuthEvent from "../observables/auth-event";
+import { authEvent } from "../events/auth";
 import { qs, qsa } from "../utils/dom";
 
 export function show(): void {
@@ -313,7 +313,7 @@ export function hideFavoriteQuoteLength(): void {
 
 let ignoreConfigEvent = false;
 
-ConfigEvent.subscribe(({ key, newValue, previousValue }) => {
+configEvent.subscribe(({ key, newValue, previousValue }) => {
   if (key === "fullConfigChange") {
     ignoreConfigEvent = true;
   }
@@ -341,7 +341,7 @@ ConfigEvent.subscribe(({ key, newValue, previousValue }) => {
   }
 });
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
     if (!event.data.isUserSignedIn) {
       hideFavoriteQuoteLength();
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index fc56ef4aa938..8db390113010 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -26,20 +26,19 @@ import * as TodayTracker from "./today-tracker";
 import * as ChallengeContoller from "../controllers/challenge-controller";
 import * as QuoteRateModal from "../modals/quote-rate";
 import * as Result from "./result";
-import { createEffect, on } from "solid-js";
-import { getActivePage, onRestartTest } from "../states/core";
+import { getActivePage, restartTestEvent } from "../states/core";
 import * as TestInput from "./test-input";
 import * as TestWords from "./test-words";
 import * as WordsGenerator from "./words-generator";
 import * as TestState from "./test-state";
 import * as PageTransition from "../legacy-states/page-transition";
-import * as ConfigEvent from "../observables/config-event";
-import * as TimerEvent from "../observables/timer-event";
+import { configEvent } from "../events/config";
+import { timerEvent } from "../events/timer";
 import objectHash from "object-hash";
 import * as AnalyticsController from "../controllers/analytics-controller";
 import { getAuthenticatedUser, isAuthenticated } from "../firebase";
 import * as ConnectionState from "../legacy-states/connection";
-import * as KeymapEvent from "../observables/keymap-event";
+import { highlight } from "../events/keymap";
 import * as LazyModeState from "../legacy-states/remember-lazy-mode";
 import Format from "../singletons/format";
 import { QuoteLength, QuoteLengthConfig } from "@monkeytype/schemas/configs";
@@ -572,7 +571,7 @@ async function init(): Promise<boolean> {
   }
 
   if (Config.keymapMode === "next" && Config.mode !== "zen") {
-    void KeymapEvent.highlight(
+    highlight(
       Arrays.nthElementFromArray(
         // ignoring for now but this might need a different approach
         // oxlint-disable-next-line no-misused-spread
@@ -685,7 +684,7 @@ export async function addWord(): Promise<void> {
     TestWords.words.push(randomWord.word, randomWord.sectionIndex);
     TestUI.addWord(randomWord.word);
   } catch (e) {
-    TimerEvent.dispatch("fail", "word generation error");
+    timerEvent.dispatch({ key: "fail", value: "word generation error" });
     showErrorNotification(
       "Error while getting next word. Please try again later",
       {
@@ -1433,7 +1432,7 @@ qs(".pageTest")?.onChild("click", "#restartTestButtonWithSameWordset", () => {
   });
 });
 
-createEffect(on(onRestartTest, () => restart(), { defer: true }));
+restartTestEvent.subscribe(() => restart());
 
 qs(".pageTest")?.onChild("click", "#testConfig .mode .textButton", (e) => {
   if (TestState.testRestarting) return;
@@ -1517,7 +1516,7 @@ qs(".pageTest")?.onChild("click", "#testConfig .numbersMode.textButton", () => {
 
 // ===============================
 
-ConfigEvent.subscribe(({ key, newValue, nosave }) => {
+configEvent.subscribe(({ key, newValue, nosave }) => {
   if (getActivePage() === "test") {
     if (key === "language") {
       //automatically enable lazy mode for arabic
@@ -1538,7 +1537,7 @@ ConfigEvent.subscribe(({ key, newValue, nosave }) => {
 
     if (key === "keymapMode" && newValue === "next" && Config.mode !== "zen") {
       setTimeout(() => {
-        void KeymapEvent.highlight(
+        highlight(
           Arrays.nthElementFromArray(
             // ignoring for now but this might need a different approach
             // oxlint-disable-next-line no-misused-spread
@@ -1562,7 +1561,7 @@ ConfigEvent.subscribe(({ key, newValue, nosave }) => {
   }
 });
 
-TimerEvent.subscribe((eventKey, eventValue) => {
+timerEvent.subscribe(({ key: eventKey, value: eventValue }) => {
   if (eventKey === "fail" && eventValue !== undefined) fail(eventValue);
   if (eventKey === "finish") void finish();
 });
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index 1ce1314d1039..26cf66b694e3 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -19,8 +19,8 @@ import * as Caret from "./caret";
 import * as SlowTimer from "../legacy-states/slow-timer";
 import * as TestState from "./test-state";
 import * as Time from "../legacy-states/time";
-import * as TimerEvent from "../observables/timer-event";
-import * as KeymapEvent from "../observables/keymap-event";
+import { timerEvent } from "../events/timer";
+import { highlight } from "../events/keymap";
 import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
 import { KeymapLayout, Layout } from "@monkeytype/schemas/configs";
 import * as SoundController from "../controllers/sound-controller";
@@ -141,7 +141,7 @@ function layoutfluid(): void {
 
       if (Config.keymapMode === "next") {
         setTimeout(() => {
-          void KeymapEvent.highlight(
+          highlight(
             TestWords.words.getCurrent().charAt(TestInput.input.current.length),
           );
         }, 1);
@@ -167,14 +167,14 @@ function checkIfFailed(
     if (timer !== null) clearTimeout(timer);
     SlowTimer.clear();
     slowTimerCount = 0;
-    TimerEvent.dispatch("fail", "min speed");
+    timerEvent.dispatch({ key: "fail", value: "min speed" });
     return true;
   }
   if (Config.minAcc === "custom" && acc < Config.minAccCustom) {
     if (timer !== null) clearTimeout(timer);
     SlowTimer.clear();
     slowTimerCount = 0;
-    TimerEvent.dispatch("fail", "min accuracy");
+    timerEvent.dispatch({ key: "fail", value: "min accuracy" });
     return true;
   }
   if (timerDebug) console.timeEnd("fail conditions");
@@ -198,7 +198,7 @@ function checkIfTimeIsUp(): void {
     TestInput.corrected.pushHistory();
     SlowTimer.clear();
     slowTimerCount = 0;
-    TimerEvent.dispatch("finish");
+    timerEvent.dispatch({ key: "finish" });
     return;
   }
 
@@ -286,7 +286,7 @@ function checkIfTimerIsSlow(drift: number): void {
         "Stopping the test due to bad performance. This would cause test calculations to be incorrect. If this happens a lot, please report this.",
       );
 
-      TimerEvent.dispatch("fail", "slow timer");
+      timerEvent.dispatch({ key: "fail", value: "slow timer" });
     }
   }
 }
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index ef58d4823ba1..5bd1f63d7463 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -15,7 +15,7 @@ import * as Strings from "../utils/strings";
 import { blendTwoHexColors } from "../utils/colors";
 import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
 import * as CompositionState from "../legacy-states/composition";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import * as Hangul from "hangul-js";
 import * as ResultWordHighlight from "../elements/result-word-highlight";
 import { getActivePage } from "../states/core";
@@ -35,7 +35,7 @@ import {
 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 { highlight } from "../events/keymap";
 import * as LiveAcc from "./live-acc";
 import * as Focus from "../test/focus";
 import * as TimerProgress from "../test/timer-progress";
@@ -68,7 +68,7 @@ import {
   qsr,
 } from "../utils/dom";
 import { getTheme } from "../states/theme";
-import { skipBreakdown } from "../states/header";
+import { skipBreakdownEvent } from "../states/header";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -1750,7 +1750,7 @@ function afterAnyTestInput(
   }
 
   if (Config.keymapMode === "next") {
-    void KeymapEvent.highlight(
+    highlight(
       TestWords.words.getCurrent().charAt(TestInput.input.current.length),
     );
   }
@@ -1918,7 +1918,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
     if (Config.randomTheme !== "off") {
       void ThemeController.randomizeTheme();
     }
-    skipBreakdown();
+    skipBreakdownEvent.dispatch();
   }
 
   currentTestLine = 0;
@@ -2025,7 +2025,7 @@ qs("#wordsWrapper")?.on("click", () => {
   focusWords();
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "quickRestart") {
     showHideTestRestartButton(newValue === "off");
   }
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 90f4ce76840e..e83d8754ebda 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -5,7 +5,7 @@ import * as TestWords from "./test-words";
 import * as TestInput from "./test-input";
 import * as Time from "../legacy-states/time";
 import * as TestState from "./test-state";
-import * as ConfigEvent from "../observables/config-event";
+import { configEvent } from "../events/config";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { animate } from "animejs";
@@ -251,6 +251,6 @@ export function updateStyle(): void {
   }, 125);
 }
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "timerStyle") updateStyle();
 });
diff --git a/frontend/src/ts/test/tts.ts b/frontend/src/ts/test/tts.ts
index a32d61947ab6..ccc49dd4fa5d 100644
--- a/frontend/src/ts/test/tts.ts
+++ b/frontend/src/ts/test/tts.ts
@@ -1,7 +1,7 @@
 import { Config } from "../config/store";
 import * as JSONData from "../utils/json-data";
-import * as ConfigEvent from "../observables/config-event";
-import * as TTSEvent from "../observables/tts-event";
+import { configEvent } from "../events/config";
+import { ttsEvent } from "../events/tts";
 
 let voice: SpeechSynthesisUtterance | undefined;
 
@@ -31,7 +31,7 @@ export async function speak(text: string): Promise<void> {
   }
 }
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "funbox") {
     if (newValue.includes("tts")) {
       void init();
@@ -44,6 +44,6 @@ ConfigEvent.subscribe(({ key, newValue }) => {
   }
 });
 
-TTSEvent.subscribe((text) => {
+ttsEvent.subscribe((text) => {
   void speak(text);
 });
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 73991df8112b..382034d6a380 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -2,7 +2,7 @@ import { Config } from "./config/store";
 import * as Caret from "./test/caret";
 import * as CustomText from "./test/custom-text";
 import * as TestState from "./test/test-state";
-import * as ConfigEvent from "./observables/config-event";
+import { configEvent } from "./events/config";
 import { debounce, throttle } from "throttle-debounce";
 import * as TestUI from "./test/test-ui";
 import { getActivePage, getGlobalOffsetTop } from "./states/core";
@@ -107,7 +107,7 @@ createEffect(() => {
   });
 });
 
-ConfigEvent.subscribe(async ({ key }) => {
+configEvent.subscribe(async ({ key }) => {
   if (key === "fontFamily") {
     await applyFontFamily();
   }

From e89ec7cb4f92bbf8d7f0daa4bbe880a5757d9f5a Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 22:38:25 +0100
Subject: [PATCH 2/7] impr: strip out type only imports in import tree script

!nuf
---
 frontend/scripts/import-tree.ts | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/scripts/import-tree.ts b/frontend/scripts/import-tree.ts
index 6ad90054044e..76082bcfb051 100644
--- a/frontend/scripts/import-tree.ts
+++ b/frontend/scripts/import-tree.ts
@@ -1,5 +1,6 @@
 import fs from "node:fs";
 import path from "node:path";
+import ts from "typescript";
 
 const ROOT = path.resolve(import.meta.dirname, "..");
 
@@ -46,15 +47,28 @@ if (entryPoints.length === 0) {
   process.exit(1);
 }
 
-// --- Import extraction ---
+// --- Import extraction (type-aware) ---
 
-const IMPORT_RE =
-  /(?:import|export)\s+(?:type\s+)?(?:(?:\{[^}]*\}|[\w*]+(?:\s*,\s*\{[^}]*\})?)\s+from\s+)?["']([^"']+)["']/g;
+const tsConfig: ts.CompilerOptions = {
+  module: ts.ModuleKind.ESNext,
+  target: ts.ScriptTarget.ESNext,
+  jsx: ts.JsxEmit.Preserve,
+  sourceMap: false,
+  declaration: false,
+  isolatedModules: true,
+};
+
+const JS_IMPORT_RE =
+  /(?:import|export)\s+(?:(?:\{[^}]*\}|[\w*]+(?:\s*,\s*\{[^}]*\})?)\s+from\s+)?["']([^"']+)["']/g;
 
 function extractImports(filePath: string): string[] {
   const content = fs.readFileSync(filePath, "utf-8");
+  const { outputText } = ts.transpileModule(content, {
+    compilerOptions: tsConfig,
+    fileName: filePath,
+  });
   const specifiers: string[] = [];
-  for (const match of content.matchAll(IMPORT_RE)) {
+  for (const match of outputText.matchAll(JS_IMPORT_RE)) {
     const spec = match[1];
     if (spec !== undefined) specifiers.push(spec);
   }

From f95cbaa25a2ca71f59a06359a8c9b5e0f3d3647c Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 22:47:49 +0100
Subject: [PATCH 3/7] impr: enhance import tree script with folder leaf
 detection and error handling

!nuf
---
 frontend/scripts/import-tree.ts | 51 ++++++++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 7 deletions(-)

diff --git a/frontend/scripts/import-tree.ts b/frontend/scripts/import-tree.ts
index 76082bcfb051..ce1cb6834e76 100644
--- a/frontend/scripts/import-tree.ts
+++ b/frontend/scripts/import-tree.ts
@@ -35,8 +35,11 @@ function collectTsFiles(dir: string): string[] {
   return results;
 }
 
+const isDir = fs.statSync(resolved).isDirectory();
+const boundary = isDir ? resolved : null;
+
 let entryPoints: string[];
-if (fs.statSync(resolved).isDirectory()) {
+if (isDir) {
   entryPoints = collectTsFiles(resolved);
 } else {
   entryPoints = [resolved];
@@ -63,10 +66,17 @@ const JS_IMPORT_RE =
 
 function extractImports(filePath: string): string[] {
   const content = fs.readFileSync(filePath, "utf-8");
-  const { outputText } = ts.transpileModule(content, {
-    compilerOptions: tsConfig,
-    fileName: filePath,
-  });
+  let outputText: string;
+  try {
+    ({ outputText } = ts.transpileModule(content, {
+      compilerOptions: tsConfig,
+      fileName: filePath,
+    }));
+  } catch {
+    // Some files (e.g. declaration files) can't be transpiled — fall back to
+    // regex on the original source, which still strips type-only imports.
+    outputText = content;
+  }
   const specifiers: string[] = [];
   for (const match of outputText.matchAll(JS_IMPORT_RE)) {
     const spec = match[1];
@@ -204,6 +214,12 @@ function depthColor(depth: number): string {
 
 // --- Display ---
 
+function leavesFolder(filePath: string): boolean {
+  if (boundary === null) return false;
+  if (filePath.startsWith("@monkeytype/")) return true;
+  return !filePath.startsWith(boundary + "/");
+}
+
 function displayPath(filePath: string): string {
   if (filePath.startsWith(ROOT + "/")) {
     return path.relative(ROOT, filePath);
@@ -224,9 +240,12 @@ function printTree(
   const connector = isRoot ? "" : isLast ? "└── " : "├── ";
   const dc = depthColor(depth);
 
+  const leaves = !isRoot && leavesFolder(filePath);
+  const leavesTag = leaves ? ` ${c.red}[↑]${c.reset}` : "";
+
   if (!info) {
     // leaf node (e.g. @monkeytype package)
-    console.log(`${c.dim}${prefix}${connector}${dp}${c.reset}`);
+    console.log(`${c.dim}${prefix}${connector}${dp}${c.reset}${leavesTag}`);
     return;
   }
 
@@ -239,7 +258,7 @@ function printTree(
   const seen = !isRoot && printed.has(filePath);
   const seenTag = seen ? ` ${c.dim}[seen above]${c.reset}` : "";
   console.log(
-    `${c.dim}${prefix}${connector}${c.reset}${nameStyle}${dp}${c.reset}${stats}${seenTag}`,
+    `${c.dim}${prefix}${connector}${c.reset}${nameStyle}${dp}${c.reset}${stats}${leavesTag}${seenTag}`,
   );
 
   if (seen || depth >= maxDepthLimit) return;
@@ -350,3 +369,21 @@ console.log(
 console.log(
   `Max depth:          ${c.bold}${maxDepthSeen}${c.reset} ${c.dim}(${displayPath(maxDepthFile)})${c.reset}`,
 );
+
+if (boundary !== null) {
+  const externalDirect = new Set<string>();
+  const externalTransitive = new Set<string>();
+  for (const entry of entryPoints) {
+    const info = cache.get(entry);
+    if (!info) continue;
+    for (const dep of info.directImports) {
+      if (leavesFolder(dep)) externalDirect.add(dep);
+    }
+    for (const dep of getAllReachable(entry, new Set())) {
+      if (leavesFolder(dep)) externalTransitive.add(dep);
+    }
+  }
+  console.log(
+    `Leaves folder ${c.red}[↑]${c.reset}: ${c.bold}${externalDirect.size}${c.reset} direct, ${c.bold}${externalTransitive.size}${c.reset} transitive`,
+  );
+}

From 962ebc9d247e86658cd30c68d9aa6a77a4e2e237 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 22:59:13 +0100
Subject: [PATCH 4/7] refactor: reactively add name change banner

---
 frontend/src/ts/auth.tsx                      | 24 --------------
 .../ts/components/layout/overlays/Banners.tsx | 33 +++++++++++++++++++
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index 39d411e64fd3..ee1a41c6a895 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -23,9 +23,7 @@ import {
   signInWithPopup,
   resetIgnoreAuthCallback,
 } from "./firebase";
-import { showPopup } from "./modals/simple-modals-base";
 import * as Sentry from "./sentry";
-import { addBanner } from "./states/banners";
 import { showLoaderBar, hideLoaderBar } from "./states/loader-bar";
 import {
   showNoticeNotification,
@@ -75,28 +73,6 @@ async function getDataAndInit(): Promise<boolean> {
     }
 
     void Sentry.setUser(snapshot.uid, snapshot.name);
-    if (snapshot.needsToChangeName) {
-      addBanner({
-        level: "error",
-        icon: "fas fa-exclamation-triangle",
-        customContent: (
-          <>
-            You need to update your account name.{" "}
-            <button
-              type="button"
-              class="px-2 py-1"
-              onClick={() => {
-                showPopup("updateName");
-              }}
-            >
-              Click here
-            </button>{" "}
-            to change it and learn more about why.
-          </>
-        ),
-        important: true,
-      });
-    }
 
     await updateConfigFromServer();
     return true;
diff --git a/frontend/src/ts/components/layout/overlays/Banners.tsx b/frontend/src/ts/components/layout/overlays/Banners.tsx
index 26f197532f1e..164e05d48f78 100644
--- a/frontend/src/ts/components/layout/overlays/Banners.tsx
+++ b/frontend/src/ts/components/layout/overlays/Banners.tsx
@@ -3,12 +3,15 @@ import { debounce } from "throttle-debounce";
 
 import { createEffectOn } from "../../../hooks/effects";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
+import { showPopup } from "../../../modals/simple-modals-base";
 import {
   Banner as BannerType,
+  addBanner,
   getBanners,
   removeBanner,
 } from "../../../states/banners";
 import { setGlobalOffsetTop } from "../../../states/core";
+import { getSnapshot } from "../../../states/snapshot";
 import { cn } from "../../../utils/cn";
 import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
@@ -78,6 +81,36 @@ function Banner(props: BannerType): JSXElement {
 export function Banners(): JSXElement {
   const [ref, element] = useRefWithUtils();
 
+  let nameChangeAdded = false;
+  createEffectOn(
+    () => getSnapshot()?.needsToChangeName,
+    (needsToChange) => {
+      if (needsToChange && !nameChangeAdded) {
+        nameChangeAdded = true;
+        addBanner({
+          level: "error",
+          icon: "fas fa-exclamation-triangle",
+          customContent: (
+            <>
+              You need to update your account name.{" "}
+              <button
+                type="button"
+                class="px-2 py-1"
+                onClick={() => {
+                  showPopup("updateName");
+                }}
+              >
+                Click here
+              </button>{" "}
+              to change it and learn more about why.
+            </>
+          ),
+          important: true,
+        });
+      }
+    },
+  );
+
   const setGlobalOffsetSignal = (): void => {
     const height = element()?.getOffsetHeight() ?? 0;
     setGlobalOffsetTop(height);

From 69e96f2304e930c3592786aa9089a3d20240ab61 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 23:04:42 +0100
Subject: [PATCH 5/7] refactor: move captcha modal call from auth to Register
 component

---
 frontend/src/ts/auth.tsx                           |  6 +-----
 .../src/ts/components/pages/login/Register.tsx     | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index ee1a41c6a895..972b61ff07d7 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -9,7 +9,6 @@ import {
 } from "firebase/auth";
 
 import Ape from "./ape";
-import { showRegisterCaptchaModal } from "./components/modals/RegisterCaptchaModal";
 import { updateFromServer as updateConfigFromServer } from "./config/remote";
 import * as DB from "./db";
 import { authEvent } from "./events/auth";
@@ -229,14 +228,11 @@ export async function signUp(
   name: string,
   email: string,
   password: string,
+  captchaToken: string,
 ): Promise<AuthResult> {
   if (!isAuthAvailable()) {
     return { success: false, message: "Authentication uninitialized" };
   }
-  const captchaToken = await showRegisterCaptchaModal();
-  if (captchaToken === undefined || captchaToken === "") {
-    return { success: false, message: "Please complete the captcha" };
-  }
 
   try {
     const createdAuthUser = await createUserWithEmailAndPassword(
diff --git a/frontend/src/ts/components/pages/login/Register.tsx b/frontend/src/ts/components/pages/login/Register.tsx
index 11f0189c8f9a..2566a7f350a0 100644
--- a/frontend/src/ts/components/pages/login/Register.tsx
+++ b/frontend/src/ts/components/pages/login/Register.tsx
@@ -22,6 +22,7 @@ import {
 import { isDevEnvironment } from "../../../utils/env";
 import { remoteValidationForm } from "../../../utils/remote-validation";
 import { H3 } from "../../common/Headers";
+import { showRegisterCaptchaModal } from "../../modals/RegisterCaptchaModal";
 import { InputField } from "../../ui/form/InputField";
 import { SubmitButton } from "../../ui/form/SubmitButton";
 import {
@@ -88,8 +89,19 @@ export function Register(): JSXElement {
     },
     onSubmit: async ({ value }) => {
       disableLoginPageInputs();
+      const captchaToken = await showRegisterCaptchaModal();
+      if (captchaToken === undefined || captchaToken === "") {
+        showErrorNotification("Please complete the captcha");
+        enableLoginPageInputs();
+        return;
+      }
       try {
-        const data = await signUp(value.username, value.email, value.password);
+        const data = await signUp(
+          value.username,
+          value.email,
+          value.password,
+          captchaToken,
+        );
         if (!data.success) {
           showErrorNotification(data.message);
         }

From 4a1ec41ebfd397e8bdca8cc985cec58def01c993 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 23:09:32 +0100
Subject: [PATCH 6/7] refactor: move applyFontFamily to ui.ts

---
 .../src/ts/commandline/lists/font-family.ts   |  3 +-
 .../src/ts/controllers/theme-controller.ts    | 26 -----------------
 .../elements/settings/custom-font-picker.ts   |  2 +-
 frontend/src/ts/ui.ts                         | 28 ++++++++++++++++++-
 4 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/frontend/src/ts/commandline/lists/font-family.ts b/frontend/src/ts/commandline/lists/font-family.ts
index acfc08ca9a37..231ddc5f043a 100644
--- a/frontend/src/ts/commandline/lists/font-family.ts
+++ b/frontend/src/ts/commandline/lists/font-family.ts
@@ -1,11 +1,12 @@
 import { Command } from "../types";
 import { buildCommandForConfigKey } from "../util";
 import FileStorage from "../../utils/file-storage";
-import { applyFontFamily } from "../../controllers/theme-controller";
+
 import { updateUI } from "../../elements/settings/custom-font-picker";
 import { showNoticeNotification } from "../../states/notifications";
 import { Config } from "../../config/store";
 import { setConfig } from "../../config/setters";
+import { applyFontFamily } from "../../ui";
 const fromMeta = buildCommandForConfigKey("fontFamily");
 
 if (fromMeta.subgroup) {
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 7cf1d46fde69..aca22ffa4a43 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -294,32 +294,6 @@ export async function applyCustomBackground(): Promise<void> {
   }
 }
 
-export async function applyFontFamily(): Promise<void> {
-  let font = Config.fontFamily.replace(/_/g, " ");
-
-  const localFont = await fileStorage.getFile("LocalFontFamilyFile");
-  if (localFont === undefined) {
-    //use config font
-    qs(".customFont")?.empty();
-  } else {
-    font = "LOCALCUSTOM";
-
-    qs(".customFont")?.setHtml(`
-      @font-face{ 
-        font-family: LOCALCUSTOM;
-        src: url(${localFont});
-        font-weight: 400;
-        font-style: normal;
-        font-display: block;
-      }`);
-  }
-
-  document.documentElement.style.setProperty(
-    "--font",
-    `"${font}", "Roboto Mono", "Vazirharf", monospace`,
-  );
-}
-
 window
   .matchMedia?.("(prefers-color-scheme: dark)")
   ?.addEventListener?.("change", (event) => {
diff --git a/frontend/src/ts/elements/settings/custom-font-picker.ts b/frontend/src/ts/elements/settings/custom-font-picker.ts
index a998242c367e..65129755135a 100644
--- a/frontend/src/ts/elements/settings/custom-font-picker.ts
+++ b/frontend/src/ts/elements/settings/custom-font-picker.ts
@@ -1,6 +1,6 @@
 import FileStorage from "../../utils/file-storage";
 import { showNoticeNotification } from "../../states/notifications";
-import { applyFontFamily } from "../../controllers/theme-controller";
+import { applyFontFamily } from "../../ui";
 
 const parentEl = document.querySelector(
   ".pageSettings .section[data-config-name='fontFamily']",
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 382034d6a380..e9c8ee9aae11 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -10,9 +10,9 @@ import { isDevEnvironment } from "./utils/env";
 import { isCustomTextLong } from "./legacy-states/custom-text-name";
 import { canQuickRestart } from "./utils/quick-restart";
 import { FontName } from "@monkeytype/schemas/fonts";
-import { applyFontFamily } from "./controllers/theme-controller";
 import { qs, qsr } from "./utils/dom";
 import { createEffect } from "solid-js";
+import fileStorage from "./utils/file-storage";
 import { convertRemToPixels } from "./utils/numbers";
 
 let isPreviewingFont = false;
@@ -27,6 +27,32 @@ export function previewFontFamily(font: FontName): void {
   isPreviewingFont = true;
 }
 
+export async function applyFontFamily(): Promise<void> {
+  let font = Config.fontFamily.replace(/_/g, " ");
+
+  const localFont = await fileStorage.getFile("LocalFontFamilyFile");
+  if (localFont === undefined) {
+    //use config font
+    qs(".customFont")?.empty();
+  } else {
+    font = "LOCALCUSTOM";
+
+    qs(".customFont")?.setHtml(`
+      @font-face{ 
+        font-family: LOCALCUSTOM;
+        src: url(${localFont});
+        font-weight: 400;
+        font-style: normal;
+        font-display: block;
+      }`);
+  }
+
+  document.documentElement.style.setProperty(
+    "--font",
+    `"${font}", "Roboto Mono", "Vazirharf", monospace`,
+  );
+}
+
 export function clearFontPreview(): void {
   if (!isPreviewingFont) return;
   previewFontFamily(Config.fontFamily);

From b67443eb72dd2e68030317381f01b3a0537ca774 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 23:44:46 +0100
Subject: [PATCH 7/7] chore: optimise depencencies by extracting prefetch
 functions to their own module

---
 .../src/ts/components/layout/header/Nav.tsx   |  6 ++--
 .../src/ts/components/pages/AboutPage.tsx     |  8 -----
 .../pages/leaderboard/LeaderboardPage.tsx     | 14 ---------
 frontend/src/ts/queries/prefetch.ts           | 29 +++++++++++++++++++
 4 files changed, 33 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/ts/queries/prefetch.ts

diff --git a/frontend/src/ts/components/layout/header/Nav.tsx b/frontend/src/ts/components/layout/header/Nav.tsx
index d2214a28a1ae..fbebe1e954d0 100644
--- a/frontend/src/ts/components/layout/header/Nav.tsx
+++ b/frontend/src/ts/components/layout/header/Nav.tsx
@@ -2,6 +2,10 @@ import { useQuery } from "@tanstack/solid-query";
 import { createMemo, JSXElement, Show } from "solid-js";
 
 import { createEffectOn } from "../../../hooks/effects";
+import {
+  prefetchAboutPage,
+  prefetchLeaderboardPage,
+} from "../../../queries/prefetch";
 import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
 import {
   restartTestEvent,
@@ -21,8 +25,6 @@ import { AnimeConditional } from "../../common/anime";
 import { Button } from "../../common/Button";
 import { NotificationBubble } from "../../common/NotificationBubble";
 import { User } from "../../common/User";
-import { prefetchAboutPage } from "../../pages/AboutPage";
-import { prefetchLeaderboardPage } from "../../pages/leaderboard/LeaderboardPage";
 import { AccountMenu } from "./AccountMenu";
 import { AccountXpBar } from "./AccountXpBar";
 
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 3296d2ebf3e6..f14caf161fb8 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -2,7 +2,6 @@ import { useQuery } from "@tanstack/solid-query";
 import { For, JSXElement, Show } from "solid-js";
 
 import { getConfig } from "../../config/store";
-import { queryClient } from "../../queries";
 import {
   getContributorsQueryOptions,
   getSpeedHistogramQueryOptions,
@@ -19,13 +18,6 @@ import { ChartJs } from "../common/ChartJs";
 import { Fa } from "../common/Fa";
 import { H2, H3 } from "../common/Headers";
 
-export function prefetchAboutPage(): void {
-  void queryClient.prefetchQuery(getContributorsQueryOptions());
-  void queryClient.prefetchQuery(getSupportersQueryOptions());
-  void queryClient.prefetchQuery(getTypingStatsQueryOptions());
-  void queryClient.prefetchQuery(getSpeedHistogramQueryOptions());
-}
-
 export function AboutPage(): JSXElement {
   const isOpen = () => getActivePage() === "about";
 
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 85d34a5ef90c..b92ee8a43e22 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -285,17 +285,3 @@ export function LeaderboardPage(): JSXElement {
     </Show>
   );
 }
-
-export function prefetchLeaderboardPage(): void {
-  void queryClient.prefetchQuery(
-    getLeaderboardQueryOptions({
-      type: "allTime",
-      mode: "time",
-      mode2: "15",
-      language: "english",
-      friendsOnly: false,
-      page: 0,
-      previous: false,
-    }),
-  );
-}
diff --git a/frontend/src/ts/queries/prefetch.ts b/frontend/src/ts/queries/prefetch.ts
new file mode 100644
index 000000000000..8b3b967bf209
--- /dev/null
+++ b/frontend/src/ts/queries/prefetch.ts
@@ -0,0 +1,29 @@
+import { queryClient } from ".";
+import {
+  getContributorsQueryOptions,
+  getSpeedHistogramQueryOptions,
+  getSupportersQueryOptions,
+  getTypingStatsQueryOptions,
+} from "./public";
+import { getLeaderboardQueryOptions } from "./leaderboards";
+
+export function prefetchAboutPage(): void {
+  void queryClient.prefetchQuery(getContributorsQueryOptions());
+  void queryClient.prefetchQuery(getSupportersQueryOptions());
+  void queryClient.prefetchQuery(getTypingStatsQueryOptions());
+  void queryClient.prefetchQuery(getSpeedHistogramQueryOptions());
+}
+
+export function prefetchLeaderboardPage(): void {
+  void queryClient.prefetchQuery(
+    getLeaderboardQueryOptions({
+      type: "allTime",
+      mode: "time",
+      mode2: "15",
+      language: "english",
+      friendsOnly: false,
+      page: 0,
+      previous: false,
+    }),
+  );
+}