From 62d6b0ae450e3fe55f954dde531431c7716cf5fc Mon Sep 17 00:00:00 2001
From: high1 <high1@mailfence.com>
Date: Sat, 24 Jan 2026 03:30:31 +0100
Subject: [PATCH 1/2] fix(perf): Added memos, cleaned up reactivity

---
 package.json       |  1 -
 src/ClockHands.tsx | 35 +++++++++++++++++++++++++----------
 src/time.ts        | 27 ---------------------------
 3 files changed, 25 insertions(+), 38 deletions(-)
 delete mode 100644 src/time.ts

diff --git a/package.json b/package.json
index 746ee6f..afb16fa 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
   },
   "pnpm": {
     "onlyBuiltDependencies": [
-      "@tailwindcss/oxide",
       "esbuild",
       "unrs-resolver"
     ]
diff --git a/src/ClockHands.tsx b/src/ClockHands.tsx
index b1f0405..c41c08c 100644
--- a/src/ClockHands.tsx
+++ b/src/ClockHands.tsx
@@ -1,14 +1,29 @@
-import { onCleanup } from 'solid-js';
+import { createMemo, createSignal, onCleanup } from 'solid-js';
 
 import { ClockLine as ClockHand } from '@/ClockLine';
-import { time } from '@/time';
+import { rotate, seconds } from '@/common';
 import { getTestId } from '@/utilities';
 
+const hours = seconds / 5;
+const getSecondsSinceMidnight = (): number =>
+  (Date.now() - new Date().setHours(0, 0, 0, 0)) / 1000;
+
+const [time, setTime] = createSignal(getSecondsSinceMidnight());
+
+let frame = requestAnimationFrame(function loop() {
+  setTime(getSecondsSinceMidnight());
+  frame = requestAnimationFrame(loop);
+});
+
 export const ClockHands = () => {
-  let frame = requestAnimationFrame(function loop() {
-    time.update();
-    frame = requestAnimationFrame(loop);
-  });
+  const hour = createMemo(() =>
+    rotate(((time() / seconds ** 2) % hours) / hours),
+  );
+  const minute = createMemo(() =>
+    rotate(((time() / seconds) % seconds) / seconds),
+  );
+  const second = createMemo(() => rotate((time() % seconds) / seconds));
+  const subsecond = createMemo(() => rotate(time() % 1, 0));
 
   onCleanup(() => {
     cancelAnimationFrame(frame);
@@ -20,22 +35,22 @@ export const ClockHands = () => {
         class="stroke-zinc-200 stroke-3 dark:stroke-zinc-600"
         data-testid={getTestId('subsecond')}
         length={82}
-        transform={time.milisecond}
+        transform={subsecond()}
       />
       <ClockHand
         class="stroke-zinc-600 stroke-4 dark:stroke-zinc-200"
         length={46}
-        transform={time.hour}
+        transform={hour()}
       />
       <ClockHand
         class="stroke-zinc-400 stroke-3"
         length={64}
-        transform={time.minute}
+        transform={minute()}
       />
       <ClockHand
         class="stroke-solid-light stroke-2 dark:stroke-solid"
         length={76}
-        transform={time.second}
+        transform={second()}
       />
     </>
   );
diff --git a/src/time.ts b/src/time.ts
deleted file mode 100644
index b570897..0000000
--- a/src/time.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { createSignal } from 'solid-js';
-
-import { rotate, seconds } from '@/common';
-
-const hours = seconds / 5;
-const getSecondsSinceMidnight = (): number =>
-  (Date.now() - new Date().setHours(0, 0, 0, 0)) / 1000;
-
-const [clock, setClock] = createSignal(getSecondsSinceMidnight());
-
-export const time = {
-  get hour() {
-    return rotate(((clock() / seconds ** 2) % hours) / hours);
-  },
-  get milisecond() {
-    return rotate(clock() % 1, 0);
-  },
-  get minute() {
-    return rotate(((clock() / seconds) % seconds) / seconds);
-  },
-  get second() {
-    return rotate((clock() % seconds) / seconds);
-  },
-  update: () => {
-    setClock(getSecondsSinceMidnight());
-  },
-};

From 501eafb0e67975a43885c2e5e2d998dd111932ba Mon Sep 17 00:00:00 2001
From: high1 <high1@mailfence.com>
Date: Sat, 24 Jan 2026 03:31:47 +0100
Subject: [PATCH 2/2] fix(eslint): Explicit resolver

---
 eslint.config.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/eslint.config.ts b/eslint.config.ts
index da6658e..8efcc3a 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -4,6 +4,7 @@ import css from '@eslint/css';
 import eslint from '@eslint/js';
 import html from '@html-eslint/eslint-plugin';
 import stylistic from '@stylistic/eslint-plugin';
+import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript';
 import { importX } from 'eslint-plugin-import-x';
 import jsonc from 'eslint-plugin-jsonc';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
@@ -56,6 +57,9 @@ export default defineConfig(
         { allowNumber: true },
       ],
     },
+    settings: {
+      'import-x/resolve-next': [createTypeScriptImportResolver()],
+    },
   },
   {
     extends: [