From 014303b0d56b7d6bfd5692f18cd1a29d6437b8f5 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 28 Dec 2023 21:04:29 +0100
Subject: [PATCH] remove dependencies to @strudel.cycles/react

---
 pnpm-lock.yaml                          |   3 -
 website/package.json                    |   1 -
 website/public/dependencygraph.svg      |   6 -
 website/src/components/HeadCommon.astro |  36 +-
 website/src/components/PitchSlider.jsx  |   4 +-
 website/src/cx.mjs                      |  10 +
 website/src/pages/index.astro           |   4 +-
 website/src/repl/Header.jsx             |   3 +-
 website/src/repl/Loader.jsx             |   3 +-
 website/src/repl/Repl.jsx               |   2 +-
 website/src/repl/panel/ConsoleTab.jsx   |   3 +-
 website/src/repl/panel/Forms.jsx        |   3 +-
 website/src/repl/panel/Panel.jsx        |   3 +-
 website/src/repl/panel/SettingsTab.jsx  |   3 +-
 website/src/repl/panel/SoundsTab.jsx    |   3 +-
 website/src/repl/panel/WelcomeTab.jsx   |   4 +-
 website/src/repl/themes.mjs             | 482 ------------------------
 website/src/useEvent.mjs                |  12 +
 website/src/useFrame.mjs                |  43 +++
 19 files changed, 81 insertions(+), 547 deletions(-)
 create mode 100644 website/src/cx.mjs
 delete mode 100644 website/src/repl/themes.mjs
 create mode 100644 website/src/useEvent.mjs
 create mode 100644 website/src/useFrame.mjs

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5892af73..a9c5f796 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -669,9 +669,6 @@ importers:
       '@strudel.cycles/osc':
         specifier: workspace:*
         version: link:../packages/osc
-      '@strudel.cycles/react':
-        specifier: workspace:*
-        version: link:../packages/react
       '@strudel.cycles/serial':
         specifier: workspace:*
         version: link:../packages/serial
diff --git a/website/package.json b/website/package.json
index b2c5f39a..7557bdc6 100644
--- a/website/package.json
+++ b/website/package.json
@@ -27,7 +27,6 @@
     "@strudel.cycles/midi": "workspace:*",
     "@strudel.cycles/mini": "workspace:*",
     "@strudel.cycles/osc": "workspace:*",
-    "@strudel.cycles/react": "workspace:*",
     "@strudel.cycles/serial": "workspace:*",
     "@strudel.cycles/soundfonts": "workspace:*",
     "@strudel.cycles/tonal": "workspace:*",
diff --git a/website/public/dependencygraph.svg b/website/public/dependencygraph.svg
index 62fadac7..27f48833 100644
--- a/website/public/dependencygraph.svg
+++ b/website/public/dependencygraph.svg
@@ -96,12 +96,6 @@
 </g>
 <!-- @strudel.cycles/osc@0.6.0&#45;&gt;osc&#45;js@2.4.0 -->
 
-<!-- @strudel.cycles/react@0.6.0 -->
-<g id="node7" class="node module-_strudel_cycles_react collapsed maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/react@0.6.0">
-<title>@strudel.cycles/react@0.6.0</title>
-<path fill="none" stroke="black" d="M175.73,-499.3C175.73,-499.3 55.96,-499.3 55.96,-499.3 52.73,-499.3 49.49,-496.07 49.49,-492.83 49.49,-492.83 49.49,-486.37 49.49,-486.37 49.49,-483.13 52.73,-479.9 55.96,-479.9 55.96,-479.9 175.73,-479.9 175.73,-479.9 178.97,-479.9 182.2,-483.13 182.2,-486.37 182.2,-486.37 182.2,-492.83 182.2,-492.83 182.2,-496.07 178.97,-499.3 175.73,-499.3"></path>
-<text text-anchor="middle" x="115.85" y="-486.3" font-family="Roboto Condensed, sans-serif" font-size="11.00">@strudel.cycles/react@0.6.0</text>
-</g>
 <!-- @strudel.cycles/serial@0.6.0 -->
 <g id="node8" class="node module-_strudel_cycles_serial maintainer-yaxupaxo maintainer-felixroos license-agpl_3_0_or_later" data-module="@strudel.cycles/serial@0.6.0">
 <title>@strudel.cycles/serial@0.6.0</title>
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index ab18500f..cb3e605a 100644
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@@ -46,41 +46,9 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
 {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
 
 <script>
-  import { settings, injectStyle } from '../repl/themes.mjs';
-  import { settingsMap } from '../settings.mjs';
-  import { listenKeys } from 'nanostores';
-  const themeStyle = document.createElement('style');
-  themeStyle.id = 'strudel-theme';
-  document.head.append(themeStyle);
+  import { initTheme, codemirrorSettings } from '@strudel/codemirror';
 
-  let resetThemeStyle;
-  function activateTheme(name) {
-    if (!settings[name]) {
-      console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
-    }
-    const themeSettings = settings[name] || settings.strudelTheme;
-    // set css variables
-    themeStyle.innerHTML = `:root {
-      ${Object.entries(themeSettings)
-        // important to override fallback
-        .map(([key, value]) => `--${key}: ${value} !important;`)
-        .join('\n')}
-    }`;
-    // tailwind dark mode
-    if (themeSettings.light) {
-      document.documentElement.classList.remove('dark');
-    } else {
-      document.documentElement.classList.add('dark');
-    }
-    resetThemeStyle?.();
-    resetThemeStyle = undefined;
-    if (themeSettings.customStyle) {
-      resetThemeStyle = injectStyle(themeSettings.customStyle);
-    }
-  }
-
-  activateTheme(settingsMap.get().theme);
-  listenKeys(settingsMap, ['theme'], ({ theme }) => activateTheme(theme));
+  initTheme(codemirrorSettings.get().theme);
 
   // https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8
   const appHeight = () => {
diff --git a/website/src/components/PitchSlider.jsx b/website/src/components/PitchSlider.jsx
index b3c2b920..41b215fb 100644
--- a/website/src/components/PitchSlider.jsx
+++ b/website/src/components/PitchSlider.jsx
@@ -1,5 +1,5 @@
-import useEvent from '@strudel.cycles/react/src/hooks/useEvent.mjs';
-import useFrame from '@strudel.cycles/react/src/hooks/useFrame.mjs';
+import useEvent from '@src/useEvent.mjs';
+import useFrame from '@src/useFrame.mjs';
 import { getAudioContext } from '@strudel.cycles/webaudio';
 import { midi2note } from '@strudel.cycles/core';
 import { useState, useRef, useEffect } from 'react';
diff --git a/website/src/cx.mjs b/website/src/cx.mjs
new file mode 100644
index 00000000..4e4aea08
--- /dev/null
+++ b/website/src/cx.mjs
@@ -0,0 +1,10 @@
+/*
+cx.js - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/cx.js>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+export default function cx(...classes) {
+  // : Array<string | undefined>
+  return classes.filter(Boolean).join(' ');
+}
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 7db3da94..6630ef32 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -1,11 +1,11 @@
 ---
-import HeadCommonNext from '../components/HeadCommonNext.astro';
+import HeadCommon from '../components/HeadCommon.astro';
 import { Repl } from '../repl/Repl';
 ---
 
 <html lang="en" class="dark">
   <head>
-    <HeadCommonNext />
+    <HeadCommon />
     <title>Strudel REPL</title>
   </head>
   <body class="h-app-height bg-background">
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index 2592b917..9af54b12 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -4,8 +4,7 @@ import LinkIcon from '@heroicons/react/20/solid/LinkIcon';
 import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
 import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
-import { cx } from '@strudel.cycles/react';
-import React, { useContext } from 'react';
+import cx from '@src/cx.mjs';
 import { useSettings, setIsZen } from '../settings.mjs';
 // import { ReplContext } from './Repl';
 import './Repl.css';
diff --git a/website/src/repl/Loader.jsx b/website/src/repl/Loader.jsx
index 0c629402..a942ec2d 100644
--- a/website/src/repl/Loader.jsx
+++ b/website/src/repl/Loader.jsx
@@ -1,5 +1,4 @@
-import { cx } from '@strudel.cycles/react';
-import React from 'react';
+import cx from '@src/cx.mjs';
 
 function Loader({ active }) {
   return (
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 4aa677ad..4a350d55 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -5,7 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th
 */
 
 import { code2hash, getDrawContext, logger, silence } from '@strudel.cycles/core';
-import { cx } from '@strudel.cycles/react';
+import cx from '@src/cx.mjs';
 import { transpiler } from '@strudel.cycles/transpiler';
 import { getAudioContext, initAudioOnFirstClick, webaudioOutput } from '@strudel.cycles/webaudio';
 import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
diff --git a/website/src/repl/panel/ConsoleTab.jsx b/website/src/repl/panel/ConsoleTab.jsx
index 4472fd4c..b5681ab1 100644
--- a/website/src/repl/panel/ConsoleTab.jsx
+++ b/website/src/repl/panel/ConsoleTab.jsx
@@ -1,5 +1,4 @@
-import { cx } from '@strudel.cycles/react';
-import React from 'react';
+import cx from '@src/cx.mjs';
 
 export function ConsoleTab({ log }) {
   return (
diff --git a/website/src/repl/panel/Forms.jsx b/website/src/repl/panel/Forms.jsx
index 49d0e913..c5b22002 100644
--- a/website/src/repl/panel/Forms.jsx
+++ b/website/src/repl/panel/Forms.jsx
@@ -1,5 +1,4 @@
-import { cx } from '@strudel.cycles/react';
-import React from 'react';
+import cx from '@src/cx.mjs';
 
 export function ButtonGroup({ value, onChange, items }) {
   return (
diff --git a/website/src/repl/panel/Panel.jsx b/website/src/repl/panel/Panel.jsx
index b815770c..c2dbd443 100644
--- a/website/src/repl/panel/Panel.jsx
+++ b/website/src/repl/panel/Panel.jsx
@@ -1,6 +1,7 @@
 import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
 import { logger } from '@strudel.cycles/core';
-import { cx, useEvent } from '@strudel.cycles/react';
+import useEvent from '@src/useEvent.mjs';
+import cx from '@src/cx.mjs';
 import { nanoid } from 'nanoid';
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { setActiveFooter, useSettings } from '../../settings.mjs';
diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/panel/SettingsTab.jsx
index 3efab8f2..3f66e2ae 100644
--- a/website/src/repl/panel/SettingsTab.jsx
+++ b/website/src/repl/panel/SettingsTab.jsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import { defaultSettings, settingsMap, useSettings } from '../../settings.mjs';
-import { themes } from '../themes.mjs';
+import { themes } from '@strudel/codemirror';
 import { ButtonGroup } from './Forms.jsx';
 
 function Checkbox({ label, value, onChange }) {
diff --git a/website/src/repl/panel/SoundsTab.jsx b/website/src/repl/panel/SoundsTab.jsx
index 976361d0..a3639dfb 100644
--- a/website/src/repl/panel/SoundsTab.jsx
+++ b/website/src/repl/panel/SoundsTab.jsx
@@ -1,5 +1,4 @@
-import { useEvent } from '@strudel.cycles/react';
-// import { cx } from '@strudel.cycles/react';
+import useEvent from '@src/useEvent.mjs';
 import { useStore } from '@nanostores/react';
 import { getAudioContext, soundMap, connectToDestination } from '@strudel.cycles/webaudio';
 import React, { useMemo, useRef } from 'react';
diff --git a/website/src/repl/panel/WelcomeTab.jsx b/website/src/repl/panel/WelcomeTab.jsx
index feb0a583..bda6c3f5 100644
--- a/website/src/repl/panel/WelcomeTab.jsx
+++ b/website/src/repl/panel/WelcomeTab.jsx
@@ -1,6 +1,4 @@
-import { cx } from '@strudel.cycles/react';
-import React from 'react';
-import * as tunes from '../tunes.mjs';
+import cx from '@src/cx.mjs';
 
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
diff --git a/website/src/repl/themes.mjs b/website/src/repl/themes.mjs
deleted file mode 100644
index bee95fd1..00000000
--- a/website/src/repl/themes.mjs
+++ /dev/null
@@ -1,482 +0,0 @@
-import {
-  abcdef,
-  androidstudio,
-  atomone,
-  aura,
-  bespin,
-  darcula,
-  dracula,
-  duotoneDark,
-  eclipse,
-  githubDark,
-  gruvboxDark,
-  materialDark,
-  nord,
-  okaidia,
-  solarizedDark,
-  sublime,
-  tokyoNight,
-  tokyoNightStorm,
-  vscodeDark,
-  xcodeDark,
-  bbedit,
-  duotoneLight,
-  githubLight,
-  gruvboxLight,
-  materialLight,
-  noctisLilac,
-  solarizedLight,
-  tokyoNightDay,
-  xcodeLight,
-} from '@uiw/codemirror-themes-all';
-
-import strudelTheme from '@strudel.cycles/react/src/themes/strudel-theme';
-import bluescreen, { settings as bluescreenSettings } from '@strudel.cycles/react/src/themes/bluescreen';
-import blackscreen, { settings as blackscreenSettings } from '@strudel.cycles/react/src/themes/blackscreen';
-import whitescreen, { settings as whitescreenSettings } from '@strudel.cycles/react/src/themes/whitescreen';
-import teletext, { settings as teletextSettings } from '@strudel.cycles/react/src/themes/teletext';
-import algoboy, { settings as algoboySettings } from '@strudel.cycles/react/src/themes/algoboy';
-import terminal, { settings as terminalSettings } from '@strudel.cycles/react/src/themes/terminal';
-
-export const themes = {
-  strudelTheme,
-  bluescreen,
-  blackscreen,
-  whitescreen,
-  teletext,
-  algoboy,
-  terminal,
-  abcdef,
-  androidstudio,
-  atomone,
-  aura,
-  bespin,
-  darcula,
-  dracula,
-  duotoneDark,
-  eclipse,
-  githubDark,
-  gruvboxDark,
-  materialDark,
-  nord,
-  okaidia,
-  solarizedDark,
-  sublime,
-  tokyoNight,
-  tokyoNightStorm,
-  vscodeDark,
-  xcodeDark,
-  bbedit,
-  duotoneLight,
-  githubLight,
-  gruvboxLight,
-  materialLight,
-  noctisLilac,
-  solarizedLight,
-  tokyoNightDay,
-  xcodeLight,
-};
-
-// lineBackground is background with 50% opacity, to make sure the selection below is visible
-
-export const settings = {
-  strudelTheme: {
-    background: '#222',
-    lineBackground: '#22222299',
-    foreground: '#fff',
-    // foreground: '#75baff',
-    caret: '#ffcc00',
-    selection: 'rgba(128, 203, 196, 0.5)',
-    selectionMatch: '#036dd626',
-    // lineHighlight: '#8a91991a', // original
-    lineHighlight: '#00000050',
-    gutterBackground: 'transparent',
-    // gutterForeground: '#8a919966',
-    gutterForeground: '#8a919966',
-  },
-  bluescreen: bluescreenSettings,
-  blackscreen: blackscreenSettings,
-  whitescreen: whitescreenSettings,
-  teletext: teletextSettings,
-  algoboy: algoboySettings,
-  terminal: terminalSettings,
-  abcdef: {
-    background: '#0f0f0f',
-    lineBackground: '#0f0f0f99',
-    foreground: '#defdef',
-    caret: '#00FF00',
-    selection: '#515151',
-    selectionMatch: '#515151',
-    gutterBackground: '#555',
-    gutterForeground: '#FFFFFF',
-    lineHighlight: '#314151',
-  },
-  androidstudio: {
-    background: '#282b2e',
-    lineBackground: '#282b2e99',
-    foreground: '#a9b7c6',
-    caret: '#00FF00',
-    selection: '#343739',
-    selectionMatch: '#343739',
-    lineHighlight: '#343739',
-  },
-  atomone: {
-    background: '#272C35',
-    lineBackground: '#272C3599',
-    foreground: '#9d9b97',
-    caret: '#797977',
-    selection: '#ffffff30',
-    selectionMatch: '#2B323D',
-    gutterBackground: '#272C35',
-    gutterForeground: '#465063',
-    gutterBorder: 'transparent',
-    lineHighlight: '#2B323D',
-  },
-  aura: {
-    background: '#21202e',
-    lineBackground: '#21202e99',
-    foreground: '#edecee',
-    caret: '#a277ff',
-    selection: '#3d375e7f',
-    selectionMatch: '#3d375e7f',
-    gutterBackground: '#21202e',
-    gutterForeground: '#edecee',
-    gutterBorder: 'transparent',
-    lineHighlight: '#a394f033',
-  },
-  bbedit: {
-    light: true,
-    background: '#FFFFFF',
-    lineBackground: '#FFFFFF99',
-    foreground: '#000000',
-    caret: '#FBAC52',
-    selection: '#FFD420',
-    selectionMatch: '#FFD420',
-    gutterBackground: '#f5f5f5',
-    gutterForeground: '#4D4D4C',
-    gutterBorder: 'transparent',
-    lineHighlight: '#00000012',
-  },
-  bespin: {
-    background: '#28211c',
-    lineBackground: '#28211c99',
-    foreground: '#9d9b97',
-    caret: '#797977',
-    selection: '#36312e',
-    selectionMatch: '#4f382b',
-    gutterBackground: '#28211c',
-    gutterForeground: '#666666',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  darcula: {
-    background: '#2B2B2B',
-    lineBackground: '#2B2B2B99',
-    foreground: '#f8f8f2',
-    caret: '#FFFFFF',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    selectionMatch: 'rgba(255, 255, 255, 0.2)',
-    gutterBackground: 'rgba(255, 255, 255, 0.1)',
-    gutterForeground: '#999',
-    gutterBorder: 'transparent',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  dracula: {
-    background: '#282a36',
-    lineBackground: '#282a3699',
-    foreground: '#f8f8f2',
-    caret: '#f8f8f0',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    selectionMatch: 'rgba(255, 255, 255, 0.2)',
-    gutterBackground: '#282a36',
-    gutterForeground: '#6D8A88',
-    gutterBorder: 'transparent',
-    lineHighlight: 'rgba(255, 255, 255, 0.1)',
-  },
-  duotoneLight: {
-    light: true,
-    background: '#faf8f5',
-    lineBackground: '#faf8f599',
-    foreground: '#b29762',
-    caret: '#93abdc',
-    selection: '#e3dcce',
-    selectionMatch: '#e3dcce',
-    gutterBackground: '#faf8f5',
-    gutterForeground: '#cdc4b1',
-    gutterBorder: 'transparent',
-    lineHighlight: '#EFEFEF',
-  },
-  duotoneDark: {
-    background: '#2a2734',
-    lineBackground: '#2a273499',
-    foreground: '#6c6783',
-    caret: '#ffad5c',
-    selection: 'rgba(255, 255, 255, 0.1)',
-    gutterBackground: '#2a2734',
-    gutterForeground: '#545167',
-    lineHighlight: '#36334280',
-  },
-  eclipse: {
-    light: true,
-    background: '#fff',
-    lineBackground: '#ffffff99',
-    foreground: '#000',
-    caret: '#FFFFFF',
-    selection: '#d7d4f0',
-    selectionMatch: '#d7d4f0',
-    gutterBackground: '#f7f7f7',
-    gutterForeground: '#999',
-    lineHighlight: '#e8f2ff',
-    gutterBorder: 'transparent',
-  },
-  githubLight: {
-    light: true,
-    background: '#fff',
-    lineBackground: '#ffffff99',
-    foreground: '#24292e',
-    selection: '#BBDFFF',
-    selectionMatch: '#BBDFFF',
-    gutterBackground: '#fff',
-    gutterForeground: '#6e7781',
-  },
-  githubDark: {
-    background: '#0d1117',
-    lineBackground: '#0d111799',
-    foreground: '#c9d1d9',
-    caret: '#c9d1d9',
-    selection: '#003d73',
-    selectionMatch: '#003d73',
-    lineHighlight: '#36334280',
-  },
-  gruvboxDark: {
-    background: '#282828',
-    lineBackground: '#28282899',
-    foreground: '#ebdbb2',
-    caret: '#ebdbb2',
-    selection: '#bdae93',
-    selectionMatch: '#bdae93',
-    lineHighlight: '#3c3836',
-    gutterBackground: '#282828',
-    gutterForeground: '#7c6f64',
-  },
-  gruvboxLight: {
-    light: true,
-    background: '#fbf1c7',
-    lineBackground: '#fbf1c799',
-    foreground: '#3c3836',
-    caret: '#af3a03',
-    selection: '#ebdbb2',
-    selectionMatch: '#bdae93',
-    lineHighlight: '#ebdbb2',
-    gutterBackground: '#ebdbb2',
-    gutterForeground: '#665c54',
-    gutterBorder: 'transparent',
-  },
-  materialDark: {
-    background: '#2e3235',
-    lineBackground: '#2e323599',
-    foreground: '#bdbdbd',
-    caret: '#a0a4ae',
-    selection: '#d7d4f0',
-    selectionMatch: '#d7d4f0',
-    gutterBackground: '#2e3235',
-    gutterForeground: '#999',
-    gutterActiveForeground: '#4f5b66',
-    lineHighlight: '#545b61',
-  },
-  materialLight: {
-    light: true,
-    background: '#FAFAFA',
-    lineBackground: '#FAFAFA99',
-    foreground: '#90A4AE',
-    caret: '#272727',
-    selection: '#80CBC440',
-    selectionMatch: '#FAFAFA',
-    gutterBackground: '#FAFAFA',
-    gutterForeground: '#90A4AE',
-    gutterBorder: 'transparent',
-    lineHighlight: '#CCD7DA50',
-  },
-  noctisLilac: {
-    light: true,
-    background: '#f2f1f8',
-    lineBackground: '#f2f1f899',
-    foreground: '#0c006b',
-    caret: '#5c49e9',
-    selection: '#d5d1f2',
-    selectionMatch: '#d5d1f2',
-    gutterBackground: '#f2f1f8',
-    gutterForeground: '#0c006b70',
-    lineHighlight: '#e1def3',
-  },
-  nord: {
-    background: '#2e3440',
-    lineBackground: '#2e344099',
-    foreground: '#FFFFFF',
-    caret: '#FFFFFF',
-    selection: '#3b4252',
-    selectionMatch: '#e5e9f0',
-    gutterBackground: '#2e3440',
-    gutterForeground: '#4c566a',
-    gutterActiveForeground: '#d8dee9',
-    lineHighlight: '#4c566a',
-  },
-  okaidia: {
-    background: '#272822',
-    lineBackground: '#27282299',
-    foreground: '#FFFFFF',
-    caret: '#FFFFFF',
-    selection: '#49483E',
-    selectionMatch: '#49483E',
-    gutterBackground: '#272822',
-    gutterForeground: '#FFFFFF70',
-    lineHighlight: '#00000059',
-  },
-  solarizedLight: {
-    light: true,
-    background: '#fdf6e3',
-    lineBackground: '#fdf6e399',
-    foreground: '#657b83',
-    caret: '#586e75',
-    selection: '#dfd9c8',
-    selectionMatch: '#dfd9c8',
-    gutterBackground: '#00000010',
-    gutterForeground: '#657b83',
-    lineHighlight: '#dfd9c8',
-  },
-  solarizedDark: {
-    background: '#002b36',
-    lineBackground: '#002b3699',
-    foreground: '#93a1a1',
-    caret: '#839496',
-    selection: '#173541',
-    selectionMatch: '#aafe661a',
-    gutterBackground: '#00252f',
-    gutterForeground: '#839496',
-    lineHighlight: '#173541',
-  },
-  sublime: {
-    background: '#303841',
-    lineBackground: '#30384199',
-    foreground: '#FFFFFF',
-    caret: '#FBAC52',
-    selection: '#4C5964',
-    selectionMatch: '#3A546E',
-    gutterBackground: '#303841',
-    gutterForeground: '#FFFFFF70',
-    lineHighlight: '#00000059',
-  },
-  tokyoNightDay: {
-    light: true,
-    background: '#e1e2e7',
-    lineBackground: '#e1e2e799',
-    foreground: '#3760bf',
-    caret: '#3760bf',
-    selection: '#99a7df',
-    selectionMatch: '#99a7df',
-    gutterBackground: '#e1e2e7',
-    gutterForeground: '#3760bf',
-    gutterBorder: 'transparent',
-    lineHighlight: '#5f5faf11',
-  },
-  tokyoNightStorm: {
-    background: '#24283b',
-    lineBackground: '#24283b99',
-    foreground: '#7982a9',
-    caret: '#c0caf5',
-    selection: '#6f7bb630',
-    selectionMatch: '#1f2335',
-    gutterBackground: '#24283b',
-    gutterForeground: '#7982a9',
-    gutterBorder: 'transparent',
-    lineHighlight: '#292e42',
-  },
-  tokyoNight: {
-    background: '#1a1b26',
-    lineBackground: '#1a1b2699',
-    foreground: '#787c99',
-    caret: '#c0caf5',
-    selection: '#515c7e40',
-    selectionMatch: '#16161e',
-    gutterBackground: '#1a1b26',
-    gutterForeground: '#787c99',
-    gutterBorder: 'transparent',
-    lineHighlight: '#1e202e',
-  },
-  vscodeDark: {
-    background: '#1e1e1e',
-    lineBackground: '#1e1e1e99',
-    foreground: '#9cdcfe',
-    caret: '#c6c6c6',
-    selection: '#6199ff2f',
-    selectionMatch: '#72a1ff59',
-    lineHighlight: '#ffffff0f',
-    gutterBackground: '#1e1e1e',
-    gutterForeground: '#838383',
-    gutterActiveForeground: '#fff',
-  },
-  xcodeLight: {
-    light: true,
-    background: '#fff',
-    lineBackground: '#ffffff99',
-    foreground: '#3D3D3D',
-    selection: '#BBDFFF',
-    selectionMatch: '#BBDFFF',
-    gutterBackground: '#fff',
-    gutterForeground: '#AFAFAF',
-    lineHighlight: '#EDF4FF',
-  },
-  xcodeDark: {
-    background: '#292A30',
-    lineBackground: '#292A3099',
-    foreground: '#CECFD0',
-    caret: '#fff',
-    selection: '#727377',
-    selectionMatch: '#727377',
-    lineHighlight: '#2F3239',
-  },
-};
-
-function getColors(str) {
-  const colorRegex = /#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})/g;
-  const colors = [];
-
-  let match;
-  while ((match = colorRegex.exec(str)) !== null) {
-    const color = match[0];
-    if (!colors.includes(color)) {
-      colors.push(color);
-    }
-  }
-
-  return colors;
-}
-
-// TODO: remove
-export function themeColors(theme) {
-  return getColors(stringifySafe(theme));
-}
-
-function getCircularReplacer() {
-  const seen = new WeakSet();
-  return (key, value) => {
-    if (typeof value === 'object' && value !== null) {
-      if (seen.has(value)) {
-        return;
-      }
-      seen.add(value);
-    }
-    return value;
-  };
-}
-
-function stringifySafe(json) {
-  return JSON.stringify(json, getCircularReplacer());
-}
-
-export function injectStyle(rule) {
-  const newStyle = document.createElement('style');
-  document.head.appendChild(newStyle);
-  const styleSheet = newStyle.sheet;
-  const ruleIndex = styleSheet.insertRule(rule, 0);
-  return () => styleSheet.deleteRule(ruleIndex);
-}
diff --git a/website/src/useEvent.mjs b/website/src/useEvent.mjs
new file mode 100644
index 00000000..f349c6e7
--- /dev/null
+++ b/website/src/useEvent.mjs
@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+function useEvent(name, onTrigger, useCapture = false) {
+  useEffect(() => {
+    document.addEventListener(name, onTrigger, useCapture);
+    return () => {
+      document.removeEventListener(name, onTrigger, useCapture);
+    };
+  }, [onTrigger]);
+}
+
+export default useEvent;
diff --git a/website/src/useFrame.mjs b/website/src/useFrame.mjs
new file mode 100644
index 00000000..130609d0
--- /dev/null
+++ b/website/src/useFrame.mjs
@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react';
+
+function useFrame(callback, autostart = false) {
+  const requestRef = useRef();
+  const previousTimeRef = useRef();
+
+  const animate = (time) => {
+    if (previousTimeRef.current !== undefined) {
+      const deltaTime = time - previousTimeRef.current;
+      callback(time, deltaTime);
+    }
+    previousTimeRef.current = time;
+    requestRef.current = requestAnimationFrame(animate);
+  };
+
+  const start = () => {
+    requestRef.current = requestAnimationFrame(animate);
+  };
+  const stop = () => {
+    requestRef.current && cancelAnimationFrame(requestRef.current);
+    delete requestRef.current;
+  };
+  useEffect(() => {
+    if (requestRef.current) {
+      stop();
+      start();
+    }
+  }, [callback]);
+
+  useEffect(() => {
+    if (autostart) {
+      start();
+    }
+    return stop;
+  }, []); // Make sure the effect only runs once
+
+  return {
+    start,
+    stop,
+  };
+}
+
+export default useFrame;