Font switcher

package.json

···
     "@atcute/client": "^2.0.7",
     "@atcute/oauth-browser-client": "^1.0.9",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
···
     "lexicons": "link:@atcute/bluesky/lexicons",
     "lucide-react": "^0.469.0",
     "preact": "^10.25.4",
+    "recharts": "^2.15.1",
     "simple-icons": "^13.21.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"

pnpm-lock.yaml

···
       '@radix-ui/react-dialog':
         specifier: ^1.1.4
         version: 1.1.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.6
+        version: 1.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@radix-ui/react-progress':
         specifier: ^1.1.1
         version: 1.1.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
···
       preact:
         specifier: ^10.25.4
         version: 10.25.4
+      recharts:
+        specifier: ^2.15.1
+        version: 2.15.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       simple-icons:
         specifier: ^13.21.0
         version: 13.21.0
···
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.26.7':
+    resolution: {integrity: sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/template@7.25.9':
     resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
···
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-arrow@1.1.2':
+    resolution: {integrity: sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.1':
     resolution: {integrity: sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==}
     peerDependencies:
···
 
   '@radix-ui/react-dismissable-layer@1.1.3':
     resolution: {integrity: sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.5':
+    resolution: {integrity: sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
···
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-focus-scope@1.1.2':
+    resolution: {integrity: sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-id@1.1.0':
     resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
     peerDependencies:
···
       '@types/react':
         optional: true
 
+  '@radix-ui/react-popover@1.1.6':
+    resolution: {integrity: sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.2.1':
     resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==}
     peerDependencies:
···
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popper@1.2.2':
+    resolution: {integrity: sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.3':
     resolution: {integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==}
     peerDependencies:
···
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-portal@1.1.4':
+    resolution: {integrity: sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-presence@1.1.2':
     resolution: {integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==}
     peerDependencies:
···
 
   '@radix-ui/react-primitive@2.0.1':
     resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.0.2':
+    resolution: {integrity: sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
···
 
   '@radix-ui/react-slot@1.1.1':
     resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-slot@1.1.2':
+    resolution: {integrity: sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==}
     peerDependencies:
       '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
···
   '@types/babel__traverse@7.20.6':
     resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
 
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
   '@types/diff@6.0.0':
     resolution: {integrity: sha512-dhVCYGv3ZSbzmQaBSagrv1WJ6rXCdkyTcDyoNu1MD8JohI7pR7k8wdZEm+mvdxRKXyHVwckFzWU1vJc+Z29MlA==}
 
···
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
···
       supports-color:
         optional: true
 
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
···
 
   dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
···
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  fast-equals@5.2.2:
+    resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
+    engines: {node: '>=6.0.0'}
+
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
···
   he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
 
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
···
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
···
     engines: {node: '>=14'}
     hasBin: true
 
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
···
     peerDependencies:
       react: ^19.0.0
 
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
···
       '@types/react':
         optional: true
 
+  react-remove-scroll@2.6.3:
+    resolution: {integrity: sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
···
     peerDependenciesMeta:
       '@types/react':
         optional: true
+
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
 
   react@19.0.0:
     resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
···
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.15.1:
+    resolution: {integrity: sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
···
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
   vite@6.0.7:
     resolution: {integrity: sha512-RDt8r/7qx9940f8FcOIAH9PTViRrghKaK2K1jY3RaAURrEUbm9Du1mJ72G+jlhtG3WwodnfzY8ORQZbBavZEAQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
···
       '@babel/types': 7.26.5
     transitivePeerDependencies:
       - supports-color
+
+  '@babel/runtime@7.26.7':
+    dependencies:
+      regenerator-runtime: 0.14.1
 
   '@babel/template@7.25.9':
     dependencies:
···
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@radix-ui/react-arrow@1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@radix-ui/react-collection@1.1.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0)
···
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@radix-ui/react-dismissable-layer@1.1.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@radix-ui/react-focus-guards@1.1.1(react@19.0.0)':
     dependencies:
       react: 19.0.0
···
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@radix-ui/react-focus-scope@1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@radix-ui/react-id@1.1.0(react@19.0.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0)
       react: 19.0.0
 
+  '@radix-ui/react-popover@1.1.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0)
+      '@radix-ui/react-context': 1.1.1(react@19.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-focus-guards': 1.1.1(react@19.0.0)
+      '@radix-ui/react-focus-scope': 1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-id': 1.1.0(react@19.0.0)
+      '@radix-ui/react-popper': 1.2.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-portal': 1.1.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-presence': 1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-slot': 1.1.2(react@19.0.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(react@19.0.0)
+      aria-hidden: 1.2.4
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-remove-scroll: 2.6.3(react@19.0.0)
+
   '@radix-ui/react-popper@1.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
···
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@radix-ui/react-popper@1.2.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-arrow': 1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0)
+      '@radix-ui/react-context': 1.1.1(react@19.0.0)
+      '@radix-ui/react-primitive': 2.0.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0)
+      '@radix-ui/react-use-rect': 1.1.0(react@19.0.0)
+      '@radix-ui/react-use-size': 1.1.0(react@19.0.0)
+      '@radix-ui/rect': 1.1.0
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@radix-ui/react-portal@1.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
···
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@radix-ui/react-portal@1.1.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   '@radix-ui/react-presence@1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0)
···
   '@radix-ui/react-primitive@2.0.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/react-slot': 1.1.1(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
+  '@radix-ui/react-primitive@2.0.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.2(react@19.0.0)
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
···
       react-dom: 19.0.0(react@19.0.0)
 
   '@radix-ui/react-slot@1.1.1(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0)
+      react: 19.0.0
+
+  '@radix-ui/react-slot@1.1.2(react@19.0.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.1(react@19.0.0)
       react: 19.0.0
···
     dependencies:
       '@babel/types': 7.26.5
 
+  '@types/d3-array@3.2.1': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
   '@types/diff@6.0.0': {}
 
   '@types/estree@1.0.6': {}
···
 
   csstype@3.1.3: {}
 
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.0: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
   debug@4.4.0:
     dependencies:
       ms: 2.1.3
 
+  decimal.js-light@2.5.1: {}
+
   detect-node-es@1.1.0: {}
 
   didyoumean@1.2.2: {}
···
   diff@7.0.0: {}
 
   dlv@1.1.3: {}
+
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.26.7
+      csstype: 3.1.3
 
   dom-serializer@2.0.0:
     dependencies:
···
 
   estree-walker@2.0.2: {}
 
+  eventemitter3@4.0.7: {}
+
+  fast-equals@5.2.2: {}
+
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
···
 
   he@1.2.0: {}
 
+  internmap@2.0.3: {}
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
···
 
   lines-and-columns@1.2.4: {}
 
+  lodash@4.17.21: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   lru-cache@10.4.3: {}
 
   lru-cache@5.1.1:
···
 
   prettier@3.4.2: {}
 
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
   queue-microtask@1.2.3: {}
 
   react-dom@19.0.0(react@19.0.0):
···
       react: 19.0.0
       scheduler: 0.25.0
 
+  react-is@16.13.1: {}
+
+  react-is@18.3.1: {}
+
   react-remove-scroll-bar@2.3.8(react@19.0.0):
     dependencies:
       react: 19.0.0
···
       use-callback-ref: 1.3.3(react@19.0.0)
       use-sidecar: 1.1.3(react@19.0.0)
 
+  react-remove-scroll@2.6.3(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-remove-scroll-bar: 2.3.8(react@19.0.0)
+      react-style-singleton: 2.2.3(react@19.0.0)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(react@19.0.0)
+      use-sidecar: 1.1.3(react@19.0.0)
+
+  react-smooth@4.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      fast-equals: 5.2.2
+      prop-types: 15.8.1
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-transition-group: 4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+
   react-style-singleton@2.2.3(react@19.0.0):
     dependencies:
       get-nonce: 1.0.1
       react: 19.0.0
       tslib: 2.8.1
 
+  react-transition-group@4.4.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      '@babel/runtime': 7.26.7
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   react@19.0.0: {}
 
   read-cache@1.0.0:
···
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
+
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.15.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
+  regenerator-runtime@0.14.1: {}
 
   resolve-pkg-maps@1.0.0: {}
 
···
       react: 19.0.0
 
   util-deprecate@1.0.2: {}
+
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
 
   vite@6.0.7(@types/node@22.10.7)(jiti@1.21.7)(tsx@4.19.2)(yaml@2.7.0):
     dependencies:

src/components/fontPicker.tsx

···
+// 2. Create Font Picker Component
+import { useTheme, GOOGLE_FONTS } from "@/providers/themeProvider";
+import { Button } from "./ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { Check, ChevronDown, Text } from "lucide-react";
+import { useState } from "preact/hooks";
+
+export function FontPicker() {
+  const { font, setFont, loadFonts, loadedFonts } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+    console.log("Setting open", open);
+    if (open) {
+      // Load all fonts when picker opens
+      loadFonts(GOOGLE_FONTS);
+    }
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" className="gap-2">
+          <Text className="h-4 w-4" />
+          {font.name}
+          <ChevronDown className="h-4 w-4 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px]">
+        <div className="grid gap-1 p-2">
+          {GOOGLE_FONTS.map((fontOption) => (
+            <button
+              key={fontOption.name}
+              onClick={() => {
+                setFont(fontOption);
+                setIsOpen(false);
+              }}
+              className="flex items-center justify-between rounded-sm p-2 text-sm hover:bg-accent"
+              style={{
+                fontFamily: `'${fontOption.name}', ${fontOption.category}`,
+                // Show loading state if font isn't loaded yet
+                opacity: loadedFonts.has(fontOption.url) ? 1 : 0.6,
+              }}
+            >
+              {fontOption.name}
+              {font.name === fontOption.name && (
+                <Check className="h-4 w-4 text-primary" />
+              )}
+              {!loadedFonts.has(fontOption.url) && (
+                <span className="h-4 w-4 animate-spin">⟳</span>
+              )}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

src/components/sidebar.tsx

···
 import { ColorToggle } from "./themeSwitcher";
 import { Link } from "@tanstack/react-router";
 import { ForwardRefExoticComponent, ReactNode } from "preact/compat";
+import { FontPicker } from "./fontPicker";
 
 type BaseMenuItem = {
   url: string;
···
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter>
+        <FontPicker />
         <ColorToggle />
       </SidebarFooter>
       <SidebarRail />

src/components/smartSearchBar.tsx

···
             url: input.replace("https:/", "").replace("pds/", ""),
           },
         });
+      } else if (input === "typing") {
+        navigate({ to: "/rnfgrertt/typing" });
       } else {
         navigate({
           to: `/at:/${input.replace("at:/", "")}`,

src/components/themeSwitcher.tsx

···
 import { Button } from "./ui/button";
 
 export const ColorToggle = () => {
-  const { theme, toggleTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
   useEffect(() => {
     setMounted(true);
···
       className="flex items-center justify-center w-10 h-10 p-3 rounded-full bg-gray-200 dark:bg-gray-800 text-neutral-800 dark:text-neutral-300 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700"
       aria-label="button"
       onClick={() => {
-        toggleTheme();
+        setTheme(theme === "dark" ? "light" : "dark");
       }}
     >
       <DarkLightIcon />

src/components/ui/kbdKey.tsx

···
     <div
       ref={ref}
       className={cn(
-        "inline-flex items-center justify-center rounded-md border bg-muted px-2 py-1 text-xs font-mono shadow",
+        "inline-flex items-center justify-center rounded-md border bg-muted px-2 py-1 text-xs font-mono shadow transition-colors duration-150",
         keys ? "gap-x-[0.062rem]" : "gap-x-1",
         allKeysPressed && "bg-green-300/50",
         className,

src/components/ui/popover.tsx

···
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

src/index.css

···
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 0 0% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+        --primary: 0 0% 9%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --radius: 0.5rem;
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
+    .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+        --sidebar-background: 240 5.9% 10%;
+        --sidebar-foreground: 240 4.8% 95.9%;
+        --sidebar-primary: 224.3 76.3% 48%;
+        --sidebar-primary-foreground: 0 0% 100%;
+        --sidebar-accent: 240 3.7% 15.9%;
+        --sidebar-accent-foreground: 240 4.8% 95.9%;
+        --sidebar-border: 240 3.7% 15.9%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
+    }
 }
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
 }
 
 .loader {
-  position: relative;
-  width: 54px;
-  height: 54px;
-  border-radius: 10px;
+    position: relative;
+    width: 54px;
+    height: 54px;
+    border-radius: 10px;
 }
 
 .loader div {
-  width: 8%;
-  height: 24%;
-  background: rgb(128, 128, 128);
-  position: absolute;
-  left: 50%;
-  top: 30%;
-  opacity: 0;
-  border-radius: 50px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-  animation: fade458 1s linear infinite;
+    width: 8%;
+    height: 24%;
+    background: rgb(128, 128, 128);
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    opacity: 0;
+    border-radius: 50px;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+    animation: fade458 1s linear infinite;
 }
 
 @keyframes fade458 {
-  from {
-    opacity: 1;
-  }
+    from {
+        opacity: 1;
+    }
 
-  to {
-    opacity: 0.25;
-  }
+    to {
+        opacity: 0.25;
+    }
 }
 
 .loader .bar1 {
-  transform: rotate(0deg) translate(0, -130%);
-  animation-delay: 0s;
+    transform: rotate(0deg) translate(0, -130%);
+    animation-delay: 0s;
 }
 
 .loader .bar2 {
-  transform: rotate(30deg) translate(0, -130%);
-  animation-delay: -1.1s;
+    transform: rotate(30deg) translate(0, -130%);
+    animation-delay: -1.1s;
 }
 
 .loader .bar3 {
-  transform: rotate(60deg) translate(0, -130%);
-  animation-delay: -1s;
+    transform: rotate(60deg) translate(0, -130%);
+    animation-delay: -1s;
 }
 
 .loader .bar4 {
-  transform: rotate(90deg) translate(0, -130%);
-  animation-delay: -0.9s;
+    transform: rotate(90deg) translate(0, -130%);
+    animation-delay: -0.9s;
 }
 
 .loader .bar5 {
-  transform: rotate(120deg) translate(0, -130%);
-  animation-delay: -0.8s;
+    transform: rotate(120deg) translate(0, -130%);
+    animation-delay: -0.8s;
 }
 
 .loader .bar6 {
-  transform: rotate(150deg) translate(0, -130%);
-  animation-delay: -0.7s;
+    transform: rotate(150deg) translate(0, -130%);
+    animation-delay: -0.7s;
 }
 
 .loader .bar7 {
-  transform: rotate(180deg) translate(0, -130%);
-  animation-delay: -0.6s;
+    transform: rotate(180deg) translate(0, -130%);
+    animation-delay: -0.6s;
 }
 
 .loader .bar8 {
-  transform: rotate(210deg) translate(0, -130%);
-  animation-delay: -0.5s;
+    transform: rotate(210deg) translate(0, -130%);
+    animation-delay: -0.5s;
 }
 
 .loader .bar9 {
-  transform: rotate(240deg) translate(0, -130%);
-  animation-delay: -0.4s;
+    transform: rotate(240deg) translate(0, -130%);
+    animation-delay: -0.4s;
 }
 
 .loader .bar10 {
-  transform: rotate(270deg) translate(0, -130%);
-  animation-delay: -0.3s;
+    transform: rotate(270deg) translate(0, -130%);
+    animation-delay: -0.3s;
 }
 
 .loader .bar11 {
-  transform: rotate(300deg) translate(0, -130%);
-  animation-delay: -0.2s;
+    transform: rotate(300deg) translate(0, -130%);
+    animation-delay: -0.2s;
 }
 
 .loader .bar12 {
-  transform: rotate(330deg) translate(0, -130%);
-  animation-delay: -0.1s;
+    transform: rotate(330deg) translate(0, -130%);
+    animation-delay: -0.1s;
+}
+
+@keyframes invertBlink {
+    0% {
+        filter: invert(100%);
+    }
+    30% {
+        filter: invert(100%);
+    }
+    50% {
+        filter: invert(0%);
+    }
+    80% {
+        filter: invert(0%);
+    }
+    100% {
+        filter: invert(100%);
+    }
+}
+
+.animate-blink {
+    animation: invertBlink 1s infinite;
 }

src/providers/themeProvider.tsx

···
-import React, { createContext, useContext, useEffect, useState } from "react";
+// 1. Create a Theme Context
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 
-type Theme = "dark" | "light";
+export type FontConfig = {
+  name: string;
+  category: "sans" | "serif" | "mono";
+  url: string;
+};
 
-type ThemeContextType = {
-  theme: Theme;
-  toggleTheme: () => void;
+export const GOOGLE_FONTS: FontConfig[] = [
+  {
+    name: "Inter",
+    category: "sans",
+    url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap",
+  },
+  {
+    name: "Roboto",
+    category: "sans",
+    url: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap",
+  },
+  {
+    name: "IBM Plex Mono",
+    category: "mono",
+    url: "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap",
+  },
+  {
+    name: "Space Mono",
+    category: "mono",
+    url: "https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap",
+  },
+  {
+    name: "DM Mono",
+    category: "mono",
+    url: "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;700&display=swap",
+  },
+  {
+    name: "Fira Mono",
+    category: "mono",
+    url: "https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&display=swap",
+  },
+  {
+    name: "Overpass Mono",
+    category: "mono",
+    url: "https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@400;700&display=swap",
+  },
+  {
+    name: "Atkinson Hyperlegible Mono",
+    category: "mono",
+    url: "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400;700&display=swap",
+  },
+  {
+    name: "Geist Mono",
+    category: "mono",
+    url: "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;700&display=swap",
+  },
+];
+
+export type ThemeState = {
+  theme: "light" | "dark";
+  font: FontConfig;
+  loadedFonts: Set<string>;
+  loadFonts: (fonts: FontConfig[]) => void;
+  setTheme: (theme: "light" | "dark") => void;
+  setFont: (font: FontConfig) => void;
 };
 
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+const ThemeContext = createContext<ThemeState>({} as ThemeState);
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  // Initialize with undefined to prevent hydration mismatch
-  const [theme, setTheme] = useState<Theme | undefined>(undefined);
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+  const [font, setFont] = useState<FontConfig>(GOOGLE_FONTS[0]);
+  const [loadedFonts, setLoadedFonts] = useState<Set<string>>(new Set());
 
+  const loadFonts = useCallback(
+    (fonts: FontConfig[]) => {
+      console.log("Loading multiple fonts");
+      fonts.forEach((fontConfig) => {
+        if (!loadedFonts.has(fontConfig.url)) {
+          const link = document.createElement("link");
+          link.rel = "stylesheet";
+          link.href = fontConfig.url;
+          link.crossOrigin = "anonymous";
+          link.dataset.font = fontConfig.name;
+          document.head.appendChild(link);
+
+          setLoadedFonts((prev) => new Set(prev).add(fontConfig.url));
+        }
+      });
+    },
+    [loadedFonts],
+  );
+
+  // Load saved theme/font from localStorage
   useEffect(() => {
-    // Get initial theme on mount
-    const root = window.document.documentElement;
-    const initialColorValue = root.className as Theme;
-    setTheme(initialColorValue);
+    const savedTheme =
+      (localStorage.getItem("theme") as "light" | "dark") || "light";
+    const savedFont =
+      JSON.parse(localStorage.getItem("font") || "null") || GOOGLE_FONTS[0];
+    setTheme(savedTheme);
+    setFont(savedFont);
   }, []);
 
+  // Manage font loading
   useEffect(() => {
-    if (theme) {
-      // Update class and localStorage when theme changes
-      const root = window.document.documentElement;
-      root.className = theme;
-      localStorage.setItem("theme", theme);
+    // Remove existing font links
+    const existingLinks = document.querySelectorAll("link[data-font]");
+    existingLinks.forEach((link) => link.remove());
+
+    // Create new font link
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = font.url;
+    link.dataset.font = font.name;
+    document.head.appendChild(link);
+
+    setLoadedFonts(new Set(font.url));
+
+    // Update CSS variables
+    document.documentElement.style.setProperty(
+      `--font-${font.category}`,
+      `'${font.name}', ${font.category === "sans" ? "sans-serif" : font.category}`,
+    );
+    // assume we want everything to be this font
+    document.documentElement.style.setProperty(
+      `--font-sans`,
+      `'${font.name}', sans-serif`,
+    );
+
+    if (font.category !== "mono") {
+      document.documentElement.style.setProperty(`--font-mono`, `mono`);
     }
-  }, [theme]);
 
-  const toggleTheme = () => {
-    setTheme((prev) => (prev === "light" ? "dark" : "light"));
-  };
+    // Save to localStorage
+    localStorage.setItem("font", JSON.stringify(font));
+    localStorage.setItem("theme", theme);
+  }, [font, theme]);
 
-  // Only render children once theme is set
-  if (theme === undefined) return null;
+  // Update theme class
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
 
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+    <ThemeContext.Provider
+      value={{ theme, font, setTheme, setFont, loadFonts, loadedFonts }}
+    >
       {children}
     </ThemeContext.Provider>
   );
 }
 
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (context === undefined) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-}
+export const useTheme = () => useContext(ThemeContext);

src/routeTree.gen.ts

···
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as FirehoseIndexImport } from './routes/firehose/index'
-import { Route as PdsUrlIndexImport } from './routes/pds/$url.index'
 import { Route as AtHandleIndexImport } from './routes/at:/$handle.index'
 
 // Create Virtual Routes
···
 const CounterLazyImport = createFileRoute('/counter')()
 const AboutLazyImport = createFileRoute('/about')()
 const IndexLazyImport = createFileRoute('/')()
+const RnfgrerttIndexLazyImport = createFileRoute('/rnfgrertt/')()
+const RnfgrerttTypingLazyImport = createFileRoute('/rnfgrertt/typing')()
+const PdsUrlIndexLazyImport = createFileRoute('/pds/$url/')()
 const AtHandleCollectionIndexLazyImport = createFileRoute(
   '/at:/$handle/$collection/',
 )()
···
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
 
+const RnfgrerttIndexLazyRoute = RnfgrerttIndexLazyImport.update({
+  id: '/rnfgrertt/',
+  path: '/rnfgrertt/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/rnfgrertt/index.lazy').then((d) => d.Route),
+)
+
 const FirehoseIndexRoute = FirehoseIndexImport.update({
   id: '/firehose/',
   path: '/firehose/',
   getParentRoute: () => rootRoute,
 } as any)
 
-const PdsUrlIndexRoute = PdsUrlIndexImport.update({
+const RnfgrerttTypingLazyRoute = RnfgrerttTypingLazyImport.update({
+  id: '/rnfgrertt/typing',
+  path: '/rnfgrertt/typing',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() =>
+  import('./routes/rnfgrertt/typing.lazy').then((d) => d.Route),
+)
+
+const PdsUrlIndexLazyRoute = PdsUrlIndexLazyImport.update({
   id: '/pds/$url/',
   path: '/pds/$url/',
   getParentRoute: () => rootRoute,
-} as any)
+} as any).lazy(() =>
+  import('./routes/pds/$url.index.lazy').then((d) => d.Route),
+)
 
 const AtHandleIndexRoute = AtHandleIndexImport.update({
   id: '/at:/$handle/',
···
       preLoaderRoute: typeof CounterLazyImport
       parentRoute: typeof rootRoute
     }
+    '/rnfgrertt/typing': {
+      id: '/rnfgrertt/typing'
+      path: '/rnfgrertt/typing'
+      fullPath: '/rnfgrertt/typing'
+      preLoaderRoute: typeof RnfgrerttTypingLazyImport
+      parentRoute: typeof rootRoute
+    }
     '/firehose/': {
       id: '/firehose/'
       path: '/firehose'
···
       preLoaderRoute: typeof FirehoseIndexImport
       parentRoute: typeof rootRoute
     }
+    '/rnfgrertt/': {
+      id: '/rnfgrertt/'
+      path: '/rnfgrertt'
+      fullPath: '/rnfgrertt'
+      preLoaderRoute: typeof RnfgrerttIndexLazyImport
+      parentRoute: typeof rootRoute
+    }
     '/at:/$handle/': {
       id: '/at:/$handle/'
       path: '/at:/$handle'
···
       id: '/pds/$url/'
       path: '/pds/$url'
       fullPath: '/pds/$url'
-      preLoaderRoute: typeof PdsUrlIndexImport
+      preLoaderRoute: typeof PdsUrlIndexLazyImport
       parentRoute: typeof rootRoute
     }
     '/at:/$handle/$collection/$rkey': {
···
   '/': typeof IndexLazyRoute
   '/about': typeof AboutLazyRoute
   '/counter': typeof CounterLazyRoute
+  '/rnfgrertt/typing': typeof RnfgrerttTypingLazyRoute
   '/firehose': typeof FirehoseIndexRoute
+  '/rnfgrertt': typeof RnfgrerttIndexLazyRoute
   '/at:/$handle': typeof AtHandleIndexRoute
-  '/pds/$url': typeof PdsUrlIndexRoute
+  '/pds/$url': typeof PdsUrlIndexLazyRoute
   '/at:/$handle/$collection/$rkey': typeof AtHandleCollectionRkeyLazyRoute
   '/at:/$handle/$collection': typeof AtHandleCollectionIndexLazyRoute
 }
···
   '/': typeof IndexLazyRoute
   '/about': typeof AboutLazyRoute
   '/counter': typeof CounterLazyRoute
+  '/rnfgrertt/typing': typeof RnfgrerttTypingLazyRoute
   '/firehose': typeof FirehoseIndexRoute
+  '/rnfgrertt': typeof RnfgrerttIndexLazyRoute
   '/at:/$handle': typeof AtHandleIndexRoute
-  '/pds/$url': typeof PdsUrlIndexRoute
+  '/pds/$url': typeof PdsUrlIndexLazyRoute
   '/at:/$handle/$collection/$rkey': typeof AtHandleCollectionRkeyLazyRoute
   '/at:/$handle/$collection': typeof AtHandleCollectionIndexLazyRoute
 }
···
   '/': typeof IndexLazyRoute
   '/about': typeof AboutLazyRoute
   '/counter': typeof CounterLazyRoute
+  '/rnfgrertt/typing': typeof RnfgrerttTypingLazyRoute
   '/firehose/': typeof FirehoseIndexRoute
+  '/rnfgrertt/': typeof RnfgrerttIndexLazyRoute
   '/at:/$handle/': typeof AtHandleIndexRoute
-  '/pds/$url/': typeof PdsUrlIndexRoute
+  '/pds/$url/': typeof PdsUrlIndexLazyRoute
   '/at:/$handle/$collection/$rkey': typeof AtHandleCollectionRkeyLazyRoute
   '/at:/$handle/$collection/': typeof AtHandleCollectionIndexLazyRoute
 }
···
     | '/'
     | '/about'
     | '/counter'
+    | '/rnfgrertt/typing'
     | '/firehose'
+    | '/rnfgrertt'
     | '/at:/$handle'
     | '/pds/$url'
     | '/at:/$handle/$collection/$rkey'
···
     | '/'
     | '/about'
     | '/counter'
+    | '/rnfgrertt/typing'
     | '/firehose'
+    | '/rnfgrertt'
     | '/at:/$handle'
     | '/pds/$url'
     | '/at:/$handle/$collection/$rkey'
···
     | '/'
     | '/about'
     | '/counter'
+    | '/rnfgrertt/typing'
     | '/firehose/'
+    | '/rnfgrertt/'
     | '/at:/$handle/'
     | '/pds/$url/'
     | '/at:/$handle/$collection/$rkey'
···
   IndexLazyRoute: typeof IndexLazyRoute
   AboutLazyRoute: typeof AboutLazyRoute
   CounterLazyRoute: typeof CounterLazyRoute
+  RnfgrerttTypingLazyRoute: typeof RnfgrerttTypingLazyRoute
   FirehoseIndexRoute: typeof FirehoseIndexRoute
+  RnfgrerttIndexLazyRoute: typeof RnfgrerttIndexLazyRoute
   AtHandleIndexRoute: typeof AtHandleIndexRoute
-  PdsUrlIndexRoute: typeof PdsUrlIndexRoute
+  PdsUrlIndexLazyRoute: typeof PdsUrlIndexLazyRoute
   AtHandleCollectionRkeyLazyRoute: typeof AtHandleCollectionRkeyLazyRoute
   AtHandleCollectionIndexLazyRoute: typeof AtHandleCollectionIndexLazyRoute
 }
···
   IndexLazyRoute: IndexLazyRoute,
   AboutLazyRoute: AboutLazyRoute,
   CounterLazyRoute: CounterLazyRoute,
+  RnfgrerttTypingLazyRoute: RnfgrerttTypingLazyRoute,
   FirehoseIndexRoute: FirehoseIndexRoute,
+  RnfgrerttIndexLazyRoute: RnfgrerttIndexLazyRoute,
   AtHandleIndexRoute: AtHandleIndexRoute,
-  PdsUrlIndexRoute: PdsUrlIndexRoute,
+  PdsUrlIndexLazyRoute: PdsUrlIndexLazyRoute,
   AtHandleCollectionRkeyLazyRoute: AtHandleCollectionRkeyLazyRoute,
   AtHandleCollectionIndexLazyRoute: AtHandleCollectionIndexLazyRoute,
 }
···
         "/",
         "/about",
         "/counter",
+        "/rnfgrertt/typing",
         "/firehose/",
+        "/rnfgrertt/",
         "/at:/$handle/",
         "/pds/$url/",
         "/at:/$handle/$collection/$rkey",
···
     "/counter": {
       "filePath": "counter.lazy.tsx"
     },
+    "/rnfgrertt/typing": {
+      "filePath": "rnfgrertt/typing.lazy.tsx"
+    },
     "/firehose/": {
       "filePath": "firehose/index.tsx"
     },
+    "/rnfgrertt/": {
+      "filePath": "rnfgrertt/index.lazy.tsx"
+    },
     "/at:/$handle/": {
       "filePath": "at:/$handle.index.tsx"
     },
     "/pds/$url/": {
-      "filePath": "pds/$url.index.tsx"
+      "filePath": "pds/$url.index.lazy.tsx"
     },
     "/at:/$handle/$collection/$rkey": {
       "filePath": "at:/$handle/$collection.$rkey.lazy.tsx"

src/routes/pds/$url.index.lazy.tsx

···
+import ShowError from '@/components/error'
+import { Loader } from '@/components/ui/loader'
+import { useDocumentTitle } from '@/hooks/useDocumentTitle'
+import { QtClient, useXrpc } from '@/providers/qtprovider'
+import { ComAtprotoSyncListRepos } from '@atcute/client/lexicons'
+import { createLazyFileRoute, Link } from '@tanstack/react-router'
+import { ShieldX } from 'lucide-react'
+import { useState, useEffect, useRef } from 'preact/compat'
+
+interface PdsData {
+  records?: ComAtprotoSyncListRepos.Output['repos']
+  cursor?: string
+  health?: PdsHealth
+  isLoading: boolean
+  error: Error | null
+  fetchMore: (cursor: string) => Promise<void>
+}
+
+interface PdsHealth {
+  version: string
+}
+
+function useRepoData(baseUrl: string): PdsData {
+  const xrpc = useXrpc()
+  const [state, setState] = useState<PdsData>({
+    isLoading: true,
+    error: null,
+    fetchMore: async () => {},
+  })
+
+  useDocumentTitle(baseUrl ? `${baseUrl} | atp.tools` : 'atp.tools')
+  const abortController = new AbortController()
+
+  async function fetchRepoData(cursor?: string) {
+    try {
+      setState((prev) => ({ ...prev, isLoading: true }))
+
+      // we dont use the main authenticated client here
+      const rpc = new QtClient(new URL('https://' + baseUrl))
+      // get the PDS
+      const response = await rpc
+        .getXrpcClient()
+        .get('com.atproto.sync.listRepos', {
+          params: { limit: 1000, cursor },
+          signal: abortController.signal,
+        })
+
+      const health = await rpc
+        .getXrpcClient()
+        .request({ nsid: '_health', type: 'get' })
+
+      setState((prev) => ({
+        ...prev,
+        records: cursor
+          ? [...(prev.records || []), ...response.data.repos]
+          : response.data.repos,
+        cursor: response.data.cursor,
+        health: health.data,
+        isLoading: false,
+        error: null,
+      }))
+
+      // todo: actual errors
+    } catch (err: any) {
+      if (err.name === 'AbortError') return
+
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        error: err instanceof Error ? err : new Error('An error occurred'),
+      }))
+    }
+  }
+
+  useEffect(() => {
+    fetchRepoData()
+
+    return () => {
+      abortController.abort()
+    }
+  }, [baseUrl, xrpc])
+
+  const fetchMore = async (cursor: string) => {
+    if (cursor && !state.isLoading) {
+      await fetchRepoData(cursor)
+    }
+  }
+
+  return { ...state, fetchMore }
+}
+
+export const Route = createLazyFileRoute('/pds/$url/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { url } = Route.useParams()
+  const { cursor, records, fetchMore, isLoading, error } = useRepoData(url)
+
+  useDocumentTitle(records ? `${url} (PDS) | atp.tools` : 'atp.tools')
+
+  const loaderRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!loaderRef.current) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const target = entries[0]
+        if (target.isIntersecting && !isLoading && cursor) {
+          fetchMore(cursor)
+        }
+      },
+      { threshold: 0.1, rootMargin: '50px' },
+    )
+
+    observer.observe(loaderRef.current)
+    return () => observer.disconnect()
+  }, [cursor, isLoading, fetchMore])
+
+  if (error) {
+    return <ShowError error={error} />
+  }
+
+  if ((isLoading && !cursor) || !records) {
+    return <Loader className="max-h-[calc(100vh-5rem)] h-screen" />
+  }
+
+  return (
+    <div className="flex flex-row justify-center w-full">
+      <div className="max-w-2xl w-screen p-4 md:mt-16 space-y-2">
+        <div>
+          PDS: {url.includes('bsky.network') && '🍄'} {url}
+        </div>
+
+        <div>
+          <h2 className="text-xl font-bold">Repositories (accounts)</h2>
+          <ul>
+            {records?.map((c) => (
+              <li key={c.did} className="text-blue-500">
+                <Link
+                  to="/at:/$handle"
+                  params={{
+                    handle: c.did,
+                  }}
+                >
+                  {c.did}{' '}
+                  {!c.active && <ShieldX className="inline text-red-500" />}
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <div
+            ref={loaderRef}
+            className="flex flex-row justify-center h-10 -pt-16"
+          >
+            {isLoading && <Loader className="max-h-16 h-screen" />}
+            {!isLoading && !cursor && (
+              <div className="text-center text-sm text-muted-foreground mx-10 mt-2">
+                that's all, folks!
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/routes/pds/$url.index.tsx

···
-import ShowError from "@/components/error";
-import { Loader } from "@/components/ui/loader";
-import { useDocumentTitle } from "@/hooks/useDocumentTitle";
-import { QtClient, useXrpc } from "@/providers/qtprovider";
-import { ComAtprotoSyncListRepos } from "@atcute/client/lexicons";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { ShieldX } from "lucide-react";
-import { useState, useEffect, useRef } from "preact/compat";
-
-interface PdsData {
-  records?: ComAtprotoSyncListRepos.Output["repos"];
-  cursor?: string;
-  health?: PdsHealth;
-  isLoading: boolean;
-  error: Error | null;
-  fetchMore: (cursor: string) => Promise<void>;
-}
-
-interface PdsHealth {
-  version: string;
-}
-
-function useRepoData(baseUrl: string): PdsData {
-  const xrpc = useXrpc();
-  const [state, setState] = useState<PdsData>({
-    isLoading: true,
-    error: null,
-    fetchMore: async () => {},
-  });
-
-  useDocumentTitle(baseUrl ? `${baseUrl} | atp.tools` : "atp.tools");
-  const abortController = new AbortController();
-
-  async function fetchRepoData(cursor?: string) {
-    try {
-      setState((prev) => ({ ...prev, isLoading: true }));
-
-      // we dont use the main authenticated client here
-      const rpc = new QtClient(new URL("https://" + baseUrl));
-      // get the PDS
-      const response = await rpc
-        .getXrpcClient()
-        .get("com.atproto.sync.listRepos", {
-          params: { limit: 1000, cursor },
-          signal: abortController.signal,
-        });
-
-      const health = await rpc
-        .getXrpcClient()
-        .request({ nsid: "_health", type: "get" });
-
-      setState((prev) => ({
-        ...prev,
-        records: cursor
-          ? [...(prev.records || []), ...response.data.repos]
-          : response.data.repos,
-        cursor: response.data.cursor,
-        health: health.data,
-        isLoading: false,
-        error: null,
-      }));
-
-      // todo: actual errors
-    } catch (err: any) {
-      if (err.name === "AbortError") return;
-
-      setState((prev) => ({
-        ...prev,
-        isLoading: false,
-        error: err instanceof Error ? err : new Error("An error occurred"),
-      }));
-    }
-  }
-
-  useEffect(() => {
-    fetchRepoData();
-
-    return () => {
-      abortController.abort();
-    };
-  }, [baseUrl, xrpc]);
-
-  const fetchMore = async (cursor: string) => {
-    if (cursor && !state.isLoading) {
-      await fetchRepoData(cursor);
-    }
-  };
-
-  return { ...state, fetchMore };
-}
-
-export const Route = createFileRoute("/pds/$url/")({
-  component: RouteComponent,
-});
-
-function RouteComponent() {
-  const { url } = Route.useParams();
-  const { cursor, records, fetchMore, isLoading, error } = useRepoData(url);
-
-  useDocumentTitle(records ? `${url} (PDS) | atp.tools` : "atp.tools");
-
-  const loaderRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!loaderRef.current) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const target = entries[0];
-        if (target.isIntersecting && !isLoading && cursor) {
-          fetchMore(cursor);
-        }
-      },
-      { threshold: 0.1, rootMargin: "50px" },
-    );
-
-    observer.observe(loaderRef.current);
-    return () => observer.disconnect();
-  }, [cursor, isLoading, fetchMore]);
-
-  if (error) {
-    return <ShowError error={error} />;
-  }
-
-  if ((isLoading && !cursor) || !records) {
-    return <Loader className="max-h-[calc(100vh-5rem)] h-screen" />;
-  }
-
-  return (
-    <div className="flex flex-row justify-center w-full">
-      <div className="max-w-2xl w-screen p-4 md:mt-16 space-y-2">
-        <div>
-          PDS: {url.includes("bsky.network") && "🍄"} {url}
-        </div>
-
-        <div>
-          <h2 className="text-xl font-bold">Repositories (accounts)</h2>
-          <ul>
-            {records?.map((c) => (
-              <li key={c.did} className="text-blue-500">
-                <Link
-                  to="/at:/$handle"
-                  params={{
-                    handle: c.did,
-                  }}
-                >
-                  {c.did}{" "}
-                  {!c.active && <ShieldX className="inline text-red-500" />}
-                </Link>
-              </li>
-            ))}
-          </ul>
-          <div
-            ref={loaderRef}
-            className="flex flex-row justify-center h-10 -pt-16"
-          >
-            {isLoading && <Loader className="max-h-16 h-screen" />}
-            {!isLoading && !cursor && (
-              <div className="text-center text-sm text-muted-foreground mx-10 mt-2">
-                that's all, folks!
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/routes/rnfgrertt/index.lazy.tsx

···
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/rnfgrertt/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/rnfrgrertt/"!</div>
+}

src/routes/rnfgrertt/typing.lazy.tsx

···
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useState, useEffect, useRef } from "preact/hooks";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from "recharts";
+
+// Type definitions
+type TypingError = {
+  position: number;
+  timestamp: number;
+  expected: string;
+  actual: string;
+};
+
+type WPMDataPoint = {
+  time: number;
+  wpm: number;
+  errorsPerSecond: number;
+};
+
+type TypingStats = {
+  accuracy: string;
+  wpm: string;
+  time: string;
+  errorCount: number;
+};
+
+// Constants
+const SAMPLE_TEXT = "The quick brown fox jumps over the lazy dog";
+const UPDATE_INTERVAL = 500;
+const CHART_MARGIN = { top: 5, right: 30, left: 20, bottom: 5 };
+
+// Custom hooks
+const useWpmTracker = (
+  startTime: number | null,
+  isFinished: boolean,
+  userInput: string,
+) => {
+  const [wpmData, setWpmData] = useState<WPMDataPoint[]>([]);
+  const userInputRef = useRef(userInput);
+  const lastUpdateRef = useRef<number>(0);
+  const prevErrorsRef = useRef<number>(0);
+
+  useEffect(() => {
+    userInputRef.current = userInput;
+    if (userInputRef.current.length >= 5 && wpmData.length < 1) {
+      updateWPMData();
+    }
+  }, [userInput]);
+
+  const calculateMetrics = (currentTime: number) => {
+    if (startTime === null)
+      return { timeElapsed: 0, correctChars: 0, currentErrors: 0 };
+    const timeElapsed = (currentTime - startTime) / 1000;
+    const currentInput = userInputRef.current;
+
+    // Calculate correct characters and current errors
+    let correctChars = 0;
+    let currentErrors = 0;
+
+    for (let i = 0; i < currentInput.length; i++) {
+      if (currentInput[i] === SAMPLE_TEXT[i]) {
+        correctChars++;
+      } else {
+        currentErrors++;
+      }
+    }
+
+    return { timeElapsed, correctChars, currentErrors };
+  };
+
+  const updateWPMData = () => {
+    const now = Date.now();
+    const { timeElapsed, correctChars, currentErrors } = calculateMetrics(now);
+
+    // Calculate errors per second
+    const timeDiff = (now - (lastUpdateRef.current || now)) / 1000;
+    const errorDelta = currentErrors - prevErrorsRef.current;
+    const errorsPerSecond = timeDiff > 0 ? errorDelta / timeDiff : 0;
+
+    setWpmData((prev) => [
+      ...prev,
+      {
+        time: Number(timeElapsed.toFixed(1)),
+        wpm: Math.round(correctChars / 5 / (timeElapsed / 60)),
+        errorsPerSecond: Number(errorsPerSecond.toFixed(1)),
+      },
+    ]);
+
+    lastUpdateRef.current = now;
+    prevErrorsRef.current = currentErrors;
+  };
+
+  useEffect(() => {
+    if (!startTime || isFinished) return;
+
+    // Subsequent updates at interval
+    const intervalId = setInterval(updateWPMData, UPDATE_INTERVAL);
+
+    return () => clearInterval(intervalId);
+  }, [startTime, isFinished]);
+
+  const resetWpmData = () => setWpmData([]);
+  return { wpmData, resetWpmData };
+};
+
+const useErrorTracker = (errors: TypingError[]) => {
+  const [errorDistribution, setErrorDistribution] = useState<
+    { position: number; count: number }[]
+  >([]);
+
+  useEffect(() => {
+    const distribution = new Array(SAMPLE_TEXT.length).fill(0);
+    errors.forEach(({ position }) => distribution[position]++);
+    setErrorDistribution(
+      distribution
+        .map((count, position) => ({ position, count }))
+        .filter((d) => d.count > 0),
+    );
+  }, [errors]);
+
+  return errorDistribution;
+};
+
+const useTypingTest = () => {
+  const [state, setState] = useState({
+    userInput: "",
+    isFinished: false,
+    startTime: null as number | null,
+    endTime: null as number | null,
+    errors: [] as TypingError[],
+  });
+
+  const handleInput = (input: string) => {
+    if (state.isFinished) return;
+
+    const newInput = input.slice(0, SAMPLE_TEXT.length);
+    const newErrors = [...state.errors];
+
+    // Track new errors
+    if (newInput.length > state.userInput.length) {
+      const newCharIndex = newInput.length - 1;
+      if (newInput[newCharIndex] !== SAMPLE_TEXT[newCharIndex]) {
+        newErrors.push({
+          position: newCharIndex,
+          timestamp: Date.now(),
+          expected: SAMPLE_TEXT[newCharIndex],
+          actual: newInput[newCharIndex],
+        });
+      }
+    }
+
+    setState((prev) => ({
+      ...prev,
+      userInput: newInput,
+      errors: newErrors,
+      startTime: prev.startTime || (newInput.length > 0 ? Date.now() : null),
+      isFinished: newInput.length === SAMPLE_TEXT.length,
+      endTime:
+        newInput.length === SAMPLE_TEXT.length ? Date.now() : prev.endTime,
+    }));
+  };
+
+  const resetTest = () => {
+    setState({
+      userInput: "",
+      isFinished: false,
+      startTime: null,
+      endTime: null,
+      errors: [],
+    });
+  };
+
+  return { ...state, handleInput, resetTest };
+};
+
+// UI Components
+const ResultsView = ({
+  stats,
+  wpmData,
+  resetTest,
+}: {
+  stats: TypingStats;
+  wpmData: WPMDataPoint[];
+  resetTest: () => void;
+}) => (
+  <div className="m-auto px-4 py-16 flex-1 max-w-screen-sm text-center bg-card space-y-4 p-6 rounded-lg">
+    <h2 className="text-2xl font-bold mb-4">Test Results</h2>
+    <StatsGrid stats={stats} />
+    <PerformanceChart wpmData={wpmData} />
+    <ResetButton onClick={resetTest} />
+  </div>
+);
+
+const StatsGrid = ({ stats }: { stats: TypingStats }) => (
+  <div className="grid grid-cols-4 gap-4">
+    {Object.entries(stats).map(([key, value]) => (
+      <StatBox key={key} label={key} value={value} />
+    ))}
+  </div>
+);
+
+const StatBox = ({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | number;
+}) => (
+  <div className="bg-muted p-4 rounded">
+    <div className="text-gray-500 text-sm">{label}</div>
+    <div className="text-3xl font-bold">{value}</div>
+    <div className="text-gray-500 text-sm">{getUnit(label)}</div>
+  </div>
+);
+
+const PerformanceChart = ({ wpmData }: { wpmData: WPMDataPoint[] }) => (
+  <div className="mt-8 flex flex-col justify-center items-center">
+    <h3 className="text-xl font-bold mb-4">Performance Over Time</h3>
+    <LineChart width={650} height={300} data={wpmData} margin={CHART_MARGIN}>
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis
+        dataKey="time"
+        type="number"
+        label={{ value: "Time (seconds)", position: "bottom" }}
+        domain={[0, "auto"]}
+      />
+      <YAxis
+        yAxisId="left"
+        label={{ value: "WPM", angle: -90, position: "insideLeft" }}
+      />
+      <YAxis
+        yAxisId="right"
+        orientation="right"
+        label={{ value: "Errors/sec", angle: 90, position: "insideRight" }}
+        domain={[0, Math.max(...wpmData.map((d) => d.errorsPerSecond), 1)]}
+      />
+      <Tooltip content={<CustomTooltip />} />
+      <Legend />
+      <Line
+        yAxisId="left"
+        type="monotone"
+        dataKey="wpm"
+        stroke="#8884d8"
+        name="WPM"
+        strokeWidth={2}
+        dot={false}
+      />
+      <Line
+        yAxisId="right"
+        type="monotone"
+        dataKey="errorsPerSecond"
+        stroke="#ff4757"
+        name="Errors/sec"
+        strokeWidth={2}
+        dot={false}
+      />
+    </LineChart>
+  </div>
+);
+
+const CustomTooltip = ({ active, payload }: any) => {
+  if (active && payload?.length) {
+    const data = payload[0].payload;
+    return (
+      <div className="bg-white p-2 border rounded shadow">
+        <p className="text-sm">Time: {data.time}s</p>
+        <p className="text-sm text-blue-500">WPM: {data.wpm}</p>
+        <p className="text-sm text-red-500">
+          Errors/sec: {data.errorsPerSecond}
+        </p>
+      </div>
+    );
+  }
+  return null;
+};
+
+const TypingArea = ({
+  userInput,
+  handleInput,
+}: {
+  userInput: string;
+  handleInput: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}) => (
+  <div className="m-auto flex-1 relative p-4 bg-muted rounded-lg h-min max-w-xl">
+    <TextDisplay userInput={userInput} />
+    <textarea
+      className="absolute top-0 left-0 w-full h-full p-4 resize-none bg-transparent text-transparent caret-transparent outline-none"
+      value={userInput}
+      onChange={handleInput}
+      autoFocus
+    />
+  </div>
+);
+
+const TextDisplay = ({ userInput }: { userInput: string }) => (
+  <div className="whitespace-pre-wrap break-words">
+    {SAMPLE_TEXT.split("").map((char, i) => {
+      const status =
+        i < userInput.length
+          ? userInput[i] === char
+            ? "text-green-500"
+            : "text-red-500 underline"
+          : "";
+      return (
+        <span
+          key={i}
+          className={`${status} ${i === userInput.length ? "bg-muted animate-blink" : ""}`}
+        >
+          {char}
+        </span>
+      );
+    })}
+  </div>
+);
+
+// Helper components
+
+const CustomErrorDot = (props: any) =>
+  props.payload.errors >= 1 ? (
+    <circle cx={props.cx} cy={props.cy} r={4} fill="#ff4757" stroke="none" />
+  ) : null;
+
+const ResetButton = ({ onClick }: { onClick: () => void }) => (
+  <button
+    onClick={onClick}
+    className="mt-6 px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+  >
+    Try Again
+  </button>
+);
+
+// Helper functions
+const getUnit = (label: string) => {
+  switch (label) {
+    case "accuracy":
+      return "%";
+    case "wpm":
+      return "WPM";
+    case "time":
+      return "seconds";
+    case "errorCount":
+      return "total";
+    default:
+      return "";
+  }
+};
+
+const calculateStats = (
+  userInput: string,
+  errors: TypingError[],
+  startTime: number,
+  endTime: number,
+): TypingStats => {
+  const timeElapsed = (endTime - startTime) / 1000;
+  const correctChars = userInput
+    .split("")
+    .filter((char, i) => char === SAMPLE_TEXT[i]).length;
+
+  return {
+    accuracy: ((correctChars / SAMPLE_TEXT.length) * 100).toFixed(1),
+    wpm: (correctChars / 5 / (timeElapsed / 60)).toFixed(1),
+    time: timeElapsed.toFixed(1),
+    errorCount: errors.length,
+  };
+};
+
+// Main component
+export const Route = createLazyFileRoute("/rnfgrertt/typing")({
+  component: () => {
+    const {
+      userInput,
+      isFinished,
+      startTime,
+      endTime,
+      errors,
+      handleInput,
+      resetTest,
+    } = useTypingTest();
+    const { wpmData, resetWpmData } = useWpmTracker(
+      startTime,
+      isFinished,
+      userInput,
+    );
+    //const errorDistribution = useErrorTracker(errors);
+
+    const resetAll = () => {
+      resetTest();
+      resetWpmData();
+    };
+
+    const stats =
+      startTime && endTime
+        ? calculateStats(userInput, errors, startTime, endTime)
+        : ({} as TypingStats);
+
+    return (
+      <main className="h-screen relative max-h-[calc(100vh-5rem)] flex">
+        {isFinished ? (
+          <ResultsView stats={stats} wpmData={wpmData} resetTest={resetAll} />
+        ) : (
+          <TypingArea
+            userInput={userInput}
+            handleInput={(e) =>
+              handleInput((e.target as HTMLTextAreaElement).value)
+            }
+          />
+        )}
+      </main>
+    );
+  },
+});

tailwind.config.js

···
+import { fontFamily } from "tailwindcss/defaultTheme";
+
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-    darkMode: ["class"],
-    content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
-  theme: {
-  	extend: {
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			},
-  			sidebar: {
-  				DEFAULT: 'hsl(var(--sidebar-background))',
-  				foreground: 'hsl(var(--sidebar-foreground))',
-  				primary: 'hsl(var(--sidebar-primary))',
-  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-  				accent: 'hsl(var(--sidebar-accent))',
-  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-  				border: 'hsl(var(--sidebar-border))',
-  				ring: 'hsl(var(--sidebar-ring))'
-  			}
-  		}
-  	}
+export const darkMode = ["class"];
+export const content = ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"];
+export const theme = {
+  extend: {
+    fontFamily: {
+      sans: ["var(--font-sans)", ...fontFamily.sans],
+      serif: ["var(--font-serif)", ...fontFamily.serif],
+      mono: ["var(--font-mono)", ...fontFamily.mono],
+    },
+    borderRadius: {
+      lg: "var(--radius)",
+      md: "calc(var(--radius) - 2px)",
+      sm: "calc(var(--radius) - 4px)",
+    },
+    colors: {
+      background: "hsl(var(--background))",
+      foreground: "hsl(var(--foreground))",
+      card: {
+        DEFAULT: "hsl(var(--card))",
+        foreground: "hsl(var(--card-foreground))",
+      },
+      popover: {
+        DEFAULT: "hsl(var(--popover))",
+        foreground: "hsl(var(--popover-foreground))",
+      },
+      primary: {
+        DEFAULT: "hsl(var(--primary))",
+        foreground: "hsl(var(--primary-foreground))",
+      },
+      secondary: {
+        DEFAULT: "hsl(var(--secondary))",
+        foreground: "hsl(var(--secondary-foreground))",
+      },
+      muted: {
+        DEFAULT: "hsl(var(--muted))",
+        foreground: "hsl(var(--muted-foreground))",
+      },
+      accent: {
+        DEFAULT: "hsl(var(--accent))",
+        foreground: "hsl(var(--accent-foreground))",
+      },
+      destructive: {
+        DEFAULT: "hsl(var(--destructive))",
+        foreground: "hsl(var(--destructive-foreground))",
+      },
+      border: "hsl(var(--border))",
+      input: "hsl(var(--input))",
+      ring: "hsl(var(--ring))",
+      chart: {
+        1: "hsl(var(--chart-1))",
+        2: "hsl(var(--chart-2))",
+        3: "hsl(var(--chart-3))",
+        4: "hsl(var(--chart-4))",
+        5: "hsl(var(--chart-5))",
+      },
+      sidebar: {
+        DEFAULT: "hsl(var(--sidebar-background))",
+        foreground: "hsl(var(--sidebar-foreground))",
+        primary: "hsl(var(--sidebar-primary))",
+        "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+        accent: "hsl(var(--sidebar-accent))",
+        "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+        border: "hsl(var(--sidebar-border))",
+        ring: "hsl(var(--sidebar-ring))",
+      },
+    },
   },
-  plugins: [require("tailwindcss-animate")],
 };
+export const plugins = [require("tailwindcss-animate")];